/* ============================================================================
   CodeGp v3.0 — VETRINA pubblica /p/ (S10, design nuovo «Lilla»/B4).
   Vale anche per le pagine del guscio (prova, verifica, privacy, condizioni,
   tutorial) e per 404/503. Stessi TOKEN dell'app: l'identità vive in un punto.
   File ESTERNO e non <style> in pagina: la CSP è `default-src 'self'` senza
   'unsafe-inline' (misurato in S2). La vetrina non ha JavaScript, tranne il file
   assets/tutorial.js della pagina Video tutorial (fase F: il salto ai capitoli).
   ========================================================================= */

@font-face {
  font-family: 'JakartaVar';
  src: url('/assets/jakarta-var.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --font: 'JakartaVar', system-ui, 'Segoe UI', Roboto, Arial, sans-serif;

  --sf: #f6f4fa;
  --sf-card: #ffffff;
  --sf-tinta: #f4f0fa;
  --bordo: #e9e2f3;
  --bordo-input: #d2c7e6;
  --testo: #2a1e40;
  --muted: #6f6488;

  --brand: #7a4bd6;
  --brand-2: #5a2fb0;
  --brand-fondo: #31176b;
  --brand-chiaro: #efe9fb;
  --brand-testo: #5a2fb0;
  --su-brand: #ffffff;
  --velo-1: rgba(255, 255, 255, .16);
  --velo-2: rgba(255, 255, 255, .32);

  --accento: #d92078;
  --accento-giu: #b41a63;
  --su-accento: #ffffff;
  --anello: rgba(224, 37, 127, .25);
  --link: #b41a63;

  --grad-brand: linear-gradient(150deg, var(--brand), var(--brand-2) 70%);
  --grad-fondo: linear-gradient(160deg, #6a3fc9, #40208f 55%, var(--brand-fondo));
  --grad-azione: linear-gradient(165deg, var(--accento), var(--accento-giu));
  /* ★ TEL (Marco, 24/09): il bottone della telefonata nell'apertura. Parente di --grad-azione
     (PROVA GRATIS) ma spostato verso il viola: sul fondo viola scuro il --grad-brand non staccava. */
  /* ★ HUI1 (contrasti.py, 30/09): la cima era #c23fd6, col bianco 4,2:1 → #b236c9, 4,9:1 */
  --grad-tel: linear-gradient(165deg, #b236c9, #8f2bc9);
  /* ★ S10f-2a — le pillole della testata decise da Marco sul mockup (24/09, dev/mockup/testata-live-demo*):
     LOGIN verde menta, LIVE DEMO oro, PROVA GRATIS resta --grad-azione. Scritte scure, contrasto 7,0:1. */
  --grad-login: linear-gradient(165deg, #bbf7d0, #4ade80);
  --su-login: #0f3d22;
  --grad-demo: linear-gradient(165deg, #fde68a, #f59e0b);
  --su-demo: #3d2003;

  --ok: #187a4b;   --ok-sf: #e5f4ec;
  --warn: #8a5800; --warn-sf: #fdf3d7;
  --err: #c22f24;  --err-sf: #fcebe9;

  --raggio: 20px;
  --raggio-s: 14px;
  --raggio-l: 26px;
  --raggio-btn: 999px;

  --ombra-card: 0 1px 2px rgba(90, 47, 176, .05), 0 6px 22px -6px rgba(90, 47, 176, .12);
  --ombra-su: 0 18px 50px -10px rgba(49, 23, 107, .4);
  --ombra-testata: 0 2px 14px rgba(90, 47, 176, .22);
  --ombra-azione: 0 6px 16px -4px rgba(224, 37, 127, .45);

  --vel-1: .15s;
  --vel-2: .28s;
  --curva: cubic-bezier(.32, .8, .32, 1);
}

/* ============================== STRUTTURA ============================== */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--testo);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* ★ S11 parte 4 (Marco, 12/09/2026 — scelta «A2» fra tre prove): la pagina non è più quasi
     bianca come le card. Sfumatura ORIZZONTALE coi due colori del marchio: viola chiaro a
     sinistra, verso il magenta a destra. Le card restano bianche e si staccano da sole. */
  background: linear-gradient(100deg, #d9c9f5 0%, #efe6fb 45%, #fadff0 100%);
  background-attachment: fixed;   /* pagine lunghe: la sfumatura non si ripete scorrendo */
}

/* ★ HUI1 (restyling, Marco 30/09/2026): nella VETRINA il viola della parte alta continua per tutta la pagina, da
   sinistra a destra (#4f2ba5 → #612399, proposta di Marco, valori dell'esperto: mockup-home\idee\
   esperto-hero-e-colori.md). Legato a body.vetrina (vetrina.php) e non a body: questo file lo usano anche 404, 503,
   la cornice della LIVE DEMO e la sua pagina terminale, che restano sul fondo chiaro qui sopra.
   Il fondo è uno strato FISSO (::before) e non `background-attachment: fixed`, che iOS ignora: così la sfumatura
   resta ferma anche sull'iPhone (⚠ da provare sul telefono vero, HUI3). */
body.vetrina { --pag-sx: #4f2ba5; --pag-dx: #612399; background: var(--pag-sx); container-type: inline-size; }
/* ★ HUI2 — `container-type` qui sopra: il body diventa il «metro» delle unità cqw. La hero e i punti della home escono
   dalla colonna fino ai bordi dello schermo con `calc(50% - 50cqw)`: 100cqw è la larghezza del body SENZA la barra di
   scorrimento. Con `vw` (che la barra la conta) su Windows con la barra classica la pagina scorreva di lato di 8 px
   (misurato 30/09: 1017 su 1009); `vw` resta come ripiego per i browser che cqw non lo conoscono. */
body.vetrina::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(224, 37, 127, .16), transparent 60%),
    linear-gradient(90deg, var(--pag-sx) 0%, #55289f 50%, var(--pag-dx) 100%);
}

.wrap { max-width: 720px; margin: 0 auto; padding: 16px; }

/* ★ S11 (Marco al collaudo, 11/09/2026): le card bianche su una pagina quasi bianca si
   staccavano solo per l'ombra: ora hanno un filo di contorno, lo stesso lilla delle pastiglie.
   ★ HUI1 (Marco, 30/09/2026, «V1»): sul fondo viola la card è CARTA QUASI BIANCA #f8f5fe e si stacca da sola: il
   contorno diventa trasparente (resta largo 2 px, così le misure dentro non cambiano) e l'ombra scende sul viola.
   ⚠ Questa regola si CAMBIA qui e non si copre più sotto (avviso dell'esperto): `.evidenza` (Prezzi, Entra) e
   `.cta-finale` sono scritte DOPO e rimettono il loro bordo. Il lilla pieno #e8defa è solo delle card della home.
   Dentro la card il grigio e il verde sono un filo più scuri: sulla carta tinta il grigio di prima scendeva a
   4,2:1 e il verde di «Gratis per sempre» a 4,1:1 (contrasti.py, soglia 4,5). */
.card {
  background: #f8f5fe;
  border: 2px solid transparent;
  border-radius: var(--raggio);
  padding: 24px 20px;
  margin: 16px 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 22px 44px -22px rgba(10, 2, 30, .85);
}
.card:not(.cta-finale) { --muted: #625679; --ok: #146c42; }             /* 5,4:1 e 5,0:1 */
.card .muted, .card figcaption { color: #625679; }

/* Titolo con icona (S10b). L'icona sta in un ::before con mask, come la barra dell'app:
   prende il colore del testo, quindi segue il tema e non e' un'immagine da ricolorare. */
.h2-icona { display: flex; align-items: center; gap: 10px; }
.h2-icona::before {
  content: ""; flex: 0 0 auto; width: 26px; height: 26px;
  background: var(--brand); 
  -webkit-mask: var(--icona) center / contain no-repeat;
          mask: var(--icona) center / contain no-repeat;
}
.i-assistenza { --icona: url('/assets/icone/assistenza.svg'); }
.i-person     { --icona: url('/assets/icone/person.svg'); }

/* Contatti anti-raccolta (S10b): nell'HTML il testo e' ROVESCIATO, qui si raddrizza.
   Serve lo span interno: bidi-override va messo sul contenitore del solo testo. */
.anti-bot > span { unicode-bidi: bidi-override; direction: rtl; }

.muted { color: var(--muted); font-size: 14px; }

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

/* ============================== TESTATA E BARRA ==============================
   ★ HUI1 (restyling, Marco 30/09/2026 — mockup-home\scelta.html, ricetta-scelta.css): testata viola con il
   pattino prima di «CodeGp», le tre pillole piene (LOGIN verde menta · LIVE DEMO oro · PROVA GRATIS magenta, decise il
   24/09 in S10f-2a), e sotto la BARRA DELL'APP: sette celle con l'icona sopra il nome (P0 + P3), pulsanti «vetro lilla»
   più chiari della pagina con un filo fra l'uno e l'altro (B3c), la voce aperta bianca. Scritte in tondo (D3: no al
   maiuscolo, a 375 «Contatti» non entrerebbe). Da 1100 px tutto su UNA riga. Resta appiccicata in alto (sticky)
   mentre la pagina scorre, come prima, e solo nella vetrina: dopo il login si è nell'app.
   Altezze misurate in Edge: 112 px a 375 e 360, 72 da 1100 in su (prima 162 / 116). Se cambiano, si ricalcolano i
   numeri della pagina Video tutorial (scroll-margin-top e altezza dei video, più sotto). */

.vet-testata {
  position: sticky;
  top: 0;
  z-index: 40;
  background: linear-gradient(180deg, #6a3fc9, #6338c6);
  color: var(--su-brand);
  padding: calc(6px + env(safe-area-inset-top)) 0 0;
  box-shadow: 0 10px 20px -14px rgba(20, 6, 60, .7);
}
/* flow-root: il margine sotto la barra resta DENTRO la testata (senza, 6 px di fondo sotto la barra) */
.vet-testata .wrap { padding-top: 0; padding-bottom: 0; display: flow-root; }
.brand-riga { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; }
.brand { display: inline-flex; align-items: center; gap: 7px; font-size: 21px; font-weight: 800;
         letter-spacing: -.01em; color: var(--su-brand); text-decoration: none; }
/* Il pattino: FILE UNICO illustrazioni/pattino-nuovo-96.webp (96×106), mostrato a 28 px. */
.brand-pattino { width: 28px; height: auto; flex: 0 0 auto; }

/* Le pillole. `.bottone.mini` da solo resta la base (la usa anche CHIUDI DEMO nella cornice della demo). */
.bottone.mini { width: auto; min-height: 0; margin: 0; padding: 9px 16px; font-size: 13px;
                border-radius: 999px; background: var(--grad-azione);
                box-shadow: 0 3px 10px rgba(0, 0, 0, .18); }
.bottone.mini:active { background: var(--accento-giu); }
.bottone.mini.t-login,
.bottone.mini.t-login:active { background: var(--grad-login); color: var(--su-login); }
.bottone.mini.t-demo,
.bottone.mini.t-demo:active  { background: var(--grad-demo);  color: var(--su-demo); }
/* Tre taglie: la gerarchia la fanno l'altezza (LOGIN 30 · LIVE DEMO 34 · PROVA GRATIS 40) e l'anello bianco di
   PROVA GRATIS. Sotto i 480 px le due parole stanno una sopra l'altra DENTRO la pillola (una <span> per parola in
   vetrina.php); da 480 affiancate. Il ::after allarga la zona del dito a 44 px senza allargare la pillola. */
.azioni-testata { display: flex; gap: 6px; align-items: center; }
.azioni-testata .bottone.mini { position: relative; display: inline-flex; flex-direction: column; align-items: center;
  justify-content: center; height: 34px; padding: 0 11px; font-size: 11.5px; line-height: 13px; font-weight: 800;
  letter-spacing: .04em; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 4px 10px -4px rgba(20, 6, 60, .6);
  transition: transform var(--vel-1) var(--curva), filter var(--vel-1) var(--curva); }
.azioni-testata .bottone.mini::after { content: ""; position: absolute; inset: -5px -3px; }
.bottone.mini.t-login { height: 30px; font-size: 11px; box-shadow: 0 2px 6px rgba(20, 6, 60, .3); }
.bottone.mini.t-login::after { inset: -7px -3px; }
.bottone.mini.t-demo  { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 4px 10px -4px rgba(180, 83, 9, .7); }
.bottone.mini.t-prova { height: 40px; padding: 0 13px; font-size: 12.5px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 2px #fff, 0 10px 22px -6px rgba(217, 32, 120, .9); }
.bottone.mini.t-prova::after { inset: -2px -3px; }
@media (min-width: 480px) { .azioni-testata .bottone.mini { flex-direction: row; gap: .32em; } }
@media (hover: hover) { .azioni-testata .bottone.mini:hover { filter: brightness(1.06); } }
.azioni-testata .bottone.mini:active { transform: translateY(1px) scale(.97); filter: brightness(.93); }
.azioni-testata a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (max-width: 370px) {                          /* a 360 marchio + tre pillole chiederebbero 334 px su 328 */
  .brand { font-size: 19px; gap: 5px; }
  .brand-pattino { width: 23px; }
  /* ★ VSL (01/10/2026, Marco: variante B): marchio · LOGIN · LIVE DEMO · PROVA GRATIS sono larghi 306 px e la colonna
     a 320 ne ha 288: la riga invadeva il margine di destra e la pagina scorreva di lato di 5 px «da computer» (il
     telefono la rimpiccioliva). Sotto i 339 px di body (100cqw: vedi body.vetrina) i sei fianchi delle pillole cedono
     quello che manca, così restano 16 px anche a destra: a 320 sono 6 px. Da 339 restano 9 px come prima (calc(9px - …)
     supera 9 e il clamp lo ferma); il minimo di 5 px tiene fino a 315. */
  .azioni-testata .bottone.mini { padding-inline: clamp(5px, calc(9px - (339px - 100cqw) / 6), 9px); }
}

/* La BARRA. ★ S10c: nessuna voce può restare fuori schermo (una voce invisibile è una voce che non esiste): prima la
   fila andava a capo, ora al telefono è una griglia di 7 celle uguali che sta sempre su una riga (a 360 ogni cella
   è larga 45 px: «Contatti» a 10 px ci sta). `minmax(0, 1fr)`: con `1fr` una cella non scende sotto la sua parola. */
.vet-nav {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  margin: 4px 0 6px;
  padding: 4px;
  border-radius: 18px;
  background: rgba(20, 6, 60, .30);
  box-shadow: inset 0 2px 5px rgba(20, 6, 60, .45), inset 0 -1px 0 rgba(255, 255, 255, .12),
              0 1px 0 rgba(255, 255, 255, .10);
}
/* B3c «vetro lilla» (Marco, 30/09): il fondo dei pulsanti è più chiaro della pagina, sennò «non risaltano». Scritta
   bianca PIENA: al bianco dell'86 % su questo vetro il contrasto scendeva a 3,9:1 (contrasti.py). */
.vet-nav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 44px; padding: 4px 0;
  border: 0; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .27), rgba(236, 228, 255, .15));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
  color: #fff; text-decoration: none;
  font-size: 10.5px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; white-space: nowrap;
  transition: background var(--vel-1), color var(--vel-1), transform var(--vel-1) var(--curva);
}
/* il filo fra un pulsante e l'altro (spento accanto alla voce aperta, che è già staccata di suo) */
.vet-nav a + a { border-left: 1px solid rgba(255, 255, 255, .30); }
.vet-nav a[aria-current], .vet-nav a[aria-current] + a { border-left-color: transparent; }
.vet-nav a[aria-current="page"] {
  color: var(--brand-2);
  background: linear-gradient(180deg, #fff, #efe9fb);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(90, 47, 176, .12), 0 4px 10px -2px rgba(20, 6, 60, .55);
}
@media (hover: hover) { .vet-nav a:not([aria-current]):hover { background: rgba(255, 255, 255, .28); } }
.vet-nav a:active { transform: scale(.93); background: rgba(255, 255, 255, .16); }
.vet-nav a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* Le ICONE. ★ R5 (Marco): la lampadina di «Idee»; ★ HUI1: un'icona per voce. Un <span> vuoto con mask, come le
   pillole dell'app: prende il colore del testo (bianca sui pulsanti, viola su quello aperto) e a voce la voce si
   sente col suo nome, non come un disegno. I disegni sono i file icone/nav-*.svg (+ idea.svg). */
.vet-nav .nav-i {
  flex: 0 0 auto; width: 20px; height: 20px;
  background: currentColor;
  -webkit-mask: var(--nav-i) center / contain no-repeat;
          mask: var(--nav-i) center / contain no-repeat;
}
.vet-nav .nav-home         { --nav-i: url('/assets/icone/nav-casa.svg'); }
.vet-nav .nav-tutorial     { --nav-i: url('/assets/icone/nav-video.svg'); }
.vet-nav .nav-funzionalita { --nav-i: url('/assets/icone/nav-funzioni.svg'); }
.vet-nav .nav-prezzi       { --nav-i: url('/assets/icone/nav-prezzi.svg'); }
.vet-nav .nav-faq          { --nav-i: url('/assets/icone/nav-faq.svg'); }
.vet-nav .nav-contatti     { --nav-i: url('/assets/icone/nav-contatti.svg'); }
.vet-nav .nav-idee         { --nav-i: url('/assets/icone/idea.svg'); }
/* «Video» / «Funzioni» nelle celle strette; «Video tutorial» / «Funzionalità» dove c'è posto (da 1240 px) */
.vet-nav .lungo { display: none; }
@media (max-width: 370px) { .vet-nav a { font-size: 10px; } }
@media (min-width: 768px) {
  .vet-nav { display: flex; justify-content: center; gap: 6px; }
  .vet-nav a { flex: 0 0 auto; flex-direction: row; gap: 6px; min-height: 40px; padding: 0 12px; font-size: 13.5px; }
  .vet-nav .nav-i { width: 17px; height: 17px; }
}
@media (min-width: 1240px) { .vet-nav .corto { display: none; } .vet-nav .lungo { display: inline; } }

/* Da 1100 px la testata sta su UNA riga: marchio · barra · pillole (la brand-riga «si scioglie» nella griglia). */
@media (min-width: 1100px) {
  .vet-testata { padding-top: 0; }
  .vet-testata .wrap { max-width: 1200px; min-height: 72px; display: grid; grid-template-columns: auto 1fr auto;
                       align-items: center; column-gap: 20px; }
  .brand-riga { display: contents; }
  .brand { grid-column: 1; grid-row: 1; }
  .azioni-testata { grid-column: 3; grid-row: 1; }
  .vet-nav { grid-column: 2; grid-row: 1; justify-self: center; margin: 0; }
  /* ★ VSL (01/10/2026, Marco: variante B): marchio, barra e pillole su una riga sono larghi 1106 px; a 1100 «da
     computer» la pagina scorreva di lato di 25 px, con la barra di scorrimento classica di Windows (body 1085) di 40,
     fino a 1139. Sotto i 1138 px di body (1106 + 2 × 16) i 14 fianchi delle voci cedono quello che manca, così restano
     16 px anche a destra: a 1085 sono 8,2 px. Da 1138 restano 12 px come prima (il clamp ferma calc(12px - …) a 12). */
  .vet-nav a { padding-inline: clamp(8px, calc(12px - (1138px - 100cqw) / 14), 12px); }
}
/* ★ VSL2 (01/10/2026, Marco: variante B): da 1240 le voci hanno le etichette lunghe («Video tutorial», «Funzionalità») e
   marchio · barra · pillole diventano larghi 1178,8 px su una colonna di 1168 (1200 − 2 × 16): la riga invadeva di
   10,8 px il margine destro e la testata non era centrata (a 1280: 56 px a sinistra, 45 a destra). Con 11 px di fianco
   invece di 12 la riga è di 1164,8 e ci sta: 56 e 56. Dopo il blocco dei 1100, sennò il suo clamp (12 px) vince. */
@media (min-width: 1240px) { .vet-nav a { padding-inline: 11px; } }

h1 { font-size: clamp(26px, 7vw, 32px); line-height: 1.14; margin: 18px 0 10px;
     letter-spacing: -.02em; font-weight: 800; }
.intro { font-size: 16px; color: var(--testo); }
/* ★ HUI1 — i testi che stanno DIRETTAMENTE sul fondo viola, fuori dalle card (blocco 3 dell'esperto): scuri com'erano
   sparirebbero (1,6:1). Titolo e introduzione in cima alle pagine, l'invito di Video tutorial, la riga «Torna alla
   home» di Privacy e Condizioni, la didascalia dello screenshot fuori card di Prezzi. */
body.vetrina main.wrap > h1 { color: #fff; }
body.vetrina main.wrap > .intro { color: rgba(255, 255, 255, .9); }
body.vetrina main.wrap > .tut-scegli { color: rgba(255, 255, 255, .8); }
body.vetrina main.wrap > p.muted { color: rgba(255, 255, 255, .78); }
body.vetrina main.wrap > p.muted a { color: #fff; text-underline-offset: 3px; }
body.vetrina main.wrap > .shot figcaption { color: rgba(255, 255, 255, .8); }

/* ---------------- HERO della home ----------------
   ★ HUI2 (restyling, Marco 30/09/2026 — mockup-home\scelta.html, ricetta-scelta.css, PIANO-HOME-UI.md «LA SCELTA
   DEFINITIVA»). Al telefono una colonna: titolo → scena (telefono e note) → azioni; da 1100 px due colonne, titolo e
   azioni a sinistra, scena a destra, alte una schermata. Sotto, in tutte e due: il video e la pillola dei tutorial.
   Il fondo: il pannello viola di sempre (::before) SFUMA negli ultimi 320 px nel viola della pagina (body.vetrina),
   così la hero non finisce con uno scalino. ⚠ La maschera e lo strato fisso della pagina vanno provati sull'iPhone
   vero (HUI3). */
.hero {
  position: relative;
  isolation: isolate;                   /* pattino, cerchio e secondo telefono (z-index negativi) restano DENTRO */
  text-align: center;
  margin: -16px calc(50% - 50vw) 0;     /* esce dal wrap: da bordo a bordo */
  margin-inline: calc(50% - 50cqw);     /* senza la barra di scorrimento (body.vetrina) */
  padding: 8px 20px 0;
  color: #fff;
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(120% 80% at 88% -10%, rgba(224, 37, 127, .38), transparent 58%),
    radial-gradient(110% 90% at -10% 110%, rgba(160, 120, 240, .42), transparent 55%),
    var(--grad-fondo);
  -webkit-mask-image: linear-gradient(#000 calc(100% - 320px), transparent);
          mask-image: linear-gradient(#000 calc(100% - 320px), transparent);
}
.hero-griglia { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "testa" "scena" "azioni"; }
.hero-testa { grid-area: testa; } .hero-scena { grid-area: scena; } .hero-azioni { grid-area: azioni; }

/* Il pattino di Marco IN TRASPARENZA dietro il titolo, grosso (350 px al 15 % al telefono, 640 px al 10 % al
   computer). FILE UNICO illustrazioni/pattino-nuovo.webp: per cambiarlo si sovrascrive il file via FTP. */
.pattino-fondo { position: absolute; z-index: -1; top: -14px; left: 50%; width: 350px; max-width: none; height: auto;
                 translate: -50% 0; rotate: -8deg; opacity: .15; pointer-events: none; }

/* Il titolo (variante H2 «categoria leggibile» dell'esperto, ritoccata da Marco): «GESTIONALE» oro maiuscolo
   spaziato; «Pattinaggio artistico a rotelle» in minuscolo (la maiuscola iniziale la mette ::first-letter), su UNA
   riga anche al computer; «La tua scuola in tasca» 32 px su una riga al telefono, 78 su due al computer.
   ⚠ «GESTIONALE» sul punto più chiaro del pattino scende a ~4,2:1: se un pattino nuovo lo schiarisse, oro #fef3c7. */
.hero h1 { margin: 0 auto 12px; max-width: 620px; color: #fff; line-height: 1.06; letter-spacing: -.015em; }
.hero .categoria { display: block; margin: 0 auto 10px; text-transform: uppercase; line-height: 1.2; }
.hero .categoria .cat-1 { display: inline-flex; align-items: center; font-size: 16px; font-weight: 800;
                          letter-spacing: .24em; color: #fde68a; }
.hero .categoria .cat-2 { display: block; margin-top: 4px; font-size: 20px; font-weight: 600; letter-spacing: -.005em;
                          text-transform: none; color: rgba(255, 255, 255, .95); }
.hero .categoria .cat-2::first-letter { text-transform: uppercase; }
.hero h1 .titolo { display: block; font-size: 32px; font-weight: 800; line-height: 1.05; letter-spacing: -.028em;
                   word-spacing: .06em; text-wrap: balance; }

/* La SCENA: il telefono con la pagina vera della famiglia (sponsor, conto, visita medica, musica), un cerchio
   tratteggiato intorno (la «pista») e le sette note col centro dell'icona SULLA linea. Posizioni calcolate dal
   costruttore dei mockup (costruisci.py, css_arco): angoli −90 −46 −23 0 23 46 90, raggio 134 a 375, 128 a 360,
   290 al computer. Al telefono la scena è larga come lo schermo (−20 px di qua e di là) e il telefono sfuma in basso.
   ★ VNF2b (01/10/2026, Marco: «non è centrata sulla pagina ma è spostata a sinistra», e in modalità desktop sul
   telefono si vede subito): le posizioni sono in px fissi, misurate a 375, e la scena partiva SEMPRE dal bordo
   sinistro: a 412 restavano 6 px a sinistra e 74 a destra, a 980 6 e 642. Ora la scena è una scatola di 375 px
   CENTRATA nella pagina (margine sinistro 50% − 187,5: a 375 è −20 come prima), spostata di 15 px a destra perché
   il disegno (telefono e note: da 6 a 338) era sbilanciato di 15 px anche a 375. Niente overflow: hidden (il
   cerchio non va tagliato a metà pagina quando lo schermo è largo; a sinistra esce dallo schermo e non scorre). */
.hero-scena { position: relative; left: 15px; width: 375px; height: 314px; margin: 4px 0 0 calc(50% - 187.5px); }
.telefono { position: absolute; left: 18px; top: 58px; width: 168px; aspect-ratio: 375 / 812; padding: 20px 6px 6px;
  border-radius: 30px; background: linear-gradient(145deg, #3a2560, #150a26); rotate: -4deg;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .10), inset 0 1px 0 rgba(255, 255, 255, .18), 0 30px 60px -18px rgba(20, 6, 60, .75);
  -webkit-mask-image: linear-gradient(#000 50%, transparent 64%); mask-image: linear-gradient(#000 50%, transparent 64%); }
.telefono img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 24px; }
.telefono picture { display: contents; }   /* ★ FCC-T: il <picture> del telefono davanti non fa da scatola: l'img resta
   alta quanto il telefono (dai 1100 px scr-23 con la BACHECA aperta, sotto scr-09 a card chiuse; home.php) */
.hero-scena .telefono { pointer-events: none; }   /* ★ VNF2b: senza l'overflow: hidden della scena, la parte sfumata
   (trasparente) del telefono scende sopra PROVA GRATIS e LIVE DEMO e ne prendeva i tocchi: è solo un'illustrazione */
.telefono::before { content: ""; position: absolute; z-index: 1; top: 5px; left: 50%; width: 46px; height: 10px;
                    translate: -50% 0; border-radius: 6px; background: #0d0619; }        /* l'isola, nella cornice */
.telefono.dietro { display: none; }                                    /* il secondo telefono solo al computer */
.arco { position: absolute; z-index: -1; left: -32px; top: 22px; width: 268px; height: 268px; border-radius: 50%;
        border: 1.5px dashed rgba(255, 255, 255, .30); box-shadow: 0 0 0 12px rgba(255, 255, 255, .04); pointer-events: none; }
.note-app { position: absolute; z-index: 1; inset: 0; margin: 0; padding: 0; list-style: none; }
.nota-app { position: absolute; display: flex; align-items: center; gap: 7px; margin: 0; padding: 4px 10px 4px 4px;
  border-radius: 12px; background: #fff; color: var(--testo); font-size: 12px; font-weight: 700; line-height: 1.15;
  text-align: left; white-space: nowrap; translate: 0 -50%;
  box-shadow: inset 0 1px 0 #fff, 0 12px 24px -10px rgba(20, 6, 60, .6); }
.nota-app .ok { color: #15803d; font-weight: 800; }                  /* il verde dell'«ok» dell'app */
/* l'icona: un quadratino viola col disegno bianco, un file per nota (mask, come le icone della barra) */
.nota-app .ico { flex: 0 0 24px; height: 24px; display: grid; place-items: center; border-radius: 8px;
                 background: var(--grad-brand); }
.nota-app .ico::before { content: ""; width: 15px; height: 15px; background: #fff;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.n-conti   { --ico: url('/assets/icone/oper.svg'); }
.n-atleta  { --ico: url('/assets/icone/atleta.svg'); }
.n-sponsor { --ico: url('/assets/icone/sponsor.svg'); }
.n-bacheca { --ico: url('/assets/icone/bacheca.svg'); }
.n-musiche { --ico: url('/assets/icone/mus.svg'); }
.n-visita  { --ico: url('/assets/icone/visita.svg'); }
.n-pista   { --ico: url('/assets/icone/pista.svg'); }
.nota-app:nth-child(1) { left: 86px;  top: 22px; }
.nota-app:nth-child(2) { left: 179px; top: 60px; }
.nota-app:nth-child(3) { left: 209px; top: 104px; }
.nota-app:nth-child(4) { left: 220px; top: 156px; }
.nota-app:nth-child(5) { left: 209px; top: 208px; }
.nota-app:nth-child(6) { left: 179px; top: 252px; }
.nota-app:nth-child(7) { left: 86px;  top: 290px; }

/* Le AZIONI: PROVA GRATIS e LIVE DEMO affiancati, ognuno con la sua riga sotto; due spunte (disegnate in CSS: sul
   telefono «✓» diventerebbe un'emoji); la telefonata col bottone ridotto (★ TEL: resta un bottone, Marco 28/09).
   Contrasti (contrasti.py, 30/09): PROVA GRATIS parte da #d92078 (dalla cima più chiara era 3,7:1 → 4,7:1). */
.azioni-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 360px; margin: 18px auto 0; }
.hero .azioni-hero .bottone { display: flex; align-items: center; justify-content: center; margin: 0; max-width: none;
  min-height: 52px; padding: 0 8px; font-size: 15.5px; letter-spacing: .03em; }
.hero .azioni-hero .b-prova {
  background: linear-gradient(180deg, #d92078 0%, #c81c6e 48%, #b41a63 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(0, 0, 0, .18),
              0 0 0 2px rgba(255, 255, 255, .85), 0 14px 32px -10px rgba(217, 32, 120, .75); }
.hero .azioni-hero .b-demo { background: var(--grad-demo); color: var(--su-demo);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -3px 0 rgba(0, 0, 0, .14), 0 10px 22px -10px rgba(180, 83, 9, .8); }
.azione-nota { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.3; font-weight: 500;
               color: rgba(255, 255, 255, .85); text-align: center; }
.spunte { list-style: none; margin: 12px auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center;
          gap: 4px 14px; max-width: 360px; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: rgba(255, 255, 255, .92); }
.spunte li { display: inline-flex; align-items: center; gap: 7px; }
.spunte li::before { content: ""; flex: 0 0 auto; width: 5px; height: 10px; margin: -3px 1px 0 2px;
                     border: solid #bbf7d0; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.hero .invito-tel.ridotto { max-width: 320px; margin-top: 12px; }         /* a 300 px la frase andava a capo */
.hero .invito-tel.ridotto a { min-height: 44px; padding: 11px 14px; font-size: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 8px 18px -8px rgba(160, 50, 210, .6); }

@media (max-width: 370px) {                                   /* 360: cerchio più piccolo, raggio 128 */
  /* ★ VNF2b: la scatola di 360 al centro; il disegno va da 0 a 319, quindi 20 px a destra */
  .hero-scena { left: 20px; width: 360px; margin-left: calc(50% - 180px); }
  .hero .categoria .cat-2 { font-size: 19px; }
  .hero h1 .titolo { font-size: 30.5px; }
  .telefono { left: 12px; width: 160px; }
  .arco { left: -36px; top: 28px; width: 256px; height: 256px; }
  .nota-app { font-size: 11.5px; }
  .nota-app:nth-child(1) { left: 76px;  top: 28px; }
  .nota-app:nth-child(2) { left: 165px; top: 64px; }
  .nota-app:nth-child(3) { left: 194px; top: 106px; }
  .nota-app:nth-child(4) { left: 204px; top: 156px; }
  .nota-app:nth-child(5) { left: 194px; top: 206px; }
  .nota-app:nth-child(6) { left: 165px; top: 248px; }
  .nota-app:nth-child(7) { left: 76px;  top: 284px; }
}
@media (min-width: 1100px) {                                  /* due colonne, alte una schermata sotto la testata (72) */
  .hero { padding: 0 40px; }
  .hero-griglia { max-width: 1160px; min-height: calc(100svh - 72px); margin: 0 auto;
                  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "testa scena" "azioni scena";
                  column-gap: 56px; align-content: center; align-items: center; text-align: left; }
  .hero-testa { align-self: end; } .hero-azioni { align-self: start; }
  /* colonna di sinistra allineata a sinistra: via i margini automatici orizzontali (col «.hero .hero-griglia»
     davanti, sennò perdono contro .spunte e .azioni-hero) */
  .hero .hero-griglia .hero-testa > *, .hero .hero-griglia .hero-azioni > *,
  .hero .hero-griglia .hero-azioni .invito-tel { margin-left: 0; margin-right: 0; }
  .pattino-fondo { top: 0; left: max(0px, calc(50% - 640px)); translate: none; width: 640px; opacity: .10; }
  .hero h1 { margin-bottom: 26px; }
  .hero .categoria { margin-bottom: 16px; }
  .hero .categoria .cat-1 { font-size: 20px; letter-spacing: .26em; }
  .hero .categoria .cat-2 { margin-top: 8px; font-size: 36px; letter-spacing: -.012em; white-space: nowrap; }
  .hero h1 .titolo { font-size: 78px; line-height: .98; letter-spacing: -.038em; word-spacing: .04em; }
  .hero-scena { left: 0; width: auto; height: 660px; margin: 0; overflow: visible; }
  /* ★ VSL (01/10/2026): il disegno va da 0 a 548 px (la nota «Bacheca» è la più a destra) e la colonna della scena è
     larga (schermo − 136) / 2: sotto i 1180 px la nota usciva dallo schermo e la hero la tagliava (a 1100 di 26 px,
     con la barra classica anche Sponsor e Musiche). Qui la scena si sposta a sinistra di quello che manca (left in %
     è della colonna): a 1180 restano 14 px fra la nota e il bordo, e da lì in giù restano 14. Da 1180 left 0 come prima
     (Marco, 01/10: ok sulla scena spostata). */
  .hero-scena { left: min(0px, calc(100% - 522px)); }
  .telefono { left: 15px; top: 50px; width: 250px; padding: 26px 8px 8px; border-radius: 40px; rotate: -3deg;
              -webkit-mask-image: none; mask-image: none; }
  .telefono img { border-radius: 32px; }
  .telefono::before { top: 8px; width: 64px; height: 12px; }
  .telefono.dietro { display: block; z-index: -1; left: 173px; top: 118px; width: 204px; rotate: 7deg; }
  .arco { left: -150px; top: 32px; width: 580px; height: 580px; }
  .nota-app { gap: 9px; padding: 7px 13px 7px 7px; border-radius: 14px; font-size: 13.5px; }
  .nota-app .ico { flex-basis: 28px; height: 28px; border-radius: 9px; }
  .nota-app .ico::before { width: 17px; height: 17px; }
  .nota-app:nth-child(1) { left: 119px; top: 32px; }
  .nota-app:nth-child(2) { left: 320px; top: 113px; }
  .nota-app:nth-child(3) { left: 386px; top: 209px; }
  .nota-app:nth-child(4) { left: 409px; top: 322px; }
  .nota-app:nth-child(5) { left: 386px; top: 435px; }
  .nota-app:nth-child(6) { left: 320px; top: 531px; }
  .nota-app:nth-child(7) { left: 119px; top: 612px; }
  .azioni-hero { grid-template-columns: 220px 220px; max-width: none; }
  .spunte { justify-content: flex-start; max-width: 520px; }
}
.cta-finale .bottone { display: block; max-width: 340px; margin: 18px auto 0; }

/* Lo screenshot del saldo che stava nella hero fino all'11/09 (★ S11): la riga in home.php è commentata, la regola
   resta per rimetterlo. */
.hero-shot { margin: 30px auto -64px; position: relative; z-index: 1; }

/* Screenshot con didascalia (didascalie identiche ovunque, PIANO-MEDIA §1):
   ogni screenshot indossa la cornice del telefono. */
.shot { margin: 18px auto 8px; max-width: 290px; }
.shot img { width: 100%; height: auto; display: block;
            border: 7px solid #221338; border-radius: 34px;
            box-shadow: 0 24px 50px -12px rgba(49, 23, 107, .45); }
.shot figcaption { font-size: 13px; color: var(--muted); text-align: center;
                   margin-top: 10px; font-style: italic; }
.hero .shot figcaption { color: rgba(255, 255, 255, .8); }
.shots2 { display: grid; grid-template-columns: 1fr; gap: 6px 14px; }
@media (min-width: 560px) { .shots2 { grid-template-columns: 1fr 1fr; align-items: start; } }
/* ★ IMP6-1: UNA schermata da COMPUTER (card 9): orizzontale, larga quanto la colonna, cornice sottile da schermo invece
   di quella del telefono. Misurata nel mockup mockup-home/imp6-card9 (variante A scelta da Marco). */
.shot.shot-pc { max-width: 560px; }
.shot.shot-pc img { border-width: 3px; border-radius: 10px; }

/* ★ S10e — l'etichetta del LATO sopra gli screenshot dei punti della home (SCHEDA
   FAMIGLIA / INSEGNANTE / SOCIETÀ, da VETRINA_SHOT_LATO). Pastiglia piccola in
   maiuscoletto con un filo di spaziatura: si legge, non urla. Tre tinte della palette
   Lilla, una per lato, agganciate a `data-lato` (il valore tecnico, non la scritta).
   Sta DENTRO la <figure>, prima dell'immagine: in .shots2 a due colonne le due figure
   partono dallo stesso bordo in alto, quindi le due etichette stanno alla stessa altezza.
   ⚠ `.shot > .shot-lato` e non `.shot-lato` da solo: `.punto p { margin: 0 0 6px }` pesa
   di più di una classe sola e toglieva il `margin: auto` — l'etichetta finiva appoggiata a
   sinistra invece che centrata sopra il telefono (visto a schermo, non dai test). */
.shot > .shot-lato { display: block; width: fit-content; margin: 0 auto 10px; padding: 4px 12px;
             border-radius: 999px; font-size: 11.5px; font-weight: 800; line-height: 1.3;
             letter-spacing: .09em; }
.shot-lato[data-lato="famiglia"]   { background: #fce8f2; color: var(--accento-giu); }
.shot-lato[data-lato="insegnante"] { background: var(--brand-chiaro); color: var(--brand-testo); }
.shot-lato[data-lato="societa"]    { background: var(--brand-fondo); color: var(--su-brand); }

/* ---------------- i punti della home ----------------
   ★ HUI2 (Marco, 30/09/2026): stanno dentro `.punti`. Il contenitore è largo quanto lo schermo e rimette la colonna
   col padding: così `overflow-x: clip` taglia le card che entrano di lato (C1) sul bordo dello SCHERMO e non su
   quello della colonna, e la pagina non scorre di lato mentre entrano. */
.punti { overflow-x: clip; margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%);
         margin-inline: calc(50% - 50cqw); padding-inline: calc(50cqw - 50%); }   /* cqw: vedi body.vetrina */
.hero + .punti { margin-top: 24px; }

.punto h2 { display: flex; align-items: baseline; gap: 12px; font-size: 19px; margin: 0 0 10px;
            letter-spacing: -.015em; font-weight: 800; }
.punto .n { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
            width: 34px; height: 34px; border-radius: 12px;
            background: var(--grad-azione);
            color: var(--su-accento); font-size: 16px; font-weight: 800;
            transform: translateY(7px); box-shadow: 0 4px 10px rgba(224, 37, 127, .3); }
.punto p { margin: 0 0 6px; }
/* ★ HUI2 (Marco, 30/09/2026, «11a»): le card della home sono LILLA CHIARO #e8defa — solo qui, dove sono piccole e le
   schermate bianche le alleggeriscono (sulle card grandi delle altre pagine era troppo scuro: lì resta la carta
   quasi bianca di .card). Didascalie e grigi #625679 (da .card), testo ~12:1. Niente bordo: si staccano dal viola. */
.punti .punto { background: #e8defa; border: 0; }

/* CARTA COMPATTA: sul telefono le due schermate stanno affiancate, più piccole (a 375 una card sta quasi intera in
   una schermata). */
@media (max-width: 559px) {
  .punto .shots2 { grid-template-columns: 1fr 1fr; gap: 0 10px; align-items: start; }
  .punto .shot { max-width: none; margin: 14px 0 0; }
  .punto .shot img { border-width: 4px; border-radius: 20px; box-shadow: 0 14px 28px -10px rgba(49, 23, 107, .45); }
  .punto .shot > .shot-lato { font-size: 9.5px; padding: 3px 8px; letter-spacing: .06em; margin-bottom: 8px; }
  .punto .shot figcaption { font-size: 12px; line-height: 1.35; margin-top: 8px; }
}

/* (Qui stava la C1 «ENTRATA ALTERNATA» del 30/09: TOLTA con il carosello (★ CAR, 02/10/2026), era legata allo
   scorrimento verticale. Il carosello è in FONDO a questo file, sezione «CAROSELLO DEI PUNTI».) */

/* La fascia «Vuoi toccarlo con mano?» (★ CAR: subito dopo il carosello): vetro dorato sul viola, col bottone oro della
   LIVE DEMO. */
.fascia-demo { text-align: center; color: #fff;
               background: linear-gradient(135deg, rgba(253, 230, 138, .16), rgba(245, 158, 11, .08));
               border: 1.5px solid rgba(253, 230, 138, .55); box-shadow: 0 18px 40px -22px rgba(10, 2, 30, .8); }
.fascia-demo h2 { margin: 0 0 6px; color: #fff; font-size: 22px; }
.fascia-demo p { color: rgba(255, 255, 255, .92); }
.fascia-demo .bottone { display: block; max-width: 300px; margin: 14px auto 0; background: var(--grad-demo); color: var(--su-demo); }

/* ---------------- card 7: l'infografica dei quattro livelli (R6) ----------------
   Una tabella vera nel markup, larga come la card. Il telefono è il caso normale, quindi
   la regola di base è quella STESA: ogni riga diventa un riquadro col titolo sopra e le
   quattro voci sotto (la parola del ruolo la mette `content: attr(data-ruolo)`), così a
   375 px non c'è NIENTE da scorrere di lato. Da 400 px le quattro voci si mettono a due a
   due, da 560 px torna la tabella con le intestazioni. `overflow-x: auto` sta sul
   contenitore e non sulla pagina: se un giorno la tabella non ci stesse, scorre solo lei.
   Testo per i lettori di schermo in ogni cella (`.sr-solo`): un segno disegnato dal CSS,
   da solo, non si legge. */
.livelli-box { overflow-x: auto; margin: 14px 0 0; }
.livelli { width: 100%; border-collapse: collapse; }
.livelli, .livelli thead, .livelli tbody, .livelli tr, .livelli th, .livelli td { display: block; }
.livelli thead { display: none; }                  /* i ruoli li dice ogni riga, uno per uno */
.livelli tbody tr { display: grid; grid-template-columns: 1fr; gap: 2px 14px;
                    border: 1.5px solid var(--bordo); border-radius: var(--raggio-s);
                    background: var(--sf-card); padding: 12px 14px; margin: 0 0 10px; }
.livelli tbody th { grid-column: 1 / -1; text-align: left; font-size: 15px; font-weight: 700;
                    padding: 0 0 8px; }
.livelli td { display: flex; align-items: center; justify-content: space-between; gap: 10px;
              padding: 3px 0; font-size: 14px; color: var(--muted); }
.livelli td::before { content: attr(data-ruolo); }
.livelli-legenda { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 4px 0 0;
                   font-size: 13px; color: var(--muted); }
.livelli-legenda span { display: inline-flex; align-items: center; gap: 6px; }

/* I tre segni: la spunta e la lineetta le disegna il CSS (nessun carattere speciale, che
   su un telefono potrebbe uscire come emoji colorata); il lucchetto è il file dell'app,
   tinto con una maschera — stessa immagine che le insegnanti vedono sulle card chiuse. */
.livelli-box .segno { flex: 0 0 auto; position: relative; display: inline-block;
                      width: 16px; height: 16px; }
.livelli-box .liv-si .segno::before { content: ''; position: absolute; left: 5px; top: 1px;
                                      width: 5px; height: 10px; border: solid var(--ok);
                                      border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.livelli-box .liv-no .segno::before { content: ''; position: absolute; left: 2px; top: 7px;
                                      width: 12px; height: 2px; border-radius: 1px;
                                      background: var(--bordo-input); }
.livelli-box .liv-chiuso .segno::before {
  content: ''; position: absolute; inset: 1px; background: var(--warn);
  -webkit-mask: url('/assets/icone/lucchetto.svg') center / contain no-repeat;
  mask: url('/assets/icone/lucchetto.svg') center / contain no-repeat;
}

@media (min-width: 400px) {
  .livelli tbody tr { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 560px) {
  .livelli { display: table; }
  .livelli thead { display: table-header-group; }
  .livelli tbody { display: table-row-group; }
  .livelli tbody tr { display: table-row; border: 0; border-radius: 0; background: none;
                      padding: 0; margin: 0; }
  .livelli th, .livelli td { display: table-cell; border-bottom: 1px solid var(--bordo);
                             padding: 10px 6px; vertical-align: middle; }
  .livelli thead th { font-size: 12px; color: var(--muted); text-transform: uppercase;
                      letter-spacing: .04em; font-weight: 700; text-align: center;
                      vertical-align: bottom; }
  .livelli thead th:first-child { text-align: left; }
  .livelli tbody th { font-size: 14px; font-weight: 400; color: var(--testo); width: 44%; }
  .livelli td { text-align: center; }
  .livelli td::before { content: none; }
  .livelli-box .segno { display: block; margin: 0 auto; }
  .livelli tbody tr:last-child th, .livelli tbody tr:last-child td { border-bottom: 0; }
  .livelli-legenda { margin-top: 8px; }
}

/* Testo per i soli lettori di schermo: c'è, ma non occupa spazio (come .sr-solo di app.css). */
.sr-solo { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
           overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* La cornice "Scritto da bordo pista": una testimonianza, non una card qualsiasi. */
.cornice { background: var(--sf-tinta); position: relative; padding-top: 30px; }
.cornice::before { content: '\201C'; position: absolute; top: -6px; left: 16px;
                   font-size: 84px; line-height: 1; color: var(--brand);
                   opacity: .28; font-weight: 800; }
.cornice h2 { margin-top: 0; }

/* La chiusura: pannello magenta→viola con la CTA bianca. */
/* ★ HUI1: sul fondo viola il filo è un vetro bianco e l'ombra scende; testo in bianco PIENO (al 92 % era 4,2:1 sul
   magenta, contrasti.py). */
.cta-finale { text-align: center; background: linear-gradient(160deg, var(--accento), #8a2bd8 92%);
              color: #fff; border-color: rgba(255, 255, 255, .18);   /* ★ S11: il contorno lilla stonava sul magenta */
              box-shadow: 0 24px 50px -24px rgba(10, 2, 30, .9); }
.cta-finale h2 { margin-top: 0; color: #fff; font-size: 22px; }
.cta-finale p { color: #fff; }
.cta-finale a { color: #fff; }
.cta-finale .muted { color: rgba(255, 255, 255, .78); font-size: 14px; }
/* La seconda strada in fondo alle pagine (S10b): NON e' una nota a margine, e' l'altra
   scelta possibile per chi non vuole registrarsi subito. 17px come .contatto-riga. */
.cta-finale .alt-cta { color: #fff; font-size: 17px; margin: 14px 0 0; }
.cta-finale .alt-cta a { color: #fff; text-underline-offset: 3px; }
.cta-finale .bottone { background: #fff; color: var(--accento-giu);
                       box-shadow: 0 10px 26px rgba(0, 0, 0, .28); }
.cta-finale .bottone:active { background: var(--sf-tinta); }
.cta-finale .shot figcaption { color: #fff; }                 /* ★ HUI1: all'80 % era 3,5:1 */

/* ★ TEL — «Preferisci una telefonata di 5 minuti?»: sotto ogni PROVA GRATIS (mai nella testata).
   ★ 24/09 (Marco, sul sito vero): come riga di testo non si vedeva → «fallo come PROVA GRATIS,
   magari un colore leggermente diverso». Stessa forma, altezza e larghezza del bottone (48 px,
   max 340, tutto tondo), un colore parente ma diverso: fucsia-orchidea (--grad-tel) dove PROVA
   GRATIS e' magenta (apertura; il viola del marchio si confondeva col fondo, Marco 24/09), lilla chiaro con scritta viola dove PROVA GRATIS e' bianco (chiusure).
   La cornetta e' un ::before con mask come la lampadina di «Idee»: segue il colore del testo. */
.invito-tel { max-width: 340px; margin: 12px auto 0; }
.invito-tel a { display: block; min-height: 48px; padding: 13px 16px; border-radius: var(--raggio-btn);
                background: var(--grad-tel); color: #fff; border: 1.5px solid var(--velo-2);
                box-shadow: 0 10px 26px rgba(160, 50, 210, .45);
                font-size: 15px; font-weight: 800; letter-spacing: .01em; line-height: 1.25;
                text-align: center; text-decoration: none; text-wrap: balance; }
.invito-tel a:hover { filter: brightness(1.08); }
.invito-tel a:active { transform: translateY(1px); }
.invito-tel a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.cta-finale .invito-tel a { background: var(--brand-chiaro); color: var(--brand-2);
                            border-color: transparent; box-shadow: 0 8px 20px rgba(0, 0, 0, .2); }
.invito-tel a::before {
  /* In linea col testo, non a parte: se sul telefono la scritta va su due righe (nelle chiusure,
     piu' strette) la cornetta resta attaccata alla prima parola e il blocco resta centrato. */
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: -3px 8px -1px 0;
  vertical-align: middle;
  background: currentColor;
  -webkit-mask: url('/assets/icone/telefono.svg') center / contain no-repeat;
  mask: url('/assets/icone/telefono.svg') center / contain no-repeat;
}

/* Video demo e segnaposto.
   ★ S9m parte 2: i video sono VERTICALI (750×1624, il telefono). A tutta colonna, su un
   computer, il lettore diventava 648×1403 e usciva dallo schermo: larghezza massima 360 px
   — la misura di un telefono — e centrato. Sul telefono la colonna è già più stretta e non
   cambia niente. Vale per i tutorial e per la presentazione in home.
   ★ S11 (Marco, 11/09/2026): anche largo 360 px il video era alto 780 — sul telefono non
   entrava sotto la testata appiccicata e sul PC stava al limite. Ora comanda l'ALTEZZA e la
   larghezza segue il formato (aspect-ratio):
       altezza = schermo visibile − testata − margini, fra 360 e 640 px
       telefono:  100svh − 190  (testata 158 + 16 sopra + 16 sotto)
       da 768 px: 100svh − 150  (testata 114 + margini)
   `svh` è l'altezza con le barre del browser VISIBILI, cioè quella di quando la pagina si
   apre: il video entra intero subito. La riga con `vh` prima è il ripiego per i browser che
   `svh` non lo conoscono. Misure: 375×812 → 287×622, 1366×657 → 234×507, schermo grande →
   296×640 (prima 360×780). Se cambia l'altezza della testata, i due numeri si ricalcolano.
   ★ S11 (Marco al collaudo, 11/09/2026): il video indossa la CORNICE DEL TELEFONO degli
   screenshot (stesso bordo, stesso raggio di `.shot img`). `box-sizing: content-box` perché
   il formato 750/1624 valga per l'IMMAGINE e non per immagine+cornice (con border-box il
   video restava più stretto del suo riquadro, con due bande sopra e sotto); l'altezza qui
   sotto è quindi quella del video SENZA i 7+7 px del bordo, e il totale resta come prima
   (190+14 = 204, 150+14 = 164, 640−14 = 626).
   ★ HUI1 (30/09/2026): la testata nuova è più bassa — misurata in Edge 112 px fino a 767, 108 da 768 a 1099, 72 da
   1100 (su una riga). Stessi margini di prima (32 al telefono, 36 da 768):
       fino a 1099: 100svh − 158  (112 + 32 + 14 = 108 + 36 + 14 = 158: per caso lo stesso numero)
       da 1100:     100svh − 122  (72 + 36 + 14) */
.video { display: block; margin: 0 auto; max-width: calc(100% - 14px); width: auto;
         aspect-ratio: 750 / 1624; box-sizing: content-box;
         height: clamp(346px, calc(100vh - 158px), 626px);
         height: clamp(346px, calc(100svh - 158px), 626px);
         border: 7px solid #221338; border-radius: 34px; background: #221338; }
@media (min-width: 1100px) {
  .video { height: clamp(346px, calc(100vh - 122px), 626px);
           height: clamp(346px, calc(100svh - 122px), 626px); }
}
/* ★ S11 parte 4 (Marco, 12/09/2026): la BOLLA col play in mezzo al video RESTA — «mi piace,
   invoglia a cliccarci sopra». La disegna il lettore del telefono; sul computer non c'è e non
   si può aggiungere senza JavaScript (la vetrina non ne ha, e il selettore CSS `video:paused`
   oggi non è supportato: provato in Edge 152). Quando si rifaranno i video, la bolla si potrà
   disegnare nella LOCANDINA (il .jpg del poster), che sparisce da sola appena parte il video:
   così si vedrebbe anche sul computer. Qui non si spegne niente. */

/* ★ S11: nella hero della home il video prende il posto del telefono con lo screenshot, ma
   resta TUTTO dentro il pannello viola. ⚠ Niente sporgenza come `.hero-shot` (−64 px): la
   hero ha `overflow: hidden` e taglierebbe il fondo del video, cioè la barra dei comandi
   (visto in Edge l'11/09). Senza sporgenza la sezione dopo non ha più bisogno degli 84 px.
   ★ HUI2: il video e la pillola stanno in `.hero-sotto`, sotto le azioni; lo stacco dai punti è `.hero + .punti`. */
.hero .video { margin: 30px auto 28px; box-shadow: 0 24px 50px -12px rgba(0, 0, 0, .55); }
/* ★ GO (Marco, 17/09/2026): la pillola sotto il video della home porta alla pagina Video
   tutorial. Vetro chiaro sul viola (com'era il LOGIN della testata prima di S10f-2a), non fucsia: il
   bottone d'azione della hero resta uno solo, PROVA GRATIS. La riga piccola sotto dice che
   cosa si trova di là. Il video perde metà del suo margine sotto per stare vicino alla pillola. */
.hero .video:has(+ .hero-tutorial) { margin-bottom: 16px; }
.hero-tutorial { margin: 0 auto; padding: 0 0 30px; max-width: 360px; }
.pillola-tutorial { display: block; padding: 13px 20px; border-radius: 999px;
                    background: var(--velo-1); border: 1.5px solid var(--velo-2);
                    color: #fff; font-weight: 700; font-size: 16px; text-decoration: none; }
.pillola-tutorial:hover, .pillola-tutorial:focus-visible { background: var(--velo-2); }
.pillola-tutorial:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.hero-tutorial span { display: block; margin-top: 8px; font-size: 13px; color: rgba(255, 255, 255, .72); }
.video-attesa { border: 1.5px dashed var(--bordo-input); border-radius: var(--raggio-s);
                padding: 14px; color: var(--muted); font-size: 14px; background: var(--sf-tinta); }

/* ---------------- listino prezzi ---------------- */

.evidenza { border: 2px solid var(--accento); box-shadow: 0 0 0 3px var(--anello), var(--ombra-card); }
.evidenza h2 { margin-top: 0; }
.tab-scroll { overflow-x: auto; }
.listino { width: 100%; border-collapse: collapse; font-size: 16px; margin: 8px 0; }
.listino th, .listino td { padding: 12px 8px; text-align: left; border-bottom: 1px solid var(--bordo); }
.listino th { font-size: 12px; color: var(--muted); text-transform: uppercase;
              letter-spacing: .06em; }
.listino td { font-variant-numeric: tabular-nums; }
.listino tr:last-child td { border-bottom: 0; }
.listino .gratis-riga td { color: var(--ok); font-weight: 700; }

/* Tabella dei canoni (S10b): NON si scrivono i totali di 3 e 12 mesi. Quello che deve
   passare e' il costo AL MESE e il fatto che l'anno sconta il 20%; una cifra grossa da
   quattro zeri accanto la farebbe leggere come "quanto ti chiedo subito". */
.listino.canoni td { vertical-align: middle; }
.listino.canoni .canone { font-size: 19px; font-weight: 700; color: var(--testo); white-space: nowrap; }
.listino.canoni .al-mese { display: block; font-size: 11px; font-weight: 400; color: var(--muted);
                           text-transform: uppercase; letter-spacing: .06em; }
.listino.canoni .sconto { display: inline-block; font-weight: 700; font-size: 14px;
                          color: var(--brand-testo); background: var(--brand-chiaro);
                          border-radius: 999px; padding: 3px 12px; white-space: nowrap; }
.regole { padding-left: 20px; }
.regole li { margin: 0 0 12px; font-size: 16px; }
.regole li::marker { color: var(--accento); }

/* ---------------- FAQ: <details> nativi, niente JavaScript ---------------- */

.faq details { padding: 0; }
.faq summary { cursor: pointer; font-weight: 700; font-size: 16px; padding: 17px 20px;
               list-style: none; display: flex; align-items: center; justify-content: space-between;
               gap: 10px; -webkit-tap-highlight-color: transparent; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  flex: 0 0 auto;
  width: 9px; height: 9px;
  border-right: 2.5px solid var(--brand-testo);
  border-bottom: 2.5px solid var(--brand-testo);
  transform: rotate(45deg);
  transition: transform var(--vel-2) var(--curva);
}
.faq details[open] summary::after { transform: rotate(225deg); }
.faq details[open] summary { padding-bottom: 4px; color: var(--brand-testo); }
.faq details p { padding: 0 20px 17px; margin: 0; font-size: 16px;
                 animation: comparsa var(--vel-2) var(--curva); }
.faq details.card { padding: 0; margin: 10px 0; }

/* ---------------- tutorial ---------------- */

/* ★ S10c — l'indice e' una GRIGLIA di pastiglie a 3 colonne, tutte della stessa larghezza.
   ★ Fase F (17/09/2026): le pastiglie sono le 8 pagine dell'app (3+3+2), non più gli 11
   argomenti di prima. ★ GO: + la Presentazione in testa (3+3+3). ★ T10: + Prova pista in
   fondo (3+3+3+1, variante A scelta da Marco: dopo arriva la LIVE DEMO accanto). ★ T11: + la
   LIVE DEMO accanto a lei (3+3+3+2), pastiglia uguale alle altre (Marco, 26/09: l'oro della
   testata vuol dire «apri la demo», qui si apre il video). Le etichette lunghe non ci stanno in tre colonne su 375 px: nella
   griglia va il campo `breve` di tutorialIndice(), il titolo per esteso resta nell'<h3>. */
/* minmax(0, 1fr) e non 1fr: con `1fr` una colonna non scende MAI sotto la parola piu'
   lunga che contiene, e "Configurazione" da sola sfondava i 375 px facendo uscire tutta
   la card dallo schermo (misurato). Con minmax(0, …) le tre colonne restano larghe
   uguali e la parola va a capo o si spezza. */
.tut-indice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
              margin-top: 10px; font-size: 12.5px; }
/* ★ HUI1 — i pulsanti «T7» (Marco, 30/09/2026: le pastiglie erano «dello stesso colore della card e non si vedono,
   pillole brutte senza design»). Tessera bianca con filo lilla e ombra; sopra il NOME su una riga, sotto il PLAY e
   la DURATA stretti al centro (griglia 1fr auto auto 1fr). La durata è una <span class="tut-durata"> scritta da
   tutorial.php con videoDurata(), cioè letta dal file MP4: mai a mano. 3 colonne al telefono, 6 da 700 px.
   Il play è un piccolo SVG (cerchio + triangolo) in data: — la CSP lo permette (img-src 'self' data:). */
.tut-indice a { display: grid; grid-template-columns: 1fr auto auto 1fr;
                grid-template-areas: "nome nome nome nome" ". play durata .";
                align-items: center; justify-items: center; column-gap: 5px; row-gap: 6px;
                min-height: 64px; padding: 9px 4px 8px; text-align: center;
                border-radius: 14px; background: #fff; border: 1.5px solid #d9cdf3;
                color: var(--brand-testo); text-decoration: none; font-weight: 700; line-height: 1.2;
                letter-spacing: -.01em;
                box-shadow: inset 0 1px 0 #fff, 0 6px 14px -8px rgba(49, 23, 107, .45);
                transition: transform var(--vel-1) var(--curva), box-shadow var(--vel-1) var(--curva),
                            border-color var(--vel-1); }
.tut-indice .tut-nome { grid-area: nome; white-space: nowrap; }        /* «Presentazione» su una riga */
.tut-indice a::before { grid-area: play; content: ""; width: 18px; height: 18px;
                        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%237a4bd6'/%3E%3Cpath d='M8 6v8l6-4z' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat; }
.tut-indice .tut-durata { grid-area: durata; justify-self: start; font-size: 12px; font-weight: 600;
                          color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: 0; }
@media (hover: hover) { .tut-indice a:hover { border-color: var(--brand); transform: translateY(-1px);
                        box-shadow: inset 0 1px 0 #fff, 0 10px 18px -8px rgba(49, 23, 107, .55); } }
.tut-indice a:active { transform: translateY(1px) scale(.98); }
.tut-indice a:focus-visible { outline: 3px solid var(--accento); outline-offset: 2px; }
@media (max-width: 380px) { .tut-indice a { padding-inline: 2px; }
                            .tut-indice .tut-nome { font-size: 12px; letter-spacing: -.02em; } }
/* ★ VID14-b (13/10/2026): «Import atlete Excel» (Marco) non sta su una riga in una tessera (usciva dai bordi a 375 e
   da 700 px, sei colonne): i due Import vanno a capo quando non ci stanno, con interlinea e spazi stretti perché la
   tessera resti alta 64 px (la riga della griglia, e con lei lo scroll-margin-top qui sotto, non cambia; misurato
   in Edge da 360 a 1280). */
.tut-indice a[href="#import-atlete"], .tut-indice a[href="#import-musiche"] { row-gap: 3px; padding-block: 6px 5px; }
.tut-indice a[href="#import-atlete"] .tut-nome,
.tut-indice a[href="#import-musiche"] .tut-nome { white-space: normal; line-height: 1.05; }
@media (min-width: 700px) { .tut-indice { grid-template-columns: repeat(6, minmax(0, 1fr)); font-size: 13px; } }

/* UNA SEZIONE ALLA VOLTA, senza bisogno di JavaScript. Le sezioni sono chiuse; si apre solo
   quella puntata dall'indirizzo — clic sull'indice o link ricevuto per email. Il browser
   scorre da solo sulla sezione aperta e `scroll-margin-top` gli dice quanto spazio lasciare
   sopra, cosi' l'indice resta in alto e il contenuto compare sotto invece di spingerlo fuori
   schermo.

   ★ Il numero NON e' a occhio, si ricava a 375 px (S10c 2ª mano, rifatto nella fase F con
   la griglia a tre righe):
       sezione aperta a S px dall'inizio del documento
     − indice a I px, che deve stare 8 px sotto la testata appiccicata (T px)
     ⇒ si deve fermare a S − (I − T − 8).
   Misure della fase F in Edge 375×812 (con la pillola «Idee» di R5 la testata è alta 162,
   non più 158): S = 600, I = 357, T = 162 ⇒ 413.
   ★ T10 (26/09/2026): con la Prova pista le pastiglie sono 10 (la Presentazione e 9 pagine,
   3+3+3+1) e la griglia ha una RIGA IN PIÙ: 136 → 184 px, cioè +48 (40 di pastiglia e 8 di
   spazio) ⇒ 413 + 48 = 461. Misurato in Edge: aprendo una sezione la griglia sta a 170 px
   dall'alto, 8 sotto la testata, a 375 e a 360 (a 1366 la testata è 116 e resta più spazio).
   ★ T11: con la LIVE DEMO (11 pastiglie, 3+3+3+2) le righe restano quattro e il numero non
   cambia: rimisurato in Edge, aprendo #live-demo la griglia sta 8 px sotto la testata a 375
   e 9 a 360 (dev/mockup/tutorial-live-demo.*).
   ★ HUI1 (30/09/2026): testata 112 invece di 162 e tessere T7 alte 64 invece di 40 (una riga di griglia = 64 + 8 =
   72 px). Col numero della formula scritto meglio: la sezione aperta sta sotto la griglia di (altezza della griglia
   + margini fino alla sezione) = 328 px, e la griglia deve stare a T + 8 = 120 ⇒ 328 + 120 = 448. Misurato in Edge a
   375: aprendo #musiche la griglia sta a 119,7 px dall'alto, 8 sotto la testata. Non dipende da quante righe fa
   l'introduzione (sposta di uguale griglia e sezione), sì dalle RIGHE della griglia: +72 per ogni riga in più.
   Se un giorno cambia l'altezza della testata o dell'introduzione, questo numero si
   RICALCOLA con la stessa formula — e il test 'F tutorial' lo tiene fermo perché nessuno
   lo cambi per sbaglio.
   ★ MER-VID-T (10/10/2026): col Mercatino le tessere sono 12 = 3+3+3+3, sempre quattro righe (da 700 px 6+6, due):
   il numero non cambia.
   ★ VID13 (13/10/2026): con l'Import atlete da Excel le tessere sono 13 = 3+3+3+3+1, CINQUE righe (da 700 px 6+6+1,
   tre): +72 ⇒ 448 + 72 = 520 (e 474 + 72 = 546 per le àncore vecchie).
   ★ VID14-b (13/10/2026): con l'Import musiche automatico le tessere sono 14 = 3+3+3+3+2, sempre cinque righe (da
   700 px 6+6+2, tre): il numero non cambia.
   ★ TUT-25 (13/10/2026): 520 → 514 (e 546 → 540). La sezione compariva con `comparsa`, che la fa salire da 6 px più
   in basso: il browser fissa il punto d'arrivo al primo fotogramma, col riquadro ancora spostato, e quindi l'8 di
   prima conteneva quei 6 px. Ora la sezione compare in sola dissolvenza (`comparsa-voce`, nessuno spostamento: il
   punto d'arrivo non dipende più dall'istante in cui lo si calcola) e il numero è quello vero, 520 − 6 = 514 —
   misurato in Edge a 360 e a 375: griglia 8 px sotto la testata, a 1366 come prima. Serve a assets/tutorial.js, che
   al `load` rilancia lo scorrimento (il font che arriva durante la corsa allungava l'introduzione di 25 px). */
.tut-voce { display: none; scroll-margin-top: 514px; }
.tut-voce:target,
.tut-voce:has(.tut-alias:target) { display: block; animation: comparsa-voce var(--vel-2) var(--curva); }
@keyframes comparsa-voce { from { opacity: 0; } }

/* ★ Fase F — le ÀNCORE VECCHIE (#licenza, #configurazione…). Sono <span> vuoti in cima alla
   sezione nuova: `:has` apre la sezione che le contiene, e il browser scorre sullo span.
   Lo span sta 26 px più in basso del bordo della card (2 di bordo + 24 di padding): il suo
   margine è quello della sezione più quei 26, così la pagina si ferma nello stesso punto
   che con l'àncora nuova. Dove :has() non c'è (browser di prima del 2024) la sezione la apre
   assets/tutorial.js, passando all'àncora nuova. ★ TUT-25: 546 → 540 (514 + 26). */
.tut-alias { display: block; height: 0; scroll-margin-top: 540px; }

/* La riga di istruzioni sparisce appena una sezione e' aperta. Dove :has() non c'e', resta
   scritta: e' un invito, non un'informazione che manca a qualcuno. */
.tut-scegli { color: var(--muted); font-size: 15px; margin: 12px 2px; }
body:has(.tut-voce:target) .tut-scegli,
body:has(.tut-alias:target) .tut-scegli { display: none; }

/* Pastiglia della pagina aperta: si accende quella scelta. Le coppie sono scritte a mano
   perche' in CSS non c'e' modo di legare un :target al proprio link; gli id sono le àncore
   delle email e non cambiano mai, quindi l'elenco non invecchia. Le àncore vecchie accendono
   la pastiglia della sezione che le contiene. Dove :has() manca si perde solo l'evidenziazione.
   ★ VNF-T (30/09/2026): la pagina 05 è la Bacheca; #scadenze è un'àncora vecchia di Gestione (capitolo 1). */
body:has(#presentazione:target)  .tut-indice a[href="#presentazione"],
body:has(#registrazione:target)  .tut-indice a[href="#registrazione"],
body:has(#movimenti:target)      .tut-indice a[href="#movimenti"],
body:has(#prepagato:target)      .tut-indice a[href="#movimenti"],
body:has(#atlete:target)         .tut-indice a[href="#atlete"],
body:has(#famiglie:target)       .tut-indice a[href="#atlete"],
body:has(#bacheca:target)        .tut-indice a[href="#bacheca"],
body:has(#musiche:target)        .tut-indice a[href="#musiche"],
body:has(#gestione:target)       .tut-indice a[href="#gestione"],
body:has(#configurazione:target) .tut-indice a[href="#gestione"],
body:has(#trasparenza:target)    .tut-indice a[href="#gestione"],
body:has(#sponsor:target)        .tut-indice a[href="#gestione"],
body:has(#licenza:target)        .tut-indice a[href="#gestione"],
body:has(#scadenze:target)       .tut-indice a[href="#gestione"],
body:has(#famiglia:target)       .tut-indice a[href="#famiglia"],
body:has(#insegnanti:target)     .tut-indice a[href="#insegnanti"],
body:has(#prova-pista:target)    .tut-indice a[href="#prova-pista"],
body:has(#live-demo:target)      .tut-indice a[href="#live-demo"],
body:has(#mercatino:target)      .tut-indice a[href="#mercatino"],
body:has(#import-atlete:target)  .tut-indice a[href="#import-atlete"],
body:has(#import-musiche:target) .tut-indice a[href="#import-musiche"] {
  background: var(--grad-brand); color: var(--su-brand); border-color: transparent;
}
/* ★ HUI1: sulla tessera aperta il play diventa bianco col triangolo viola, la durata chiara */
body:has(#presentazione:target)  .tut-indice a[href="#presentazione"]::before,
body:has(#registrazione:target)  .tut-indice a[href="#registrazione"]::before,
body:has(#movimenti:target)      .tut-indice a[href="#movimenti"]::before,
body:has(#prepagato:target)      .tut-indice a[href="#movimenti"]::before,
body:has(#atlete:target)         .tut-indice a[href="#atlete"]::before,
body:has(#famiglie:target)       .tut-indice a[href="#atlete"]::before,
body:has(#bacheca:target)        .tut-indice a[href="#bacheca"]::before,
body:has(#musiche:target)        .tut-indice a[href="#musiche"]::before,
body:has(#gestione:target)       .tut-indice a[href="#gestione"]::before,
body:has(#configurazione:target) .tut-indice a[href="#gestione"]::before,
body:has(#trasparenza:target)    .tut-indice a[href="#gestione"]::before,
body:has(#sponsor:target)        .tut-indice a[href="#gestione"]::before,
body:has(#licenza:target)        .tut-indice a[href="#gestione"]::before,
body:has(#scadenze:target)       .tut-indice a[href="#gestione"]::before,
body:has(#famiglia:target)       .tut-indice a[href="#famiglia"]::before,
body:has(#insegnanti:target)     .tut-indice a[href="#insegnanti"]::before,
body:has(#prova-pista:target)    .tut-indice a[href="#prova-pista"]::before,
body:has(#live-demo:target)      .tut-indice a[href="#live-demo"]::before,
body:has(#mercatino:target)      .tut-indice a[href="#mercatino"]::before,
body:has(#import-atlete:target)  .tut-indice a[href="#import-atlete"]::before,
body:has(#import-musiche:target) .tut-indice a[href="#import-musiche"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23fff'/%3E%3Cpath d='M8 6v8l6-4z' fill='%237a4bd6'/%3E%3C/svg%3E");
}
body:has(#presentazione:target)  .tut-indice a[href="#presentazione"] .tut-durata,
body:has(#registrazione:target)  .tut-indice a[href="#registrazione"] .tut-durata,
body:has(#movimenti:target)      .tut-indice a[href="#movimenti"] .tut-durata,
body:has(#prepagato:target)      .tut-indice a[href="#movimenti"] .tut-durata,
body:has(#atlete:target)         .tut-indice a[href="#atlete"] .tut-durata,
body:has(#famiglie:target)       .tut-indice a[href="#atlete"] .tut-durata,
body:has(#bacheca:target)        .tut-indice a[href="#bacheca"] .tut-durata,
body:has(#musiche:target)        .tut-indice a[href="#musiche"] .tut-durata,
body:has(#gestione:target)       .tut-indice a[href="#gestione"] .tut-durata,
body:has(#configurazione:target) .tut-indice a[href="#gestione"] .tut-durata,
body:has(#trasparenza:target)    .tut-indice a[href="#gestione"] .tut-durata,
body:has(#sponsor:target)        .tut-indice a[href="#gestione"] .tut-durata,
body:has(#licenza:target)        .tut-indice a[href="#gestione"] .tut-durata,
body:has(#scadenze:target)       .tut-indice a[href="#gestione"] .tut-durata,
body:has(#famiglia:target)       .tut-indice a[href="#famiglia"] .tut-durata,
body:has(#insegnanti:target)     .tut-indice a[href="#insegnanti"] .tut-durata,
body:has(#prova-pista:target)    .tut-indice a[href="#prova-pista"] .tut-durata,
body:has(#live-demo:target)      .tut-indice a[href="#live-demo"] .tut-durata,
body:has(#mercatino:target)      .tut-indice a[href="#mercatino"] .tut-durata,
body:has(#import-atlete:target)  .tut-indice a[href="#import-atlete"] .tut-durata,
body:has(#import-musiche:target) .tut-indice a[href="#import-musiche"] .tut-durata {
  color: rgba(255, 255, 255, .9);
}

/* Sopra il titolo: durata e numero dei capitoli («Video · 9 min 47 s · 10 capitoli»). */
.tut-sezione { font-size: 13px; color: var(--brand-testo); text-transform: uppercase;
               letter-spacing: .1em; margin: 0 0 4px; font-weight: 800; }
.tut-voce h3 { font-size: 18px; margin: 0 0 8px; }
.tut-voce > p { margin: 0 0 12px; }

/* ★ Fase F — quando si tocca un capitolo il JavaScript riporta il lettore sotto gli occhi:
   il video deve fermarsi SOTTO la testata appiccicata (158 px) e non dietro. Da 768 px la
   testata è alta 114. ★ HUI1: testata 112 (108 da 768) → 128; da 1100 è alta 72 → 88. */
.tut-voce .video { scroll-margin-top: 128px; }
@media (min-width: 1100px) { .tut-voce .video { scroll-margin-top: 88px; } }

/* ★ Fase F — I CAPITOLI. Una riga per capitolo, alta almeno 44 px (il bersaglio di un dito),
   ora a sinistra in colonna (cifre tutte larghe uguali) e nome a destra. Il capitolo in onda
   lo segna il JavaScript con aria-current: così lo sente anche chi usa un lettore di schermo. */
.tut-capitoli { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--bordo); }
.tut-capitoli li { border-bottom: 1px solid var(--bordo); }
.tut-cap { display: flex; align-items: baseline; gap: 12px; min-height: 44px; box-sizing: border-box;
           padding: 11px 10px; color: var(--testo); text-decoration: none; line-height: 1.3;
           border-radius: var(--raggio-s); }
.tut-cap-ora { flex: 0 0 3.2em; font-weight: 700; color: var(--brand-testo);
               font-variant-numeric: tabular-nums; }
.tut-cap-nome { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.tut-cap:hover { background: var(--sf-tinta); }
.tut-cap:focus-visible { outline: 3px solid var(--anello); outline-offset: 1px; }
.tut-cap[aria-current="true"] { background: var(--brand-chiaro); font-weight: 700; }
.tut-cap[aria-current="true"] .tut-cap-ora::before { content: "▶ "; font-size: .8em; }

/* ★ VNF-T (DEC punto 5, T2 di Marco, mockup dev/mockup/dec/dec-5-tutorial-card.html) — accanto al capitolo il
   bottoncino «▶ 0:49» del video CORTO della card: la riga resta il salto nell'integrale, il bottoncino apre la pagina
   del corto (/p/tutorial/<corto>). Pillola lilla, alta 36 px dentro la riga da 44, mai spezzata. */
.tut-riga { display: flex; align-items: center; gap: 8px; }
.tut-riga .tut-cap { flex: 1 1 auto; min-width: 0; }
a.tut-corto { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 12px;
  border-radius: 999px; background: var(--brand-chiaro); color: var(--brand-testo); font-size: 12.5px; font-weight: 800;
  text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
a.tut-corto:hover { background: var(--sf-tinta); }
a.tut-corto:focus-visible { outline: 3px solid var(--anello); outline-offset: 1px; }
/* La pagina del corto: il titolo come quello delle sezioni, il rimando all'integrale sotto il video. */
.tut-corto-pagina h1 { font-size: 22px; margin: 0 0 12px; }
.tut-corto-intero { margin: 14px 0 0; }

.contatto-riga { font-size: 17px; margin: 8px 0; }
/* ★ S10e — l'icona di WhatsApp è un SVG in pagina, non un'emoji: la tengo della taglia
   delle emoji delle righe sopra (✉️ 📞) e sulla stessa linea di base del testo. */
.contatto-riga .ico-wa { width: 1.2em; height: 1.2em; vertical-align: -.24em; }

/* ---------------- piede ---------------- */

/* ★ HUI1: il piede è un velo viola scuro sul fondo viola della pagina, con un filo chiaro sopra. */
.vet-piede { background: rgba(18, 6, 48, .55); border-top: 1px solid rgba(255, 255, 255, .12); color: var(--su-brand);
             margin-top: 30px; padding: 12px 0 calc(16px + env(safe-area-inset-bottom)); }
.vet-piede p { margin: 10px 0; font-size: 14px; }
.vet-piede a { color: var(--su-brand); opacity: .85; }
.vet-piede .muted { color: var(--su-brand); opacity: .55; }
/* Dati del titolare e copyright: devono essere LEGGIBILI (obbligo di legge), non
   invisibili. 13px con opacita' .72 — sotto le voci di menu, sopra il .muted della
   versione. Il separatore fra i dati va a capo da solo sugli schermi stretti. */
.vet-piede .piede-legale { font-size: 13px; opacity: .72; line-height: 1.6; }
.vet-piede .piede-legale a { opacity: 1; }

/* ---------------- pagine 404/503: testata cliccabile + corpo centrato ---------------- */

body.e404 { display: flex; flex-direction: column; min-height: 100vh; }
body.e404 .mini-testata { background: var(--grad-brand);
                          padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
                          box-shadow: var(--ombra-testata); }
body.e404 .mini-testata .brand { font-size: 20px; font-weight: 800; letter-spacing: -.01em;
                                 color: var(--su-brand); text-decoration: none; }
/* ★ HUI1 (esperto): il riquadro ha un fondo carta suo, così regge su qualsiasi fondo di pagina. */
.box { text-align: center; padding: 24px; margin: auto; background: #fff; border-radius: var(--raggio); }

/* ------------------------------------------------------------------
   Moduli pubblici (Prova gratis, verifica email) e testi lunghi.
   Stessi bersagli tattili e stessa misura di carattere dell'app tenant
   (≥44px, 16px: sotto i 16 iOS ingrandisce la pagina da solo). */

label { display: block; font-size: 13px; font-weight: 700; color: var(--muted); margin: 14px 0 5px; }

input[type="text"], input[type="email"], input[type="tel"], textarea, select {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  font-size: 16px;
  border: 1.5px solid var(--bordo-input);
  border-radius: var(--raggio-s);
  background: var(--sf-card);
  color: var(--testo);
  font-family: inherit;
  transition: border-color var(--vel-1) var(--curva), box-shadow var(--vel-1) var(--curva);
}
textarea { min-height: 340px; line-height: 1.4; font-family: ui-monospace, Consolas, monospace; font-size: 14px; }
/* ★ S11 parte 6 — il messaggio del modulo Contatti. La regola qui sopra era nata per
   l'editor di un testo lungo (monospazio, mezzo schermo di altezza): per cinque righe
   scritte da una persona serve il carattere del sito e un'altezza normale. */
textarea.messaggio { min-height: 150px; font-family: inherit; font-size: 16px; line-height: 1.5; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accento);
  box-shadow: 0 0 0 3px var(--anello);
}
button:focus-visible, a:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }

button, .bottone {
  display: inline-block;
  width: 100%;
  min-height: 48px;
  margin-top: 18px;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .02em;
  text-align: center;
  text-decoration: none;
  color: var(--su-accento);
  background: var(--grad-azione);
  border: 0;
  border-radius: var(--raggio-btn);
  cursor: pointer;
  font-family: inherit;
  box-shadow: var(--ombra-azione);
  transition: transform var(--vel-1) var(--curva), filter var(--vel-1) var(--curva),
              box-shadow var(--vel-1) var(--curva);
}
button:active, .bottone:active { transform: translateY(1px) scale(.985); filter: brightness(.92);
                                 box-shadow: 0 3px 8px -2px rgba(224, 37, 127, .4); }

.aiuto { font-size: 13px; color: var(--muted); margin: 6px 0 0; }
.errore { background: var(--err-sf); color: var(--err); border-left: 3px solid var(--err);
          border-radius: var(--raggio-s); padding: 11px 14px; margin: 12px 0; font-size: 14px;
          animation: comparsa var(--vel-2) var(--curva); }
.esito  { background: var(--ok-sf); color: var(--ok); border-left: 3px solid var(--ok);
          border-radius: var(--raggio-s); padding: 11px 14px; margin: 12px 0; font-size: 15px;
          animation: comparsa var(--vel-2) var(--curva); }
.avviso-forte { background: var(--warn-sf); color: var(--warn); border-left: 3px solid var(--warn);
                border-radius: var(--raggio-s); padding: 11px 14px; margin: 0 0 12px; font-size: 14px; }

/* Il campo trappola: fuori dallo schermo, non `display:none` — alcuni bot saltano
   proprio i campi nascosti, e questo deve sembrare un campo come gli altri. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ★ GO (17/09/2026): la pagina del link di conferma non chiede più l'indirizzo. Il nome della
   scuola in evidenza, l'indirizzo sotto (`.indirizzo`), un bottone solo. */
.verifica-nome { font-size: 21px; font-weight: 800; line-height: 1.25; margin: 4px 0 14px;
                 color: var(--brand-testo); overflow-wrap: anywhere; }

.indirizzo { font-size: 17px; font-weight: 700; overflow-wrap: anywhere; margin: 8px 0; }

/* Le chiavi consegnate alla società appena creata: devono saltare all'occhio. */
.chiavi { margin: 12px 0; }
.chiave { border: 1.5px solid var(--bordo); border-radius: var(--raggio-s);
          padding: 12px 14px; margin-bottom: 8px; background: var(--sf-tinta); }
.chiave .ruolo { font-size: 13px; color: var(--muted); }
.chiave .cred  { font-size: 17px; margin-top: 4px; overflow-wrap: anywhere; }
.chiave .cred b { font-family: ui-monospace, Consolas, monospace; letter-spacing: .5px; }

/* Testi lunghi (privacy policy, condizioni). */
.testo h2 { font-size: 20px; margin: 0 0 10px; }
.testo h3 { font-size: 16px; margin: 20px 0 6px; }
.testo p, .testo li { font-size: 15px; }
.testo ul, .testo ol { padding-left: 22px; }

/* Checkbox delle condizioni d'uso nel modulo "Prova gratis" (S8b, §2.25). */
.riga-check { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 0;
              font-size: 15px; cursor: pointer; }
.riga-check input { width: 22px; height: 22px; margin: 1px 0 0; flex: 0 0 auto; min-height: 0;
                    accent-color: var(--accento); }

/* ============================== LIVE DEMO (★ S10f-2a) ==============================
   La pagina /p/demo (nel guscio), la CORNICE /p/{demo}/ coi due riquadri e la pagina terminale dei riquadri.
   Misure e aspetto dal mockup DECISO da Marco il 24/09 (dev/mockup/demo-telefono.html, misurato in Edge a 360,
   375, 479, 480, 768, 833, 834 e 1280 px: nessuno scorrimento di lato). Niente JavaScript: le linguette del
   telefono sono due radio con le loro label. */

/* ---- /p/demo ---- */
.demo-punti { margin: 8px 0 0; padding-left: 20px; }
.demo-punti li { margin: 4px 0; }
.demo-cosa ol { margin: 4px 0 0; padding-left: 20px; }
.demo-cosa li { margin: 5px 0; }
/* Il bottone «di contorno» della vetrina (CHIUDI E RICOMINCIA): tonale lilla, come i secondari dell'app. */
button.secondario { background: var(--brand-chiaro); color: var(--brand-testo); box-shadow: none;
                    border: 2px solid var(--bordo-input); }
.demo-in-corso form { margin: 0; }

/* ---- la CORNICE: testata (niente navigazione, solo chi sei e come esci) ---- */
.dc { position: relative; z-index: 2; background: var(--grad-brand); color: var(--su-brand);
      box-shadow: var(--ombra-testata); padding-top: env(safe-area-inset-top); }
.dc-riga { max-width: 1200px; margin: 0 auto; padding: 10px 16px; display: flex; flex-wrap: wrap;
           align-items: center; gap: 4px 12px; }
.dc-tit { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0;
          font-size: 14px; }
.badge-demo { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--grad-demo);
              color: var(--su-demo); font-weight: 800; font-size: 12px; letter-spacing: .04em; white-space: nowrap; }
.dc-frase { color: rgba(255, 255, 255, .92); }
.dc-azioni { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.dc .scade { font-size: 13px; color: rgba(255, 255, 255, .92); white-space: nowrap; }
.scade-tel { display: none; }
.demo-chiudi { margin: 0; }
/* ★ D16 (Marco, 24/09, sul mockup: «sono dello stesso viola dello sfondo e non si vedono»): CHIUDI DEMO è una
   pillola BIANCA con la scritta viola scura (contrasto 14,3:1). La stessa pillola è ESCI nell'app (app.css). */
.bottone.mini.t-chiudi,
.bottone.mini.t-chiudi:active { background: #fff; color: var(--brand-fondo); box-shadow: 0 3px 10px rgba(0, 0, 0, .22); }

/* ---- le linguette FAMIGLIA / SOCIETÀ (solo sotto gli 834 px) ---- */
.demo-scelta { position: absolute; opacity: 0; pointer-events: none; }
.linguette { display: none; gap: 8px; background: var(--sf-card); padding: 8px 16px;
             box-shadow: 0 2px 8px rgba(90, 47, 176, .08); }
.linguette label { flex: 1 1 0; margin: 0; text-align: center; padding: 8px 6px; border-radius: 999px;
                   cursor: pointer; font-weight: 800; font-size: 13px; letter-spacing: .07em; line-height: 1.3;
                   border: 2px solid var(--bordo-input); background: var(--brand-chiaro); color: var(--brand-testo); }
.linguette label[for="lato-f"] { background: #fce8f2; color: var(--accento-giu); border-color: #f5c6dc; }
#lato-f:checked ~ main .linguette label[for="lato-f"] { background: var(--grad-azione); color: #fff;
                                                       border-color: var(--accento-giu); box-shadow: var(--ombra-azione); }
#lato-s:checked ~ main .linguette label[for="lato-s"] { background: var(--brand-fondo); color: #fff;
                                                       border-color: var(--brand-fondo);
                                                       box-shadow: 0 3px 9px rgba(49, 23, 107, .4); }
/* ★ RG (Marco, 25/09/2026, variante C del mockup dev/mockup/linguette-demo.*): sopra le due pillole la scritta
   CAMBIA VISUALE e due frecce diagonali che puntano a FAMIGLIA (magenta) e a SOCIETÀ (viola): dal telefono le
   pillole sembravano due bottoni qualunque. La scritta occupa una riga sua (flex-basis 100%). */
.linguette { flex-wrap: wrap; row-gap: 0; padding-top: 4px; }
.lg-cambia { flex: 1 1 100%; position: relative; height: 26px; margin: 0; text-align: center; font-size: 12.5px;
             font-weight: 800; letter-spacing: .06em; color: var(--brand-testo); }
.lg-cambia span { position: relative; top: 3px; }
.lg-freccia { position: absolute; top: 2px; width: 60px; height: 24px; fill: none; stroke-width: 2.4;
              stroke-linecap: round; stroke-linejoin: round; }
.lg-sx { left: 12%; stroke: var(--accento-giu); }
.lg-dx { right: 12%; stroke: var(--brand-testo); }
/* Da tastiera le radio prendono il fuoco (le frecce cambiano lato): si vede sulla loro linguetta. */
#lato-f:focus-visible ~ main .linguette label[for="lato-f"],
#lato-s:focus-visible ~ main .linguette label[for="lato-s"] { outline: 2px solid var(--accento); outline-offset: 2px; }

/* ---- i due riquadri: iframe 375 × 812 nella cornice del telefono degli screenshot (389 × 826) ---- */
.dc-main { max-width: 1200px; margin: 0 auto; }
.demo-scena { display: flex; justify-content: center; align-items: flex-start; gap: 24px; padding: 20px 16px 8px; }
.demo-riquadro { margin: 0; flex: 0 0 auto; min-width: 0; }
.demo-riquadro > .shot-lato { display: block; width: fit-content; margin: 0 auto 10px; padding: 4px 12px;
                              border-radius: 999px; font-size: 11.5px; font-weight: 800; line-height: 1.3;
                              letter-spacing: .09em; }
.demo-riquadro iframe { display: block; box-sizing: content-box; width: 375px; height: 812px; max-width: 100%;
                        border: 7px solid #221338; border-radius: 34px; background: #fff;
                        box-shadow: 0 24px 50px -12px rgba(49, 23, 107, .45); }
.demo-cosa-pc { max-width: 820px; margin: 14px auto 28px; padding: 0 16px; }
.demo-cosa-pc > div { background: var(--sf-card); border: 2px solid var(--bordo-input); border-radius: var(--raggio);
                      box-shadow: var(--ombra-card); padding: 12px 18px 14px; }
.demo-cosa-pc h2 { font-size: 16px; margin: 0 0 4px; }
.demo-cosa-pc ol { margin: 4px 0 0; padding-left: 20px; font-size: 14px; }

/* ★ D11 — sotto gli 834 px UN LATO ALLA VOLTA: la testata su due righe («CodeGp» + CHIUDI DEMO; badge + «niente è
   vero · scade alle …»), le linguette, un riquadro solo. 834 = 2 × 389 + 24 fra i due + 16 + 16 di margine. */
@media (max-width: 833px) {
  .dc-tit { order: 3; flex-basis: 100%; font-size: 13px; }
  .dc-azioni .scade { display: none; }
  .scade-tel { display: inline; }
  .linguette { display: flex; }
  .demo-riquadro > .shot-lato, .demo-cosa-pc { display: none; }
  #lato-f:checked ~ main .r-s,
  #lato-s:checked ~ main .r-f { display: none; }
  .demo-scena { padding-top: 12px; padding-bottom: 24px; }
}
/* Sotto i 480 px (il telefono vero) niente cornice di telefono: il riquadro è largo quanto lo schermo e arriva fino
   in fondo; si scorre DENTRO l'app. La pagina non scorre (100dvh, con 100vh come ripiego). */
@media (max-width: 479px) {
  .dc-scuola, .dc-prova { display: none; }
  /* ★ S10f-3b (R3-4.2 di ASTRA 6): il badge resta accanto alla frase, ma la frase va a capo quando non ci sta (testo
     ingrandito dal telefono): prima usciva di lato e si tagliava. A grandezza normale sta su una riga come prima. */
  .dc-tit { flex-wrap: nowrap; }
  .dc-frase { white-space: normal; min-width: 0; }
  body.demo-cornice { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
  .dc-main { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; }
  .demo-scena { flex: 1 1 auto; min-height: 0; padding: 8px 0 0; gap: 0; align-items: stretch; }
  .demo-riquadro { flex: 1 1 auto; display: flex; flex-direction: column; }
  .demo-riquadro iframe { flex: 1 1 auto; box-sizing: border-box; width: 100%; height: auto; min-height: 0;
                          border: 0; border-top: 1px solid var(--bordo); border-radius: 0; box-shadow: none; }
}

/* ---- la pagina terminale dentro un riquadro ---- */
body.demo-fine .mini-testata { display: flex; align-items: center; gap: 8px; }
body.demo-fine .mini-testata .brand { font-size: 20px; }
body.demo-fine .box { max-width: 340px; }
body.demo-fine h1 { font-size: 24px; }
.demo-fine-azione a { display: block; min-height: 48px; margin-top: 18px; padding: 13px 16px; border-radius: var(--raggio-btn);
                      background: var(--grad-azione); color: var(--su-accento); font-weight: 800; letter-spacing: .02em;
                      text-decoration: none; box-shadow: var(--ombra-azione); }

/* ---------------- animazioni ---------------- */

@keyframes comparsa { from { opacity: 0; transform: translateY(6px); }
                      to   { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* =====================================================================================================================
   ★ CAR — CAROSELLO DEI PUNTI della home (Marco, 02/10/2026): «le varie card, 1 pagamenti, 2 sponsor etc invece di
   essere una sotto l'altra le voglio vedere di lato, che si scorrono verso dx e sx».
   Ricetta dell'esperto (dev/mockup/carosello-punti/esperto-carosello.md) con le scelte di Marco sul mockup
   (dev/mockup/carosello-punti-v2.*): card al centro, le vicine 24 px per lato al telefono; la card intera dentro lo
   schermo con la testata e i comandi; sotto i comandi l'inizio della fascia che segue (--car-affaccio: «sennò sembra
   che la pagina finisca lì»); all'ultima card la freccia › diventa ↓ e fa scendere (assets/carosello.js); l'etichetta
   SCHEDA … resta SOPRA il telefono come prima; didascalie nel visore sugli schermi bassi.
   Sta in FONDO al file come nel mockup provato: le misure delle 12 risoluzioni sono state prese con questo ordine.
   Il comportamento (altezze delle schermate, card attiva, visore, cenno, discesa) è in assets/carosello.js.
   ===================================================================================================================== */

/* --- 1. le misure: tutte in variabili, un posto solo --- */
.carosello {
  --testata-h: 112px;                 /* la riscrive il JS con la misura vera (ResizeObserver) */
  --car-gap: 10px;                    /* spazio fra due card */
  --car-sbircia: 24px;                /* quanto si vede di ciascuna vicina */
  --car-vista: 100cqw;                /* larghezza della finestra del carosello */
  --car-w: calc(var(--car-vista) - 2 * (var(--car-sbircia) + var(--car-gap)));
  --car-sopra: 8px;                   /* fra la testata e la card */
  --car-ombra: 14px;                  /* sotto la card, per l'ombra (la pista taglia quello che esce) */
  --car-comandi-h: 36px;              /* la barra ‹ ••• › */
  --car-sotto: 10px;                  /* sotto la barra */
  --car-affaccio: 76px;               /* ★ Marco: l'inizio di quello che viene dopo resta in vista (~58 px a 375×812) */
  --car-extra: calc(var(--car-sopra) + var(--car-ombra) + var(--car-comandi-h) + var(--car-sotto) + var(--car-affaccio));
  --car-h-min: 320px; --car-h-max: 620px;
  --car-h: clamp(var(--car-h-min), calc(100vh - var(--testata-h) - var(--car-extra)), var(--car-h-max));
  --car-h: clamp(var(--car-h-min), calc(100svh - var(--testata-h) - var(--car-extra)), var(--car-h-max));
  --car-fuoco-scala: 1; --car-fuoco-op: .7;   /* ★ v2: al telefono niente scala (vedi @keyframes car-fuoco) */
}
@media (min-width: 768px) { .carosello { --testata-h: 108px; } }
@media (min-width: 1100px) { .carosello { --testata-h: 72px; } }

.punti.carosello { padding-inline: 0; overflow: visible; position: relative; display: flex; flex-direction: column;
                   scroll-margin-top: var(--testata-h); }

/* --- 2. la pista --- */
.car-pista { position: relative; display: flex; align-items: stretch; gap: var(--car-gap);
             width: var(--car-vista); margin-inline: auto;
             overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
             scroll-snap-type: x mandatory; scrollbar-width: none;
             padding: var(--car-sopra) 0 var(--car-ombra); }
.car-pista::-webkit-scrollbar { display: none; }
/* i due distanziali: la prima e l'ultima card possono stare AL CENTRO (più sicuri del padding a fine pista) */
.car-pista::before, .car-pista::after { content: ""; flex: 0 0 max(0px, calc((var(--car-vista) - var(--car-w)) / 2 - var(--car-gap))); }
.car-pista:focus-visible { outline: 3px solid #fff; outline-offset: -3px; border-radius: 18px; }

/* --- 3. la card: altezza FISSA (quella che lo schermo concede), dentro una colonna --- */
.car-pista > .punto { flex: 0 0 var(--car-w); width: var(--car-w); margin: 0;
                      scroll-snap-align: center; scroll-snap-stop: always;
                      display: flex; flex-direction: column; overflow: hidden;
                      padding: 16px 16px 14px;
                      box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 12px 24px -14px rgba(10, 2, 30, .85); }
.js-pronto .car-pista > .punto { height: var(--car-h); }
.carosello:not(.js-pronto) .car-comandi { display: none; }
.carosello:not(.js-pronto) .car-pista { align-items: flex-start; }   /* senza JS ogni card alta quanto il suo contenuto */
.car-pista > .punto.car-misura,
.car-pista > .punto.car-libera { height: auto !important; align-self: flex-start; }   /* misura / rete di sicurezza */
.car-pista > .punto:not(.attiva) { cursor: pointer; }
.car-pista .punto-testo { flex: none; }
.car-pista .punto h2 { font-size: 17px; line-height: 1.25; gap: 10px; margin: 0 0 8px; }
.car-pista .punto .n { width: 28px; height: 28px; border-radius: 9px; font-size: 14px; transform: translateY(6px); }
.car-pista .punto p { font-size: 14.5px; line-height: 1.45; margin: 0 0 4px; }

/* le due schermate: prendono TUTTA l'altezza che il testo lascia (--h-shot, calcolata dal JS) */
.car-pista .punto .shots2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; align-items: start;
                            margin-block: auto 0; padding-top: 12px; }
/* ★ v2 (Marco, 02/10/2026: «etichetta appoggiata sopra non mi piace»): l'etichetta SCHEDA … resta SOPRA il telefono,
   staccata, come oggi sul sito (la proposta P5 dell'esperto, appoggiata sul bordo, è scartata) */
.car-pista .punto .shot { position: relative; margin: 0; max-width: none; min-width: 0;
                          display: flex; flex-direction: column; align-items: center; animation: none; }
.car-pista .punto .shot > .shot-lato { margin: 0 auto 6px; white-space: nowrap; font-size: 9px; padding: 3px 8px;
                                       letter-spacing: .06em; }
.car-pista .punto .shot img { height: var(--h-shot, 240px); width: auto; max-width: 100%;
                              border-width: 4px; border-radius: 18px;
                              box-shadow: 0 12px 24px -12px rgba(49, 23, 107, .5); }
.car-pista .punto .shot figcaption { width: 100%; margin-top: 6px; font-size: 11.5px; line-height: 1.3; text-wrap: balance; }
/* ★ IMP6-1: la schermata da computer prende la LARGHEZZA della colonna; l'altezza la segue (si accorcia solo con
   --h-pc, calcolata da carosello.js quando la card non ci sta) */
.car-pista .punto .shots1 { margin: 0; padding-top: 14px; display: flex; flex-direction: column; align-items: center; }
/* (★ Marco: niente margin-block auto come le schermate da telefono, che crescono fino al fondo: questa è larga, non
   alta, e spinta in fondo lasciava un buco sotto il testo; al PC la centra la griglia della card) */
.car-pista .punto .shots1, .car-pista .punto .shot.shot-pc { width: 100%; }
.shot-pc .shot-zoom { width: 100%; border-radius: 10px; }   /* il bottone del visore non si stringe sull'immagine */
.car-pista .punto .shot.shot-pc img { width: 100%; height: auto; max-height: var(--h-pc, none); object-fit: contain;
                                      border-width: 3px; border-radius: 10px; }
/* ★ HOME-MUS (Marco, 12/10/2026): la card 9 ha DUE schermate da computer, una sotto l'altra (atlete e musiche). Quando
   --h-pc le accorcia, si stringono con le loro proporzioni 1280:800 (la cornice di 3 px segue l'immagine, niente bande
   dentro). ⚠ Non `width: auto`: nella misura di carosello.js la colonna si adatta al contenuto e l'immagine crollava a
   6 px; senza --h-pc il calcolo dà più del 100 % e resta larga quanto la colonna. */
.car-pista .punto .shots1:has(.shot-pc + .shot-pc) { row-gap: 10px; }
.car-pista .punto .shots1:has(.shot-pc + .shot-pc) .shot.shot-pc img {
  display: block; margin-inline: auto; width: min(100%, calc((var(--h-pc, 9999px) - 6px) * 1.6 + 6px)); }
/* sui telefoni più bassi, se nemmeno al livello 3 ci stanno due schermate, carosello.js lascia la prima (data-una) */
.car-pista > .punto[data-una] .shots1 > .shot-pc ~ .shot-pc { display: none; }

/* i livelli di ripiego (data-fit, li sceglie il JS: si sale solo se una schermata scenderebbe sotto il minimo) */
.carosello[data-fit="1"] .punto { padding: 14px 14px 12px; }
.carosello[data-fit="1"] .punto h2 { font-size: 16px; margin-bottom: 6px; }
.carosello[data-fit="1"] .punto .n { width: 26px; height: 26px; font-size: 13px; transform: translateY(6px); }
.carosello[data-fit="1"] .punto p { font-size: 13.5px; line-height: 1.4; }
.carosello[data-fit="1"] .punto .shots2 { padding-top: 10px; }
.carosello:is([data-fit="2"], [data-fit="3"]) .punto { padding: 14px 14px 12px; }
.carosello:is([data-fit="2"], [data-fit="3"]) .punto h2 { font-size: 16px; margin-bottom: 6px; }
.carosello:is([data-fit="2"], [data-fit="3"]) .punto .n { width: 26px; height: 26px; font-size: 13px; }
.carosello:is([data-fit="2"], [data-fit="3"]) .punto p { font-size: 13.5px; line-height: 1.4; }
.carosello:is([data-fit="2"], [data-fit="3"]) .punto .shot figcaption {     /* la didascalia va nel visore */
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* livello 3: il telefono resta largo quanto al minimo e si TAGLIA in fondo, sfumando (come il telefono della hero) */
.carosello[data-fit="3"] .punto[data-taglio] .shot img { width: var(--w-shot); object-fit: cover; object-position: top;
  border-bottom-width: 0; border-radius: 18px 18px 0 0;
  -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }

/* --- 4. effetto «fuoco»: la card al centro piena, le vicine un filo più piccole e velate --- */
.car-pista > .punto { transform-origin: 50% 50%; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .car-pista > .punto { animation: car-fuoco linear both; animation-timeline: view(inline); animation-range: normal; }
  }
  @supports not (animation-timeline: view()) {
    .car-pista > .punto { transition: scale .35s var(--curva), opacity .35s var(--curva); }
    .car-pista > .punto:not(.attiva) { scale: var(--car-fuoco-scala); opacity: var(--car-fuoco-op); }
  }
}
/* ★ v2: l'origine resta al CENTRO. Edge/Chrome calcolano lo scatto (scroll-snap) sul riquadro TRASFORMATO: con
   l'origine che andava da 0 % a 100 % la card si fermava 11 px fuori centro (vicine 35 | 13 px invece di 24 | 24).
   Al telefono la scala è 1 (solo il velo): rimpicciolire dal centro mangerebbe metà dei 24 px delle vicine. */
@keyframes car-fuoco {
  0%   { scale: var(--car-fuoco-scala); opacity: var(--car-fuoco-op); }
  50%  { scale: 1; opacity: 1; }
  100% { scale: var(--car-fuoco-scala); opacity: var(--car-fuoco-op); }
}

/* --- 5. i comandi: SOTTO la card al telefono (zona del pollice) --- */
.car-comandi { display: flex; align-items: center; justify-content: center; gap: 10px;
               height: var(--car-comandi-h); margin: 0 auto var(--car-sotto); }
.car-freccia, .car-pallino { width: auto; min-height: 0; margin: 0; padding: 0; border: 0; background: none;
                             box-shadow: none; letter-spacing: 0; font: inherit; }
.car-freccia { position: relative; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
               display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
               background: #fff; color: var(--brand-2); box-shadow: 0 6px 16px -6px rgba(20, 6, 60, .75);
               transition: background var(--vel-1), color var(--vel-1), transform var(--vel-1) var(--curva); }
.car-freccia::after { content: ""; position: absolute; inset: -4px; }       /* bersaglio del dito 44 × 44 */
.car-freccia svg { width: 18px; height: 18px; }
.car-freccia[aria-disabled="true"] { background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .5);
                                     box-shadow: none; cursor: default; }
.car-freccia:not([aria-disabled="true"]):active { transform: scale(.92); }
/* ★ Marco: all'ultima card la freccia › gira e diventa ↓ («continua più sotto») */
.car-freccia svg { transition: rotate .3s var(--curva); }
.car-dopo.car-giu svg { rotate: 90deg; }
.car-freccia:focus-visible, .car-pallino:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.car-pallini { display: flex; align-items: center; }
.car-pallino { width: 24px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
               cursor: pointer; border-radius: 999px; transition: width .3s var(--curva); }
.car-pallino::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, .5);
                       transition: width .3s var(--curva), background .3s; }
.car-pallino[aria-current="true"] { width: 36px; }
.car-pallino[aria-current="true"]::before { width: 24px; background: #fff; }
@media (hover: hover) { .car-pallino:not([aria-current="true"]):hover::before { background: rgba(255, 255, 255, .85); } }
/* ★ CAR2 (10/10/2026): con UNDICI card la barra (36 + 10 + 10 × 24 + 36 + 10 + 36 = 368 px, più i 4 px del bersaglio
   della freccia) non stava più nei telefoni stretti: a 360 e a 375 la pagina scorreva di lato (prova-car.py). Sotto i
   420 px pallini da 20 e spazi da 6: 36 + 6 + 10 × 20 + 36 + 6 + 36 = 320 px. */
@media (max-width: 419px) {
  .car-comandi { gap: 6px; }
  .car-pallino { width: 20px; }
}

.punti.carosello + .fascia-demo { margin-top: 18px; }

/* --- 6. la card 8: se la tabella intera non ci sta, MATRICE COMPATTA (data-compatta, lo decide il JS)
          etichette corte DA FAR SCEGLIERE A MARCO; le frasi intere restano per i lettori di schermo --- */
.livelli .liv-corto, .livelli .liv-sigla, .livelli-ruoli { display: none; }
:is(.car-pista, .car-zoom) .livelli-box[data-compatta] { overflow: visible; margin: 10px 0 0; }
:is(.car-pista, .car-zoom) .livelli-box[data-compatta] .livelli { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, 30px); column-gap: 6px; }
:is(.car-pista, .car-zoom) .livelli-box[data-compatta] :is(thead, tbody, tr) { display: contents; }
:is(.car-pista, .car-zoom) .livelli-box[data-compatta] thead th { display: flex; align-items: center; justify-content: center; padding: 0 0 6px;
                                                  border: 0; }
:is(.car-pista, .car-zoom) .livelli-box[data-compatta] thead th:first-child { justify-content: flex-start; font-size: 11px; font-weight: 700;
                                         color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
:is(.car-pista, .car-zoom) .livelli-box[data-compatta] :is(.liv-nome, .liv-lungo) {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:is(.car-pista, .car-zoom) .livelli-box[data-compatta] .liv-corto { display: inline; }
:is(.car-pista, .car-zoom) .livelli-box[data-compatta] :is(.liv-sigla, .livelli-ruoli span) {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px;
  font-size: 11px; font-weight: 800; line-height: 1; }
:is(.car-pista, .car-zoom) [data-sigla="F"] > .liv-sigla, :is(.car-pista, .car-zoom) .livelli-ruoli [data-sigla="F"] { background: #fce8f2; color: var(--accento-giu); }
:is(.car-pista, .car-zoom) [data-sigla="I"] > .liv-sigla, :is(.car-pista, .car-zoom) .livelli-ruoli [data-sigla="I"] { background: var(--brand-chiaro); color: var(--brand-testo); }
:is(.car-pista, .car-zoom) [data-sigla="R"] > .liv-sigla, :is(.car-pista, .car-zoom) .livelli-ruoli [data-sigla="R"] { background: #5a2fb0; color: #fff; }
:is(.car-pista, .car-zoom) [data-sigla="P"] > .liv-sigla, :is(.car-pista, .car-zoom) .livelli-ruoli [data-sigla="P"] { background: var(--brand-fondo); color: #fde68a; }
:is(.car-pista, .car-zoom) .livelli-box[data-compatta] :is(tbody th, td) { display: flex; align-items: center; min-height: 32px; width: auto;
  padding: 4px 0; border: 0; border-top: 1px solid rgba(90, 47, 176, .14); background: none; }
:is(.car-pista, .car-zoom) .livelli-box[data-compatta] tbody th { grid-column: 1; font-size: 13px; font-weight: 700; line-height: 1.25;
                                                  text-align: left; color: var(--testo); }
:is(.car-pista, .car-zoom) .livelli-box[data-compatta] td { justify-content: center; }
:is(.car-pista, .car-zoom) .livelli-box[data-compatta] td::before { content: none; }
:is(.car-pista, .car-zoom) .livelli-box[data-compatta] .segno { margin: 0; }
:is(.car-pista, .car-zoom) .livelli-box[data-compatta] .livelli-ruoli { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px;
                            margin: 8px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.2; }
:is(.car-pista, .car-zoom) .livelli-box[data-compatta] .livelli-ruoli span { width: 18px; height: 18px; font-size: 10px; border-radius: 6px; margin-left: 4px; }
:is(.car-pista, .car-zoom) .livelli-box[data-compatta] .livelli-legenda { margin: 6px 0 0; gap: 2px 12px; font-size: 11.5px; }
/* ultimo livello (360x640, SE): righe più basse */
.carosello[data-fit="3"] .livelli-box[data-compatta] :is(tbody th, td) { min-height: 27px; padding: 2px 0; }
.carosello[data-fit="3"] .livelli-box[data-compatta] .livelli-legenda { font-size: 11px; gap: 2px 8px; }

/* --- 7. tablet in verticale e PC stretti (560-899): una colonna, più grande --- */
@media (min-width: 560px) {
  .carosello { --car-gap: 16px; --car-w: min(calc(var(--car-vista) - 144px), 600px);
               --car-sopra: 12px; --car-ombra: 22px; --car-comandi-h: 40px; --car-sotto: 12px; --car-h-max: 760px; }
  .car-pista > .punto { padding: 22px 24px 18px; box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 22px 44px -22px rgba(10, 2, 30, .85); }
  .car-pista .punto h2 { font-size: 20px; margin-bottom: 10px; }
  .car-pista .punto .n { width: 34px; height: 34px; font-size: 16px; border-radius: 12px; transform: translateY(7px); }
  .car-pista .punto p { font-size: 16px; line-height: 1.5; }
  .car-pista .punto .shots2 { gap: 0 20px; padding-top: 16px; }
  .car-pista .punto .shot > .shot-lato { font-size: 10.5px; padding: 4px 11px; margin-bottom: 8px; }
  .car-pista .punto .shot img { border-width: 6px; border-radius: 28px; }
  .car-pista .punto .shot figcaption { font-size: 13px; margin-top: 8px; }
  .car-freccia { width: 40px; height: 40px; }
  .car-pallino { height: 40px; }
}

/* --- 8. PC (largo E orizzontale): card «da paesaggio», testo a sinistra e telefoni a destra --- */
@media (min-width: 900px) and (min-aspect-ratio: 11/10) {
  .carosello { --car-gap: 24px; --car-vista: min(100cqw, 1480px);
               --car-w: clamp(760px, calc(64cqw + 80px), 1080px);
               --car-sopra: 16px; --car-ombra: 26px; --car-comandi-h: 28px; --car-sotto: 14px;
               --car-h-min: 370px; --car-h-max: 660px; --car-fuoco-scala: .94; --car-fuoco-op: .6; }
  /* ★ v2: minimo 370 (era 400): a 1280×720, il «PC basso» più comune (1920×1080 al 150 %), la fascia sotto si vede */
  .car-pista { --car-sfuma: calc((100% - var(--car-w)) / 4);          /* un quarto dello spazio di lato */
               -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--car-sfuma), #000 calc(100% - var(--car-sfuma)), transparent);
                       mask-image: linear-gradient(90deg, transparent, #000 var(--car-sfuma), #000 calc(100% - var(--car-sfuma)), transparent); }
  .car-pista > .punto { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 1.15fr); column-gap: 40px;
                        align-items: center; padding: 28px 32px 24px; }
  .car-pista .punto h2 { font-size: 25px; line-height: 1.2; margin-bottom: 14px; }
  .car-pista .punto .n { width: 40px; height: 40px; font-size: 18px; border-radius: 13px; transform: translateY(8px); }
  .car-pista .punto p { font-size: 17px; line-height: 1.6; margin-bottom: 8px; }
  .car-pista .punto .shots2 { margin: 0; padding: 0; gap: 0 20px; }
  .car-pista .punto .shots1 { padding: 0; }
  .car-pista .punto .shot figcaption { font-size: 13px; }
  .car-pista > .punto:has(.livelli-box) { grid-template-columns: minmax(260px, .8fr) minmax(0, 1.4fr); }
  .car-pista .livelli-box { margin: 0; }
  .car-pista .livelli-box:not([data-compatta]) :is(th, td) { padding-block: 8px; }
  .car-pista .livelli-box:not([data-compatta]) tbody th { font-size: 13.5px; line-height: 1.35; }
  /* frecce ai lati della card attiva, sopra le vicine */
  .car-comandi { position: static; }
  .car-freccia { position: absolute; z-index: 2; top: calc(var(--car-sopra) + var(--car-h) / 2); translate: 0 -50%;
                 width: 52px; height: 52px; box-shadow: 0 10px 26px -8px rgba(20, 6, 60, .8); }
  .car-freccia svg { width: 22px; height: 22px; }
  .car-prima { left: calc(50% - var(--car-w) / 2 - 64px); }
  .car-dopo  { right: calc(50% - var(--car-w) / 2 - 64px); }
  .car-freccia[aria-disabled="true"]:not(:focus-visible) { opacity: 0; pointer-events: none; }
  .car-pallino { height: 28px; }
  @media (hover: hover) { .car-freccia:not([aria-disabled="true"]):hover { background: #f1ebfd; } }
}
@media (min-width: 900px) and (min-aspect-ratio: 11/10) and (prefers-reduced-motion: no-preference) {
  .car-freccia { transition: opacity .25s, background var(--vel-1), transform var(--vel-1) var(--curva); }
}

/* --- 9. il visore (tocco su una schermata della card attiva) --- */
.shot-zoom { all: unset; display: block; cursor: zoom-in; border-radius: 18px; }
.shot-zoom:focus-visible { outline: 3px solid var(--accento); outline-offset: 3px; }
.car-zoom { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; overflow: visible; }
.car-zoom::backdrop { background: rgba(20, 6, 60, .82); }
.car-zoom figure { margin: 0; display: flex; flex-direction: column; align-items: center; }
.car-zoom img { display: block; height: min(calc(100svh - 120px), 812px); width: auto; border: 6px solid #221338;
                border-radius: 30px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8); }
.car-zoom img.pc { width: min(96vw, 1280px); height: auto; max-height: calc(100svh - 120px); object-fit: contain;
                   border-width: 3px; border-radius: 10px; }                        /* ★ IMP6-1: da computer */
.car-zoom figcaption { max-width: min(92vw, 420px); margin-top: 12px; color: #fff; font-size: 14px; font-style: italic; text-align: center; }
.car-zoom-chiudi { all: unset; position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px; width: 44px; height: 44px;
                   border-radius: 50%; background: #fff; color: var(--brand-2); display: grid; place-items: center;
                   font-size: 26px; font-weight: 700; cursor: pointer; }
.car-zoom-chiudi:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* la card 8 «nel visore» (solo quando nemmeno la matrice compatta ci sta: 360x640, SE) */
/* ★ v2: con l'affaccio sotto la matrice non ci sta già a 375×812: invece del bottone da solo in una card vuota, la
   matrice si vede fin dove ci sta e SFUMA in fondo (come i telefoni tagliati), col bottone sopra la sfumatura */
.liv-apri { display: none; }
.car-pista .livelli-box[data-visore] { flex: 1 1 0; min-height: 0; overflow: hidden; position: relative; }
.car-pista .livelli-box[data-visore] > .livelli {
  -webkit-mask-image: linear-gradient(#000 35%, transparent 80%); mask-image: linear-gradient(#000 35%, transparent 80%); }
.car-pista .livelli-box[data-visore] > :is(.livelli-ruoli, .livelli-legenda) { display: none; }   /* sono nel visore */
.car-pista .livelli-box[data-visore] > .liv-apri { display: block; position: absolute; left: 0; right: 0; bottom: 4px; z-index: 1;
  width: 100%; min-height: 44px; margin: 0; padding: 10px 14px;
  border-radius: 999px; background: #fff; color: var(--brand-2); font-size: 14px; font-weight: 800; letter-spacing: .01em;
  box-shadow: 0 6px 16px -8px rgba(49, 23, 107, .6); }
.car-zoom-tabella { width: min(92vw, 420px); }
.car-zoom-tabella .livelli-box { margin: 0; padding: 18px 16px 14px; border-radius: 20px; background: #e8defa; overflow: visible; }
.car-zoom figure[hidden] { display: none; }
/* livello 3: la legenda dei segni si toglie (✓, lucchetto e lineetta si capiscono; le parole restano per i lettori di schermo) */
.carosello[data-fit="3"] .car-pista .livelli-box[data-compatta] .livelli-legenda { display: none; }

/* riduci movimento: niente scala legata allo scorrimento, ma le vicine restano velate (ferme) */
@media (prefers-reduced-motion: reduce) {
  .car-pista > .punto:not(.attiva) { opacity: var(--car-fuoco-op); }
}

/* mentre il JS misura: transizioni spente (il sito, con «riduci movimento», trasforma ogni cambio in una transizione di
   .01ms e la misura leggerebbe i valori di prima) */
.carosello.car-calcolo, .carosello.car-calcolo * { transition: none !important; }