/* =========================================================
   MB ACADEMY — la pagina, che è una MAPPA DEI LIVELLI

   Il colore lo cambia academy.css: sul <main class="academy"> l'arancione
   diventa blu e tutti i componenti del sito lo seguono da soli —
   etichette, pulsanti di vetro, il pulsante d'accesso. Qui dentro c'è
   solo quello che nel sito non esisteva ancora: l'apertura al centro
   con la fila dei marchi, la mappa coi nodi, la scheda di un corso, un
   livello aperto, i riquadri degli attestati, la chiusura.

   UN COLORE SOLO, ed è la regola che vale per tutto il file. Prima ogni
   percorso portava la tinta del suo strumento — verde ChatGPT, arancio
   Claude, viola Copilot — su marchi, fili e aloni. Otto colori in una
   pagina blu la trasformavano in un campionario, e un campionario non
   si legge. Adesso: il blu dell'Academy per quello che è acceso, il
   bianco per i marchi, i grigi per il resto. Nessuna regola qui sotto
   legge più --tinta, e non deve tornare a farlo.

   Del blu, due misure. Il pieno (#3870e0) sul nero regge sulle cose
   grandi — un nodo, un bordo, un numero. Sul testo piccolo no: si legge
   male. Per quello c'è --blu-chiaro, lo stesso colore schiarito quanto
   basta a restare leggibile. Non è un vezzo, è contrasto.

   SI RIUSA IL LINGUAGGIO DELLA HOME invece di riscriverlo: il titolo è
   .hero__title, l'etichetta è .eyebrow, i pulsanti .btn, le schede
   .glass, le comparse .reveal accese da js/main.js. Un nome nuovo c'è
   solo dove c'è una cosa nuova.

   UN NOME SCELTO PER NON COLLIDERE, ed è un bug già pagato: css/style.css
   ha già un `.segno` (l'etichetta cuore + numero sulle schede, con
   `.segno svg{width:14px}`). Il segno di un percorso qui si chiama
   `.marchio`. E i nodi della mappa si chiamano `.piolo` — quelli di una
   scala — e non `.nodo`, che css/gioco.css usa già per la sua.
   ========================================================= */

/* Il ritorno al sito. La regola vive in live.css, che qui non serve
   caricare per intero: sono cinque righe, si ripetono. Qui sta accanto
   al menu intero, che lo stringe: si tiene su una riga, o «← MB» e
   «Company» finiscono uno sopra l'altro. */
.strumento__indietro{
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-4);
  transition:color .35s var(--ease);
}
.strumento__indietro:hover{color:var(--blu-chiaro)}

/* =========================================================
   1 — APERTURA
   Al centro, come l'eroe cinematico della home: un titolo di due
   parole, una frase, due pulsanti, e sotto la fila dei marchi. Niente
   pioggia di codice dietro — un alone blu e basta: qui si impara, non
   si lavora.
   ========================================================= */
.acad-hero{
  position:relative;overflow:hidden;text-align:center;
  padding:clamp(124px,16vh,170px) 0 clamp(50px,6vw,80px);
}
.acad-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 55% at 50% 0%,rgba(56,112,224,.22),transparent 66%),
    radial-gradient(40% 40% at 50% 100%,rgba(56,112,224,.08),transparent 70%);
}
.acad-hero__dentro{position:relative;z-index:1}
.acad-hero .eyebrow{color:var(--blu-chiaro)}

/* Il titolo della home spezza ogni <span> su una riga sua: qui sono
   due parole e stanno insieme. L'ultima — «livello.» — è in blu pieno,
   come «like a Game» è in arancione: è la parola che porta il punto. */
.acad-hero .hero__title{margin:0 auto 24px;max-width:none}
.acad-hero .hero__title span{display:inline}
.acad-hero .hero__title span:last-child{color:var(--blu)}

.acad-hero__sub{
  max-width:56ch;margin:0 auto 36px;
  font-size:clamp(14px,1.15vw,16px);line-height:1.75;color:var(--ink-2);
}
.acad-hero__azioni{justify-content:center}

/* ── la fila dei marchi ────────────────────────────────────────────────
   Otto riquadri di vetro leggero, tutti uguali, tutti bianchi: gli otto
   percorsi in un colpo d'occhio, senza che uno pesi più dell'altro. Il
   nome del percorso resta nel markup per chi legge con uno screen
   reader, ma non si vede: i marchi si riconoscono, e la mappa sotto li
   ripete col nome accanto. */
.tessere{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  list-style:none;margin:clamp(40px,5vw,60px) 0 0;padding:0;
}
.tessera{
  display:grid;place-items:center;width:56px;height:56px;border-radius:16px;
  background:var(--glass);box-shadow:inset 0 0 0 1px var(--line-2);
  transition:box-shadow .4s var(--ease),background .4s var(--ease);
}
.tessera:hover{background:var(--glass-hi);box-shadow:inset 0 0 0 1px var(--blu-3)}
.tessera__nome{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}

/* =========================================================
   2 — IL MARCHIO DI UN PERCORSO
   Bianco, sempre. Il logo vero quando c'è (vendor/loghi/, scritto nella
   pagina come tracciato), il monogramma dentro l'esagono del sito quando
   non c'è. Stesso posto e stessa misura nei due casi.
   ========================================================= */
.marchio{
  position:relative;flex:none;display:grid;place-items:center;
  width:34px;height:34px;
}
.marchio__esa{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* L'esagono intorno al monogramma è un contorno bianco un po' spento:
   è la cornice, non il segno. Le lettere dentro sono il segno, e sono
   bianche piene. */
.marchio__esa path{fill:none;stroke:#fff;stroke-width:5;stroke-linejoin:round;opacity:.55}
.marchio b{
  position:relative;font-family:var(--f-display);font-weight:400;
  font-size:8.5px;letter-spacing:.02em;color:#fff;
}
/* I loghi arrivano da simple-icons: un tracciato senza colore dichiarato.
   Scritti nella pagina prendono il colore da qui, come ogni altra icona
   del sito. Stanno da soli, senza esagono, quindi un po' più grandi del
   monogramma. */
.marchio__logo{width:62%;height:62%;fill:#fff;opacity:.94}
.marchio--grande{width:52px;height:52px}
.marchio--grande b{font-size:11px}
.marchio--mini{width:28px;height:28px}
.marchio--mini b{font-size:7px}

/* =========================================================
   3 — LA MAPPA
   Una scheda sola, col bordo blu: una riga per percorso. A sinistra il
   marchio e il nome, a destra i livelli come nodi su una linea. Le
   colonne dei livelli sono tante quanti ne ha il percorso più lungo —
   il generatore scrive --livelli sulla scheda — così l'intestazione
   «Livello 1 · 2 · 3 · 4» e i nodi di ogni riga cadono nelle stesse
   colonne, e un percorso più corto lascia vuote le ultime.
   ========================================================= */
.mappa{
  margin-top:clamp(30px,4vw,46px);
  padding:clamp(16px,2.2vw,26px) clamp(18px,2.8vw,36px) clamp(6px,1vw,10px);
}
/* Il bordo blu è l'unico della pagina e sta sulla mappa perché è lei il
   soggetto. Si scrive anche sullo stato :hover, che in style.css rimette
   l'ombra del vetro e si porterebbe via il bordo. */
.mappa,.mappa:hover{
  box-shadow:inset 0 0 0 1px var(--blu-3),inset 0 1px 0 rgba(255,255,255,.14),
             0 30px 70px -34px rgba(0,0,0,1);
}

/* La testa e ogni riga hanno la stessa griglia: la colonna del nome e
   la colonna dei livelli. Dentro quest'ultima, un'altra griglia con
   --livelli colonne uguali: è quella che allinea le intestazioni sopra
   i nodi senza contare niente. */
.mappa__testa,.mappa__riga{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,2.3fr);
  gap:0 clamp(16px,3vw,44px);align-items:center;
}
.mappa__testa{
  padding:4px 0 14px;border-bottom:1px solid var(--line);
  font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-4);
}
.mappa__colonne,.mappa__livelli{
  display:grid;grid-template-columns:repeat(var(--livelli,3),minmax(0,1fr));
}
.mappa__colonne span{text-align:center}
.mappa__righe{list-style:none;margin:0;padding:0}
.mappa__riga{padding:18px 0;border-bottom:1px solid var(--line)}
.mappa__riga:last-child{border-bottom:0}

.mappa__chi{display:flex;align-items:center;gap:13px;min-width:0}
.mappa__testo{min-width:0}
.mappa__nome{
  display:block;font-family:var(--f-display);font-size:12.5px;line-height:1.35;
  color:#fff;letter-spacing:.01em;
}
.mappa__di{
  display:block;margin-top:4px;
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ── i nodi ────────────────────────────────────────────────────────────
   Ogni nodo disegna da sé il tratto di linea che lo lega al nodo dopo:
   parte dal suo bordo destro e arriva al bordo sinistro del prossimo.
   Nessun conto sulla larghezza della riga, e l'ultimo nodo non disegna
   niente. Il cerchio sta SOPRA la linea (position + z-index), o il
   tratto gli passerebbe in mezzo.

   Due stati che si distinguono senza leggere: acceso è pieno, blu, col
   numero; chiuso è vuoto, grigio, col lucchetto. */
.mappa__livelli{list-style:none;margin:0;padding:0;align-items:start}
.piolo{position:relative;text-align:center;min-width:0}
.piolo::after{
  content:'';position:absolute;top:22px;left:calc(50% + 28px);
  width:calc(100% - 56px);height:1px;background:var(--line-2);
}
.piolo:last-child::after{display:none}
/* Dopo un nodo acceso la linea parte blu e si spegne: la strada continua,
   e si vede dove smette di essere gratis. */
.piolo--acceso::after{background:linear-gradient(to right,var(--blu-2),var(--blu-3))}

.piolo__a{
  position:relative;display:flex;flex-direction:column;align-items:center;
  color:inherit;text-decoration:none;
}
.piolo__tondo{
  position:relative;z-index:1;display:grid;place-items:center;
  width:44px;height:44px;border-radius:50%;
  font-family:var(--f-display);font-size:12.5px;color:var(--ink-4);
  background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--line-2);
  transition:box-shadow .4s var(--ease),transform .45s var(--ease-out);
}
.piolo__tondo svg{width:16px;height:16px}
.piolo--acceso .piolo__tondo{
  color:#fff;background:var(--blu);
  box-shadow:0 0 0 1px var(--blu-2),0 0 22px var(--blu-3);
}
.piolo b{
  display:block;margin-top:10px;
  font-family:var(--f-display);font-weight:400;font-size:10.5px;color:var(--ink-3);
}
.piolo--acceso b{color:#fff}
.piolo small{
  display:block;margin-top:4px;padding:0 4px;
  font-size:10.5px;line-height:1.45;letter-spacing:.03em;color:var(--ink-4);
  font-variant-numeric:tabular-nums;
}
.piolo--acceso small{color:var(--blu-chiaro)}
/* Il nodo acceso è un collegamento: al passaggio si alza e si accende
   di più. Quello chiuso non risponde, perché non porta da nessuna parte. */
a.piolo__a:hover .piolo__tondo{
  transform:translateY(-2px);
  box-shadow:0 0 0 1px var(--blu-chiaro),0 0 30px var(--blu-2);
}
a.piolo__a:focus-visible{outline:none}
a.piolo__a:focus-visible .piolo__tondo{box-shadow:0 0 0 2px #fff,0 0 22px var(--blu-3)}

/* ── la legenda ──────────────────────────────────────────────────────── */
.mappa__legenda{
  display:flex;flex-wrap:wrap;gap:8px 22px;margin:16px 2px 0;
  font-size:11.5px;letter-spacing:.03em;color:var(--ink-4);
}
.mappa__legenda span{display:inline-flex;align-items:center;gap:9px}
.mappa__punto{
  width:10px;height:10px;border-radius:50%;flex:none;
  background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--line-2);
}
.mappa__punto--acceso{background:var(--blu);box-shadow:0 0 10px var(--blu-3)}

/* =========================================================
   4 — LE TESTE DI SEZIONE, su due colonne
   A sinistra come si chiama la sezione, a destra cosa vuol dire. Su un
   desktop da 1440 il titolo da solo lasciava due terzi di riga vuoti,
   ed è esattamente il difetto già segnalato sulla home. La riga di
   destra è allineata in basso col titolo: due testi di corpo diverso
   attaccati in cima si vedono storti.
   ========================================================= */
.sez__t{
  margin:14px 0 0;font-family:var(--f-display);font-weight:400;color:#fff;
  font-size:clamp(20px,3vw,36px);line-height:1.18;max-width:22ch;
}
.sez__testa{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:18px clamp(30px,5vw,80px);align-items:end;
}
.sez__dice{
  margin:0;font-size:13px;line-height:1.85;color:var(--ink-3);max-width:52ch;
}
@media (max-width:900px){
  .sez__testa{grid-template-columns:1fr;align-items:start}
}

/* =========================================================
   5 — I CORSI COME PRODOTTI
   Nove schede, tre per riga: 3+3+3, senza righe orfane. Le colonne si
   dichiarano invece di lasciarle a auto-fit perché il numero è noto —
   con auto-fit su uno schermo largo uscivano quattro più quattro più
   una, e l'ultima restava spaiata in mezzo al vuoto.
   ========================================================= */
.prodotti{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2vw,22px);margin-top:clamp(30px,4vw,46px);
}
.prodotto{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;min-width:0;
  padding:26px 24px 24px;
  /* La comparsa la fa .reveal di style.css (opacità e traslazione, accese
     da js/main.js una scheda dopo l'altra). Qui si dichiara la transizione
     per intero perché una regola di pari peso scritta dopo la
     sostituirebbe: senza opacity e transform in questo elenco le schede
     apparirebbero di colpo. */
  transition:opacity 1s var(--ease-out),transform .8s var(--ease-out),
             box-shadow .5s var(--ease);
}
/* Il sollevamento di .glass:hover pesa meno di .reveal.is-in, che tiene
   il transform a zero: senza riscriverlo qui le schede resterebbero
   ferme al passaggio del puntatore. */
.prodotto.is-in:hover{transform:translateY(-3px)}
.prodotto:hover{box-shadow:inset 0 0 0 1px var(--blu-3),0 40px 80px -44px rgba(0,0,0,1)}
/* Il riflesso del vetro è posizionato e dipinge sopra i figli che non lo
   sono: i figli si posizionano per tornare davanti. */
.prodotto > *{position:relative}

/* la riga di testa: il marchio del percorso e, di fronte, il prezzo */
.prodotto__testa{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
/* IL PREZZO. È la cosa che si guarda per prima su una scheda di
   negozio, quindi è grande, in alto a destra, e nel colore
   dell'Academy. «per sempre» sotto conta quanto «Gratis» sopra:
   gratis, da solo, oggi vuol dire quasi sempre gratis per due
   settimane. */
.prodotto__prezzo{margin:0;text-align:right;flex:none}
.prodotto__prezzo b{
  display:block;font-family:var(--f-display);font-weight:400;
  font-size:clamp(16px,1.8vw,20px);line-height:1;color:var(--blu-chiaro);
}
.prodotto__prezzo span{
  display:block;margin-top:7px;
  font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-4);
}

/* «ChatGPT · Basic 1»: lo strumento e il livello, di fianco. Il livello
   c'è anche dentro il nome del corso sotto, e la ripetizione è voluta:
   chi scorre nove schede legge il nome grande, chi si ferma su una legge
   qui in che punto della scala si trova. */
.prodotto__percorso{
  display:flex;align-items:center;gap:9px;
  margin:20px 0 0;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-4);
}
.prodotto__percorso i{width:3px;height:3px;border-radius:50%;flex:none;background:var(--blu);opacity:.8}
.prodotto__nome{
  margin:9px 0 0;font-family:var(--f-display);font-weight:400;
  font-size:clamp(15px,1.5vw,18px);line-height:1.35;color:#fff;letter-spacing:.01em;
}
.prodotto__riga{margin:12px 0 0;font-size:12.5px;line-height:1.7;color:var(--ink-3)}

/* ── LA BARRA DELLE LEZIONI ────────────────────────────────────────────
   Il corso disegnato: un segmento per lezione, largo quanto i suoi
   minuti. Dice in un colpo d'occhio due cose che «5 lezioni · 1 h 08»
   non dice — quante sono, e se sono equilibrate o se ce n'è una lunga
   il doppio delle altre.

   Come funziona, e perché non serve JavaScript: il generatore scrive
   --q coi minuti veri, e `flex-grow:var(--q)` divide la larghezza in
   proporzione. Il conto lo fa il compositore, una volta, e si
   riaggiusta da solo a qualunque larghezza della scheda.

   I segmenti si accendono da sinistra al passaggio del puntatore, uno
   dopo l'altro: è il gesto di scorrere il programma. Il ritardo è
   sull'indice, non su una classe — nessuno stato da tenere. */
.barra{display:flex;gap:3px;margin:18px 0 0;height:5px}
.barra i{
  flex:var(--q,1) 1 0;min-width:2px;border-radius:3px;
  background:linear-gradient(90deg,var(--blu-3),var(--blu-2));
  transition:background .45s var(--ease),transform .45s var(--ease-out);
}
.glass:hover .barra i{background:linear-gradient(90deg,var(--blu),var(--blu-chiaro))}
.glass:hover .barra i:nth-child(1){transition-delay:0s}
.glass:hover .barra i:nth-child(2){transition-delay:.05s}
.glass:hover .barra i:nth-child(3){transition-delay:.10s}
.glass:hover .barra i:nth-child(4){transition-delay:.15s}
.glass:hover .barra i:nth-child(5){transition-delay:.20s}
.glass:hover .barra i:nth-child(6){transition-delay:.25s}
.glass:hover .barra i:nth-child(7){transition-delay:.30s}

/* I dati vanno a capo fra un dato e l'altro, mai dentro un dato: «1 h 28»
   spezzato su tre righe, che è quello che il flex fa da solo quando la
   scheda si stringe, non si legge più come una durata. */
.prodotto__dati{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 9px;margin:12px 0 0;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);
}
.prodotto__dati b{font-weight:400;color:var(--ink-2);white-space:nowrap}
.prodotto__dati i{width:3px;height:3px;border-radius:50%;background:var(--ink-4);flex:none}

/* ── cosa c'è dentro ──────────────────────────────────────────────────
   L'elenco delle lezioni di una scheda sta chiuso: chi vuole sapere cosa
   contiene il corso lo apre, chi guarda la fila no. `margin-bottom:auto`
   spinge il pulsante in fondo alla scheda, così i nove «Comincia» stanno
   in riga anche quando le schede hanno testi di lunghezza diversa. */
.prodotto__dentro{margin:18px 0 auto;border-top:1px solid var(--line)}
.prodotto__apri{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 0 10px;cursor:pointer;list-style:none;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-4);
  transition:color .35s var(--ease);
}
.prodotto__apri::-webkit-details-marker{display:none}
.prodotto__apri:hover{color:#fff}
.prodotto__apri:focus-visible{outline:1px solid rgba(255,255,255,.6);outline-offset:2px}
.prodotto__apri::after{
  content:'+';flex:none;font-size:15px;line-height:1;color:var(--blu-chiaro);
  transition:transform .45s var(--ease-out);
}
.prodotto__dentro[open] .prodotto__apri::after{transform:rotate(45deg)}

.lezioni{list-style:none;margin:0;padding:0 0 8px}
.lezione{
  display:flex;align-items:baseline;gap:10px;padding:9px 0;
  border-top:1px solid rgba(255,255,255,.06);
}
.lezione__n{
  flex:none;font-family:var(--f-display);font-size:9.5px;color:var(--ink-4);
  font-variant-numeric:tabular-nums;
}
.lezione__nome{flex:1 1 auto;min-width:0;font-size:12px;line-height:1.55;color:var(--ink-3)}
.lezione__min{
  flex:none;font-size:10px;letter-spacing:.08em;color:var(--ink-4);
  font-variant-numeric:tabular-nums;
}

.prodotto__vai{margin-top:20px;align-self:flex-start}

.prodotti__poi{
  margin:clamp(24px,3vw,34px) 0 0;
  font-size:12px;line-height:1.8;color:var(--ink-4);max-width:60ch;
}

/* =========================================================
   6 — UN LIVELLO DA VICINO
   Due colonne: a sinistra cosa è un livello, a destra un corso vero
   aperto. La scheda a destra usa i pezzi della scheda prodotto —
   testa, nome, barra, dati, lezioni — perché è lo stesso oggetto,
   solo con l'elenco già aperto. In fondo il riquadro dell'attestato,
   nel blu tenue: è la cosa che resta in mano, e va vista.
   ========================================================= */
.livello{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);
  gap:clamp(30px,5vw,84px);align-items:center;
}
.livello__p{margin:18px 0 0;font-size:14px;line-height:1.8;color:var(--ink-3);max-width:46ch}
.livello__dice .sez__t{max-width:16ch}
.livello__scheda{padding:28px 28px 26px}
/* Il riflesso del vetro sta sopra i figli non posizionati, come sulle
   schede prodotto: si posizionano. */
.livello__scheda > *{position:relative}
.livello__lezioni{margin-top:18px;padding-bottom:0;border-top:1px solid var(--line)}
.livello__lezioni .lezione:first-child{border-top:0}

.livello__attestato{
  display:flex;align-items:center;gap:16px;
  margin-top:22px;padding:16px 18px;border-radius:var(--r-md);
  background:var(--blu-4);box-shadow:inset 0 0 0 1px var(--blu-3);
}
.livello__attestato .ico{flex:none;color:var(--blu-chiaro)}
.livello__attestato p{margin:0;min-width:0}
.livello__attestato b{
  display:block;font-family:var(--f-display);font-weight:400;
  font-size:11.5px;letter-spacing:.06em;color:#fff;
}
.livello__attestato span{display:block;margin-top:4px;font-size:12px;line-height:1.6;color:var(--ink-3)}

/* =========================================================
   7 — GLI ATTESTATI
   Tre fogli, tre condizioni. Il foglio lo disegna js/attestato.js
   dentro [data-esempio]. Se quel file non risponde resta il segnaposto
   qui sotto, fatto per reggere da solo e non per sembrare un errore.
   ========================================================= */
/* Non tre riquadri uguali: tre riquadri uguali non dicono quale viene
   prima. Il Master AI è quello che si guarda e sta a sinistra, grande;
   gli altri due gli stanno accanto in colonna, e si leggono come i due
   gradini che portano lì. */
.attestati{
  display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);
  gap:clamp(18px,3vw,32px);margin-top:clamp(28px,4vw,44px);align-items:start;
}
.attest__colonna{display:grid;gap:clamp(18px,3vw,28px)}
.attest{margin:0;min-width:0}
/* Il foglio grande porta un alone blu dietro: è l'unico oggetto della
   sezione che vale la pena illuminare, ed è quello che si vuole guardare. */
.attest--grande .attest__tela{
  box-shadow:inset 0 0 0 1px var(--line-2),0 50px 90px -50px rgba(56,112,224,.55);
}
.attest--grande .attest__dice b{font-size:14px}
.attest__tela{
  position:relative;display:grid;border-radius:var(--r-md);overflow:hidden;
  background:linear-gradient(158deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
  box-shadow:inset 0 0 0 1px var(--line);
}
.attest__foglio:empty{display:none}
.attest__foglio > svg,.attest__foglio > canvas,.attest__foglio > img{width:100%;height:auto}
/* Quando l'esempio vero è arrivato, il segnaposto si toglie di mezzo:
   due attestati uno sopra l'altro sono uno di troppo. */
.attest__tela:has(.attest__foglio:not(:empty)) .attest__attesa{display:none}
.attest__attesa{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  aspect-ratio:297/210;padding:24px;text-align:center;
  background:radial-gradient(70% 70% at 50% 40%,rgba(56,112,224,.10),transparent 70%);
}
/* Dice che è un esempio, e lo dice sul foglio: un attestato finto che non
   si dichiara finto è la cosa peggiore che questa pagina possa mostrare. */
.attest__attesa-eti{
  position:absolute;top:14px;left:16px;
  font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-4);
}
.attest__attesa-marchio{
  font-family:var(--f-display);font-size:11px;letter-spacing:.34em;color:var(--blu-chiaro);
}
.attest__attesa-riga{font-size:13px;letter-spacing:.04em;color:var(--ink-2)}
.attest__attesa-cod{
  margin-top:6px;padding:6px 12px;border-radius:999px;
  font-size:10.5px;letter-spacing:.1em;color:var(--ink-4);
  box-shadow:inset 0 0 0 1px var(--line);
}
.attest__dice{margin:16px 2px 0}
.attest__dice b{display:block;font-weight:400;font-size:12.5px;letter-spacing:.1em;color:#fff}
.attest__dice span{display:block;margin-top:6px;font-size:12.5px;line-height:1.7;color:var(--ink-3)}

/* =========================================================
   8 — LA CHIUSURA
   La regola in una riga e la cosa da fare, al centro, in un riquadro
   solo con l'alone blu più forte della pagina: è l'ultimo oggetto che
   si vede e deve essere quello che si guarda.
   ========================================================= */
.section--chiusa{padding-top:clamp(20px,3vw,40px)}
.chiusa{
  position:relative;overflow:hidden;text-align:center;
  display:flex;flex-direction:column;align-items:center;
  padding:clamp(38px,5vw,66px) clamp(26px,4vw,56px);
  border-radius:var(--r-lg);
}
.chiusa::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 120% at 50% 0%,rgba(56,112,224,.22),transparent 66%),
    radial-gradient(48% 110% at 50% 100%,rgba(56,112,224,.10),transparent 70%);
}
.chiusa > *{position:relative}
.chiusa .label{margin-bottom:18px}
.chiusa__t{
  margin:0;font-family:var(--f-display);font-weight:400;color:#fff;
  font-size:clamp(22px,3.2vw,38px);line-height:1.2;
}
.chiusa__t span{display:block;color:var(--blu-chiaro)}
.chiusa .btn{margin-top:30px}
.chiusa__nota{
  display:block;margin-top:16px;
  font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-4);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .prodotti{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Il foglio grande e i due piccoli in colonna: sotto i 1080 la colonna
     stretta diventa troppo stretta perché un attestato ci si legga. Si
     torna a una fila sola, col Master sopra. */
  .attestati{grid-template-columns:minmax(0,1fr)}
  .attest__colonna{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:900px){
  /* La mappa si impila: il nome sopra, i nodi sotto, a tutta larghezza.
     L'intestazione perde la cella «Percorso», che non ha più niente
     sotto, e tiene solo le colonne dei livelli — che restano allineate
     coi nodi perché hanno la stessa griglia. */
  .mappa__testa,.mappa__riga{grid-template-columns:1fr;gap:12px 0}
  .mappa__testa-chi{display:none}
  .livello{grid-template-columns:1fr;gap:34px}
}

@media (max-width:720px){
  .prodotti{grid-template-columns:minmax(0,1fr)}
  .attest__colonna{grid-template-columns:minmax(0,1fr)}
  .prodotto{padding:24px 20px 22px}
  .livello__scheda{padding:24px 20px 22px}
}

/* Sul telefono l'intestazione porta già il marchio, il panino e il
   pulsante d'accesso: con anche «← MB Company» si supera la larghezza di
   uno schermo da 375 e il panino finisce fuori dal bordo. Il marchio e la
   voce «Home» del menu portano nello stesso posto: il collegamento si
   toglie, non si stringe. */
@media (max-width:600px){
  .strumento__indietro{display:none}
}

@media (max-width:560px){
  .attest__attesa{aspect-ratio:auto;padding:34px 18px}
  .mappa{padding-left:16px;padding-right:16px}
  /* Quattro «Livello N» in trecento pixel: con la spaziatura larga delle
     etichette si accavallano. Si stringono quanto basta a stare ognuna
     nella sua colonna. */
  .mappa__testa{font-size:8.5px;letter-spacing:.16em}
  /* Quattro nodi su un telefono: i cerchi si stringono e la linea segue
     il nuovo raggio, o resterebbe attaccata a un cerchio che non c'è più. */
  .piolo__tondo{width:38px;height:38px;font-size:11px}
  .piolo::after{top:19px;left:calc(50% + 24px);width:calc(100% - 48px)}
  .piolo b{font-size:9.5px}
  .piolo small{font-size:9.5px;padding:0 2px}
  .tessera{width:50px;height:50px;border-radius:14px}
}

@media (max-width:380px){
  .lezione__n{display:none}
  .prodotto__nome{font-size:15px}
}

/* Chi ha chiesto meno movimento: tutto resta dov'è e si vede subito.
   Non si tolgono le cose, si toglie il moto. I segmenti della barra
   restano — sono informazione, non animazione — ma arrivano già al loro
   posto. */
@media (prefers-reduced-motion:reduce){
  .prodotto{transition:box-shadow .35s var(--ease)}
  .prodotto.is-in:hover{transform:none}
  .barra i{transition:none}
  .glass:hover .barra i{transition-delay:0s}
  .prodotto__apri::after{transition:none}
  .piolo__tondo{transition:none}
  a.piolo__a:hover .piolo__tondo{transform:none}
}