/* ============================================================================
   Amici di Edo OdV — foglio di stile
   ----------------------------------------------------------------------------
   Tutti i valori (font, colori, padding, larghezze, breakpoint) sono stati
   misurati sul sito WordPress live www.amicidiedo.it con gli strumenti di
   sviluppo del browser, sezione per sezione.

   Base tipografica (tema Neve): html = 20px su desktop/tablet, 16.6667px su
   mobile (<600px). Scala modulare 1.2 in rem:
     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

   Breakpoint (plugin Otter, identici all'originale):
     desktop  >= 960px
     tablet   600px – 959px   -> colonne ancora affiancate, padding 64px
     mobile   <= 599px        -> colonne impilate, padding 40px
   ============================================================================ */

/* ---------------------------------------------------------------- 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;
}

/* 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: fascia a tutta larghezza + contenitore centrato a larghezza
   massima variabile (era la "columns width" impostata su ogni blocco Otter). */
.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: rettangolare, non a pillola */
.btn--hero {
  padding: 15px 40px;      /* riquadro 171 x 52, come sull'originale */
  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 mani impilate + velo scuro 50% · contenitore 640px · padding 100/20  */
.s-hero {
  padding: 100px 20px;
  text-align: center;
}
.s-hero .wrap {
  max-width: 640px;
  flex-direction: column;
  margin: 20px auto;      /* 20 + 20: come il margine della colonna Otter */
  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)  ==========
   Tre colonne uguali, margine 10px (quindi 20px di corridoio), scheda bianca
   con ombra diffusa · contenitore 1140px · padding 0/20/20                  */
.s-pillars { padding: 0 20px 20px; background: #fff; }
.s-pillars .wrap { max-width: 1140px; align-items: stretch; }

.pillar {
  flex: 1 1 0;
  margin: 10px;
  padding: 40px 20px 20px;
  background: #fff;
  box-shadow: var(--ombra);
}
/* L'icona occupa un blocco di 113px: 103 di riga + 5+5 di margine, come
   il blocco icona di Font Awesome sul sito attuale. */
.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; opacity: .8; 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 50/50 · foto 3:4 (origini) e 1:1 (futuro) · contenitore 1140  */
.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; }

/* Le foto hanno un margine inferiore di 20px: è quello a definire l'altezza
   della sezione, esattamente come nel sito attuale. */
.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)  ====================
   Due colonne 50/50 allineate in alto · contenitore 1140px                 */
.s-contatti { padding: 50px 24px; }
.s-contatti .wrap { max-width: 1140px; align-items: flex-start; }
.s-contatti .col { flex-basis: 50%; padding: 24px; }

.s-contatti .icona-grande {
  display: block;
  height: 91px;            /* come sull'originale */
  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  ===================
   Riproduce la dissolvenza del plugin Otter, ma senza il plugin.
   Chi ha attivato "riduci animazioni" nel sistema operativo la salta.       */
.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 come sul sito originale; cambia il padding
   verticale delle sezioni.
   ============================================================================ */
@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. Marcia e Chi siamo usano column-reverse, esattamente
   come il sito attuale: nella Marcia il testo precede la mappa, in Chi siamo
   la foto precede il testo.
   ============================================================================ */
@media (max-width: 599px) {
  html { font-size: calc(16.6667px * var(--fs-scale)); }

  .sec { padding: 40px 20px; }

  /* Su mobile il contenitore Otter guadagna 7,5px di respiro laterale e le
     colonne perdono il loro padding interno: riprodotto qui identico. */
  .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; }

  /* La citazione sul mobile è più grande che su desktop: è così anche sul
     sito attuale (32px / 51,2px), quindi viene riprodotta identica. */
  /* La citazione su mobile è più grande che su desktop: è così anche sul
     sito attuale (32px / 51,2px), quindi viene riprodotta identica. */
  .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; }

  /* Su mobile i sottotitoli scendono da 23px a 18px e le spaziature
     verticali da 25px a 20px, come nell'originale. */
  .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; }