@charset "UTF-8";
/* gpgassistant.it - il foglio di stile del sito.
   La prima parte e' il CSS che stava in linea nella pagina iniziale,
   spostato qui senza cambiare una virgola: la home deve restare
   identica. Le variabili di :root sono la tavolozza di TUTTO il sito. */

  :root {
    --sfondo: #0d1117;
    --sfondo2: #141a22;
    --bordo: #222c38;
    --testo: #eef2f6;
    --tenue: #9aa7b4;
    --ambra: #f5a623;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--sfondo);
    color: var(--testo);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  .contenuto { width: 100%; max-width: 940px; margin: 0 auto; padding: 0 20px; }

  /* ---- intestazione ---- */
  header { padding: 0 0 8px; text-align: center; }
  .striscione {
    display: block; width: 100%; height: auto;
    border-bottom: 1px solid var(--bordo);
  }
  .figura {
    display: block; width: 100%; height: auto; margin: 0 0 28px;
    border: 1px solid var(--bordo); border-radius: 14px;
  }
  header .contenuto { padding-top: 40px; }
  h1 {
    margin: 0;
    font-size: clamp(1.9rem, 5.2vw, 2.7rem);
    line-height: 1.12; letter-spacing: -1px; font-weight: 800;
  }
  h1 span {
    display: block; margin-top: 8px;
    font-size: clamp(1rem, 2.6vw, 1.25rem); font-weight: 600;
    letter-spacing: -.2px; color: var(--ambra);
  }
  .occhiello strong { color: var(--testo); font-weight: 650; }
  .occhiello {
    margin: 20px auto 0; max-width: 640px;
    font-size: clamp(1.02rem, 2.4vw, 1.18rem); color: var(--tenue);
  }

  /* ---- pulsanti store ---- */
  .store { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 34px 0 10px; }
  .store a {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 22px; min-width: 216px;
    background: var(--sfondo2); border: 1px solid var(--bordo); border-radius: 12px;
    color: var(--testo); text-decoration: none; text-align: left;
    transition: border-color .15s, transform .15s;
  }
  .store a:hover { border-color: var(--ambra); transform: translateY(-1px); }
  .store .riga1 { display: block; font-size: .72rem; color: var(--tenue); }
  .store .riga2 { display: block; font-size: 1rem; font-weight: 600; }
  .gratis { text-align: center; color: var(--tenue); font-size: .85rem; margin: 0 0 8px; }

  /* ---- sezioni ---- */
  /* Vale solo per i blocchi della PAGINA INIZIALE, che sono figli diretti di
     <body>. Prima era scritta su "section" e basta, ed e' finita addosso alle
     lezioni del manuale (capitolo.php le avvolge in <section class="lezione">):
     56 di padding piu' 56 di margine facevano ~120 punti di vuoto fra una
     lezione e l'altra, e una riga orizzontale sopra la prima che nessuno aveva
     chiesto. Restringendola a "body > section" la home non cambia di un pixel
     - i suoi blocchi stanno tutti in fondo a <body> - e le lezioni, che stanno
     dentro <main>, tornano a spaziarsi con la loro regola (.lezione+.lezione). */
  body > section { padding: 56px 0; border-top: 1px solid var(--bordo); margin-top: 56px; }
  h2 {
    font-size: clamp(1.5rem, 4vw, 2rem); margin: 0 0 6px;
    letter-spacing: -.6px; font-weight: 750;
  }
  .sopra {
    font-size: .78rem; letter-spacing: 2.2px; text-transform: uppercase;
    color: var(--ambra); margin: 0 0 10px; font-weight: 600;
  }
  /* stesso motivo di sopra: e' il testo dei blocchi della pagina iniziale */
  body > section > .contenuto > p { color: var(--tenue); max-width: 680px; margin: 0 0 8px; }

  .griglia {
    display: grid; gap: 14px; margin-top: 28px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
  .scheda {
    background: var(--sfondo2); border: 1px solid var(--bordo);
    border-radius: 14px; padding: 20px 22px;
  }
  .scheda h3 { margin: 0 0 6px; font-size: 1.05rem; }
  .scheda p { margin: 0; color: var(--tenue); font-size: .95rem; }

  /* Le due schede che portano a /manuale/ e /news/ sono INTERE cliccabili:
     su un telefono un collegamento di due parole in fondo alla scheda si
     sbaglia, un rettangolo grande no. Colori e bordi restano quelli di
     .scheda, cambia solo il segnale che si puo' toccare. */
  .richiami a.scheda {
    display: block; color: var(--testo); text-decoration: none;
    transition: border-color .15s, transform .15s;
  }
  .richiami a.scheda:hover { border-color: var(--ambra); transform: translateY(-1px); }
  .richiami .vai {
    display: inline-block; margin-top: 12px;
    color: var(--ambra); font-size: .9rem; font-weight: 600;
  }
  .richiami .vai::after { content: " →"; }

  /* Stacchi che stavano scritti in linea nella pagina iniziale: spostati qui
     il 29/09/2026 perche' la Content-Security-Policy di nginx non ammette
     piu' gli attributi style="". Stessi valori di prima, nessun pixel mosso. */
  .futuro h2.secondo { margin-top: 52px; }
  .futuro p.chiusura { margin-top: 44px; }

  .futuro .scheda { border-style: dashed; }
  .quando {
    display: inline-block; margin-bottom: 10px; padding: 3px 10px;
    border: 1px solid var(--bordo); border-radius: 999px;
    font-size: .7rem; letter-spacing: 1.2px; text-transform: uppercase; color: var(--tenue);
  }

  blockquote {
    margin: 34px 0 0; padding: 22px 26px;
    border-left: 3px solid var(--ambra); background: var(--sfondo2);
    border-radius: 0 12px 12px 0; color: var(--testo); font-size: 1.05rem;
  }

  /* confronto fra come si lavora oggi e dove si puo' arrivare */
  .confronto { margin-top: 26px; border: 1px solid var(--bordo); border-radius: 14px; overflow: hidden; }
  .confronto .riga {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    gap: 10px; padding: 13px 18px; border-top: 1px solid var(--bordo);
    font-size: .95rem;
  }
  .confronto .riga:first-child { border-top: 0; }
  .confronto .prima { color: var(--tenue); }
  .confronto .freccia { color: var(--ambra); font-weight: 700; }
  .confronto .poi { font-weight: 600; }
  .confronto .intestazione {
    background: var(--sfondo2); color: var(--tenue);
    font-size: .72rem; letter-spacing: 1.8px; text-transform: uppercase;
  }
  .confronto .intestazione .poi { font-weight: 600; color: var(--ambra); }

  /* l'annuncio in fondo: si deve notare senza gridare */
  .annuncio {
    margin: 0 0 8px; padding: 34px 30px; text-align: center;
    background: var(--sfondo2); border: 1px solid var(--ambra); border-radius: 16px;
  }
  .annuncio .presto {
    display: inline-block; margin-bottom: 12px; padding: 5px 14px;
    border-radius: 999px; background: var(--ambra); color: #1a1205;
    font-size: .72rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 700;
  }
  .annuncio h2 { margin: 0 0 8px; }
  .annuncio p { color: var(--tenue); margin: 0 auto; max-width: 620px; }

  .recensione .stelle { margin: 0 0 6px; color: var(--ambra); letter-spacing: 3px; font-size: 1rem; }
  .recensione h3 { margin: 0 0 6px; }
  .recensione .fonte {
    margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--bordo);
    color: var(--tenue); font-size: .8rem; letter-spacing: 1.2px; text-transform: uppercase;
  }

  .nota {
    margin-top: 22px; padding: 14px 18px; border: 1px solid var(--bordo);
    border-radius: 12px; color: var(--tenue); font-size: .88rem;
  }
  @media (max-width: 620px) {
    .confronto .riga { grid-template-columns: 1fr; gap: 2px; padding: 12px 16px; }
    .confronto .freccia { display: none; }
    .confronto .intestazione { display: none; }
  }

  footer {
    border-top: 1px solid var(--bordo); margin-top: 56px;
    padding: 28px 0 40px; text-align: center; color: var(--tenue); font-size: .82rem;
  }
  footer a { color: var(--tenue); }
  @media (max-width: 480px) { .store a { min-width: 100%; } }

/* ================================================================= */
/* Da qui in giu': la PIATTAFORMA.                                   */
/* Tutto quello che sopra non serviva perche' c'era una pagina sola:  */
/* testata con menu, briciole, elenchi a schede, corpo di un articolo */
/* leggibile. La tavolozza resta una: i colori sono le variabili di   */
/* :root la' in cima, qui non se ne inventano di nuovi.               */
/* ================================================================= */

/* ---- testata con logo e menu (ogni pagina interna) ---- */
.testata {
  padding: 0;
  text-align: left;                  /* la home centra il suo header, qui no */
  border-bottom: 1px solid var(--bordo);
  background: var(--sfondo);
  position: sticky; top: 0; z-index: 10;
}
.testata-riga {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px 22px; padding-top: 12px; padding-bottom: 12px;
}
.marchio {
  display: flex; align-items: center; gap: 10px;
  color: var(--testo); text-decoration: none;
  font-weight: 750; letter-spacing: -.3px;
}
.marchio img { display: block; border-radius: 8px; }

/* Il menu deve stare nello schermo di un telefono: va a capo, non esce.
   Niente JavaScript e niente panino: le voci sono poche e corte. */
.menu { margin-left: auto; }
.menu ul {
  display: flex; flex-wrap: wrap; gap: 4px 6px;
  margin: 0; padding: 0; list-style: none;
}
.menu a {
  display: block; padding: 6px 11px; border-radius: 999px;
  color: var(--tenue); text-decoration: none; font-size: .92rem;
  border: 1px solid transparent;
}
.menu a:hover { color: var(--testo); border-color: var(--bordo); }
.menu a.attiva { color: var(--ambra); border-color: var(--bordo); background: var(--sfondo2); }
@media (max-width: 620px) {
  .testata { position: static; }     /* su telefono lo spazio in alto serve */
  .menu { margin-left: 0; width: 100%; }
  .menu a { font-size: .88rem; padding: 5px 10px; }
}

/* ---- il contenitore delle pagine interne ---- */
main.pagina { padding-top: 26px; padding-bottom: 20px; display: block; }
main.pagina h1 {
  font-size: clamp(1.6rem, 4.4vw, 2.2rem);
  line-height: 1.18; letter-spacing: -.7px; margin: 0 0 10px;
}
main.pagina > p.occhiello { margin-left: 0; margin-right: 0; }

/* ---- briciole di pane ---- */
.briciole { margin: 0 0 18px; font-size: .84rem; color: var(--tenue); }
.briciole ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  margin: 0; padding: 0; list-style: none;
}
.briciole li + li::before { content: "/"; margin-right: 8px; color: var(--bordo); }
.briciole a { color: var(--tenue); text-decoration: none; }
.briciole a:hover { color: var(--ambra); }
.briciole [aria-current] { color: var(--testo); }

/* ---- elenco a schede cliccabili (manuali, capitoli, corsi, news) ---- */
.elenco {
  display: grid; gap: 14px; margin: 24px 0 0;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  padding: 0; list-style: none;
}
.elenco > li { display: flex; }
.scheda-link {
  display: flex; flex-direction: column; width: 100%;
  background: var(--sfondo2); border: 1px solid var(--bordo);
  border-radius: 14px; padding: 18px 20px;
  color: var(--testo); text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.scheda-link:hover { border-color: var(--ambra); transform: translateY(-1px); }
.scheda-link h2, .scheda-link h3 { margin: 0 0 6px; font-size: 1.05rem; letter-spacing: -.2px; }
.scheda-link p { margin: 0; color: var(--tenue); font-size: .94rem; }
.scheda-link .numero {
  display: inline-block; margin-bottom: 8px;
  font-size: .72rem; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--ambra); font-weight: 600;
}
.etichetta {
  display: inline-block; margin-top: 10px; padding: 3px 10px;
  border: 1px solid var(--bordo); border-radius: 999px;
  font-size: .7rem; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--tenue);
}

/* ---- corpo di un articolo: si deve poter LEGGERE ---- */
/* 34em sono circa 70 caratteri: oltre, l'occhio perde la riga e tornando a
   capo la sbaglia. La misura del testo e' un filo piu' grande del resto
   perche' queste pagine si leggono per venti minuti, non per venti secondi. */
.articolo { max-width: 34em; font-size: 1.06rem; line-height: 1.72; }
.articolo > * { max-width: 100%; }
.articolo h2 {
  margin: 2em 0 .5em; font-size: 1.35rem; letter-spacing: -.4px;
  line-height: 1.25;
}
.articolo h3 { margin: 1.7em 0 .4em; font-size: 1.1rem; }
.articolo p { margin: 0 0 1.05em; }
.articolo ul, .articolo ol { margin: 0 0 1.05em; padding-left: 1.3em; }
.articolo li { margin-bottom: .35em; }
.articolo a { color: var(--ambra); }
.articolo strong { font-weight: 650; }
.articolo blockquote { font-size: 1rem; }
.articolo hr { border: 0; border-top: 1px solid var(--bordo); margin: 2em 0; }
.articolo img { max-width: 100%; height: auto; border-radius: 12px; }
.lezione + .lezione { margin-top: 2.2em; padding-top: 1.6em; border-top: 1px solid var(--bordo); }

/* ---- navigazione avanti/indietro fra capitoli ---- */
.sfoglia {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--bordo);
}
.sfoglia a {
  color: var(--testo); text-decoration: none; font-size: .95rem;
  padding: 10px 16px; border: 1px solid var(--bordo); border-radius: 10px;
  background: var(--sfondo2);
}
.sfoglia a:hover { border-color: var(--ambra); }

/* ---- quando non c'e' niente da mostrare (JSON mancante o rotto) ---- */
.vuoto {
  margin: 24px 0; padding: 18px 20px;
  border: 1px dashed var(--bordo); border-radius: 12px;
  color: var(--tenue); font-size: .92rem;
}

/* ================================================================
   Testi lunghi: indice interno, ancore, sfoglia.
   Spostate qui dal manuale il 29/09/2026: servono a qualunque sezione
   fatta di pagine lunghe da leggere (manuale oggi, corsi domani), e
   tenerle in una pagina sola voleva dire riscriverle alla successiva.
   ================================================================ */
/* Indice delle lezioni in cima al capitolo. Sul telefono un capitolo e' lungo
   anche trenta schermate: senza un modo per saltare al punto giusto si scrolla
   alla cieca, e chi legge in servizio non ha tempo. */
.indice-lezioni {
  margin: 22px 0 8px; padding: 16px 20px;
  background: var(--sfondo2); border: 1px solid var(--bordo); border-radius: 14px;
}
.indice-lezioni > p {
  margin: 0 0 10px; font-size: .72rem; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--ambra); font-weight: 600;
}
.indice-lezioni ol { margin: 0; padding-left: 1.3em; }
/* tocchi alti: si usa col pollice, spesso con i guanti */
.indice-lezioni li { margin: 0; line-height: 1.5; padding: 5px 0; }
.indice-lezioni a { color: var(--testo); text-decoration: none; }
.indice-lezioni a:hover { color: var(--ambra); }

/* La testata e' appiccicata in alto (position: sticky): senza questo, saltando
   a un'ancora il titolo della lezione finisce NASCOSTO sotto la testata. */
.articolo h2[id] { scroll-margin-top: 80px; }

/* Nei tasti avanti/indietro la riga piccola dice DOVE porta: sul telefono due
   titoli nudi uno accanto all'altro non si capisce quale sia il precedente. */
.sfoglia a { display: block; max-width: 100%; }
.sfoglia small {
  display: block; color: var(--tenue); font-size: .74rem;
  letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 2px;
}

/* ================================================================
   Numeri di pagina di un elenco lungo.
   Aggiunta il 29/09/2026 per /news/ (66 notizie, sei pagine), ma
   scritta per qualunque elenco che cresce: domani i corsi e i quiz.
   ================================================================ */
/* I numeri sono tutti scritti, non solo avanti/indietro: sei pagine si
   attraversano con un tocco invece di cinque, e chi cerca le news di luglio
   sa dove andare. I tocchi sono larghi 40px perche' si usa col pollice, spesso
   con i guanti. */
.pagine {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--bordo);
}
.pagine a, .pagine span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px; padding: 0 12px;
  border: 1px solid var(--bordo); border-radius: 10px;
  background: var(--sfondo2); color: var(--testo);
  text-decoration: none; font-size: .95rem;
}
.pagine a:hover { border-color: var(--ambra); }
/* La pagina in cui ci si trova non e' un collegamento: si vede che e' ferma. */
.pagine [aria-current] {
  border-color: var(--ambra); color: var(--ambra); font-weight: 600;
  background: transparent;
}

/* ================================================================
   Guida "Inizia da qui".
   Aggiunta il 29/09/2026 per /guida/, ma scritta per qualunque
   sezione fatta di passi in ordine: una procedura numerata con una
   schermata a fianco e' esattamente cio' che servira' domani ai
   corsi e alle schede di servizio.
   ================================================================ */
/* Il gruppo di un livello (Per partire / Ogni giorno / Quando sei a tuo agio).
   Serve una riga di stacco fra un livello e l'altro: senza, sedici schede di
   fila si leggono come un elenco unico e si perde proprio l'unica cosa che la
   guida vuole dire, cioe' che si fanno in quest'ordine. */
.livello { margin-top: 44px; }
.livello:first-of-type { margin-top: 28px; }
.livello > h2 {
  margin: 0 0 6px; font-size: 1.3rem; letter-spacing: -.4px;
}
.livello > p { margin: 0 0 4px; color: var(--tenue); max-width: 46em; }
/* l'etichetta col conteggio e' un blocco per conto suo, non in fila al testo */
.livello > p.etichetta { margin-top: 10px; }

/* I passaggi numerati. I numeri sono il contenuto, non decorazione: "prima
   questo, poi quello". Tocchi alti perche' si legge dal telefono mentre si
   tocca l'app con l'altra mano. */
.articolo ol.istruzioni { margin: 0 0 1.4em; padding-left: 1.4em; }
.articolo ol.istruzioni > li { margin-bottom: .8em; }

/* Lo screenshot annotato dell'app.
   Largo al massimo 360px: e' l'immagine di un telefono, e stirata a tutta
   colonna diventa sgranata invece che piu' leggibile. */
.schermata { margin: 1.6em 0; padding: 0; }
.schermata img {
  display: block; width: 100%; max-width: 360px; height: auto;
  border: 1px solid var(--bordo); border-radius: 12px; background: var(--sfondo2);
}
.schermata figcaption {
  margin-top: 8px; color: var(--tenue); font-size: .84rem; max-width: 360px;
}

/* =================================================================
   VITA - effetti grafici. 11/10/2026.

   Niente di quello che c'e' sopra cambia: contenuti, colori, misure e
   impaginazione restano quelli di prima. Qui sotto si aggiunge solo il
   MOVIMENTO: cose che compaiono mentre si scorre, schede che reagiscono
   al passaggio del mouse, bagliori appena accennati, transizioni morbide.

   Tre regole che valgono per tutto questo blocco:

   1) Deve restare PROFESSIONALE. Chi legge e' una guardia giurata che
      lavora di notte. Niente lampi, niente colori nuovi: la tavolozza e'
      sempre quella delle variabili di :root, l'ambra e' l'unico accento.
   2) Niente deve MUOVERE la pagina. Solo opacita', ombre e spostamenti di
      pochi pixel in verticale: nessun effetto che allarghi un elemento
      oltre la sua colonna, altrimenti su un telefono compare la barra di
      scorrimento orizzontale.
   3) Chi ha chiesto al proprio dispositivo di non animare le cose non
      deve vedere niente muoversi. In fondo al file c'e' il blocco
      @media (prefers-reduced-motion: reduce) che spegne TUTTO: non e' un
      vezzo, le animazioni a qualcuno fanno venire il mal di testa.

   Lo stato "non ancora comparso" degli effetti allo scorrimento e'
   scritto tutto sotto "html.js-anima": quella classe la mette il poco
   JavaScript dentro inc/layout.php. Senza JavaScript - o se lo script
   viene bloccato - la classe non c'e', queste regole non si applicano e
   la pagina si vede INTERA come sempre. E' il motivo per cui e' scritta
   al rovescio: un "compare mentre scorri" fatto al contrario lascia la
   pagina bianca a chi ha JavaScript spento.
   ================================================================= */

:root {
  /* una curva sola per tutto il sito: parte deciso e si posa piano */
  --morbida: cubic-bezier(.22, .61, .36, 1);
  --velo-ambra: rgba(245, 166, 35, .30);
  --alone: 0 14px 34px -18px rgba(0, 0, 0, .85);
}

/* ---- l'ambiente: un alone freddissimo dietro la testata ----
   Serve a dare profondita' alla parte alta della pagina, che oggi e' un
   rettangolo piatto. E' fisso, non si puo' toccare e sta DIETRO a tutto
   (z-index negativo): non intercetta i tocchi e non crea barre. */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 50%;
  width: 150vw; height: 70vh;
  max-width: none;
  transform: translateX(-50%);
  background:
    radial-gradient(60% 55% at 50% 0%, rgba(245, 166, 35, .055), transparent 70%),
    radial-gradient(90% 60% at 50% 0%, rgba(70, 120, 180, .05), transparent 72%);
  pointer-events: none;
  z-index: -1;
}

/* ---- il filo che dice quanto hai letto ----
   Due punti d'altezza in cima alla finestra. Serve davvero: una lezione
   del manuale e' lunga trenta schermate e dal telefono non si capisce
   quanto manca. Senza JavaScript --letto resta 0, la barra ha larghezza
   zero e non si vede: non e' un buco, e' un filo che non c'e'. */
.avanzamento {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 2px;
  transform: scaleX(var(--letto, 0));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--ambra), #ffd98a);
  box-shadow: 0 0 10px rgba(245, 166, 35, .45);
  z-index: 30;
  pointer-events: none;
}

/* ---- la testata: vetro invece di tinta piatta ----
   Lo sfondo e' lo stesso colore di prima, solo un filo trasparente e con
   la sfocatura dietro: il contenuto che le passa sotto si intravede e la
   pagina smette di sembrare due rettangoli sovrapposti. Dentro @supports
   perche' dove la sfocatura non c'e' si tiene la tinta piena di prima. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .testata {
    background: rgba(13, 17, 23, .72);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
  }
  /* su telefono la testata non e' appiccicata (vedi la regola sopra):
     trasparente sopra il contenuto che scorre non avrebbe senso */
  @media (max-width: 620px) {
    .testata { background: var(--sfondo); }
  }
}
.testata {
  transition: box-shadow .35s var(--morbida), border-color .35s var(--morbida);
}
/* la classe la mette il JavaScript quando la pagina non e' piu' in cima:
   la testata si "stacca" dal contenuto con un'ombra e un filo d'ambra */
.testata.scorsa {
  box-shadow: 0 10px 30px -16px rgba(0, 0, 0, .95);
  border-bottom-color: rgba(245, 166, 35, .26);
}

/* il marchio: il logo si scalda appena al passaggio */
.marchio img { transition: transform .3s var(--morbida), box-shadow .3s var(--morbida); }
.marchio:hover img {
  transform: scale(1.06);
  box-shadow: 0 0 14px rgba(245, 166, 35, .35);
}

/* le voci di menu: il cambio di colore non deve scattare */
.menu a { transition: color .22s, border-color .22s, background-color .22s; }
.menu a.attiva { box-shadow: inset 0 0 0 1px rgba(245, 166, 35, .12); }

/* ---- il sopratitolo: un filo d'ambra che si allunga ----
   E' la riga maiuscola ("OGGI", "DOVE STIAMO ANDANDO"). Il trattino cresce
   quando il blocco compare; senza JavaScript e' gia' lungo. */
.sopra::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 56px; height: 1px;
  margin: 0 0 2px 12px;
  background: linear-gradient(90deg, var(--ambra), transparent);
}

/* ---- le schede ----
   Il bordo e lo spostamento erano gia' qui per quelle cliccabili. Si
   aggiunge l'ombra (profondita') e un filo di luce che si apre sul bordo
   di sopra: e' il segnale che la scheda e' "accesa", e costa un
   pseudo-elemento. position: relative serve al filo, non sposta niente. */
.scheda, .scheda-link {
  position: relative;
  transition: border-color .28s var(--morbida), transform .28s var(--morbida),
              box-shadow .28s var(--morbida), background-color .28s var(--morbida);
}
.scheda::after, .scheda-link::after {
  content: "";
  position: absolute;
  top: -1px; left: 50%;
  width: 0; height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--ambra), transparent);
  transition: width .45s var(--morbida);
  pointer-events: none;
}
.scheda:hover::after, .scheda-link:hover::after,
.scheda-link:focus-visible::after { width: 78%; }

/* le schede che NON sono collegamenti: reagiscono, ma senza promettere
   che portino da qualche parte (niente bordo ambra, solo rilievo) */
.scheda:hover {
  transform: translateY(-2px);
  box-shadow: var(--alone);
  border-color: #2e3b49;
}
/* quelle cliccabili tengono il loro bordo ambra e guadagnano l'alone */
.richiami a.scheda:hover, .scheda-link:hover, .scheda-link:focus-visible {
  box-shadow: var(--alone), 0 0 0 1px rgba(245, 166, 35, .14);
  transform: translateY(-2px);
}
/* la freccia del "Apri il manuale" accompagna il mouse */
.richiami .vai { transition: transform .28s var(--morbida); }
.richiami a.scheda:hover .vai { transform: translateX(4px); }

/* l'etichetta e il numero dentro le schede: si accendono con la scheda */
.scheda-link .numero, .scheda-link .etichetta { transition: color .28s, border-color .28s; }
.scheda-link:hover .etichetta { border-color: var(--velo-ambra); }

/* ---- i pulsanti dello store: un riflesso che passa ----
   Il lampo e' una banda chiarissima (6% di bianco) che attraversa il
   pulsante una volta sola al passaggio del mouse. overflow: hidden la
   tiene dentro il bordo arrotondato: non esce e non allarga niente. */
.store a { position: relative; overflow: hidden; }
.store a::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .07), transparent);
  transform: skewX(-18deg);
  transition: left .6s var(--morbida);
  pointer-events: none;
}
.store a:hover::after, .store a:focus-visible::after { left: 115%; }
.store a:hover, .store a:focus-visible {
  box-shadow: var(--alone), 0 0 0 1px rgba(245, 166, 35, .16);
  transform: translateY(-2px);
}
.store a svg { transition: transform .3s var(--morbida); }
.store a:hover svg { transform: scale(1.08); }

/* ---- la citazione: il bordo di sinistra diventa una lama di luce ---- */
blockquote {
  position: relative;
  box-shadow: -1px 0 18px -6px rgba(245, 166, 35, .22);
}

/* ---- il confronto oggi/domani: la riga si accende, la freccia parte ---- */
.confronto .riga { transition: background-color .25s, color .25s; }
.confronto .riga:not(.intestazione):hover { background: rgba(245, 166, 35, .045); }
.confronto .freccia { transition: transform .28s var(--morbida); }
.confronto .riga:hover .freccia { transform: translateX(4px); }

/* ---- l'annuncio in fondo: respira ----
   Un alone d'ambra che va e viene in sei secondi. Lento di proposito:
   deve farsi notare a chi arriva in fondo alla pagina, non lampeggiare.

   L'alone sta su un pseudo-elemento e quello che si muove e' la sua
   OPACITA', non l'ombra. Un'ombra che cambia va ridisegnata a ogni
   fotogramma, per sempre, anche quando l'annuncio e' fuori schermo: su un
   telefono di cinque anni fa e' batteria buttata. L'opacita' invece la
   gestisce la scheda grafica e non costa quasi niente. */
.annuncio { position: relative; }
.annuncio::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 16px;
  box-shadow: 0 0 34px -10px rgba(245, 166, 35, .34);
  opacity: 0;
  animation: respiro 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes respiro {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}
.annuncio .presto { box-shadow: 0 0 20px -6px rgba(245, 166, 35, .55); }

/* ---- le stelle delle recensioni: un filo di luce calda ---- */
.recensione .stelle { text-shadow: 0 0 14px rgba(245, 166, 35, .35); }

/* ---- avanti/indietro e numeri di pagina: stesso rilievo delle schede ---- */
.sfoglia a, .pagine a {
  transition: border-color .25s, transform .25s var(--morbida), box-shadow .25s;
}
.sfoglia a:hover, .pagine a:hover {
  transform: translateY(-2px);
  box-shadow: var(--alone);
}

/* ---- l'indice delle lezioni: la voce si sposta di un soffio ---- */
.indice-lezioni a { transition: color .2s; }
.indice-lezioni li { transition: transform .22s var(--morbida); }
.indice-lezioni li:hover { transform: translateX(3px); }

/* ---- i collegamenti dentro un articolo: sottolineatura che cresce ---- */
.articolo p > a, .articolo li > a {
  text-decoration-color: var(--velo-ambra);
  text-underline-offset: 3px;
  transition: text-decoration-color .25s;
}
.articolo p > a:hover, .articolo li > a:hover { text-decoration-color: var(--ambra); }

/* ---- il contorno di chi naviga da tastiera ----
   Non e' un effetto: e' che adesso ci sono stati di passaggio del mouse
   su mezzo sito, e chi va col tasto di tabulazione deve vedere dov'e'. */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--ambra);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- i numeri che salgono ----
   Il valore e' scritto nella pagina, il JavaScript lo fa solo partire da
   zero. tabular-nums tiene la larghezza delle cifre uguale, altrimenti
   mentre sale il testo accanto balla. */
.conta { font-variant-numeric: tabular-nums; }

/* =================================================================
   COMPARE MENTRE SCORRI.
   Da qui in giu' tutto e' sotto "html.js-anima": senza quella classe -
   JavaScript spento o bloccato - nessuna di queste regole esiste e la
   pagina e' quella di sempre, tutta visibile.
   ================================================================= */

html.js-anima body > section > .contenuto > *:not(.griglia):not(.confronto),
html.js-anima .griglia > *,
html.js-anima .confronto > .riga,
html.js-anima .elenco > li {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--morbida), transform .6s var(--morbida);
}
/* Lo stesso elenco di selettori, con .vista in fondo: scritto dopo, a
   pari specificita' vince. Il JavaScript aggiunge .vista quando l'elemento
   entra nello schermo, e poi smette di guardarlo.
   ATTENZIONE ai :not(): contano nella specificita' come una classe ciascuno.
   Vanno RICOPIATI qui sotto, se no la riga che nasconde pesa di piu' di
   quella che mostra e l'elemento resta invisibile anche con .vista addosso
   - preso in faccia l' 11/10/2026: le schede comparivano, i titoli no. */
html.js-anima body > section > .contenuto > .vista:not(.griglia):not(.confronto),
html.js-anima .griglia > .vista,
html.js-anima .confronto > .riga.vista,
html.js-anima .elenco > li.vista {
  opacity: 1;
  transform: none;
}

/* Nelle griglie le schede di una stessa riga entrano tutte insieme: senza
   un ritardo comparirebbero in blocco. Tre gradini da 70 millesimi fanno
   una cascata da sinistra a destra. Su una colonna sola (telefono) il
   ritardo si sente appena e va bene cosi'. */
html.js-anima .griglia > :nth-child(3n+2),
html.js-anima .elenco > li:nth-child(3n+2) { transition-delay: .07s; }
html.js-anima .griglia > :nth-child(3n),
html.js-anima .elenco > li:nth-child(3n) { transition-delay: .14s; }

/* Il filo d'ambra del sopratitolo parte corto e si allunga quando il
   blocco compare. Fuori da js-anima e' sempre lungo. */
html.js-anima .sopra::after {
  width: 0;
  transition: width .9s var(--morbida) .2s;
}
html.js-anima .sopra.vista::after { width: 56px; }

/* =================================================================
   CHI NON VUOLE ANIMAZIONI.
   Un solo interruttore, e spegne tutto: comparse, riflessi, respiro
   dell'annuncio, scorrimento morbido. Resta il colore e resta il
   contenuto, che e' l'unica cosa che conta davvero.
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
  .annuncio::before { animation: none !important; opacity: 0 !important; }
  .avanzamento { display: none !important; }
  body::before { display: none !important; }
  /* niente si sposta: ne' al passaggio del mouse ne' comparendo */
  .scheda:hover, .scheda-link:hover, .store a:hover, .sfoglia a:hover,
  .pagine a:hover, .richiami a.scheda:hover, .indice-lezioni li:hover,
  .marchio:hover img, .confronto .riga:hover .freccia,
  .richiami a.scheda:hover .vai, .store a:hover svg { transform: none !important; }
  /* e soprattutto: tutto quello che "compare" e' gia' comparso */
  html.js-anima body > section > .contenuto > *,
  html.js-anima .griglia > *,
  html.js-anima .confronto > .riga,
  html.js-anima .elenco > li { opacity: 1 !important; transform: none !important; }
  html.js-anima .sopra::after { width: 56px !important; }
}