/* =========================================================
   MB ACADEMY — GLI ATTESTATI

   Un attestato e' un oggetto, non una schermata: ha un formato, un
   bordo, una trama, un sigillo. Qui e' disegnato in HTML e CSS e non
   come immagine, per tre motivi concreti: resta nitido a qualunque
   dimensione, si stampa davvero, e il nome dentro e' testo vero —
   selezionabile, leggibile da uno screen reader, cercabile.

   LA MISURA. Foglio A4 orizzontale, 297x210. Tutte le misure interne
   sono in cqw, cioe' in centesimi della larghezza del contenitore:
   il foglio rimpicciolisce INTERO e resta identico a se stesso.

   L'INSIDIO DEL cqw, ed e' un errore gia' fatto su questo sito: le
   unita' di contenitore NON valgono sull'elemento che dichiara il
   contenitore — li' si calcolano su quello piu' esterno. Quindi
   .attestato dichiara e basta, non ha nessuno stile visibile, e tutto
   il disegno sta in .attestato__foglio che gli e' figlio.

   IL COLORE. Cinque variabili in cima al foglio: fondo, inchiostro,
   blu, linee, trama. Lo schermo e' scuro come il resto del sito; la
   stampa ribalta quelle cinque variabili e basta — un attestato
   stampato su fondo nero e' un attestato inutilizzabile.
   ========================================================= */

/* ── il contenitore: dichiara la misura e sparisce ───────────────────────
   Nessuno stile visibile qui dentro, mai. Serve solo a dire ai figli
   quanto e' larga la zona in cui devono stare. */
.attestato{
  container-type:inline-size;
  container-name:attestato;
  width:100%;
}

/* ── il foglio ───────────────────────────────────────────────────────── */
.attestato__foglio{
  /* i cinque colori: da qui passa tutto, compresa la stampa */
  --att-fondo:#07090e;
  --att-inchiostro:#fff;
  --att-tenue:rgba(255,255,255,.72);
  /* .46 e non meno: sotto quella soglia la riga del codice e le
     etichette dei dati scendono sotto il contrasto leggibile, e sono
     proprio le righe che uno va a cercare */
  --att-fioco:rgba(255,255,255,.46);
  --att-blu:var(--blu,#3870e0);
  --att-blu-tenue:rgba(56,112,224,.34);
  --att-linea:rgba(255,255,255,.13);
  --att-trama:rgba(255,255,255,.055);
  --att-ghirigoro:rgba(56,112,224,.15);

  position:relative;
  aspect-ratio:297/210;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:5.1cqw 5.6cqw 4.3cqw;
  border-radius:1.5cqw;
  color:var(--att-tenue);
  font-family:var(--f-body);
  font-weight:300;
  /* Il fondo resta nero come il sito: il blu e' un respiro agli angoli,
     non una tinta. Un attestato azzurro non e' un attestato serio. */
  background:
    radial-gradient(110% 70% at 50% -16%,rgba(56,112,224,.11),transparent 60%),
    radial-gradient(70% 56% at 106% 114%,rgba(56,112,224,.07),transparent 62%),
    linear-gradient(158deg,#070910 0%,#040507 50%,#06080d 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.09),
    0 4cqw 8cqw -4cqw rgba(0,0,0,.95);
}

/* ── la trama, e perche' c'e' ─────────────────────────────────────────
   E' il dettaglio che rende l'attestato non copiabile a occhio: due
   famiglie di cerchi concentrici che si intersecano (un guilloche, lo
   stesso principio delle banconote) sopra un reticolo di triangoli
   equilateri — che sono poi gli esagoni del marchio, visti da dentro.
   Deve vedersi solo guardando: se si nota subito, e' troppo forte. */
.att__trama{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  /* il reticolo: tre famiglie di rette a 60°, -60° e 0°. Il passo delle
     orizzontali e' 0,866 di quello delle diagonali — e' l'altezza di un
     triangolo equilatero, senza quel numero la maglia non chiude. */
  background-image:
    repeating-linear-gradient(60deg,var(--att-trama) 0 1px,transparent 1px 2.6cqw),
    repeating-linear-gradient(-60deg,var(--att-trama) 0 1px,transparent 1px 2.6cqw),
    repeating-linear-gradient(0deg,var(--att-trama) 0 1px,transparent 1px 2.25cqw);
  /* si spegne al centro: la maglia deve stare dietro al bordo, non
     sotto il nome di chi ha studiato */
  -webkit-mask-image:radial-gradient(118% 108% at 50% 46%,transparent 0 30%,#000 88%);
  mask-image:radial-gradient(118% 108% at 50% 46%,transparent 0 30%,#000 88%);
}
.att__trama::before{
  content:'';position:absolute;inset:0;
  background-image:
    repeating-radial-gradient(circle at 6% 50%,var(--att-ghirigoro) 0 1px,transparent 1px 1.15cqw),
    repeating-radial-gradient(circle at 94% 50%,var(--att-ghirigoro) 0 1px,transparent 1px 1.15cqw);
  /* dove i due fasci si incrociano nasce l'interferenza: e' quella la
     figura che a occhio non si rifa' */
  -webkit-mask-image:radial-gradient(76% 76% at 50% 50%,transparent 0 54%,#000 100%);
  mask-image:radial-gradient(76% 76% at 50% 50%,transparent 0 54%,#000 100%);
}

/* ── la cornice: filo sottile e quattro squadre agli angoli ──────────── */
.att__cornice{
  position:absolute;inset:2.6cqw;z-index:0;pointer-events:none;
  border:1px solid var(--att-linea);
  border-radius:.6cqw;
}
.att__cornice::before{
  content:'';position:absolute;inset:-.9cqw;
  background-repeat:no-repeat;
  background-image:
    linear-gradient(var(--att-blu),var(--att-blu)),linear-gradient(var(--att-blu),var(--att-blu)),
    linear-gradient(var(--att-blu),var(--att-blu)),linear-gradient(var(--att-blu),var(--att-blu)),
    linear-gradient(var(--att-blu),var(--att-blu)),linear-gradient(var(--att-blu),var(--att-blu)),
    linear-gradient(var(--att-blu),var(--att-blu)),linear-gradient(var(--att-blu),var(--att-blu));
  background-size:1px 3.1cqw,3.1cqw 1px,1px 3.1cqw,3.1cqw 1px,1px 3.1cqw,3.1cqw 1px,1px 3.1cqw,3.1cqw 1px;
  background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%;
}

/* ── il timbro «esempio» ──────────────────────────────────────────────
   La vetrina della home mostra un attestato finto. Dirlo sul foglio
   costa una parola e evita un equivoco: un attestato di esempio con un
   codice che sembra vero e' una piccola bugia. */
.att__esempio{
  position:absolute;left:50%;top:50%;translate:-50% -50%;rotate:-19deg;
  z-index:1;margin:0;pointer-events:none;white-space:nowrap;
  font-family:var(--f-display);font-size:9.5cqw;letter-spacing:.28em;
  text-transform:uppercase;color:var(--att-blu);opacity:.09;
}

/* il contenuto sta sopra trama e cornice */
.att__testa,.att__corpo,.att__dati,.att__celle,.att__piede{position:relative;z-index:2}

/* ── testa: marchio a sinistra, grado a destra ───────────────────────── */
.att__testa{display:flex;align-items:flex-start;justify-content:space-between;gap:3cqw}

/* Il marchio e' quello di MB Company: stesso esagono, in blu, con la
   parola che ci passa dentro. Il contorno si interrompe dove corre la
   scritta — non sono due segni sovrapposti, e' un blocco solo. */
.att__marchio{
  position:relative;display:inline-flex;
  font-family:var(--f-display);font-size:1.85cqw;color:var(--att-inchiostro);
  line-height:1;
}
.att__marchio span{letter-spacing:.34em;margin-right:-.34em}
.att__esagono{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  height:3.35em;width:auto;pointer-events:none;z-index:-1;overflow:visible;
  -webkit-mask-image:linear-gradient(to bottom,#000 0 33%,transparent 33% 67%,#000 67% 100%);
  mask-image:linear-gradient(to bottom,#000 0 33%,transparent 33% 67%,#000 67% 100%);
}
.att__esagono path{
  fill:none;stroke:var(--att-blu);
  /* tratto in unita' del disegno, non in pixel: resta in proporzione
     a qualunque dimensione prenda il marchio */
  stroke-width:4.2;stroke-linejoin:round;stroke-linecap:round;
}

.att__grado{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.att__gradoN{font-size:1.05cqw;letter-spacing:.26em;text-transform:uppercase;color:var(--att-fioco)}
.att__gradoNome{
  margin-top:.7cqw;font-family:var(--f-display);font-size:1.65cqw;
  color:var(--att-inchiostro);letter-spacing:.02em;
}
/* I segmenti: quanti sono accesi, a che punto sta questo foglio — il
   grado su un corso, i percorsi chiusi su un Master. La larghezza e'
   fissa e i segmenti se la dividono, cosi' tre o otto occupano lo
   stesso spazio e la testa non si sposta. */
.att__scala{display:flex;gap:.5cqw;margin-top:1.1cqw;width:11cqw}
.att__scala i{flex:1;height:.3cqw;border-radius:.3cqw;background:var(--att-linea)}
.att__scala i.e-piena{background:var(--att-blu)}

/* ── corpo: il centro del foglio ─────────────────────────────────────── */
.att__corpo{
  flex:1;min-height:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
}
.att__occhiello{
  margin:0;font-size:1.15cqw;letter-spacing:.44em;text-transform:uppercase;
  color:var(--att-blu);text-indent:.44em;
}
/* IL RESPIRO DEL CORPO, e perche' e' misurato e non scelto.
   .att__corpo e' flex:1 con min-height:0: prende quello che avanza fra la
   testa e la fascia, e se il suo contenuto e' piu' alto non spinge niente
   — esce, e siccome e' centrato esce da tutte e due le parti in parti
   uguali. Non si vede come un errore: si vede come un foglio stretto.
   Succedeva su «Intelligenza artificiale — Basic» e «Immagini e video —
   Basic», i due titoli che vanno a capo, e sul Master AI, che sotto ha
   otto percorsi su due righe.
   Questi margini sono tarati perche' il corpo ci stia intero in tutti e
   ventidue i corsi, negli otto Master di percorso e nel Master AI, a
   1000, 560 e 340 pixel. Se se ne cambia uno va rifatta quella misura:
   il collaudo guarda lo spazio fra il corpo e i suoi due vicini, e sotto
   zero e' un difetto. */
.att__a,.att__per{
  margin:1.8cqw 0 0;font-size:1.25cqw;letter-spacing:.06em;color:var(--att-fioco);
}
/* il filo ha gia' il suo respiro sotto: raddoppiarlo spezza il centro */
.att__filo + .att__per{margin-top:0}
.att__nome{
  margin:.9cqw 0 0;max-width:24ch;
  font-family:var(--f-display);font-weight:400;font-size:4.4cqw;line-height:1.2;
  letter-spacing:.01em;color:var(--att-inchiostro);overflow-wrap:break-word;
}
/* Un nome lungo non deve mandare a capo il foglio: rimpicciolisce lui. */
.att__nome--lungo{font-size:3.2cqw;max-width:30ch}

/* Il filo che separa: si interrompe al centro per un esagono minuscolo. */
.att__filo{
  display:flex;align-items:center;gap:1.3cqw;
  width:min(46cqw,100%);margin:1.9cqw 0;
}
.att__filo::before,.att__filo::after{content:'';flex:1;height:1px}
.att__filo::before{background:linear-gradient(to right,transparent,var(--att-blu-tenue))}
.att__filo::after{background:linear-gradient(to left,transparent,var(--att-blu-tenue))}
.att__filo svg{width:1.8cqw;height:auto;flex:none;overflow:visible}
.att__filo svg path{fill:none;stroke:var(--att-blu);stroke-width:7;stroke-linejoin:round}

.att__corso,.att__titolone{
  margin:.8cqw 0 0;max-width:26ch;
  font-family:var(--f-display);font-weight:400;line-height:1.26;
  color:var(--att-inchiostro);text-wrap:balance;
}
.att__corso{font-size:2.45cqw}
.att__riga{
  margin:1.2cqw 0 0;max-width:52ch;font-size:1.25cqw;line-height:1.7;
  color:var(--att-fioco);text-wrap:balance;
}

/* ── la fascia dei dati ─────────────────────────────────────────────── */
.att__dati{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--att-linea);padding-top:1.9cqw;margin-top:1.9cqw;
}
.att__dato{padding-inline:2.2cqw;text-align:center}
.att__dato:first-child{padding-left:0}
.att__dato:last-child{padding-right:0}
.att__dato + .att__dato{border-left:1px solid var(--att-linea)}
.att__dato b{
  display:block;font-family:var(--f-display);font-weight:400;font-size:1.75cqw;
  color:var(--att-inchiostro);font-variant-numeric:tabular-nums;
}
.att__dato span{
  display:block;margin-top:.8cqw;font-size:1.05cqw;letter-spacing:.22em;
  text-transform:uppercase;color:var(--att-fioco);
}

/* ── piede: il codice a sinistra, il sigillo a destra ────────────────── */
.att__piede{
  display:flex;align-items:flex-end;justify-content:space-between;gap:3cqw;
  margin-top:2.1cqw;
}
.att__codice{
  margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:1.35cqw;letter-spacing:.14em;color:var(--att-inchiostro);
}
.att__nota{margin:.8cqw 0 0;font-size:1.05cqw;letter-spacing:.05em;color:var(--att-fioco)}

/* Nel Master la data non ha una fascia dove stare, perche' al suo posto
   ci sono i quattro livelli: si affianca al codice, che e' poi l'altro
   dato che qualcuno andra' a cercare. */
.att__piede .att__dato{padding:0;margin-left:auto;margin-right:2.8cqw;text-align:right}

.att__sigillo{
  position:relative;flex:none;display:grid;place-items:center;
  width:9.6cqw;aspect-ratio:100/116;
}
.att__sigillo svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* tratto piu' fino del marchio: l'esagono qui e' grande il doppio, e a
   parita' di unita' del disegno risulterebbe il doppio piu' pesante */
.att__sigillo svg path{fill:none;stroke:var(--att-blu);stroke-width:2.4;stroke-linejoin:round}
.att__sigillo svg + svg{scale:.72;opacity:.5}
.att__sigilloTesto{
  position:relative;display:grid;place-items:center;line-height:1;text-align:center;
}
.att__sigilloTesto b{
  font-family:var(--f-display);font-weight:400;font-size:1.5cqw;
  letter-spacing:.1em;color:var(--att-inchiostro);text-indent:.1em;
}
.att__sigilloTesto i{
  margin-top:.6cqw;font-style:normal;font-size:.9cqw;letter-spacing:.2em;
  color:var(--att-fioco);text-indent:.2em;
}

/* =========================================================
   MASTER AI — deve vedersi in un colpo d'occhio che vale di piu'

   Non «lo stesso con scritto Master»: cornice doppia, luce piu' alta,
   trama piu' presente, il titolo grande al posto del nome del corso, i
   quattro livelli elencati in fondo e un sigillo con i raggi. Chi lo
   guarda non deve leggere per capire che e' un altro rango.
   ========================================================= */
.attestato__foglio--master{
  --att-linea:rgba(255,255,255,.17);
  --att-trama:rgba(255,255,255,.065);
  --att-ghirigoro:rgba(56,112,224,.2);
  /* piu' aria in cima che sul foglio di corso: qui il marchio e' piu'
     grande e il suo esagono, che esce dal testo, arriverebbe a toccare
     la cornice */
  /* Il piede del Master sta piu' vicino al bordo che sul foglio di corso:
     quel mezzo cqw serve al corpo, che qui e' la parte stretta. */
  padding:5.4cqw 5.2cqw 3.5cqw;
  background:
    radial-gradient(105% 74% at 50% -16%,rgba(56,112,224,.19),transparent 58%),
    radial-gradient(76% 62% at 106% 116%,rgba(56,112,224,.11),transparent 60%),
    radial-gradient(66% 56% at -8% 108%,rgba(56,112,224,.07),transparent 58%),
    linear-gradient(158deg,#090c14 0%,#040507 48%,#080b12 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.14),
    0 4cqw 8cqw -4cqw rgba(0,0,0,.95);
}
/* la seconda cornice: un filo dentro l'altro, e' il segno piu' antico
   che esista per dire «questo documento conta» */
.attestato__foglio--master .att__cornice::after{
  content:'';position:absolute;inset:.85cqw;border:1px solid var(--att-blu-tenue);border-radius:.3cqw;
}
.attestato__foglio--master .att__marchio{font-size:1.95cqw}
.attestato__foglio--master .att__nome{font-size:3.2cqw;margin-top:.7cqw}
.attestato__foglio--master .att__nome--lungo{font-size:2.5cqw}
/* IL CONTO VERTICALE DEL MASTER, ed e' l'unico foglio dove non torna da
   solo. Il corpo e' flex:1: prende quello che avanza fra la testa e la
   fascia. Sul foglio di corso avanza parecchio; qui sotto ci sono otto
   percorsi su due righe piu' i totali, e quello che avanza e' meno di
   quanto il corpo misura. Il corpo e' centrato, quindi non trabocca in
   fondo: esce da tutte e due le parti — l'occhiello risale nella testa e
   il titolo scende sulla riga della fascia. Non si vede come un errore,
   si vede come un foglio stretto, ed e' peggio.
   Il respiro qui sotto e' tarato perche' il corpo ci stia intero: il
   collaudo misura lo spazio fra il corpo e i suoi due vicini, e sotto
   zero e' un difetto. Cambiare uno di questi numeri vuol dire rifare
   quella misura. */
.attestato__foglio--master .att__a{margin-top:1.1cqw}
.attestato__foglio--master .att__filo{margin:.95cqw 0}
.att__titolone{
  font-size:5cqw;letter-spacing:.05em;text-indent:.05em;line-height:1.08;
  text-shadow:0 0 4cqw rgba(56,112,224,.5);
}
.attestato__foglio--master .att__titolone{margin-top:.5cqw}
.attestato__foglio--master .att__gradoNome{color:var(--att-blu)}

/* Quello che il titolo contiene davvero: i percorsi chiusi, o i corsi
   del percorso. Quattro per riga — otto percorsi stanno su due righe
   senza cambiare misura, e un percorso da due corsi ne occupa due. */
.att__celle{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.3cqw 2.2cqw;
  border-top:1px solid var(--att-linea);padding-top:1.8cqw;margin-top:1.8cqw;
}
.att__celle--1{grid-template-columns:1fr}
.att__celle--2{grid-template-columns:repeat(2,1fr)}
.att__celle--3{grid-template-columns:repeat(3,1fr)}
.att__cella{display:flex;align-items:center;gap:1.1cqw;min-width:0}
/* il monogramma del percorso dentro l'esagono: e' il segno con cui il
   percorso e' gia' scritto nel programma, non un'invenzione di qui */
.att__mono{position:relative;flex:none;display:grid;place-items:center;
  width:3.4cqw;aspect-ratio:100/116}
.att__mono svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.att__mono svg path{fill:none;stroke:var(--att-blu);stroke-width:5;stroke-linejoin:round}
.att__mono b{position:relative;font-family:var(--f-display);font-weight:400;
  font-size:.82cqw;letter-spacing:.02em;color:var(--att-blu)}
.att__cellaTesto{min-width:0}
.att__cellaTesto b{
  display:block;font-family:var(--f-display);font-weight:400;font-size:1.35cqw;
  line-height:1.3;color:var(--att-inchiostro);
}
.att__cellaTesto span{display:block;margin-top:.45cqw;font-size:1.02cqw;
  letter-spacing:.06em;color:var(--att-fioco)}

.att__totali{
  margin:1.1cqw 0 0;font-size:1.2cqw;letter-spacing:.14em;text-transform:uppercase;
  color:var(--att-fioco);text-align:center;position:relative;z-index:2;
}
.att__totali b{font-weight:400;color:var(--att-inchiostro);font-variant-numeric:tabular-nums}

.attestato__foglio--master .att__piede{margin-top:1.2cqw}
.attestato__foglio--master .att__sigillo{width:10cqw}
/* i raggi: si vedono appena, ma cambiano il peso del sigillo */
.attestato__foglio--master .att__sigillo::before{
  content:'';position:absolute;inset:-24%;
  background:repeating-conic-gradient(from 0deg,var(--att-blu) 0 1.1deg,transparent 1.1deg 9deg);
  opacity:.2;
  -webkit-mask-image:radial-gradient(circle,transparent 0 42%,#000 58%,transparent 84%);
  mask-image:radial-gradient(circle,transparent 0 42%,#000 58%,transparent 84%);
}

/* =========================================================
   DUE CASI PARTICOLARI
   ========================================================= */

/* Il foglio scala per intero, quindi su uno schermo stretto scala anche
   il corpo del testo: resta la gerarchia — nome e titolo — e i dettagli
   si leggono ingrandendo o stampando. Chi vuole il dettaglio anche sul
   telefono mette .attestato--largo e lo fa scorrere di lato: e' lo
   scorrimento del riquadro, non della pagina. */
.attestato--largo{overflow-x:auto;-webkit-overflow-scrolling:touch}
.attestato--largo > .attestato__foglio{min-width:560px}

@media (prefers-reduced-motion:reduce){
  .attestato__foglio{transition:none}
}

/* =========================================================
   STAMPA
   Fondo chiaro, inchiostro scuro, niente aloni. Cambiano le cinque
   variabili e il resto del disegno resta identico: e' il motivo per
   cui i colori stanno in variabili e non sparsi nelle regole.
   ========================================================= */
@media print{
  .attestato{width:100%}
  .attestato--largo{overflow:visible}
  .attestato--largo > .attestato__foglio{min-width:0}

  .attestato__foglio,
  .attestato__foglio--master{
    --att-fondo:#fff;
    --att-inchiostro:#0b0d12;
    --att-tenue:#3a4150;
    --att-fioco:#6b7383;
    --att-blu:#24509f;
    --att-blu-tenue:rgba(36,80,159,.45);
    --att-linea:rgba(0,0,0,.22);
    --att-trama:rgba(0,0,0,.055);
    --att-ghirigoro:rgba(36,80,159,.16);
    background:var(--att-fondo);
    box-shadow:inset 0 0 0 1px var(--att-linea);
    border-radius:0;
    break-inside:avoid;
    /* senza questo la maggior parte dei browser butta via fondi e
       gradienti in stampa, e resta un foglio bianco con del testo */
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  .att__titolone{text-shadow:none}
  .att__esempio{opacity:.12}

  /* La trama su carta va tenuta piu' bassa che sullo schermo: l'occhio
     legge l'inchiostro, non la luce, e quello che a video e' un velo su
     carta diventa un disegno. I cerchi si spengono del tutto — senza la
     maschera, che in stampa non e' garantita, smetterebbero di essere
     un fondo. */
  .att__trama{opacity:.5}
  .att__trama::before{display:none}
  /* stessa ragione: i raggi del sigillo vivono di una maschera, e senza
     diventano una macchia dietro l'esagono */
  .attestato__foglio--master .att__sigillo::before{display:none}

  /* Stampare il solo attestato: si nasconde tutto e si riporta a galla
     il ramo marcato. Il resto della pagina resta dov'e' — non si sposta
     nessun nodo, quindi non c'e' niente da rimettere a posto dopo. */
  /* Nascondere non basta: quello che e' invisibile occupa lo stesso il
     suo posto, e da una pagina sola ne uscirebbero quattro, tre bianche.
     L'altezza si ferma alla prima pagina e il resto si taglia. */
  html.e-stampa-attestato,
  html.e-stampa-attestato body{
    height:100vh;overflow:hidden;margin:0;padding:0;background:#fff;
  }
  html.e-stampa-attestato body *{visibility:hidden}
  html.e-stampa-attestato .e-da-stampare,
  html.e-stampa-attestato .e-da-stampare *{visibility:visible}
  html.e-stampa-attestato .e-da-stampare{
    position:absolute;left:0;top:0;width:100%;margin:0;padding:0;
  }
  /* LA STRADA DAL FOGLIO ALLA PAGINA, e perche' senza questa regola dalla
     stampante usciva un foglio bianco.
     «Assoluto» non vuol dire «rispetto alla pagina»: vuol dire rispetto al
     primo antenato che fa da riferimento. E ne basta uno — position diversa
     da static, una trasformazione, un filtro, un backdrop-filter — perche'
     il foglio si pianti dove sta lui invece che in cima. Sulla pagina
     dell'Academy ce ne sono tre in fila (.corso__dentro, details.glass,
     .section: relative, e il vetro ha pure il backdrop-filter, che prende
     anche il position:fixed): il foglio finiva a duemila pixel dall'alto,
     mentre la pagina stampata e' alta una schermata sola. Fuori dal foglio,
     e quindi bianco.
     Qui si spengono, per il solo tempo della stampa, i modi in cui un
     antenato puo' diventare quel riferimento. Il ramo lo marca stampa() in
     js/attestato.js, dal posto che riceve il foglio fino a <body> escluso —
     il corpo della pagina lo tiene la regola qui sopra, e spegnergli
     altezza e traboccamento vorrebbe dire disfarla. */
  html.e-stampa-attestato .e-strada-stampa{
    position:static!important;
    transform:none!important;
    filter:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    perspective:none!important;
    contain:none!important;
    will-change:auto!important;
    /* e gli stessi antenati non devono nemmeno ritagliarlo */
    overflow:visible!important;
    clip-path:none!important;
    height:auto!important;max-height:none!important;
  }
  /* Il foglio e' A4 orizzontale, ma l'area stampabile di una pagina A4
     orizzontale non lo e' mai: i margini la rendono piu' larga che
     alta. Se il foglio prende tutta la larghezza, in fondo avanza
     altezza e il piede — codice e sigillo — finisce sulla pagina dopo.
     Quindi la larghezza si limita all'altezza della pagina moltiplicata
     per la proporzione del foglio, e il foglio si centra. Il conto sta
     qui e non in un margine di @page perche' l'area stampabile la
     decide la stampante, non noi. */
  html.e-stampa-attestato .e-da-stampare .attestato{
    width:min(100%,141.42vh);
    margin-inline:auto;
  }
}