/* ==========================================================================
   mauraspennacchio.it — foglio di stile unico
   Scritto mobile-first: le regole base valgono per smartphone,
   i blocchi @media aggiungono le varianti per schermi più larghi.
   ========================================================================== */


/* ==========================================================================
   1. FONT LOCALI (nessuna chiamata ai server di Google)
   Inter è variabile: un solo file copre tutti i pesi.
   Poppins no: serve un file per ogni peso.
   ========================================================================== */

/* Inter — testi */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/inter-var-latin.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/inter-var-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Poppins — titoli e firma. Non è variabile: un file per ogni peso usato
   (400 normale, 500 per la firma, 600 per i titoli, 500 corsivo). */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/poppins-400-latin.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/poppins-400-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/poppins-500-latin.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/poppins-500-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/poppins-600-latin.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/poppins-600-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/poppins-500-italic-latin.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/poppins-500-italic-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ==========================================================================
   2. VARIABILI — palette, tipografia, misure ricorrenti
   Cambiando un valore qui cambia tutto il sito.
   ========================================================================== */

:root {
  /* Palette del personal brand */
  --nero: #141414;
  --bianco-caldo: #F7F5F0;
  --lilla: #CFC3EE;
  --salvia: #C8DCCB;
  --lilla-profondo: #5E4E92;

  /* Grigi ricavati dal nero, per i testi secondari */
  --nero-70: rgba(20, 20, 20, 0.70);
  --nero-12: rgba(20, 20, 20, 0.12);
  --chiaro-70: rgba(247, 245, 240, 0.72);
  --chiaro-20: rgba(247, 245, 240, 0.20);

  /* Font */
  --font-titoli: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-testi: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Misure */
  --altezza-header: 84px;
  --larghezza-max: 1600px;
  --margine-laterale: 40px;
  --raggio: 6px;

  /* Spazi verticali fra le sezioni */
  --spazio-sezione: 64px;
}

@media (min-width: 900px) {
  :root {
    --altezza-header: 96px;
    --spazio-sezione: 88px;
  }

  /* Il testo cresce con la larghezza: righe più lunghe, ma non più fitte */
  body { font-size: 1.125rem; }
}


/* ==========================================================================
   3. AZZERAMENTO E BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;           /* scorrimento morbido verso le ancore */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bianco-caldo);
  color: var(--nero);
  font-family: var(--font-testi);
  font-size: 1.0625rem;              /* 17px */
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

/* Le comparse laterali e quella "a fuoco" spostano o ingrandiscono blocchi
   larghi come tutta la gabbia: senza questo taglio comparirebbe una barra di
   scorrimento orizzontale. Serve "clip" e non "hidden": "hidden" renderebbe
   main una zona scorrevole e romperebbe l'aggancio dell'hero e dei pannelli. */
main { overflow-x: clip; }

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

h1, h2, h3 {
  font-family: var(--font-titoli);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--lilla-profondo); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

/* Stato di focus visibile su tutta la navigazione da tastiera */
:focus-visible {
  outline: 3px solid var(--lilla-profondo);
  outline-offset: 3px;
  border-radius: 2px;
}
.sezione-scura :focus-visible { outline-color: var(--lilla); }

/* Link di salto, visibile solo quando riceve il focus */
.salta-contenuto {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--lilla);
  color: var(--nero);
  padding: 12px 20px;
  font-weight: 600;
  text-decoration: none;
}
.salta-contenuto:focus { left: 0; }


/* ==========================================================================
   4. ELEMENTI RICORRENTI — contenitori, sezioni, pulsanti, divisore, firma
   ========================================================================== */

/* Tutte le sezioni del sito usano la stessa gabbia: 1600 px al massimo,
   centrata, con 40 px di margine a sinistra e a destra. */
.contenitore,
.contenitore--stretto,
.header__interno,
.footer__interno {
  width: 100%;
  max-width: var(--larghezza-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--margine-laterale);
  padding-right: var(--margine-laterale);
}

.sezione {
  padding: var(--spazio-sezione) 0;
  scroll-margin-top: var(--altezza-header);
}

.sezione-scura {
  background: var(--nero);
  color: var(--bianco-caldo);
}
/* I link su fondo nero sono lilla, ma i pulsanti mantengono il testo nero */
.sezione-scura a:not(.btn) { color: var(--lilla); }

.sezione__titolo {
  font-size: clamp(1.6rem, 1.1rem + 2.3vw, 2.4rem);
  margin-bottom: 0.7em;
}
.sezione__titolo--centrato { text-align: center; }

/* Sopratitolo: Inter maiuscolo spaziato, come il ruolo nel logo.
   Nell'hero questa riga è l'H1 della pagina, ma tiene questa tipografia. */
.sopratitolo {
  font-family: var(--font-testi);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--lilla);
  margin: 0 0 1.4em;
}

/* Occhiello che introduce un elenco */
.occhiello {
  font-weight: 600;
  margin: 2em 0 0.8em;
}
.testo-grande {
  font-size: 1.1875rem;
  line-height: 1.65;
}

.testo-rilievo {
  font-weight: 500;
  border-left: 2px solid var(--nero);
  padding-left: 18px;
  margin: 2em 0 0;
}

/* --- Pulsanti --- */
.btn {
  display: inline-block;
  font-family: var(--font-testi);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--raggio);
  padding: 14px 24px;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.18s ease;
}
.btn--lilla {
  background: var(--lilla);
  color: var(--nero);
}
.btn--lilla:hover { background: #BFB0E6; }
.btn--lilla:active { transform: translateY(1px); }
.btn--grande { padding: 16px 30px; font-size: 1.0625rem; }

/* Pulsante senza fondo, per "Torna indietro" */
.btn--testo {
  background: none;
  color: var(--nero);
  text-decoration: underline;
  text-underline-offset: 4px;
  padding: 14px 4px;
}
.btn--testo:hover { color: var(--lilla-profondo); }

/* Collegamento di solo testo accanto a un pulsante.
   Su fondo nero è lilla; su fondo chiaro diventa lilla profondo. */
.collegamento-testo {
  font-family: var(--font-testi);
  font-size: 1.0625rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}
.collegamento-testo:hover { text-decoration-thickness: 2px; }
.sezione:not(.sezione-scura) .collegamento-testo { color: var(--lilla-profondo); }

.blocco-pulsante { margin-top: 2.6em; }
/* Solo il pulsante sotto la galleria dell'analisi: sta al centro, in asse con
   la galleria che ha sopra. Gli altri pulsanti della pagina restano allineati
   a sinistra come il testo. */
.blocco-pulsante--centrato { text-align: center; }

/* Nota sotto i pulsanti */
.nota-pulsante {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--chiaro-70);
  margin: 1.1em 0 0;
  max-width: 44ch;
}
.nota-pulsante--chiara { color: var(--nero-70); }

/* --- Divisore (le due linee del logo). Massimo due in tutta la pagina. --- */
.divisore {
  display: flex;
  justify-content: center;
  padding: 0 var(--margine-laterale);
}
.divisore img { width: 180px; height: auto; opacity: 0.85; }
/* Entrambi i divisori stanno su fondo chiaro, sopra un titolo di sezione.
   Il margine negativo recupera parte del padding della sezione: il simbolo
   sta stretto fra quello che lo precede e il titolo che lo segue. */
.divisore--nero {
  margin-top: calc(var(--spazio-sezione) * -0.5);
  margin-bottom: calc(var(--spazio-sezione) * 0.28);
}

/* Il divisore di "Chi sono" sta più in alto e più staccato dal titolo, chiesto da
   Maura ("mettilo più in alto in modo che ci sia più spazio sotto").
   I due valori sono scelti perché la **somma** resti quella di prima (-18 px
   contro -19): il simbolo sale di 40 px e ne guadagna altrettanti sotto, ma il
   titolo e tutto quello che segue restano dov'erano. */
#chi-sono .divisore--nero {
  margin-top: calc(var(--spazio-sezione) * -0.95);
  margin-bottom: calc(var(--spazio-sezione) * 0.75);
}

@media (min-width: 900px) {
  .divisore img { width: 240px; }
}

/* --- Lampadina disegnata a mano: separa il blocco salvia dal titolo
       dell'analisi. Sta al centro della pagina, non dentro la gabbia. --- */
.lampadina {
  /* Quanto è accesa, da 0 a 1. Lo aggiorna lo script (blocco 7) mentre si scorre.
     Il valore di partenza è 1: senza JavaScript la lampadina si vede comunque. */
  --accensione: 1;
  display: flex;
  justify-content: center;
  margin-bottom: calc(var(--spazio-sezione) * 0.6);
}
/* Il margine negativo recupera il padding della sezione:
   la lampadina sta più vicina al blocco salvia che la precede.
   Scorrendo la lampadina cresce: la scala segue --accensione. */
.lampadina__luce {
  position: relative;
  display: block;
  margin-top: calc(var(--spazio-sezione) * -1.1);
  transform: scale(calc(0.8 + 0.2 * var(--accensione)));
  transform-origin: 50% 70%;
}
.lampadina img {
  display: block;
  width: auto;
  height: 104px;
}
/* Le linee stanno in un file a parte, già gialle, e si sovrappongono
   esattamente al disegno nero: stessa tela, stessa altezza. */
.lampadina__raggi {
  position: absolute;
  top: 0;
  left: 0;
}
/* Finché lo script non è attivo le linee si vedono: senza JavaScript
   la lampadina resta quella di sempre, completa e ferma. */
.lampadina--pronta .lampadina__corpo { opacity: calc(0.35 + 0.65 * var(--accensione)); }
.lampadina--pronta .lampadina__raggi { opacity: 0; }

/* Quando la lampadina arriva in alto nello schermo le linee si accendono
   a intermittenza, come un neon che parte, e poi restano. */
.lampadina--accesa .lampadina__raggi {
  animation: raggi-accensione 1.1s ease-in-out forwards;
}

@keyframes raggi-accensione {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  18%  { opacity: 0.05; }
  30%  { opacity: 1; }
  38%  { opacity: 0.15; }
  52%  { opacity: 1; }
  62%  { opacity: 0.5; }
  100% { opacity: 1; }
}

@media (min-width: 900px) {
  .lampadina img { height: 128px; }
}

/* Chi preferisce meno movimento vede la lampadina già accesa e ferma */
@media (prefers-reduced-motion: reduce) {
  .lampadina { --accensione: 1 !important; }
  .lampadina__luce { transform: none; }
  .lampadina__raggi { opacity: 1; animation: none; }
}

/* --- Firma del brand, Poppins Medium corsivo (come da documento dei testi) --- */
.firma {
  font-family: var(--font-titoli);
  font-style: italic;
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.4;
  color: var(--lilla-profondo);
  margin: 1.8em 0 0;
}
.firma--footer {
  color: var(--lilla);
  margin: 1.4em 0 1.8em;
}


/* ==========================================================================
   5. HEADER E MENU
   ========================================================================== */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--nero);
  color: var(--bianco-caldo);
}

.header__interno {
  padding-top: 10px;
  padding-bottom: 10px;
  min-height: var(--altezza-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Nell'header c'è solo il simbolo, in verticale: la regola dei 64 px
   riguarda il logo completo, qui conta l'area di rispetto laterale. */
.header__logo { display: block; line-height: 0; }
.header__logo img {
  height: 56px;
  width: auto;
}

/* Pulsante hamburger: tre linee disegnate in CSS */
.header__hamburger {
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--bianco-caldo);
}
.header__hamburger-linee,
.header__hamburger-linee::before,
.header__hamburger-linee::after {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.header__hamburger-linee { top: 21px; }
.header__hamburger-linee::before { content: ''; top: -7px; left: 0; }
.header__hamburger-linee::after  { content: ''; top:  7px; left: 0; }

/* Hamburger trasformato in croce quando il menu è aperto */
.header__hamburger[aria-expanded="true"] .header__hamburger-linee { background: transparent; }
.header__hamburger[aria-expanded="true"] .header__hamburger-linee::before { transform: translateY(7px) rotate(45deg); }
.header__hamburger[aria-expanded="true"] .header__hamburger-linee::after  { transform: translateY(-7px) rotate(-45deg); }

/* Menu a scomparsa su mobile */
.menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--nero);
  border-top: 1px solid var(--chiaro-20);
  display: none;
}
.menu.menu--aperto { display: block; }

.menu__lista {
  list-style: none;
  margin: 0;
  padding: 8px var(--margine-laterale) 28px;
}

.menu__voce {
  display: block;
  padding: 14px 0;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--bianco-caldo);
  text-decoration: none;
  border-bottom: 1px solid var(--chiaro-20);
}
.menu__voce:hover { color: var(--lilla); }

.menu__cta { display: block; margin-top: 20px; }

/* Da tablet in su il menu è sempre visibile e l'hamburger sparisce */
@media (min-width: 900px) {
  .header__hamburger { display: none; }

  .menu {
    position: static;
    display: block;
    background: none;
    border: 0;
  }
  .menu__lista {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 0;
  }
  .menu__voce {
    padding: 6px 0;
    font-size: 0.9375rem;
    border-bottom: 0;
  }
  .menu__cta {
    margin-top: 0;
    padding: 12px 20px;
    font-size: 0.9375rem;
    color: var(--nero);
  }
  .menu__cta:hover { color: var(--nero); }
}


/* ==========================================================================
   6. HERO — fondo nero, titolo H1, foto a destra su desktop
   ========================================================================== */

/* L'hero resta agganciato e il blocco chiaro gli sale sopra mentre si scorre.
   Il punto di aggancio lo calcola lo script (blocco 6 di main.js): è 0 se
   l'hero ci sta nello schermo, negativo se è più alto e deve prima scorrere. */
.hero {
  position: sticky;
  top: var(--hero-aggancio, 0px);
  z-index: 0;
  padding-top: calc(var(--altezza-header) + 40px);
  padding-bottom: 0;
  scroll-margin-top: var(--altezza-header);
}

/* Tutto quello che viene dopo scorre sopra l'hero: deve stargli davanti e
   avere un fondo pieno, altrimenti si vedrebbe il nero in trasparenza. */
.hero ~ * {
  position: relative;
  z-index: 1;
}
/* L'ombra allunga il fondo di un pixel sopra e sotto: fra una sezione e l'altra
   le altezze cadono su frazioni di pixel e senza questo si aprirebbe una
   fessura sottile da cui si intravede l'hero nero. */
.hero ~ *:not(.sezione-scura) {
  background: var(--bianco-caldo);
  box-shadow: 0 -1px 0 0 var(--bianco-caldo), 0 1px 0 0 var(--bianco-caldo);
}

/* Chi preferisce meno movimento vede l'hero fermo, nel flusso normale */
@media (prefers-reduced-motion: reduce) {
  .hero { position: static; }
}

.hero__griglia { display: grid; gap: 40px; }

/* Non è un titolo per Google, ma ne ha la tipografia: è il sottotitolo dell'hero */
.hero__titolo {
  font-family: var(--font-titoli);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
  font-size: clamp(2rem, 1.2rem + 4.2vw, 3.5rem);
  margin: 0 0 0.5em;
}

/* Parola in evidenza dentro un titolo su fondo nero */
.evidenza-lilla { color: var(--lilla); }

.hero__paragrafo {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--chiaro-70);
  max-width: 54ch;
  margin-bottom: 2em;
}

/* Pulsante principale e collegamento di testo sulla stessa riga */
.hero__azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  margin: 0;
}

/* Su mobile la foto sta sotto il testo */
.hero__foto img {
  width: min(78vw, 420px);
  margin: 0 auto;
  border-radius: var(--raggio);
  filter: grayscale(1);              /* foto in bianco e nero */
}

@media (min-width: 900px) {
  .hero { padding-top: calc(var(--altezza-header) + 72px); }

  /* Su desktop la foto va a destra del testo, allineata al bordo della gabbia */
  .hero__griglia {
    grid-template-columns: 1.5fr 1fr;
    gap: 80px;
    align-items: center;
  }
  .hero__griglia img {
    width: 100%;
    height: auto;
    max-width: 600px;
    margin-left: auto;
    margin-right: 0;
  }
}


/* ==========================================================================
   7. TI RICONOSCI? — elenchi e blocco di chiusura su fondo salvia
   ========================================================================== */

.situazioni,
.elenco-voci,
.elenco-numerato,
.percorso {
  margin: 0;
  padding: 0;
}

.elenco-voci, .percorso { list-style: none; }

.elenco-voci li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 1.1em;
}
.elenco-voci li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 14px;
  height: 2px;
  background: var(--lilla-profondo);
}

/* Le tre situazioni: tre riquadri affiancati, ognuno aperto dal suo numero
   scritto a mano. Su schermo stretto si impilano. */
.situazioni {
  list-style: none;
  display: grid;
  gap: 36px;
  margin-top: 3.2em;
}
/* Il numero sta al centro della colonna, sopra il testo che resta allineato
   a sinistra. Alto quanto erano i contatori 01-02-03 che ha sostituito. */
.situazioni__numero {
  display: block;
  width: auto;
  height: 32px;
  margin: 0 auto 18px;
}

@media (min-width: 760px) {
  .situazioni { grid-template-columns: repeat(3, 1fr); gap: 56px; }
}

.elenco-numerato {
  list-style: none;
  counter-reset: voce;
}
.elenco-numerato li {
  counter-increment: voce;
  position: relative;
  padding-left: 32px;
  margin-bottom: 0.9em;
}
.elenco-numerato li::before {
  content: counter(voce) '.';
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 600;
  color: var(--lilla-profondo);
}

/* Blocco di approfondimento su fondo salvia.
   Non occupa tutta la gabbia: è centrato e più stretto del testo attorno. */
.blocco-salvia {
  background: var(--salvia);
  border-radius: var(--raggio);
  padding: 32px 24px;
  margin: 4.2em auto 0;
  max-width: 960px;
}
.blocco-salvia__chiusura {
  font-family: var(--font-titoli);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 1em 0 0;
}

@media (min-width: 760px) {
  .blocco-salvia { padding: 44px 44px; }
}


/* ==========================================================================
   8. L'ANALISI GRATUITA — i due elenchi affiancati, anteprima del documento
   ========================================================================== */

/* --- I due elenchi "Cosa analizzo" e "Cosa ricevi" ---
       Sotto i 900 px sono due blocchi uno sotto l'altro, nel flusso normale:
       qui tutte le classi dei pannelli non fanno niente.
       Da 900 px in su (e solo se lo schermo è alto abbastanza) diventano due
       pannelli affiancati: la vista si aggancia sotto l'header e la pista
       scorre da sinistra verso destra seguendo lo scorrimento della pagina.
       Lo spostamento lo governa --scorrimento, da 0 a 1, che arriva da
       js/main.js (blocco 8). Senza JavaScript vale 0 e si vede il primo
       pannello: per questo da 900 px in su la pista ha anche un ripiego. --- */
.pannelli {
  --scorrimento: 0;
  /* Lo stacco fra i due pannelli, in aggiunta ai margini della gabbia: fra i
     due riquadri restano --stacco-pannelli + 80 px. Tenerlo qui e non nei
     singoli valori perché la larghezza della pista e lo spostamento lo usano
     tutti e due e devono restare in accordo. */
  --stacco-pannelli: 140px;
}

/* Il riquadro che tiene insieme ogni elenco: fondo appena più scuro del bianco
   caldo (è il nero della palette al 5%, non un colore nuovo) e testo più grande
   del resto della pagina. Vale a ogni larghezza, anche su smartphone. */
.pannelli__box {
  background: rgba(20, 20, 20, 0.05);
  border-radius: var(--raggio);
  padding: 32px 26px;
  font-size: 1.1875rem;
  line-height: 1.6;
}
/* "Cosa analizzo" e "Cosa ricevi" stanno **fuori** dal riquadro, in alto, con il
   carattere più grande dell'occhiello che erano prima (era 1.25rem, 1.4375rem
   da 900 px). Chiesto da Maura.
   Sono allineati a sinistra, a filo del bordo del riquadro, come il testo di
   tutto il sito: li aveva chiesti centrati e poi li ha voluti a sinistra,
   "così è coerente con l'andamento di quei due blocchi". */
.pannelli__titolo {
  font-size: clamp(1.375rem, 1.1rem + 1.3vw, 1.75rem);
  margin: 0 0 20px;
}

/* La prima riga dentro il riquadro di "Cosa ricevi": non è più un occhiello in
   grassetto, è l'inizio del testo e introduce l'elenco. */
.pannelli__apertura {
  margin: 0 0 1.1em;
}
/* Lo stacco fra il paragrafo di apertura e il primo riquadro: chiesto da Maura
   guardando lo smartphone ("metti più spazio tra il testo e il box cosa
   guardo"). Il margine del paragrafo qui sopra si fonde con questo invece di
   sommarsi, quindi 56 è la distanza finale e non 19 + 56.
   Da 900 px in su, dove lo scorrimento è orizzontale, non serve. */
.pannelli {
  margin-top: 56px;
}

/* La freccia verso il basso indica il secondo riquadro quando sta sotto al primo.
   È la terza immagine della tavola "frecce-anteprima", ritagliata al riquadro
   585,29–697,231. Occupa lei tutto lo stacco fra i due riquadri, per questo i
   pannelli non hanno un margine fra loro su smartphone. */
.pannelli__freccia-giu {
  display: block;
  width: 40px;
  height: auto;
  margin: 32px auto;
}

/* La freccia verso destra indica lo scorrimento orizzontale: dove quello non c'è
   (smartphone, schermi bassi, prefers-reduced-motion) i due elenchi sono impilati
   e una freccia verso destra non indicherebbe niente, quindi sparisce. */
.pannelli__freccia {
  display: none;
}

@media (min-width: 620px) {
  .pannelli__box { padding: 44px 40px; }
}

@media (min-width: 900px) {
  .pannelli { margin-top: 0; }
  .pannelli__box {
    padding: 48px 44px;
    font-size: 1.3125rem;
  }
  .pannelli__titolo { margin-bottom: 26px; }
  /* La freccia in giù è solo per lo smartphone: da qui in su i riquadri sono
     affiancati, e sugli schermi bassi dove restano impilati c'è il margine.
     Il selettore è "~" e non "+" perché fra i due pannelli c'è la freccia. */
  .pannelli__freccia-giu { display: none; }
  .pannelli__pannello ~ .pannelli__pannello { margin-top: 28px; }
}

@media (min-width: 900px) and (min-height: 680px) and (prefers-reduced-motion: no-preference) {
  /* Lo spazio in più è quello che si "consuma" scorrendo in orizzontale:
     più è alto, più piano si sposta la pista a parità di rotella. */
  .pannelli {
    height: 300vh;
  }
  /* Il riquadro sta al centro della vista. Il tetto di 660 px serve sugli
     schermi molto alti: senza, il riquadro galleggerebbe in mezzo al bianco. */
  .pannelli__vista {
    position: sticky;
    top: var(--altezza-header);
    height: min(calc(100vh - var(--altezza-header)), 660px);
    /* Il taglio va qui, sull'elemento agganciato: se finisse sul genitore
       l'aggancio non funzionerebbe più. */
    overflow: hidden;
  }
  .pannelli__pannello ~ .pannelli__pannello {
    margin-top: 0;
  }
  /* Una griglia a colonne e non un flex: così i due pannelli stanno sulla stessa
     riga, la riga è alta quanto l'elenco più lungo e i due riquadri vengono alti
     uguali. "align-content: center" centra la riga nella vista. */
  /* La pista è larga due schermate più lo stacco; ogni colonna torna larga
     quanto la vista (50% della pista meno metà dello stacco) e lo spostamento
     di fine corsa è una colonna più lo stacco. Le tre misure vanno insieme:
     se se ne cambia una a mano il secondo pannello non arriva a filo. */
  .pannelli__pista {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc(50% - var(--stacco-pannelli) / 2);
    column-gap: var(--stacco-pannelli);
    align-content: center;
    height: 100%;
    width: calc(200% + var(--stacco-pannelli));
    transform: translateX(calc(var(--scorrimento) * -1 * (50% + var(--stacco-pannelli) / 2)));
  }
  /* Il riquadro deve scendere fino in fondo alla riga: senza passare l'altezza
     di padre in figlio resterebbe alto quanto il suo contenuto.
     Sopra al riquadro adesso c'è il titolo, quindi la colonna è una pila: il
     titolo prende lo spazio che gli serve e il riquadro si allunga per il
     resto ("flex: 1"). Con "height: 100%" sul riquadro, com'era prima, il
     riquadro uscirebbe in basso dell'altezza del titolo. */
  .pannelli__pannello,
  .pannelli__pannello > .contenitore {
    height: 100%;
  }
  .pannelli__pannello > .contenitore {
    display: flex;
    flex-direction: column;
  }
  .pannelli__box {
    flex: 1;
  }
  /* La freccia sta nello stacco fra i due riquadri: "left: 50%" della pista è
     esattamente il confine fra i due pannelli, cioè il centro dello spazio
     vuoto. È fuori dal flusso, così non diventa una terza colonna. */
  .pannelli__freccia {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 72px;
    height: auto;
    transform: translate(-50%, -50%);
  }
  /* Il secondo pannello arriva già da destra: non deve comparire anche
     da sinistra, altrimenti sono due movimenti sovrapposti.
     Anche qui serve "~" e non "+": fra i due pannelli c'è la freccia in giù. */
  .pannelli__pannello ~ .pannelli__pannello .comparsa {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* La galleria non occupa tutta la gabbia: a tutta larghezza le pagine del
   documento risultavano enormi. Sta dentro una colonna di 960 px centrata,
   la stessa misura del blocco salvia di "Ti riconosci". */
.anteprima {
  margin: 1.6em auto 0;
  max-width: 960px;
}
.anteprima figcaption {
  font-size: 0.8125rem;
  color: var(--nero-70);
  margin-top: 12px;
  text-align: center;
}

/* --- Galleria delle pagine del documento ---
       Una striscia che si scorre di lato, una pagina per volta.
       Senza JavaScript resta una striscia scorrevole con la barra di
       sistema: i comandi e i puntini arrivano solo con galleria--pronta,
       perché senza script non farebbero niente. --- */
.galleria {
  position: relative;
}

.galleria__pista {
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* la barra di scorrimento la sostituiscono i comandi */
  scrollbar-width: none;
}
.galleria__pista::-webkit-scrollbar {
  display: none;
}

.galleria__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
}
.galleria__slide img {
  width: 100%;
  border: 1px solid var(--nero-12);
  border-radius: var(--raggio);
}

/* --- Comandi avanti e indietro --- */
.galleria__comando {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--nero-12);
  border-radius: 50%;
  background: var(--bianco-caldo);
  color: var(--nero);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease;
}
/* Compaiono solo da 900 px in su: sulla pagina stretta i due cerchi finirebbero
   sopra al titolo della pagina mostrata, e lì la striscia si scorre già col dito. */
@media (min-width: 900px) {
  .galleria--pronta .galleria__comando {
    display: flex;
  }
}
.galleria__comando:hover {
  background: var(--lilla);
  border-color: var(--lilla);
}
.galleria__comando[disabled] {
  opacity: 0.3;
  cursor: default;
}
.galleria__comando[disabled]:hover {
  background: var(--bianco-caldo);
  border-color: var(--nero-12);
}
.galleria__comando--indietro { left: 12px; }
.galleria__comando--avanti { right: 12px; }

/* --- Puntini: uno per pagina, quello in corso è pieno --- */
.galleria__puntini {
  display: none;
  gap: 10px;
  justify-content: center;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.galleria--pronta .galleria__puntini {
  display: flex;
}
.galleria__puntino {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 1px solid var(--nero);
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.galleria__puntino[aria-current="true"] {
  background: var(--nero);
}

@media (min-width: 900px) {
  .galleria__comando { width: 56px; height: 56px; }
  .galleria__comando--indietro { left: 20px; }
  .galleria__comando--avanti { right: 20px; }
}

/* Chi ha chiesto meno movimento salta da una pagina all'altra senza scivolata */
@media (prefers-reduced-motion: reduce) {
  .galleria__pista { scroll-behavior: auto; }
}


/* ==========================================================================
   9. COME FUNZIONA — i quattro passaggi numerati
   ========================================================================== */

/* Titolo e pulsante sono centrati (`--centrato`), i passaggi no: numero di lato
   e testo allineato a sinistra, come in tutto il resto del sito.
   **Provato e scartato**: centrare anche i passaggi, cioè `#come-funziona
   { text-align: center }` con i numeri sopra al testo. Maura l'ha tolto:
   "tutto il resto deve tornare come prima". Non riproporlo.
   Quello che resta della richiesta è che **il blocco dei passaggi sta al centro
   della pagina** invece di partire dal bordo della gabbia: è l'unico blocco del
   sito trattato così. */
.passaggi {
  list-style: none;
  counter-reset: passo;
  /* Un po' di respiro fra il titolo e l'inizio della cascata, chiesto da Maura.
     Il margine **non si somma** a quello del titolo, si fonde con il suo: vale
     il più grande dei due. Quindi 60 px è la distanza finale, non 27 + 60. */
  margin: 60px auto 0;
  padding: 0;
  max-width: 1040px;
}

/* I numeri cadono **sotto la "f" di "funziona"** del titolo centrato, su
   richiesta di Maura ("più bordo a sinistra. i numeri devono essere in
   corrispondenza della f di funziona").
   Il conto non è a occhio. Da 900 px in su `.sezione__titolo` ha raggiunto il
   tetto del suo `clamp` (2.4rem) e sta su una riga sola: la "f" cade quindi
   sempre a **271 px** a sinistra del centro del titolo, a qualsiasi larghezza.
   Il blocco è centrato, quindi il suo centro coincide con quello del titolo:
   basta rientrare di metà blocco meno 271. `min(1040px, 100%)` è la larghezza
   vera del blocco — 1040 quando c'è spazio, la gabbia quando è più stretta —
   e tiene buono il conto a ogni misura di schermo.
   Sotto i 900 px il titolo va a capo e non c'è nessuna "f" con cui allinearsi:
   lì il rientro non si applica.
   **Se si cambia il testo del titolo o la misura di `.sezione__titolo`, la "f"
   si sposta e i 271 px vanno rifatti.**
   Lo stesso rientro è ripetuto a destra, per volere di Maura: il testo resta
   simmetrico rispetto al centro della pagina, come il titolo che ha sopra.
   Le righe quindi vanno a capo prima — messo in conto ("non fa niente se il
   testo va a capo"): non togliere il rientro destro per allungarle. */
@media (min-width: 900px) {
  .passaggi { padding: 0 calc(min(1040px, 100%) / 2 - 271px); }
}

.passaggio {
  counter-increment: passo;
  position: relative;
  padding: 0 0 28px 56px;
  /* La linea verticale collega un numero all'altro. Il cerchio la copre:
     per questo è spostato di metà della sua larghezza oltre il bordo. */
  border-left: 1px solid var(--nero-12);
  margin-left: 18px;
}
.passaggio:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

.passaggio::before {
  content: counter(passo);
  position: absolute;
  left: -18px;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--lilla);
  color: var(--nero);
  border-radius: 50%;
  font-family: var(--font-testi);
  font-size: 0.9375rem;
  font-weight: 600;
}

/* Testo più grande del resto della pagina, come nei riquadri dell'analisi:
   è una richiesta esplicita, non riportarlo alla misura comune.
   Su schermo stretto resta alla misura normale: ingrandito, nella colonna
   stretta i titoli andavano a capo a metà frase. */
.passaggio__titolo {
  font-size: 1.1875rem;
  margin: 0 0 0.4em;
}
.passaggio p {
  color: var(--nero-70);
  line-height: 1.6;
}

/* Il pulsante di questa sezione sta più staccato dall'ultimo passaggio degli
   altri della pagina: "metti più spazio prima della cta". */
#come-funziona .blocco-pulsante { margin-top: 4.4em; }

@media (min-width: 900px) {
  .passaggio { padding-bottom: 40px; }
  .passaggio__titolo { font-size: 1.5rem; }
  .passaggio p { font-size: 1.3125rem; }
}


/* ==========================================================================
   10. DOPO L'ANALISI — unico blocco nero con testo lilla della pagina
   ========================================================================== */

.blocco-evidenza {
  background: var(--nero);
  color: var(--lilla);
  border-radius: var(--raggio);
  padding: 36px 24px;
  margin-top: 3em;
}
.blocco-evidenza p {
  font-family: var(--font-titoli);
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  line-height: 1.4;
  font-weight: 500;
}

@media (min-width: 760px) {
  .blocco-evidenza { padding: 56px 48px; }
}


/* ==========================================================================
   11. CHI SONO — foto più grande, percorso, firma
   ========================================================================== */

.chi-sono__griglia { display: grid; gap: 40px; }

/* Questa foto è **a colori**, per volere di Maura ("metti solo questa immagine a
   colori. solo questa"): è l'unica della pagina. Quella dell'hero resta in bianco
   e nero, quindi qui non ci va nessun `filter: grayscale`. */
.chi-sono__foto img {
  width: min(86vw, 520px);
  margin: 0 auto;
  border-radius: var(--raggio);
}

.percorso li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 0.55em;
  color: var(--nero-70);
}
.percorso li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 8px;
  height: 2px;
  background: var(--lilla-profondo);
}
.percorso li:first-child { color: var(--nero); font-weight: 500; }

.percorso__formazione {
  margin-top: 1.4em;
  color: var(--nero-70);
}

@media (min-width: 900px) {
  .chi-sono__griglia {
    grid-template-columns: 460px 1fr;
    gap: 72px;
    align-items: start;
  }
  .chi-sono__foto { position: sticky; top: calc(var(--altezza-header) + 32px); }
  .chi-sono__foto img { width: 460px; }
}


/* ==========================================================================
   12. DOMANDE FREQUENTI — fisarmonica
   ========================================================================== */

.fisarmonica { border-top: 1px solid var(--nero-12); }

.fisarmonica__voce { border-bottom: 1px solid var(--nero-12); }

.fisarmonica__intestazione { margin: 0; font-family: inherit; }

.fisarmonica__domanda {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  background: none;
  border: 0;
  padding: 20px 0;
  font-family: var(--font-titoli);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--nero);
  text-align: left;
  cursor: pointer;
}
.fisarmonica__domanda:hover { color: var(--lilla-profondo); }

/* Segno + / − disegnato in CSS, nessuna icona esterna */
.fisarmonica__segno {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 4px;
}
.fisarmonica__segno::before,
.fisarmonica__segno::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.fisarmonica__segno::before { width: 16px; height: 2px; }
.fisarmonica__segno::after  { width: 2px; height: 16px; }
.fisarmonica__domanda[aria-expanded="true"] .fisarmonica__segno::after { transform: translate(-50%, -50%) scaleY(0); }

/* Le risposte occupano tutta la gabbia, come il resto della pagina: niente
   colonna stretta e **niente rientro a destra**, chiesto da Maura ("togli il bordo
   destro nel testo di risposta. deve essere più esteso"). Prima c'erano un
   `max-width: 62ch` sul paragrafo e un `padding-right: 60px` da 760 px in su:
   tolti tutti e due, non rimetterli. */
.fisarmonica__risposta { padding: 0 0 24px; }
.fisarmonica__risposta p { color: var(--nero-70); }

@media (min-width: 760px) {
  .fisarmonica__domanda { font-size: 1.1875rem; padding: 24px 0; }
}


/* ==========================================================================
   13. FORM A DUE PASSAGGI
   ========================================================================== */

.sezione--form { padding-bottom: calc(var(--spazio-sezione) + 20px); }

.modulo { margin-top: 2.6em; }

/* Campo trappola antispam: nascosto a schermo e alla tastiera */
.campo-trappola {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.modulo__avanzamento {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--nero-70);
  margin: 0 0 1.6em;
}

.modulo__passo {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.modulo__legenda {
  font-family: var(--font-titoli);
  font-size: 1.25rem;
  font-weight: 600;
  padding: 0;
  margin: 0 0 1.2em;
}

.campo { margin-bottom: 22px; }

.campo__etichetta {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 7px;
}
.campo__facoltativo { font-weight: 400; color: var(--nero-70); }

.campo__input {
  width: 100%;
  font-family: var(--font-testi);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--nero);
  background: #FFFFFF;
  border: 1px solid rgba(20, 20, 20, 0.28);
  border-radius: var(--raggio);
  padding: 13px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.campo__input::placeholder { color: rgba(20, 20, 20, 0.45); }
.campo__input:focus {
  border-color: var(--lilla-profondo);
  box-shadow: 0 0 0 3px rgba(94, 78, 146, 0.18);
  outline: none;
}
.campo__input--area { resize: vertical; min-height: 110px; }

/* Casella privacy */
.campo--casella {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 12px;
  align-items: start;
  margin: 28px 0 32px;
}
.campo__casella {
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  accent-color: var(--lilla-profondo);
  cursor: pointer;
}
.campo__etichetta--casella {
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
  cursor: pointer;
}
.campo--casella .campo__errore { grid-column: 1 / -1; }

/* Messaggi di errore */
.campo__errore {
  font-size: 0.875rem;
  font-weight: 500;
  color: #A3242A;
  margin: 7px 0 0;
}
.campo--errato .campo__input { border-color: #A3242A; }

.modulo__azioni { margin-top: 32px; }

/* Su schermo stretto i pulsanti principali occupano tutta la larghezza:
   sono più comodi da toccare con il pollice */
@media (max-width: 559px) {
  .modulo__azioni .btn--grande { display: block; width: 100%; }
}

.modulo__azioni--due {
  display: flex;
  flex-direction: column-reverse;
  align-items: stretch;
  gap: 8px;
}

@media (min-width: 560px) {
  .modulo__azioni--due {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
  }
}


/* ==========================================================================
   14. FOOTER
   ========================================================================== */

/* Davanti all'hero agganciato, come le sezioni di mezzo */
.footer {
  position: relative;
  z-index: 1;
  padding: var(--spazio-sezione) 0 48px;
}

.footer__interno { text-align: center; }

/* Il logo del footer resta sopra i 64 px di altezza */
.footer__logo {
  height: 72px;
  width: auto;
  margin: 0 auto;
}

.footer__riga {
  font-size: 0.9375rem;
  color: var(--chiaro-70);
  margin: 0 0 0.4em;
}
/* La PEC è l'ultima riga di testo del footer: tiene lo stacco dalle note legali.
   Su schermo stretto l'indirizzo è lungo, quindi può andare a capo. */
.footer__riga--pec {
  margin-bottom: 1.8em;
  overflow-wrap: anywhere;
}

.footer__legale {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 0.9375rem;
}
.footer__legale a { color: var(--bianco-caldo); }
.footer__legale a:hover { color: var(--lilla); }
.footer__legale span { color: var(--chiaro-20); }

.footer__linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-top: 24px;
  color: var(--bianco-caldo);
  border: 1px solid var(--chiaro-20);
  border-radius: 50%;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.footer__linkedin:hover { color: var(--lilla); border-color: var(--lilla); }


/* ==========================================================================
   15. PULSANTE FISSO SU MOBILE
   Resta in basso durante lo scorrimento e si nasconde quando a schermo c'è già
   un pulsante "Richiedi l'analisi gratuita", form compreso.
   La classe "cta-fissa--nascosta" viene aggiunta da js/main.js (blocco 4).
   ========================================================================== */

.cta-fissa {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 90;
  padding: 16px 20px;
  background: var(--lilla);
  color: var(--nero);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border-radius: var(--raggio);
  box-shadow: 0 6px 24px rgba(20, 20, 20, 0.18);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.cta-fissa--nascosta {
  opacity: 0;
  transform: translateY(140%);
  pointer-events: none;
}

/* Su desktop non serve: c'è già il pulsante nel menu */
@media (min-width: 900px) {
  .cta-fissa { display: none; }
}


/* ==========================================================================
   16. COMPARSA LEGGERA DELLE SEZIONI ALLO SCORRIMENTO
   La classe "visibile" viene aggiunta da js/main.js.
   ========================================================================== */

.comparsa {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.comparsa.visibile {
  opacity: 1;
  transform: none;
}

/* --- Le varianti, scelte nell'HTML con data-comparsa --- */

/* "dall'alto": scende dall'alto verso il basso, al contrario di quella di serie.
   La usano il titolo e il paragrafo dell'analisi (sezione 4). */
.comparsa--dall-alto {
  transform: translateY(-80px);
  transition: opacity 1s ease, transform 1.1s ease-out;
}
.comparsa--dall-alto.visibile {
  transform: none;
}

/* "da sinistra": entra di lato invece che dal basso */
.comparsa--da-sinistra {
  transform: translateX(-140px);
  transition: opacity 1.1s ease, transform 1.2s ease-out;
}
.comparsa--da-sinistra.visibile {
  transform: none;
}

/* "passaggio": i quattro passaggi di "Come funziona" arrivano uno dopo l'altro
   invece che tutti insieme. Ognuno ha il suo data-comparsa nell'HTML, così lo
   script li osserva singolarmente; il ritardo crescente fa il resto.
   Il ritardo resta attaccato all'elemento anche dopo, ma non dà fastidio: la
   comparsa avviene una volta sola e poi lo script smette di osservare. */
.comparsa--passaggio {
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease-out;
}
.passaggio.comparsa--passaggio:nth-child(2) { transition-delay: 0.14s; }
.passaggio.comparsa--passaggio:nth-child(3) { transition-delay: 0.28s; }
.passaggio.comparsa--passaggio:nth-child(4) { transition-delay: 0.42s; }

/* Chi preferisce meno movimento non vede né animazioni né scorrimento morbido */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .comparsa { opacity: 1; transform: none; filter: none; }
}


/* ==========================================================================
   17. PAGINE ACCESSORIE — grazie, privacy, cookie
   ========================================================================== */

/* Spazio sotto l'header fisso nelle pagine senza hero */
.pagina-interna {
  padding-top: calc(var(--altezza-header) + 56px);
  padding-bottom: var(--spazio-sezione);
  min-height: 60vh;
}

.pagina-interna__titolo {
  font-size: clamp(1.75rem, 1.2rem + 2.6vw, 2.75rem);
}

/* Testi legali: sottotitoli più piccoli di quelli della home ed elenchi
   semplici. Il testo resta largo quanto la gabbia come in tutto il sito. */
.testo-legale h2 {
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.5rem);
  margin-top: 1.9em;
}
.testo-legale ul {
  margin: 0 0 1.1em;
  padding-left: 1.3em;
}
.testo-legale li { margin-bottom: 0.5em; }
.testo-legale__data {
  margin-top: 2.4em;
  color: var(--nero-70);
  font-size: 0.9375rem;
}

/* Segnaposto ben visibile per i testi legali, da sostituire */
.segnaposto {
  background: var(--salvia);
  border: 2px dashed var(--nero);
  border-radius: var(--raggio);
  padding: 28px 24px;
  margin: 2.4em 0;
}
.segnaposto__etichetta {
  display: inline-block;
  background: var(--nero);
  color: var(--bianco-caldo);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 6px 12px;
  border-radius: 4px;
  margin-bottom: 1.2em;
}

/* Pagina di ringraziamento */
.grazie { text-align: center; }
.grazie .testo-grande { max-width: 46ch; margin-left: auto; margin-right: auto; }
.grazie .btn { margin-top: 2em; }