/* Capitall — CSS di base. Usa SOLO variabili definite in tokens.css, mai valori fissi. */

* {
  box-sizing: border-box;
}

/* Il sito ha un tema chiaro e uno scuro, scelti in automatico dal
   dispositivo (vedi tokens.css): così anche barre di scorrimento e
   controlli del browser seguono il tema giusto */
html {
  color-scheme: light dark;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  /* Spazio per l'header flottante, che è fuori dal flusso normale (position: fixed) */
  padding-top: var(--header-offset);
}

/* In home lo spazio per l'header lo crea la scheda di apertura stessa
   (vedi .hero-blocco), che così parte dal bordo alto della pagina e passa
   dietro l'header, come nell'ispirazione */
.pagina-home,
.pagina-home main {
  padding-top: 0;
}

/* In home sono le sezioni a dare lo spazio sotto l'ultimo contenuto */
.pagina-home main {
  padding-bottom: 0;
}

/* Testo presente per chi usa uno screen reader, invisibile a schermo */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.container {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

@media (min-width: 768px) {
  .container {
    padding: 0 var(--space-6);
  }
}

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

a {
  color: var(--color-link);
}

main a {
  text-decoration: underline;
}

:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: 2px;
}

/* Link "Salta al contenuto": invisibile finché non riceve il focus da tastiera */
.skip-link {
  position: absolute;
  top: -3rem;
  left: var(--space-4);
  background: var(--color-surface);
  color: var(--color-text-primary);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  z-index: 200;
  text-decoration: none;
}

.skip-link:focus-visible {
  top: var(--space-2);
}

/* Barra in alto: una sola pillola centrata, con dentro il logo e il menu
   (logo dentro la pillola dal 30 ottobre 2026, su richiesta di Luca). */
.site-header {
  position: fixed;
  top: var(--space-4);
  left: var(--space-4);
  right: var(--space-4);
  z-index: 100;
  display: flex;
  justify-content: center;
}

/* Logo ufficiale (icona + scritta "Capitall"), file originale non
   modificato: stessi pixel, solo ridimensionato per il web (come già
   fatto altrove nel sito) e "inquadrato" via CSS (object-fit) per
   togliere il grande margine vuoto del file originale — l'inquadratura
   è solo nella visualizzazione, il file resta intatto.
   Sta dentro la pillola, a sinistra del menu (Luca, 30 ottobre 2026):
   prima ridotto del 10% rispetto a quando era fuori, poi di un altro 30%.
   Oggi 35,3px dai 768px in su (in origine 56px), 20,2px sotto (in origine
   32px), stesse proporzioni. Il menu accanto
   scorre in orizzontale se non c'è spazio per tutte le voci.
   Non si può usare "align-self: stretch" al posto di un valore fisso:
   combinato con "aspect-ratio" crea un ciclo nella griglia CSS (l'altezza
   dipende dalla riga, la riga dipende dall'altezza) che in pratica
   gonfiava il logo a oltre 150px invece di seguire la pillola. */
.site-logo {
  display: flex;
  align-items: center;
  flex: none;
  margin-inline-start: var(--space-2);
  /* Zona da toccare più alta del logo (almeno 24px, WCAG 2.2): 0,5rem in
     più sopra e sotto, compensati dal margine negativo, così la pillola
     non cambia altezza */
  padding-block: 0.5rem;
  margin-block: -0.5rem;
}

.site-logo picture {
  /* Altezza e larghezza scritte entrambe (proporzioni 1526:345 del logo
     inquadrato): con la sola "aspect-ratio" Safari calcolava la larghezza
     dal file intero (680px) e spingeva il pulsante «Menu» fuori dallo
     schermo dell'iPhone */
  --altezza-logo: 1.26rem;
  display: block;
  height: var(--altezza-logo);
  width: calc(var(--altezza-logo) * 1526 / 345);
  overflow: hidden;
}

@media (min-width: 768px) {
  .site-logo picture {
    --altezza-logo: 2.205rem;
  }
}

.site-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Pillola "vetro smerigliato" del menu, centrata (colonna centrale della
   griglia sopra) */
.site-header__pill {
  display: flex;
  align-items: center;
  background: var(--color-glass-bg);
  border: 1px solid var(--color-glass-border);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-float);
  padding: var(--space-2);
  gap: var(--space-3);
  /* Come per il menu sotto: senza questo, la pillola non si restringe mai
     sotto la larghezza del suo contenuto nella colonna "auto" della
     griglia, e uscirebbe dai bordi su schermi stretti. */
  min-width: 0;
  max-width: 100%;
}

/* Menu nella pillola (Home, Scopri l'app, Beneficenza puntano a sezioni
   della home; Supporto è l'unica voce che porta a un'altra pagina).
   position: relative perché l'indicatore scorrevole si posiziona dentro. */
.site-header__nav {
  position: relative;
  /* Il menu ha l'attributo popover (si apre col pulsante «Menu» su
     telefono): qui si tolgono gli stili che il browser dà ai popover, così
     su computer resta un normale menu nella pillola */
  inset: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  overflow-x: auto;
  scrollbar-width: none;
  min-width: 0;
}

.site-header__nav::-webkit-scrollbar {
  display: none;
}

/* Indicatore scorrevole: un'unica pillola colorata che lo script in
   nav.js sposta sopra la voce attiva. Senza JavaScript resta nascosto
   (attributo "hidden" nell'HTML) e la pagina corrente si riconosce
   comunque dal colore del testo, vedi sotto. */
.site-header__nav-indicator {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--color-primary-strong);
  border-radius: var(--radius-pill);
  z-index: 0;
  pointer-events: none;
  transition:
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-header__nav a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
}

.site-header__nav a:hover {
  color: var(--color-text-primary);
}

/* Pagina/sezione corrente: il testo diventa chiaro. Funziona anche senza
   JavaScript; con JavaScript attivo, sopra compare anche la pillola
   scorrevole (vedi .site-header__nav-indicator), colorata in
   primary-strong e non primary puro — solo primary-strong garantisce
   4,5:1 di contrasto col testo chiaro sopra, stessa regola dei pulsanti,
   vedi DESIGN.md. */
.site-header__nav a[aria-current="page"] {
  color: var(--color-text-primary);
}

/* Con JavaScript attivo (nav.js toglie "hidden" all'indicatore) sotto la
   voce attiva c'è la pillola blu: il testo deve essere chiaro in entrambi
   i temi. Senza JavaScript vale la regola sopra (in tema chiaro, blu notte
   su pillola bianca). */
.site-header__nav-indicator:not([hidden]) ~ a[aria-current="page"] {
  color: var(--color-on-primary);
}

/* Pulsante «Menu»: c'è solo su telefono (sotto i 768px), dove le 4 voci
   non stanno accanto al logo. Lo si mostra solo se il browser sa aprire i
   popover: nei browser più vecchi resta il menu nella pillola, che scorre
   col dito. */
.site-header__menu {
  display: none;
}

@media (max-width: 767.98px) {
  @supports selector(:popover-open) {
    .site-header__pill {
      width: 100%;
      justify-content: space-between;
    }

    .site-header__menu {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      min-height: 2.75rem;
      padding: 0 var(--space-4);
      border: 0;
      border-radius: var(--radius-pill);
      background: var(--color-primary-strong);
      color: var(--color-on-primary);
      font-family: var(--font-body);
      font-weight: 600;
      font-size: var(--font-size-small);
      cursor: pointer;
      /* niente riquadro azzurro dei telefoni al tocco: il pulsante è già evidente */
      -webkit-tap-highlight-color: transparent;
    }

    /* Menu chiuso: nascosto. Aperto: riquadro sotto la barra, con le voci
       una sotto l'altra */
    .site-header__nav:not(:popover-open) {
      display: none;
    }

    .site-header__nav:popover-open {
      position: fixed;
      inset: var(--header-offset) var(--space-4) auto var(--space-4);
      flex-direction: column;
      align-items: stretch;
      gap: var(--space-1);
      padding: var(--space-2);
      overflow: visible;
      background: var(--color-glass-bg);
      border: 1px solid var(--color-glass-border);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-float);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    .site-header__nav:popover-open a {
      min-height: 2.75rem;
      padding: var(--space-3) var(--space-4);
      font-size: var(--font-size-body);
    }

    /* Nel riquadro l'indicatore scorrevole non serve: la voce corrente ha
       direttamente lo sfondo blu */
    .site-header__nav-indicator {
      display: none;
    }

    .site-header__nav a[aria-current="page"] {
      background: var(--color-primary-strong);
      color: var(--color-on-primary);
    }
  }
}

/* Titoli e testo */
h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  margin: 0 0 var(--space-4) 0;
}

/* Titoli raggiungibili con un link (es. /privacy#cookie): si fermano sotto
   la barra del menu, che è fissa, invece di finirci dietro */
h2[id] {
  scroll-margin-top: calc(var(--header-offset) + var(--space-4));
}

h1 {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
}

h2 {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
  margin-top: var(--space-8);
}

h3 {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  letter-spacing: var(--letter-spacing-h3);
}

p {
  margin: 0 0 var(--space-4) 0;
}

main ul,
main ol {
  padding-left: var(--space-5);
  margin: 0 0 var(--space-4) 0;
}

main li {
  margin-bottom: var(--space-2);
}

/* Intestazione delle pagine legali: data di ultimo aggiornamento */
.pagina-legale__data {
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  margin-top: var(--space-2);
}

/* Tabelle delle pagine legali (privacy). Sugli schermi stretti scorrono di
   lato dentro il loro riquadro (per le tabelle di dati WCAG lo consente):
   il riquadro si raggiunge con Tab e scorre con le frecce. Larghezza minima
   della tabella a 4 colonne: entra senza scorrere nella colonna di testo
   del computer (48rem meno i margini). */
.tabella-scorrevole {
  overflow-x: auto;
  margin: 0 0 var(--space-5) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.tabella-legale {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

.tabella-legale--4 {
  min-width: 42rem;
}

.tabella-legale th,
.tabella-legale td {
  padding: var(--space-3);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}

.tabella-legale tbody tr:last-child > * {
  border-bottom: 0;
}

.tabella-legale thead th {
  background: var(--color-surface-raised);
  font-weight: 600;
}

/* Prima colonna: in grassetto solo la parte evidenziata nel testo */
.tabella-legale tbody th {
  font-weight: 400;
}

/* Stampa: le pagine legali devono restare leggibili anche su carta/PDF.
   Qui si usano apposta colori fissi bianco/nero (non i token dello sfondo
   scuro, pensati solo per schermo) perché la stampa deve sempre avere
   testo nero su fondo bianco, indipendentemente dal tema del sito. */
@media print {
  .skip-link,
  .site-header,
  .site-footer nav,
  .site-footer .site-footer__logo {
    display: none;
  }

  body {
    background: #ffffff;
    color: #000000;
  }

  a {
    color: #000000;
    text-decoration: underline;
  }

  .site-footer {
    background: #ffffff;
    border-top: 1px solid #000000;
  }

  .site-footer::before,
  .site-footer::after,
  .site-footer__fondale {
    display: none;
  }

  .site-footer p,
  .site-footer a,
  .site-footer li {
    color: #000000;
  }
}

main {
  padding: var(--space-6) 0 calc(var(--section-pad) * 2) 0;
}

main .container {
  max-width: 48rem;
}

/* La home usa tutta la larghezza: 48rem resta per le pagine di testo lungo */
.pagina-home main .container {
  max-width: 72rem;
}

small,
.testo-piccolo {
  display: block;
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  color: var(--color-text-secondary);
}

/* Pulsanti */
.pulsante {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--font-size-body);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
}

.pulsante-principale {
  background: var(--color-primary-strong);
  color: var(--color-on-primary);
}

.pulsante-secondario {
  background: transparent;
  border-color: var(--color-link);
  color: var(--color-link);
}

/* Pulsante in evidenza con "tassello" icona a sinistra (dall'ispirazione):
   bianco con testo blu in tema scuro, blu notte con testo bianco in tema
   chiaro (vedi --color-cta-bg in tokens.css). Tassello rotondo e non
   quadrato, per restare coerente con i pulsanti a pillola del sito. */
.pulsante-evidenza {
  background: var(--color-cta-bg);
  color: var(--color-cta-text);
}

.pulsante--con-tassello {
  gap: var(--space-3);
  padding: var(--space-2) var(--space-5) var(--space-2) var(--space-2);
}

.pulsante--piccolo {
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-small);
}

.pulsante__tassello {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary-strong);
  color: var(--color-on-primary);
}

/* Footer (dall'esempio mandato da Luca l'8 ottobre 2026, rifatto in
   HTML/CSS): logo e frase, colonne "Sito", "Legale", "Contatti", poi
   avviso educativo a tutta larghezza e, sotto una linea, i dati del
   titolare. Su smartphone: logo, poi Sito e Legale affiancati, poi
   Contatti (gli indirizzi email sono lunghi). */
.site-footer {
  position: relative;
  overflow: hidden;
  background:
    /* fascia blu in fondo, dietro alla scena: riempie i lati sugli schermi più larghi dell'immagine */
    linear-gradient(#364d7f, #364d7f) left bottom / 100% var(--altezza-fondale) no-repeat,
    linear-gradient(
      to bottom,
      var(--color-bg),
      color-mix(in srgb, var(--color-primary) 10%, var(--color-bg))
    );
  border-top: 1px solid var(--color-border);
  padding: var(--space-8) 0 0 0;
  /* Altezza della scena sottomarina in fondo e della fascia delle onde sopra di essa */
  --altezza-fondale: calc(min(100vw, 1968px) * 37 / 113); /* altezza della scena (proporzioni 113:37 del file): larga al massimo 1968px */
  --altezza-onde: 8rem;
}

/* Due onde decorative in fondo (assets/img/onda-footer-1.svg e -2.svg), solo
   CSS. Ognuna scorre in orizzontale a velocità diversa e in verso opposto
   (il tassello è largo 1800px e si ripete senza stacchi, quindi uno
   scorrimento di 1800px è un giro intero) e ondeggia piano su e giù: così
   le due creste si incrociano e il movimento sembra quello dell'acqua.
   Sono decorazioni senza testo né informazioni. Ferme con "riduci
   movimento", nascoste in stampa. */
.site-footer::before,
.site-footer::after {
  content: "";
  position: absolute;
  left: 0;
  /* Più larghe dello schermo di un tassello (1800px): scorrono con transform,
     che il browser anima senza ridisegnare la pagina (più leggero) */
  width: calc(100% + 1800px);
  /* Le onde si infilano 28px sotto la scena (più dell'ondeggiamento di 20px) così non si vedono fessure */
  bottom: calc(var(--altezza-fondale) - 1.75rem);
  height: calc(var(--altezza-onde) + 1.75rem);
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: 1800px 100%;
  pointer-events: none;
  will-change: transform;
}

.site-footer::before {
  background-image: url("../img/onda-footer-1.svg");
  animation:
    onda-scorri-sx 22s linear infinite,
    onda-ondeggia 7s ease-in-out infinite alternate;
}

.site-footer::after {
  background-image: url("../img/onda-footer-2.svg");
  animation:
    onda-scorri-dx 30s linear infinite,
    onda-ondeggia 9s ease-in-out -3s infinite alternate-reverse;
}

@keyframes onda-scorri-sx {
  to {
    transform: translateX(-1800px);
  }
}

@keyframes onda-scorri-dx {
  from {
    transform: translateX(-1800px);
  }
  to {
    transform: translateX(0);
  }
}

/* Su e giù con la proprietà "translate", che si somma a transform (lo scorrimento) */
@keyframes onda-ondeggia {
  from {
    translate: 0 0;
  }
  to {
    translate: 0 -1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer::before,
  .site-footer::after {
    animation: none;
  }
}

.site-footer > .container {
  position: relative;
  z-index: 1;
  /* Lascia libera la fascia delle onde sotto l'ultima riga di testo */
  padding-bottom: calc(var(--altezza-onde) - var(--space-3));
}

/* Chiusura della pagina: scena sottomarina intera e con le sue proporzioni
   (113:37; originale 7232 x 2368 in originali/illustrazioni/
   lontra-fondale-4k.jpg, fornito da Luca il 30 ottobre 2026; copie web
   larghe 1130, 2260, 3390 e 4520px, il browser sceglie quella adatta allo
   schermo). Larga al massimo 1968px: sugli schermi più larghi resta
   centrata sul blu uniforme del suo bordo (#364D7F, lo stesso della
   seconda onda), con i lati che sfumano. Sotto i 1968px occupa tutta la
   larghezza. Decorativa. */
.site-footer__fondale {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  max-width: 1968px;
  height: auto;
  margin-inline: auto;
  aspect-ratio: 113 / 37;
}

@media (min-width: 1969px) {
  .site-footer__fondale {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
    mask-image: linear-gradient(to right, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
  }
}

.site-footer__griglia {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-5);
}

.site-footer__marchio,
.site-footer__contatti {
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  .site-footer__griglia {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr);
    gap: var(--space-6);
  }

  .site-footer__marchio,
  .site-footer__contatti {
    grid-column: auto;
  }
}

/* Stesso logo e stessa inquadratura dell'header (vedi .site-logo) */
.site-footer__logo {
  display: inline-block;
  height: 2.5rem;
  aspect-ratio: 1526 / 345;
  overflow: hidden;
  margin-bottom: var(--space-4);
}

.site-footer__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-footer p {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-2) 0;
}

.site-footer a {
  color: var(--color-text-secondary);
}

.site-footer .site-footer__titolo {
  margin: 0 0 var(--space-4) 0;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 600;
  color: var(--color-text-primary);
}

.site-footer ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  color: var(--color-text-secondary);
}

/* Link nei menu: riconoscibili dal contesto, sottolineati solo al
   passaggio. Le email nei Contatti stanno dentro una frase ("Supporto:
   …") dello stesso colore, quindi restano sempre sottolineate. */
.site-footer nav a {
  text-decoration: none;
}

.site-footer nav a:hover,
.site-footer nav a:focus-visible {
  color: var(--color-text-primary);
  text-decoration: underline;
}

.site-footer__contatti a:hover {
  color: var(--color-text-primary);
}

/* Avviso educativo: corpo piccolo (14px, come gli altri testi del piè di
   pagina) ma sempre ben leggibile: colore del testo principale, mai grigio
   chiarissimo; "Avviso." in grassetto. Selettore con due classi per vincere
   su ".site-footer p". */
.site-footer .site-footer__avviso {
  max-width: 60rem;
  color: var(--color-text-primary);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  font-weight: 400;
  margin: var(--space-7) 0 var(--space-5) 0;
}

.site-footer__fondo {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-5);
  text-align: center;
}

/* Pagine delle 4 classi (/classi/...): in cima solo il titolo ("Le 9
   categorie di Mercati"), subito sotto il ventaglio di carte (oppure, senza
   JavaScript, le categorie in schede: una colonna sul telefono, due da
   640 px). Più larghe della home (88rem, circa 1400 px), per dare spazio
   al ventaglio sugli schermi grandi. */
.pagina-classe main .container {
  max-width: 88rem;
}

main .classe-categorie[hidden] {
  display: none;
}

.classe-titolo {
  margin-bottom: 0;
}

main .classe-categorie {
  display: grid;
  gap: var(--space-4);
  list-style: none;
  padding: 0;
}

@media (min-width: 640px) {
  main .classe-categorie {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

main .classe-categorie li {
  margin: 0;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.classe-categorie h3 {
  margin-bottom: var(--space-2);
}

.classe-categorie p {
  margin: 0;
  color: var(--color-text-secondary);
}

.classe-ritorno {
  margin-top: var(--space-6);
}

/* Ventaglio di carte delle pagine delle classi (lo costruisce
   assets/js/ventaglio.js leggendo l'elenco delle categorie; senza script
   resta nascosto e si legge solo l'elenco). Dal componente React
   "CardHandGallery" fornito da Luca il 16 ottobre 2026: sul telefono nome,
   testi sopra le carte; da 640 px testi a sinistra (frecce, nome e
   descrizione) e carte a destra. Le misure delle carte le calcola lo script. */
.ventaglio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  margin: var(--space-6) 0 0;
  container-type: inline-size;
}

.ventaglio[hidden] {
  display: none;
}

/* Se il JavaScript è attivo, lo spazio del ventaglio è riservato già prima
   che lo script lo costruisca (invisibile), così niente salta al
   caricamento. La misura delle carte si decide solo qui
   (--larghezza-carta) e lo script la legge dall'altezza riservata:
   1,78 × altezza della carta = 1,78 × 1,5 × larghezza = 2,67 × larghezza.
   La larghezza è il minimo fra 16rem (256 px, come le card delle classi in
   home, scelta di Luca), il 55% dello spazio delle carte (100cqi è la
   larghezza di tutto il ventaglio, meno la colonna dei testi e lo spazio
   in mezzo) e il 32% dell'altezza dello schermo, così il ventaglio intero
   sta sempre nella finestra. */
@media (scripting: enabled) {
  .ventaglio[hidden] {
    display: flex;
    visibility: hidden;
  }
}

/* Colonna dei testi: frecce, nome della categoria e sotto la descrizione
   (scelta di Luca). Sul telefono sta sotto le carte, centrata: il
   ventaglio parte subito sotto il titolo e le frecce sono vicine al
   pollice; cambiando carta si sposta solo quello che c'è sotto. */
.ventaglio__testi {
  order: 1;
  width: 100%;
  flex-shrink: 0;
  text-align: center;
}

.ventaglio__comandi {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.ventaglio__freccia {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-primary);
  cursor: pointer;
}

.ventaglio__freccia:hover {
  background: var(--color-surface-raised);
}

/* Il nome si spezza solo se una parola da sola non ci sta (niente
   sillabazione automatica: Safari spezzava anche "Mobi-liari") */
.ventaglio__titolo {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.2;
  text-wrap: balance;
  overflow-wrap: break-word;
  color: var(--color-text-primary);
}

.ventaglio__descrizione {
  margin: var(--space-3) 0 0;
  font-size: var(--font-size-small);
  line-height: 1.6;
  text-wrap: pretty;
  color: var(--color-text-secondary);
}

/* La misura delle carte serve anche alla colonna dei testi (per la
   posizione fissa delle frecce), quindi è definita su entrambe */
.ventaglio__mano,
.ventaglio__testi {
  --larghezza-carta: min(16rem, 55cqi, 32vh);
  --larghezza-carta: min(16rem, 55cqi, 32svh);
}

.ventaglio__mano {
  position: relative;
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: calc(2.67 * var(--larghezza-carta));
  /* Le carte stanno in un loro livello: quella sollevata non deve mai
     passare sopra il menu fisso in alto quando si scorre */
  isolation: isolate;
}

/* Da 640 px: testi a sinistra, allineati a sinistra, carte a destra.
   La colonna dei testi parte dall'alto a una distanza fissa (0,7 volte la
   larghezza della carta, poco sopra la metà del ventaglio): così le
   frecce stanno sempre nello stesso punto, e se il nome va su più righe
   o la descrizione è lunga il testo cresce solo verso il basso (scelta di
   Luca: prima la colonna era centrata e le frecce si spostavano). */
@media (min-width: 640px) {
  .ventaglio {
    flex-direction: row;
    align-items: flex-start;
  }

  .ventaglio__testi {
    order: 0;
    width: 14rem;
    padding-top: calc(0.7 * var(--larghezza-carta));
    text-align: left;
  }

  .ventaglio__comandi {
    justify-content: flex-start;
  }

  .ventaglio__descrizione {
    font-size: var(--font-size-body);
  }

  .ventaglio__mano,
  .ventaglio__testi {
    --larghezza-carta: min(16rem, 0.55 * (100cqi - 15.5rem), 32vh);
    --larghezza-carta: min(16rem, 0.55 * (100cqi - 15.5rem), 32svh);
  }
}

@media (min-width: 768px) {
  .ventaglio__testi {
    width: 16rem;
  }

  .ventaglio__mano,
  .ventaglio__testi {
    --larghezza-carta: min(16rem, 0.55 * (100cqi - 17.5rem), 32vh);
    --larghezza-carta: min(16rem, 0.55 * (100cqi - 17.5rem), 32svh);
  }
}

@media (min-width: 1024px) {
  .ventaglio {
    gap: var(--space-7);
  }

  .ventaglio__testi {
    width: 18rem;
  }

  .ventaglio__titolo {
    font-size: 2.25rem;
  }

  .ventaglio__descrizione {
    font-size: 1.25rem;
  }

  .ventaglio__mano,
  .ventaglio__testi {
    --larghezza-carta: min(16rem, 0.55 * (100cqi - 21rem), 32vh);
    --larghezza-carta: min(16rem, 0.55 * (100cqi - 21rem), 32svh);
  }
}

@media (min-width: 1280px) {
  .ventaglio__testi {
    width: 22rem;
  }

  .ventaglio__mano,
  .ventaglio__testi {
    --larghezza-carta: min(16rem, 0.55 * (100cqi - 25rem), 32vh);
    --larghezza-carta: min(16rem, 0.55 * (100cqi - 25rem), 32svh);
  }
}

/* Nome e descrizione entrano dal basso quando cambia la carta (con
   "riduci movimento" la regola generale in fondo al file la annulla) */
.ventaglio__annuncio--entra > * {
  animation: ventaglio-entra 0.32s ease-out both;
}

@keyframes ventaglio-entra {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* Le carte esterne, inclinate, possono sporgere nel margine laterale ma
   non devono mai allargare la pagina sui telefoni stretti */
.pagina-classe main {
  overflow-x: clip;
}

.ventaglio__posto {
  position: absolute;
  left: 50%;
}

/* Molle del componente originale imitate con una curva che supera appena
   l'arrivo e torna indietro. Solo dopo la prima disposizione (classe
   --pronto), così al caricamento le carte non volano al loro posto. */
.ventaglio--pronto .ventaglio__posto,
.ventaglio--pronto .ventaglio__sollevamento,
.ventaglio--pronto .ventaglio__carta {
  transition: transform 0.5s cubic-bezier(0.2, 1.3, 0.35, 1);
}

.ventaglio--movimento-ridotto .ventaglio__posto,
.ventaglio--movimento-ridotto .ventaglio__sollevamento,
.ventaglio--movimento-ridotto .ventaglio__carta {
  transition: transform 0.16s ease-out;
}

.ventaglio__carta {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  container-type: inline-size;
}

@media (pointer: fine) {
  .ventaglio__carta {
    cursor: grab;
  }
}

.ventaglio__carta--scelta {
  cursor: default;
}

/* Mentre la si trascina la carta segue il puntatore senza ritardo */
.ventaglio .ventaglio__carta--trascinata {
  cursor: grabbing;
  transition: none;
}

.ventaglio__carta:focus-visible {
  outline-offset: 3px;
}

.ventaglio__faccia {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3; /* come le card delle classi in home */
  object-fit: cover;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  box-shadow: 0 10px 24px rgba(6, 14, 27, 0.35);
  user-select: none;
  -webkit-user-select: none;
}

/* Carta grafica provvisoria, finché non arrivano le illustrazioni delle
   categorie: blu notte con un bagliore dei colori del marchio, scura in
   entrambi i temi come le card delle classi in home. Numero e nome sono
   in proporzione alla carta (unità cqi), perché la carta cambia misura. */
.ventaglio__faccia--grafica {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8cqi;
  text-align: left;
  background:
    radial-gradient(circle at 85% 12%, rgba(53, 229, 206, 0.35), transparent 45%),
    radial-gradient(circle at 10% 95%, rgba(57, 138, 244, 0.55), transparent 55%),
    linear-gradient(160deg, #13294d, #0a1526);
  color: var(--color-on-image);
}

.ventaglio__faccia-numero {
  font-size: 7cqi;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
}

.ventaglio__faccia-nome {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 9cqi;
  line-height: 1.15;
  overflow-wrap: break-word;
}

/* Contenitore più stretto, per testi lunghi da leggere comodamente */
.container--narrow {
  max-width: 48rem;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

@media (min-width: 768px) {
  .container--narrow {
    padding: 0 var(--space-6);
  }
}

/* Sezioni della home */
.sezione {
  padding: var(--section-pad) 0;
}

/* Dopo la scheda di apertura: spazio pieno (il doppio di --section-pad) */
.sezione-lezioni {
  padding-top: calc(var(--section-pad) * 2);
}

/* Ultima sezione: lo stesso spazio pieno prima del piè di pagina */
.sezione-faq {
  padding-bottom: calc(var(--section-pad) * 2);
}

/* Scheda "profonda" che contiene l'apertura, con angoli vivi (senza
   arrotondamento dal 30 ottobre 2026, su richiesta di Luca). --color-bg-deep
   e --color-bg sono quasi uguali (1,06:1), quindi il bordo si vede grazie
   alla linea sottile e al bagliore in basso, non al solo colore. overflow: hidden tiene dentro bagliori e decorazioni, che
   altrimenti allargherebbero la pagina su smartphone. Lo spazio per
   l'header lo crea l'apertura stessa (vedi .hero-blocco .hero), così la
   scena di sfondo parte dal bordo alto della pagina. */
.hero-blocco {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 45% at 50% 100%, var(--color-glow-primary), transparent 70%),
    var(--color-bg-deep);
  border: 1px solid var(--color-border);
  border-top: 0;
}

/* Su computer l'apertura riempie l'altezza dello schermo (100svh = altezza
   visibile con le barre del browser aperte), con il testo centrato in
   verticale. Su telefono e tablet è alta quanto il suo contenuto: testo in
   alto, subito sotto la scena con la lontra, e sotto si intravede la
   sezione successiva (Luca, 30 ottobre 2026: prima restava un grande
   spazio di cielo vuoto sui telefoni alti). */
.hero-blocco .hero {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .hero-blocco .hero {
    min-height: 100svh;
  }
}

.hero-blocco .hero > .container {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
}

.hero__layout {
  flex: 1;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--space-4) var(--space-7);
}

.hero__content {
  align-self: center;
}

/* Due colonne solo da 1024px: sotto, la lontra della scena sta sotto al
   testo. Colonna del testo più larga (1,6 : 1): quella di destra è solo
   spazio vuoto sopra la lontra, e così i due pulsanti stanno affiancati.
   minmax(0, …): senza, una parola lunga nel titolo allargherebbe la colonna
   oltre lo schermo (trappola "min-width: auto" già incontrata nell'header) */
@media (min-width: 1024px) {
  .hero__layout {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    grid-template-rows: none;
    align-items: center;
  }
}

/* Titolo grande, ma mai più alto dell'8,5% dello schermo: sui portatili con
   poca altezza (es. 1366 × 600 visibili) si rimpicciolisce quanto basta
   perché l'apertura stia tutta nella prima schermata */
.hero h1 {
  font-size: min(var(--font-size-display), 8.5svh);
  text-wrap: balance;
  overflow-wrap: break-word;
}

.hero__azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

/* "In arrivo su iPhone e Android": gemello del pulsante accanto, ma è uno
   stato, non un link (l'app non è ancora uscita): puntatore normale */
.pulsante--stato {
  margin: 0;
  cursor: default;
}

/* Riquadro per chi arriva da un invito (?ref=, vedi invito.js): scheda
   piena sopra la scena, con i colori del tema (non blu notte fisso come il
   resto dell'apertura). Anche il contorno di focus torna quello del tema,
   perché il blu notte dell'apertura sulla scheda scura non si vedrebbe. */
.invito {
  --focus-ring-color: var(--color-accent);
  max-width: 34rem;
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
  color: var(--color-text-primary);
}

/* Serve anche per il pulsante: .pulsante (display: inline-flex)
   altrimenti vincerebbe sull'attributo hidden */
.invito[hidden],
.invito [hidden] {
  display: none;
}

.invito__titolo {
  font-size: var(--font-size-h3);
  margin: 0 0 var(--space-2) 0;
}

.invito p {
  margin: 0;
}

/* Lettere distanziate e selezionabili con un solo tocco */
.invito__codice {
  letter-spacing: 0.08em;
  user-select: all;
}

.invito__azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.invito__esito {
  font-size: var(--font-size-small);
  font-weight: 600;
  color: var(--color-text-secondary);
}

@media (prefers-color-scheme: light) {
  .invito {
    --focus-ring-color: var(--color-link);
  }
}

/* Scena di sfondo dell'apertura (la lontra sull'onda, fornita da Luca il
   9 ottobre 2026; versione 4K del 30 ottobre 2026 in
   originali/illustrazioni/lontra-onda-4k.jpg). Copie web: 1600px per
   telefono e tablet, 2560px per computer, 3840px per i computer con
   schermo ad alta densità.
   Copre dal bordo alto della pagina (dietro il menu) fino alla fine
   dell'apertura.
   - Telefono e tablet: scena ancorata in basso, alta quanto la fascia
     --altezza-scena (mai meno della larghezza / 1,5, così copre sempre
     tutta la larghezza); sopra, il cielo pieno con il colore del bordo alto
     della scena, senza stacco. Posizione 86%: la lontra è a destra nella
     scena, così entra nella finestra stretta del telefono.
   - Computer: scena a tutta apertura (cover), posizione 86% 80% per tenere
     la lontra nella fascia visibile e a destra del testo.
   - In fondo nessuna sfumatura: la scena arriva fino al bordo della scheda,
     con un taglio netto (Luca, 30 ottobre 2026).
   La scena è chiara: i testi dell'apertura sono blu notte in ENTRAMBI i temi
   (misurato sulla metà sinistra della scena: blu notte almeno 4,5:1
   ovunque, bianco al massimo 4:1). Anche il contorno di focus diventa blu
   notte, perché l'azzurro del tema scuro sul cielo non si vedrebbe. */
.hero-blocco .hero {
  --focus-ring-color: var(--color-on-image-ink);
  --altezza-scena: max(42svh, 66.7vw);
  padding-top: var(--header-offset);
  padding-bottom: 0;
  background:
    url("../img/lontra-onda.webp") 86% 100% / auto var(--altezza-scena) no-repeat,
    var(--color-scena-cielo);
}

@media (min-width: 1024px) {
  .hero-blocco .hero {
    padding-top: calc(var(--header-offset) + var(--space-4));
    padding-bottom: var(--space-6);
    background:
      url("../img/lontra-onda-2560.webp") 86% 80% / cover no-repeat,
      var(--color-scena-cielo);
    /* Stessa scena, ma i browser che la supportano scelgono 2560 o 3840px in base alla densità dello schermo */
    background:
      image-set(url("../img/lontra-onda-2560.webp") 1x, url("../img/lontra-onda-3840.webp") 2x) 86% 80% / cover no-repeat,
      var(--color-scena-cielo);
  }
}

.hero .hero__titolo,
.hero .hero__sottotitolo {
  color: var(--color-on-image-ink);
}

/* Spazio vuoto dove si vede la lontra della scena. Su telefono e tablet sta
   sotto ai pulsanti, alto il 72% della fascia della scena: il 28% più in
   alto della scena è solo cielo e passa dietro ai pulsanti, mentre la
   cresta dell'onda (al 32% dall'alto) e la lontra restano sempre sotto il
   testo, mai dietro. Su computer è la colonna di destra, vuota. */
.hero__visual {
  height: calc(var(--altezza-scena) * 0.72);
}

@media (min-width: 1024px) {
  .hero__visual {
    height: auto;
  }
}

/* Intestazione delle sezioni: etichetta a pillola sopra un titolo
   centrato (dall'ispirazione, "About Us") */
.sezione__intestazione {
  text-align: center;
  max-width: 48rem;
  margin: 0 auto var(--space-6) auto;
}

/* Tutti i titoli di sezione della home hanno lo stesso stile del titolo
   dell'apertura (Montserrat 700, stessa dimensione, interlinea e spaziatura) */
.sezione__intestazione h2,
.lezioni__testo h2,
.beneficenza__testo h2 {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
}

.sezione__intestazione h2 {
  margin-top: 0;
  margin-bottom: 0;
  text-wrap: balance;
}

.sezione__sottotitolo {
  max-width: 36rem;
  margin: var(--space-4) auto 0 auto;
  color: var(--color-text-secondary);
}

.sezione__azioni {
  margin-top: var(--space-5);
}

.etichetta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-1) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  font-weight: 600;
  color: var(--color-text-primary);
}

.etichetta::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-highlight);
}

.hero__sottotitolo {
  font-size: var(--font-size-lead);
  color: var(--color-text-secondary);
  max-width: 34rem;
}

/* Parola evidenziata (dall'esempio mandato da Luca): rettangolo
   arrotondato con sfumatura primary → secondary, testo BIANCO (scelta di
   Luca, 12 ottobre 2026). ATTENZIONE contrasto: il bianco sul primary fa
   3,4:1 (ok per titolo grande, minimo 3:1) ma sul turchese solo 1,6:1,
   quindi la parte destra della pillola NON passa AA. Varianti conformi
   pronte: (a) sfumatura #0E68DD → #0A8F8A, bianco almeno 3,96:1;
   (b) testo blu notte (--color-on-image-ink). Vedi PLAN.md.
   La pillola è lo sfondo (::before) e si svela da sinistra a destra,
   come una tendina, seguendo le lettere (vedi sotto). */
.evidenza {
  position: relative;
  display: inline-block;
  isolation: isolate;
  padding: 0 0.18em;
  color: #ffffff;
}

.evidenza::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 0.2em;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  animation: pillola-n13 calc(8 * 3.5s) infinite both;
  /* lineare: la tendina deve avanzare al passo delle lettere (0,045 s l'una);
     con l'andamento predefinito "ease" partirebbe in anticipo */
  animation-timing-function: linear;
  animation-delay: calc(var(--i, 0) * 3.5s - 0.5s);
}

/* Nel titolo "Le" sta fisso a sinistra, la parola che cambia accanto, e
   "non sono complicate." sotto */
.hero__titolo .evidenza {
  margin-left: 0.04em;
}

.hero__titolo-fisso {
  display: block;
}

.hero__titolo-riga {
  display: block;
}

.hero__titolo-riga .rotazione {
  display: inline-grid;
  vertical-align: baseline;
}

/* Rotazione: le 8 versioni stanno nella stessa cella di una griglia, così
   lo spazio occupato è sempre quello della più lunga (niente salti della
   pagina quando cambiano). Ciclo di 28 s: 3,5 s per versione (8 x 3,5).
   Ogni voce ha il suo --i (0-7), dato qui sotto in base alla posizione, e
   parte 3,5 s dopo la precedente;
   il -0,5 s fa sì che la prima sia già visibile al caricamento. Le
   percentuali dei keyframes non possono usare variabili: valgono per 8
   voci su 28 s (ognuna il 12,5% del ciclo); se cambia il numero di
   parole o la durata vanno rifatte, insieme ai "8 * 3.5s" qui sotto. */
.rotazione {
  display: grid;
}

.rotazione__voce {
  grid-area: 1 / 1;
  opacity: 0;
  white-space: nowrap;
  animation: rotazione-voce calc(8 * 3.5s) infinite both;
  animation-delay: calc(var(--i, 0) * 3.5s - 0.5s);
}

/* Senza animazioni (browser molto vecchi) resta visibile la prima */
.rotazione__voce:first-child {
  opacity: 1;
}

/* Posizione di ogni parola (--i) e di ogni lettera nella sua parola (--c):
   da qui decidono i ritardi delle animazioni. Stanno nel foglio di stile e
   non nell'HTML (style="--i:3") perché le regole di sicurezza del sito
   (_headers, «style-src 'self'») bloccano gli stili scritti nell'HTML: su
   Cloudflare tutte le parole prendevano 0 e comparivano insieme (trovato
   da Luca il 3 novembre 2026). La prima parola e la prima lettera usano il
   valore di riserva 0 di var(--i, 0) e var(--c, 0). Parola più lunga: 13
   lettere (Assicurazioni). */
.rotazione__voce:nth-child(2) {
  --i: 1;
}

.rotazione__voce:nth-child(3) {
  --i: 2;
}

.rotazione__voce:nth-child(4) {
  --i: 3;
}

.rotazione__voce:nth-child(5) {
  --i: 4;
}

.rotazione__voce:nth-child(6) {
  --i: 5;
}

.rotazione__voce:nth-child(7) {
  --i: 6;
}

.rotazione__voce:nth-child(8) {
  --i: 7;
}

.rotazione .lettera:nth-child(2) {
  --c: 1;
}

.rotazione .lettera:nth-child(3) {
  --c: 2;
}

.rotazione .lettera:nth-child(4) {
  --c: 3;
}

.rotazione .lettera:nth-child(5) {
  --c: 4;
}

.rotazione .lettera:nth-child(6) {
  --c: 5;
}

.rotazione .lettera:nth-child(7) {
  --c: 6;
}

.rotazione .lettera:nth-child(8) {
  --c: 7;
}

.rotazione .lettera:nth-child(9) {
  --c: 8;
}

.rotazione .lettera:nth-child(10) {
  --c: 9;
}

.rotazione .lettera:nth-child(11) {
  --c: 10;
}

.rotazione .lettera:nth-child(12) {
  --c: 11;
}

.rotazione .lettera:nth-child(13) {
  --c: 12;
}

/* La voce compare e scompare in un attimo (serve solo a nascondere le
   altre 7); l'effetto vero lo fanno pillola e lettere (sotto). */
@keyframes rotazione-voce {
  0% {
    opacity: 0;
  }
  0.4%,
  12.45% {
    opacity: 1;
  }
  12.5%,
  100% {
    opacity: 0;
  }
}

/* Identica a rotazione-voce: serve solo con «riduci movimento» (vedi sotto) */
@keyframes rotazione-voce-ridotta {
  0% {
    opacity: 0;
  }
  0.4%,
  12.45% {
    opacity: 1;
  }
  12.5%,
  100% {
    opacity: 0;
  }
}

/* Effetto "fade-in-blur" sulle lettere (dal componente di esempio di Luca,
   rifatto in solo CSS). Ogni lettera ENTRA in ordine, dalla prima
   all'ultima, sfocata e trasparente, dal basso; poi ESCE in ordine
   inverso, dall'ultima alla prima. Scarto 0,045 s a lettera, 0,4 s per
   ogni passaggio. Due scatole annidate (.lettera esce, .lettera__c
   entra) perché due animazioni sulla stessa scatola non si combinano.
   TEMPI: la PRIMA lettera finisce di uscire sempre a 3,5 s dall'inizio
   della voce, qualunque sia la parola (la lettera c esce a
   3,1 - c * 0,045 s): la parola dopo parte a 3,5 s, quindi la sua prima
   lettera arriva subito dopo che l'ultima se ne è andata. La
   pillola (::before) si svela e si ritira seguendo lo stesso passo: i suoi
   keyframes sono uno per lunghezza di parola (pillola-nN), perché la
   durata dipende da quante lettere ci sono. */
.lettera {
  position: relative;
  display: inline-block;
  animation: lettera-esce calc(8 * 3.5s) infinite both;
  animation-delay: calc(var(--i, 0) * 3.5s - 0.5s + 1s - var(--c, 0) * 0.045s);
}

.lettera__c {
  display: inline-block;
  opacity: 0;
  animation: lettera-entra calc(8 * 3.5s) infinite both;
  animation-delay: calc(var(--i, 0) * 3.5s - 0.5s + var(--c, 0) * 0.045s);
}

.rotazione__voce:first-child .lettera__c {
  opacity: 1;
}

@keyframes lettera-entra {
  0% {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(0.3em);
  }
  1.43%,
  50% {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
  100% {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(0.3em);
  }
}

/* Uscita: visibile fino a 2,1 s (7,5%), sfocata e trasparente da 2,5 s
   (8,93%) fino a quasi la fine del ciclo, poi di nuovo visibile (a voce
   ormai nascosta) così al giro dopo parte dallo stato giusto */
@keyframes lettera-esce {
  0%,
  7.5% {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
  8.93%,
  96.4% {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(0.3em);
  }
  96.5%,
  100% {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
}

@keyframes lettera-entra-dissolvenza {
  0% {
    opacity: 0;
  }
  1.43%,
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes lettera-esce-dissolvenza {
  0%,
  7.5% {
    opacity: 1;
  }
  8.93%,
  96.4% {
    opacity: 0;
  }
  96.5%,
  100% {
    opacity: 1;
  }
}

@keyframes pillola-n5 {
  0% {
    clip-path: inset(0 100% 0 0 round 0.2em);
  }
  2.071%,
  10.429% {
    clip-path: inset(0 0 0 0 round 0.2em);
  }
  12.5%,
  100% {
    clip-path: inset(0 100% 0 0 round 0.2em);
  }
}

@keyframes pillola-dissolvenza-n5 {
  0% {
    opacity: 0;
  }
  2.071%,
  10.429% {
    opacity: 1;
  }
  12.5%,
  100% {
    opacity: 0;
  }
}

@keyframes pillola-n6 {
  0% {
    clip-path: inset(0 100% 0 0 round 0.2em);
  }
  2.232%,
  10.268% {
    clip-path: inset(0 0 0 0 round 0.2em);
  }
  12.5%,
  100% {
    clip-path: inset(0 100% 0 0 round 0.2em);
  }
}

@keyframes pillola-dissolvenza-n6 {
  0% {
    opacity: 0;
  }
  2.232%,
  10.268% {
    opacity: 1;
  }
  12.5%,
  100% {
    opacity: 0;
  }
}

@keyframes pillola-n7 {
  0% {
    clip-path: inset(0 100% 0 0 round 0.2em);
  }
  2.393%,
  10.107% {
    clip-path: inset(0 0 0 0 round 0.2em);
  }
  12.5%,
  100% {
    clip-path: inset(0 100% 0 0 round 0.2em);
  }
}

@keyframes pillola-dissolvenza-n7 {
  0% {
    opacity: 0;
  }
  2.393%,
  10.107% {
    opacity: 1;
  }
  12.5%,
  100% {
    opacity: 0;
  }
}

@keyframes pillola-n8 {
  0% {
    clip-path: inset(0 100% 0 0 round 0.2em);
  }
  2.554%,
  9.946% {
    clip-path: inset(0 0 0 0 round 0.2em);
  }
  12.5%,
  100% {
    clip-path: inset(0 100% 0 0 round 0.2em);
  }
}

@keyframes pillola-dissolvenza-n8 {
  0% {
    opacity: 0;
  }
  2.554%,
  9.946% {
    opacity: 1;
  }
  12.5%,
  100% {
    opacity: 0;
  }
}

@keyframes pillola-n11 {
  0% {
    clip-path: inset(0 100% 0 0 round 0.2em);
  }
  3.036%,
  9.464% {
    clip-path: inset(0 0 0 0 round 0.2em);
  }
  12.5%,
  100% {
    clip-path: inset(0 100% 0 0 round 0.2em);
  }
}

@keyframes pillola-dissolvenza-n11 {
  0% {
    opacity: 0;
  }
  3.036%,
  9.464% {
    opacity: 1;
  }
  12.5%,
  100% {
    opacity: 0;
  }
}

@keyframes pillola-n12 {
  0% {
    clip-path: inset(0 100% 0 0 round 0.2em);
  }
  3.196%,
  9.304% {
    clip-path: inset(0 0 0 0 round 0.2em);
  }
  12.5%,
  100% {
    clip-path: inset(0 100% 0 0 round 0.2em);
  }
}

@keyframes pillola-dissolvenza-n12 {
  0% {
    opacity: 0;
  }
  3.196%,
  9.304% {
    opacity: 1;
  }
  12.5%,
  100% {
    opacity: 0;
  }
}

@keyframes pillola-n13 {
  0% {
    clip-path: inset(0 100% 0 0 round 0.2em);
  }
  3.357%,
  9.143% {
    clip-path: inset(0 0 0 0 round 0.2em);
  }
  12.5%,
  100% {
    clip-path: inset(0 100% 0 0 round 0.2em);
  }
}

@keyframes pillola-dissolvenza-n13 {
  0% {
    opacity: 0;
  }
  3.357%,
  9.143% {
    opacity: 1;
  }
  12.5%,
  100% {
    opacity: 0;
  }
}

.evidenza.n5::before {
  animation-name: pillola-n5;
}

.evidenza.n6::before {
  animation-name: pillola-n6;
}

.evidenza.n7::before {
  animation-name: pillola-n7;
}

.evidenza.n8::before {
  animation-name: pillola-n8;
}

.evidenza.n11::before {
  animation-name: pillola-n11;
}

.evidenza.n12::before {
  animation-name: pillola-n12;
}

.evidenza.n13::before {
  animation-name: pillola-n13;
}

/* "Riduci movimento": la regola generale in fondo al file accorcerebbe
   l'animazione a un istante e farebbe sparire tutte le versioni (titolo
   vuoto). Qui la si ripristina, ma solo come dissolvenza (niente
   sfocatura né spostamenti né tendina); resta comunque fermabile col
   pulsante. */
@media (prefers-reduced-motion: reduce) {
  .hero .rotazione__voce,
  .hero .lettera,
  .hero .lettera__c,
  .hero .evidenza::before {
    animation-duration: 28s !important;
    animation-iteration-count: infinite !important;
  }

  /* Anche le parole cambiano nome di animazione (stessi passaggi, vedi
     rotazione-voce-ridotta): se «riduci movimento» cambia a pagina aperta,
     il browser fa ripartire da capo solo le animazioni che hanno cambiato
     nome. Così ripartono TUTTE insieme, parole, lettere e pillole, e
     restano allineate (prima ripartivano solo lettere e pillole, e le
     parole si sfasavano) */
  .hero .rotazione__voce {
    animation-name: rotazione-voce-ridotta;
  }

  .hero .lettera__c {
    animation-name: lettera-entra-dissolvenza;
  }

  .hero .lettera {
    animation-name: lettera-esce-dissolvenza;
  }

  .hero .evidenza.n5::before {
    animation-name: pillola-dissolvenza-n5;
  }

  .hero .evidenza.n6::before {
    animation-name: pillola-dissolvenza-n6;
  }

  .hero .evidenza.n7::before {
    animation-name: pillola-dissolvenza-n7;
  }

  .hero .evidenza.n8::before {
    animation-name: pillola-dissolvenza-n8;
  }

  .hero .evidenza.n11::before {
    animation-name: pillola-dissolvenza-n11;
  }

  .hero .evidenza.n12::before {
    animation-name: pillola-dissolvenza-n12;
  }

  .hero .evidenza.n13::before {
    animation-name: pillola-dissolvenza-n13;
  }
}

/* Pausa: una casella vera (nascosta a schermo, raggiungibile da tastiera e
   letta dagli screen reader) che ha per etichetta la riga con la parola che
   cambia: toccandola le parole si fermano, toccandola di nuovo ripartono.
   Nessun pulsante visibile (Luca, 30 ottobre 2026). */
.hero__content:has(#titolo-pausa:checked) .rotazione__voce,
.hero__content:has(#titolo-pausa:checked) .lettera,
.hero__content:has(#titolo-pausa:checked) .lettera__c,
.hero__content:has(#titolo-pausa:checked) .evidenza::before {
  animation-play-state: paused;
}

.hero__titolo-riga[for] {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

/* Da tastiera il contorno di focus compare attorno alla riga che cambia */
.hero__content:has(#titolo-pausa:focus-visible) .hero__titolo-riga {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

/* Riquadri segnaposto per le immagini non ancora disponibili */
.placeholder-img {
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  padding: var(--space-4);
  margin: 0 auto;
}

.placeholder-img--icona {
  aspect-ratio: 1 / 1;
  max-width: 12rem;
}

/* Cornice da telefono (DESIGN.md: "sì alla cornice del telefono"): resta
   anche quando arriveranno gli screenshot veri */
.placeholder-img--telefono {
  aspect-ratio: 9 / 19.5;
  max-width: 16rem;
  background: var(--color-bg-deep);
  border: 0.5rem solid var(--color-surface-raised);
  border-radius: var(--radius-xl);
}

/* In tema chiaro surface-raised è troppo tenue sul bianco: la cornice
   prende il colore dei bordi, un po' più deciso */
@media (prefers-color-scheme: light) {
  .placeholder-img--telefono {
    border-color: var(--color-border);
  }
}

/* Badge store (o frase "in arrivo" se l'app non è ancora pubblicata) */
.store-badges {
  margin-top: var(--space-5);
}

.store-badges__fallback {
  display: inline-block;
  font-weight: 600;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-5);
}

/* Sezione lezioni: immagine a sinistra, titolo e testo a destra (su telefono
   l'immagine sta sopra il testo) */
.lezioni__layout {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 768px) {
  .lezioni__layout {
    grid-template-columns: minmax(0, 26rem) 1fr;
    gap: var(--space-7);
  }
}

/* Immagine più contenuta: al massimo 22rem su telefono (centrata), mentre da
   768px in su la colonna di sinistra è larga 26rem */
.lezioni__immagine {
  width: min(100%, 22rem);
  margin-inline: auto;
}

@media (min-width: 768px) {
  .lezioni__immagine {
    width: 100%;
    margin-inline: 0;
  }
}

.lezioni__immagine img {
  display: block;
  width: 100%;
  height: auto;
}

/* Il titolo parte dal bordo alto dell'immagine (il margine negativo toglie
   lo spazio sopra le maiuscole) e il testo segue subito sotto */
.lezioni__testo h2 {
  margin: -0.23em 0 var(--space-4);
}

.lezioni__testo p:last-child {
  margin: 0;
}

/* Sezione beneficenza: la stessa struttura al contrario. Titolo e testo a
   sinistra, immagine (verticale) a destra, più stretta di quella delle
   lezioni perché è alta; il titolo parte dal bordo alto dell'immagine. */
.sezione-classi {
  padding-bottom: 0;
}

.beneficenza__layout {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 768px) {
  .beneficenza__layout {
    grid-template-columns: 1fr minmax(0, 18rem);
    gap: var(--space-7);
  }
}

.beneficenza__immagine {
  width: min(100%, 16rem);
  margin-inline: auto;
}

@media (min-width: 768px) {
  .beneficenza__immagine {
    width: 100%;
    margin-inline: 0;
  }
}

.beneficenza__immagine img {
  display: block;
  width: 100%;
  height: auto;
}

.beneficenza__testo h2 {
  margin: -0.23em 0 var(--space-4);
}

.beneficenza__testo p:last-child {
  margin: 0;
}

/* Domande frequenti (home e Supporto): righe separate da una linea, con
   una freccetta a destra che si gira quando la risposta è aperta.
   <details>/<summary> sono elementi nativi: si aprono e chiudono anche
   senza JavaScript, da tastiera e con gli screen reader. */
.faq-griglia {
  display: grid;
  column-gap: var(--space-7);
}

/* minmax(0, …): senza, una domanda lunga allargherebbe la colonna oltre
   lo schermo (trappola "min-width: auto" già incontrata nel sito) */
@media (min-width: 768px) {
  .faq-griglia {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.faq-elenco details {
  border-bottom: 1px solid var(--color-border);
}

.faq-elenco summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.faq-elenco summary::-webkit-details-marker {
  display: none;
}

/* Freccetta disegnata con due bordi ruotati: giù da chiusa, su da aperta */
.faq-elenco summary::after {
  content: "";
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: var(--space-1);
  border-right: 2px solid var(--color-text-secondary);
  border-bottom: 2px solid var(--color-text-secondary);
  transform: translateY(-25%) rotate(45deg);
  transition: transform 0.2s ease;
}

.faq-elenco details[open] > summary::after {
  transform: translateY(25%) rotate(-135deg);
}

.faq-elenco details p {
  margin: 0 0 var(--space-4) 0;
  color: var(--color-text-secondary);
}

/* Le 4 classi: schede dritte, allineate in fila. Sul telefono la fila si
   scorre col dito, col trackpad o con le frecce della tastiera (è
   selezionabile con Tab), con lo "scatto" che ferma sempre una card
   allineata al bordo sinistro; su schermi larghi stanno tutte e 4 nella
   pagina, alla larghezza del contenuto, e non scorrono. */
.carosello {
  --larghezza-carta: min(16rem, 72vw);
  display: flex;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--space-4);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: var(--space-6) var(--space-4) var(--section-pad);
}

@media (min-width: 768px) {
  .carosello {
    scroll-padding-inline: var(--space-6);
    padding-inline: var(--space-6);
  }
}

@media (min-width: 70rem) {
  .carosello {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5);
    max-width: 72rem;
    margin-inline: auto;
    overflow: visible;
  }

  .carosello .carta-classe {
    width: auto;
  }
}

.carosello::-webkit-scrollbar {
  display: none;
}

/* Contorno di focus disegnato all'interno: su telefono il carosello è
   largo quanto lo schermo e i lati esterni del contorno non si vedrebbero */
.carosello:focus-visible {
  outline-offset: -4px;
}

.carosello .carta-classe {
  flex: 0 0 auto;
  width: var(--larghezza-carta);
  margin: 0;
  scroll-snap-align: start;
}

/* Card "a fotografia" (oggi usate dal carosello delle classi, riusabili
   altrove): scure in entrambi i temi, testo in basso su un velo
   scuro, etichetta bianca in alto. */
.carta-visiva {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
  color: var(--color-on-image);
}

/* Sfondi di riserva, solo colori del marchio, finché l'immagine non si
   carica */
.carta-visiva--1 {
  background: linear-gradient(160deg, var(--color-primary), var(--color-primary-strong));
}

.carta-visiva--2 {
  background: linear-gradient(160deg, var(--color-secondary), var(--color-primary-strong));
}

.carta-visiva--3 {
  background: linear-gradient(160deg, var(--color-accent), var(--color-primary));
}

.carta-visiva--4 {
  background: linear-gradient(160deg, var(--color-primary-on-light), var(--color-secondary));
}

/* Foto o illustrazione a tutta card */
.carta-visiva__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carta-visiva__etichetta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
  white-space: nowrap;
  border-radius: var(--radius-md);
  /* Senza supporto alla sfocatura: pannello scuro quasi pieno, testo bianco */
  background: var(--color-label-fallback);
  color: #fff;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  font-weight: 700;
}

/* Liquid glass (stile iOS 26): quasi trasparente, con sfocatura e colori
   dietro che si amplificano, luce speculare sui bordi in alto a sinistra e
   in basso a destra, bagliore interno e ombra morbida. Una leggera tinta
   scura sotto garantisce il contrasto del testo bianco. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .carta-visiva__etichetta {
    background:
      linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.22) 0%,
        rgba(255, 255, 255, 0.03) 42%,
        rgba(255, 255, 255, 0.1) 100%
      ),
      var(--color-label-tint);
    -webkit-backdrop-filter: blur(10px) saturate(2) brightness(1.05);
    backdrop-filter: blur(10px) saturate(2) brightness(1.05);
    box-shadow:
      inset 1.5px 1.5px 1px -0.5px rgba(255, 255, 255, 0.95),
      inset -1.5px -1.5px 1px -0.5px rgba(255, 255, 255, 0.6),
      inset 0 0 16px rgba(255, 255, 255, 0.16),
      0 10px 24px rgba(6, 14, 27, 0.3),
      0 1px 3px rgba(6, 14, 27, 0.2);
    text-shadow: 0 1px 2px rgba(6, 14, 27, 0.35);
  }
}

/* Bottone con freccia: è il link (area cliccabile 32 px), stessa smussatura di card e pillola */
.carta-visiva__freccia {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  box-shadow:
    inset 1px 1px 1px rgba(255, 255, 255, 0.6),
    inset -1px -1px 1px rgba(255, 255, 255, 0.25),
    0 2px 6px rgba(6, 14, 27, 0.3);
  color: #fff;
}


/* Velo scuro leggero, solo nella fascia alta (Nina sta in basso), per
   tenere leggibile il nome senza coprire l'illustrazione */
.carta-visiva::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--color-image-shade) 80%, transparent) 0%,
    color-mix(in srgb, var(--color-image-shade) 55%, transparent) 16%,
    color-mix(in srgb, var(--color-image-shade) 24%, transparent) 30%,
    transparent 44%
  );
  pointer-events: none;
}

.carta-visiva__testo {
  position: relative;
  z-index: 1;
  padding: var(--space-4);
}

.carta-visiva h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  color: var(--color-on-image);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}