/* ============================================================
   La Rosa dei Venti APS — Main Stylesheet
   ============================================================ */

/* ------------------------------------------------------------
   CSS Custom Properties
   ------------------------------------------------------------ */
:root {
  --primary: #E8630A;
  --primary-light: #FFF3E8;
  --gradient: linear-gradient(135deg, #E8630A, #F4A460);
  --accent-green: #28a745;
  --accent-blue: #007bff;
  --accent-gray: #6c757d;
  --dark: #333;
  --radius-card: 8px;
  --radius-input: 4px;
}

/* ------------------------------------------------------------
   Base / Reset
   ------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #333;
  background: #fff;
}

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

a {
  color: var(--primary);
}

/* ------------------------------------------------------------
   Navbar
   ------------------------------------------------------------ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--primary);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
  height: 64px;
}

.navbar-brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.2rem;
}

.navbar-menu {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar-menu a {
  color: white;
  text-decoration: none;
  padding: 0.5rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.3s;
}

.navbar-menu a.active,
.navbar-menu a:hover {
  border-bottom-color: white;
}

.hamburger {
  display: none;
  color: white;
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
}

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.footer {
  background: var(--dark);
  color: white;
  padding: 2rem;
  text-align: center;
}

.footer a {
  color: #F4A460;
}

.footer-social {
  margin: 1rem 0;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.footer-social a {
  color: white;
  display: inline-flex;
  align-items: center;
}

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
.hero {
  min-height: 60vh;
  background: var(--gradient);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
  padding: 2rem;
  margin-top: 64px;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.hero p {
  font-size: 1.2rem;
  opacity: 0.9;
  margin-bottom: 1.5rem;
}

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.btn-primary {
  display: inline-block;
  background: white;
  color: var(--primary);
  padding: 0.75rem 2rem;
  border-radius: var(--radius-card);
  font-weight: bold;
  text-decoration: none;
  transition: transform 0.2s;
  font-size: 1rem;
}

.btn-primary:hover {
  transform: scale(1.05);
}

/* ------------------------------------------------------------
   Layout
   ------------------------------------------------------------ */
main {
  margin-top: 64px;
}

.section {
  padding: 3rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.section-title {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  color: var(--dark);
}

/* ------------------------------------------------------------
   Cards Grid
   ------------------------------------------------------------ */
/* ⚠️ Quattro per riga, chiesto dal committente (23/08/2026).
   Prima era un impaginato a tre COLONNE (`columns: 3`), che è una cosa
   diversa da una griglia: le schede scorrevano per colonna, quindi la
   seconda scheda in ordine di data finiva a metà pagina invece che
   accanto alla prima. Con la griglia l'ordine si legge da sinistra a
   destra, come chiunque si aspetta. */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 1100px) {
  .cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 860px) {
  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .cards-grid {
    grid-template-columns: 1fr;
  }
}

.card {
  background: white;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.card:hover {
  transform: translateY(-4px);
}

/* ⚠️ Riquadro d'immagine con proporzione FISSA (3:4, verticale come una
   locandina): senza, ogni scheda era alta quanto la sua immagine e la
   riga veniva a scalini. Adesso le quattro schede di una riga cominciano
   e finiscono insieme. */
.card-image {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #f6efe7;
  position: relative;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.card:hover .card-image img {
  transform: scale(1.04);
}

/* ⛔ Una LOCANDINA non si taglia: è fatta di scritte, e ritagliarla per
   riempire il riquadro le porta via il titolo o le date — cioè proprio
   quello per cui esiste. Si mostra intera, sul fondo chiaro. Le
   fotografie invece riempiono, che è come si guardano.
   Il riconoscimento è il prefisso `loc-` nel nome del file: è la stessa
   convenzione con cui le locandine sono state separate dalle fotografie
   in archivio. */
.card-image img.locandina {
  object-fit: contain;
  padding: 0.4rem;
}

.card {
  background: white;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 3px 14px rgba(20, 10, 4, 0.09);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(20, 10, 4, 0.16);
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .card:hover,
  .card-image img,
  .card:hover .card-image img {
    transition: none;
    transform: none;
  }
}

/* Miniature che aprono l'ingranditore (progetti, eventi, gallery): sono
   diventate raggiungibili e attivabili da tastiera, quindi serve un fuoco
   visibile — non solo il clic del mouse. */
.card-image:focus-visible,
.gallery-item:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

.card-body {
  padding: 1rem;
}

.card-body h3 {
  margin-bottom: 0.5rem;
}

.card-body .date {
  font-size: 0.85rem;
  color: #999;
  margin-bottom: 0.5rem;
}

/* ------------------------------------------------------------
   Feature Cards
   ------------------------------------------------------------ */
.feature-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding: 3rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.feature-card {
  background: var(--primary-light);
  border-radius: var(--radius-card);
  padding: 2rem;
  text-align: center;
  text-decoration: none;
  color: #333;
  transition: transform 0.2s;
}

.feature-card:hover {
  transform: translateY(-4px);
}

.feature-card .icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

/* ------------------------------------------------------------
   Filter Bar
   ------------------------------------------------------------ */
/* La barra della ricerca.
   ⭐ 29/08/2026: non e' piu' una fascia a tutta larghezza appiccicata in cima
   alla pagina. E' un campo solo, che sta SOTTO i pulsanti e dentro il
   contenuto — prima si sceglie il gruppo, poi eventualmente si cerca dentro.
   ⛔ Niente `position: sticky`: aveva senso quando stava in testa e la si
      voleva sempre a portata; ora seguirebbe lo scorrimento sovrapponendosi
      alle schede.
   ⚠️ `font-size: 1rem` non e' un dettaglio estetico: sotto i 16px iOS
      ingrandisce da solo la pagina appena si tocca il campo, e chi guarda si
      ritrova il sito spostato senza aver fatto niente.
   ⚠️ `min-height: 44px`: la misura sotto la quale un dito sbaglia bersaglio. */
.filter-bar {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto 1.5rem;
  padding: 0 1rem;
}

.filter-bar input[type="text"] {
  flex: 1;
  min-width: 200px;
  min-height: 44px;
  padding: 0.55rem 1rem;
  border: 1px solid #ddd;
  border-radius: var(--radius-input);
  font: inherit;
  font-size: 1rem;
}

.filter-bar input[type="text"]:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  border-color: var(--primary);
}

/* Dentro una sezione il rientro orizzontale ce l'ha gia' la sezione: se lo
   mettesse anche la barra, il campo risulterebbe spostato di 1rem rispetto ai
   pulsanti che gli stanno sopra. */
.project-section .filter-bar {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 1.5rem;
}

/* ------------------------------------------------------------
   Project Sections
   ------------------------------------------------------------ */
.project-section {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.project-section-title {
  font-size: 1.4rem;
  padding-left: 1rem;
  border-left: 4px solid;
  margin-bottom: 1.5rem;
}

.project-section-title.in-corso {
  border-color: var(--accent-green);
  color: var(--accent-green);
}

.project-section-title.futuro {
  border-color: var(--accent-blue);
  color: var(--accent-blue);
}

/* ⚠️ Quattro per riga (23/08/2026). Era un impaginato a COLONNE, come lo
   erano i progetti: le schede scorrevano per colonna, quindi il secondo
   evento in ordine di data finiva a metà pagina invece che accanto al
   primo. Stessa griglia e stesse soglie di `.cards-grid`, così le due
   pagine si comportano allo stesso modo — erano due regole diverse per
   la stessa cosa, ed è così che una delle due resta indietro. */
.events-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 1100px) {
  .events-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 860px) {
  .events-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .events-grid {
    grid-template-columns: 1fr;
  }
}

.event-meta {
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.project-section-title.passato {
  border-color: var(--accent-gray);
  color: var(--accent-gray);
}

/* ------------------------------------------------------------
   Pulsanti di stato (progetti.html, 24/08/2026)
   ------------------------------------------------------------
   ⚠️ Sostituiscono le tre sezioni impilate (in corso/futuro/passato viste
   tutte insieme): se ne vede una alla volta, scelta col clic. Il numero
   dentro ogni pulsante lo scrive renderProjects() in js/main.js — è
   sempre il conteggio DOPO ricerca e filtro data correnti.
   ------------------------------------------------------------ */
.stato-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}

.stato-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 1.3rem;
  border-radius: 999px;
  border: 2px solid var(--primary);
  background: white;
  color: var(--primary);
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}

.stato-btn:hover {
  transform: translateY(-2px);
}

.stato-btn.attivo {
  background: var(--primary);
  color: white;
}

.stato-btn .stato-conteggio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.7rem;
  height: 1.7rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.stato-btn.attivo .stato-conteggio {
  background: rgba(255, 255, 255, 0.92);
  color: var(--primary);
}

@media (prefers-reduced-motion: reduce) {
  .stato-btn {
    transition: none;
  }
  .stato-btn:hover {
    transform: none;
  }
}

/* ⛔ Un elenco vuoto non resta bianco: qui la frase spiega perché — mai
   solo "0 risultati" — e i pulsanti dentro il testo (data-vai-stato)
   mandano a uno stato che ha davvero delle schede. */
.progetti-vuoto {
  background: var(--primary-light);
  border: 2px dashed var(--primary);
  border-radius: 14px;
  padding: 1.5rem 1.75rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--dark);
  margin-bottom: 1.5rem;
}

.progetti-vuoto .link-vuoto {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 700;
  color: var(--primary);
  text-decoration: underline;
  cursor: pointer;
}

/* ------------------------------------------------------------
   Scheda raggruppata per titolo (progetti.html ED eventi.html, 24-25/08/2026)
   ------------------------------------------------------------
   ⚠️ Una scheda per PROGETTO/EVENTO, non per edizione: qui sotto il
   titolo c'è la fascia di anni coperta e — solo se è tornato più di una
   volta — il numero di edizioni. "1 edizione" non si scrive mai: sembra
   un dato scritto per errore, non un'informazione.
   ⛔ Condivisa dalle due pagine (vedi raggruppaPerTitolo/renderBadgeEdizioni
   in js/main.js): un solo stile per la stessa idea, non una copia ciascuna.
   ------------------------------------------------------------ */
.progetto-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  color: #777;
  margin-bottom: 0.5rem;
}

.edizioni-badge {
  display: inline-block;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 1rem;
  font-weight: 700;
  padding: 0.1rem 0.65rem;
  border-radius: 999px;
}

/* Riga «▸ Edizione 2026/2027 — 6 ott 2026 – 15 giu 2027» sotto la fascia
   anni: SOLO progetti (renderRigaEdizioneRilevante in js/main.js). È
   l'edizione in corso adesso, o la prossima futura, o l'ultima conclusa —
   mai l'elenco di tutte.
   ⭐ Il committente non vede bene: 1rem (16px) come il resto della scheda,
   non una didascalia minuscola. */
.progetto-edizione-rilevante {
  margin: 0.4rem 0 0;
  font-size: 1rem;
  line-height: 1.5;
}

.progetto-edizione-label {
  display: block;
  font-weight: 700;
  color: var(--primary);
}

/* Gli incontri in programma dell'edizione nominata sopra: allineati con la
   data, non con l'etichetta, perche' sono due fatti sullo stesso anno. */
.progetto-edizione-programma {
  display: block;
  padding-left: 1.1rem;
  color: var(--dark);
}

.progetto-edizione-date {
  display: block;
  padding-left: 1.1rem;
  color: var(--dark);
}

/* I numeri sommati sulle edizioni: solo quelli che il progetto ha
   davvero (vedi renderNumeriProgetto in js/main.js) — un campo che
   nessuna edizione conta non compare come "0", sparisce del tutto. */
.progetto-numeri {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-size: 1rem;
  color: var(--dark);
  margin: 0.7rem 0 0;
}

.progetto-numeri span {
  white-space: nowrap;
}

.progetto-sponsor,
.progetto-collaboratori {
  font-size: 1rem;
  color: #555;
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px solid #eee;
}

/* «In collaborazione con …» sta sotto «Sostenuto da …» (14/09/2026), e
   quando ci sono entrambe la seconda non ripete il filetto: sono due righe
   dello stesso blocco, non due blocchi. Da sola, si comporta come quella
   degli sponsor. */
.progetto-sponsor + .progetto-collaboratori {
  margin-top: 0.3rem;
  padding-top: 0;
  border-top: 0;
}

/* Riga "📍 luogo" sulla scheda evento raggruppata: gli eventi non hanno
   incontri/ore/partecipanti come i progetti, quindi qui non c'è
   `.progetto-numeri` — solo il luogo, se l'evento ce l'ha. */
.evento-luogo {
  font-size: 1rem;
  color: var(--dark);
  margin-top: 0.6rem;
}

/* ------------------------------------------------------------
   Gallery
   ------------------------------------------------------------ */
/* ⚠️ Miniature piccole (22/08/2026): prima erano a piena colonna (masonry
   su 3 colonne), se ne vedevano poche per schermata. Ora è una griglia di
   caselle piccole e uniformi — restano leggibili e cliccabili anche sul
   telefono, ma se ne vede molte di più in una volta. */
/* ⚠️ Cinque per riga, chiesto dal committente (23/08/2026), che scendono
   con lo stesso criterio di `.cards-grid` (soglie 1100/860/520). Sul
   telefono NON restano cinque: sarebbero francobolli illeggibili per chi
   non ci vede bene — a 520px scende a due, mai a una sola perché una
   galleria a un'immagine per riga scorre all'infinito. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 1100px) {
  .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 860px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
    padding: 1.25rem;
  }
}

@media (max-width: 520px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
    padding: 1rem;
  }
}

.gallery-item {
  cursor: pointer;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.gallery-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.3s;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

.gallery-item-info {
  padding: 0.75rem;
}

.gallery-item-info h3 {
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

/* ⚠️ Era 0.85rem (13.6px): sotto la soglia di leggibilità del sito. */
.gallery-item-info .date {
  font-size: 1rem;
  color: #999;
}

/* ------------------------------------------------------------
   Lightbox
   ------------------------------------------------------------ */
.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.lightbox.active {
  display: flex;
}

.lightbox img {
  max-width: 90%;
  max-height: 80vh;
  border-radius: var(--radius-card);
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  background: none;
  border: none;
  padding: 1rem;
}

/* Fuoco ben visibile sui tre pulsanti: sfondo scuro pieno, serve un
   contorno netto e non il sottile anello di default del browser. */
.lightbox-close:focus-visible,
.lightbox-prev:focus-visible,
.lightbox-next:focus-visible {
  outline: 3px solid white;
  outline-offset: 2px;
}

.lightbox-close {
  top: 1rem;
  right: 1rem;
}

.lightbox-prev {
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-next {
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-caption {
  color: white;
  text-align: center;
  padding: 1rem;
  max-width: 600px;
  margin: 0 auto;
}

.lightbox-caption h3 {
  font-size: 1.15rem;
  margin-bottom: 0.4rem;
}

/* Riga data/luogo sotto il titolo, nell'ingranditore. */
.lightbox-meta {
  font-size: 1rem;
  margin-bottom: 0.4rem;
}

.lightbox-caption p {
  font-size: 1rem;
}

/* ------------------------------------------------------------
   Contact Page
   ------------------------------------------------------------ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.contact-info h3 {
  color: var(--primary);
  margin-bottom: 1rem;
}

.contact-info p {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: var(--radius-input);
  margin-bottom: 1rem;
  font-family: inherit;
  font-size: 1rem;
}

.contact-form textarea {
  min-height: 150px;
  resize: vertical;
}

.contact-form button {
  background: var(--primary);
  color: white;
  padding: 0.75rem 2rem;
  border: none;
  border-radius: var(--radius-input);
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.3s;
}

.contact-form button:hover {
  background: #d4570a;
}

.map-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem 2rem;
}

.map-container iframe {
  width: 100%;
  height: 400px;
  border: none;
  border-radius: var(--radius-card);
}

/* ------------------------------------------------------------
   Mission Page
   ------------------------------------------------------------ */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.value-card {
  background: var(--primary-light);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  text-align: center;
}

.value-card .icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: var(--primary);
}

.value-card h3 {
  margin-bottom: 0.5rem;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
}

.team-card {
  text-align: center;
  padding: 1.5rem;
}

.team-card img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 1rem;
}

.team-card h3 {
  margin-bottom: 0.25rem;
}

.team-card p {
  color: #666;
  font-size: 0.9rem;
}

.team-card .team-role {
  color: var(--primary);
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

.team-card .team-contact {
  color: #555;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.team-card .team-contact a {
  color: inherit;
  text-decoration: none;
}

.team-card .team-contact a:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------------
   Stats Grid
   ------------------------------------------------------------ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

/* ⚠️ I numeri salgono da zero quando entrano nello schermo (`animaNumeri`
   in `js/main.js`): fermi sembravano una tabella, e una tabella non la
   guarda nessuno. Il riquadro resta chiaro e il numero grande è la cosa
   che si vede per prima da lontano. */
.stat-card {
  position: relative;
  background: #ffffff;
  border: 1px solid #f0e2d5;
  border-radius: 16px;
  padding: 1.6rem 1.2rem 1.4rem;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(20, 10, 4, 0.07);
  transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, #f6b26b 0%, var(--primary) 100%);
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(20, 10, 4, 0.12);
}

.stat-card .stat-icona {
  display: block;
  font-size: 1.7rem;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.stat-card .stat-number {
  font-size: 2.7rem;
  font-weight: bold;
  color: var(--primary);
  display: block;
  line-height: 1.05;
  /* ⚠️ Cifre a larghezza fissa: mentre il numero sale, senza questo la
     scritta si allarga e si stringe a ogni fotogramma e balla. */
  font-variant-numeric: tabular-nums;
}

/* ⚠️ Era 0.9rem, cioe' 14 pixel: sotto la soglia di leggibilita' che vale
   per tutto questo sito. */
.stat-card .stat-label {
  font-size: 1rem;
  color: #5b4f46;
  margin-top: 0.35rem;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .stat-card,
  .stat-card:hover {
    transition: none;
    transform: none;
  }
}

/* ------------------------------------------------------------
   Partners Page
   ------------------------------------------------------------ */
/* ⚠️ Quattro per riga, chiesto dal committente (23/08/2026). Erano tante
   quante ne entravano da 280px in su: su uno schermo largo diventavano
   cinque o sei strette, su uno medio tre — cioè un numero diverso a ogni
   finestra, e trentadue schede sparse senza un ritmo.
   ⚠️ Il numero fisso vale finché c'è spazio: sotto le due soglie qui in
   fondo si scende a due e poi a una. Quattro schede da 90 pixel su un
   telefono sarebbero quattro francobolli. */
.partners-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

@media (max-width: 900px) {
  .partners-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .partners-grid {
    grid-template-columns: 1fr;
  }
}

.partner-card {
  background: white;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
  display: flex;
  flex-direction: column;
}

.partner-card:hover {
  transform: translateY(-4px);
}

.partner-card-logo {
  width: 100%;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9f9f9;
  padding: 1.5rem;
}

.partner-card-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.partner-card-logo .partner-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2rem;
  font-weight: bold;
}

.partner-card-body {
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.partner-card-body h3 {
  margin-bottom: 0.25rem;
  font-size: 1.05rem;
}

.partner-card-body .partner-type {
  font-size: 0.8rem;
  color: white;
  background: var(--primary);
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  margin-bottom: 0.5rem;
  align-self: flex-start;
}

.partner-card-body p {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.5;
  flex: 1;
}

.partner-card-body .partner-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}

.partner-card-body .partner-link:hover {
  text-decoration: underline;
}

#partner-type-filter {
  padding: 0.5rem 1rem;
  border: 1px solid #ddd;
  border-radius: var(--radius-input);
  font-size: 0.9rem;
  background: white;
}

/* ------------------------------------------------------------
   Tabella sponsor — «Con il sostegno di» (partner.html, 24/08/2026)
   ------------------------------------------------------------
   ⚠️ Serve per chiedere un contributo nuovo: "l'anno scorso col vostro
   sostegno abbiamo fatto questo". Righe e nota sono calcolate da
   loadPartnerSponsorship() in js/main.js da data/projects.json — mai
   scritte a mano, altrimenti si disallineano al primo progetto aggiunto.
   ------------------------------------------------------------ */
.sostegno-sponsor {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid #eee;
}

.sostegno-sponsor-nota {
  font-size: 1rem;
  color: #666;
  line-height: 1.5;
  max-width: 68ch;
  margin-bottom: 1.5rem;
}

.sostegno-sponsor-vuoto {
  font-size: 1rem;
  color: #999;
  text-align: center;
  padding: 2rem 0;
}

/* ⛔ Lo scorrimento resta DENTRO la tabella, non nella pagina: su un
   telefono cinque colonne non ci stanno tutte, ma la pagina non deve
   scorrere di lato per questo. */
.tabella-scroll {
  overflow-x: auto;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.tabella-sponsor {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 1rem;
}

.tabella-sponsor th,
.tabella-sponsor td {
  padding: 0.85rem 1.1rem;
  text-align: left;
  border-bottom: 1px solid #f0e2d5;
}

.tabella-sponsor thead th {
  background: var(--primary-light);
  color: var(--dark);
  font-weight: 700;
  white-space: nowrap;
}

.tabella-sponsor tbody th[scope="row"] {
  font-weight: 600;
  color: var(--dark);
  background: white;
}

.tabella-sponsor tbody tr:nth-child(even) td,
.tabella-sponsor tbody tr:nth-child(even) th {
  background: #fdfaf7;
}

.tabella-sponsor td {
  color: #444;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
   404 Page
   ------------------------------------------------------------ */
.page-404 {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}

.page-404 h1 {
  font-size: 4rem;
  color: var(--primary);
  margin-bottom: 1rem;
}

.page-404 p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

/* ------------------------------------------------------------
   Pagina di ritorno da una donazione — grazie.html, 09/09/2026
   ------------------------------------------------------------
   ⚠️ Stessa impostazione di `.page-404` (una pagina, un centro, una sola
   cosa da dire) apposta: non è un'altra pagina di errore, ma è la stessa
   idea di «una pagina che dice una cosa sola e basta». */
.pagina-esito {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  max-width: 640px;
  margin: 0 auto;
}

.pagina-esito-icona {
  font-size: 3.5rem;
  margin-bottom: 1rem;
}

.pagina-esito h1 {
  font-size: 2.2rem;
  color: var(--primary);
  margin-bottom: 1rem;
}

.pagina-esito p {
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

/* La riga che dice «arriva per email»: non è l'informazione principale, ma
   deve leggersi bene lo stesso — 16px, mai un grigio più chiaro di questo. */
.pagina-esito-nota {
  background: var(--primary-light);
  border: 2px solid var(--primary);
  border-radius: var(--radius-input);
  padding: 1rem 1.25rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--dark);
  margin-bottom: 1.5rem;
}

.pagina-esito-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* ------------------------------------------------------------
   Solid button (per sfondi bianchi, dove .btn-primary si legge poco)
   ------------------------------------------------------------ */
.btn-solid {
  display: inline-block;
  background: var(--primary);
  color: white;
  padding: 0.75rem 1.75rem;
  border: none;
  border-radius: var(--radius-card);
  font-weight: bold;
  font-size: 1rem;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background 0.3s;
  white-space: nowrap;
}

.btn-solid:hover {
  background: #d4570a;
}

.btn-solid.disabled,
.btn-solid[disabled] {
  background: #ccc;
  color: #666;
  cursor: not-allowed;
}

.btn-solid.disabled:hover,
.btn-solid[disabled]:hover {
  background: #ccc;
}

/* ------------------------------------------------------------
   Documenti Page
   ------------------------------------------------------------ */
.documents-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.document-item {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: white;
  border-radius: var(--radius-card);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 1.25rem 1.5rem;
}

.document-icon {
  font-size: 2.5rem;
  flex-shrink: 0;
}

.document-body {
  flex: 1;
  min-width: 0;
}

.document-body h3 {
  margin-bottom: 0.35rem;
}

.document-body p {
  color: #555;
  font-size: 0.95rem;
  line-height: 1.5;
}

.document-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.6rem;
  font-size: 0.85rem;
}

.document-meta .document-year {
  background: var(--accent-gray);
  color: white;
  padding: 0.15rem 0.55rem;
  border-radius: 3px;
  font-weight: 600;
}

.document-meta .document-size {
  color: #888;
}

.document-meta .document-missing-badge {
  background: #fbe4e4;
  color: #b3261e;
  padding: 0.15rem 0.55rem;
  border-radius: 3px;
  font-weight: 600;
}

.document-item.document-missing {
  border: 1px dashed #ccc;
  box-shadow: none;
}

.document-download {
  flex-shrink: 0;
}

.document-download.disabled {
  pointer-events: none;
}

/* ------------------------------------------------------------
   Sostienici Page
   ------------------------------------------------------------ */
.cf-highlight {
  display: block;
  text-align: center;
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--primary);
  background: white;
  border: 3px solid var(--primary);
  border-radius: var(--radius-card);
  padding: 1rem;
  margin: 1.25rem 0;
}

.support-instructions p {
  margin-bottom: 0.6rem;
  line-height: 1.6;
}

.support-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.support-card {
  background: white;
  border-radius: var(--radius-card);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 1.75rem;
}

.support-card h3 {
  margin-bottom: 0.75rem;
}

.support-card p {
  line-height: 1.6;
  margin-bottom: 0.6rem;
}

.support-card p:last-child {
  margin-bottom: 0;
}

.placeholder-box {
  background: var(--primary-light);
  border: 2px dashed var(--primary);
  border-radius: var(--radius-input);
  padding: 1rem;
  margin: 0.75rem 0;
}

.placeholder-tag {
  display: inline-block;
  background: var(--primary);
  color: white;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 3px;
  margin-bottom: 0.5rem;
}

.coming-soon-box {
  background: #f4f4f4;
  opacity: 0.9;
}

.coming-soon-tag {
  display: inline-block;
  background: var(--accent-gray);
  color: white;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 3px;
  margin-bottom: 0.75rem;
}

.form-coming-soon {
  font-style: italic;
  color: #777;
  font-size: 0.9rem;
}

/* ------------------------------------------------------------
   Moduli di candidatura (volontario / educatore) — sostienici.html
   ------------------------------------------------------------ */
/* ⚠️ Campi alti, etichetta SEMPRE sopra il campo, testo mai sotto i 16px:
   il committente non vede bene. Colori solo dalle variabili di :root — per
   gli errori non esiste un rosso dichiarato, quindi si usa `--primary`
   (già usato altrove per i richiami, es. `.placeholder-box`) insieme al
   simbolo ⚠️, mai il colore da solo, così il segnale arriva anche a chi
   non distingue bene i colori. */
.modulo-candidatura {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  margin-top: 1.25rem;
}

/* ⛔⛔ Senza questa riga l'attributo `hidden` non nasconde un
   `.modulo-candidatura`: stessa specificità di `[hidden]`, ma una regola
   d'autore (questa classe) batte SEMPRE lo user-agent stylesheet da cui
   arriva `[hidden]{display:none}`, qualunque sia l'ordine nel file. Misurato
   dal vivo il 09/09/2026 su `js/donazioni.js`: `#modulo-donazione` restava
   `display:flex` — quindi visibile, campi e pulsante compresi — anche con
   `hidden` impostato, sia all'apertura pagina (prima che l'interruttore
   rispondesse) sia nel ripiego onesto dopo un invio fallito. I moduli di
   candidatura non lo notavano perché non nascondono mai se stessi, solo il
   loro esito — questo è il primo `.modulo-candidatura` a doverlo fare. */
.modulo-candidatura[hidden] {
  display: none;
}

.campo-modulo {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.campo-modulo label {
  font-weight: 600;
  font-size: 1rem;
  color: var(--dark);
}

.campo-modulo input,
.campo-modulo textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  border: 2px solid #ccc;
  border-radius: var(--radius-input);
  font-family: inherit;
  font-size: 1rem;
  min-height: 3.2rem;
  background: #fff;
  color: var(--dark);
}

.campo-modulo input[type="file"] {
  padding: 0.7rem 1rem;
}

.campo-modulo textarea {
  min-height: 6rem;
  resize: vertical;
}

.campo-modulo input:focus,
.campo-modulo textarea:focus {
  outline: 3px solid var(--primary);
  outline-offset: 1px;
  border-color: var(--primary);
}

.campo-modulo input[aria-invalid="true"],
.campo-modulo textarea[aria-invalid="true"] {
  border-color: var(--primary);
  border-width: 2px;
}

.campo-errore {
  color: var(--primary);
  font-size: 1rem;
  font-weight: 600;
  min-height: 1.3em;
}

.campo-errore:empty {
  display: none;
}

.campo-consenso {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.8rem;
}

.campo-consenso input[type="checkbox"] {
  width: 1.5rem;
  height: 1.5rem;
  min-height: 0;
  flex-shrink: 0;
  margin-top: 0.15rem;
  accent-color: var(--primary);
}

.campo-consenso label {
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.5;
}

.modulo-nota {
  background: var(--primary-light);
  border: 2px solid var(--primary);
  border-radius: var(--radius-input);
  padding: 1rem 1.15rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--dark);
}

.modulo-esito {
  display: none;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-input);
  line-height: 1.5;
}

.modulo-esito.visibile {
  display: block;
}

.modulo-esito.ok {
  background: var(--primary-light);
  color: var(--dark);
  border: 2px solid var(--accent-green);
}

.modulo-esito.errore {
  background: var(--primary-light);
  color: var(--dark);
  border: 2px solid var(--primary);
}

/* ------------------------------------------------------------
   Avviso "dati dalla copia" — js/dati-pubblici.js, 28/08/2026
   ⚠️ Il committente non vede bene: mai sotto i 16px (font-size: 1rem, non
   di meno). ⛔ Niente rosso/allarme: non è un errore, vedi il commento in
   cima a js/dati-pubblici.js su come si tratta un gestionale che non ha
   ancora niente da dire. Inserito come primo figlio di <body>: sta sopra
   la barra di navigazione nel flusso della pagina, non ci si sovrappone.
   ------------------------------------------------------------ */
/* ⛔ `.avviso-dati-copia` è stata TOLTA il 28/08/2026, su richiesta del
   titolare: la fascia compariva in cima a quasi ogni pagina perché il ripiego
   sulla copia locale è, oggi, la normalità e non un guasto. Il segnale è
   rimasto in console (js/dati-pubblici.js). Le regole sono qui sotto,
   commentate: se un giorno si vorrà avvisare di un guasto VERO, si riaprono
   invece di riscriverle.
.avviso-dati-copia {
  display: block;
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
  padding: 0.7rem 1rem;
  background: var(--primary-light);
  color: var(--dark);
  border-bottom: 2px solid var(--primary);
}
*/

/* ------------------------------------------------------------
   Responsive — 768px breakpoint
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .cards-grid {
    columns: 2;
  }

  .feature-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .support-grid {
    grid-template-columns: 1fr;
  }

  .document-item {
    flex-wrap: wrap;
  }

  .tabella-sponsor th,
  .tabella-sponsor td {
    padding: 0.6rem 0.8rem;
  }

  .document-download {
    width: 100%;
    text-align: center;
  }

  .cf-highlight {
    font-size: 1.6rem;
    letter-spacing: 0.03em;
  }

  .filter-bar {
    flex-wrap: wrap;
  }

  .hero h1 {
    font-size: 1.8rem;
  }

  .hero {
    min-height: 50vh;
  }

  .navbar-menu {
    display: none;
  }

  .navbar-menu.active {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--primary);
    padding: 1rem;
    gap: 0;
  }

  .navbar-menu.active a {
    padding: 0.75rem 1rem;
    display: block;
  }

  .hamburger {
    display: block;
  }
}

/* ------------------------------------------------------------
   Responsive — 480px breakpoint
   ------------------------------------------------------------ */
@media (max-width: 480px) {
  .cards-grid {
    columns: 1;
  }

  .gallery-item-info {
    padding: 0.5rem;
  }

  .events-grid {
    columns: 1;
  }

  .feature-cards {
    grid-template-columns: 1fr;
  }

  .values-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ------------------------------------------------------------
   La hero con le fotografie che si avvicendano (22/08/2026)
   ------------------------------------------------------------
   ⚠️ Nessun JavaScript: una sola animazione, sfalsata di 6 secondi per
   immagine. Il vantaggio non è l'eleganza — è che con lo scorrimento in
   CSS non c'è nessun temporizzatore da fermare quando si cambia pagina,
   e niente che possa restare acceso a consumare batteria sul telefono.

   ⚠️ Le fotografie non sostituiscono il gradiente: gli stanno SOPRA, e
   sotto al testo c'è una velatura scura. Il bianco su una foto chiara
   sparisce, e sparirebbe solo su alcune delle sette — cioè a
   intermittenza, che è il modo peggiore in cui un difetto si presenta.
   ------------------------------------------------------------ */
.hero {
  position: relative;
  overflow: hidden;
}

.hero-sfondo {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-sfondo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: heroAvvicenda 42s infinite;
}

/* La velatura che tiene leggibile il testo su qualunque fotografia. */
.hero-sfondo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 10, 4, 0.35) 0%, rgba(20, 10, 4, 0.62) 100%);
}

.hero h1,
.hero p,
.hero .btn-primary {
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 12px rgba(20, 10, 4, 0.45);
}

/* Sette immagini, 42 secondi in tutto: sei secondi ciascuna. */
.hero-sfondo img:nth-child(1) { animation-delay: 0s; }
.hero-sfondo img:nth-child(2) { animation-delay: 6s; }
.hero-sfondo img:nth-child(3) { animation-delay: 12s; }
.hero-sfondo img:nth-child(4) { animation-delay: 18s; }
.hero-sfondo img:nth-child(5) { animation-delay: 24s; }
.hero-sfondo img:nth-child(6) { animation-delay: 30s; }
.hero-sfondo img:nth-child(7) { animation-delay: 36s; }

@keyframes heroAvvicenda {
  0% { opacity: 0; transform: scale(1.06); }
  3% { opacity: 1; }
  14% { opacity: 1; }
  17% { opacity: 0; }
  100% { opacity: 0; transform: scale(1); }
}

/* ⛔ Chi ha chiesto meno animazioni al proprio telefono vede la prima
   fotografia e basta: ferma, senza dissolvenze e senza ingrandimento. */
@media (prefers-reduced-motion: reduce) {
  .hero-sfondo img {
    animation: none;
    transform: none;
  }
  .hero-sfondo img:first-child {
    opacity: 1;
  }
}

/* ------------------------------------------------------------
   «Dona ora» in ogni pagina (22/08/2026)
   ------------------------------------------------------------
   ⚠️ È una voce di menu come le altre nel codice, ma non deve sembrarlo:
   il fondo pieno la stacca dalle sette voci di navigazione, che sono
   tutte «vai a vedere» mentre questa è «fai una cosa». Sta in fondo, non
   in testa: chi arriva deve prima capire chi siamo — un sito che chiede
   soldi nella prima voce del menu si legge come una questua.
   ------------------------------------------------------------ */
.navbar-menu .voce-dona a {
  background: #ffffff;
  color: var(--primary);
  border-radius: 999px;
  padding: 0.4rem 1.05rem;
  font-weight: bold;
  white-space: nowrap;
}

.navbar-menu .voce-dona a:hover,
.navbar-menu .voce-dona a:focus-visible {
  background: #fff3e8;
  color: var(--primary-dark, var(--primary));
}

/* ------------------------------------------------------------
   «Accedi»: la porta del gestionale (25/08/2026)
   ------------------------------------------------------------
   ⚠️ **Un contorno, non un pieno.** Accanto c'è già «Dona ora», che è
   pieno: due pulsanti pieni uno di fianco all'altro si contendono lo
   sguardo e nessuno dei due vince. Il contorno dice «sono un pulsante»
   senza gridarlo, e lascia alla donazione il primo posto — che è la
   gerarchia voluta, non un ripiego grafico.
   ⚠️ `white-space: nowrap` perché una voce di menu che va a capo
   allarga la barra di una riga intera su un portatile.
   ------------------------------------------------------------ */
.navbar-menu .voce-accedi a {
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  padding: 0.35rem 0.95rem;
  white-space: nowrap;
}

.navbar-menu .voce-accedi a:hover,
.navbar-menu .voce-accedi a:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  border-color: #ffffff;
}

/* Sul telefono il menu sta su fondo chiaro: un contorno bianco sparirebbe. */
@media (max-width: 768px) {
  .navbar-menu .voce-accedi a {
    border-color: var(--primary);
    color: var(--primary);
    display: inline-block;
    margin: 0.4rem 0;
  }

  .navbar-menu .voce-accedi a:hover,
  .navbar-menu .voce-accedi a:focus-visible {
    background: #fff3e8;
  }
}

/* ⚠️ Nel menu a tendina del telefono le voci stanno su fondo chiaro, e un
   pulsante bianco su bianco sparirebbe: lì si gira, fondo pieno d'accento
   e scritta bianca. */
@media (max-width: 768px) {
  .navbar-menu .voce-dona a {
    background: var(--primary);
    color: #ffffff;
    display: inline-block;
    margin: 0.4rem 0;
  }
}

/* ------------------------------------------------------------
   Le due azioni sotto la hero (22/08/2026)
   ------------------------------------------------------------
   ⛔ **Il verde è quello vero di WhatsApp, #25D366**, e non un verde
   scelto a occhio: su un riquadro che porta a WhatsApp il colore fa metà
   del riconoscimento, e uno diverso costringe a leggere per capire dove
   si va. Il primo tentativo usava #128C7E — il verde scuro della vecchia
   identità: giusto come famiglia, sbagliato come tinta.

   ⚠️ **Su quel verde il testo è SCURO, non bianco.** Bianco su #25D366 fa
   1,8 di contrasto: si legge finché lo schermo è al massimo e sei
   all'ombra, cioè quasi mai su un telefono al sole. Il quasi-nero fa 9,3
   ed è anche il modo in cui WhatsApp stessa scrive dentro i fumetti
   verdi.
   ------------------------------------------------------------ */
.fascia-azioni {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
  gap: 1.1rem;
  max-width: 1100px;
  margin: 2.2rem auto 0;
  padding: 0 1rem;
}

.azione {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    'simbolo testo'
    'vai vai';
  align-items: center;
  gap: 0.35rem 1.1rem;
  padding: 1.35rem 1.4rem 1.15rem;
  border-radius: 18px;
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(20, 10, 4, 0.13);
  transition: transform 0.22s, box-shadow 0.22s;
}

.azione:hover,
.azione:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(20, 10, 4, 0.2);
}

/* La sfumatura tiene il riquadro dall'essere una campitura piatta; la
   luce in alto a destra è la stessa in tutti e due, così sembrano una
   coppia e non due pulsanti presi da due posti diversi. */
.azione::before {
  content: '';
  position: absolute;
  top: -45%;
  right: -18%;
  width: 65%;
  height: 180%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.azione-whatsapp {
  background: linear-gradient(135deg, #25d366 0%, #1ebe5a 100%);
  color: #0b2016;
}

.azione-dona {
  background: linear-gradient(135deg, #e8722a 0%, var(--primary) 100%);
  color: #ffffff;
}

/* ⚠️ Terza tessera della fascia (pagina partner, 23/08/2026): niente
   colore nuovo, solo `--primary-light`/`--primary`/`--dark` già in
   `:root`. Testo scuro su fondo chiaro invece del bianco su tinta piena
   delle altre due — qui il contrasto passa largamente il minimo, e per il
   committente che non vede bene conta più della coerenza cromatica. */
.azione-partner {
  background: var(--primary-light);
  color: var(--dark);
  border: 2px solid var(--primary);
}

.azione-simbolo {
  grid-area: simbolo;
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
}

.azione-whatsapp .azione-simbolo {
  color: #128c7e;
}

.azione-dona .azione-simbolo {
  color: var(--primary);
}

.azione-partner .azione-simbolo {
  color: var(--primary);
}

.azione-testo {
  grid-area: testo;
}

.azione-testo strong {
  display: block;
  font-size: 1.2rem;
  line-height: 1.2;
}

.azione-testo small {
  display: block;
  font-size: 1rem;
  line-height: 1.4;
  margin-top: 0.25rem;
  opacity: 0.88;
}

.azione-vai {
  grid-area: vai;
  justify-self: end;
  margin-top: 0.6rem;
  padding: 0.42rem 1.05rem;
  border-radius: 999px;
  font-weight: bold;
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.92);
}

.azione-whatsapp .azione-vai {
  color: #0b2016;
}

.azione-dona .azione-vai {
  color: var(--primary);
}

/* Testo scuro sulla pillola quasi bianca, non l'arancio di `.azione-dona`:
   var(--dark) su bianco passa largamente il 4,5:1 richiesto, l'arancio su
   bianco no — e su questa tessera non c'è motivo di rischiarlo. */
.azione-partner .azione-vai {
  color: var(--dark);
}

@media (prefers-reduced-motion: reduce) {
  .azione,
  .azione:hover {
    transition: none;
    transform: none;
  }
}

/* ------------------------------------------------------------
   Le tre schede grandi della home (22/08/2026)
   ------------------------------------------------------------ */
.schede-grandi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1.2rem;
  max-width: 1100px;
  margin: 2.5rem auto;
  padding: 0 1rem;
}

.scheda-grande {
  position: relative;
  display: block;
  min-height: 20rem;
  border-radius: var(--radius-card);
  overflow: hidden;
  text-decoration: none;
  color: #ffffff;
  transition: transform 0.25s;
}

.scheda-grande:hover,
.scheda-grande:focus-visible {
  transform: translateY(-3px);
}

.scheda-grande img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.scheda-grande:hover img {
  transform: scale(1.05);
}

/* La velatura: scura in basso, dove sta il testo; quasi assente in alto,
   dove la fotografia deve restare fotografia. */
.scheda-grande::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 10, 4, 0.05) 0%, rgba(20, 10, 4, 0.55) 55%, rgba(20, 10, 4, 0.88) 100%);
}

.scheda-grande-testo {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: 1.3rem 1.4rem 1.5rem;
}

.scheda-grande-testo strong {
  display: block;
  font-size: 1.6rem;
  line-height: 1.15;
  margin-bottom: 0.4rem;
}

.scheda-grande-testo small {
  display: block;
  font-size: 1rem;
  line-height: 1.45;
  opacity: 0.93;
}

.scheda-grande-testo em {
  display: block;
  margin-top: 0.7rem;
  font-style: normal;
  font-weight: bold;
  font-size: 1rem;
}

/* ⛔ Chi ha chiesto meno animazioni non deve vedere l'ingrandimento della
   fotografia al passaggio del dito: su un telefono quel movimento parte
   anche solo sfiorando. */
@media (prefers-reduced-motion: reduce) {
  .scheda-grande,
  .scheda-grande img,
  .scheda-grande:hover img {
    transition: none;
    transform: none;
  }
}

/* Le schede dei valori (mission): stessa forma di quelle della home, ma
   sono affermazioni e non collegamenti — niente sollevamento al passaggio
   del dito, niente ingrandimento della fotografia. Guardarle non promette
   che portino da qualche parte. */
.schede-valori .scheda-grande {
  cursor: default;
  margin: 0;
}

.schede-valori .scheda-grande:hover {
  transform: none;
  box-shadow: none;
}

.schede-valori .scheda-grande:hover img {
  transform: none;
}

/* ------------------------------------------------------------
   I numeri su una riga sola (23/08/2026, chiesto dal committente
   per progetti e partner)
   ------------------------------------------------------------
   ⚠️ `grid-auto-flow: column` invece di contare le colonne a mano: i
   riquadri sono quattro sui progetti e sei sui partner, e domani possono
   diventare cinque. Scrivere `repeat(6, 1fr)` vorrebbe dire tornare qui
   ogni volta che si aggiunge un numero — e chi lo aggiunge non ha modo
   di sapere che deve farlo.

   ⛔ **Su uno schermo stretto la riga sola si rompe apposta.** Sei
   riquadri su un telefono sarebbero sei colonne da cinquanta pixel, con
   dentro un numero grande e un'etichetta di due parole: illeggibili. La
   riga unica è un fatto estetico, la leggibilita' no — e il committente
   non vede bene.
   ------------------------------------------------------------ */
.stats-grid.stats-una-riga {
  grid-auto-flow: column;
  grid-template-columns: none;
  grid-auto-columns: minmax(0, 1fr);
}

@media (max-width: 900px) {
  .stats-grid.stats-una-riga {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-columns: auto;
  }
}

@media (max-width: 560px) {
  .stats-grid.stats-una-riga {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ------------------------------------------------------------
   Sostienici (23/08/2026) — la pagina che chiede
   ------------------------------------------------------------
   ⚠️ È l'unica pagina del sito che si giudica da quanto convince, e per
   questo è l'unica con un'apertura sua invece del solito titolo su fondo
   bianco. Tutto il resto del sito resta com'è: un'apertura così su ogni
   pagina non sarebbe carattere, sarebbe rumore.
   ------------------------------------------------------------ */
.sostieni-apertura {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: stretch;
  margin-top: 64px;
  background: #16110e;
  color: #f7efe6;
}

.sostieni-apertura-foto {
  width: 100%;
  height: 100%;
  min-height: 20rem;
  object-fit: cover;
}

.sostieni-apertura-testo {
  padding: 3rem 2.2rem;
  align-self: center;
}

.sostieni-occhiello {
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ff9a5e;
  margin: 0 0 0.8rem;
}

.sostieni-apertura h1 {
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  line-height: 1.15;
  margin: 0 0 1rem;
}

.sostieni-apertura h1 em {
  font-style: normal;
  color: #ff9a5e;
}

.sostieni-apertura p {
  font-size: 1.1rem;
  line-height: 1.55;
  color: rgba(247, 239, 230, 0.86);
  max-width: 34rem;
}

.sostieni-apertura-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.6rem;
}

.sostieni-bottone {
  display: inline-block;
  background: var(--primary);
  color: #ffffff;
  font-weight: bold;
  font-size: 1.05rem;
  padding: 0.8rem 1.5rem;
  border-radius: 999px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s, filter 0.2s;
}

.sostieni-bottone:hover,
.sostieni-bottone:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.07);
}

.sostieni-bottone-chiaro {
  background: #ffffff;
  color: var(--primary);
}

.sostieni-bottone-piccolo {
  font-size: 1rem;
  padding: 0.55rem 1.1rem;
  margin: 0.2rem 0 1rem;
}

.sostieni-sotto {
  font-size: 1.1rem;
  color: #5b4f46;
  max-width: 44rem;
  margin-bottom: 1.4rem;
}

.sostieni-nota {
  font-size: 1rem;
  color: #6a5c50;
  margin-top: 1rem;
}

/* --- i quattro gradini --------------------------------------------- */
.gradini {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  align-items: stretch;
}

.gradino {
  position: relative;
  background: #ffffff;
  border: 1px solid #f0e2d5;
  border-radius: 14px;
  padding: 1.5rem 1.3rem 1.4rem;
  box-shadow: 0 3px 12px rgba(20, 10, 4, 0.07);
  display: flex;
  flex-direction: column;
}

/* ⚠️ La barra in alto si scurisce di gradino in gradino: è il percorso
   che si vede prima di leggerlo. L'ultimo è pieno d'accento perché è il
   traguardo — dormire fuori casa. */
.gradino::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, #f6d3a8, #e8873b);
  border-radius: 14px 14px 0 0;
}

.gradino-ultimo::before {
  background: linear-gradient(90deg, #e8873b, var(--primary));
}

.gradino-cifra {
  display: block;
  font-size: 2.1rem;
  font-weight: bold;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  margin-bottom: 0.4rem;
}

.gradino h3 {
  font-size: 1.15rem;
  margin: 0 0 0.5rem;
}

.gradino p {
  font-size: 1rem;
  line-height: 1.45;
  color: #5b4f46;
  margin: 0;
}

/* --- il bonifico e il 5x1000 ---------------------------------------- */
.iban-grande {
  font-size: 1.25rem;
  font-weight: bold;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
  /* ⛔ Non `break-all`: spezzava i gruppi di quattro a metà («0000 04 / 02 777»)
     appena la colonna si stringeva, e un IBAN letto a pezzi sbagliati è un
     bonifico sbagliato. L'IBAN ha già gli spazi: si va a capo li'. */
  word-break: normal;
  overflow-wrap: anywhere;
  margin: 0.6rem 0 0.4rem;
}

.sostieni-riga {
  font-size: 1rem;
  margin: 0.35rem 0;
}

.sostieni-riga strong {
  display: inline-block;
  min-width: 7.5rem;
  color: #6a5c50;
}

.sostieni-cinque {
  background: #fff6ee;
  border-radius: 16px;
  padding: 2rem 1.5rem;
}

.sostieni-fiducia {
  background: #ffffff;
  border: 1px solid #f0e2d5;
  border-radius: 14px;
  padding: 1.5rem;
}

.sostieni-fiducia ul {
  margin: 0 0 1.2rem;
  padding-left: 1.2rem;
}

.sostieni-fiducia li {
  font-size: 1.05rem;
  margin-bottom: 0.6rem;
}

@media (max-width: 900px) {
  .sostieni-apertura {
    grid-template-columns: 1fr;
  }
  .sostieni-apertura-foto {
    min-height: 14rem;
    max-height: 18rem;
  }
  .gradini {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .gradini {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sostieni-bottone,
  .sostieni-bottone:hover {
    transition: none;
    transform: none;
  }
}

/* ------------------------------------------------------------
   I tre canali nella pagina dei contatti (23/08/2026)
   ------------------------------------------------------------
   ⛔ I colori sono quelli veri dei tre servizi: #25D366 di WhatsApp,
   #1877F2 di Facebook, la sfumatura di Instagram. Su un riquadro che
   porta altrove il colore fa metà del riconoscimento — uno scelto a
   occhio costringe a leggere per capire dove si va.

   ⚠️ Sul verde di WhatsApp il testo è SCURO: bianco su #25D366 fa 1,8 di
   contrasto, cioè si legge solo con lo schermo al massimo. Sugli altri
   due, che sono scuri, il testo è bianco. Non è un'incoerenza: è la
   stessa regola (contrasto sufficiente) applicata a tre fondi diversi.
   ------------------------------------------------------------ */
.canali {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}

.canale {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    'simbolo testo'
    'vai vai';
  align-items: center;
  gap: 0.35rem 1.1rem;
  padding: 1.4rem 1.4rem 1.15rem;
  border-radius: 18px;
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(20, 10, 4, 0.13);
  transition: transform 0.22s, box-shadow 0.22s;
}

.canale:hover,
.canale:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(20, 10, 4, 0.2);
}

.canale-whatsapp {
  background: linear-gradient(135deg, #25d366 0%, #1ebe5a 100%);
  color: #0b2016;
}

.canale-facebook {
  background: linear-gradient(135deg, #1877f2 0%, #0b5fd0 100%);
  color: #ffffff;
}

.canale-instagram {
  background: linear-gradient(135deg, #f9ce34 0%, #ee2a7b 48%, #6228d7 100%);
  color: #ffffff;
}

.canale-simbolo {
  grid-area: simbolo;
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
}

.canale-whatsapp .canale-simbolo { color: #128c7e; }
.canale-facebook .canale-simbolo { color: #1877f2; }
.canale-instagram .canale-simbolo { color: #d62976; }

.canale-testo {
  grid-area: testo;
}

.canale-testo strong {
  display: block;
  font-size: 1.2rem;
  line-height: 1.2;
}

.canale-testo small {
  display: block;
  font-size: 1rem;
  line-height: 1.4;
  margin-top: 0.25rem;
  opacity: 0.9;
}

.canale-vai {
  grid-area: vai;
  justify-self: end;
  margin-top: 0.7rem;
  padding: 0.42rem 1.05rem;
  border-radius: 999px;
  font-weight: bold;
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.93);
}

.canale-whatsapp .canale-vai { color: #0b2016; }
.canale-facebook .canale-vai { color: #1877f2; }
.canale-instagram .canale-vai { color: #c1256b; }

@media (max-width: 900px) {
  .canali {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .canale,
  .canale:hover {
    transition: none;
    transform: none;
  }
}

/* Il 5x1000: il codice fiscale a sinistra, la grafica dell'associazione a
   destra. ⚠️ L'immagine non porta informazioni che non ci siano già nel
   testo — il codice fiscale si legge e si copia dal riquadro accanto: chi
   non vede l'immagine non perde niente. */
.cinque-riquadro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: center;
  margin: 1rem 0 1.5rem;
}

.cinque-immagine {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(20, 10, 4, 0.12);
}

.social-riga {
  font-size: 1.05rem;
  margin: 0.45rem 0;
}

@media (max-width: 760px) {
  .cinque-riquadro {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------
   Menu «Utilità» (Calendario, App, Documenti)
   ------------------------------------------------------------
   ⚠️ Il bottone deve sembrare identico alle altre voci della barra: è un
   <button> e non un <a> perché non porta da nessuna parte — apre. Un link
   che non naviga toglie la freccia di ritorno del browser e confonde chi
   usa la tastiera. Da qui il travaso di stile riga per riga. */
.voce-utilita {
  position: relative;
}

.utilita-apri {
  font: inherit;
  font-size: 1rem;
  color: white;
  background: none;
  border: 0;
  padding: 0.5rem 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: border-color 0.3s;
}

.utilita-apri:hover,
.utilita-apri.active,
.voce-utilita.aperto .utilita-apri {
  border-bottom-color: white;
}

.utilita-menu {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  list-style: none;
  margin: 0;
  padding: 0.4rem 0;
  background: white;
  border-radius: var(--radius-card);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  z-index: 1100;
}

.voce-utilita.aperto .utilita-menu {
  display: block;
}

/* Col mouse si apre passandoci sopra, senza dover cliccare. Su un dispositivo
   a tocco «hover» resta appiccicato dopo il tocco, per questo la regola sta
   dentro `hover: hover`: lì comanda il clic, gestito in main.js. */
@media (hover: hover) {
  .voce-utilita:hover .utilita-menu,
  .voce-utilita:focus-within .utilita-menu {
    display: block;
  }
}

.navbar-menu .utilita-menu a {
  display: block;
  padding: 0.7rem 1.2rem;
  color: var(--dark);
  border-bottom: 0;
  white-space: nowrap;
}

.navbar-menu .utilita-menu a:hover,
.navbar-menu .utilita-menu a:focus-visible,
.navbar-menu .utilita-menu a.active {
  background: var(--primary-light);
  color: var(--primary);
  border-bottom: 0;
}

@media (max-width: 768px) {
  /* Nel menu a scomparsa non c'è spazio per una tendina che si apre sopra il
     resto: le tre voci stanno sempre visibili, rientrate sotto l'etichetta. */
  .voce-utilita,
  .voce-utilita.aperto .utilita-menu,
  .utilita-menu {
    display: block;
    position: static;
    transform: none;
    background: transparent;
    box-shadow: none;
    min-width: 0;
    padding: 0;
  }

  .utilita-apri {
    padding: 0.75rem 1rem;
    width: 100%;
    justify-content: flex-start;
    opacity: 0.85;
    cursor: default;
  }

  .utilita-apri span[aria-hidden] {
    display: none;
  }

  .navbar-menu .utilita-menu a {
    color: white;
    padding: 0.75rem 1rem 0.75rem 2rem;
  }

  .navbar-menu .utilita-menu a:hover,
  .navbar-menu .utilita-menu a.active {
    background: rgba(255, 255, 255, 0.12);
    color: white;
  }
}

/* ------------------------------------------------------------
   Calendario
   ------------------------------------------------------------ */
.cal-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.cal-navigazione {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cal-periodo {
  font-size: 1.4rem;
  margin: 0 0 0 0.5rem;
  min-width: 15ch;
}

.cal-freccia,
.cal-oggi,
.cal-vista,
.cal-salta {
  font: inherit;
  font-size: 1rem;
  background: white;
  color: var(--dark);
  border: 1px solid #ddd;
  border-radius: var(--radius-input);
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  line-height: 1.4;
}

.cal-freccia {
  padding: 0.45rem 0.8rem;
  font-size: 1.2rem;
}

.cal-freccia:hover,
.cal-oggi:hover,
.cal-vista:hover,
.cal-salta:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.cal-viste {
  display: flex;
  gap: 0;
  margin-left: auto;
}

.cal-viste .cal-vista:first-child {
  border-radius: var(--radius-input) 0 0 var(--radius-input);
}

.cal-viste .cal-vista:last-child {
  border-radius: 0 var(--radius-input) var(--radius-input) 0;
  border-left: 0;
}

.cal-vista.attiva {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.cal-filtri {
  display: flex;
  gap: 1rem;
  align-items: center;
  font-size: 1rem;
}

.cal-filtri label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}

.cal-filtri input {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

/* ⛔ Senza questa riga il pannello resterebbe visibile anche con l'attributo
   `hidden`: `display: flex` qui sotto è più forte del display:none che il
   browser da' agli elementi nascosti. */
.cal-avviso[hidden] {
  display: none;
}

.cal-avviso {
  background: var(--primary-light);
  border-left: 4px solid var(--primary);
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-input);
  margin-bottom: 1.25rem;
  font-size: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

/* --- vista mese --- */
.cal-mese {
  border: 1px solid #e2e2e2;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: white;
}

.cal-testata {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: #fafafa;
  border-bottom: 1px solid #e2e2e2;
}

.cal-testata div {
  padding: 0.6rem 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cal-riga {
  position: relative;
  border-bottom: 1px solid #e2e2e2;
}

.cal-riga:last-child {
  border-bottom: 0;
}

.cal-giorni {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  position: absolute;
  inset: 0;
}

.cal-giorno {
  border-right: 1px solid #eee;
  padding: 0.4rem 0.6rem;
}

.cal-giorno:last-child {
  border-right: 0;
}

.cal-giorno.festivo {
  background: #fcfcfc;
}

.cal-giorno.fuori-mese .cal-numero {
  color: #bbb;
}

.cal-giorno.oggi {
  background: var(--primary-light);
}

.cal-numero {
  font-size: 1rem;
  font-weight: 600;
  color: #555;
}

.cal-giorno.oggi .cal-numero {
  background: var(--primary);
  color: white;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Le fasce stanno sopra la griglia dei giorni e la attraversano: un progetto
   che dura tre giorni è UNA striscia, non tre etichette uguali ripetute. */
.cal-fasce {
  position: relative;
  min-height: 96px;
  pointer-events: none;
}

.cal-fascia,
.cal-appuntamento {
  pointer-events: auto;
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font: inherit;
  font-size: 1rem;
  text-align: left;
  border: 0;
  border-radius: 4px;
  padding: 0 0.5rem;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
}

.cal-fascia-testo {
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-fascia.tipo-progetto,
.cal-appuntamento.tipo-progetto {
  background: #E8630A;
  color: white;
}

.cal-fascia.tipo-evento,
.cal-appuntamento.tipo-evento {
  background: #2f7d32;
  color: white;
}

.cal-fascia:hover,
.cal-appuntamento:hover {
  filter: brightness(1.12);
}

/* Un progetto SENZA appuntamenti segnati (la fascia lunga da inizio a
   fine, i mesi in cui non sappiamo ancora i giorni dei singoli incontri) è
   semitrasparente e tratteggiato: diverso dagli appuntamenti veri anche a
   occhio nudo, non solo per l'opacità — chi non distingue bene i colori
   deve poterlo capire lo stesso dal tratteggio e dal bordo.
   ⚠️ Il testo resta scuro (mai bianco su questo fondo chiaro): misurato,
   il contrasto minimo qui è 6,2:1, sopra la soglia 4,5:1 richiesta. */
/*
  Il periodo di un progetto di cui non si conoscono ancora le date dei singoli
  incontri.

  ⛔ **Tinta piena e chiarissima, non un tratteggio semitrasparente**
  (28/08/2026, il titolare: «deve essere un colore unito molto chiaro che
  faccia vedere che c'è un progetto ma sia ben distinto dagli appuntamenti»).
  Il tratteggio diagonale nato il 26/08 distingueva, ma faceva rumore: su un
  mese pieno di fasce lunghe la griglia diventava una zebra, e l'occhio ci
  inciampava invece di scorrere.

  ⚠️ **Tinta PIENA e non trasparenza**: un colore con l'alfa cambia a seconda
  di che cosa ha sotto — la riga alternata del mese, il giorno di oggi
  evidenziato, la fascia di un altro progetto sovrapposta — e lo stesso
  periodo appare di tre colori diversi nella stessa schermata. `#fdf0e4` è
  quel colore, calcolato una volta sul bianco e poi fermo.

  ⚠️ Il testo resta scuro (`#8a4a12` su `#fdf0e4` = **6,11:1**, misurato) e
  il bordo continuo (`#c47a34`, **3,40:1** sul bianco e **3,04:1**
  sul fondo della fascia) tiene il contorno leggibile a chi non distingue le tinte:
  la differenza con un appuntamento non è affidata al solo colore, ma anche
  al peso del carattere e al bordo.
*/
.cal-fascia.periodo {
  background-color: #fdf0e4;
  background-image: none;
  border: 1px solid #c47a34;
  color: #8a4a12;
  font-weight: 600;
}

.cal-fascia.periodo:hover {
  filter: none;
  background-color: #fbe4d0;
}

.cal-continua {
  opacity: 0.8;
  font-weight: 700;
}

/* --- vista settimana --- */
.cal-settimana {
  border: 1px solid #e2e2e2;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: white;
}

.cal-testata-settimana {
  display: grid;
  grid-template-columns: 76px repeat(7, 1fr);
  background: #fafafa;
  border-bottom: 1px solid #e2e2e2;
}

.cal-giorno-testata {
  padding: 0.5rem 0.75rem;
  border-left: 1px solid #eee;
  display: flex;
  flex-direction: column;
}

.cal-giorno-nome {
  font-size: 1rem;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cal-giorno-numero {
  font-size: 1.3rem;
  font-weight: 700;
}

.cal-giorno-testata.oggi {
  background: var(--primary-light);
}

.cal-giorno-testata.oggi .cal-giorno-numero {
  color: var(--primary);
}

.cal-banda {
  display: grid;
  grid-template-columns: 76px 1fr;
  border-bottom: 2px solid #e2e2e2;
}

.cal-banda-etichetta {
  padding: 0.5rem 0.6rem;
  font-size: 1rem;
  color: #666;
  border-right: 1px solid #eee;
  line-height: 1.2;
}

.cal-banda-fasce {
  position: relative;
  padding: 0.4rem 0;
}

.cal-banda-vuota {
  font-size: 1rem;
  color: #888;
  padding: 0.3rem 0.75rem;
  margin: 0;
}

.cal-orario {
  display: grid;
  grid-template-columns: 76px 1fr;
}

.cal-ore {
  border-right: 1px solid #eee;
}

.cal-ora {
  position: relative;
  border-bottom: 1px solid #f2f2f2;
}

.cal-ora span {
  position: absolute;
  top: -0.7rem;
  right: 0.6rem;
  font-size: 1rem;
  color: #888;
  background: white;
  padding: 0 0.2rem;
}

.cal-colonne {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.cal-colonna {
  position: relative;
  border-left: 1px solid #eee;
}

.cal-colonna.festivo {
  background: #fcfcfc;
}

.cal-colonna.oggi {
  background: var(--primary-light);
}

.cal-riga-ora {
  border-bottom: 1px solid #f2f2f2;
}

.cal-appuntamento {
  /* left e width li scrive calendario.js: quando due incontri si accavallano
     si dividono la colonna del giorno. */
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  white-space: normal;
  padding: 0.2rem 0.4rem;
}

.cal-appuntamento-ora {
  font-size: 1rem;
  opacity: 0.9;
}

.cal-appuntamento-titolo {
  font-size: 1rem;
  font-weight: 600;
}

.cal-nota-ore {
  font-size: 1rem;
  color: #666;
  padding: 0.9rem 1rem;
  margin: 0;
  border-top: 1px solid #eee;
  background: #fafafa;
}

/* --- legenda --- */
.cal-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 1rem;
  font-size: 1rem;
  color: #555;
}

.cal-legenda span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.cal-pallino {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  display: inline-block;
}

.cal-pallino.tipo-progetto {
  background: #E8630A;
}

.cal-pallino.tipo-evento {
  background: #2f7d32;
}

/* Lo stesso tratteggio della fascia «periodo», in miniatura, per la voce
   di legenda aggiunta da js/calendario.js (`espandiLegenda()`). */
.cal-pallino.periodo {
  background-color: #fdf0e4;
  border: 1px solid #c47a34;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(232, 99, 10, 0.55) 0px,
    rgba(232, 99, 10, 0.55) 3px,
    rgba(232, 99, 10, 0.15) 3px,
    rgba(232, 99, 10, 0.15) 6px
  );
  border: 2px dashed rgba(232, 99, 10, 0.8);
}

/* --- la scheda che si apre cliccando una fascia --- */
.cal-velo {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 2000;
}

.cal-scheda {
  position: relative;
  background: white;
  border-radius: var(--radius-card);
  padding: 1.75rem;
  max-width: 560px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  font-size: 1.05rem;
  line-height: 1.55;
}

.cal-scheda h2 {
  font-size: 1.6rem;
  margin: 0.4rem 0 0.6rem;
}

.cal-scheda p {
  margin: 0 0 0.6rem;
}

.cal-scheda-tipo {
  display: inline-block;
  font-size: 1rem;
  padding: 0.15rem 0.7rem;
  border-radius: 999px;
  color: white;
}

.cal-scheda-tipo.tipo-progetto {
  background: #E8630A;
}

.cal-scheda-tipo.tipo-evento {
  background: #2f7d32;
}

.cal-scheda-quando {
  font-weight: 600;
}

.cal-scheda-progetto {
  color: #666;
}

.cal-scheda-indirizzo {
  color: #666;
  font-size: 1rem;
}

/* Il comando di scarico .ics: solo sugli appuntamenti veri (lo decide
   js/calendario.js), quindi niente classe tipo-progetto/tipo-evento qui —
   uno stile solo, riconoscibile, per un'azione che c'è o non c'è. */
.cal-scheda-ics {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--primary);
  color: white;
  border: 0;
  border-radius: var(--radius-card);
  padding: 0.65rem 1.25rem;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.2s;
}

.cal-scheda-ics:hover {
  transform: scale(1.03);
}

.cal-scheda-chiudi {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  font-size: 2rem;
  line-height: 1;
  background: none;
  border: 0;
  color: #888;
  cursor: pointer;
}

.cal-scheda-chiudi:hover {
  color: var(--dark);
}

@media (max-width: 768px) {
  /* Sette colonne su un telefono darebbero caselle da 45px: si scorre di
     lato, che è come si guarda un calendario sul telefono. */
  .cal-tabellone {
    overflow-x: auto;
  }

  .cal-mese,
  .cal-settimana {
    min-width: 700px;
  }

  .cal-viste {
    margin-left: 0;
  }

  .cal-periodo {
    font-size: 1.2rem;
    min-width: 0;
  }
}

/* ------------------------------------------------------------
   «Come si dona»: tre schede invece di due
   ------------------------------------------------------------
   ⚠️ `.support-grid` sta anche in app.html e nei moduli volontario/educatore,
   dove le schede sono due: la colonna in più si chiede con una classe in più
   invece di cambiare la griglia per tutti. */
.support-grid-tre {
  grid-template-columns: repeat(3, 1fr);
}

/* ⛔ Si scende a una colonna a 900px e non a 768 come le griglie da due: tre
   schede fitte di testo, in mezzo un IBAN che non si può spezzare, sotto i
   900px diventano tre colonnine illeggibili. La regola sta DOPO quella del
   media query di serie, se no a parità di peso vincerebbe quella. */
@media (max-width: 900px) {
  .support-grid-tre {
    grid-template-columns: 1fr;
  }
}

/* La scheda di Teaming è un modo di donare che funziona adesso: accanto alla
   carta spenta e grigia deve vedersi che è viva. */
.carta-teaming {
  border: 2px solid var(--primary);
}

.carta-teaming .sostieni-bottone {
  margin-top: 0.4rem;
}

/* ------------------------------------------------------------
   Il modulo di donazione con carta — js/donazioni.js, 09/09/2026
   ------------------------------------------------------------
   ⭐ La scheda «Carta di credito» smette di essere grigia (niente
   `.coming-soon-box`) quando il modulo compare davvero: lo decide
   `js/donazioni.js` togliendo quella classe dal riquadro, non questo file. */
.dona-tipo-scelta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}

/* Copiata a vista da `.stato-btn` (progetti/eventi), senza il pallino del
   conteggio che qui non serve: stesso linguaggio visivo di scelta a due,
   duplicato apposta invece di condiviso — sono due gruppi di pulsanti che
   non hanno ragione di dipendere l'uno dall'altro. */
.dona-tipo-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 1.3rem;
  border-radius: 999px;
  border: 2px solid var(--primary);
  background: white;
  color: var(--primary);
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.dona-tipo-btn.attivo {
  background: var(--primary);
  color: white;
}

/* Il testo accanto a un campo (non solo nell'errore): «minimo € 5,00», dove
   arriva la ricevuta. ⚠️ 16px come ogni testo di questo sito, mai di meno. */
.campo-suggerimento {
  font-size: 1rem;
  color: #555;
  line-height: 1.4;
}

/* ------------------------------------------------------------
   La barra in alto: le voci allineate fra loro
   ------------------------------------------------------------
   ⛔ «Utilità» usciva 8px più in basso delle altre voci, con la sua riga di
   sottolineatura sfalsata. Non era un errore di padding: le altre voci sono
   <a> INLINE, e il padding verticale di un box inline non allarga la riga —
   deborda sopra e sotto senza spostare niente. Il bottone invece è un box
   vero, quindi la riga si allargava e lui scendeva. Misurato: gli <a>
   stavano a 3,5–42,5 px, il bottone a 11,5–52,5.

   Si aggiusta togliendo di mezzo l'inline: ogni voce diventa un box con lo
   stesso modello e la riga li centra. Dopo la correzione stanno tutti a
   12,5–51,5 con la stessa altezza (39 px), «Dona ora» compreso.

   ⚠️ Solo da 769px in su: sotto, il menu a scomparsa vuole le voci a tutta
   larghezza (`display: block`, padding largo per il dito) e queste regole
   glielo toglierebbero, essendo scritte dopo a parità di peso. */
@media (min-width: 769px) {
  .navbar-menu {
    align-items: center;
  }

  .navbar-menu > li {
    display: flex;
    align-items: center;
  }

  .navbar-menu > li > a,
  .utilita-apri {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0;
  }

  /* «Dona ora» è una pillola: conserva il suo padding, non quello delle voci. */
  .navbar-menu .voce-dona > a {
    padding: 0.55rem 1.1rem;
  }

  /* La punta della tendina non deve alzare la riga del bottone: rimpicciolita
     e con interlinea 1, se no rialza tutto di qualche pixel. */
  .utilita-apri span[aria-hidden] {
    font-size: 0.8em;
    line-height: 1;
  }
}

/* Il logo di Teaming nella scheda delle donazioni. Altezza fissa e larghezza
   automatica: il file è 244x68, servito a 34px di altezza perché resti nitido
   anche sugli schermi fitti. */
.teaming-logo {
  height: 34px;
  width: auto;
  margin-bottom: 0.7rem;
}

/* ⚠️ Le schede del direttivo scrivevano ruolo e contatti a 0,9rem (14px): sotto
   il minimo che regge chi legge questo sito. Portati tutti a 16px. */
.team-card p,
.team-card .team-role,
.team-card .team-contact {
  font-size: 1rem;
}

/* ⛔ Gli indirizzi di posta sono piu' lunghi della scheda
   («francesca.f@larosadeiventiaps.org» sono 33 caratteri in una colonna da
   200px): senza questo andavano a finire SOPRA la scheda accanto, e si
   leggevano due indirizzi mescolati. Non e' un difetto nato oggi con il
   corpo piu' grande, si vedeva anche prima — solo un po' meno. */
.team-card .team-contact {
  overflow-wrap: anywhere;
}

.team-card .team-contact a {
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------
   Pagina «App»: le cinque categorie
   ------------------------------------------------------------
   ⚠️ Cinque schede in una griglia da tre: le ultime due restano sulla riga
   sotto, larghe come le altre. `support-grid-tre` (nata per «Come si dona»)
   fa già il lavoro — non serve una griglia nuova. */
.carta-app {
  border-top: 3px solid var(--primary);
}

.carta-app h3 {
  font-size: 1.15rem;
}

/* Il riquadro che dice a chi l'app NON serve. Grigio e non arancione: e' una
   precisazione utile, non un avvertimento — chi e' socio e basta non sta
   sbagliando niente. */
.avviso-app {
  background: #f4f4f4;
  border-left: 4px solid var(--accent-gray);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  padding: 1rem 1.2rem;
  margin-top: 1.5rem;
  font-size: 1rem;
  line-height: 1.6;
}

.avviso-app p {
  margin: 0;
}

/* ------------------------------------------------------------
   «Seguici»: i marchi veri al posto delle emoji
   ------------------------------------------------------------
   ⚠️ Il colore sta sul quadratino, non sul segno: il segno è bianco e il
   fondo porta il colore del servizio. È così che li si riconosce — un
   glifo verde su bianco non è WhatsApp, WhatsApp è il bianco sul verde. */
.marchio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  margin-right: 0.6rem;
  vertical-align: middle;
  flex: 0 0 auto;
}

.marchio-whatsapp  { background: #25D366; }
.marchio-facebook  { background: #1877F2; }
/* La sfumatura vera di Instagram, dal giallo in basso a sinistra al viola in
   alto a destra: il marchio è quella, non il solo contorno. */
.marchio-instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

.social-riga a {
  display: inline-flex;
  align-items: center;
  /* Su schermo stretto l'indirizzo va a capo: il marchio resta in alto
     accanto alla prima riga invece di centrarsi su due righe di testo. */
  align-items: center;
  line-height: 1.4;
}

.nota-pec {
  display: block;
  font-size: 1rem;
  color: #777;
  margin-left: 1.9rem;
}

/* ------------------------------------------------------------
   Gallery: i filtri per progetto
   ------------------------------------------------------------
   La miniatura davanti al nome è la ragione per cui questi pulsanti
   funzionano: una fila di pastiglie tutte uguali si legge una per una,
   con l'immagine si riconosce quella che si cerca senza leggere. */
/* Le pastiglie degli anni: piu' piccole di quelle dei progetti, perche'
   contano meno — il progetto e' il filtro principale, l'anno il secondario.
   ⚠️ `min-height: 44px`: e' la misura sotto la quale un dito sbaglia
      bersaglio. Sono nate per il telefono, devono restare comode li'. */
.gallery-anni {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  /* ⛔ Lo stacco dall'alto e' `padding`, NON `margin`, e la differenza qui si
     vede. Questa e' la prima cosa dentro `<main>`, e `<main>` non ha ne'
     bordo ne' riempimento: un `margin-top` **collassa** attraverso di lui e
     sposta `main` invece di aprire spazio dentro. Misurato il 29/08/2026: coi
     28px di margine, navigazione, `main`, contenitore e primo pulsante
     stavano tutti a y=64 — il margine c'era, lo spazio no.
     ⚠️ Sulle altre pagine il problema non si pone perche' lo spazio lo da'
        `.project-section` col suo `padding: 2rem`; qui quella sezione non c'e'. */
  margin: 0 auto 1.25rem;
  max-width: 1200px;
  padding: 1.75rem 1rem 0;
}

.gallery-anno {
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  min-height: 44px;
  padding: 0.35rem 1rem;
  border: 1px solid #ddd;
  /* ⛔ Non `999px`. Le pastiglie dei progetti qui sotto sono capsule perche'
     portano una miniatura tonda dentro; queste sono solo un'etichetta corta,
     e con il raggio pieno «2026» diventava una pillola. Squadrate come il
     resto dei comandi del sito (`--radius-card`), che le distingue anche dal
     filtro principale: il progetto si sceglie, l'anno restringe. */
  border-radius: var(--radius-card, 8px);
  background: #fff;
  color: #555;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.gallery-anno:hover { border-color: #bbb; }

.gallery-anno.attivo {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.gallery-filtri {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 0 auto 1.75rem;
  max-width: 1200px;
  padding: 0 1rem;
}

.gallery-filtro {
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.9rem 0.35rem 0.35rem;
  border: 2px solid var(--line, #ddd);
  border-radius: 999px;
  background: #fff;
  color: var(--dark);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

/* Senza miniatura (il pulsante «Tutte») il rientro a sinistra sarebbe un
   buco: si pareggia. */
.gallery-filtro:not(:has(.gallery-filtro-foto)) {
  padding-left: 0.9rem;
}

.gallery-filtro-foto {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex: 0 0 auto;
}

.gallery-filtro-nome {
  /* ⚠️ I titoli dei progetti sono lunghi («Follow me...Ad uno s-passo dalla
     cultura»): senza tetto un pulsante solo occuperebbe tutta la riga. Si
     taglia con i puntini, il nome intero resta nel `title` del pulsante. */
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery-filtro-quante {
  font-size: 0.95rem;
  font-weight: 700;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  font-variant-numeric: tabular-nums;
}

.gallery-filtro:hover {
  border-color: var(--primary);
}

.gallery-filtro.attivo {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.gallery-filtro.attivo .gallery-filtro-quante {
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
}

.gallery-vuoto {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 1.2rem;
  background: var(--primary-light);
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  font-size: 1rem;
  color: #555;
}

.gallery-vuoto[hidden] {
  display: none;
}

/* ------------------------------------------------------------
   «Sostienici»: i sei modi, in cima
   ------------------------------------------------------------
   ⚠️ Sei riquadri, non sei pastiglie: ognuno deve dire in una riga che cosa
   comporta, e una pastiglia col nome dentro non lo dice. Sono il primo bivio
   della pagina, non una barra di filtri. */
.modi-griglia {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}

.modo {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: #fff;
  border: 1px solid #e6e6e6;
  /* ⭐ La riga di colore in cima è ciò che li rende riconoscibili a colpo
     d'occhio: sei riquadri bianchi identici si leggono uno per uno. */
  border-top: 4px solid var(--modo-colore, var(--primary));
  border-radius: var(--radius-card);
  padding: 1.1rem 1.15rem 1rem;
  text-decoration: none;
  color: var(--dark);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
  transition: transform 0.18s, box-shadow 0.18s;
}

.modo:hover,
.modo:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.13);
}

.modo-segno {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 0.2rem;
}

.modo strong {
  font-size: 1.2rem;
  color: var(--modo-colore, var(--primary));
}

.modo small {
  font-size: 1rem;
  color: #555;
  line-height: 1.5;
  flex: 1;
}

.modo em {
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  color: var(--modo-colore, var(--primary));
  margin-top: 0.5rem;
}

/* «non ti costa nulla» e «serve tempo, non soldi»: è la risposta alla prima
   domanda che uno si fa, e va vista prima del testo, non dentro. */
.modo-gratis {
  align-self: flex-start;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--modo-velo, var(--primary-light));
  color: var(--modo-colore, var(--primary));
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  margin-bottom: 0.15rem;
}

/* Un colore per ciascuno. ⚠️ Scelti scuri abbastanza da leggersi su bianco:
   il colore qui è anche quello del titolo, non solo del filetto. */
.modo-socio      { --modo-colore: #b8541f; --modo-velo: #fbecdf; }
.modo-dona       { --modo-colore: #c0392b; --modo-velo: #fbe6e3; }
.modo-cinque     { --modo-colore: #217a45; --modo-velo: #e2f1e8; }
.modo-sponsor    { --modo-colore: #1f5f9e; --modo-velo: #e3eef9; }
.modo-volontario { --modo-colore: #8a5a06; --modo-velo: #fbeeda; }
.modo-educatore  { --modo-colore: #6b3fa0; --modo-velo: #efe8f7; }

.carta-socio {
  border-top: 4px solid #b8541f;
}

@media (max-width: 900px) {
  .modi-griglia { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .modi-griglia { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   Home: i nove numeri su DUE righe
   ------------------------------------------------------------
   ⛔ Con `repeat(4, 1fr)` i nove riquadri facevano 4 + 4 + 1: l'ultimo
   restava solo in fondo a sinistra e sembrava un errore di impaginazione,
   non una scelta. Chiesto dal titolare il 24/08/2026: due righe.

   ⚠️ Nove non si divide in due, quindi sono 5 + 4. Si usa flex e non grid
   apposta: con `repeat(5, 1fr)` la seconda riga lascerebbe una casella vuota
   a destra — un buco visibile. Qui i quattro della seconda riga sono
   CENTRATI e larghi quanto i cinque sopra (`flex-grow: 0`), così la riga
   corta si legge come una scelta.

   Vale solo per la home (`#stats-grid`): le altre pagine hanno un numero
   diverso di riquadri e la loro griglia funziona già. */
#stats-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}

#stats-grid .stat-card {
  flex: 0 0 calc((100% - 6rem) / 5);
  min-width: 150px;
}

@media (max-width: 1100px) {
  #stats-grid .stat-card {
    flex: 0 0 calc((100% - 3rem) / 3);
  }
}

@media (max-width: 700px) {
  #stats-grid .stat-card {
    flex: 0 0 calc((100% - 1.5rem) / 2);
  }
}

/* ---------------------------------------------------------------------------
   L'ancora che finiva sotto l'intestazione, e il «torna su»
   --------------------------------------------------------------------------- */
/*
  ⛔ **`scroll-padding-top` sull'elemento radice, non un margine su ogni
  bersaglio** (28/08/2026, segnalato dal titolare: «quando clicco su una
  casella non si posiziona nella pagina nel modo corretto, sembra che vada più
  in basso dell'altezza dell'intestazione»).

  La barra è `position: fixed` e alta **64 px**: il browser porta il bersaglio
  a y=0, che è dietro la barra. Non era un difetto di una pagina — succedeva a
  **ogni** ancora del sito, e nessuno l'aveva mai scritto.

  ⚠️ 80 px e non 64: appoggiare il titolo esattamente al bordo inferiore della
  barra lo fa sembrare incastrato. I 16 di margine sono quelli che fanno
  leggere «questa sezione comincia qui».
*/
html {
  scroll-padding-top: 80px;
}

/*
  Il pulsante «torna su» — vedi `js/torna-su.js` per il quando e il perché.
  ⚠️ **48 px di lato pieni**: è la misura minima di un bersaglio da toccare col
  dito, e su questo sito vale ovunque (il committente non vede bene e non ha la
  mira di un mouse).
*/
.torna-su {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 48px;
  padding: 0.75rem 1.1rem;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font: 600 16px/1 inherit;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

.torna-su:hover {
  background: #c65208;
}

.torna-su:focus-visible {
  outline: 3px solid #7a3200;
  outline-offset: 2px;
}

.torna-su[hidden] {
  display: none;
}

@media (max-width: 640px) {
  /* Da telefono sta più in basso a destra e più stretto: non deve coprire
     l'ultima riga di un modulo mentre si compila. */
  .torna-su {
    right: 0.75rem;
    bottom: 0.75rem;
    padding: 0.75rem 0.9rem;
  }
}

/*
  Il pulsante «Dona ora» fisso da telefono — vedi `js/dona-fisso.js` per il
  quando, il dove e il perché.
  ⚠️ **A sinistra**: a destra c'è già «Torna su», e alla stessa altezza.
  ⚠️ 48 px di lato pieni, come tutti i bersagli da toccare col dito su questo
     sito: il committente non vede bene e non ha la mira di un mouse.
  ⛔ Colori invertiti rispetto a «Torna su» (fondo bianco, testo arancione)
     per la stessa ragione per cui «Accedi» nella barra è un contorno e non un
     pieno: due pastiglie piene identiche agli angoli opposti si contendono
     l'attenzione, e non si capirebbe più quale delle due è l'azione.
*/
.dona-fisso {
  position: fixed;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 48px;
  padding: 0.75rem 1.1rem;
  border: 2px solid var(--primary);
  border-radius: 999px;
  background: #fff;
  color: var(--primary);
  font: 700 16px/1 inherit;
  font-family: inherit;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

.dona-fisso:hover,
.dona-fisso:focus-visible {
  background: var(--primary);
  color: #fff;
}

.dona-fisso:focus-visible {
  outline: 3px solid #7a3200;
  outline-offset: 2px;
}

.dona-fisso[hidden] {
  display: none;
}

@media (max-width: 640px) {
  /* Come «Torna su»: più vicino al bordo, per non coprire l'ultima riga di un
     modulo mentre la si compila. */
  .dona-fisso {
    left: 0.75rem;
    bottom: 0.75rem;
    padding: 0.75rem 0.9rem;
  }
}

/* ---------------------------------------------------------------------------
   Il marchio nella barra: una pastiglia bianca, non un tondo
   --------------------------------------------------------------------------- */
/*
  ⛔ **Era `border-radius: 50%` scritto INLINE nell'immagine**, in tutte e dodici
  le pagine: il logo — che è largo e porta la scritta «La Rosa dei Venti» — veniva
  ritagliato in un cerchio, e di quel cerchio si vedeva quasi solo il sole con
  due pezzi di lettere ai lati.

  Il titolare, il 28/08/2026: «lo potresti fare come un pulsante bianco (tipo
  dona ora) ma con al suo interno un contorno arancione fine».

  ⚠️ La pastiglia è la stessa di «Dona ora» (`999px`, fondo bianco): la barra ha
  già quella forma per i comandi, e il marchio non deve inventarne una seconda.
  Il contorno arancione sta **dentro** la pastiglia — è un `box-shadow: inset`,
  non un `border`, così non allarga l'ingombro e non fa saltare l'allineamento
  delle voci del menù.

  ⚠️ **`object-fit: contain`**: il logo si vede intero, non si ritaglia. È la
  stessa regola delle locandine, e per lo stesso motivo — un marchio tagliato è
  un marchio sbagliato.
*/
.navbar-brand img {
  /* ⭐ **56 px, e il bianco attorno se n'è andato dal FILE** (28/08/2026,
     «fai il logo più grande lasciando meno bianco intorno»). Il margine non
     era il riempimento della pastiglia: era cotto dentro `logo.jpg`, dove il
     disegno occupava il **65% della larghezza e il 70% dell'altezza** — il
     resto bianco. Ritagliato al contenuto in `logo-marchio.png`, il marchio
     riempie la pastiglia invece di galleggiarci dentro, e a parità di ingombro
     si legge molto più grande. ⚠️ Il file ritagliato è alto 200 px e non 56:
     serve la risoluzione vera per il triplo del passaggio del mouse. */
  height: 56px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--primary);
  /* ⚠️ **Il riempimento ai lati è largo apposta, e non è spreco di spazio.**
     La pastiglia è a estremità tonde (`999px`): le due curve rientrano proprio
     dove stanno lo svolazzo della «L» e la «i» finale di «Venti», e il marchio
     sembrava tagliato ai bordi. Il disegno non veniva rimpicciolito — misurato:
     gli servivano 88 px e ne aveva 94 — era la forma della pastiglia a
     mangiarne gli angoli. ⇒ Le curve devono cadere FUORI dal disegno. */
  padding: 0.15rem 1.15rem;
  /* ⚠️ **Il punto fermo dell'ingrandimento è l'angolo in ALTO a sinistra**, e
     tutti e due i termini sono stati pagati. `left`: crescendo dal centro il
     marchio uscirebbe dallo schermo a sinistra. `top`: con `center` usciva
     dallo schermo IN ALTO — il titolare, 28/08/2026: «l'ingrandimento del logo
     va fuori dallo schermo nella parte alta».
     Il conto: la pastiglia è alta ~61 px dentro una barra di 64, quindi il suo
     centro sta a ~32 px dal bordo dello schermo; triplicata diventa ~183 px,
     cioè ~91 sopra il centro — 59 px oltre il bordo, e la barra è `fixed` a
     `top: 0`, così non c'è pagina sopra in cui traboccare: quella parte è
     semplicemente perduta. Ancorando il bordo ALTO, il marchio cresce verso il
     basso, sopra il contenuto della pagina, che invece c'è. */
  transform-origin: left top;
  transition: transform 0.18s ease-out;
  position: relative;
  z-index: 1001;
}

/*
  ⭐ **Il marchio triplica passandoci sopra** (28/08/2026, chiesto dal titolare:
  «è possibile fare in modo che se ci passi sopra diventi il triplo più
  grande?»). Serve a leggerlo: a 52 px la scritta a mano dentro il logo è un
  ghirigoro, a 156 px si legge «La Rosa dei Venti».

  ⚠️ **`transform`, non `height`**: cambiare l'altezza rifà l'impaginazione della
  barra e le voci del menù saltano a destra a ogni passaggio del mouse. Una
  trasformazione disegna e basta, senza spostare niente.
  ⚠️ **`z-index` alto e `overflow: visible` sulla barra**: senza, il marchio
  ingrandito verrebbe tagliato dai 64 px della barra e si vedrebbe una fetta.
  ⚠️ **Solo dove c'è un puntatore vero** (`@media (hover: hover)`): su un
  telefono `:hover` resta appiccicato dopo un tocco, e il marchio resterebbe
  gigante finché non si tocca altrove.
*/
@media (hover: hover) and (pointer: fine) {
  .navbar-brand img:hover,
  .navbar-brand:focus-visible img {
    transform: scale(3);
  }
}

/* Chi ha chiesto meno animazioni ottiene comunque l'ingrandimento — è la cosa
   utile — ma senza la crescita animata, che è l'ornamento. */
@media (prefers-reduced-motion: reduce) {
  .navbar-brand img {
    transition: none;
  }
}

/* Il marchio ingrandito deve poter uscire dalla barra, invece di essere
   tagliato dal suo bordo inferiore. */
.navbar {
  overflow: visible;
}

/* ---------------------------------------------------------------------------
   Il riquadro che sostituisce la mappa finché nessuno la chiede (29/08/2026).
   Vedi `js/mappa.js` per il perché: l'iframe di Google mandava l'indirizzo IP
   di chiunque aprisse la pagina, prima di qualunque consenso.
   ⚠️ Stessa altezza della mappa che sostituisce: senza, la pagina cambierebbe
   forma nel momento in cui si carica, e il contenuto sotto salterebbe.
   --------------------------------------------------------------------------- */
.mappa-consenso {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 320px;
  padding: 1.5rem;
  text-align: center;
  background: #f7f8f6;
  border: 1px dashed #c6cdc6;
  border-radius: 12px;
}

.mappa-consenso-titolo {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

/* ⚠️ Non più stretta di ~65 caratteri: è un testo che spiega una scelta, e va
   letto per intero, non scorso con gli occhi. */
.mappa-consenso-nota {
  margin: 0;
  max-width: 52ch;
  font-size: 1rem;
  line-height: 1.5;
  color: #414c4d;
}