/* ============================================================================
   Amici di Edo OdV — foglio di stile
   ----------------------------------------------------------------------------
   Base tipografica: html = 20px su desktop e tablet, 16.6667px su mobile
   (<600px). Tutto il testo è in rem, quindi cambiando quei due valori si
   riscala l'intera pagina in proporzione.

   Scala modulare con ragione 1.2, così i titoli stanno in rapporto fra loro
   invece di essere numeri scelti a caso:
     h1 70px fisso · h2 2.48832rem · h3 2.0736rem · h4 1.728rem
     h5 1.44rem · h6 1.2rem · corpo 1rem, line-height 1.6
   Interlinea titoli: 1.125 (stretta, perché i titoli sono grandi e su due
   righe una interlinea normale li farebbe sembrare due blocchi separati)

   Breakpoint:
     desktop  >= 960px
     tablet   600px – 959px   -> colonne ancora affiancate, padding 64px
     mobile   <= 599px        -> colonne impilate, padding 40px

   Le altezze delle sezioni su desktop sono elencate nel README: servono da
   riferimento per accorgersi se una modifica ne sposta una senza volerlo.
   ============================================================================ */

/* ---------------------------------------------------------------- 1. Token */
:root {
  --blu:        #3e69dc;  /* accento: pulsanti, titoli terziari, sfondi */
  --inchiostro: #2c313f;  /* titoli su fondo chiaro */
  --notte:      #070731;  /* titolo intro + icone dei tre pilastri */
  --grigio:     #74767e;  /* corpo del testo, icone di contatto */
  --velo:       #1f2025;  /* overlay scuro sopra le foto di sfondo */
  --su-blu:     #dddddd;  /* titolo "Chi siamo" sopra il fondo blu */
  --ombra:      rgba(0, 0, 0, .04) 0 0 25px 1px;

  --titoli: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --testo:  "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-scale: 1;  /* moltiplicatore da barra accessibilità, vedi js/main.js */
}

/* Font ospitati in locale (fonts/), niente richiesta a Google/CDN ad ogni
   visita. Un solo peso per Poppins e due per Lato: gli unici usati dal sito
   (vedi README "Valori tipografici"). Il subset latino copre gli accenti
   italiani (à è é ì ò ù), non serve altro. */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-700.woff2") format("woff2");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/lato-400.woff2") format("woff2");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/lato-700.woff2") format("woff2");
}
@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/lato-400-italic.woff2") format("woff2");
}

/* Font per dislessia, attivabile dalla barra accessibilità: vedi .dislessia
   più sotto (sezione 15bis) e js/main.js. */
@font-face {
  font-family: "OpenDyslexic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/opendyslexic-400.woff2") format("woff2");
}
@font-face {
  font-family: "OpenDyslexic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/opendyslexic-700.woff2") format("woff2");
}

/* ------------------------------------------------------------ 2. Reset base */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: calc(20px * var(--fs-scale));
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Font per dislessia: sostituisce sia i titoli che il testo ovunque, perché
   tutto il foglio di stile usa var(--titoli)/var(--testo). */
html.dislessia {
  --titoli: "OpenDyslexic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --testo:  "OpenDyslexic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body {
  margin: 0;
  font-family: var(--testo);
  font-size: 1rem;         /* 20px */
  line-height: 1.6;        /* 32px */
  color: var(--grigio);
  background: #fff;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--titoli);
  font-weight: 700;
  line-height: 1.125;
  color: var(--inchiostro);
}

h1 { font-size: 70px; line-height: 1; }
h2 { font-size: 2.48832rem; }
h3 { font-size: 2.0736rem; }
h4 { font-size: 1.728rem; }
h6 { font-size: 1.2rem; }

p  { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
iframe { border: 0; }

.spacer  { height: 20px; flex: 0 0 auto; }
.spacer--10 { height: 10px; }

/* Link "salta al contenuto" per chi naviga da tastiera */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;   /* sopra la barra accessibilità (200), sempre visibile a fuoco */
  padding: 12px 20px;
  background: var(--blu);
  color: #fff;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

:where(a, button, input, textarea):focus-visible {
  outline: 3px solid var(--blu);
  outline-offset: 2px;
}

/* L'anello blu sopra sparisce quasi (contrasto ~2,6:1, sotto la soglia 3:1
   richiesta per gli indicatori di focus) contro gli sfondi scuri di questi
   bottoni: qui il focus diventa bianco, ben visibile. */
.s-hero .btn--hero:focus-visible,
.map-frame__bottone:focus-visible,
.cookie-avviso .btn--pill:focus-visible,
.a11y-bar button:focus-visible {
  outline-color: #fff;
}

/* Barra di accessibilità: dimensione testo, font per dislessia, riduci
   movimento. Dimensioni in px, non in rem: è interfaccia fissa, non deve
   crescere insieme al testo che regola. */
.a11y-bar {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--inchiostro);
}
.a11y-bar__wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 6px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.a11y-bar__eti {
  color: #fff;
  font-family: var(--testo);
  font-size: 13px;
  margin-right: 4px;
}
.a11y-bar button {
  font-family: var(--testo);
  font-size: 13px;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
}
.a11y-bar button:hover { border-color: #fff; }
.a11y-bar button[aria-pressed="true"] { background: var(--blu); border-color: var(--blu); }

/* Solo l'etichetta di questo bottone è già in OpenDyslexic: chi è dislessico
   deve poter leggere "Font per dislessia" per capire cosa attivare, non
   scoprirlo dopo averlo già cliccato. Il resto della barra resta invariato. */
#a11y-dislessia { font-family: "OpenDyslexic", var(--testo); }

/* ------------------------------------------------- 3. Impianto delle sezioni */
/* Ogni sezione è una fascia a tutta larghezza (così gli sfondi colorati e le
   foto arrivano ai bordi dello schermo) con dentro un contenitore centrato.
   La larghezza massima del contenitore cambia da sezione a sezione: più
   stretta dove il testo è protagonista, per non superare le ~90 battute per
   riga oltre le quali l'occhio fatica a ritrovare la riga successiva. */
.sec {
  position: relative;
  padding: 50px 24px;
}

.sec__bg,
.sec__ov {
  position: absolute;
  inset: 0;
}
.sec__bg { background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; }
.sec__ov { background: var(--velo); opacity: .5; }

.wrap {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  max-width: 1140px;
  margin: 0 auto;
}
.col { flex: 0 0 auto; min-width: 0; }

/* --------------------------------------------------------------- 4. Pulsanti */
.btn {
  display: inline-block;
  font-family: var(--titoli);
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  border: 0;
}

/* Pulsante dell'hero: squadrato, in contrasto con la pillola del form.
   Sono i due soli pulsanti del sito e fanno cose diverse — questo porta a una
   sezione, quello invia dei dati — quindi hanno forme diverse apposta. */
.btn--hero {
  /* Padding generoso e asimmetrico (40px ai lati contro 15 sopra e sotto):
     dà un bersaglio da 171x52, ben oltre i 44x44 raccomandati per il tocco su
     schermo, senza che il pulsante sembri sproporzionato rispetto al testo. */
  padding: 15px 40px;
  font-size: 15px;
  line-height: 1.44;
  text-transform: uppercase;
  color: #fff;
  background: var(--blu);
  border-radius: 0;
  transition: background-color .2s ease;
}
.btn--hero:hover { background: #2f57c2; }

/* Pulsante del form: a pillola */
.btn--pill {
  padding: 10px 20px;
  font-size: 1rem;
  line-height: 1.44;
  text-transform: uppercase;
  color: #fff;
  background: var(--blu);
  border-radius: 100px;
  transition: background-color .2s ease;
}
.btn--pill:hover { background: #2f57c2; }

/* ============================ 5.  HERO  ==================================
   Foto delle mani impilate con sopra un velo scuro al 50%: senza il velo il
   titolo bianco sparirebbe sulle zone chiare della foto. Contenitore stretto
   (640px) perché qui il testo è poco e centrato: allargarlo lo disperderebbe. */
.s-hero {
  padding: 100px 20px;     /* fascia alta: la foto deve respirare */
  text-align: center;
}
.s-hero .wrap {
  max-width: 640px;
  flex-direction: column;
  /* Margine e padding si sommano a 40px di aria attorno al blocco di testo,
     che sulla foto serve a staccarlo dal rumore dell'immagine. */
  margin: 20px auto;
  padding: 20px;
}
.s-hero h1 {
  color: #fff;
  margin-bottom: 25px;
}
.s-hero .hero__tag { color: #fff; }
.s-hero .btn--hero { margin: 20px 0; }

/* ====================== 6.  INTRO "Gli Amici di Edo"  ====================
   Due colonne 66,66 / 33,34 · contenitore 1170px · padding 50/20           */
.s-intro { padding: 50px 20px; background: #fff; }
.s-intro .wrap { max-width: 1170px; align-items: flex-start; }
.s-intro .col--testo { flex-basis: 66.66%; padding: 20px; }
.s-intro .col--logo  { flex-basis: 33.34%; }

.eyebrow {
  font-family: var(--titoli);
  font-weight: 700;
  font-size: 1.2rem;      /* h6 = 24px */
  line-height: 1.125;
  color: var(--blu);
}
.s-intro h2 { color: var(--notte); margin: 20px 0; }
.s-intro .col--logo img { width: 213px; margin: 0 auto 20px; }

/* ============ 7.  ASCOLTO / CONDIVISIONE / AZIONE (tre schede)  ==========
   Le tre schede non hanno bordo ma solo un'ombra molto diffusa e quasi
   invisibile (--ombra, alfa 0.04): su fondo bianco separa le colonne quel
   tanto che basta senza disegnare tre riquadri marcati.
   Niente padding sopra la sezione: attacca alla sezione intro, di cui è la
   prosecuzione naturale.                                                     */
.s-pillars { padding: 0 20px 20px; background: #fff; }
/* align-items: stretch -> le tre schede hanno la stessa altezza anche se un
   testo è più lungo degli altri, altrimenti le ombre finirebbero sfalsate. */
.s-pillars .wrap { max-width: 1140px; align-items: stretch; }

.pillar {
  flex: 1 1 0;             /* basi uguali: tre colonne della stessa larghezza */
  margin: 10px;            /* 10 + 10 = 20px di corridoio fra una scheda e l'altra */
  padding: 40px 20px 20px;
  background: #fff;
  box-shadow: var(--ombra);
}
/* Altezza e interlinea fissate a 103px invece di lasciar fare al glifo: così
   lo spazio dell'icona è già prenotato prima che Font Awesome finisca di
   caricare, e la scheda non sobbalza sotto gli occhi di chi sta leggendo. */
.pillar i {
  display: block;
  height: 103px;
  font-size: 65px;
  line-height: 103px;
  margin: 5px 0;
  color: var(--notte);
}
.pillar h3 { color: var(--blu); margin: 0; }

/* ================== 8.  MARCIA AMICI DI EDO (mappa + testo)  =============
   Sfondo asfalto ripetuto a dimensione naturale + velo 50%
   Due colonne 50/50 · mappa Google My Maps 500x500 · contenitore 1140px     */
.s-marcia { padding: 50px 24px; }
.s-marcia .sec__bg {
  background-image: url("../images/chandler-cruttenden-ffql6bGm_W8.webp");
  background-repeat: repeat;
  background-size: auto;
}
.s-marcia .col--mappa { flex-basis: 50%; }
.s-marcia .col--testo { flex-basis: 50%; padding: 24px; color: #fff; }

.map-frame { width: 500px; max-width: 100%; margin-bottom: 8px; }
.map-frame iframe { width: 100%; height: 500px; display: block; }
.map-frame__bottone { margin-top: 12px; }
.map-frame__nota { color: #fff; font-size: .8rem; margin-top: 8px; }
.map-frame__nota a { color: #fff; }

/* Messaggio di arrivederci, dentro la colonna di testo: vedi README punto 3
   e mappaStagionale() in js/main.js. Allineato a sinistra come il resto
   della colonna, non centrato: non è un elemento a parte, è la stessa
   colonna che si allarga. */
.marcia__attesa {
  display: block;
  margin-top: 20px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 8px;
}

/* Fuori stagione: una sola colonna (il testo si allarga, la mappa sparisce
   dal layout); dentro, niente data né locandina, solo il messaggio sopra. */
.s-marcia[data-stagione="off"] .col--mappa { display: none; }
.s-marcia[data-stagione="off"] .col--testo { flex-basis: 100%; }
.s-marcia[data-stagione="off"] .marcia__data,
.s-marcia[data-stagione="off"] .locandina { display: none; }

/* In stagione: come sempre, il messaggio di arrivederci non serve. */
.s-marcia[data-stagione="on"] .marcia__attesa { display: none; }

.s-marcia h2 { color: #fff; margin-bottom: 25px; text-transform: uppercase; }
.s-marcia p  { color: #fff; }

.locandina { display: flex; align-items: center; gap: 20px; min-height: 105px; }
.locandina a { color: #fff; text-decoration: none; }
.locandina .locandina__icona { font-size: 60px; line-height: 1.6; }
.locandina p { color: #fff; }

/* ==================== 9.  CITAZIONE (fondo blu pieno)  ===================
   Foto tonda 270px + testo corsivo · colonne 30/70 · contenitore 960px      */
.s-quote { padding: 50px 24px; background: var(--blu); }
.s-quote .wrap { max-width: 960px; }
.s-quote .col--foto  { flex-basis: calc(30% - 24px); margin: 0 12px; }
.s-quote .col--testo { flex-basis: calc(70% - 24px); margin: 0 12px; }

.s-quote .col--foto img {
  width: 270px;
  height: 271px;
  margin: 0 auto 20px;
  object-fit: cover;
  border-radius: 9999px;
}
.s-quote blockquote { margin: 0; }
.s-quote blockquote p {
  margin-bottom: 25px;
  font-size: 1.2rem;       /* 24px */
  line-height: 1.6;
  font-style: italic;
  color: #fff;
}
.s-quote cite {
  display: block;
  margin-bottom: 25px;
  font-size: 12px;
  line-height: 1.6;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
}

/* ============ 10.  DA DOVE VENIAMO / DOVE ANDIAMO (foto + testo)  ========
   Due colonne uguali, foto da un lato e testo dall'altro. I due blocchi si
   specchiano (foto a sinistra qui, a destra là) per dare ritmo alla pagina
   invece di allineare tutte le foto sullo stesso lato.                       */
.s-origini,
.s-futuro { padding: 50px 24px; }
.s-origini .col--foto,
.s-futuro  .col--foto  { flex-basis: 50%; }
.s-origini .col--testo,
.s-futuro  .col--testo { flex-basis: 50%; padding: 24px; }

/* aspect-ratio + object-fit: cover -> il riquadro della foto ha sempre le
   stesse proporzioni qualunque sia l'immagine caricata, che viene ritagliata
   dal browser invece di deformare il layout. Sostituire una foto non richiede
   quindi di ritagliarla prima.
   Il margine inferiore di 20px non è decorativo: è l'ultima cosa dentro la
   colonna, quindi è lui a dare l'altezza finale alla sezione. */
.s-origini .col--foto img { width: 100%; aspect-ratio: 570 / 760; object-fit: cover; margin-bottom: 20px; }
.s-futuro  .col--foto img { width: 100%; aspect-ratio: 1 / 1;     object-fit: cover; margin-bottom: 20px; }

.s-origini h2,
.s-futuro  h2 { text-transform: uppercase; margin-bottom: 25px; }

/* ================== 11.  CHI SIAMO (fondo blu + elenco spuntato)  ========
   Testo a sinistra, foto quadrata a destra · contenitore 1140px             */
.s-chisiamo { padding: 50px 24px; background: var(--blu); }
.s-chisiamo .col--testo { flex-basis: 50%; padding: 24px; }
.s-chisiamo .col--foto  { flex-basis: 50%; }
.s-chisiamo .col--foto img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; margin-bottom: 20px; }

.s-chisiamo h2 { color: var(--su-blu); text-transform: uppercase; margin-bottom: 25px; }
.s-chisiamo p  { color: #fff; }

.check-list li {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 5px;
  color: #fff;
}
.check-list i { flex: 0 0 15px; font-size: 12px; text-align: center; color: #fff; }

/* ========================= 12.  PER CHI (fondo blu)  =====================
   Una fascia blu, dentro tre colonne centrate · contenitore 1170px          */
.s-perchi { padding: 50px 20px; background: var(--blu); }
.s-perchi .wrap { max-width: 1170px; flex-direction: column; align-items: stretch; }
.s-perchi h2 {
  color: #fff;
  font-size: 40px;
  line-height: 1.125;
  margin: 0 0 25px 20px;
  text-transform: uppercase;
}

.perchi-grid {
  display: flex;
  flex-wrap: wrap;
}
.perchi-grid > div {
  flex: 1 1 0;
  padding: 0 20px;
  text-align: center;
}
/* Blocco icona alto 85px: 75 di riga + 5+5 di margine */
.perchi-grid i {
  display: block;
  height: 75px;
  font-size: 50px;
  line-height: 75px;
  margin: 5px 0;
  color: #fff;
}
.perchi-grid h4 { font-size: 23px; color: #fff; margin-bottom: 25px; }
.perchi-grid p  { color: #fff; margin-bottom: 25px; }

/* ============ 13.  SOSTEGNO (foto di sfondo + scheda bianca/blu)  ========
   Colonna bianca 50% padding 40 · colonna blu 50% padding 80/30
   Contenitore 1100px · padding sezione 80/20                               */
.s-sostegno { padding: 80px 20px; }
.s-sostegno .sec__bg {
  background-image: url("../images/hands-holding-each-other-support.webp");
  background-position: 50% 100%;
}
.s-sostegno .wrap { max-width: 1100px; }
.s-sostegno .col--claim { flex-basis: 50%; padding: 40px; background: #fff; }
.s-sostegno .col--dati  { flex-basis: 50%; padding: 80px 30px; background: var(--blu); text-align: center; }

.s-sostegno h3 { color: var(--inchiostro); margin-bottom: 25px; }
.s-sostegno .claim__sub {
  display: block;
  margin-bottom: 25px;
  font-family: var(--titoli);
  font-weight: 700;
  font-size: 18px;
  line-height: 40px;
  color: var(--blu);
}
.s-sostegno h4 { color: #fff; margin-bottom: 25px; }

/* Codice fiscale e IBAN: riquadri bianchi arrotondati, cliccabili per copiare */
.dato {
  display: block;
  width: 100%;
  padding: 45px;
  border: 0;
  border-radius: 20px;
  background: #fff;
  font-family: var(--titoli);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.1;        /* 2 righe = 44px -> riquadro alto 134px */
  color: var(--inchiostro);
  cursor: pointer;
  text-align: center;
  transition: background-color .2s ease;
}
.dato:hover { background: #eef2fd; }
.dato span { display: block; }
.dato .dato__eti { text-transform: uppercase; }
.s-sostegno hr {
  height: 2px;
  border: 0;
  border-top: 1px solid #fff;
  margin: 30px 0;
}

/* Conferma della copia: messaggio a comparsa, fuori dal flusso, così non
   sposta di un pixel il resto della pagina. */
.copia-msg {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 50;
  transform: translateX(-50%);
  padding: 12px 20px;
  border-radius: 100px;
  background: var(--inchiostro);
  color: #fff;
  font-family: var(--testo);
  font-size: 15px;
  line-height: 1.3;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.copia-msg.mostra { opacity: 1; }

/* ======================= 14.  CONTATTI (dati + form)  ====================
   align-items: flex-start e non center: le due colonne hanno altezze molto
   diverse (il form è più lungo dei recapiti) e centrarle lascerebbe i recapiti
   a mezz'aria, staccati dal titolo della sezione.                            */
.s-contatti { padding: 50px 24px; }
.s-contatti .wrap { max-width: 1140px; align-items: flex-start; }
.s-contatti .col { flex-basis: 50%; padding: 24px; }

/* Altezza fissa come per le icone delle schede: prenota lo spazio prima che
   Font Awesome sia caricato, così il titolo "Contattaci" non scivola in su. */
.s-contatti .icona-grande {
  display: block;
  height: 91px;
  font-size: 60.5px;
  line-height: 91px;
  color: var(--grigio);
}
.s-contatti h2 { color: var(--inchiostro); margin-bottom: 25px; }

.contact-list li { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; }
.contact-list i { flex: 0 0 15px; font-size: 12px; text-align: center; color: var(--grigio); }
.contact-list a { color: var(--inchiostro); text-decoration: underline; }
.contact-list a:hover { color: var(--blu); }

.social-eti {
  margin: 20px 0 25px;
  font-size: 12px;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--grigio);
}
.social {
  display: flex;
  align-items: center;
  gap: 40px;
  height: 36px;
  margin-bottom: 20px;
}
.social a { font-size: 34px; line-height: 1; text-decoration: none; }
.social .fa-facebook  { color: #1877f2; }
.social .fa-instagram { color: #e1306c; }
.social a:hover { opacity: .8; }

/* Form: etichette 20px, campi bordo 2px grigio raggio 4px, invio a pillola */
.form label {
  display: block;
  margin-bottom: 10px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--grigio);
}
.form label .obb { color: crimson; }

.form input[type="text"],
.form input[type="email"],
.form textarea {
  width: 100%;
  padding: 16px;
  margin-bottom: 16px;
  font-family: var(--testo);
  font-size: 1rem;
  line-height: 1.15;
  color: var(--grigio);
  background: transparent;
  border: 2px solid var(--grigio);
  border-radius: 4px;
}
.form textarea { height: 200px; resize: vertical; }
.form input:focus,
.form textarea:focus { border-color: var(--blu); }

.form__nota { margin-bottom: 10px; color: var(--grigio); }
.form .g-recaptcha { min-height: 78px; margin: 16px 0; }
.form .btn--pill { margin-top: 28px; }

.form__esito {
  display: block;
  margin-top: 20px;
  font-size: 1rem;
  line-height: 1.6;
}
.form__esito:empty { margin: 0; }
.form__esito.ok { color: #1c7c4a; }
.form__esito.ko { color: crimson; }

/* Campo trappola per i bot: invisibile a chi legge, compilato dagli spambot */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ===================== 15.  Comparsa allo scorrimento  ===================
   Dissolvenza con un piccolo movimento verso l'alto: accompagna la lettura
   segnalando che è arrivato un blocco nuovo. Volutamente breve (0,7s) e con
   uno spostamento minimo (30px), perché un'animazione lunga o ampia diventa
   un ostacolo invece di un aiuto quando si scorre in fretta.
   La classe .visibile la aggiunge js/main.js. Se il JavaScript non parte, il
   contenuto resterebbe invisibile: per questo lo stesso file la aggiunge
   subito a tutti gli elementi quando IntersectionObserver non c'è.           */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}
.reveal.visibile { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Stesso effetto, ma per chi lo attiva dalla barra accessibilità invece che
   dal sistema operativo (vedi js/main.js). */
html.riduci-movimento { scroll-behavior: auto; }
html.riduci-movimento .reveal { opacity: 1; transform: none; transition: none; }

/* ============================================================================
   16.  TABLET  600 – 959px
   Le colonne restano affiancate: a questa larghezza due colonne al 50% danno
   ancora righe leggibili, impilarle sprecherebbe metà schermo. Cresce invece
   il padding verticale (50 -> 64px), perché con le colonne più strette le
   sezioni si allungano e servono stacchi più netti fra una e l'altra.
   ============================================================================ */
@media (max-width: 959px) {
  .s-marcia,
  .s-quote,
  .s-origini,
  .s-chisiamo,
  .s-futuro,
  .s-contatti { padding: 64px 24px; }

  .s-perchi   { padding: 40px 20px; }
  .s-sostegno { padding: 40px 20px; }

  .map-frame  { width: 100%; }
}

/* ============================================================================
   17.  MOBILE  <= 599px
   Le colonne si impilano. Due sezioni usano column-reverse per far arrivare
   per prima la cosa che conta di più su uno schermo stretto: nella Marcia il
   testo (data e luogo) prima della mappa, in Chi siamo la foto prima
   dell'elenco delle finalità.
   ============================================================================ */
@media (max-width: 599px) {
  html { font-size: calc(16.6667px * var(--fs-scale)); }

  .sec { padding: 40px 20px; }

  /* Impilate in verticale, le colonne non hanno più bisogno del loro padding
     interno — serviva a separarle l'una dall'altra in orizzontale — e anzi lo
     sprecherebbero: su 390px ogni pixel di larghezza è testo leggibile in più.
     Restano 7,5px sul contenitore, appena un respiro dal bordo dello schermo. */
  .wrap {
    flex-direction: column;
    align-items: stretch;
    padding-left: 7.5px;
    padding-right: 7.5px;
  }
  .col {
    flex-basis: auto !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
  }
  .s-intro .col--testo { padding: 20px !important; }
  .perchi-grid > div   { padding: 20px; }
  .s-perchi h2 { margin: 0 0 20px; padding: 20px; }

  .s-hero    { padding: 100px 20px; }
  .s-intro   { padding: 50px 20px; }
  .s-pillars { padding: 0 20px 20px; }
  .s-marcia,
  .s-quote,
  .s-origini,
  .s-chisiamo,
  .s-futuro,
  .s-sostegno,
  .s-contatti { padding: 40px 20px; }
  .s-perchi   { padding: 20px; }

  .s-marcia   .wrap,
  .s-chisiamo .wrap { flex-direction: column-reverse; }

  /* Le tre schede una sotto l'altra, con lo stesso corridoio di 20px */
  .pillar { flex: 1 1 auto; margin: 10px !important; padding: 40px 20px 20px !important; }

  /* Unico caso in cui il testo cresce sul mobile invece di rimpicciolirsi
     (32px contro i 24px del desktop): la citazione è corta e sta da sola in
     una sezione tutta sua, quindi può permettersi di fare da titolo. */
  .s-quote blockquote p { font-size: 1.92rem; line-height: 1.6; }
  .s-quote .col { margin-bottom: 24px !important; }
  .s-quote .col--foto img { margin: 0 auto 16.6667px; }

  /* I sottotitoli scendono da 23 a 18px: a tutta larghezza "Insegnanti ed
     Educatori" andrebbe a capo in modo brutto. Le spaziature verticali da 25
     a 20px perché, impilati, questi blocchi sono tre invece che uno. */
  .perchi-grid h4 { font-size: 18px; margin-bottom: 20px; }
  .perchi-grid p  { margin-bottom: 20px; }
  .s-sostegno .col { margin-bottom: 20px !important; }

  .s-intro .col--logo img { margin: 25px auto 0; }

  .map-frame { width: 100%; }

  .perchi-grid { flex-direction: column; }

  .s-sostegno .col--claim { padding: 20px !important; }
  .s-sostegno .col--dati  { padding: 20px !important; }
  .dato { padding: 37.5px; }
  .s-hero .wrap { padding: 20px; }

  .social { gap: 30px; }
}

/* ------------------------------------------------------------- 18. Stampa */
@media print {
  .sec__ov, .s-hero, .map-frame, .form, .a11y-bar, .cookie-avviso { display: none; }
  .sec { padding: 12pt 0; background: none !important; }
  body { color: #000; font-size: 11pt; }
}

/* ---------------------------------------- 19. Footer, avviso cookie, legal */
.footer {
  background: var(--inchiostro);
  color: #fff;
  text-align: center;
  padding: 24px;
  font-size: .9rem;
}
.footer p { margin-top: 6px; }
.footer p:first-child { margin-top: 0; }
.footer a { color: #fff; }

/* Fascia fissa in basso, chiusa una volta sola (localStorage), vedi
   avvisoCookie() in js/main.js e README punto 9. */
.cookie-avviso {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 250;
  background: var(--inchiostro);
  color: #fff;
  padding: 16px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.cookie-avviso p { margin: 0; max-width: 640px; font-size: .9rem; }
.cookie-avviso a { color: #fff; }
.cookie-avviso .btn--pill { flex: 0 0 auto; padding: 8px 20px; font-size: .85rem; }
/* Senza questa riga l'attributo hidden non basta: "display: flex" qui sopra
   e la regola [hidden] del browser hanno la stessa specificità, e la
   nostra (arrivando dopo) vince — la fascia resterebbe visibile anche con
   hidden impostato da js/main.js. */
.cookie-avviso[hidden] { display: none; }

/* Pagina Privacy e Cookie Policy: prosa semplice, non le due colonne delle
   altre sezioni — .wrap è pensato per quelle, qui basta un contenitore
   proprio. */
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 50px 24px 80px;
}
.legal h1 { font-size: 2.48832rem; line-height: 1.125; margin-bottom: 20px; }
.legal h2 { font-size: 1.728rem; margin: 40px 0 12px; }
.legal p, .legal li { margin-bottom: 16px; }
.legal ul { padding-left: 20px; list-style: disc; }
.legal a { color: var(--blu); }
.legal .torna { display: inline-block; margin-bottom: 30px; }