/* Il sito: un foglio solo.
   Un solo elemento forte, la fotografia della home. Tutto il resto e'
   quieto: una colonna di testo da 640px, molto spazio, quasi nessun
   colore. Il logotipo e' l'unica cosa in Cormorant; tutto il resto e'
   Geist (variabile: 400 e 500 per il testo, 700 per il claim).
   I file dei caratteri li mette il generatore: i segnaposto dentro gli
   url() dei @font-face diventano nomi con l'impronta del contenuto. */

@font-face {
  font-family: "Cormorant";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("/risorse/cormorant-italic-600-latin.712e8f735a.woff2") format("woff2");
  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: "Cormorant";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("/risorse/cormorant-italic-600-latin-ext.a0ec264aca.woff2") format("woff2");
  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: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/risorse/geist-variabile-latin.19f9c92546.woff2") format("woff2");
  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: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/risorse/geist-variabile-latin-ext.824f485b5d.woff2") format("woff2");
  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;
}

:root {
  --carta: #F5F5F2;
  --bianco: #FFFFFF;
  --inchiostro: #141413;
  --testo: #2B2B29;
  --grigio: #5E5E5A;
  --grigio-2: #6E6E69;
  --filo: #E2E2DD;
  --campo-bordo: #D3D3CD;
  --nero: #0A0A0A;
  --verde: #2F5A45;
  --errore: #A23B2A;
  /* LA GRIGLIA UNICA: una larghezza massima, dodici colonne, un vuoto
     fra le colonne. I blocchi piu' stretti prendono meno colonne, non
     un contenitore proprio. La larghezza cresce a gradini col desktop
     (piu' sotto), ma la griglia resta UNA. */
  --griglia: 1080px;
  --colonne: 12;
  --vuoto: 24px;
  /* LA MISURA DI LETTURA: quanto puo' essere larga una riga di testo.
     E' un limite del testo, NON del contenitore - la griglia continua a
     crescere e lo spazio in piu' va a cio' che non e' testo (card,
     illustrazioni, tabelle). Sta in "em" apposta: a 1920 il corpo passa
     a 18px e la misura cresce con lui invece di stringersi in
     caratteri. 36em stanno fra 65 e 75 caratteri per riga, il limite
     che dicono concordi le due guide di disegno consultate.
     NON PORTA MARGINI AUTOMATICI: il blocco parte sempre dalla linea
     della griglia, e' solo la fine che arriva prima. Un "margin: auto"
     qui rifarebbe il secondo asse centrale che abbiamo tolto. */
  --misura: 36em;
  --misura-modulo: 30em;
  /* la card della sezione appuntata: cresce col desktop, o su uno
     schermo largo resta un francobollo in mezzo alla sua colonna */
  --card-alta: 440px;
  --pillola: 999px;
  --ombra-pillola: 0 1px 2px rgba(20, 20, 19, 0.06), 0 10px 30px rgba(20, 20, 19, 0.10);
  --geist: "Geist", "Helvetica Neue", Arial, sans-serif;
  --cormorant: "Cormorant", Georgia, "Times New Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--carta);
  color: var(--testo);
  font-family: var(--geist);
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; border-radius: 4px; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
strong { font-weight: 600; color: var(--inchiostro); }

/* il salto al contenuto: sta sopra lo schermo (non a sinistra fuori,
   che la misura del contenimento conterebbe come "fuori") e scende
   quando prende il fuoco da tastiera */
.salta {
  position: fixed; left: 16px; top: 16px;
  transform: translateY(-200%);
  background: var(--bianco); color: var(--inchiostro);
  padding: 8px 14px; border-radius: 8px; z-index: 100;
}
.salta:focus { transform: none; }

/* --- il logotipo ------------------------------------------------- */
.logo {
  font-family: var(--cormorant);
  font-style: italic;
  font-weight: 600;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--inchiostro);
  text-decoration: none;
  white-space: nowrap;
}

/* --- il menu: una pillola bianca che galleggia in alto --------- */
.menu-pillola {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: min(920px, calc(100% - 32px));
  min-height: 60px;
  background: var(--bianco);
  border-radius: var(--pillola);
  box-shadow: var(--ombra-pillola);
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 8px 10px 8px 24px;
  z-index: 50;
}
.voci {
  display: flex;
  align-items: center;
  gap: 26px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.voci a {
  font-size: 15px;
  font-weight: 500;
  color: var(--grigio);
  text-decoration: none;
  white-space: nowrap;
  padding: 6px 0;
}
.voci a:hover, .voci a[aria-current="page"] { color: var(--inchiostro); }
.accedi {
  font-size: 15px;
  font-weight: 500;
  color: var(--grigio);
  text-decoration: none;
  white-space: nowrap;
  padding: 6px 4px;
}
.accedi:hover { color: var(--inchiostro); }
.bottone-nero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  background: var(--nero);
  color: var(--bianco);
  border: 0;
  border-radius: var(--pillola);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 160ms ease, opacity 160ms ease;
}
.bottone-nero:hover { opacity: 0.9; }
.bottone-nero:active { transform: scale(0.98); }
.bottone-nero.grande {
  min-height: 52px;
  padding: 12px 28px;
  font-size: 17px;
  white-space: normal;
  text-align: center;
  line-height: 1.3;
}
.apri-menu {
  display: none;
  width: 44px; height: 44px;
  border: 0; background: transparent;
  border-radius: 50%;
  align-items: center; justify-content: center;
  margin-left: 4px;
}
.apri-menu .tratti, .apri-menu .tratti::before, .apri-menu .tratti::after {
  display: block; width: 18px; height: 1.5px; background: var(--inchiostro);
  border-radius: 2px; content: ""; position: relative;
}
.apri-menu .tratti::before { position: absolute; top: -6px; }
.apri-menu .tratti::after { position: absolute; top: 6px; }
.pannello-menu {
  position: fixed;
  top: 88px;
  left: 16px; right: 16px;
  background: var(--bianco);
  border-radius: 24px;
  box-shadow: var(--ombra-pillola);
  padding: 12px 8px;
  z-index: 49;
}
.pannello-menu ul { list-style: none; margin: 0; padding: 0; }
.pannello-menu a {
  display: block;
  padding: 14px 16px;
  font-size: 19px;
  font-weight: 500;
  color: var(--inchiostro);
  text-decoration: none;
  border-radius: 12px;
}
.pannello-menu a:hover { background: var(--carta); }
.pannello-menu .pannello-azioni {
  display: flex; gap: 10px; align-items: center;
  padding: 10px 8px 4px; border-top: 1px solid var(--filo); margin-top: 6px;
}
.pannello-menu .pannello-azioni a { flex: 1 1 auto; text-align: center; font-size: 16px; }
/* il bottone nero resta bianco su nero anche dentro il pannello, dove
   la regola sui link (piu' specifica) lo farebbe nero su nero */
.pannello-menu .pannello-azioni .bottone-nero { color: var(--bianco); background: var(--nero); }
.pannello-menu .pannello-azioni .bottone-nero:hover { background: var(--nero); opacity: 0.9; }

@media (max-width: 820px) {
  .voci, .menu-pillola .accedi { display: none; }
  .apri-menu { display: inline-flex; }
  .menu-pillola { gap: 10px; padding-left: 20px; }
  .menu-pillola .bottone-nero { margin-left: auto; padding: 0 18px; }
  .logo { font-size: 26px; }
}

/* --- la home: solo il paesaggio e le parole ---------------------- */
.scena {
  position: relative;
  min-height: 100svh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  text-align: center;
  padding: clamp(128px, 24vh, 220px) 24px 64px;
  overflow: hidden;
  isolation: isolate;
}
.scena picture, .scena .paesaggio {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.scena .paesaggio { object-fit: cover; object-position: 50% 42%; }
/* la velatura chiara sulla fascia del testo: forte in alto, sparisce
   verso il paesaggio */
.scena::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(245, 245, 242, 0.88) 0%,
    rgba(245, 245, 242, 0.80) 45%,
    rgba(245, 245, 242, 0.55) 68%,
    rgba(245, 245, 242, 0.18) 86%,
    rgba(245, 245, 242, 0) 100%);
}
/* LA TESTATA USA LA STESSA GRIGLIA DELLE PAGINE: il testo resta
   centrato, ma il suo riquadro comincia e finisce sulle stesse due
   linee di tutto il resto del sito. Prima era 860px centrati per conto
   suo, cioe' il settimo contenitore. */
.scena .parole {
  position: relative;
  z-index: 2;
  /* la larghezza della griglia MENO il suo padding, cosi' il riquadro
     comincia e finisce esattamente dove cominciano e finiscono i
     blocchi delle altre pagine. Col padding dentro, il box partiva 24px
     prima: il testo era allineato, la scatola no. */
  max-width: calc(var(--griglia) - 48px);
  margin-inline: auto;
}
.riga-sopra { font-size: 15px; font-weight: 500; color: var(--inchiostro); }
.claim {
  font-size: clamp(40px, 6.4vw, 78px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--inchiostro);
  margin: 16px 0 22px;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.riga-sotto {
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.5;
  color: #3F3F3C;
  max-width: 600px;
  margin: 0 auto 30px;
  text-wrap: pretty;
}
.note {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  font-weight: 500;
  color: #3F3F3C;
}
.note li { white-space: nowrap; }
.note li + li::before { content: "\00b7"; margin-right: 18px; }
.tasti { display: flex; justify-content: center; gap: 28px; margin-top: 40px; flex-wrap: wrap; }
.tasti a { font-size: 15px; font-weight: 500; color: var(--inchiostro); text-decoration: none; white-space: nowrap; }
.tasti a:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .note li + li::before { margin-right: 10px; }
  .note { gap: 6px 10px; }
}

/* ==================================================================
   UNA SOLA GRIGLIA PER TUTTO IL SITO (decisione di Aniello, 15/09/2026)
   ------------------------------------------------------------------
   Prima ogni blocco aveva un CONTENITORE PROPRIO centrato a se': la
   fascia larga 1320, i numeri 960, la colonna di testo 780, il modulo
   480. Ognuno era centrato bene, e proprio per questo NESSUNO PARTIVA
   DOVE PARTIVA L'ALTRO: su chi-siamo a 1920 c'erano tre margini
   sinistri diversi - 300, 480, 570 - sulla stessa pagina. A occhio
   sembrava un impaginato tranquillo; con le linee sopra
   (docs\disegno\) si vedeva che non condividevano niente.
   Adesso il contenitore e' UNO e i blocchi piu' stretti si ottengono
   occupando MENO COLONNE dentro quella griglia, non con una scatola
   loro. Cosi' tutti partono dalla stessa linea a sinistra.
   ================================================================== */
.pagina {
  max-width: var(--griglia);
  margin-inline: auto;
  padding: 140px 24px 40px;
  display: grid;
  grid-template-columns: repeat(var(--colonne), minmax(0, 1fr));
  column-gap: var(--vuoto);
}
/* di suo, un blocco prende tutta la griglia */
.pagina > *, .sezione > * { grid-column: 1 / -1; }
/* SETTE COLONNE SU DODICI e' la colonna di testo: parte dalla stessa
   linea di tutto il resto e finisce dove finisce la settima colonna.
   La misura non e' scelta a occhio - a 1920 fa 732px, che a 18px sono
   81 caratteri per riga, dentro la banda leggibile. */
/* LA COLONNA DI TESTO: parte dalla linea della griglia come tutti e si
   ferma alla misura di lettura. Le colonne dicono DOVE comincia, la
   misura dice DOVE SMETTE DI AVERE SENSO ALLARGARSI - due cose diverse,
   e prima erano la stessa (sette colonne e basta, che a 1920 facevano
   ottantuno caratteri per riga e a 2560 ne avrebbero fatti di piu'). */
.pagina .colonna { grid-column: 1 / span 7; max-width: var(--misura); }
/* LA TESTA DELLA PAGINA NON E' UNA COLONNA DI TESTO, anche se porta la
   stessa classe: e' il CONTENITORE del titolo e, dove c'e',
   dell'introduzione che gli sta accanto. Prendendo la misura di lettura
   si stringeva a 648px e la sua griglia interna finiva dentro quei 648:
   a 2560 titolo e introduzione stavano nel primo quarto dello schermo
   col resto vuoto. La misura la portano i suoi FIGLI, che sono loro il
   testo da leggere. */
.pagina .testa-pagina { max-width: none; }
.pagina .colonna.stretta {
  grid-column: 1 / span 6;
  max-width: var(--misura-modulo);
}
.pagina h1 {
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--inchiostro);
  margin-bottom: 14px;
  text-wrap: balance;
}
.sottotitolo { font-size: 22px; line-height: 1.4; color: var(--grigio); margin-bottom: 40px; text-wrap: pretty; }
.pagina h2 {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--inchiostro);
  margin: 72px 0 20px;
  text-wrap: balance;
}
.pagina h2:first-child { margin-top: 0; }
.pagina h3 { font-size: 18px; font-weight: 600; color: var(--inchiostro); }
.pagina p { margin-bottom: 18px; text-wrap: pretty; }
.pagina p:last-child { margin-bottom: 0; }
.intro p { font-size: 19px; line-height: 1.55; }

.righe { border-top: 1px solid var(--filo); }
.riga { padding: 22px 0; border-bottom: 1px solid var(--filo); }
.riga p { margin: 0; }
.situazione strong { display: block; font-size: 18px; margin-bottom: 6px; }
.situazione em { display: block; margin-top: 8px; color: var(--inchiostro); }

.passi { list-style: none; margin: 0; padding: 0; counter-reset: passo; border-top: 1px solid var(--filo); }
.passo {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--filo);
  counter-increment: passo;
}
.passo::before {
  content: counter(passo);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--grigio-2);
  padding-top: 2px;
}
.passo strong { display: block; font-size: 18px; margin-bottom: 4px; }
.passo p { margin: 0; }

/* --- la sezione dei tre passi, in due traduzioni ------------------
   DA 1024px IN SU, APPUNTATA: a sinistra i passi con molto spazio, a
   destra la card del prodotto ferma (sticky) che cambia stato. La card
   e' appuntata al TERZO SUPERIORE dello schermo, la stessa riga a cui
   un passo diventa attivo: cosi' sta sempre allineata all'inizio del
   passo attivo, mai fluttuante con vuoto sopra.
   SOTTO I 1024px, IMPILATA, NIENTE PIN: ogni passo ha il suo testo e
   sotto la propria card nello stato corrispondente (tre card, non una
   che cambia). Lo stato scritto nell'HTML e' quello finale; il
   movimento lo mette script/movimento.js. */
.passi-appuntati {
  display: grid;
  /* LE COLONNE SONO QUELLE DELLA PAGINA, non una griglia privata.
     Fino al 15/09/2026 questa sezione aveva la sua ("1fr / 460px" con
     72px di vuoto) e il testo dentro un max-width di 460 scritto a
     mano: a 1920 il testo finiva a 760 e la card cominciava a 1136,
     cioe' TRECENTOCINQUANTA PIXEL DI BUCO in mezzo alla sezione, e a
     2560 lo stesso. E' lo stesso difetto dei sette contenitori
     centrati a se' - qui dentro una sezione invece che sulla pagina. */
  grid-template-columns: repeat(var(--colonne), minmax(0, 1fr));
  column-gap: var(--vuoto);
  align-items: start;
  margin: 8px 0 0;
  padding: 0 0 40px;
  /* LA RIGA DI ATTIVAZIONE, IN UN POSTO SOLO: e' dove si ferma la card,
     dove si ferma il testo del passo attivo e dove il passo diventa
     nero. movimento.js la LEGGE da qui invece di riscriverla come
     "33%", cosi' le due derivazioni non possono divergere.
     Il minimo e' 280px e non 112: il testo appuntato, quando il suo
     blocco finisce, risale DELLA PROPRIA ALTEZZA (circa 160px) prima
     che arrivi il passo dopo. Con la riga a 112 quel risalto lo
     portava sotto la barra, che e' alta 76. */
  --riga-attivazione: clamp(280px, 33vh, 420px);
}
/* SEI COLONNE AL TESTO, CINQUE ALLA CARD, una di vuoto in mezzo: il
   testo e' il contenuto e resta nella sua misura di lettura (da 63 a 69
   caratteri per riga fra 1024 e 2560), la card arriva alla linea destra
   della griglia come ogni altro blocco. */
.passi-testo { grid-column: 1 / span 6; }
.passi-scena { grid-column: 8 / -1; }
/* FRA 1024 E 1279 LA CARD PRENDE UNA COLONNA IN PIU' e il testo una in
   meno: a 1024 cinque colonne fanno 392px, e dentro la card il
   documento (254) e il bilancio (100 a destra) si sarebbero trovati a
   quattordici pixel l'uno dall'altro. La misura del testo scende a 49
   caratteri per riga, che resta dentro il minimo del sito. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .passi-testo { grid-column: 1 / span 5; }
  .passi-scena { grid-column: 7 / -1; }
}
.passo-blocco {
  min-height: 72vh;
  color: #B9B9B4;
  transition: color 300ms ease;
}
.passo-blocco:last-child { min-height: 60vh; }
.passo-blocco.attivo { color: var(--testo); }
.scena-passo { display: none; }
/* il numero sta A SINISTRA del titolo, sulla stessa riga: cosi' il
   bordo superiore del passo E' il titolo, che e' la riga a cui il passo
   si attiva e a cui la card sta allineata */
.passo-testo {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 0;
  align-content: start;
  /* APPUNTATO COME LA CARD, sulla stessa riga: il testo del passo
     attivo si ferma dov'e' ferma la card invece di continuare a salire
     fino a passare sotto la barra. Lo delimita il suo blocco, quindi
     ogni passo lascia il posto al successivo da solo. */
  position: sticky;
  top: var(--riga-attivazione);
  /* ANCHE QUI LA MISURA DI LETTURA, non le colonne: a 2560 il testo del
     passo arrivava a 810px, cioe' novantacinque caratteri per riga. Le
     sei colonne dicono dove comincia, la misura dove smette. Il "+34px"
     e' la colonnina del numero, che non e' testo da leggere. */
  max-width: calc(var(--misura) + 34px);
}
.passo-numero {
  grid-column: 1;
  grid-row: 1;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.15;
  padding-top: 9px;
  color: inherit;
}
.passo-titolo {
  grid-column: 2;
  grid-row: 1;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: inherit;
  margin-bottom: 14px;
}
.passo-testo p { grid-column: 2; grid-row: 2; color: inherit; margin: 0; }
.passo-blocco.attivo .passo-titolo { color: var(--inchiostro); }

.passi-scena {
  position: sticky;
  top: var(--riga-attivazione);
  /* L'ALTEZZA CEDE PRIMA DELLA POSIZIONE: con la riga di attivazione
     ferma a 280px minimo, su una finestra bassa la card resterebbe
     tagliata in fondo. Invece di spostarla su - dove porterebbe con se'
     il testo, sotto la barra - si accorcia. */
  height: min(var(--card-alta),
              calc(100vh - var(--riga-attivazione) - 40px));
}
.cornice {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  background: var(--bianco);
  border: 1px solid var(--filo);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(20, 20, 19, 0.04), 0 16px 40px rgba(20, 20, 19, 0.06);
  overflow: hidden;
}
/* LE PARTI DELL'ILLUSTRAZIONE SI MISURANO IN PERCENTUALE DELLA CARD,
   non in pixel: la card cresce col desktop, e con misure fisse il
   disegno sarebbe rimasto della taglia del 2026 in un riquadro sempre
   piu' grande - cioe' un francobollo in mezzo al vuoto, che e'
   esattamente la sensazione che si stava correggendo. Le percentuali
   sono quelle che le misure fisse avevano sulla card da 460px. */
.doc {
  position: absolute;
  left: 24px; top: 24px;
  width: 50%; height: 230px;
  padding: 14px 16px;
  background: #FAFAF8;
  border: 1px solid var(--filo);
  border-radius: 10px;
}
.doc-testa { font-size: 12px; font-weight: 500; color: var(--inchiostro); margin-bottom: 12px; }
.doc-righe { position: relative; height: 180px; --passo-riga: 20px; }
.riga-doc {
  position: absolute;
  left: 0;
  height: 6px;
  border-radius: 3px;
  background: #D3D3CD;
}
.gestionale {
  position: absolute;
  right: 24px; bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--grigio);
  border: 1px solid var(--filo);
  border-radius: 8px;
  background: #FAFAF8;
}
.punto-verde { width: 8px; height: 8px; border-radius: 50%; background: #2F8F5B; display: inline-block; }
.gruppi { position: absolute; left: 24px; top: 24px; width: 50%; }
.gruppo { position: relative; height: 80px; padding-top: 6px; }
.etichetta-gruppo { font-size: 12px; font-weight: 600; color: var(--inchiostro); height: 20px; }
.gruppo-righe { position: relative; height: 40px; width: 87%; margin-left: 16px; }
.slot { position: absolute; left: 0; width: 100%; height: 6px; }
.spunta {
  position: absolute;
  right: -8px; top: 22px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #2F8F5B;
  color: var(--bianco);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.spunta svg { width: 14px; height: 14px; }
.bilancio { position: absolute; right: 24px; top: 24px; width: 22%; height: 210px; }
.riga-bil { position: absolute; left: 0; width: 84%; height: 6px; border-radius: 3px; background: #D3D3CD; }
.collegamenti {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.collegamenti path { fill: none; stroke: #2F8F5B; stroke-width: 1.2; }
.telefono {
  position: absolute; inset: 0;
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.tel-testa { display: flex; justify-content: space-between; font-size: 12px; font-weight: 500; color: var(--inchiostro); padding-bottom: 8px; }
.tel-periodo { color: var(--grigio); font-weight: 400; }
.tel-numero { display: flex; flex-direction: column; gap: 1px; padding: 7px 0; border-top: 1px solid var(--filo); }
.tel-etichetta { font-size: 11px; color: var(--grigio); }
.tel-valore { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--inchiostro); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tel-guardare { margin-top: auto; padding: 8px 10px; background: #FAFAF8; border: 1px solid var(--filo); border-radius: 10px; display: flex; flex-direction: column; gap: 2px; }
.tel-micro { font-size: 11px; font-weight: 600; color: var(--inchiostro); }
.tel-frase { font-size: 12.5px; line-height: 1.35; color: var(--testo); min-height: 2.7em; }

/* la riga gia' al suo posto nel gruppo (le card impilate del telefono) */
.riga-doc.in-slot { position: absolute; left: 0; }

/* senza movimento (prefers-reduced-motion, o niente script): tutto
   visibile e fermo.

   ATTENZIONE, ED E' IL DIFETTO DEL 15/09/2026: questo ripiego era
   scritto pensando al telefono, e non aveva nessun limite di larghezza.
   Su un desktop con "riduci animazioni" - che su Windows e macOS e' una
   preferenza comune - mostrava la versione IMPILATA anche a 2560px:
   la stessa illustrazione TRE VOLTE invece di una. Misurato a 390, 768,
   1023, 1024, 1280, 1440, 1920 e 2560.

   Sotto i 1024 la versione impilata e' quella giusta e resta. Da 1024 in
   su si tiene la scena unica - non appuntata, ferma dov'e' - e le tre
   copie spariscono: e' la stessa forma che vede chi ha il movimento
   acceso, senza il movimento. */
.statico { display: block; }
.statico .passi-scena { display: none; }
.statico .scena-passo { display: block; }
.statico .passo-blocco, .statico .passo-blocco:last-child { color: var(--testo); min-height: 0; margin-bottom: 72px; }
/* SENZA MOVIMENTO NIENTE E' APPUNTATO, testo compreso: i blocchi non
   hanno piu' l'altezza che darebbe al pin lo spazio per lavorare, e un
   testo appuntato dentro un blocco alto quanto se stesso si
   incollerebbe e basta. */
.statico .passo-testo { position: static; }
.statico .passo-titolo { color: var(--inchiostro); }
@media (min-width: 1024px) {
  /* SENZA MOVIMENTO LA SEZIONE TIENE LA STESSA GRIGLIA: cambia solo che
     niente si trasforma. Fino al 15/09/2026 tornava a "display: block"
     e "position: static", e la seconda delle due cose era il difetto
     che Aniello ha visto nel browser a 1920: il riquadro della card sta
     in posizione ASSOLUTA, e togliendo la posizione al suo contenitore
     si e' aggrappato al primo antenato posizionato che ha trovato -
     finendo tagliato fuori dallo schermo a sinistra, col testo in una
     colonna stretta e meta' schermo vuota.
     NON ERA UN FOTOGRAMMA DI TRANSIZIONE: e' quello che vede chiunque
     abbia "riduci animazioni" acceso, che su Windows e su macOS e' una
     preferenza comune - ed era anche quello che mostravano i nostri
     scatti a riposo, che quella preferenza la usano apposta. Ce
     l'avevamo sotto gli occhi in docs\disegno\ da un giorno.
     L'appuntatura della card RESTA: e' impaginazione, non animazione, e
     senza di lei la card starebbe accanto al primo passo e i due
     successivi avrebbero il vuoto di fianco. */
  .statico {
    display: grid;
    grid-template-columns: repeat(var(--colonne), minmax(0, 1fr));
    column-gap: var(--vuoto);
    align-items: start;
  }
  .statico .scena-passo { display: none; }
  .statico .passi-scena { display: block; }
  .statico .passo-blocco, .statico .passo-blocco:last-child {
    min-height: 0;
    margin-bottom: 72px;
  }
}

/* --- sotto i 1024px: impilata, niente pin ------------------------ */
@media (max-width: 1023px) {
  .passi-appuntati { display: block; }
  .passi-scena { display: none; }
  .scena-passo { display: block; }
  .passo-testo { position: static; display: grid; }
  .passo-blocco, .passo-blocco:last-child { min-height: 0; color: var(--testo); margin-bottom: 72px; }
  .passo-blocco .passo-titolo { color: var(--inchiostro); }
  .passo-titolo { font-size: 24px; }
}
.scena-passo {
  position: relative;
  height: 300px;
  max-width: 460px;
  margin-top: 24px;
}
.scena-passo .cornice-telefono { width: 230px; border-radius: 30px; }
.scena-passo[data-scena-passo="3"] { height: 380px; }
/* card strette (telefono): il documento e i gruppi a sinistra, il
   bilancio a destra, tutto piu' fitto */
@media (max-width: 519px) {
  .scena-passo .doc { left: 16px; top: 16px; width: 50%; height: auto; padding: 10px 12px; }
  .scena-passo .doc-testa { margin-bottom: 6px; font-size: 11px; }
  .scena-passo .doc-righe { height: 160px; --passo-riga: 17px; }
  .scena-passo .riga-doc { height: 5px; }
  .scena-passo .gestionale { right: 16px; bottom: 16px; padding: 6px 10px; font-size: 11px; }
  .scena-passo .gruppi { left: 16px; top: 12px; width: 54%; }
  .scena-passo .gruppo { height: 78px; padding-top: 6px; }
  .scena-passo .gruppo-righe { width: calc(100% - 28px); margin-left: 10px; }
  .scena-passo .spunta { right: -6px; }
  .scena-passo .bilancio { right: 16px; top: 12px; width: 26%; }
  .scena-passo .riga-bil { width: 100%; }
}

@media (max-width: 1023px) {
  .scena-passo[data-scena-passo="3"] { height: 400px; }
}

.tappe { border-top: 1px solid var(--filo); }
.tappa {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 6px 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--filo);
}
.tappa dt { font-weight: 600; color: var(--inchiostro); }
.tappa dd { margin: 0; }
@media (max-width: 520px) { .tappa { grid-template-columns: minmax(0, 1fr); } }

.cta { margin-top: 56px; }

.persona {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--filo);
}
.persone { border-top: 1px solid var(--filo); }
.segnaposto-foto {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: #E6E6E1;
}
.persona-nome { font-size: 18px; font-weight: 600; color: var(--inchiostro); }
.persona-ruolo { font-size: 15px; color: var(--grigio); margin-bottom: 8px; }
.persona p { margin: 0; }
.prova-riga { font-size: 20px; font-weight: 600; color: var(--inchiostro); margin: 22px 0; line-height: 1.4; }
.citazione { margin: 32px 0 0; padding-left: 20px; border-left: 2px solid var(--inchiostro); font-size: 19px; line-height: 1.5; }
.citazione footer { font-size: 15px; color: var(--grigio); margin-top: 8px; }

.voce-prezzo dt { font-size: 18px; font-weight: 600; color: var(--inchiostro); margin-bottom: 4px; }
.voce-prezzo dd { margin: 0; }
.livello dt { font-style: italic; font-weight: 500; color: var(--inchiostro); margin-bottom: 2px; }
.livello dd { margin: 0; }

.faq { border-top: 1px solid var(--filo); }
.faq details { border-bottom: 1px solid var(--filo); }
.faq summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--inchiostro);
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; color: var(--grigio-2); flex: 0 0 auto; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding-bottom: 18px; margin: 0; }

/* --- il modulo --------------------------------------------------- */
.modulo { margin-top: 40px; }
.campo { margin-bottom: 20px; }
.campo label { display: block; font-size: 14px; font-weight: 500; color: var(--inchiostro); margin-bottom: 6px; }
.campo input, .campo select, .campo textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: var(--inchiostro);
  padding: 12px 14px;
  border: 1px solid var(--campo-bordo);
  border-radius: 10px;
  background: var(--bianco);
}
.campo textarea { min-height: 130px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--verde); outline-offset: 1px; border-color: var(--verde); }
/* la trappola per i programmi: fuori dallo schermo, fuori dal tab */
.trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.trappola input { font-size: 16px; }
.esito { margin-top: 16px; font-size: 15px; }
.esito[data-tipo="errore"] { color: var(--errore); }
.grazie { font-size: 22px; font-weight: 500; color: var(--inchiostro); margin-top: 40px; }
.senza-script { margin-top: 16px; font-size: 15px; color: var(--grigio); }

/* --- il pie' di pagina (pagine interne) -------------------------- */
.pie {
  border-top: 1px solid var(--filo);
  margin-top: 96px;
  padding: 28px 24px 40px;
}
.pie .colonna {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  font-size: 14px;
  color: var(--grigio);
}
.pie .logo { font-size: 22px; }
.pie a { text-decoration: none; }
.pie a:hover { color: var(--inchiostro); text-decoration: underline; }
.pie .accedi-pie { margin-left: auto; }

/* ==================================================================
   LE SEZIONI DELLO STORYBOARD (v1). Ogni sezione respira: 120px sopra e
   sotto su desktop, 72px sul telefono. Lo stato scritto qui e' quello
   FINALE: il movimento (script/movimento.js) parte da altrove e arriva
   qui, legato allo scorrimento. Con prefers-reduced-motion resta cosi'.
   ================================================================== */
.pagina { padding-top: 140px; }
/* UNA SEZIONE E' A SUA VOLTA LA GRIGLIA, cosi' i suoi blocchi si
   allineano alle stesse colonne di quelli della pagina. Non ha piu'
   ne' una larghezza massima sua ne' i margini automatici: quelli
   facevano di ogni sezione un contenitore centrato per conto proprio.
   La classe "largo" resta nell'HTML perche' la usano i collaudi e non
   vale la pena riscrivere sei pagine per toglierla: oggi non fa piu'
   niente, ed e' giusto che non faccia niente. */
.sezione {
  padding: 120px 0 0;
  display: grid;
  grid-template-columns: repeat(var(--colonne), minmax(0, 1fr));
  column-gap: var(--vuoto);
}
.sezione h2 { margin-top: 0; }
.sezione.centrata { text-align: center; }
.sezione.centrata .cta { margin: 0; }
.testa-pagina .sottotitolo { margin-bottom: 0; }
.titolo-passi { margin-bottom: 24px; }
@media (max-width: 1023px) { .titolo-passi { max-width: 640px; margin-left: auto; margin-right: auto; } }
.testa-pagina .intro { margin-top: 32px; }
@media (max-width: 1023px) {
  .sezione { padding-top: 72px; }
}

/* ==================================================================
   IL DESKTOP CRESCE A GRADINI (15/09/2026)
   ------------------------------------------------------------------
   Fino a qui la colonna era 640px a QUALUNQUE larghezza: misurata coi
   fotogrammi a 1280, 1440, 1920 e 2560, la riga di testo restava
   identica mentre la carta intorno raddoppiava. A 2560 il sito era una
   striscia in mezzo al vuoto, e non perche' fosse "sobrio": perche'
   nessuno aveva guardato oltre il proprio schermo.
   Tre gradini, 640 -> 720 -> 780, e con loro crescono la fascia larga e
   lo spazio fra le sezioni. Il tetto c'e' perche' esiste: oltre i
   novanta caratteri per riga l'occhio perde il capo di quella dopo.
   ================================================================== */
   A CRESCERE ADESSO E' LA GRIGLIA, non tre contenitori per conto loro:
   la colonna di testo sono sempre sette colonne su dodici, e si allarga
   perche' si allarga la griglia. Un gradino solo da spostare invece di
   tre da tenere d'accordo. */
@media (min-width: 1440px) {
  :root { --griglia: 1200px; }
  .pagina { padding-top: 160px; }
  .sezione { padding-top: 140px; }
  .chiusura { padding-top: 160px; }
}
@media (min-width: 1920px) {
  :root { --griglia: 1320px; }
  /* SU UNO SCHERMO DA 1920 IN SU CRESCE ANCHE IL CARATTERE, non solo la
     colonna: allargando solo la colonna i caratteri per riga salivano a
     92, oltre il limite oltre il quale si perde il capo della riga.
     Corpo e misura di lettura si muovono insieme, perche' la misura e'
     in em: la riga si allarga in pixel e resta uguale in caratteri. */
  body { font-size: 18px; }
  .pagina { padding-top: 180px; }
  .sezione { padding-top: 160px; }
  .chiusura { padding-top: 180px; }
}

/* --- OLTRE I 1920: LA GRIGLIA CONTINUA, IL TESTO NO ----------------
   Decisione di Aniello del 15/09/2026: a 2560 un contenitore da 1320
   lascia meta' schermo vuoto, e si vede. La griglia cresce ancora - ma
   NON allargando la riga di testo, che oltre i settantacinque caratteri
   si legge peggio. Lo spazio in piu' va a cio' che non e' testo: la
   card della sezione appuntata, le illustrazioni, le tabelle, i numeri
   della prova. E' il motivo per cui la misura e' un token a se': cosi'
   la griglia e la riga di lettura possono crescere in modo diverso
   invece di essere la stessa cosa. */
@media (min-width: 2100px) {
  :root { --griglia: 1520px; --card-alta: 480px; }
}
@media (min-width: 2400px) {
  :root { --griglia: 1760px; --card-alta: 520px; }
}

/* DA 1600 IN SU LA TESTA DELLA PAGINA STA SU DUE COLONNE: il titolo e
   il suo sottotitolo a sinistra, l'introduzione a destra. Sopra una
   certa larghezza incolonnare titolo e introduzione lascia mezzo schermo
   bianco e allunga la pagina per niente.
   Solo dove l'introduzione c'e' davvero (:has): su "Come funziona" la
   testa e' titolo e basta, e una griglia a due colonne le darebbe una
   seconda colonna vuota. */
/* anche la testata della home cresce: a 1920 il claim era gia' al suo
   massimo da 1220px in su, e su uno schermo grande restava un blocco
   piccolo in mezzo alla fotografia */
@media (min-width: 1920px) {
  /* il claim cresce; il riquadro no, e' gia' quello della griglia */
  .claim { font-size: clamp(40px, 6.4vw, 88px); }
  .riga-sotto { max-width: 680px; font-size: 21px; }
}

/* LA TESTA A DUE COLONNE USA LE COLONNE DELLA GRIGLIA, non una griglia
   sua: il titolo sulle prime sei, l'introduzione sulle ultime cinque.
   Prima aveva un contenitore proprio da 1320 e due mezzi uguali, ed era
   uno dei sei margini che non tornavano. */
@media (min-width: 1600px) {
  .pagina .testa-pagina:has(.intro) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(var(--colonne), minmax(0, 1fr));
    column-gap: var(--vuoto);
    align-items: end;
  }
  .testa-pagina:has(.intro) h1,
  .testa-pagina:has(.intro) .sottotitolo { grid-column: 1 / span 6; }
  .testa-pagina:has(.intro) .intro {
    grid-column: 8 / -1;
    grid-row: 1 / span 2;
    margin-top: 0;
  }
}

/* la chiusura: claim e bottone, centrati, tanto spazio */
.chiusura {
  text-align: center;
  padding: 140px 0 40px;
}
.chiusura h2 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 28px; letter-spacing: -0.02em; }
.chiusura .cta { margin: 0; }
@media (max-width: 1023px) { .chiusura { padding-top: 96px; } }

/* --- le tre situazioni: illustrazione sopra, testo sotto ----------- */
.situazioni {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-top: 40px;
}
.situazione strong { display: block; font-size: 18px; margin: 18px 0 6px; }
.situazione em { display: block; margin-top: 8px; color: var(--inchiostro); }
.situazione p { margin: 0; }
@media (max-width: 1023px) {
  .situazioni { grid-template-columns: minmax(0, 1fr); gap: 56px; max-width: 640px; margin-left: auto; margin-right: auto; }
}
.ill {
  position: relative;
  height: 180px;
  background: var(--bianco);
  border: 1px solid var(--filo);
  border-radius: 14px;
  overflow: hidden;
}
/* calendario: tre mesi che scorrono, un documento che arriva ingiallito */
.cal-mesi {
  position: absolute; left: 20px; top: 18px;
  display: flex; flex-direction: column; gap: 10px;
  font-size: 12px; font-weight: 500; color: var(--grigio);
}
.cal-mesi span { padding: 4px 10px; border: 1px solid var(--filo); border-radius: 6px; background: #FAFAF8; }
.cal-doc {
  position: absolute; right: 20px; bottom: 18px;
  width: 44%; padding: 12px;
  background: #EFE6C9;
  border: 1px solid #DDD3B0;
  border-radius: 8px;
  display: flex; flex-direction: column; gap: 6px;
}
.cal-doc-titolo { font-size: 11px; font-weight: 600; color: #6B6040; margin-bottom: 2px; }
.cal-riga { display: block; height: 5px; border-radius: 3px; background: #D9CFA9; width: 90%; }
.cal-riga.corta { width: 60%; }
/* gestionale: una griglia fitta e in mezzo il vuoto dove dovrebbe
   esserci un numero */
.gest-griglia {
  position: absolute; inset: 16px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 14px;
  align-content: start;
}
.gest-riga { display: block; height: 5px; border-radius: 3px; background: #E3E3DE; }
.gest-vuoto {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 56%; height: 58px;
  border: 1.5px dashed #B9B9B4;
  border-radius: 10px;
  background: var(--bianco);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--grigio-2); letter-spacing: 0.02em;
  box-shadow: 0 0 0 6px rgba(47, 90, 69, 0.14);
}
/* excel: una tabella con una cella rossa tenue e una riga che manca */
.xl-griglia {
  position: absolute; left: 20px; right: 20px; top: 20px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.xl-cella { display: block; height: 22px; border: 1px solid var(--filo); border-radius: 4px; background: #FAFAF8; }
.xl-rossa { background: #F5D9D4; border-color: #E4B4AC; }
.xl-manca {
  position: absolute; left: 20px; right: 20px; bottom: 20px;
  height: 22px; border: 1.5px dashed #D3D3CD; border-radius: 4px;
  font-size: 11px; color: var(--grigio-2);
  display: flex; align-items: center; justify-content: center;
}

/* --- per chi e': piccola illustrazione a sinistra del testo -------- */
.per-chi { display: flex; flex-direction: column; gap: 28px; margin-top: 32px; }
.per-chi-riga { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 20px; align-items: center; }
.per-chi-riga p { margin: 0; }
.ill-piccola {
  height: 64px; width: 92px;
  display: flex; align-items: center; gap: 5px;
}
.mini-card {
  width: 26px; height: 40px;
  background: var(--bianco); border: 1px solid var(--filo); border-radius: 5px;
  padding: 6px 4px; display: flex; flex-direction: column; gap: 4px;
}
.mini-card.larga { width: 56px; height: 40px; padding: 8px 8px; gap: 6px; }
.mini-punto { width: 6px; height: 6px; border-radius: 50%; background: var(--inchiostro); }
.mini-riga { display: block; height: 4px; border-radius: 2px; background: #D3D3CD; width: 100%; }
.mini-riga.corta { width: 60%; }
.mini-riga.verde { background: #2F8F5B; }
.mini-riga.ambra { background: #C58A2B; }
.ill-verificato { flex-direction: column; align-items: flex-start; gap: 4px; }
.mini-doc {
  position: relative; width: 38px; height: 44px;
  background: var(--bianco); border: 1px solid var(--filo); border-radius: 5px;
  padding: 8px 6px; display: flex; flex-direction: column; gap: 5px;
}
.mini-spunta {
  position: absolute; right: -8px; bottom: -8px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #2F8F5B; color: var(--bianco);
  display: inline-flex; align-items: center; justify-content: center;
}
.mini-spunta svg { width: 11px; height: 11px; }
.mini-etichetta { font-size: 10px; font-weight: 600; color: #2F8F5B; letter-spacing: 0.02em; }

/* --- la linea del tempo: orizzontale su desktop, verticale sotto --- */
.linea-tempo {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin: 48px auto 0;
  padding-top: 34px;
}
.linea-binario {
  position: absolute; left: 0; right: 0; top: 10px;
  height: 2px; background: var(--filo); border-radius: 1px;
}
.linea-riempimento {
  position: absolute; left: 0; top: 0; height: 100%; width: 100%;
  background: var(--inchiostro); transform-origin: left center;
}
.tappa { position: relative; display: block; padding: 0; border: 0; }
.tappa-cerchio {
  position: absolute; left: 0; top: -34px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--inchiostro); border: 2px solid var(--inchiostro);
  box-sizing: border-box;
}
.tappa-testo dt { font-weight: 600; color: var(--inchiostro); margin-bottom: 4px; }
.tappa-testo dd { margin: 0; }
@media (max-width: 1023px) {
  .linea-tempo { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 0; padding-left: 40px; max-width: 640px; }
  .linea-binario { left: 10px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .linea-riempimento { transform-origin: center top; }
  .tappa-cerchio { left: -40px; top: 0; }
}

/* --- chi siamo: le due persone ------------------------------------- */
.persone {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}
.persona-card {
  background: var(--bianco);
  border: 1px solid var(--filo);
  border-radius: 16px;
  padding: 20px 20px 28px;
}
.foto-cornice {
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
  background: #E6E6E1;
}
.foto { width: 100%; height: 112%; margin-top: -6%; }
.foto.segnaposto { background: linear-gradient(180deg, #E9E9E4, #DCDCD6); }
/* la foto vera riempie la sua cornice: il ritaglio 4:5 l'ha gia' fatto
   il generatore, object-fit e' la rete per il pixel di arrotondamento */
.foto > picture, .foto .ritratto {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.persona-card .persona-nome { font-size: 20px; }
.persona-card p { margin: 0; }
.persona-card .citazione { margin-top: 20px; font-family: var(--cormorant); font-style: italic; font-weight: 600; font-size: 22px; line-height: 1.35; padding-left: 16px; }
@media (max-width: 1023px) { .persone { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin: 0 auto; } }

/* --- la prova: tre numeri grandi ----------------------------------- */
.prova-numeri {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 32px;
  /* NIENTE LARGHEZZA MASSIMA E NIENTE MARGINI AUTOMATICI: era uno dei
     contenitori centrati per conto proprio (960px), e a 1920 partiva
     180px piu' a destra del blocco sopra. Adesso prende le colonne
     della griglia come tutti gli altri. */
  margin: 32px 0;
  align-items: start;
}
.prova-numero { text-align: center; }
.numero-grande {
  display: block;
  font-size: clamp(56px, 9vw, 96px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--inchiostro);
  font-variant-numeric: tabular-nums;
}
/* UN NUMERO LUNGO NON STA NELLA COLONNA DI UN NUMERO CORTO: "11.504.717"
   e' dieci segni, "105" tre, e allo stesso corpo il primo esce dalla sua
   colonna. La lunghezza la dichiara il generatore (numero_grande), che
   il numero ce l'ha in mano; il CSS da solo non sa cosa ci scriviamo. */
.numero-grande.lungo { font-size: clamp(30px, 4.2vw, 52px); }
.numero-etichetta { display: block; margin-top: 10px; font-size: 15px; color: var(--grigio); }
/* sotto i 768 i tre numeri si impilano: a 390 tre colonne darebbero
   110px a testa, e dentro non ci sta nemmeno il numero piu' corto */
@media (max-width: 767px) {
  .prova-numeri {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    max-width: 420px;
  }
}

/* --- privacy e cookie: un documento che si legge -------------------- */
.legale .aggiornato {
  margin-top: 12px;
  font-size: 14px;
  color: var(--grigio);
}
.legale .intro-legale {
  margin-top: 24px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--inchiostro);
}
.sezione-legale { margin-top: 44px; }
.sezione-legale h2 {
  margin: 0 0 14px;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--inchiostro);
}
.sezione-legale p { margin-bottom: 14px; }
.sezione-legale p:last-child { margin-bottom: 0; }

/* --- parliamone: la chiamata prima, il modulo dopo ------------------ */
.chiamata {
  background: var(--bianco);
  border: 1px solid var(--filo);
  border-radius: 16px;
  padding: 28px;
  margin-top: 28px;
}
.chiamata h2 { margin: 0 0 10px; font-size: 22px; font-weight: 600; }
.chiamata p { margin: 0 0 6px; }
.chiamata-durata { font-size: 14px; color: var(--grigio); margin-bottom: 20px !important; }
.oppure {
  margin: 40px 0 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--grigio);
  text-transform: none;
}
/* la seconda strada sotto il comando della home: si vede, ma non
   compete col bottone - chi vuole prenotare non deve esitare */
.seconda-strada { margin: 14px 0 0; font-size: 14px; }
.seconda-strada a { color: #3F3F3C; text-underline-offset: 3px; }
.modulo-riga { font-size: 15px; color: var(--grigio); margin: 8px 0 0; }

/* --- cosa abbiamo trovato: il riassunto e i quattro casi ------------ */
/* la nota sotto il numero: il numero dice quanto, l'etichetta che cosa,
   la nota da dove viene. Senza la nota un numero grande e' uno slogan. */
/* CON LA NOTA LA CARD VA A SINISTRA: il numero e l'etichetta centrati
   sopra una nota di tre righe giustificata a sinistra sembravano due
   blocchi diversi appoggiati uno sull'altro. */
.prova-numeri.con-nota {
  text-align: left;
  /* e si allinea al blocco largo, non si centra dentro: sotto c'è la
     griglia dei casi, e due blocchi della stessa pagina che cominciano
     a centoventi pixel di distanza si leggono come uno storto */
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.prova-numeri.con-nota .prova-numero { text-align: left; }
.numero-nota {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--grigio);
}
/* il titolo di un blocco largo si allinea al blocco, non alla colonna
   del testo: sopra una griglia di card, in colonna parte da tutt'altra
   parte e sembra il titolo di qualcos'altro */
.titolo-blocco { margin-bottom: 8px; }
@media (max-width: 1023px) {
  .titolo-blocco { max-width: 640px; margin-left: auto; margin-right: auto; }
}
/* la prima sezione dopo la testa della pagina respira meno: fra il
   titolo e quello che lo spiega non ci va lo stesso vuoto che separa
   due argomenti diversi */
.sezione.prima { padding-top: 72px; }
@media (max-width: 1023px) { .sezione.prima { padding-top: 48px; } }
.casi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 32px;
  /* DUE MISURE DI LETTURA E BASTA: i casi sono quattro e stanno due per
     riga: allargandosi con la griglia, a 2560 ogni card arrivava a
     788px di testo, ottantotto caratteri per riga. Tre colonne
     lascerebbero un orfano (i casi sono quattro), quattro darebbero
     trentanove caratteri: sono il numero dei casi a decidere, non lo
     spazio disponibile. Il conto e' due misure + il vuoto + le due
     imbottiture delle card. */
  max-width: calc(2 * var(--misura) + var(--vuoto) + 112px);
}
.caso {
  background: var(--bianco);
  border: 1px solid var(--filo);
  border-radius: 16px;
  padding: 28px;
}
/* la cifra del caso e' grande ma non gigante: qui comanda il racconto,
   non il numero - il numero da solo non si capisce */
.caso-cifra {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--inchiostro);
  font-variant-numeric: tabular-nums;
}
.caso h3 {
  margin: 10px 0 12px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--inchiostro);
}
.caso p { margin: 0; }
@media (max-width: 1023px) {
  .casi { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-left: auto; margin-right: auto; }
}

/* --- perche' un controller: testo a sinistra, illustrazione a destra */
.due-colonne {
  display: grid;
  /* LE COLONNE DELLA PAGINA, non una griglia privata. Era
     "1fr / 420px" con 64px di vuoto e un max-width di 560 scritto a
     mano sul testo: a 2560 il testo si fermava a 560 e l'illustrazione
     cominciava 668px piu' in la'. E' lo stesso difetto della sezione
     dei tre passi, trovato lo stesso giorno guardando gli scatti a
     2560 - due volte la stessa forma sbagliata, in due punti diversi. */
  grid-template-columns: repeat(var(--colonne), minmax(0, 1fr));
  column-gap: var(--vuoto);
  align-items: center;
}
.due-colonne > div:first-child {
  grid-column: 1 / span 6;
  max-width: var(--misura);
}
.due-colonne > div:last-child { grid-column: 8 / -1; }
@media (max-width: 1023px) {
  .due-colonne { grid-template-columns: minmax(0, 1fr); gap: 40px; max-width: 640px; margin: 0 auto; }
  .due-colonne > div:first-child,
  .due-colonne > div:last-child { grid-column: 1; max-width: none; }
}
.ill-controller {
  height: auto;
  padding: 28px 24px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 0;
}
.ctrl-riga {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; border: 1px solid var(--filo); border-radius: 10px; background: #FAFAF8;
}
.ctrl-etichetta { font-size: 12px; font-weight: 500; color: var(--grigio); }
.ctrl-importo { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--inchiostro); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ctrl-linea { width: 40px; height: 110px; display: block; }
.ctrl-spunta {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 6px; border-radius: 999px;
  background: #2F8F5B; color: var(--bianco); font-size: 11px; font-weight: 600;
  white-space: nowrap;
}
.ctrl-spunta svg { width: 12px; height: 12px; }
.ctrl-nota {
  position: absolute; right: 22px; top: 14px;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--inchiostro); color: var(--inchiostro);
  font-family: var(--cormorant); font-style: italic; font-weight: 600; font-size: 17px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* --- prezzi: due card ----------------------------------------------- */
.due-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin: 0;
}
.due-card dt { font-size: 20px; font-weight: 600; color: var(--inchiostro); margin-bottom: 10px; }
.due-card dd { margin: 0; }
.card-prezzo, .card-livello {
  background: var(--bianco);
  border: 1px solid var(--filo);
  border-radius: 16px;
  padding: 28px;
}
@media (max-width: 1023px) { .due-card { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin: 0 auto; } }
.ill-canone { height: 56px; border: 0; background: transparent; margin: 6px 0 14px; overflow: visible; }
.barra-prezzo {
  position: absolute; left: 0; right: 0; top: 26px;
  height: 4px; border-radius: 2px; background: var(--filo);
}
.tacca {
  position: absolute; top: 50%; left: 50%;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--inchiostro); transform: translate(-50%, -50%);
  box-shadow: 0 0 0 4px var(--bianco);
}
.ill-livello { height: 120px; border: 0; background: transparent; margin-bottom: 18px; overflow: visible;
  display: flex; align-items: center; }
.mini-doc.grande { width: 72px; height: 92px; padding: 12px 10px; gap: 7px; }
.pdf-marca { font-size: 11px; font-weight: 700; color: #A23B2A; letter-spacing: 0.04em; margin-bottom: 4px; }
.ill-connesso { gap: 0; }
.conn-gestionale {
  padding: 10px 12px; border: 1px solid var(--filo); border-radius: 8px; background: #FAFAF8;
  font-size: 12px; font-weight: 500; color: var(--grigio); white-space: nowrap;
}
.conn-cavo { flex: 1 1 auto; height: 2px; background: var(--inchiostro); transform-origin: left center; min-width: 24px; }
.conn-card {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 12px; border: 1px solid var(--filo); border-radius: 8px; background: var(--bianco);
  font-size: 12px; font-weight: 500; color: var(--inchiostro); white-space: nowrap;
}

/* --- FAQ a fisarmonica: una aperta alla volta ---------------------- */
.faq summary { align-items: center; }
.faq summary::after, .faq details[open] summary::after { content: none; }
.faq-freccia {
  flex: 0 0 auto; width: 10px; height: 10px;
  border-right: 1.5px solid var(--grigio-2); border-bottom: 1.5px solid var(--grigio-2);
  transform: rotate(45deg); transition: transform 300ms ease; margin-right: 4px;
}
.faq details[open] .faq-freccia { transform: rotate(-135deg); }
.faq-risposta { overflow: hidden; }
.faq-risposta p { padding-bottom: 18px; margin: 0; }

/* --- il modulo: campi grandi, bottone largo ------------------------- */
.campo input, .campo select { height: 52px; }
.bottone-nero.largo { width: 100%; }
.sotto-bottone { margin: 12px 0 0; text-align: center; font-size: 14px; color: var(--grigio); }
.grazie-blocco { margin-top: 40px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.grazie-spunta { width: 44px; height: 44px; border-radius: 50%; background: #2F8F5B; color: var(--bianco);
  display: inline-flex; align-items: center; justify-content: center; }
.grazie-spunta svg { width: 24px; height: 24px; }
.grazie-spunta path { stroke-dasharray: 30; stroke-dashoffset: 30; transition: stroke-dashoffset 600ms ease 200ms; }
.grazie-blocco.disegnata .grazie-spunta path { stroke-dashoffset: 0; }
.grazie-blocco .grazie { margin: 0; }

/* --- la home: il paesaggio scivola piu' lento e si scurisce appena - */
.paesaggio-cornice { position: absolute; inset: 0; z-index: 0; }
.paesaggio-cornice picture, .paesaggio-cornice .paesaggio { position: absolute; inset: 0; width: 100%; height: 100%; }
.velo-scuro { position: absolute; inset: 0; background: #0A0A0A; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}