Migliora il layout mobile delle sezioni home

MethodSteps passa a una sola colonna con step in orizzontale, PartnersStrip
riduce loghi e spaziature, TrainingCards ridimensiona testi e padding.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

.gitignore

@@ -2,6 +2,7 @@ node_modules/
 dist/
 .astro/
 .env
+.env.bak*
 data/*.db*
 uploads/*
 !uploads/.gitkeep

README.md

@@ -1,11 +1,13 @@
 # InsanityLab Website
 
-Sito ufficiale di InsanityLab: vetrina aziendale, blog integrato, form di contatti e sistema di contenuti modificabili senza toccare il codice. In produzione su **https://insanitylab.it**.
+Sito ufficiale di InsanityLab: vetrina aziendale, blog integrato, form di contatti, piattaforme riservate ai clienti abilitati e sistema di contenuti modificabili senza toccare il codice. In produzione su **https://insanitylab.it**.
 
 ## Descrizione
 
 Il sito è costruito su **Astro 7** in modalità server (SSR) con adapter **Node.js standalone**, servito in un container Docker dietro **Traefik** (TLS Let's Encrypt automatico). I contenuti testuali e le immagini della parte vetrina sono "taggati" e salvati su **SQLite**: si modificano da un pannello di amministrazione o direttamente in pagina, senza deploy. Il blog è gestito internamente con editor rich‑text, e il form di contatti invia email tramite SMTP.
 
+Accanto alla vetrina vivono due sezioni riservate, raccolte sotto `/piattaforme` e visibili solo agli utenti abilitati: il **Biohacking Campus** (guide di studio generate da un progetto esterno) e **Stress Index** (piattaforma di monitoraggio HRV). Quest'ultima è l'unica parte del sito che usa React, sotto forma di isole limitate ai grafici e alle viste interattive.
+
 ## Stack tecnologico
 
 - **Framework**: Astro 7 (output `server`, `prerender = false` sulle pagine dinamiche)
@@ -14,6 +16,8 @@ Il sito è costruito su **Astro 7** in modalità server (SSR) con adapter **Node
 - **Autenticazione**: sessioni con password hashate (`bcryptjs`)
 - **Email**: Nodemailer (SMTP)
 - **Editor articoli**: TipTap (rich text)
+- **Isole interattive**: React 19 via `@astrojs/react`, solo nella piattaforma Stress Index
+- **Grafici**: Recharts (caricati unicamente sulle pagine della piattaforma)
 - **Font**: `@fontsource` (Montserrat, Open Sans) — nessun CDN esterno
 - **Sitemap**: endpoint runtime `/sitemap.xml` (route vetrina + articoli pubblicati)
 - **Test**: Vitest
@@ -25,9 +29,10 @@ Il sito è costruito su **Astro 7** in modalità server (SSR) con adapter **Node
 - **Vetrina**: home, chi siamo, training, servizi (con schede di dettaglio), blog, contatti, landing "Promo ed eventi".
 - **Contenuti taggati**: ogni testo/immagine ha un tag (es. `home.hero.title-line-1`) modificabile dal pannello o in pagina.
 - **Modifica inline**: chi ha i permessi può attivare l'overlay dei tag e modificare i contenuti direttamente mentre naviga il sito.
-- **Blog** con editor TipTap, immagini caricate, firma autore e proprietà degli articoli per ruolo.
-- **Gestione utenti** con quattro ruoli (`admin`, `superuser`, `user`, `campus`).
-- **Campus**: sezione riservata con le guide di studio del corso Biohacking Campus, accessibile solo dopo il login e con navigazione autonoma.
+- **Blog** con editor TipTap, immagini caricate, firma autore, proprietà degli articoli per ruolo, filtro per tematica senza ricaricare la pagina e conteggio degli articoli per categoria.
+- **Cestino degli articoli**: l'eliminazione sposta in `/admin/cestino`, da dove si ripristina o si cancella in via definitiva.
+- **Gestione utenti** con quattro ruoli (`admin`, `superuser`, `user`, `piattaforme`), creazione su pagina dedicata e password impostabile a mano o generata.
+- **Piattaforme riservate** (`/piattaforme`): indice delle sezioni accessibili ai soli utenti abilitati — Biohacking Campus e Stress Index.
 - **Form contatti** con validazione, honeypot anti‑spam, rate‑limit e invio email via SMTP.
 
 ## Installazione (sviluppo)
@@ -54,8 +59,9 @@ Il database `data/insanitylab.db` viene creato al primo avvio ed è popolato aut
 | `npm run preview` | Anteprima locale della build |
 | `npm run start` | Server di produzione (`node --env-file=.env`) |
 | `npm run test` | Test con Vitest |
-| `npm run create-user` | Crea/aggiorna utente: `-- <nome> <password> [admin\|superuser\|user\|campus]` |
+| `npm run create-user` | Crea/aggiorna utente: `-- <nome> <password> [admin\|superuser\|user\|piattaforme]` |
 | `npm run sync-campus` | Rigenera i contenuti del Campus: `-- <path-progetto-biohacking-campus>` |
+| `npm run seed-blog` | Carica i venti articoli divulgativi tratti dal corso base del Campus (salta quelli già presenti) |
 
 ## Gestione contenuti
 
@@ -69,43 +75,65 @@ Il seed dei contenuti è in `src/data/content-seed.ts`; le variazioni sui conten
 
 > Nota tecnica: gli elementi resi dai componenti `<T>`/`<TImg>` **non** ereditano il `data-astro-cid` del componente che li usa. Uno stile scoped basato solo sulla classe (es. `.hero__line`) non li raggiunge: va ancorato a un contenitore che ha il cid usando `:global()` (es. `.hero__text :global(.hero__line)`).
 
+## Blog
+
+Gli articoli stanno nella tabella `posts` e si gestiscono da `/admin`. La pagina pubblica `/blog` filtra per tematica e pagina senza ricaricare — si scarica la stessa pagina e si sostituiscono soltanto griglia e filtri — mantenendo indirizzi veri e cronologia del browser: senza JavaScript la navigazione funziona come prima.
+
+L'eliminazione di un articolo non cancella nulla: valorizza `deleted_at` e lo sposta nel **cestino** (`/admin/cestino`), da dove si ripristina o si elimina davvero. Ogni lettura pubblica — elenco, recenti, archivio per mese, pagina del singolo articolo — esclude il cestino, e chi non ha ruolo di gestione vede nel cestino soltanto i propri articoli.
+
+Lo script `npm run seed-blog` carica venti articoli divulgativi ricavati dal corso base del Campus, dieci tecnici e dieci educativi. È versionato apposta: il database di produzione è un volume del VPS e il deploy non lo tocca, quindi articoli creati a mano in locale resterebbero in locale. Lo script salta gli slug già presenti e crea, se mancano, i due utenti che firmano gli articoli — la firma pubblica è lo `username` dell'autore.
+
 ## Ruoli e accessi
 
 Quattro ruoli, con autorizzazione a matrice di prefissi in `src/lib/auth.ts`:
 
 | Ruolo | Può fare |
 |-------|----------|
-| `admin` | Tutto: contenuti, blog, upload, **gestione utenti** (`/admin/users`), Campus |
+| `admin` | Tutto: contenuti, blog, upload, **gestione utenti** (`/admin/users`), piattaforme |
 | `superuser` | Pannello contenuti + blog |
 | `user` | Solo i **propri** articoli del blog |
-| `campus` | Solo la sezione riservata `/campus`; nessun accesso al pannello |
+| `piattaforme` | Solo le sezioni riservate (`/piattaforme`, `/campus`); nessun accesso al pannello |
 
-Login pubblico su `/login` (`?next` sanitizzato contro open redirect). Dopo l'autenticazione ogni ruolo viene indirizzato alla propria pagina iniziale: il pannello per admin e user, i contenuti per superuser, il Campus per il ruolo omonimo. La gestione utenti (`/admin/users`, solo admin) consente creazione, reset password una‑tantum, cambio ruolo ed eliminazione, con guardie contro l'auto‑eliminazione e la rimozione dell'ultimo admin.
+Login pubblico su `/login` (`?next` sanitizzato contro open redirect). Dopo l'autenticazione ogni ruolo viene indirizzato alla propria pagina iniziale: il pannello per admin e user, i contenuti per superuser, l'indice delle piattaforme per il ruolo `piattaforme`. La gestione utenti (`/admin/users`, solo admin) consente creazione su pagina dedicata (`/admin/users/new`), cambio password — scelta a mano o generata, mostrata una sola volta perché nel database resta il solo hash — cambio ruolo ed eliminazione, con guardie contro l'auto‑eliminazione e la rimozione dell'ultimo admin.
 
-## Campus (sezione riservata)
+> Il ruolo `campus` è stato rinominato in `piattaforme` quando le sezioni riservate sono diventate due. Una migrazione in `src/lib/db.ts` aggiorna da sé gli utenti esistenti.
 
-La sezione `/campus` raccoglie le guide di studio del corso Biohacking Campus. È protetta dal middleware come il pannello: un visitatore anonimo viene mandato al login, un utente con ruolo non abilitato torna alla propria pagina iniziale. Le pagine non montano l'header e il footer del sito — la navigazione avviene attraverso la barra laterale delle aree, con un unico richiamo per tornare alla home — ma usano i font, i colori e il CSS globale di InsanityLab.
+## Piattaforme riservate
+
+Le sezioni riservate sono raccolte sotto `/piattaforme`, che è anche la pagina di atterraggio del ruolo omonimo. L'elenco vive in `src/data/piattaforme.ts`: aggiungerne una è una riga, e il menu dell'header la mostra da sé a chi ha i permessi.
+
+### Biohacking Campus (`/campus`)
+
+La sezione `/campus` raccoglie le guide di studio del corso Biohacking Campus. È protetta dal middleware come il pannello: un visitatore anonimo viene mandato al login, un utente con ruolo non abilitato torna alla propria pagina iniziale. Le pagine non montano l'header e il footer del sito — la navigazione avviene attraverso la barra laterale delle aree, con un unico richiamo per tornare all'indice delle piattaforme — ma usano i font, i colori e il CSS globale di InsanityLab.
 
 I contenuti non vengono scritti a mano: lo script `npm run sync-campus` legge le guide sorgente (`*.studio.md`) dal progetto Biohacking Campus, le converte in frammenti HTML e produce la cartella `campus-content/` (indice `nav.json`, pagine e immagini delle slide), che va committata perché il deploy la copia nell'immagine Docker. Lo script è idempotente: rigenerarlo dopo l'aggiunta di nuove lezioni aggiorna indice e pagine e rimuove quelle non più presenti. Le nuove guide vanno prima dichiarate nella struttura dei capitoli in `scripts/campus/structure.mjs`.
 
 Le immagini delle slide sono servite dalla route `/campus/assets/...`, anch'essa protetta: non sono raggiungibili senza una sessione valida.
 
+> Il progetto sorgente sta in `/home/adriano/Wasabi-Adp-Work/AI-OS/projects/personale/biohacking-campus` (percorso predefinito dello script). In sviluppo, dopo un sync, il server va riavviato: `src/lib/campus.ts` tiene l'indice in cache in memoria e le guide nuove darebbero 404.
+
+### Stress Index (`/piattaforme/stress-index`)
+
+Piattaforma di monitoraggio HRV portata dentro il sito da un prototipo Next.js esterno: nove viste — cruscotto giornaliero, elenco clienti, scheda cliente, analytics di studio, modulo sport con sessioni e atleti, team live, impostazioni, organizzazione. Il design system del prototipo (Tailwind, palette teal) è stato sostituito con quello del sito: lo stile sta in `src/styles/stress-index.css`, un foglio globale prefissato `.si` perché le stesse classi servono sia ai componenti Astro sia alle isole React, che lo scope di Astro non raggiungerebbe.
+
+React è limitato a ciò che ha davvero bisogno di stato: la scheda cliente, la vista Analytics, il modulo Sport e i grafici Recharts. Il resto è Astro con qualche riga di JavaScript. I dati sono **dimostrativi** e stanno in `src/lib/stress-index/data.ts`; le aggregazioni con una logica propria (finestre temporali, distribuzioni, riepiloghi atleta) vivono in `analytics.ts` e `sport.ts` accanto, coperte da test.
+
 ## Struttura del progetto
 
 ```
 insanitylab-website/
 ├── src/
-│   ├── pages/            # Route Astro (vetrina, /admin, /api, /campus)
-│   ├── components/       # Componenti (home/, content/, Header, Footer, …)
-│   ├── layouts/          # Layout Base, Admin, Campus
-│   ├── data/             # Dati statici + seed contenuti (services, trainings, site, content-seed)
-│   ├── lib/              # db, auth, content, mailer, rate-limit, safe-next, env
+│   ├── pages/            # Route Astro (vetrina, /admin, /api, /campus, /piattaforme)
+│   ├── components/       # Componenti (home/, content/, stress-index/, Header, Footer, …)
+│   ├── layouts/          # Layout Base, Admin, Campus, StressIndex
+│   ├── data/             # Dati statici + seed contenuti (services, trainings, site, piattaforme, content-seed)
+│   ├── lib/              # db, auth, content, mailer, rate-limit, safe-next, env, stress-index/
 │   ├── assets/img/       # Immagini ottimizzate da Astro
-│   └── styles/           # global.css
+│   └── styles/           # global.css, stress-index.css
 ├── data/                 # SQLite (volume in produzione)
 ├── uploads/              # Upload immagini (volume in produzione)
 ├── campus-content/       # Contenuti del Campus generati da sync-campus
-├── scripts/              # create-user, sync-campus, smoke test
+├── scripts/              # create-user, sync-campus, seed-blog-biohacking, smoke test
 ├── astro.config.mjs      # Config Astro (site, allowedDomains, redirects)
 ├── compose.yaml          # Stack Docker + label Traefik
 ├── Dockerfile            # Build multi-stage
@@ -137,11 +165,20 @@ Il sito gira in Docker su un VPS, dietro Traefik. Lo stack è in `/opt/docker/in
 
 ```bash
 cd /opt/docker/insanitylab/src
-git pull
-docker compose up -d --build
+sudo git -c safe.directory="$PWD" pull origin main    # il repo è di root: serve sudo, con password
+docker compose up -d --build                          # docker gira senza sudo
 ```
 
-Le migrazioni del database (in `src/lib/db.ts`) sono idempotenti e girano all'avvio del container: aggiornano lo schema e i contenuti senza perdere le modifiche fatte dal pannello.
+Le migrazioni del database (in `src/lib/db.ts`) sono idempotenti e girano all'avvio del container: aggiornano lo schema e i contenuti senza perdere le modifiche fatte dal pannello. Le migrazioni che cambiano un valore sono sempre guardate dal valore precedente, quindi non sovrascrivono ciò che è stato modificato dal pannello — con la conseguenza, da tenere presente, che un contenuto già ritoccato a mano **non** riceve il nuovo default: va corretto dal pannello.
+
+Prima di ogni deploy conviene fare il backup del database, che è in modalità WAL: un `cp` del solo `.db` perderebbe le modifiche non ancora consolidate.
+
+```bash
+sqlite3 -cmd ".timeout 10000" /opt/docker/insanitylab/data/insanitylab.db ".backup '/dest/insanitylab.db'"
+sqlite3 /dest/insanitylab.db "PRAGMA integrity_check;"    # deve rispondere 'ok'
+```
+
+Gli articoli del blog non viaggiano con il codice: per caricarli in produzione, una volta sola, `docker exec insanitylab node scripts/seed-blog-biohacking.mjs`.
 
 ### Dominio e DNS
 
@@ -162,6 +199,10 @@ Le migrazioni del database (in `src/lib/db.ts`) sono idempotenti e girano all'av
 
 **Database "locked" durante i test** — assicurarsi che nessun processo stia accedendo a `data/insanitylab.db`.
 
+**Le guide nuove del Campus danno 404 in sviluppo** — `src/lib/campus.ts` tiene l'indice in cache in memoria: dopo `npm run sync-campus` va riavviato il server.
+
+**Il database di produzione sembra non aggiornato dopo il deploy** — `sqlite3 -readonly` non legge il file `-wal`, dove stanno le modifiche non ancora consolidate, e mostra valori vecchi. Per verificare, interrogare il database in lettura‑scrittura oppure — meglio — guardare direttamente le pagine del sito.
+
 ## Licenza
 
 Proprietà di InsanityLab.

docs/articoli-blog.md

@@ -0,0 +1,169 @@
+# Articoli del blog — insanity.lab
+
+Elenco completo degli articoli presenti sul sito, con categoria, stato di pubblicazione e sintesi.
+Documento generato il 1 agosto 2026 per la revisione del cliente.
+
+**Totale:** 20 articoli attivi (20 pubblicati, 0 in bozza).
+
+## Articoli pubblicati
+
+### 1. Il sonno si misura in cicli, non in ore
+
+- **Categoria:** Articoli tecnici & scientifici
+- **Data:** 31 luglio 2026
+- **Link:** https://insanitylab.it/blog/sonno-cicli-non-ore
+
+Sette ore spezzate valgono meno di sei ore intere. Come funziona l'architettura del sonno e perché conviene ragionare in blocchi da novanta minuti.
+
+### 2. HRV: che cosa dice davvero la variabilità cardiaca
+
+- **Categoria:** Articoli tecnici & scientifici
+- **Data:** 29 luglio 2026
+- **Link:** https://insanitylab.it/blog/hrv-variabilita-cardiaca
+
+Non è la frequenza cardiaca e non è un voto sulla forma fisica. È la misura di quanto il sistema nervoso sa attivarsi e, soprattutto, tornare in equilibrio.
+
+### 3. Quante proteine servono davvero
+
+- **Categoria:** Articoli tecnici & scientifici
+- **Data:** 27 luglio 2026
+- **Link:** https://insanitylab.it/blog/quante-proteine-servono
+
+Prima la quantità, poi la qualità, solo alla fine distribuzione e timing. La gerarchia che conta, con i numeri per chi si allena e per chi no.
+
+### 4. Creatina: che cosa dice la ricerca
+
+- **Categoria:** Articoli tecnici & scientifici
+- **Data:** 25 luglio 2026
+- **Link:** https://insanitylab.it/blog/creatina-cosa-dice-la-ricerca
+
+È l'integratore più studiato in assoluto e uno dei pochi con prove solide. A cosa serve, quanta prenderne e perché non è una sostanza dopante.
+
+### 5. Il freddo e l'ormesi: perché un piccolo stress fa bene
+
+- **Categoria:** Articoli tecnici & scientifici
+- **Data:** 23 luglio 2026
+- **Link:** https://insanitylab.it/blog/freddo-ormesi
+
+Vasi sanguigni, grasso bruno, noradrenalina. Che cosa accade nell'organismo durante l'esposizione al freddo e dove sta il confine con l'esagerazione.
+
+### 6. Respirare meno per ossigenare meglio: il ruolo della CO2
+
+- **Categoria:** Articoli tecnici & scientifici
+- **Data:** 21 luglio 2026
+- **Link:** https://insanitylab.it/blog/respirazione-anidride-carbonica
+
+Non è l'ossigeno a mancare, ma l'anidride carbonica a servire. Come funziona lo scambio nei tessuti e perché la respirazione nasale cambia le cose.
+
+### 7. La luce che regola l'orologio biologico
+
+- **Categoria:** Articoli tecnici & scientifici
+- **Data:** 19 luglio 2026
+- **Link:** https://insanitylab.it/blog/luce-orologio-biologico
+
+Un segnale nella luce del mattino fa partire la giornata metabolica. E gli schermi della sera raccontano al cervello che è ancora mezzogiorno.
+
+### 8. Recupero attivo: perché fermarsi non basta
+
+- **Categoria:** Articoli tecnici & scientifici
+- **Data:** 17 luglio 2026
+- **Link:** https://insanitylab.it/blog/recupero-attivo
+
+Il divano è riposo, non recupero. Sistema linfatico, tessuto connettivo e la differenza fra togliere il carico e favorire la rigenerazione.
+
+### 9. VO2max: l'indicatore che parla di longevità
+
+- **Categoria:** Articoli tecnici & scientifici
+- **Data:** 15 luglio 2026
+- **Link:** https://insanitylab.it/blog/vo2max-longevita
+
+Quanta energia sai erogare nel tempo. È fra i parametri più correlati alla salute futura, e si allena a qualsiasi età.
+
+### 10. Leggere i dati di orologi e anelli senza farsi ingannare
+
+- **Categoria:** Articoli tecnici & scientifici
+- **Data:** 13 luglio 2026
+- **Link:** https://insanitylab.it/blog/leggere-i-dati-dei-dispositivi
+
+Un numero isolato non dice quasi nulla. Le tre regole per trasformare i dati di un dispositivo indossabile in decisioni sensate.
+
+### 11. Sette abitudini per dormire meglio da stasera
+
+- **Categoria:** Contenuti educativi
+- **Data:** 11 luglio 2026
+- **Link:** https://insanitylab.it/blog/dormire-meglio-da-stasera
+
+Nessun integratore, nessuna spesa. Piccoli gesti che spostano davvero la qualità del riposo, da provare uno alla volta.
+
+### 12. Muoversi ogni giorno: quanto basta davvero
+
+- **Categoria:** Contenuti educativi
+- **Data:** 09 luglio 2026
+- **Link:** https://insanitylab.it/blog/muoversi-ogni-giorno
+
+Fra il divano e la maratona c'è tutto lo spazio che serve. Come mettere insieme una settimana di movimento sostenibile, anche partendo da zero.
+
+### 13. Il peso non si decide sulla bilancia
+
+- **Categoria:** Contenuti educativi
+- **Data:** 07 luglio 2026
+- **Link:** https://insanitylab.it/blog/il-peso-non-e-solo-la-bilancia
+
+Cinque pilastri in ordine di importanza, e perché il lavoro vero avviene mentre dormiamo.
+
+### 14. Proteine a tavola: come distribuirle nella giornata
+
+- **Categoria:** Contenuti educativi
+- **Data:** 05 luglio 2026
+- **Link:** https://insanitylab.it/blog/proteine-a-tavola
+
+Senza bilancia e senza calcoli complicati. Quantità pratiche, fonti quotidiane e l'errore più comune: concentrare tutto a cena.
+
+### 15. Doccia fredda: come iniziare senza esagerare
+
+- **Categoria:** Contenuti educativi
+- **Data:** 03 luglio 2026
+- **Link:** https://insanitylab.it/blog/doccia-fredda-come-iniziare
+
+Una progressione in quattro settimane per abituarsi al freddo, con le avvertenze da tenere presenti prima di cominciare.
+
+### 16. Cinque minuti di respiro al giorno
+
+- **Categoria:** Contenuti educativi
+- **Data:** 01 luglio 2026
+- **Link:** https://insanitylab.it/blog/cinque-minuti-di-respiro
+
+Un esercizio semplice da fare ovunque per abbassare la tensione, e come usarlo prima di dormire o prima di una situazione difficile.
+
+### 17. La luce del mattino è la sveglia naturale
+
+- **Categoria:** Contenuti educativi
+- **Data:** 29 giugno 2026
+- **Link:** https://insanitylab.it/blog/luce-del-mattino
+
+Dieci minuti all'aperto appena alzati cambiano il sonno della notte successiva. E la sera, qualche accorgimento con gli schermi.
+
+### 18. Come capire quando serve fermarsi
+
+- **Categoria:** Contenuti educativi
+- **Data:** 27 giugno 2026
+- **Link:** https://insanitylab.it/blog/quando-fermarsi
+
+I segnali che distinguono la stanchezza normale da quella che chiede una pausa, e cosa fare nei giorni di scarico.
+
+### 19. Il piatto della longevità
+
+- **Categoria:** Contenuti educativi
+- **Data:** 25 giugno 2026
+- **Link:** https://insanitylab.it/blog/il-piatto-della-longevita
+
+Un modello visivo al posto delle tabelle: metà verdure, un quarto carboidrati, un quarto proteine. Semplice da ricordare, difficile da sbagliare.
+
+### 20. Tenere il cervello in allenamento
+
+- **Categoria:** Contenuti educativi
+- **Data:** 23 giugno 2026
+- **Link:** https://insanitylab.it/blog/cervello-in-allenamento
+
+Movimento, sonno, relazioni e cose nuove da imparare: le abitudini che proteggono la mente invecchiano meglio di qualsiasi integratore.
+

src/components/home/MethodSteps.astro

@@ -42,5 +42,14 @@ const imgOf = (name: string) => Object.entries(images).find(([p]) => p.includes(
   .method__circle span { position: absolute; top: -6px; left: -6px; font-family: var(--font-heading); font-size: 2.4rem; color: var(--c-heading); background: var(--c-bg-alt); padding: 0 8px; }
   .method__step h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .14em; }
   .method__step p { font-size: .85rem; color: var(--c-text-light); }
-  @media (max-width: 767px) { .method__row { grid-template-columns: 1fr 1fr; } }
+  @media (max-width: 767px) {
+    /* una colonna con lo step in orizzontale: a due colonne i titoli lunghi
+       si spezzavano su quattro righe. */
+    .method__row { grid-template-columns: 1fr; gap: 28px; text-align: left; }
+    .method__step { display: grid; grid-template-columns: 104px 1fr; column-gap: 18px; align-items: start; }
+    .method__circle { width: 104px; height: 104px; margin: 0; grid-row: 1 / span 2; }
+    .method__circle span { font-size: 1.8rem; top: -4px; left: -4px; }
+    .method__step h3 { margin-top: 4px; }
+    .method__note { text-align: left; margin-left: 0; max-width: none; }
+  }
 </style>

src/components/home/PartnersStrip.astro

@@ -16,4 +16,9 @@ const imgOf = (name: string) => Object.entries(images).find(([p]) => p.includes(
   .pstrip { background: var(--c-accent); padding-block: 40px; }
   .pstrip__in { display: flex; align-items: center; justify-content: space-around; gap: 30px; flex-wrap: wrap; }
   .pstrip img { height: 44px; width: auto; opacity: .9; }
+  @media (max-width: 767px) {
+    .pstrip { padding-block: 28px; }
+    .pstrip__in { justify-content: center; gap: 20px 28px; }
+    .pstrip img { height: 30px; }
+  }
 </style>

src/components/home/TrainingCards.astro

@@ -46,5 +46,11 @@ const isSwapRow = (i: number) => Math.floor(i / 2) % 2 === 1;
   .tcards__photo { overflow: hidden; }
   .tcards__img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; transition: transform .5s ease; }
   .tcards__photo:hover .tcards__img { transform: scale(1.06); }
-  @media (max-width: 767px) { .tcards { grid-template-columns: repeat(2, 1fr); } }
+  @media (max-width: 767px) {
+    .tcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .tcards__cell { padding: 22px 16px; }
+    .tcards__cell h3 { font-size: 1rem; letter-spacing: .08em; }
+    .tcards__cell p { font-size: .74rem; }
+    .tcards__link { font-size: .62rem; letter-spacing: .14em; margin-top: 12px; }
+  }
 </style>

src/data/content-seed.ts

@@ -369,10 +369,14 @@ export const contentSeed: SeedEntry[] = [
   T('promo.validity-note', 'Promo valida dal 1° al 19 agosto 2026 · Incontri validi entro 2 mesi dal primo incontro e comunque non oltre il 1° dicembre 2026', []),
   // FAQ — le risposte usano il segnaposto {{whatsapp}}, sostituito a runtime con global.whatsapp
   T('promo.faq.title', 'Tutto quello che vuoi sapere prima di acquistare.'),
+  // La FAQ 0 è mostrata per prima: numerata così per non rinumerare le esistenti (i tag già
+  // presenti nei DB non verrebbero riscritti dall'INSERT OR IGNORE del seed).
+  T('promo.faq.0.q', 'Come faccio ad acquistare i pacchetti?'),
+  H('promo.faq.0.a', 'Clicca sull\'icona del pacchetto che desideri acquistare e compila tutti i campi richiesti per completare la registrazione.<br><br>Una volta terminata l\'iscrizione, riceverai un\'email con le istruzioni per scaricare la nostra app <span class="hl">Bsport</span>. Dopo aver effettuato l\'accesso, entra nella sezione <span class="hl">Club</span>: qui troverai tutti i pacchetti disponibili. Seleziona quello che preferisci e completa l\'acquisto direttamente dall\'app effettuando il pagamento.<br><br>Se hai bisogno di aiuto scrivi su <span class="hl">WhatsApp ({{whatsapp}})</span> e sarai presto ricontattato!'),
   T('promo.faq.1.q', 'Come funziona il pacchetto a incontri per One to One e Small Group?'),
-  H('promo.faq.1.a', 'Acquisti il pacchetto online con pagamento sicuro via <span class="hl">Stripe</span>. Ricevi una conferma via email. Poi ci scrivi su <span class="hl">WhatsApp ({{whatsapp}})</span> per prenotare le singole sessioni in base agli orari disponibili. Verrai ricontattato subito tramite messaggio o chiamata! Gli incontri sono validi 2 mesi dalla data del primo incontro e comunque non oltre il 1° dicembre 2026.'),
+  H('promo.faq.1.a', 'Per acquistare il pacchetto online segui le istruzioni riportate nella risposta della prima domanda. Una volta avvenuto con successo l\'acquisto, potrai contattarci scrivendoci su <span class="hl">WhatsApp ({{whatsapp}})</span> per prenotare lo screening iniziale ovvero il colloquio conoscitivo per la definizione dei tuoi obiettivi. Verrai ricontattato subito tramite messaggio o chiamata! Gli incontri sono validi 2 mesi dalla data del primo incontro e comunque non oltre il 1° dicembre 2026.'),
   T('promo.faq.2.q', 'Come funziona il percorso Reformer o Holistic Class?'),
-  H('promo.faq.2.a', 'Acquisti il pacchetto online con pagamento sicuro via <span class="hl">Stripe</span>. Ricevi una conferma via email. Poi vai nella schermata Home, clicca il servizio che hai acquistato e seleziona autonomamente la class nel giorno e nell\'orario che desideri. In caso di problemi contattaci su <span class="hl">WhatsApp ({{whatsapp}})</span>! Gli incontri sono validi 2 mesi dalla data del primo incontro e comunque non oltre il 1° dicembre 2026.'),
+  H('promo.faq.2.a', 'Per acquistare il pacchetto online segui le istruzioni riportate nella risposta della prima domanda. Una volta scaricata l\'app <span class="hl">Bsport</span> e acquistato il pacchetto potrai procedere a selezionare autonomamente la class che preferisci nel giorno e nell\'orario che desideri. Gli orari delle class saranno pubblicati entro Settembre. In caso di problemi contattaci su <span class="hl">WhatsApp ({{whatsapp}})</span>! Gli incontri sono validi 2 mesi dalla data del primo incontro e comunque non oltre il 1° dicembre 2026.'),
   T('promo.faq.3.q', 'Posso usare gli incontri su servizi diversi?'),
   H('promo.faq.3.a', 'Ogni pacchetto è dedicato a un singolo servizio (<span class="hl">One to One</span>, <span class="hl">Small Group</span>, <span class="hl">Reformer</span> o <span class="hl">Holistic Class</span>). Se vuoi accedere a più servizi puoi acquistare pacchetti separati per ciascuno.'),
   T('promo.faq.4.q', 'Posso regalare un pacchetto a qualcun altro?'),

src/lib/db.ts

@@ -247,6 +247,27 @@ export function createDb(path?: string): Database.Database {
   // visibile ai soli admin): i tag che la servivano restano orfani nei DB esistenti.
   db.prepare("DELETE FROM content_blocks WHERE tag IN ('global.nav.7.label', 'promo.pagehero.title')").run();
 
+  // FAQ "Come faccio ad acquistare i pacchetti?": coda con il rimando a WhatsApp aggiunta dopo
+  // il primo deploy → i DB esistenti hanno ancora la versione senza. Append guardato dalla fine
+  // del vecchio testo e dall'assenza della coda → idempotente, non tocca riscritture da pannello.
+  db.prepare(
+    `UPDATE content_blocks SET value = value || '<br><br>Se hai bisogno di aiuto scrivi su <span class="hl">WhatsApp ({{whatsapp}})</span> e sarai presto ricontattato!'
+     WHERE tag = 'promo.faq.0.a' AND value LIKE '%effettuando il pagamento.'`,
+  ).run();
+
+  // FAQ 1 e 2 riscritte (rimando alla prima domanda per l'acquisto, screening iniziale per
+  // One to One/Small Group, orari class entro Settembre). Guardia via frammento LIKE del vecchio
+  // testo → idempotente e rispettosa di eventuali riscritture da pannello.
+  const PROMO_FAQ_RISCRITTE: [string, string, string][] = [
+    ['promo.faq.1.a', '%per prenotare le singole sessioni in base agli orari disponibili%',
+      'Per acquistare il pacchetto online segui le istruzioni riportate nella risposta della prima domanda. Una volta avvenuto con successo l\'acquisto, potrai contattarci scrivendoci su <span class="hl">WhatsApp ({{whatsapp}})</span> per prenotare lo screening iniziale ovvero il colloquio conoscitivo per la definizione dei tuoi obiettivi. Verrai ricontattato subito tramite messaggio o chiamata! Gli incontri sono validi 2 mesi dalla data del primo incontro e comunque non oltre il 1° dicembre 2026.'],
+    ['promo.faq.2.a', '%vai nella schermata Home, clicca il servizio che hai acquistato%',
+      'Per acquistare il pacchetto online segui le istruzioni riportate nella risposta della prima domanda. Una volta scaricata l\'app <span class="hl">Bsport</span> e acquistato il pacchetto potrai procedere a selezionare autonomamente la class che preferisci nel giorno e nell\'orario che desideri. Gli orari delle class saranno pubblicati entro Settembre. In caso di problemi contattaci su <span class="hl">WhatsApp ({{whatsapp}})</span>! Gli incontri sono validi 2 mesi dalla data del primo incontro e comunque non oltre il 1° dicembre 2026.'],
+  ];
+  const updFaq = db.prepare('UPDATE content_blocks SET value = ? WHERE tag = ? AND value LIKE ?');
+  const updFaqTx = db.transaction(() => { for (const [tag, frag, newV] of PROMO_FAQ_RISCRITTE) updFaq.run(newV, tag, frag); });
+  updFaqTx();
+
   // Cestino degli articoli: colonna aggiunta a posteriori sui database già esistenti.
   const colonnePost = db.prepare('PRAGMA table_info(posts)').all() as { name: string }[];
   if (!colonnePost.some((c) => c.name === 'deleted_at')) {

src/pages/promo-eventi.astro

@@ -17,7 +17,7 @@ const cards = [
   { id: 3, features: 3, featured: false },
   { id: 4, features: 3, featured: false },
 ];
-const faqs = [1, 2, 3, 4, 5, 6];
+const faqs = [0, 1, 2, 3, 4, 5, 6];
 // Numero WhatsApp centralizzato: le risposte FAQ contengono il segnaposto {{whatsapp}}
 // che qui viene sostituito col valore del tag globale, così si aggiorna in un punto solo.
 const wa = t('global.whatsapp');