/* ============================================================
   centro.css — "Il Centro di Performance"
   Mondo visivo del redesign 2026-07 (vedi DESIGN.md).
   Corporate umano + layer della misura.
   Un solo accento: Verde Performance.
   Display: Archivo · Testo: Hanken Grotesk.
   ============================================================ */

/* ============================================================
   Font ospitati sul nostro dominio
   ============================================================
   Prima erano su fonts.googleapis.com con `display=swap`. Misurato il 2026-07-27
   con throttling Fast 3G: CLS oltre la soglia "good" (0.10) su TUTTE e 6 le pagine
   su desktop — come-funziona a 0.2676 — perche' al primo caricamento la pagina
   saltava di ~31px quando i webfont sostituivano il fallback di sistema.

   La causa NON era la larghezza dei caratteri: misurata sul testo reale del sito
   (42.187 caratteri, copertura 100%), l'avanzamento medio di Hanken Grotesk e'
   0.3939 em contro 0.3967 di Arial, cioe' lo 0.7% di differenza. Il colpevole e'
   l'ALTEZZA DELLE RIGHE: l'ascender di Hanken Grotesk vale il 100.73% della em
   contro il 72.8% di Arial. Ogni riga cambiava altezza, e con essa tutto il flusso.

   Tre interventi, non uno:
   1. i file stanno qui (nessun DNS + TLS verso un terzo dominio prima di scoprire
      quali font servono: la CSS di Google era essa stessa una richiesta bloccante);
   2. sono VARIABILI (asse wght 100-900): un file per famiglia copre i pesi
      400/500/600/700/750/800 usati dal sito. 68 KB per il latino, contro i 9 file
      statici che Google avrebbe servito;
   3. i fallback hanno metriche allineate (`size-adjust`, `ascent-override`,
      `descent-override`), calcolate dai font reali: cosi' il testo NON si sposta
      quando il webfont arriva. E' questo che azzera il CLS, non il self-hosting.

   Licenze OFL accanto ai file (assets/fonts/OFL-*.txt). Per rigenerare:
   scripts/seo-geo/gen-og-centro.py --fetch-fonts scarica i TTF; i woff2 variabili
   vengono dalla CSS di Google interrogata con uno User-Agent moderno.
   ============================================================ */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/hanken-grotesk-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/hanken-grotesk-latin-ext.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Fallback a metriche allineate. `local()` fissa il font di sistema su cui vengono
   applicate le correzioni: senza, il fallback cambierebbe per sistema operativo e
   le correzioni sarebbero calcolate su metriche sbagliate. Liberation Sans e'
   metricamente compatibile con Arial, quindi copre anche Linux. */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans"), local("Helvetica");
  size-adjust: 99.45%;
  ascent-override: 88.29%;
  descent-override: 21.12%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Hanken Grotesk Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans"), local("Helvetica");
  size-adjust: 99.28%;
  ascent-override: 100.73%;
  descent-override: 30.52%;
  line-gap-override: 0%;
}

:root {
  --campo: #FAF9F7;
  --superficie: #FFFFFF;
  --grafite: #1B1E23;
  --grafite-scura: #14171B;
  --grafite-rialzo: #1D2126;      /* superfici tonali sulle sezioni scure */
  --voce: #545B63;
  --voce-su-scuro: #B9BEC6;
  --testo-su-scuro: #E9EAEC;
  --linea: #E5E2DC;
  /* Bordo dei soli controlli di form. WCAG 1.4.11 chiede >= 3:1 per i confini dei
     componenti di interfaccia: --linea (1.23:1 su --campo) va bene per i contorni
     decorativi delle card ma NON per un input, dove il bordo E' il componente.
     #92908D = 3.03:1 su --campo e 3.18:1 su --superficie: e' il grigio caldo piu'
     chiaro che passa, scelto per conformare con il minimo scarto visivo. */
  --linea-campo: #92908D;
  --linea-su-scuro: #2A2F36;
  --verde: #0E9F6E;
  --verde-profondo: #0B7A55;
  --verde-hover: #086246;
  --verde-chiaro: #2FC98E;
  --verde-velo: #EAF6F0;
  --display: "Archivo", "Archivo Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --testo: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --misura: 46rem;
  --gabbia: 73.75rem; /* 1180px */
  --raggio-card: 12px;
  --raggio-btn: 8px;
  --raggio-chip: 6px;
  --ombra-flottante: 0 14px 34px -14px rgba(20, 23, 27, 0.28);
}

/* ----- Reset essenziale ----- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--campo);
  color: var(--grafite);
  font-family: var(--testo);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
img { height: auto; } /* gli attributi width/height non devono vincere sull'aspect-ratio CSS */
a { color: var(--verde-profondo); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--verde-hover); }
::selection { background: var(--verde-velo); color: var(--grafite); }

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--verde-profondo);
  outline-offset: 2px;
}

/* utility richieste da site.js (menu mobile, sticky CTA vs banner consenso) */
.hidden { display: none !important; }
.hidden-by-cookie { display: none !important; }

/* gli anchor non devono finire sotto la testata sticky */
[id] { scroll-margin-top: 4.75rem; }

/* ----- Skip link ----- */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--grafite); color: #fff;
  font-family: var(--display); font-size: 0.875rem; font-weight: 600;
  padding: 0.5rem 1rem; border-radius: 0 0 var(--raggio-chip) 0;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

/* ============================================================
   Tipografia
   ============================================================ */
.marcatore {
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--voce);
  display: inline-flex; align-items: center; gap: 0.55rem;
}
.marcatore::before {
  content: ""; width: 0.5rem; height: 0.5rem; border-radius: 2px;
  background: var(--verde); flex: none;
}

.titolo-hero {
  font-family: var(--display);
  font-weight: 750;
  font-size: clamp(2.6rem, 5.5vw, 4.25rem);
  line-height: 1.03;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}
.sottolinea {
  text-decoration: underline;
  text-decoration-color: var(--verde);
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.1em;
}

.titolo-sezione {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
  text-wrap: balance;
}

.lead { font-size: 1.1875rem; line-height: 1.6; color: var(--grafite); }
p { margin: 0 0 1.1em; max-width: var(--misura); }
strong { font-weight: 700; }
.num { font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums; }

.didascalia {
  font-size: 0.84375rem; line-height: 1.5; color: var(--voce); margin-top: 0.7rem;
}
.didascalia strong { color: var(--grafite); }

/* ============================================================
   Gabbia e sezioni
   ============================================================ */
.gabbia { max-width: var(--gabbia); margin: 0 auto; padding: 0 1.375rem; }
.colonna { max-width: var(--misura); }

.sezione { padding: 5rem 0; }
.sezione--superficie { background: var(--superficie); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.sezione--focus { background: var(--grafite-scura); color: var(--testo-su-scuro); }
.sezione--focus .titolo-sezione { color: #fff; }
.sezione--focus p { color: var(--testo-su-scuro); }
.sezione--focus .didascalia { color: var(--voce-su-scuro); }
.sezione--focus .didascalia strong { color: #fff; }
.sezione--focus .marcatore { color: var(--voce-su-scuro); }
.sezione--focus .marcatore::before { background: var(--verde-chiaro); }
.sezione--focus a { color: var(--verde-chiaro); }
.sezione--focus a.btn-verde { color: #fff; }
.sezione--focus a.btn-verde:hover { color: #fff; }
.sezione--focus a.btn-contorno--su-scuro { color: #fff; }
.sezione--focus a.btn-contorno--su-scuro:hover { color: var(--verde-chiaro); }

.sezione-testa { max-width: var(--misura); margin-bottom: 2.5rem; }
.sezione-testa .lead { margin: 0; color: var(--voce); }
.sezione--focus .sezione-testa .lead { color: var(--voce-su-scuro); }

/* ============================================================
   Testata (nav)
   ============================================================ */
nav.site-nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--campo);
  border-bottom: 1px solid var(--linea);
}
/* .scrolled la aggiunge site.js oltre i 50px. C'era già l'ombra ma senza
   transizione: compariva di scatto. Ora la testata si stacca gradualmente. */
nav.site-nav { transition: box-shadow 0.3s ease, background-color 0.3s ease; }
nav.site-nav.scrolled {
  box-shadow: 0 12px 28px -20px rgba(20, 23, 27, 0.45);
  background: rgba(250, 249, 247, 0.92);
  backdrop-filter: saturate(1.4) blur(8px);
}
.nav-inner {
  max-width: var(--gabbia); margin: 0 auto; padding: 0.85rem 1.375rem;
  display: flex; align-items: center; gap: 1.5rem;
}
.nav-marchio {
  font-family: var(--display); font-weight: 800; font-size: 1.25rem;
  letter-spacing: -0.01em; color: var(--grafite); text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.6rem;
}
.nav-marchio:hover { color: var(--grafite); }
.nav-logo { height: 2.1rem; width: auto; display: block; }
.nav-sottotitolo {
  font-family: var(--display); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--voce);
  border-left: 1px solid var(--linea); padding-left: 0.85rem;
}
.nav-voci { display: flex; align-items: center; gap: 1.5rem; margin-left: auto; }
.nav-voci a {
  font-family: var(--testo); font-size: 0.9375rem; font-weight: 600;
  color: var(--grafite); text-decoration: none;
}
.nav-voci a:hover { color: var(--verde-profondo); }
/* La CTA in nav deve restare bianca su verde: .nav-voci a (0,1,1) batterebbe
   .btn-verde (0,1,0) — stesso schema di .sezione--focus a.btn-verde. */
.nav-voci a.btn-verde { color: #fff; }
.nav-voci a.btn-verde:hover { color: #fff; }
.nav-voci .btn { font-size: 0.875rem; padding: 0.55rem 1.05rem; }

#hamburger-btn {
  display: none; margin-left: auto; background: none;
  border: 1px solid var(--linea); border-radius: var(--raggio-btn);
  padding: 0.5rem 0.6rem; cursor: pointer; color: var(--grafite);
}
#hamburger-btn svg { display: block; }
#hamburger-btn .icon-close { display: none; }
#hamburger-btn[aria-expanded="true"] .icon-hamburger { display: none; }
#hamburger-btn[aria-expanded="true"] .icon-close { display: block; }
#mobile-menu { display: none; border-top: 1px solid var(--linea); background: var(--superficie); }
#mobile-menu.open { display: block; }
#mobile-menu a {
  display: block; padding: 0.95rem 1.375rem;
  font-family: var(--testo); font-weight: 600; font-size: 1rem;
  color: var(--grafite); text-decoration: none;
  border-bottom: 1px solid var(--linea);
}
#mobile-menu a:hover { color: var(--verde-profondo); }

@media (max-width: 63.99rem) {
  .nav-voci { display: none; }
  #hamburger-btn { display: block; }
  .nav-sottotitolo { display: none; }
}

/* ============================================================
   Bottoni
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  font-family: var(--display); font-weight: 700; font-size: 0.9375rem;
  padding: 0.75rem 1.5rem; border-radius: var(--raggio-btn);
  border: 1.5px solid transparent; text-decoration: none; cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn-verde { background: var(--verde-profondo); color: #fff; border-color: var(--verde-profondo); }
.btn-verde:hover { background: var(--verde-hover); border-color: var(--verde-hover); color: #fff; }
.btn-contorno { background: transparent; color: var(--grafite); border-color: var(--grafite); }
.btn-contorno:hover { color: var(--verde-profondo); border-color: var(--verde-profondo); }
.btn-contorno--su-scuro { color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.btn-contorno--su-scuro:hover { color: var(--verde-chiaro); border-color: var(--verde-chiaro); }
.btn .btn-nota { font-family: var(--testo); font-weight: 500; font-size: 0.8125rem; opacity: 0.85; }

/* ============================================================
   Hero — testo + fotografia con scheda-card
   ============================================================ */
.hero { padding: 4.25rem 0 4.75rem; }
.hero-griglia {
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: 3.5rem; align-items: center;
}
.hero .marcatore { margin-bottom: 1.5rem; }
.hero .sottotesto { font-size: 1.1875rem; line-height: 1.6; margin: 1.6rem 0 2.1rem; color: var(--grafite); }
.hero-azioni { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }

.impegni { list-style: none; margin: 2.1rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid var(--linea); display: grid; gap: 0.45rem; }
.impegni li {
  font-family: var(--testo); font-size: 0.9375rem; color: var(--voce);
  position: relative; padding-left: 1.4rem;
}
.impegni li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  font-family: var(--display); font-weight: 700;
  color: var(--verde-profondo);
}
.impegni .num { color: var(--grafite); }

.hero-foto { position: relative; margin: 0; }
.hero-foto img {
  width: 100%; aspect-ratio: 4 / 4.2; object-fit: cover; object-position: 50% 52%;
  border-radius: var(--raggio-card);
}

/* Scheda-card — la Scheda di Efficacia sovrapposta alla foto */
.scheda-card {
  position: absolute; left: -1.75rem; bottom: 1.75rem;
  background: var(--superficie); border-radius: var(--raggio-card);
  box-shadow: var(--ombra-flottante);
  padding: 1rem 1.2rem 1.05rem; max-width: 17.5rem;
  display: grid; gap: 0.45rem;
}
.scheda-etichetta {
  font-family: var(--display); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--verde-profondo);
}
.scheda-criterio { font-family: var(--display); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em; }
.scheda-scala { display: flex; gap: 0.25rem; margin: 0.15rem 0; }
.scheda-scala i {
  width: 1.6rem; height: 0.6rem; border-radius: 4px; background: #DFDBD3;
}
.scheda-scala i.pieno { background: var(--verde); }
.scheda-nota { font-size: 0.78125rem; color: var(--voce); }

@media (max-width: 63.99rem) {
  .hero { padding-top: 3rem; }
  .hero-griglia { grid-template-columns: 1fr; gap: 2.25rem; }
  .hero-foto img { aspect-ratio: 1 / 1; object-position: 50% 55%; }
  .scheda-card { left: 1rem; bottom: -1.5rem; }
  .hero-foto { margin-bottom: 2.4rem; }
}
@media (max-width: 47.99rem) {
  .hero-azioni .btn, .chiusura-azioni .btn { width: 100%; flex-wrap: wrap; }
  .hero-azioni .btn .btn-nota { flex-basis: 100%; text-align: center; }
}

/* ============================================================
   Sessione dal vivo — sezione focus con il video reale
   ============================================================ */
.sessione-testa {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 2rem; margin-bottom: 2rem; flex-wrap: wrap;
}
.sessione-testa .titolo-sezione { margin: 0; }
.sessione-testa .lead { margin: 0; max-width: 30rem; font-size: 1.0625rem; color: var(--voce-su-scuro); }

#hero-video-wrap {
  position: relative; cursor: pointer; aspect-ratio: 16 / 9;
  background: var(--grafite-rialzo); overflow: hidden; border-radius: var(--raggio-card);
}
#hero-video-wrap video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
#hero-video-play-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(20, 23, 27, 0.3); opacity: 0; transition: opacity 0.25s ease; pointer-events: none;
}
#hero-video-wrap:hover #hero-video-play-overlay,
#hero-video-wrap:focus-visible #hero-video-play-overlay { opacity: 1; }
.play-timbro {
  width: 3.75rem; height: 3.75rem; border-radius: 50%;
  background: #fff; display: flex; align-items: center; justify-content: center;
}
.play-timbro svg { width: 1.5rem; height: 1.5rem; color: var(--verde-profondo); margin-left: 2px; }
.video-tag {
  position: absolute; top: 0.85rem; left: 0.85rem; pointer-events: none;
  font-family: var(--display); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: rgba(20, 23, 27, 0.78); color: #fff;
  padding: 0.4rem 0.65rem 0.4rem 0.55rem; border-radius: var(--raggio-chip);
  display: inline-flex; align-items: center; gap: 0.45rem;
}
.video-tag::before {
  content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%;
  background: var(--verde-chiaro);
}

/* ============================================================
   La Scheda di Efficacia — il tema della misura
   ============================================================ */
.scheda-griglia {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.94fr);
  gap: 4rem; align-items: center;
}
@media (max-width: 63.99rem) { .scheda-griglia { grid-template-columns: 1fr; gap: 2.5rem; } }
.scheda-griglia .marcatore { margin-bottom: 1rem; }
.scheda-rimando { color: var(--grafite); }
.scheda-rimando strong { font-family: var(--display); letter-spacing: -0.01em; }

/* Il documento-Scheda reso in pagina (esempio illustrativo).
   Chrome scuro in testa: la card deve leggere come artefatto/screen, non come testo. */
.scheda-doc {
  --scheda-pad: 1.6rem;
  background: var(--campo); border: 1px solid var(--linea);
  border-radius: var(--raggio-card); padding: 0 var(--scheda-pad) 1.35rem;
  overflow: hidden;
}
.scheda-doc-testa {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--grafite);
  margin: 0 calc(-1 * var(--scheda-pad));
  padding: 0.85rem var(--scheda-pad);
}
.scheda-doc-testa .scheda-etichetta { color: var(--verde-chiaro); }
.scheda-doc-badge {
  font-family: var(--display); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--voce-su-scuro); border: 1px solid var(--linea-su-scuro);
  padding: 0.2rem 0.5rem; border-radius: var(--raggio-chip); white-space: nowrap;
}
.scheda-doc-scenario {
  font-family: var(--display); font-weight: 700; font-size: 1.1875rem;
  letter-spacing: -0.01em; margin: 1.15rem 0 0.9rem; max-width: none;
}
.scheda-doc-criteri { list-style: none; margin: 0; padding: 0; }
.scheda-doc-criteri li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 1rem; align-items: center;
  padding: 0.7rem 0; border-top: 1px solid var(--linea);
}
.criterio-nome { font-size: 0.9375rem; color: var(--grafite); }
.criterio-voto {
  font-family: var(--display); font-weight: 700; font-size: 1.0625rem;
  color: var(--verde-profondo); min-width: 2.4rem; text-align: right;
}
.scheda-doc-indicazione {
  font-size: 0.9375rem; line-height: 1.55; color: var(--grafite);
  background: var(--verde-velo); border-radius: var(--raggio-chip);
  border-left: 3px solid var(--verde-profondo);
  padding: 0.8rem 0.95rem; margin: 1rem 0 0; max-width: none;
}
@media (max-width: 47.99rem) {
  .scheda-doc { --scheda-pad: 1.05rem; padding-bottom: 1.05rem; }
  .scheda-doc-criteri li { grid-template-columns: minmax(0, 1fr) auto; }
  .scheda-doc-criteri li .scheda-scala { display: none; }
}

/* ---------- Report di classe: la restituzione al cliente finale ----------
   Stessa grammatica della .scheda-doc (chrome scuro in testa, scala 1–5) ma su
   sezione focus: fondo bianco + una sola ombra, così il documento stacca dal
   grafite ed è lui il protagonista. Riusa .scheda-doc-criteri per griglia,
   bordi e collasso mobile: una struttura sola, due documenti. */
.restituzione-griglia {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  gap: 4rem; align-items: center;
}
.restituzione-griglia .marcatore { margin-bottom: 1rem; }
/* documento a sinistra su desktop — specchio di §scheda — ma il testo resta
   primo nel DOM: su mobile si legge prima l'argomento, poi l'artefatto. */
@media (min-width: 64rem) {
  .restituzione-griglia .restituzione-testo { order: 2; }
  .restituzione-griglia .report-doc { order: 1; }
}
@media (max-width: 63.99rem) { .restituzione-griglia { grid-template-columns: 1fr; gap: 2.5rem; } }
.sezione--focus .restituzione-nota { color: var(--voce-su-scuro); font-size: 0.9375rem; }
/* la CTA sta qui e non altrove: è il punto di desiderio massimo — ha appena
   visto il documento che consegnerebbe al suo cliente. */
.restituzione-cta { margin-top: 1.6rem; }

.report-doc {
  --scheda-pad: 1.6rem;
  background: var(--superficie); border-radius: var(--raggio-card);
  box-shadow: var(--ombra-flottante);
  padding: 0 var(--scheda-pad) 1.35rem; overflow: hidden;
}
.sezione--focus .report-doc p { color: var(--grafite); }
.report-doc-percorso {
  font-size: 0.8125rem; letter-spacing: 0.02em; margin: 1rem 0 0; max-width: none;
}
.sezione--focus .report-doc .report-doc-percorso { color: var(--voce); }
/* Sintesi in testa al documento: i due elementi che il cliente finale legge per
   primi. Deliberatamente NON metriche di utilizzo (owner 2026-07-25): gli Sprint
   allocati si pagano anche se non svolti, quindi un contatore di consumo qui
   inviterebbe a calcolare lo spreco invece di leggere il contenuto. */
.report-doc-sintesi {
  list-style: none; margin: 0.95rem 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem;
}
.report-doc-sintesi li { display: grid; gap: 0.22rem; }
.sintesi-etichetta {
  font-family: var(--display); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--voce);
}
.sintesi-valore {
  font-family: var(--display); font-weight: 700; font-size: 1.0625rem;
  letter-spacing: -0.01em; line-height: 1.25; color: var(--verde-profondo);
}
/* l'area da rinforzare resta grafite: il verde è l'accento del "regge", non
   dell'allarme — e il mondo ha un solo accento, quindi nessun secondo colore. */
.report-doc-sintesi li:last-child .sintesi-valore { color: var(--grafite); }
.report-doc-scenario {
  font-family: var(--display); font-weight: 700; font-size: 1.0625rem;
  letter-spacing: -0.01em; margin: 1.3rem 0 0.15rem;
  padding-top: 1.15rem; border-top: 1px solid var(--linea); max-width: none;
}
/* terza tonalità della scala: dove arriva la parte alta della classe */
.scheda-scala i.punta { background: rgba(14, 159, 110, 0.28); }
.report-doc-legenda {
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
  font-size: 0.75rem; margin: 0.75rem 0 0; max-width: none;
}
.sezione--focus .report-doc .report-doc-legenda { color: var(--voce); }
.report-doc-legenda .chiave {
  width: 1rem; height: 0.55rem; border-radius: 3px; display: inline-block;
}
.report-doc-legenda .chiave--media { background: var(--verde); }
.report-doc-legenda .chiave--punta { background: rgba(14, 159, 110, 0.28); }
.report-doc-legenda .chiave--punta { margin-left: 0.85rem; }
.report-doc-pie {
  font-size: 0.75rem; line-height: 1.5; margin: 1.1rem 0 0;
  padding-top: 0.85rem; border-top: 1px solid var(--linea); max-width: none;
}
.sezione--focus .report-doc .report-doc-pie { color: var(--voce); }
@media (max-width: 47.99rem) {
  .report-doc { --scheda-pad: 1.05rem; padding-bottom: 1.05rem; }
  .report-doc-legenda { display: none; }  /* la scala è nascosta: la legenda non ha referente */
  .report-doc-sintesi { grid-template-columns: 1fr; gap: 0.85rem; }
}

/* ============================================================
   Glossario — le unità del metodo
   ============================================================ */
.cose-griglia {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4rem; align-items: start;
}
@media (max-width: 63.99rem) { .cose-griglia { grid-template-columns: 1fr; gap: 2rem; } }

/* punti — i tre argomenti del centro di allenamento, righe non wall */
.punti { list-style: none; margin: 1.9rem 0 0; padding: 0; max-width: var(--misura); }
.punti li {
  padding: 1.15rem 0; border-top: 1px solid var(--linea);
  font-size: 0.984375rem; line-height: 1.55; color: var(--voce);
}
.punti li:last-child { border-bottom: 1px solid var(--linea); }
.punti li strong {
  display: block; margin-bottom: 0.3rem;
  font-family: var(--display); font-weight: 700; font-size: 1.125rem;
  letter-spacing: -0.015em; color: var(--grafite);
}

/* Reso come schedario (card + marcatori), non come lista di paragrafi:
   la colonna deve staccare cromaticamente dal testo della colonna accanto. */
.glossario {
  list-style: none; margin: 0; padding: 0.4rem 1.4rem;
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--raggio-card);
}
.sezione--superficie .glossario { background: var(--campo); }
.glossario li { padding: 1.05rem 0; border-top: 1px solid var(--linea); }
.glossario li:first-child { border-top: 0; }
.glossario-chiave {
  font-family: var(--display); font-weight: 700; font-size: 0.8125rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--verde-profondo);
  display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem;
}
.glossario-chiave::before {
  content: ""; width: 0.5rem; height: 0.5rem; border-radius: 2px;
  background: var(--verde); flex: none;
}
.glossario-valore { font-size: 0.9375rem; line-height: 1.55; color: var(--voce); display: block; }

/* ============================================================
   Il piano di allenamento — rail di progressione 01–04
   ============================================================ */
.piano-griglia {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 4rem; align-items: start;
}
@media (max-width: 63.99rem) { .piano-griglia { grid-template-columns: 1fr; gap: 2.5rem; } }

.piano-intro { position: sticky; top: 6rem; }
@media (max-width: 63.99rem) { .piano-intro { position: static; } }
.piano-intro .lead { color: var(--voce); }
.formula {
  font-family: var(--display); font-weight: 700; font-size: 1.1875rem;
  line-height: 1.4; letter-spacing: -0.01em; margin: 1.6rem 0 0.5rem;
}
.continuita { font-size: 0.9375rem; color: var(--voce); margin-bottom: 1.6rem; }
.continuita .num { color: var(--grafite); }

.rail { list-style: none; margin: 0; padding: 0.25rem 0 0.25rem 2.4rem; position: relative; display: grid; gap: 2.4rem; }
.rail::before {
  content: ""; position: absolute; left: 0.5rem; top: 0.45rem; bottom: 0.45rem;
  width: 2px; background: var(--linea); border-radius: 1px;
}
.rail::after {
  content: ""; position: absolute; left: 0.5rem; top: 0.45rem; bottom: 0.45rem;
  width: 2px; background: var(--verde); border-radius: 1px;
  transform: scaleY(0); transform-origin: top;
}
.tappa { position: relative; }
.tappa::before {
  content: ""; position: absolute; left: -2.29rem; top: 0.3rem;
  width: 0.8rem; height: 0.8rem; border-radius: 50%;
  background: var(--superficie); border: 2px solid var(--verde);
}
.tappa h3 {
  font-family: var(--display); font-weight: 700; font-size: 1.1875rem;
  letter-spacing: -0.01em; margin: 0 0 0.4rem;
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
}
.tappa-num {
  font-family: var(--display); font-weight: 700; font-size: 0.9375rem;
  font-variant-numeric: tabular-nums; color: var(--verde-profondo);
}
.tappa-tempo, .chip {
  font-family: var(--display); font-size: 0.71875rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  background: var(--verde-velo); color: var(--verde-profondo);
  padding: 0.25rem 0.55rem; border-radius: var(--raggio-chip);
  font-variant-numeric: tabular-nums;
}
.tappa p { margin: 0; font-size: 0.984375rem; line-height: 1.55; }
.tappa .chip { display: inline-block; margin-top: 0.5rem; }

/* foto nell'intro del piano — ancora visiva della colonna sticky */
.piano-foto { margin: 2.2rem 0 0; }
.piano-foto img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 58% 30%;
  border-radius: var(--raggio-card);
}

/* momento autorale: la rail si riempie di verde al reveal */
@media (prefers-reduced-motion: no-preference) {
  .rail::after { transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.25s; }
  .tappa::before { transition: border-color 0.4s ease, background-color 0.4s ease; }
}
/* Innesco su .rail.anima (site.js, sezione 4-bis) e non piu' su .piano.visible:
   la sezione entra in vista molto prima della rail, e su mobile il riempimento
   finiva sotto la piega. Vedi il commento esteso in site.js. */
.rail.anima::after { transform: scaleY(1); }
html.js .rail:not(.anima) .tappa::before { border-color: var(--linea); }
/* Senza JS la rail resta piena e i marcatori verdi: e' lo stato finale, coerente
   con la regola del file (JS assente o bloccato -> pagina intera). Prima lo
   scaleY(0) viveva fuori dal gate html.js ed era l'unico punto del layer
   movimento che si rompeva davvero a JS spento: linea grigia per sempre. */
html:not(.js) .rail::after { transform: scaleY(1); }
/* ...ma quel fallback va SPENTO senza transizione. site.js e' `defer`: la rail
   nasce piena (stato no-JS) e diventa vuota quando arriva html.js. Con la
   transizione attiva quel passaggio si vede come un DRENAGGIO di 1.5s al
   caricamento — misurato, 20 frame di movimento a y=11. La transizione serve
   solo nel verso vuoto->pieno, cioe' da .anima in poi. */
html.js .rail:not(.anima)::after { transition: none; }

/* ============================================================
   Evidenze — foto review + chi vede cosa
   ============================================================ */
.evidenze-griglia {
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 4rem; align-items: center;
}
@media (max-width: 63.99rem) { .evidenze-griglia { grid-template-columns: 1fr; gap: 2.25rem; } }
.evidenze-foto { margin: 0; }
.evidenze-foto img { width: 100%; border-radius: var(--raggio-card); aspect-ratio: 4 / 3.3; object-fit: cover; }

.destinatari-evidenze { list-style: none; margin: 1.5rem 0 0; padding: 0; }
/* griglia, non flex + min-width: la colonna delle etichette resta allineata
   anche quando una è più lunga delle altre ("A te e al formatore"). */
.destinatari-evidenze li {
  display: grid; grid-template-columns: 11rem minmax(0, 1fr);
  gap: 0.9rem; padding: 0.85rem 0; border-top: 1px solid var(--linea);
}
.destinatari-evidenze li:last-child { border-bottom: 1px solid var(--linea); }
.destinatari-evidenze .a-chi {
  font-family: var(--display); font-weight: 700; font-size: 0.8125rem;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--verde-profondo);
  padding-top: 0.15rem;
}
@media (max-width: 47.99rem) {
  .destinatari-evidenze li { grid-template-columns: 1fr; gap: 0.3rem; }
}
.destinatari-evidenze .cosa { font-size: 0.9375rem; line-height: 1.55; color: var(--grafite); }
.avvertenza {
  font-size: 0.84375rem; line-height: 1.6; color: var(--voce);
  margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--linea);
}
.avvertenza-etichetta {
  font-family: var(--display); font-weight: 700; font-size: 0.6875rem;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--verde-profondo);
  margin-right: 0.45rem;
}

/* ============================================================
   Banda fotografica — Simula. Misura. Migliora.
   ============================================================ */
.banda { position: relative; overflow: hidden; }
.banda img { width: 100%; height: clamp(21rem, 46vw, 28.5rem); object-fit: cover; object-position: center 62%; }
.banda::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(12deg, rgba(20, 23, 27, 0.78) 22%, rgba(20, 23, 27, 0.28) 62%, rgba(20, 23, 27, 0.14) 100%);
}
.banda-testo {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  max-width: var(--gabbia); margin: 0 auto; padding: 0 1.375rem 2.75rem;
}
.banda-testo h2 {
  font-family: var(--display); font-weight: 750;
  font-size: clamp(2rem, 4.5vw, 3.25rem); letter-spacing: -0.02em;
  line-height: 1.05; color: #fff; margin: 0 0 0.6rem;
}
.banda-testo p { color: rgba(255, 255, 255, 0.88); font-size: 1.0625rem; max-width: 38rem; margin: 0; }

/* ============================================================
   FAQ
   ============================================================ */
/* FAQ su due colonne: il titolo e l'invito reggono la colonna sinistra,
   l'elenco riempie la destra. Prima l'accordion occupava metà schermo
   lasciando l'altra metà vuota e leggendosi come una striscia di testo. */
.faq-griglia {
  display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 4rem; align-items: start;
}
.faq-intro p { color: var(--voce); font-size: 0.984375rem; line-height: 1.6; margin: 0.9rem 0 0; }
.faq-intro .btn { margin-top: 1.5rem; }
.faq-lista .faq-item { max-width: none; }
@media (max-width: 63.99rem) {
  .faq-griglia { grid-template-columns: 1fr; gap: 2.1rem; }
}

.faq-item { border-top: 1px solid var(--linea); max-width: var(--misura); }
.faq-item:last-child { border-bottom: 1px solid var(--linea); }
.faq-question {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  font-family: var(--testo); font-weight: 700; font-size: 1.0625rem; color: var(--grafite);
  padding: 1.1rem 2.2rem 1.1rem 0; position: relative; line-height: 1.4;
}
/* Il "+" diventa "–" ruotando davvero: due barre sovrapposte, la
   verticale ruota a piatto. Prima era uno swap di `content`, che non
   è animabile — da qui la transizione dichiarata ma invisibile. */
.faq-question::before, .faq-question::after {
  content: ""; position: absolute; right: 0.3rem; top: 50%;
  width: 0.875rem; height: 2px; border-radius: 1px;
  background: var(--verde-profondo);
}
.faq-question::before { transform: translateY(-50%); }
.faq-question::after { transform: translateY(-50%) rotate(90deg); }
.faq-item.active .faq-question::after { transform: translateY(-50%) rotate(0deg); }
.faq-question:hover::before, .faq-question:hover::after { background: var(--verde); }
@media (prefers-reduced-motion: no-preference) {
  .faq-question::after { transition: transform 0.32s var(--curva); }
  .faq-question::before, .faq-question::after { transition-property: transform, background-color; transition-duration: 0.32s, 0.2s; }
}
/* `max-height: 0; overflow: hidden` azzera l'altezza ma NON toglie il contenuto
   dall'albero di accessibilita': con solo quello, uno screen reader leggeva di fila
   tutte le domande E tutte le risposte, mentre ogni bottone annunciava "compresso" —
   lo stato dichiarato contraddiceva il contenuto esposto (WCAG 4.1.2, livello A).
   `visibility: hidden` lo rimuove davvero. Il ritardo di 0.38s sulla sola visibility
   in chiusura serve a non far sparire il testo a metà dell'animazione. */
.faq-answer {
  max-height: 0; overflow: hidden; visibility: hidden;
  transition: max-height 0.38s var(--curva), visibility 0s linear 0.38s;
}
.faq-item.active .faq-answer {
  max-height: 30rem; visibility: visible;
  transition: max-height 0.38s var(--curva), visibility 0s linear 0s;
}
.faq-answer p { padding-bottom: 1.15rem; margin: 0; color: var(--grafite); }

/* ============================================================
   Chiusura — CTA finale su grafite
   ============================================================ */
.chiusura { text-align: left; }
.chiusura .titolo-sezione { max-width: 34rem; }
.chiusura .lead { color: var(--voce-su-scuro); max-width: 38rem; }
.chiusura-azioni { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; margin-top: 2rem; }
.chiusura-postilla { font-size: 0.875rem; color: var(--voce-su-scuro); margin: 1.2rem 0 0; }

/* ============================================================
   Footer
   ============================================================ */
.footer { border-top: 1px solid var(--linea); background: var(--campo); }
.footer-inner {
  max-width: var(--gabbia); margin: 0 auto; padding: 3rem 1.375rem;
  display: grid; grid-template-columns: minmax(0, 1.4fr) 1fr 1fr; gap: 2.5rem;
}
.footer h2 {
  font-family: var(--display); font-weight: 700; font-size: 0.8125rem;
  letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 0.9rem; color: var(--grafite);
}
.footer p, .footer li { font-size: 0.9063rem; line-height: 1.6; color: var(--voce); }
.footer p { margin: 0 0 0.7rem; max-width: 30rem; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer a { color: var(--grafite); text-decoration: none; }
.footer a:hover { color: var(--verde-profondo); text-decoration: underline; }
.footer-legale { border-top: 1px solid var(--linea); }
.footer-legale-inner {
  max-width: var(--gabbia); margin: 0 auto; padding: 1rem 1.375rem 1.4rem;
  font-size: 0.8125rem; color: var(--voce);
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem;
}
.footer-legale-inner a { color: var(--voce); }
@media (max-width: 63.99rem) { .footer-inner { grid-template-columns: 1fr; gap: 1.75rem; } }

/* ============================================================
   Sticky CTA mobile + scroll tab (dispositivi di conversione)
   ============================================================ */
.sticky-mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; background: var(--grafite-scura); padding: 0.7rem 1rem;
  box-shadow: 0 -8px 24px -16px rgba(20, 23, 27, 0.5);
}
.sticky-mobile-cta a {
  display: block; text-align: center;
  font-family: var(--display); font-weight: 700; font-size: 0.9375rem;
  background: var(--verde-profondo); color: #fff; border-radius: var(--raggio-btn);
  padding: 0.75rem 1rem; text-decoration: none;
}
@media (max-width: 47.99rem) {
  .sticky-mobile-cta { display: block; }
  body { padding-bottom: 3.9rem; } /* il contenuto non finisce sotto la barra fissa */
}

.scroll-cta-tab {
  position: fixed; right: 0; top: 55%; z-index: 90;
  transform: translateY(-50%) translateX(105%);
  transition: transform 0.35s ease;
  background: var(--grafite); color: #fff;
  font-family: var(--display); font-weight: 600; font-size: 0.8125rem;
  letter-spacing: 0.05em; writing-mode: vertical-rl;
  padding: 1rem 0.55rem; border-radius: var(--raggio-chip) 0 0 var(--raggio-chip);
  text-decoration: none; display: none;
}
.scroll-cta-tab.is-visible, .scroll-cta-tab.visible { transform: translateY(-50%) translateX(0); }
.scroll-cta-tab:hover { background: var(--verde-profondo); color: #fff; }
@media (min-width: 64rem) { .scroll-cta-tab { display: block; } }

/* ============================================================
   Pagine interne — testa di pagina (funnel)
   ============================================================ */
.testa-pagina { padding: 3.5rem 0 4.5rem; }
.testa-pagina .marcatore { margin-bottom: 1.4rem; }
.testa-pagina .titolo-hero { font-size: clamp(2.3rem, 4.6vw, 3.5rem); }
.testa-pagina .sottotesto { font-size: 1.1875rem; line-height: 1.6; margin: 1.4rem 0 0; color: var(--grafite); }
.testa-pagina .hero-azioni { margin-top: 2rem; }
.testa-pagina .impegni { margin-top: 2rem; }
.testa-griglia {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 3.5rem; align-items: center;
}
@media (max-width: 63.99rem) { .testa-griglia { grid-template-columns: 1fr; gap: 2.25rem; } }
.testa-foto { margin: 0; }
.testa-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--raggio-card); }

/* ============================================================
   La dotazione di Arenia GO (come-si-parte)
   ============================================================ */
.go-griglia {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.94fr);
  gap: 4rem; align-items: center;
}
@media (max-width: 63.99rem) { .go-griglia { grid-template-columns: 1fr; gap: 2.5rem; } }
.go-doc {
  background: var(--campo); border: 1px solid var(--linea);
  border-radius: var(--raggio-card); padding: 1.5rem 1.6rem 1.35rem;
}
.go-doc-nome {
  font-family: var(--display); font-weight: 700; font-size: 1.1875rem;
  letter-spacing: -0.01em; margin: 0.55rem 0 0.35rem; max-width: none;
}
.dotazione { list-style: none; margin: 0.35rem 0 0; padding: 0; }
.dotazione li {
  position: relative; padding: 0.7rem 0 0.7rem 1.6rem;
  border-top: 1px solid var(--linea);
  font-size: 0.9375rem; line-height: 1.5; color: var(--voce);
}
.dotazione li::before {
  content: "✓"; position: absolute; left: 0; top: 0.7rem;
  font-family: var(--display); font-weight: 700; color: var(--verde-profondo);
}
.dotazione strong { color: var(--grafite); }
.go-doc-piede { font-size: 0.78125rem; color: var(--voce); margin: 0.9rem 0 0; max-width: none; }

/* ============================================================
   Il ciclo di allenamento — tre momenti (come-funziona)
   ============================================================ */
.momenti { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
@media (max-width: 63.99rem) { .momenti { grid-template-columns: 1fr; gap: 1.5rem; } }
.momenti li { border-top: 2px solid var(--grafite); padding-top: 1.1rem; }
.momento-num {
  font-family: var(--display); font-weight: 700; font-size: 0.9375rem;
  font-variant-numeric: tabular-nums; color: var(--verde-profondo);
  display: block; margin-bottom: 0.4rem;
}
.momenti h3 {
  font-family: var(--display); font-weight: 700; font-size: 1.1875rem;
  letter-spacing: -0.01em; margin: 0 0 0.45rem;
}
.momenti p { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--voce); }

/* ============================================================
   Scheda di Efficacia estesa (come-funziona) — forza/rinforzo
   ============================================================ */
.scheda-doc-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 1rem; }
@media (max-width: 47.99rem) { .scheda-doc-liste { grid-template-columns: 1fr; gap: 1rem; } }
.scheda-doc-lista h4 {
  font-family: var(--display); font-size: 0.71875rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--verde-profondo);
  margin: 0 0 0.4rem;
}
.scheda-doc-lista ul { list-style: none; margin: 0; padding: 0; }
.scheda-doc-lista li {
  font-size: 0.84375rem; line-height: 1.45; color: var(--grafite);
  padding: 0.3rem 0 0.3rem 1.05rem; position: relative;
}
.scheda-doc-lista li::before {
  content: ""; position: absolute; left: 0; top: 0.78rem;
  width: 0.32rem; height: 0.32rem; border-radius: 1px; background: var(--verde);
}

/* ============================================================
   Modulo — richiesta demo (demo.html)
   ============================================================ */
.demo-scena { padding: 3.5rem 0 5rem; }
.demo-griglia {
  display: grid; grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: 4rem; align-items: start;
}
@media (max-width: 63.99rem) { .demo-griglia { grid-template-columns: 1fr; gap: 2.5rem; } }
.demo-scena .marcatore { margin-bottom: 1.4rem; }
.demo-scena .titolo-hero { font-size: clamp(2.3rem, 4.4vw, 3.4rem); }
.demo-scena .sottotesto { font-size: 1.125rem; line-height: 1.6; margin: 1.4rem 0 0; color: var(--grafite); }
.demo-scena .punti { margin-top: 1.7rem; }
.demo-scena .impegni { margin-top: 1.6rem; border-top: 0; padding-top: 0; }

.modulo-card {
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--raggio-card); padding: 1.9rem 1.9rem 1.7rem;
}
@media (max-width: 47.99rem) { .modulo-card { padding: 1.4rem 1.15rem 1.3rem; } }
.modulo-titolo { font-family: var(--display); font-weight: 700; font-size: 1.375rem; letter-spacing: -0.015em; margin: 0; }
.modulo-sotto { font-size: 0.9063rem; color: var(--voce); margin: 0.3rem 0 0; }
.modulo { display: grid; gap: 1.15rem; margin-top: 1.5rem; }
.campo-riga { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 35.99rem) { .campo-riga { grid-template-columns: 1fr; } }

.campo label, .campo-legenda {
  display: block; font-weight: 600; font-size: 0.875rem;
  color: var(--grafite); margin-bottom: 0.35rem; padding: 0;
}
fieldset.campo { border: 0; margin: 0; padding: 0; min-width: 0; }
.campo input[type="text"], .campo input[type="email"], .campo input[type="tel"],
.campo select, .campo textarea {
  width: 100%; font: inherit; font-size: 0.9375rem; line-height: 1.4; color: var(--grafite);
  background: var(--campo); border: 1px solid var(--linea-campo); border-radius: var(--raggio-btn);
  padding: 0.65rem 0.8rem;
}
.campo select { height: 2.75rem; }
.campo textarea { resize: vertical; min-height: 5.5rem; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--verde-profondo); }
.campo ::placeholder { color: #6A7077; opacity: 1; }
.obbligo { color: var(--verde-profondo); }

/* chips radio (scelte leggere) */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips label { cursor: pointer; }
.chip-scelta {
  display: inline-flex; align-items: center;
  font-weight: 600; font-size: 0.8125rem; color: var(--grafite);
  background: var(--superficie); border: 1px solid var(--linea-campo); border-radius: 999px;
  padding: 0.42rem 0.85rem;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.chips label:hover .chip-scelta { border-color: var(--verde-profondo); color: var(--verde-profondo); }
.chips input:checked + .chip-scelta { background: var(--verde-profondo); border-color: var(--verde-profondo); color: #fff; }
.chips input:focus-visible + .chip-scelta { outline: 2px solid var(--verde-profondo); outline-offset: 2px; }

/* contesto opzionale (details) */
.modulo-extra { border-top: 1px solid var(--linea); padding-top: 1.05rem; }
.modulo-extra summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-weight: 600; font-size: 0.9063rem; color: var(--grafite);
}
.modulo-extra summary::-webkit-details-marker { display: none; }
.modulo-extra summary:hover { color: var(--verde-profondo); }
/* `.facolt` non è più annidato in `.modulo-extra`: dal 2026-07-30 il campo Telefono sta nel blocco
   principale del form, dove tutti gli altri campi sono obbligatori — quindi l'assenza dell'asterisco
   non basta a dire "facoltativo" e l'etichetta lo scrive. Simmetrico a `.obbligo`, che non è annidato. */
.facolt { color: var(--voce); font-weight: 400; }
.modulo-extra .freccia { flex: none; color: var(--voce); transition: transform 0.25s ease; }
.modulo-extra[open] .freccia { transform: rotate(180deg); }
.modulo-extra-corpo { display: grid; gap: 1.15rem; padding-top: 1.2rem; }

/* privacy + errore + invio */
.modulo-privacy { display: flex; gap: 0.65rem; align-items: flex-start; }
.modulo-privacy input {
  margin-top: 0.22rem; width: 1.05rem; height: 1.05rem; flex: none;
  accent-color: var(--verde-profondo); cursor: pointer;
}
.modulo-privacy label { font-size: 0.875rem; color: var(--voce); cursor: pointer; }
.modulo-errore { color: #B3261E; font-size: 0.875rem; font-weight: 600; margin: 0; }
.modulo .btn { width: 100%; font-size: 1rem; padding: 0.85rem 1.5rem; }
.modulo-postilla { font-size: 0.78125rem; color: var(--voce); line-height: 1.55; margin: 1.1rem 0 0; max-width: none; }

/* ============================================================
   Conferma (grazie.html)
   ============================================================ */
.conferma { padding: 5.5rem 0 6.5rem; text-align: center; }
.conferma .modal-spunta { margin: 0 auto 1.5rem; }
.conferma .titolo-sezione { margin-bottom: 0.8rem; }
.conferma p { margin-left: auto; margin-right: auto; max-width: 34rem; color: var(--voce); }
.conferma .hero-azioni { justify-content: center; margin-top: 2rem; }

/* ============================================================
   Finestra modale (conferma invio)
   ============================================================ */
.modal-velo {
  position: fixed; inset: 0; z-index: 170;
  background: rgba(20, 23, 27, 0.55);
  display: flex; align-items: center; justify-content: center; padding: 1.25rem;
}
.modal-card {
  background: var(--superficie); border-radius: var(--raggio-card);
  box-shadow: var(--ombra-flottante);
  max-width: 26rem; width: 100%; padding: 2.1rem 1.9rem 1.9rem;
}
.modal-card h2 { font-family: var(--display); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.015em; margin: 0 0 0.6rem; }
.modal-card p { font-size: 0.9688rem; line-height: 1.6; color: var(--grafite); margin: 0 0 1.5rem; max-width: none; }
.modal-spunta {
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--verde-velo); color: var(--verde-profondo);
  display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem;
}
.modal-spunta svg { width: 1.4rem; height: 1.4rem; }

/* utility funzionali (usate dal JS del form) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.inline-flex { display: inline-flex; align-items: center; gap: 0.5rem; }
.animate-spin { animation: giro 0.8s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }

/* ============================================================
   Consent UI (iniettata da site.js)
   ============================================================ */
.consent-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  background: var(--superficie); border-top: 1px solid var(--linea);
  box-shadow: 0 -14px 34px -18px rgba(20, 23, 27, 0.35);
  transform: translateY(100%); transition: transform 0.3s ease;
}
.consent-banner.visible { transform: translateY(0); }
.consent-inner { max-width: var(--gabbia); margin: 0 auto; padding: 1.1rem 1.375rem; display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.consent-text { flex: 1 1 26rem; }
.consent-text strong { font-family: var(--display); font-size: 0.8125rem; letter-spacing: 0.07em; text-transform: uppercase; }
.consent-text p { font-size: 0.875rem; line-height: 1.5; color: var(--voce); margin: 0.3rem 0 0; max-width: none; }
.consent-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.consent-btn {
  font-family: var(--display); font-weight: 700; font-size: 0.84375rem;
  padding: 0.55rem 1.05rem; border-radius: var(--raggio-btn); cursor: pointer;
  border: 1.5px solid var(--grafite); background: transparent; color: var(--grafite);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.consent-btn:hover { color: var(--verde-profondo); border-color: var(--verde-profondo); }
.consent-btn-primary { background: var(--verde-profondo); border-color: var(--verde-profondo); color: #fff; }
.consent-btn-primary:hover { background: var(--verde-hover); border-color: var(--verde-hover); color: #fff; }

/* Testa dei documenti-artefatto sotto i 400px. Il badge "esempio illustrativo" ha
   white-space: nowrap e tiene una misura fissa: a spezzarsi in 2-3 righe era il TITOLO
   della card — cioe' il nome dell'artefatto — mentre la postilla restava su una riga.
   Inversione di gerarchia alle larghezze telefono piu' diffuse. Facendo andare a capo
   la testa, il badge scende sotto e il titolo resta intero. Riguarda le 4 card documento
   (index #scheda e #restituzione, come-funziona #scheda e #restituzione). */
@media (max-width: 25rem) {
  .scheda-doc-testa { flex-wrap: wrap; gap: 0.35rem; }
  .scheda-doc-badge { font-size: 0.625rem; letter-spacing: 0.03em; }
}

/* Compattazione su mobile. Misurato con Playwright il 2026-07-27: su 360x740 il
   banner era alto 277px — il 37% del viewport — e copriva per intero gli 81px del
   pulsante hero; su 390x844 lo copriva per 10px. Il testo GDPR non si accorcia e
   non si tronca (è informativa dovuta), quindi si recupera spazio da padding, gap
   e disposizione dei bottoni: "Accetta tutti" a piena larghezza sopra, le due scelte
   secondarie affiancate sotto. La barra sticky è gia' gestita da .hidden-by-cookie
   (site.js), qui si tratta solo dell'ingombro verticale. */
@media (max-width: 47.99rem) {
  .consent-inner { padding: 0.8rem 1rem; gap: 0.75rem; }
  .consent-text { flex: 1 1 100%; }
  .consent-text p { font-size: 0.8125rem; line-height: 1.45; }
  .consent-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  /* 2.5rem: i tre bottoni erano alti 35px. Supera il minimo WCAG 2.5.8 (24px) ma e'
     poco per il dialogo piu' importante della prima visita; 40px resta comodo senza
     rimangiarsi la compattazione. */
  .consent-btn { padding: 0.6rem 0.5rem; font-size: 0.8125rem; min-height: 2.5rem; }
  .consent-btn-primary { grid-column: 1 / -1; order: -1; }
}

.consent-modal {
  position: fixed; inset: 0; z-index: 160; display: flex; align-items: center; justify-content: center;
  background: rgba(20, 23, 27, 0.5); opacity: 0; transition: opacity 0.2s ease; padding: 1.25rem;
}
.consent-modal.visible { opacity: 1; }
.consent-modal-card {
  background: var(--superficie); border-radius: var(--raggio-card);
  max-width: 34rem; width: 100%; padding: 1.75rem 1.5rem;
  max-height: 85vh; overflow: auto;
}
.consent-modal-card h2 { font-family: var(--display); font-weight: 700; font-size: 1.25rem; margin: 0 0 0.5rem; }
.consent-modal-intro { font-size: 0.875rem; color: var(--voce); margin: 0 0 1.2rem; }
.consent-row { display: flex; gap: 1rem; align-items: flex-start; padding: 0.9rem 0; border-top: 1px solid var(--linea); }
.consent-row-info { flex: 1; }
.consent-row-info strong { font-size: 0.9375rem; }
.consent-row-info p { font-size: 0.8125rem; color: var(--voce); margin: 0.25rem 0 0; }
.consent-pill { font-family: var(--display); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; padding: 0.3rem 0.6rem; border-radius: 999px; }
.consent-pill-on { background: var(--verde-velo); color: var(--verde-profondo); }
.consent-toggle { position: relative; display: inline-block; width: 2.75rem; height: 1.5rem; flex-shrink: 0; }
.consent-toggle input { opacity: 0; width: 0; height: 0; }
.consent-toggle-slider {
  position: absolute; inset: 0; background: var(--linea); border: 1px solid var(--linea-campo); border-radius: 999px; cursor: pointer; transition: background-color 0.2s ease;
}
.consent-toggle-slider::before {
  content: ""; position: absolute; left: 3px; top: 3px; width: 1.125rem; height: 1.125rem;
  background: var(--superficie); border: 1px solid var(--linea-campo); border-radius: 50%; transition: transform 0.2s ease;
}
.consent-toggle input:checked + .consent-toggle-slider { background: var(--verde-profondo); }
.consent-toggle input:checked + .consent-toggle-slider::before { transform: translateX(1.25rem); }
.consent-modal-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1.25rem; }

[data-consent-open] { cursor: pointer; }

/* ============================================================
   Motion
   ------------------------------------------------------------
   Curva unica per tutto: cubic-bezier(0.16,1,0.3,1) — arrivo
   deciso, nessun rimbalzo. Tre livelli, in ordine di forza:
     1. ingresso delle sezioni + cascata delle liste (il "vivo")
     2. "la misura si riempie" — il gesto del prodotto
     3. feedback: hover foto, accordion, bottoni, nav
   Progressive enhancement: tutto parte dallo stato FINALE e si
   anima solo sotto html.js (aggiunto da site.js) e senza
   prefers-reduced-motion. JS assente o bloccato → pagina intera.
   ============================================================ */
:root { --curva: cubic-bezier(0.16, 1, 0.3, 1); }

.fade-in-section { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  /* --- 1a. ingresso del blocco: 26px, si vede --- */
  html.js .fade-in-section {
    opacity: 0; transform: translateY(26px);
    transition: opacity 0.7s var(--curva), transform 0.7s var(--curva);
  }
  html.js .fade-in-section.visible { opacity: 1; transform: translateY(0); }

  /* --- 1b. cascata: le liste arrivano una voce per volta.
     Solo transform, nessuna opacity: così non si moltiplica con
     quella del blocco padre e l'effetto resta pulito. --- */
  html.js .cascata > * { transform: translateY(18px); }
  html.js .fade-in-section.visible .cascata > *,
  html.js .visible.cascata > * {
    transform: none; transition: transform 0.6s var(--curva);
  }
  html.js .fade-in-section.visible .cascata > *:nth-child(1),
  html.js .visible.cascata > *:nth-child(1) { transition-delay: 0.10s; }
  html.js .fade-in-section.visible .cascata > *:nth-child(2),
  html.js .visible.cascata > *:nth-child(2) { transition-delay: 0.19s; }
  html.js .fade-in-section.visible .cascata > *:nth-child(3),
  html.js .visible.cascata > *:nth-child(3) { transition-delay: 0.28s; }
  html.js .fade-in-section.visible .cascata > *:nth-child(4),
  html.js .visible.cascata > *:nth-child(4) { transition-delay: 0.37s; }
  html.js .fade-in-section.visible .cascata > *:nth-child(5),
  html.js .visible.cascata > *:nth-child(5) { transition-delay: 0.46s; }
  html.js .fade-in-section.visible .cascata > *:nth-child(n+6),
  html.js .visible.cascata > *:nth-child(n+6) { transition-delay: 0.55s; }
}

/* la sezione piano usa l'observer solo per rail e tappe: nessun fade sul blocco */
html.js .piano.fade-in-section { opacity: 1; transform: none; transition: none; }

/* ------------------------------------------------------------------
   2. "La misura si riempie" — il gesto del prodotto come movimento.
   Le barre sono piccole: quello che si legge non è la singola barra
   ma la CASCATA (barra per barra, riga per riga), che dura ~1s e
   racconta la scheda che si compila. Poi arriva il voto.
   ------------------------------------------------------------------ */
@keyframes misura-riempi { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes voto-entra { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

/* Ritardo di riga del Report, stesso principio della Scheda: dato, non
   comportamento, quindi fuori dal gate e leggibile anche dal blocco `reduce`.
   Prefissato con #restituzione perché altrimenti le regole unscoped di
   .scheda-doc-criteri vincerebbero a pari specificità. */
#restituzione .report-doc-kpi > li:nth-child(1) { --riga: 0.22s; }
#restituzione .report-doc-kpi > li:nth-child(2) { --riga: 0.36s; }
#restituzione .report-doc-kpi > li:nth-child(3) { --riga: 0.50s; }
#restituzione .report-doc-kpi > li:nth-child(4) { --riga: 0.64s; }

/* Il ritardo di riga viaggia come custom property sull'<li>: così le regole
   per-barra non competono per specificità con quelle per-riga (era il bug della
   prima stesura: le righe vincevano).
   Sta FUORI dal gate perché è un dato, non un comportamento: una custom property
   senza nessuno che la legga non produce nulla. Serve fuori perché la usa anche il
   blocco `prefers-reduced-motion: reduce` in fondo, e duplicarla la farebbe divergere. */
.scheda-doc-criteri > li:nth-child(1) { --riga: 0.20s; }
.scheda-doc-criteri > li:nth-child(2) { --riga: 0.34s; }
.scheda-doc-criteri > li:nth-child(3) { --riga: 0.48s; }
.scheda-doc-criteri > li:nth-child(4) { --riga: 0.62s; }

@media (prefers-reduced-motion: no-preference) {
  /* documento Scheda: 4 righe × 4 barre, cascata diagonale */
  html.js #scheda .scheda-doc .scheda-scala i.pieno {
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.34s var(--curva);
  }
  html.js #scheda.visible .scheda-doc .scheda-scala i.pieno { transform: scaleX(1); }
  html.js #scheda .scheda-doc .scheda-scala i.pieno { transition-delay: var(--riga, 0.2s); }
  html.js #scheda .scheda-doc .scheda-scala i.pieno:nth-child(2) { transition-delay: calc(var(--riga, 0.2s) + 0.09s); }
  html.js #scheda .scheda-doc .scheda-scala i.pieno:nth-child(3) { transition-delay: calc(var(--riga, 0.2s) + 0.18s); }
  html.js #scheda .scheda-doc .scheda-scala i.pieno:nth-child(4) { transition-delay: calc(var(--riga, 0.2s) + 0.27s); }
  /* il voto arriva dopo le sue barre */
  html.js #scheda .criterio-voto { opacity: 0; }
  html.js #scheda.visible .criterio-voto { animation: voto-entra 0.4s var(--curva) both; }
  html.js #scheda.visible .scheda-doc-criteri > li:nth-child(1) .criterio-voto { animation-delay: 0.62s; }
  html.js #scheda.visible .scheda-doc-criteri > li:nth-child(2) .criterio-voto { animation-delay: 0.76s; }
  html.js #scheda.visible .scheda-doc-criteri > li:nth-child(3) .criterio-voto { animation-delay: 0.90s; }
  html.js #scheda.visible .scheda-doc-criteri > li:nth-child(4) .criterio-voto { animation-delay: 1.04s; }

  /* --- il Report di classe si compila come la Scheda: stessa idea materiale
     ("la misura si riempie"), quarto momento. Il ritardo di riga viaggia su
     --riga nell'<li>, prefissato con #restituzione perché altrimenti le regole
     unscoped di .scheda-doc-criteri vincerebbero a pari specificità. --- */
  html.js #restituzione .report-doc .scheda-scala i.pieno,
  html.js #restituzione .report-doc .scheda-scala i.punta {
    transform: scaleX(0); transform-origin: left;
    /* longhand deliberata, NON la shorthand `transition`: la shorthand
       riazzererebbe transition-delay e — essendo più specifica della regola
       di ritardo qui sotto — farebbe partire la prima cella di ogni riga a 0s,
       cancellando lo sfalsamento. Verificato: con la shorthand i ritardi
       misurati erano ['0s', '0.31s', …]. */
    transition-property: transform;
    transition-duration: 0.34s;
    transition-timing-function: var(--curva);
  }
  html.js #restituzione.visible .report-doc .scheda-scala i.pieno,
  html.js #restituzione.visible .report-doc .scheda-scala i.punta { transform: scaleX(1); }
  html.js #restituzione .report-doc .scheda-scala i { transition-delay: var(--riga, 0.22s); }
  html.js #restituzione .report-doc .scheda-scala i:nth-child(2) { transition-delay: calc(var(--riga, 0.22s) + 0.09s); }
  html.js #restituzione .report-doc .scheda-scala i:nth-child(3) { transition-delay: calc(var(--riga, 0.22s) + 0.18s); }
  html.js #restituzione .report-doc .scheda-scala i:nth-child(4) { transition-delay: calc(var(--riga, 0.22s) + 0.27s); }
  html.js #restituzione .report-doc .scheda-scala i:nth-child(5) { transition-delay: calc(var(--riga, 0.22s) + 0.36s); }
  html.js #restituzione .criterio-voto { opacity: 0; }
  html.js #restituzione.visible .criterio-voto { animation: voto-entra 0.4s var(--curva) both; }
  html.js #restituzione.visible .report-doc-kpi > li:nth-child(1) .criterio-voto { animation-delay: 0.64s; }
  html.js #restituzione.visible .report-doc-kpi > li:nth-child(2) .criterio-voto { animation-delay: 0.78s; }
  html.js #restituzione.visible .report-doc-kpi > li:nth-child(3) .criterio-voto { animation-delay: 0.92s; }
  html.js #restituzione.visible .report-doc-kpi > li:nth-child(4) .criterio-voto { animation-delay: 1.06s; }

  /* card nell'hero: entra come oggetto, poi si misura. È la prima
     impressione: parte a 0.75s, quando font e layout sono fermi. */
  html.js .hero .scheda-card {
    opacity: 0; transform: translateY(16px) scale(0.98);
    animation: card-entra 0.66s var(--curva) 0.45s both;
  }
  html.js .hero .scheda-card .scheda-scala i.pieno {
    transform-origin: left;
    animation: misura-riempi 0.36s var(--curva) both;
  }
  html.js .hero .scheda-card .scheda-scala i.pieno:nth-child(1) { animation-delay: 0.95s; }
  html.js .hero .scheda-card .scheda-scala i.pieno:nth-child(2) { animation-delay: 1.07s; }
  html.js .hero .scheda-card .scheda-scala i.pieno:nth-child(3) { animation-delay: 1.19s; }
  html.js .hero .scheda-card .scheda-scala i.pieno:nth-child(4) { animation-delay: 1.31s; }

  /* rail del piano: le tappe scalano dietro alla linea che si riempie */
  html.js .piano .tappa { transform: translateY(20px); }
  html.js .rail.anima .tappa { transform: none; transition: transform 0.62s var(--curva); }
  html.js .rail.anima .tappa:nth-child(1) { transition-delay: 0.18s; }
  html.js .rail.anima .tappa:nth-child(2) { transition-delay: 0.34s; }
  html.js .rail.anima .tappa:nth-child(3) { transition-delay: 0.50s; }
  html.js .rail.anima .tappa:nth-child(4) { transition-delay: 0.66s; }
}
@keyframes card-entra { to { opacity: 1; transform: none; } }
@keyframes sale-entra { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Hero: cascata al caricamento. È la prima impressione, quindi si muove
   subito e senza attese lunghe. La FOTO non è animata di proposito: è
   candidata LCP e ritardarne la comparsa peggiorerebbe la metrica. */
@media (prefers-reduced-motion: no-preference) {
  html.js .hero .marcatore,
  html.js .hero .titolo-hero,
  html.js .hero .sottotesto,
  html.js .hero .hero-azioni,
  html.js .hero .impegni { animation: sale-entra 0.58s var(--curva) both; }
  html.js .hero .marcatore   { animation-delay: 0.04s; }
  html.js .hero .titolo-hero { animation-delay: 0.10s; }
  html.js .hero .sottotesto  { animation-delay: 0.20s; }
  html.js .hero .hero-azioni { animation-delay: 0.30s; }
  html.js .hero .impegni     { animation-delay: 0.38s; }
}

/* ============================================================
   MOVIMENTO RIDOTTO — ridurre, non azzerare
   ------------------------------------------------------------
   Fino al 2026-07-28 tutto il layer viveva solo sotto
   `no-preference`: chi ha l'impostazione di sistema attiva non
   riceveva un sito con MENO movimento, ne riceveva uno inerte.
   E il filtro era pure invertito. Il glossario WCAG definisce
   `motion animation` escludendo esplicitamente «changes of
   color, blurring, or opacity»: il disagio vestibolare lo dà lo
   SPOSTAMENTO, non la dissolvenza. Il file spegneva tutte le
   dissolvenze e lasciava acceso `.faq-answer`, che anima
   max-height e sposta davvero il contenuto sottostante — cioè
   l'unica cosa che andava tolta.

   Qui dentro: le dissolvenze tornano, gli spostamenti no.
   Niente translate, niente scale, niente riempimento che corre.
   Gli stati base del blocco `no-preference` non si applicano
   sotto `reduce`, quindi vanno ridichiarati: è il motivo per cui
   questo blocco non è solo una lista di `transform: none`.

   Solo longhand. La cicatrice più sopra (righe ~1265) documenta
   cosa succede quando una shorthand `transition` azzera i delay
   ed essendo più specifica vince: tutte le celle partono insieme.

   Le .tappa restano ferme e OPACHE di proposito: dipendono da
   `.anima`, e un mancato innesco le renderebbe invisibili invece
   che soltanto immobili. Vedi la rete di sicurezza in site.js.
   ============================================================ */
@keyframes appare { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  /* 1. sezioni: dissolvenza, nessuna salita.
     `.piano.fade-in-section` resta esclusa dalla regola fuori gate
     più sopra, che è più specifica: il piano non sfuma, come oggi. */
  html.js .fade-in-section {
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.6s;
    transition-timing-function: linear;
  }
  html.js .fade-in-section.visible { opacity: 1; }

  /* 2. cascata: le voci arrivano una per volta, in dissolvenza */
  html.js .cascata > * { opacity: 0; }
  html.js .fade-in-section.visible .cascata > *,
  html.js .visible.cascata > * {
    opacity: 1;
    transition-property: opacity;
    transition-duration: 0.5s;
    transition-timing-function: linear;
  }
  html.js .fade-in-section.visible .cascata > *:nth-child(1),
  html.js .visible.cascata > *:nth-child(1) { transition-delay: 0.10s; }
  html.js .fade-in-section.visible .cascata > *:nth-child(2),
  html.js .visible.cascata > *:nth-child(2) { transition-delay: 0.19s; }
  html.js .fade-in-section.visible .cascata > *:nth-child(3),
  html.js .visible.cascata > *:nth-child(3) { transition-delay: 0.28s; }
  html.js .fade-in-section.visible .cascata > *:nth-child(4),
  html.js .visible.cascata > *:nth-child(4) { transition-delay: 0.37s; }
  html.js .fade-in-section.visible .cascata > *:nth-child(5),
  html.js .visible.cascata > *:nth-child(5) { transition-delay: 0.46s; }
  html.js .fade-in-section.visible .cascata > *:nth-child(n+6),
  html.js .visible.cascata > *:nth-child(n+6) { transition-delay: 0.55s; }

  /* 3. hero: stessa sequenza, stessi ritardi, senza la salita */
  html.js .hero .marcatore,
  html.js .hero .titolo-hero,
  html.js .hero .sottotesto,
  html.js .hero .hero-azioni,
  html.js .hero .impegni,
  html.js .hero .scheda-card {
    animation-name: appare;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-fill-mode: both;
  }
  html.js .hero .marcatore    { animation-delay: 0.04s; }
  html.js .hero .titolo-hero  { animation-delay: 0.10s; }
  html.js .hero .sottotesto   { animation-delay: 0.20s; }
  html.js .hero .hero-azioni  { animation-delay: 0.30s; }
  html.js .hero .impegni      { animation-delay: 0.38s; }
  html.js .hero .scheda-card  { animation-delay: 0.45s; }
  /* le barre della card compaiono con la card: nessuna corsa da sinistra */
  html.js .hero .scheda-card .scheda-scala i.pieno { animation-name: none; }

  /* 4. Scheda e Report: il documento si compila RIGA per riga, ma le celle
     appaiono invece di riempirsi. Lo sfalsamento per cella cade da solo
     (i suoi transition-delay vivono nel blocco no-preference): resta quello
     di riga, che è il gesto leggibile. */
  html.js #scheda .scheda-doc .scheda-scala i.pieno,
  html.js #restituzione .report-doc .scheda-scala i.pieno,
  html.js #restituzione .report-doc .scheda-scala i.punta {
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.35s;
    transition-timing-function: linear;
    transition-delay: var(--riga, 0.2s);
  }
  html.js #scheda.visible .scheda-doc .scheda-scala i.pieno,
  html.js #restituzione.visible .report-doc .scheda-scala i.pieno,
  html.js #restituzione.visible .report-doc .scheda-scala i.punta { opacity: 1; }

  /* 5. i voti arrivano dopo le loro barre, in dissolvenza */
  html.js #scheda .criterio-voto,
  html.js #restituzione .criterio-voto { opacity: 0; }
  html.js #scheda.visible .criterio-voto,
  html.js #restituzione.visible .criterio-voto {
    animation-name: appare;
    animation-duration: 0.4s;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-delay: calc(var(--riga, 0.2s) + 0.42s);
  }

  /* 6. la rail nasce PIENA e si accende: nessun bordo che corre per
     centinaia di pixel in periferia visiva mentre l'utente scorre.
     È il solo elemento del file con travel vero, ed è il motivo per cui
     qui la dissolvenza non è un vezzo ma la correzione. */
  html.js .rail::after {
    transform: scaleY(1);
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.6s;
    transition-timing-function: linear;
  }
  html.js .rail.anima::after { opacity: 1; }

  /* 7. l'accordion SCATTA. È l'unico vero `motion animation` del file:
     max-height che cresce sposta tutto il contenuto sotto di sé. */
  .faq-answer,
  .faq-item.active .faq-answer { transition: none; }
  .faq-question::before,
  .faq-question::after { transition: none; }
}

/* ------------------------------------------------------------------
   3. Feedback — reazione al puntatore e allo scroll.
   Vive fuori da prefers-reduced-motion solo per le proprietà non
   cinetiche; i transform sono gated più sotto.
   ------------------------------------------------------------------ */
/* foto: lo zoom lento dà vita senza spostare nulla nel layout.
   Il clip DEVE stare sulla figure e con lo stesso raggio dell'img,
   altrimenti in hover gli angoli tornano quadrati.
   .hero-foto è esclusa di proposito: la scheda-card sporge dai suoi
   bordi (bottom: -1.5rem su mobile) e overflow:hidden la taglierebbe.
   .banda ha già overflow:hidden. */
.piano-foto, .evidenze-foto { overflow: hidden; border-radius: var(--raggio-card); }
@media (prefers-reduced-motion: no-preference) {
  .piano-foto img, .evidenze-foto img, .banda img {
    transition: transform 0.9s var(--curva);
  }
  .piano-foto:hover img, .evidenze-foto:hover img { transform: scale(1.04); }
  .banda:hover img { transform: scale(1.03); }
  #hero-video-wrap .play-timbro { transition: transform 0.4s var(--curva); }
  #hero-video-wrap:hover .play-timbro { transform: scale(1.09); }
}

/* bottoni: micro-sollevamento, 1px, con ombra corta */
.btn { transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; }
@media (prefers-reduced-motion: no-preference) {
  .btn-verde:hover { transform: translateY(-1px); box-shadow: 0 6px 15px -7px rgba(11, 122, 85, 0.75); }
  .btn-contorno:hover, .btn-contorno--su-scuro:hover { transform: translateY(-1px); }
  .btn:active { transform: translateY(0); box-shadow: none; }
}

/* righe elenco: il puntatore trova un appoggio */
@media (prefers-reduced-motion: no-preference) {
  .glossario li, .destinatari-evidenze li, .faq-item { transition: background-color 0.22s ease; }
}
.glossario li:hover, .destinatari-evidenze li:hover { background: rgba(14, 159, 110, 0.045); }

/* ----- Stampa ----- */
@media print {
  nav.site-nav, .sticky-mobile-cta, .scroll-cta-tab, .consent-banner { display: none !important; }
  body { background: #fff; }
}