/* ═══════════════════════════════════════════════════════════════════════════
   LE FONDAMENTA DEL SITO — un foglio per tutte le pagine

   Fino al 21 settembre il sito era una pagina sola e lo stile viveva dentro
   un `<style>` in cima. Poi «Lo studio» e «Chi insegna» sono diventate
   pagine proprie, e tre copie dello stesso CSS sarebbero diventate tre CSS
   diversi nel giro di un mese: si corregge la barra in una pagina, e le
   altre due restano indietro senza che nessuno se ne accorga.

   Qui c'è TUTTO lo stile, non solo le parti condivise. Separare «comune» e
   «specifico» vorrebbe dire decidere ogni volta dove mettere una regola
   nuova, e sbagliare. Una pagina che scarica qualche regola che non usa non
   se ne accorge: è un file solo, e dopo la prima visita è in cache.

   ─── COSA NON SI FA QUI DENTRO ───────────────────────────────────────────

   Due regole non devono mai dire la stessa proprietà sullo stesso elemento.
   `.wrap{padding:0 20px}` e `section{padding:54px 0}` sembravano parlare di
   cose diverse — larghezza una, respiro l'altra — e invece la classe vinceva
   e azzerava l'aria verticale di mezza pagina. Si dividono le proprietà
   longhand: `.wrap` fa i lati, `section` fa sopra e sotto.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  color-scheme:light;
  /* L'aria sopra e sotto ogni sezione. Su telefono si stringe: 54px su uno
     schermo alto 700 sono un terzo di quello che si vede, e costringono a
     scorrere per capire che la sezione è cambiata. */
  --aria:54px;
  /* Il massimo a cui arrivano barra, griglie, calendario e piede. */
  --largo:1400px;
  --ivory:#FAF8F1; --sand:#F2EFE3; --beige:#E4E8D2;
  --sage:#6FA843; --green:#2E6B3E; --green-deep:#1C4F2A; --green-mid:#497136;
  --green-soft:#8FBF6A; --veil:#E8F0DC;
  --char:#1F2A1C; --char2:#3E4A39; --muted:#5F6859;
  /* `--muted` era #7C8874: 3.73:1 su bianco, sotto il 4.5:1 che le
     linee guida chiedono per il testo piccolo, e 3.25:1 dentro i badge
     grigi. È il colore di OGNI riga `hint` — «socia n. 14», «entro
     trenta giorni», i sottotitoli delle tessere: cinquantatré
     occorrenze fra gestionale e sito, e sono tutte spiegazioni brevi,
     cioè esattamente quelle che serve leggere quando non si è pratici.
     Metà dei soci di Ankurah ha passato i sessanta.
     #656F5F è la stessa tinta più scura, e passa su tutti e quattro
     gli sfondi usati: bianco 5.26, veil 4.73, testate 5.11, badge 4.59.
     Non alzare la luminosità senza rimisurare. */
  --red:#B5232E; --red-l:#F7E0DE;
  /* L'arancione degli avvisi: il conteggio delle battute quando si avvicina
     al limite, e il bollino di un documento in scadenza. Era usato come
     `var(--amber)` senza essere mai definito: `color` con una variabile
     che non esiste non diventa rosso ne' nero, diventa **ereditato** — e
     l'avviso non si distingueva dal testo normale. */
  --amber:#84601F;
  /* Il filo sottile che separa una tessera dallo sfondo. Anche questa era
     usata e mai definita, e li' il danno era peggiore: `border:1px solid
     var(--linea)` con la variabile assente rende invalida **tutta** la
     dichiarazione, e il bordo spariva del tutto invece di essere del
     colore sbagliato. Le tessere dei due richiami erano senza contorno. */
  --linea:rgba(31,42,28,.10);
  --r:12px; --r2:18px;
  --sh:0 1px 2px rgba(31,42,28,.05), 0 6px 22px rgba(31,42,28,.07);
  --ff-d:"Poppins","Segoe UI",system-ui,sans-serif;
  --ff-b:"Inter",-apple-system,"Segoe UI",system-ui,sans-serif;
  --ff-s:"Caveat","Segoe Script",cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
/* ═══ LE ANCORE NON DEVONO FINIRE SOTTO LA BARRA ═══════════════════════════

   Cliccando «Orari» il browser porta l'inizio della sezione a filo del
   bordo superiore — dove però c'è la barra incollata, che lo copre. Si
   arrivava con il titolo «Orari dei prossimi giorni» già passato, e
   sembrava di essere atterrati nel punto sbagliato.

   `scroll-padding-top` su `html` dice al browser di fermarsi prima, e vale
   per tutte le ancore della pagina: non serve ricordarsene sezione per
   sezione.

   Il valore lo misura il JavaScript, perché cambia: in prova c'è anche la
   fascia arancione alta 34px, in produzione no. Il 96px qui è la rete di
   sicurezza per il caso in cui quella misura non giri — meglio qualche
   pixel di troppo che un titolo tagliato. */
html{scroll-behavior:smooth;scroll-padding-top:var(--testa,96px)}
/* `overflow-x:clip` resta anche dopo che i titoli scorrevoli sono stati
   tolti: le tessere che si sollevano al passaggio e la scheda che si
   apre dalla cella possono sporgere di qualche pixel, e basta quello per
   far comparire una barra di scorrimento orizzontale.

   `clip` e non `hidden`, e la differenza non è di gusto: `overflow:hidden`
   su body crea un contenitore di scorrimento nuovo, e `position:sticky`
   si àncora a quello invece che alla finestra — la barra in alto
   smetterebbe di restare incollata. `clip` taglia senza creare niente. */
body{font-family:var(--ff-b);background:var(--ivory);color:var(--char);
  font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased;
  overflow-x:clip}
h1,h2,h3{font-family:var(--ff-d);font-weight:600;letter-spacing:-.015em;line-height:1.25}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font-family:inherit;font-size:inherit}
button{cursor:pointer;border:none;background:none;color:inherit}
/* ═══ LARGHEZZA E RESPIRO SONO DUE COSE DIVERSE ════════════════════════════

   Prima era `.wrap{padding:0 20px}` e `section{padding:54px 0}`, e le
   sezioni scritte come `<section class="wrap">` uscivano **appiccicate**
   a quella sopra. Non è un ordine sbagliato delle regole: `.wrap` è una
   classe e `section` un elemento, quindi la classe vince comunque, e il
   suo `0` verticale cancellava i 54px senza che niente lo segnalasse.
   A schermo si vedeva «Quanto costa» che partiva attaccato al fondo
   sabbia della sezione precedente, e leggendo il CSS sembrava a posto.

   La correzione non è alzare la specificità — è smettere di far dire a
   due regole la stessa cosa. `.wrap` decide **quanto è larga** una
   sezione, `section` decide **quanta aria** ha sopra e sotto: proprietà
   separate, nessuna sovrascrive l'altra, e si può mettere `class="wrap"`
   su qualunque sezione senza pensarci.

   `--aria` sta in un posto solo: se un domani 54px sono pochi, si cambia
   qui e valgono per tutte. */
/* ─── QUANTO È LARGA UNA PAGINA ────────────────────────────────────────────

   Due larghezze, non una, perché testo e griglie vogliono cose opposte.

   Il TESTO non deve essere largo. Oltre una certa lunghezza di riga l'occhio
   fatica a ritrovare l'inizio di quella dopo, e si rilegge la stessa riga
   due volte senza accorgersene: è il motivo per cui i giornali fanno le
   colonne strette anche su pagine grandi. Qui non serve fare niente per
   ottenerlo — i blocchi di testo hanno già il proprio limite scritto in
   `ch`, cioè in caratteri: `.sub` sta a 60ch, il sommario dell'apertura a
   52ch. Una misura in caratteri è la misura giusta per una cosa che si
   legge, perché segue la dimensione del carattere invece di combatterla.

   Le GRIGLIE sì. Il calendario degli orari ha una colonna per giorno e a
   940px scorreva di lato anche su un monitor dove ci sarebbe stato tutto:
   a 1400 i cinque giorni passano da 178px a 280px l'uno.

   Il margine laterale cresce con lo schermo — 20px sul telefono, fino a
   48px sul monitor — perché a 1400px di contenuto su uno schermo da 1450
   il testo toccherebbe il vetro. */
.wrap{max-width:var(--largo);margin:0 auto;
  padding-left:clamp(20px,3.5vw,48px);padding-right:clamp(20px,3.5vw,48px)}
section{padding-top:var(--aria);padding-bottom:var(--aria)}
section h2{font-size:clamp(22px,4.6vw,30px);margin-bottom:6px}
section .sub{color:var(--muted);margin-bottom:26px;max-width:60ch}

/* ---------- barra ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(250,248,241,.92);backdrop-filter:blur(9px);border-bottom:1px solid rgba(31,42,28,.07)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:62px;gap:14px}
.lockup{display:flex;align-items:center;gap:10px;min-width:0}
.seed{width:30px;height:30px;flex:0 0 auto}
.lockup .nm{font-family:var(--ff-s);font-size:27px;line-height:1;color:var(--green-deep);white-space:nowrap}
.lockup .tg{font-size:7.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:2px;white-space:nowrap}
nav{display:flex;gap:20px;font-size:13.5px}
nav a{color:var(--char2)}
@media(max-width:720px){nav{display:none}}
/* Su telefono l'aria si stringe: 54px sopra e 54 sotto, su uno schermo alto
   700, sono un sesto della pagina speso in niente — e obbligano a scorrere
   per accorgersi che la sezione è cambiata. 34px bastano a separare. */
@media(max-width:720px){:root{--aria:34px}}
.btn{display:inline-block;background:var(--green);color:#fff;padding:11px 20px;border-radius:999px;font-weight:600;font-size:14px;box-shadow:var(--sh);transition:background .15s}
.btn:hover{background:var(--green-deep);text-decoration:none}
.btn.ghost{background:#fff;color:var(--green-deep);border:1px solid var(--beige)}
header .btn{padding:9px 17px;font-size:13.5px;flex:0 0 auto}

/* ---------- apertura ---------- */
.hero{background:linear-gradient(168deg,var(--veil) 0%,var(--ivory) 62%);padding:64px 0 58px}
.hero h1{font-size:clamp(30px,6.6vw,48px);color:var(--green-deep);max-width:22ch}
.hero p.lead{font-size:clamp(16px,2.4vw,19px);color:var(--char2);margin:18px 0 28px;max-width:52ch}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero .note{font-size:13px;color:var(--muted);margin-top:16px}

/* ---------- schede ---------- */
/* ─── LE DISCIPLINE ────────────────────────────────────────────────────────

   Sono cinque, e `auto-fill` ne metteva quattro sulla prima riga e una sola
   sulla seconda: una tessera spaiata in fondo sembra una dimenticanza, non
   una scelta. Da 1180px in su vanno tutte e cinque in fila; sotto, si
   scende a tre, due, una — sempre numeri che dividono male cinque, ma
   quando le righe sono già più d'una lo spaiamento non si nota.

   `align-items:stretch` è il valore di partenza della griglia e va bene:
   le tessere della stessa riga sono alte uguali anche con descrizioni di
   lunghezza diversa, ed è il motivo per cui il bordo inferiore resta
   allineato. */
/* ═══ LA GIOSTRA DELLE DISCIPLINE ═══════════════════════════════════════

   Senza `.giostra` questa è la griglia di sempre: una colonna sul telefono,
   cinque su schermo largo, tutte le schede visibili. La classe la mette il
   JavaScript, quindi se il JavaScript non parte il sito resta com'era —
   invece di mostrare una fila vuota con due frecce inerti.

   Con `.giostra` le schede diventano una fila che scorre: `scroll-snap`
   invece di calcoli in pixel, così il browser fa l'animazione e l'attrito
   del dito da solo, e funziona identico col dito, col mouse e con Tab. */
.pista{position:relative}
.cards{display:grid;grid-template-columns:1fr;gap:16px}
.cards.giostra{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;gap:14px;padding-bottom:6px;
  scrollbar-width:none;-ms-overflow-style:none}
.cards.giostra::-webkit-scrollbar{display:none}
.cards.giostra > .card{flex:0 0 100%;scroll-snap-align:start}
@media(min-width:560px){ .cards.giostra > .card{flex-basis:calc((100% - 14px)/2)} }
@media(min-width:860px){ .cards.giostra > .card{flex-basis:calc((100% - 28px)/3)} }
@media(min-width:1180px){ .cards.giostra > .card{flex-basis:calc((100% - 56px)/5)} }

/* Centrati sotto le schede. Prima erano a sinistra con il bottone di pausa
   spinto a destra da un `margin-left:auto`, e la riga sembrava sbilanciata
   perché lo era: due comandi a un capo e uno all'altro, con in mezzo il
   vuoto. */
.giostra-com{display:flex;align-items:center;justify-content:center;
  gap:12px;margin-top:18px;flex-wrap:wrap}
.gcom{border:1px solid var(--beige);background:#fff;border-radius:999px;
  min-width:38px;height:38px;padding:0 12px;font-size:18px;line-height:1;
  color:var(--green-deep);cursor:pointer;transition:.14s}
.gcom:hover{border-color:var(--green);background:var(--veil)}
.gcom:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.gcom[disabled]{opacity:.35;cursor:default}
.gpunti{display:flex;gap:7px;align-items:center}
/* I pallini sono BOTTONI, non decorazione: si raggiungono con Tab e dicono
   a che gruppo portano. Il bersaglio tattile è 24px anche se il pallino
   visibile ne misura 8 — un bersaglio da 8 pixel non si prende col dito. */
.gpunti button{width:24px;height:24px;border:0;background:none;padding:0;
  cursor:pointer;display:grid;place-items:center}
.gpunti button::before{content:'';width:8px;height:8px;border-radius:50%;
  background:var(--beige);transition:.14s}
.gpunti button[aria-selected="true"]::before{background:var(--green);
  width:22px;border-radius:999px}
.gpunti button:focus-visible{outline:2px solid var(--green);outline-offset:1px;
  border-radius:999px}
@media(min-width:560px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media(min-width:860px){ .cards{grid-template-columns:repeat(3,1fr)} }
@media(min-width:1180px){ .cards{grid-template-columns:repeat(5,1fr);gap:14px} }

/* L'illustrazione in cima alla tessera. Sono disegni, non foto: le foto
   delle lezioni non ci sono e un segnaposto grigio le farebbe sembrare
   mancanti, mentre cinque disegni della stessa mano sembrano una scelta.
   Il giorno che arrivano le foto si sostituiscono i file dentro
   `immagini/` senza toccare una riga di codice.

   `aspect-ratio` invece di un'altezza fissa: la tessera cambia larghezza a
   ogni misura di schermo, e un'altezza in pixel le darebbe proporzioni
   diverse a ogni passo. */
.card{background:#fff;border-radius:var(--r2);box-shadow:var(--sh);
  overflow:hidden;display:flex;flex-direction:column}
.card .figura{aspect-ratio:16/9;background:var(--sand);display:block;width:100%}
.card .figura img{width:100%;height:100%;object-fit:cover;display:block}
.card .dentro{padding:20px 22px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:17px;margin-bottom:3px}
.card .cat{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:9px}
.card p{font-size:14px;color:var(--char2)}
.card p{flex:1}
.card .meta{font-size:12.5px;color:var(--muted);margin-top:12px;padding-top:12px;border-top:1px solid var(--sand)}

/* ---------- il calendario della settimana ----------
   Colonne che scorrono di lato sul telefono e si affiancano sullo schermo
   grande. Ogni lezione è un pulsante: si tocca e si apre la scheda. */
/* Le colonne crescono con lo spazio invece di restare a 178px: a 940px di
   contenitore i cinque giorni scorrevano di lato anche su un monitor dove
   ci sarebbero stati tutti. `overflow-x:auto` resta — serve sul telefono,
   dove scorrere di lato è il modo giusto di guardare una settimana. */
.cal-sett{display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(178px,1fr);
  gap:12px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity}
@media(min-width:900px){
  .cal-sett{grid-auto-columns:minmax(0,1fr);overflow-x:visible}
}
.cal-gg{background:#fff;border-radius:var(--r2);box-shadow:var(--sh);
  overflow:hidden;scroll-snap-align:start;display:flex;flex-direction:column}
.cal-gg.oggi{outline:2px solid var(--green-soft)}
.cal-gg-t{padding:12px 14px 10px;background:var(--veil);color:var(--green-deep);
  display:flex;flex-direction:column;gap:1px}
.cal-gg-t span{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:600}
.cal-gg-t b{font-family:var(--ff-d);font-size:15px}
.cal-gg-t em{font-style:normal;font-size:11px;color:var(--green)}
.cal-lez{display:block;width:100%;text-align:left;padding:11px 14px;
  border-top:1px solid var(--sand);transition:background .12s}
.cal-lez:hover,.cal-lez:focus-visible{background:var(--veil);outline:none}
.cal-lez .h{display:block;font-variant-numeric:tabular-nums;font-weight:700;
  font-size:14px;color:var(--green-deep)}
.cal-lez .n{display:block;font-size:14px;margin-top:1px}
.cal-lez .i{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.cal-lez.fuori .h{color:var(--muted)}
.cal-nota{font-size:13px;color:var(--muted);margin-top:12px}

/* ---------- la scheda di una lezione ---------- */
/* `position:fixed; inset:0; margin:auto` tiene il dialogo al centro. Il
   browser lo centra con `margin:auto`, e il reset `*{margin:0}` in cima al
   file glielo toglie: senza questa riga la scheda della lezione si apre
   nell'angolo in alto a sinistra. */
dialog.sch{border:none;border-radius:var(--r2);padding:0;max-width:520px;width:calc(100% - 32px);
  box-shadow:0 18px 60px rgba(31,42,28,.24);background:#fff;color:var(--char);
  position:fixed;inset:0;margin:auto;
  max-height:calc(100vh - 48px);overflow-y:auto}
dialog.sch::backdrop{background:rgba(31,42,28,.42)}
.sch-in{padding:26px}
.sch-x{position:absolute;top:12px;right:14px;font-size:24px;line-height:1;color:var(--muted);padding:4px 8px}
.sch-quando{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:600}
.sch-in h3{font-size:22px;margin:6px 0 8px;color:var(--green-deep)}
.sch-tag{display:inline-block;background:var(--veil);color:var(--green-deep);
  border-radius:999px;padding:3px 11px;font-size:12px;font-weight:600;margin-bottom:10px}
.sch-in p{font-size:14.5px;color:var(--char2);margin-bottom:10px}
.sch-in p.vuoto{color:var(--muted);font-style:italic}
.sch-porta{background:var(--sand);border-radius:var(--r);padding:11px 13px;font-size:13.5px}
.sch-ins{display:flex;gap:14px;align-items:flex-start;margin-top:18px;
  padding-top:18px;border-top:1px solid var(--sand)}
.sch-ins b{font-family:var(--ff-d);font-size:15px;display:block}
.sch-ins span{font-size:12.5px;color:var(--muted);font-weight:600}
.sch-ins p{font-size:13.5px;margin-top:6px}
.sch-foto{width:66px;height:66px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.sch-foto.vuota{background:linear-gradient(150deg,var(--green-soft),var(--green-mid));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-d);font-weight:600;font-size:22px;letter-spacing:.02em}
.sch-spec{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.sch-spec span{background:var(--sand);border-radius:999px;padding:2px 9px;font-size:11.5px;color:var(--char2);font-weight:500}
.sch-in .btn{width:100%;text-align:center;margin-top:20px}

/* ---------- orari (vecchio elenco, ancora usato altrove) ---------- */
.giorno{background:#fff;border-radius:var(--r2);box-shadow:var(--sh);margin-bottom:12px;overflow:hidden}
.giorno>h3{font-size:14px;padding:14px 20px 11px;background:var(--veil);color:var(--green-deep)}
.riga{display:flex;gap:14px;align-items:baseline;padding:11px 20px;border-top:1px solid var(--sand);font-size:14px}
.riga .ora{font-variant-numeric:tabular-nums;font-weight:600;color:var(--green-deep);flex:0 0 96px}
.riga .che{flex:1;min-width:0}
.riga .chi{color:var(--muted);font-size:13px;flex:0 0 auto}
@media(max-width:620px){
  .riga{flex-wrap:wrap;gap:4px 12px}
  .riga .ora{flex-basis:auto}
  .riga .chi{flex-basis:100%}
}

/* ---------- la barra: due pulsanti ---------- */
.barra-az{display:flex;gap:8px;align-items:center;flex:0 0 auto}
@media(max-width:520px){.barra-az .btn:not(#accedi){display:none}}

/* ---------- gli ambienti ----------
   Le foto non ci sono ancora. I riquadri mostrano un disegno fatto col
   gradiente e il nome del luogo: si legge come una scelta grafica, non come
   un'immagine che non ha caricato. Quando le foto arrivano prendono lo stesso
   posto senza toccare niente. */
.galleria{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.amb{position:relative;aspect-ratio:4/3;border-radius:var(--r2);overflow:hidden;
  box-shadow:var(--sh);background:var(--sand);display:flex;align-items:flex-end}
.amb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.amb .vel{position:relative;width:100%;padding:14px 16px;
  background:linear-gradient(transparent,rgba(31,42,28,.62));color:#fff}
.amb .vel b{font-family:var(--ff-d);font-size:15px;display:block}
.amb .vel span{font-size:12.5px;opacity:.9}
.amb.senza{background:linear-gradient(145deg,var(--veil),var(--beige))}
.amb.senza .dis{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--green-mid);opacity:.5}
.amb.senza .vel{background:linear-gradient(transparent,rgba(46,107,62,.5))}

/* `--sage` NON scrive più testo.
   Era il colore di tre etichette maiuscole da 10.5 pixel — la categoria
   sulle schede delle discipline, i giorni del calendario, le lezioni fuori
   orario — e a 2.27:1 su bianco erano fra le cose meno leggibili del sito.
   Scurire `--sage` avrebbe risolto le etichette e cambiato l'aspetto di
   tutti i bordi e gli accenti che lo usano: la tavolozza non si piega a tre
   etichette. Adesso usano `--muted`, che per un'etichetta secondaria è
   anche più giusto. */

/* ---------- la sezione dell'app ---------- */
/* Niente `padding` qui: l'aria la dà `section`, e una regola sola vuol dire
   che su telefono si stringe anche questa. Con i suoi 60px fissi sarebbe
   rimasta l'unica sezione larga il doppio delle altre. Il contenuto sta in
   un `.wrap` interno, che pensa ai margini laterali. */
.app-sez{background:linear-gradient(170deg,var(--green-deep),#173F22);color:#EAF2E4}
.app-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:42px;align-items:center}
@media(max-width:820px){.app-grid{grid-template-columns:1fr;gap:34px}}
.app-occhiello{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green-soft);font-weight:700;margin-bottom:8px}
.app-sez h2{color:#fff;font-size:clamp(24px,4.8vw,34px)}
.app-lead{color:#C8DCBE;font-size:16px;margin:14px 0 22px;max-width:46ch}
.app-lista{list-style:none;display:grid;gap:13px;margin-bottom:26px}
.app-lista li{display:grid;gap:1px;padding-left:26px;position:relative}
.app-lista li::before{content:'';position:absolute;left:0;top:7px;width:14px;height:14px;
  border-radius:50%;background:var(--green-soft);
  box-shadow:inset 0 0 0 3px var(--green-deep)}
.app-lista b{font-family:var(--ff-d);font-size:14.5px;color:#fff;font-weight:600}
.app-lista span{font-size:13.5px;color:#A9C49C;line-height:1.5}
.app-cta{display:flex;gap:10px;flex-wrap:wrap}
.app-cta .btn{background:var(--green-soft);color:var(--green-deep)}
.app-cta .btn:hover{background:#fff}
.app-cta .btn.ghost{background:transparent;color:#EAF2E4;border:1px solid rgba(234,242,228,.34)}
.app-nota{font-size:12.5px;color:#9FB894;margin-top:14px;max-width:44ch;line-height:1.5}

/* il telefono disegnato */
/* In colonna, non in riga: i comandi delle schermate stanno DENTRO questo
   contenitore, e con la direzione di partenza si mettevano di fianco al
   telefono invece che sotto. Vanno sotto — è lì che si cercano i comandi
   di una cosa che si guarda. */
.app-mock{display:flex;flex-direction:column;align-items:center}
.tel{width:268px;background:#0F1A10;border-radius:38px;padding:11px;
  box-shadow:0 26px 70px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.08);position:relative}
.tel-tacca{position:absolute;top:11px;left:50%;transform:translateX(-50%);
  width:96px;height:20px;background:#0F1A10;border-radius:0 0 14px 14px;z-index:2}
.tel-schermo{background:var(--ivory);border-radius:28px;padding:30px 15px 15px;color:var(--char)}
.ms-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.ms-ciao{font-family:var(--ff-d);font-weight:600;font-size:15px;color:var(--green-deep)}
.ms-sotto{font-size:10px;color:var(--muted)}
.ms-av{width:32px;height:32px;border-radius:50%;background:var(--green-soft);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.ms-card{background:linear-gradient(140deg,var(--green),var(--green-deep));color:#fff;
  border-radius:16px;padding:14px 16px;margin-bottom:14px}
.ms-num{font-family:var(--ff-d);font-size:34px;line-height:1;font-weight:700}
.ms-lab{font-size:12px;opacity:.92}
.ms-scad{font-size:10.5px;opacity:.72;margin-top:5px}
.ms-tit{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin:12px 0 6px}
.ms-lez{display:flex;gap:10px;align-items:center;background:#fff;border-radius:12px;
  padding:9px 11px;margin-bottom:6px;box-shadow:0 1px 3px rgba(31,42,28,.07)}
.ms-lez.chiara{background:rgba(255,255,255,.62)}
.ms-h{font-variant-numeric:tabular-nums;font-weight:700;font-size:12.5px;
  color:var(--green-deep);flex:0 0 auto}
.ms-lez b{display:block;font-size:12.5px;font-weight:600}
.ms-lez span{display:block;font-size:10.5px;color:var(--muted)}
.ms-barra{display:flex;justify-content:space-around;margin-top:14px;padding-top:11px;
  border-top:1px solid var(--sand)}
.ms-barra span{width:22px;height:4px;border-radius:99px;background:var(--beige)}
.ms-barra span.on{background:var(--green);width:30px}
.ms-barra span{cursor:pointer;transition:width .25s ease, background .25s ease}

/* ─── I COMANDI DELLE SCHERMATE, FUORI DAL TELEFONO ────────────────────────

   I puntini dentro lo schermo sembravano parte del disegno, non qualcosa
   da toccare: erano un indicatore travestito da comando. Fuori dal
   telefono, con il nome scritto, si capisce che si cambia — e si capisce
   anche cosa si sta per vedere, che i puntini non dicevano.

   Le frecce ai lati servono a chi ha già capito e vuole solo andare
   avanti; i nomi a chi cerca una cosa precisa. */
/* Una riga sola, sempre. Il `max-width:330px` di prima — messo per non
   farla debordare dal telefono — la faceva andare a capo dopo tre
   etichette, e quattro comandi su due righe sfalsate sembrano un errore
   di impaginazione. La nav può essere più larga del telefono: è centrata
   sotto, e la colonna che la contiene ha spazio in abbondanza. */
.mock-nav{display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:22px;flex-wrap:nowrap}
.mock-nav .fr{width:36px;height:36px;border-radius:50%;flex:0 0 auto;
  border:1px solid rgba(255,255,255,.34);background:transparent;color:#EAF2E4;
  font-size:17px;line-height:1;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .16s ease, border-color .16s ease}
.mock-nav .fr:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.6)}
.mock-nav .fr:focus-visible{outline:2px solid #A8D08D;outline-offset:2px}
.mock-eti{display:flex;gap:6px;flex-wrap:nowrap;justify-content:center}
.mock-eti button{border:1px solid rgba(255,255,255,.26);background:transparent;
  color:#C8DCBE;border-radius:99px;padding:7px 13px;font-size:12.5px;cursor:pointer;
  white-space:nowrap;
  transition:background .16s ease, color .16s ease, border-color .16s ease}

/* Su uno schermo stretto le frecce se ne vanno e restano i nomi: due
   comandi che fanno la stessa cosa, e se ne deve sacrificare uno si
   tiene quello che dice dove porta. */
@media(max-width:520px){
  .mock-nav .fr{display:none}
  .mock-eti{gap:5px}
  .mock-eti button{padding:6px 10px;font-size:11.5px}
}
.mock-eti button:hover{background:rgba(255,255,255,.1);color:#fff}
.mock-eti button[aria-pressed="true"]{background:#EAF2E4;color:var(--green-deep);
  border-color:#EAF2E4;font-weight:600}
.mock-eti button:focus-visible{outline:2px solid #A8D08D;outline-offset:2px}

/* ─── LE TESSERE SI SOLLEVANO AL PASSAGGIO ─────────────────────────────────

   Lo stesso movimento per tutte — discipline, prezzi, sale, insegnanti,
   le tre voci pratiche — perché fossero diverse fra loro sarebbe rumore,
   non varietà: due millimetri di alzata e un'ombra più profonda.

   `@media (hover:hover)` NON è pignoleria. Su un telefono `:hover` esiste
   ma si comporta male: scatta al tocco e **ci resta** finché non si tocca
   altrove, quindi la tessera che hai appena aperto rimane sollevata e
   ombreggiata quando torni indietro, e sembra selezionata senza esserlo.
   Con `hover:hover` la regola vale solo dove esiste un puntatore vero.

   `translateZ(0)` non fa niente di visibile: costringe il browser a
   trattare la tessera come un piano a sé, e il movimento diventa fluido
   invece di ridisegnare il testo a ogni fotogramma. Su cinque tessere con
   un'illustrazione ciascuna si nota.

   `will-change` NON c'è apposta: dirlo su venti elementi contemporaneamente
   tiene occupata la memoria video per un'animazione che forse non parte
   mai, ed è un rimedio che costa più del male. */
@media (hover:hover) and (pointer:fine){
  .card, .pz, .amb, .ins-scheda, .pratico .voce{
    transform:translateZ(0);
    transition:transform .18s cubic-bezier(.22,.61,.36,1),
               box-shadow .18s cubic-bezier(.22,.61,.36,1)}
  .card:hover, .pz:hover, .ins-scheda:hover, .pratico .voce:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 34px rgba(31,42,28,.13)}
  /* Le foto degli spazi si alzano di meno: sono già grandi, e alzarle
     quanto una tessera di testo le fa sembrare staccate dalla pagina. */
  .amb:hover{transform:translateY(-2px);
    box-shadow:0 12px 30px rgba(31,42,28,.18)}
}

/* Le celle del calendario non si sollevano: sono dentro una colonna
   stretta e alzarsi le farebbe uscire dal bordo della giornata. Si
   accendono, che è il segnale giusto per una riga in un elenco. */
@media (hover:hover) and (pointer:fine){
  .cal-lez{transition:background .14s ease, padding-left .14s ease}
  .cal-lez:hover{background:var(--veil);padding-left:18px}
}

/* ─── LA SCHEDA SI APRE DALLA CELLA CHE HAI TOCCATO ────────────────────────

   Il dialogo è sempre al centro dello schermo — quello non cambia, ed è
   giusto: una finestra che si apre dove capita si cerca con gli occhi.
   Cambia da dove **arriva**: parte piccolo dal punto in cui hai cliccato e
   si apre fino al centro, come un foglio che si dispiega da quella riga.

   Serve a una cosa sola, e non è l'estetica: dice quale delle trenta
   lezioni del calendario hai aperto. Senza, la scheda compare al centro
   identica per tutte, e per un istante non si sa se si è toccato quella
   giusta.

   `--da-x` e `--da-y` le scrive il JavaScript prima di aprire: sono la
   distanza fra il centro della cella e il centro dello schermo. */
dialog.sch{--da-x:0px; --da-y:0px}
dialog.sch[open]{animation:apri-da-cella .34s cubic-bezier(.22,.61,.36,1)}
dialog.sch[open]::backdrop{animation:velo .34s ease}

@keyframes apri-da-cella{
  from{opacity:0;
       transform:translate(var(--da-x), var(--da-y)) scale(.42)}
  to{opacity:1; transform:translate(0,0) scale(1)}
}
@keyframes velo{ from{opacity:0} to{opacity:1} }

@media(prefers-reduced-motion:reduce){
  dialog.sch[open],dialog.sch[open]::backdrop{animation:none}
  .card,.pz,.amb,.ins-scheda,.pratico .voce,.cal-lez{transition:none}
}

/* ─── COMPARIRE ENTRANDO NELLO SCHERMO ─────────────────────────────────────

   L'ORDINE QUI È UNA PRECAUZIONE, NON UNO STILE.

   L'effetto si fa partendo da invisibile e diventando visibile. Il modo
   ovvio è scrivere `opacity:0` sull'elemento e toglierlo col JavaScript —
   e vuol dire che **se il JavaScript non parte, il sito resta bianco**.
   Non «senza animazione»: bianco. Su questo progetto è già successo che
   un errore di sintassi facesse scartare al browser seicento righe in un
   colpo solo; con l'effetto scritto in quel modo, quel giorno il sito
   sarebbe stato una pagina vuota.

   Quindi: il CSS qui sotto si applica **solo** dentro `html.anima`, e
   quella classe la mette il JavaScript come prima cosa. Niente
   JavaScript, niente classe, niente invisibilità: la pagina si vede tutta,
   ferma. È la stessa idea della spia `#js-spento`, al contrario.

   `prefers-reduced-motion` spegne tutto: c'è chi dal movimento ha nausea
   o emicrania, e per quelle persone non è un dettaglio estetico. */
.anima .sale{opacity:0;transform:translateY(18px);
  transition:opacity .62s cubic-bezier(.22,.61,.36,1),
             transform .62s cubic-bezier(.22,.61,.36,1)}
.anima .sale.dentro{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .anima .sale{opacity:1;transform:none;transition:none}
}

/* ─── LE QUATTRO SCHERMATE DEL TELEFONO ────────────────────────────────────

   Sovrapposte nella stessa cella di griglia invece che nascoste una per
   volta: così l'altezza del telefono è quella della schermata più alta e
   resta ferma. Con `display:none` il telefono si accorcerebbe e
   allungherebbe a ogni cambio, e tutta la sezione salterebbe con lui.

   `visibility` oltre a `opacity`: una schermata trasparente ma visibile
   intercetta ancora i clic e viene letta dai lettori di schermo. */
.ms-viste{display:grid}
.ms-vista{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .45s ease, transform .45s ease, visibility 0s linear .45s}
.ms-vista.on{opacity:1;visibility:visible;transform:none;transition-delay:0s}

.ms-testa{font-family:var(--ff-d);font-weight:600;font-size:14px;
  color:var(--green-deep);margin-bottom:12px}
.ms-pill{margin-left:auto;background:var(--veil);color:var(--green-deep);
  border-radius:99px;padding:4px 9px;font-size:9.5px;font-weight:600;white-space:nowrap}
.ms-pill.piena{background:var(--sand);color:var(--muted)}
.ms-nota{font-size:10px;color:var(--muted);margin-top:10px;line-height:1.5}

.ms-doc{display:flex;gap:9px;align-items:center;background:#fff;
  border-radius:12px;padding:9px 11px;margin-bottom:7px}
.ms-doc b{display:block;font-size:12px;font-weight:600}
.ms-doc span{display:block;font-size:10px;color:var(--muted)}
.ms-doc-i{width:20px;height:20px;border-radius:50%;flex:0 0 auto;color:#fff;
  font-size:11px;display:flex;align-items:center;justify-content:center}
.ms-doc-i.ok{background:var(--sage)}
.ms-doc-i.att{background:#C8761A}
.ms-carica{border:1px dashed var(--green-soft);border-radius:12px;padding:9px;
  text-align:center;font-size:11px;color:var(--green);margin-top:9px}

/* La tessera: bande al posto di un codice a barre vero. Un codice vero in
   un disegno sarebbe illeggibile e prometterebbe una cosa che qui non
   c'è — quello vero sta nell'area soci, generato dal database. */
.ms-tess{background:linear-gradient(140deg,var(--green),var(--green-deep));
  color:#fff;border-radius:16px;padding:16px 18px 14px}
.ms-tess-n{font-family:var(--ff-s);font-size:22px;line-height:1}
.ms-tess-p{font-family:var(--ff-d);font-weight:600;font-size:14px;margin-top:10px}
.ms-tess-c{font-size:10.5px;opacity:.78;font-variant-numeric:tabular-nums;margin-top:2px}
.ms-tess-b{display:flex;gap:2px;align-items:flex-end;height:30px;margin-top:14px}
.ms-tess-b i{flex:1;background:rgba(255,255,255,.82);border-radius:1px;height:100%}
.ms-tess-b i:nth-child(2n){height:62%}
.ms-tess-b i:nth-child(3n){height:84%}
.ms-tess-b i:nth-child(5n){height:46%}

/* ---------- prezzi ---------- */
/* ─── I PREZZI ─────────────────────────────────────────────────────────────

   Sono otto, e `auto-fill` ne faceva cinque e tre: la seconda riga
   sembrava un avanzo. Quattro e quattro è la divisione che si vede come
   voluta. Sotto, due e due e due e due — mai tre, che su otto lascerebbe
   di nuovo una riga spaiata. */
.prezzi{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:1040px){ .prezzi{grid-template-columns:repeat(4,1fr)} }
@media(max-width:460px){ .prezzi{grid-template-columns:1fr} }
.pz{background:#fff;border-radius:var(--r);padding:18px;box-shadow:var(--sh);display:flex;flex-direction:column}
/* Il marchio di un altro, dentro il nostro listino. Piccolo e in cima:
   dice «questo prodotto è quello del circuito» senza competere con il
   prezzo, che è l'informazione per cui la gente guarda questa sezione.
   `object-fit:contain` perché il logo non va mai ritagliato ne' stirato —
   è la prima regola di ogni manuale di marchio esistente. */
/* Il file vero è 443x144, cioè poco più di tre a uno: a 30px di altezza
   viene largo 92, che dentro una tessera da 300 è presente senza gridare.
   `height` e non `width`, perché ciò che deve restare costante fra un
   marchio e l'altro è l'altezza ottica, non l'ingombro. */
.pz-marchio{height:30px;width:auto;max-width:100%;object-fit:contain;
  display:block;margin-bottom:11px}
.pz-marchio-testo{font-family:var(--ff-d);font-weight:600;font-size:11px;
  letter-spacing:.04em;color:var(--green-mid);margin-bottom:10px;
  text-transform:uppercase}
.pz .nome{font-family:var(--ff-d);font-weight:600;font-size:15px}
.pz .eur{font-family:var(--ff-d);font-size:26px;color:var(--green-deep);margin:6px 0 2px}
.pz .det{font-size:13px;color:var(--muted);flex:1}
.pz.omaggio{background:var(--veil);outline:2px solid var(--green-soft)}
.quota{background:#fff;border-radius:var(--r);padding:18px 20px;box-shadow:var(--sh);margin-top:16px;font-size:14px;color:var(--char2)}

/* ---------- modulo ---------- */
/* 880 e centrato, non 620 allineato a sinistra. A 620 i campi stavano
   tutti in colonna e il modulo diventava una lista lunga da scorrere; a
   880 cellulare ed email stanno affiancati, e lo stesso le due tendine.
   Centrato perche' a sinistra, dentro una sezione larga 1400, sembrava
   appoggiato a un bordo. */
.form{background:#fff;border-radius:var(--r2);box-shadow:var(--sh);padding:30px 32px;
  max-width:880px;margin-left:auto;margin-right:auto}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* Sotto gli 800px le due colonne diventano una: dentro meta' di 620px il
   prefisso e il numero di telefono si contendono lo spazio e il numero
   perde sempre. */
@media(max-width:800px){ .f2{grid-template-columns:1fr} }
@media(max-width:560px){
  .f2{grid-template-columns:1fr}
  /* Il riquadro del modulo smette di essere un riquadro: su 360 px i suoi
     ventisei pixel di bordo per lato sono un settimo dello schermo. */
  .form{padding:18px 16px;border-radius:14px}
  /* I due intenti uno sopra l'altro: affiancati diventano due righe di testo
     spezzate a metà parola. */
  .intenti button{flex:1 1 100%}
  /* La tendina del prefisso a tutta riga, il numero sotto: insieme non ci
     stanno, e il numero è il campo che si deve poter leggere mentre si batte. */
  .tel-riga select{flex:1 1 100%}
  /* SEDICI PIXEL, non uno di meno. Sotto i 16, Safari su iPhone ingrandisce
     la pagina da sé appena si tocca un campo — e non la rimpicciolisce più.
     Sembra un difetto casuale ed è una regola di Safari. */
  input,select,textarea{font-size:16px}
  .fasce{gap:6px}
  .fascia{font-size:12.5px}
}

/* Prefisso e numero stanno sulla stessa riga: sono un dato solo, e separarli
   su due righe fa sembrare il prefisso una domanda in più. La tendina si
   dimensiona sul contenuto e il numero prende tutto lo spazio restante. */
/* La riga del telefono va a capo invece di schiacciare il numero.
   Con la tendina e il campo sulla stessa riga dentro una colonna stretta,
   al numero restavano una quarantina di pixel: si vedeva «333» e il resto
   scorreva via mentre si scriveva. `flex-wrap` più una larghezza minima sul
   campo fa sì che, quando lo spazio non basta, il numero scenda sotto la
   tendina e si prenda tutta la riga. Nessuna soglia da indovinare: decide
   lo spazio disponibile, non una misura scritta a mano. */
.tel-riga{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
.tel-riga select{flex:0 1 auto;width:auto;min-width:0;max-width:100%}
.tel-riga input{flex:1 1 150px;min-width:140px}

/* ---- i due intenti ---- */
.intenti{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.intenti button{flex:1 1 200px;padding:12px 16px;border-radius:var(--r);
  border:1.5px solid var(--beige);background:#fff;color:var(--char2);
  font-size:14px;font-weight:600;cursor:pointer;transition:.15s}
.intenti button:hover{border-color:var(--sage)}
.intenti button.on{background:var(--green);border-color:var(--green);color:#fff}

/* ---- l'avviso sotto il campo sbagliato ---- */
.avviso-campo{display:none;font-size:12.5px;color:var(--red);margin-top:5px;
  line-height:1.4}
input.sbagliato{border-color:var(--red);background:#FFF8F8}
input.sbagliato:focus{outline-color:var(--red)}

/* ---- il conteggio delle battute ---- */
.conta{text-align:right;font-size:12px;color:var(--muted);margin-top:5px;
  font-variant-numeric:tabular-nums}
.conta.quasi{color:var(--amber)}
.conta.pieno{color:var(--red);font-weight:600}
/* La riga sotto il bottone. Piccola ma leggibile: è l'unica informativa che
   molti leggeranno, e nasconderla sarebbe peggio che non scriverla. */
.sotto-invia{font-size:12.5px;color:var(--muted);text-align:center;
  margin-top:12px;line-height:1.5}
.sotto-invia a{color:var(--green);text-decoration:underline}
label{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:16px 0 6px}
/* ⚠ L'ALTEZZA SI DÀ CON `line-height`, NON SOLO CON IL PADDING.

   Senza, la riga alta quanto il carattere taglia le code delle lettere —
   la «g» di «consigliatemi» spariva a metà. Si vedeva solo sui testi che
   ne hanno una, quindi su quattro voci di una tendina su dieci: il genere
   di difetto che sembra un carattere strano invece che un'altezza
   sbagliata.

   `line-height:1.4` e non un'altezza fissa: il giorno che qualcuno
   ingrandisce i caratteri dal browser — e metà dei soci ha passato i
   sessanta — un'altezza fissa taglierebbe tutto, non solo le code. */
input[type=text],input[type=tel],input[type=email],select,textarea{
  width:100%;padding:11px 13px;line-height:1.4;border:1px solid var(--beige);
  border-radius:var(--r);background:var(--ivory);color:var(--char);outline:none}
select{min-height:46px}
input:focus,select:focus,textarea:focus{border-color:var(--sage);background:#fff}
textarea{min-height:84px;resize:vertical}
.fasce{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.fascia input{position:absolute;opacity:0;pointer-events:none}
.fascia span{display:inline-block;padding:8px 14px;border:1px solid var(--beige);border-radius:999px;font-size:13.5px;cursor:pointer;background:var(--ivory)}
.fascia input:checked+span{background:var(--veil);border-color:var(--green-soft);color:var(--green-deep);font-weight:600}
.fascia input:focus-visible+span{outline:2px solid var(--sage);outline-offset:2px}
.consenso{display:flex;gap:10px;align-items:flex-start;margin-top:20px;font-size:13.5px;color:var(--char2)}
.consenso input{margin-top:4px;flex:0 0 auto;width:17px;height:17px;accent-color:var(--green)}
.form .btn{margin-top:22px;width:100%;text-align:center;padding:14px}
.msg{margin-top:16px;padding:13px 15px;border-radius:var(--r);font-size:14px}
.msg.ok{background:var(--veil);color:var(--green-deep)}
.msg.ko{background:var(--red-l);color:var(--red)}
.privacy-box{max-height:0;overflow:hidden;transition:max-height .25s ease}
.privacy-box.open{max-height:620px;overflow:auto}
.privacy-box .testo{white-space:pre-line;font-size:13px;color:var(--char2);background:var(--sand);border-radius:var(--r);padding:16px;margin-top:12px}
.vers{font-size:11px;color:var(--muted);margin-top:8px}

/* ---------- insegnanti ---------- */
.ins{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.ins .card .hl{font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:8px}
.ins .card p{font-size:13.5px}

/* ---------- chiusura ---------- */
.ft-logo{height:86px;width:auto;display:block;margin:0 auto 26px;opacity:.95}
footer{background:var(--green-deep);color:#DCE8D2;padding:44px 0 34px;font-size:14px}
footer h3{color:#fff;font-size:16px;margin-bottom:12px}
footer a{color:#BEE09E}

/* ─── LE RIGHE DI CONTATTO, CON L'ICONA ────────────────────────────────────

   Icona e parola insieme: l'icona si trova con la coda dell'occhio, la
   parola toglie il dubbio. Le icone da sole costringono a indovinare, e
   fra WhatsApp e un fumetto generico l'indovinello c'è davvero.

   `flex-shrink:0` sull'icona: senza, su una colonna stretta l'icona si
   schiaccia in un ovale mentre il testo resta intero.

   Sono disegni funzionali — cornetta, fumetto, busta — **non i loghi**
   di WhatsApp, Instagram e Facebook, che sono marchi registrati. Se
   serviranno quelli veri si scaricano dalle risorse ufficiali, come è
   stato fatto per Camminata Metabolica. */
.ft-riga{display:flex;align-items:center;gap:9px;padding:5px 0;
  color:#BEE09E;line-height:1.4}
.ft-riga:hover{color:#fff;text-decoration:none}
/* ─── UN SOLO DISCO PER TUTTE E CINQUE ─────────────────────────────────────

   Prima erano due: bianco pieno sotto i marchi, traslucido sotto
   telefono ed email. In una colonna di cinque righe si leggevano come
   due elenchi diversi messi uno sotto l'altro.

   Vince il bianco pieno, e non è una scelta estetica: i marchi **devono**
   averlo. Il glifo di Instagram è nero e il logo di Facebook è blu, e
   ricolorarli per adattarli al fondo verde è la prima cosa che ogni
   manuale di marchio vieta. L'unico modo di renderli leggibili è dare
   loro lo sfondo chiaro per cui sono disegnati — quindi il disco chiaro
   è obbligato lì, e le altre due lo seguono.

   Conseguenza: la cornetta e la busta **non possono più essere
   `currentColor`**. Il colore del testo è verde chiarissimo, e su bianco
   sarebbe invisibile. Dentro il disco prendono il verde scuro. */
.ft-riga svg{width:17px;height:17px;flex-shrink:0}
.ft-tondo{width:22px;height:22px;flex-shrink:0;border-radius:50%;
  background:#F4F7EF;display:flex;align-items:center;justify-content:center;
  padding:3px;transition:background .15s ease}
/* `overflow:hidden` sul disco perché un marchio ingrandito non esca dal
   tondo: la scala di Facebook lo porta oltre il bordo, e senza questo
   sborderebbe sopra il testo accanto. Con il logo dentro un cerchio, il
   ritaglio agli angoli non tocca il disegno. */
.ft-tondo{overflow:hidden}
.ft-tondo img{width:100%;height:100%;object-fit:contain;display:block}
.ft-tondo svg{width:14px;height:14px;color:var(--green-deep)}
.ft-riga:hover .ft-tondo{background:#fff}

.ft-riga span{min-width:0;overflow-wrap:anywhere}
footer .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px}
footer .legal{margin-top:30px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);font-size:12px;color:#9FB894}
.skel{background:var(--sand);border-radius:var(--r);height:96px;animation:p 1.4s ease-in-out infinite}
@keyframes p{0%,100%{opacity:.55}50%{opacity:.95}}
.diag{background:var(--red-l);color:var(--red);padding:14px 18px;border-radius:var(--r);font-size:13.5px;margin-bottom:18px}

/* ═══ QUANDO NON C'È NIENTE DA MOSTRARE ═════════════════════════════════════

   Un elenco vuoto senza spiegazione è indistinguibile da un elenco che non
   si è caricato, e sono due cose diverse: la prima è un'informazione, la
   seconda un guasto. Questa scatola serve a dire quale delle due.
   ═══════════════════════════════════════════════════════════════════════════ */
.vuoto-box{background:var(--sand);border:1px solid var(--linea);
  border-radius:var(--r2);padding:20px 22px;color:var(--muted);line-height:1.6}
.vuoto-box a{font-weight:600}

/* ═══ I DUE RICHIAMI ALLE PAGINE ════════════════════════════════════════════

   Sostituiscono le sezioni «Lo studio» e «Chi insegna», che stavano in
   fondo alla pagina unica dove non ci arrivava nessuno.

   Sono link, non bottoni: si aprono in una pagina, e un bottone
   prometterebbe qualcosa che succede qui. Tutta la tessera è cliccabile —
   un bersaglio grande vale più di un «scopri di più» da centrare col
   pollice.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Le tessere sono due: senza un tetto si spartirebbero 1300px e
   diventerebbero due lenzuoli con tre righe di testo in mezzo. Un blocco
   di testo largo il doppio di quanto è alto si legge male, e qui il testo
   è la cosa che deve convincere a cliccare. */
.richiami{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px;max-width:1000px;margin-left:auto;margin-right:auto}
.richiamo{display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--linea);border-radius:var(--r2);overflow:hidden;
  color:inherit;text-decoration:none;
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease}
.richiamo .figura{aspect-ratio:2/1;background:var(--sand)}
.richiamo .figura img{width:100%;height:100%;object-fit:cover;display:block}
.richiamo .dentro{padding:22px 26px 26px}
.richiamo:hover{text-decoration:none;transform:translateY(-2px);
  border-color:var(--green-soft);box-shadow:0 10px 30px rgba(31,42,28,.09)}
.richiamo:focus-visible{outline:2px solid var(--sage);outline-offset:3px}
.richiamo h3{font-family:var(--ff-d);font-size:19px;color:var(--green-deep);margin-bottom:8px}
.richiamo p{color:var(--char2);font-size:14.5px;line-height:1.6}
.richiamo .vai{display:inline-block;margin-top:13px;color:var(--green);
  font-weight:600;font-size:14px}
.richiamo .vai::after{content:' →'}

/* La voce della barra corrispondente alla pagina aperta. Senza, su «Lo
   studio» la barra sembra identica a quella della home e non si capisce
   dove si è. */
nav a[aria-current="page"]{color:var(--green-deep);font-weight:600}