/* ==========================================================================
   Formazione IA — base · Slide (schermo)
   Ogni .slide è un contenitore 16:9. Tutte le misure interne sono in "px di
   progetto" (--px = 1/1280 della larghezza della slide), così la slide scala
   con la finestra e in stampa torna esattamente a 1280 × 720.
   Niente JS: scorrimento con scroll-snap, numerazione con i contatori CSS.
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-snap-type: y mandatory;
  background: var(--c-schermo);
}

body {
  margin: 0;
  background: var(--c-schermo);
  color: var(--c-testo);
  font-family: var(--f-testo);
  counter-reset: slide;
  -webkit-font-smoothing: antialiased;
}

/* --- Contenitore slide --------------------------------------------------- */

.slide {
  --px: calc(100cqw / var(--slide-w));
  container-type: inline-size;
  position: relative;
  width: min(100vw, calc(100dvh * 16 / 9));
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  overflow: hidden;
  background: var(--c-fondo);
  scroll-snap-align: center;
  counter-increment: slide;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* spazio tra le slide solo a schermo */
.slide + .slide { margin-top: 2vh; }

.slide > * {
  margin-inline: calc(var(--margine) * var(--px));
}

/* --- Piè di slide ----------------------------------------------------------
   sinistra: FORMAZIONE IA — BASE — © 2026 Francesco Zaccaria (stile p.small)
   destra:   G1 — Titolo del capitolo — numero                                */

.slide::before,
.slide::after {
  position: absolute;
  bottom: calc(20 * var(--px));
  font-family: var(--f-testo);
  font-size: calc(13 * var(--px));
  color: var(--c-tenue);
  letter-spacing: 0.02em;
}

.slide::before {
  content: "FORMAZIONE IA — BASE — © 2026 Francesco Zaccaria";
  left: calc(var(--margine) * var(--px));
}

.slide::after {
  content: attr(data-giorno) " — " attr(data-capitolo) " — " counter(slide);
  right: calc(var(--margine) * var(--px));
}

.slide.senza-pie::before,
.slide.senza-pie::after { content: none; }

/* slide su una parola chiave del glossario: chiave (Lucide key-square, ISC) nel piede, prima di G1…,
   nello stesso grigio e alta come le cifre del piede */
.slide.chiave::after {
  padding-left: 1.15em;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg opacity='.35'%3E%3Cpath d='M12.4 2.7a2.5 2.5 0 0 1 3.4 0l5.5 5.5a2.5 2.5 0 0 1 0 3.4l-3.7 3.7a2.5 2.5 0 0 1-3.4 0L8.7 9.8a2.5 2.5 0 0 1 0-3.4z'/%3E%3Cpath d='m14 7 3 3'/%3E%3Cpath d='m9.4 10.6-6.814 6.814A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814'/%3E%3C/g%3E%3C/svg%3E") no-repeat left 52% / 0.8em 0.8em;
}

/* --- Tipografia di base -------------------------------------------------- */

.slide h1,
.slide h2,
.slide h3,
.slide p,
.slide ul,
.slide ol,
.slide blockquote,
.slide figure { margin-top: 0; margin-bottom: 0; }

.slide p,
.slide li {
  font-size: calc(var(--t-grande) * var(--px));
  line-height: var(--interlinea);
  font-weight: 400;
}

.slide a {
  color: var(--c-blu);
  text-decoration: none;
  border-bottom: calc(2 * var(--px)) solid var(--c-bordo);
}

.slide em { font-style: italic; }

.slide strong { font-weight: 700; }

/* evidenziatore salmone, come la selezione di masterismi */
.slide mark {
  background: rgba(250, 145, 145, 0.85); /* salmone all'85% di opacità */
  color: var(--c-testo);
  padding: 0 0.08em;
}

/* termine inglese con traduzione (prima occorrenza) */
.slide .en { font-style: italic; }
.slide .trad { color: var(--c-tenue-forte); }

/* etichetta mono sopra un titolo */
.slide .etichetta {
  font-family: var(--f-testo);
  font-size: calc(var(--t-piccolo) * var(--px));
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-rosa);
  margin-bottom: calc(24 * var(--px)) !important;
}

/* --- Strilli (Fandonie) -------------------------------------------------- */

.strillo {
  font-family: var(--f-strillo);
  font-weight: 400;
  font-size: calc(var(--t-strillo) * var(--px));
  line-height: 1.15; /* Lisbeth: aste lunghe, discendenti e ascendenti non devono toccarsi */
  letter-spacing: -0.01em;
  word-spacing: 0.12em;
}

/* --- Tipi di slide ------------------------------------------------------- */

/* Copertina di giornata */
.s-copertina { justify-content: space-between; padding-block: calc(var(--margine-alto) * var(--px)); }
.s-copertina .strillo { font-size: calc(var(--t-strillo) * var(--px)); }
.s-copertina .meta {
  font-family: var(--f-testo);
  font-size: calc(var(--t-piccolo) * var(--px));
  line-height: 1.5;
  color: var(--c-tenue-forte);
}

/* Sezione: numero + titolo strillato */
.s-sezione .numero {
  font-family: var(--f-testo);
  font-size: calc(var(--t-piccolo) * var(--px));
  color: var(--c-salmone);
  margin-bottom: calc(16 * var(--px));
}

/* Tema-focus: una sola frase, grandissima */
.s-focus .strillo { font-size: calc(var(--t-mega) * var(--px)); }

/* Strilli (tema-focus): fondo verde Fandonie, testo bianco. Le aperture di capitolo (s-sezione) restano bianche. */
.slide.s-focus { background: var(--c-verde); color: #fff; }
.s-focus::before, .s-focus::after { color: rgba(255, 255, 255, 0.7); }

/* Testo: titolo + poche righe */
/* titolo 40 px più in alto del margine standard, testo 24 px più in basso: più aria in mezzo */
.s-testo { justify-content: flex-start; padding-top: calc((var(--margine-alto) - 40) * var(--px)); }
.s-testo h2 {
  font-family: var(--f-testo);
  font-weight: 700;
  font-size: calc(var(--t-titolo) * var(--px));
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin-bottom: calc((48 + 40 + 24) * var(--px));
}
.s-testo ul {
  list-style: none;
  padding: 0;
}
/* corpo del testo: dimensione in tokens.css (--t-corpo); rientro e spazi in em, seguono il corpo */
.s-testo li {
  font-size: calc(var(--t-corpo) * var(--px));
  line-height: 1.35;
  padding-left: 1.2em;
  position: relative;
}
.s-testo li + li { margin-top: 0.6em; }
/* sottoelenco: freccia con rientro, corpo un po' più piccolo */
.s-testo li ul { margin-top: 0.3em; }
.s-testo li li { font-size: 0.8em; }
.s-testo li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--c-salmone);
}

/* Tabella (es. scala AIAS): filo sopra ogni riga, pittogramma a tratto */
.s-tabella { padding-top: calc(40 * var(--px)); }
.s-tabella h2 { font-size: calc(44 * var(--px)); margin-bottom: calc(40 * var(--px)); }
.s-tabella table { width: calc((var(--slide-w) - 2 * var(--margine)) * var(--px)); table-layout: fixed; border-collapse: collapse; }
.s-tabella tr { border-top: calc(1 * var(--px)) solid rgba(0, 0, 0, 0.15); }
.s-tabella th,
.s-tabella td {
  text-align: left;
  vertical-align: top;
  padding: calc(8 * var(--px)) calc(16 * var(--px)) calc(8 * var(--px)) 0;
  font-size: calc(20 * var(--px));
  line-height: 1.25;
}
/* etichetta: numero e icona sulla prima riga; sotto (<br>) l'etichetta, allineata a sinistra nella stessa colonna.
   Nomi dei livelli di Gradiente IA (Autonomia…Sperimentazione), sotto il sottotitolo in chiaro; descrizioni a corpo minore. */
.s-tabella th {
  width: calc(390 * var(--px));
  font-weight: 700;
}
.s-tabella th .sott { font-weight: 400; color: var(--c-tenue-forte); }
.s-tabella td { font-size: calc(18 * var(--px)); }
.s-tabella .liv {
  display: inline-block;
  min-width: calc(28 * var(--px));
  color: var(--c-salmone);
}
.s-tabella th svg {
  display: inline-block;
  vertical-align: calc(-4 * var(--px));
  width: calc(24 * var(--px)); height: calc(24 * var(--px));
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}

/* Enunciato: una frase grande in Space Grotesk, senza titolo */
.s-enunciato p { font-size: calc(72 * var(--px)); line-height: 1.08; letter-spacing: -0.02em; font-weight: 500; }

/* Citazione */
.s-citazione blockquote p {
  font-size: calc(var(--t-grande) * var(--px));
  line-height: 1.2;
  font-weight: 400;
}
/* virgolette e parentesi nello stesso colore del testo (il grigio solo per le informazioni secondarie) */
.s-citazione blockquote p::before { content: "«"; }
.s-citazione blockquote p::after { content: "»"; }
.s-citazione .fonte {
  font-family: var(--f-testo);
  font-size: calc(var(--t-piccolo) * var(--px));
  color: var(--c-tenue-forte);
  margin-top: calc(36 * var(--px));
}

/* Immagine al vivo: nessun testo. L'immagine occupa la slide fino alla didascalia;
   sotto, sul fondo della slide, didascalia e piè come nelle altre slide. */
.s-immagine {
  background: var(--c-testo);
  justify-content: flex-start;
  padding-bottom: calc(44 * var(--px)); /* spazio del piè di slide */
}
.s-immagine > * { margin: 0; }
.s-immagine img {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  object-fit: cover;
}
.s-immagine.intera img { object-fit: contain; }
.s-immagine.pixel img { image-rendering: pixelated; } /* schermate di vecchi computer: pixel netti */
.s-immagine .credito {
  margin: calc(12 * var(--px)) calc(var(--margine) * var(--px)) 0;
  font-family: var(--f-testo);
  font-size: calc(14 * var(--px));
  line-height: 1.45;
  color: #fff; /* bianco pieno, senza fusione (difference/multiply rendevano illeggibile) */
}
.slide.s-immagine::before,
.slide.s-immagine::after { color: rgba(255, 255, 255, 0.7); }
.s-immagine .credito a.link-md,
.s-immagine .credito a.link-md .u { color: inherit; --c-link-testo: currentColor; }

/* Esercitazione */
.s-esercizio .etichetta { color: var(--c-blu); }
.s-esercizio h2 {
  font-family: var(--f-testo);
  font-weight: 700;
  font-size: calc(var(--t-titolo) * var(--px));
  line-height: 1.05;
  margin-bottom: calc(40 * var(--px));
}
.s-esercizio ol {
  padding-left: calc(var(--t-corpo) * 1.3 * var(--px));
}
.s-esercizio li { font-size: calc(var(--t-corpo) * var(--px)); line-height: 1.35; }
.s-esercizio li + li { margin-top: 0.5em; }
.s-esercizio li::marker { font-family: var(--f-testo); color: var(--c-blu); }
.s-esercizio .tempo {
  position: absolute;
  top: calc(var(--margine-alto) * var(--px));
  right: calc(var(--margine) * var(--px));
  margin: 0;
  font-family: var(--f-testo);
  font-size: calc(var(--t-medio) * var(--px));
  color: var(--c-blu);
}
.s-esercizio .facoltativo { color: var(--c-blu); }
/* Livello AIAS: etichetta in coda al testo, filo grigio leggero ad angoli stondati */
.s-esercizio .aias {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(12 * var(--px));
  margin-top: calc(36 * var(--px)) !important;
  font-size: calc(18 * var(--px));
  color: var(--c-tenue-forte);
}
.aias-liv {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--px));
  padding: calc(6 * var(--px)) calc(14 * var(--px));
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: calc(10 * var(--px));
}
.aias-liv b { font-weight: 500; color: var(--c-testo); }
/* più livelli nella stessa esercitazione: l'etichetta segue la voce a cui si riferisce */
.s-esercizio li .aias-liv {
  margin-left: calc(10 * var(--px));
  padding: calc(3 * var(--px)) calc(10 * var(--px));
  font-size: calc(18 * var(--px));
  color: var(--c-tenue-forte);
  vertical-align: calc(2 * var(--px));
}
.aias-liv svg {
  width: calc(20 * var(--px)); height: calc(20 * var(--px));
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}

/* Matrice 2 × 2 (G4, frequenza × rischio): la griglia sta al centro della slide (margini simmetrici),
   gli assi con le loro etichette nei margini. Testo piccolo, una sola tinta: più l'IA è adatta, più blu. */
.matrice {
  --mc-w: 300; --mc-h: 140; --mc-gap: 10; --mc-asse: 30;
  position: absolute; left: 50%; top: calc(400 * var(--px));
  transform: translate(-50%, -50%);
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, calc(var(--mc-w) * var(--px)));
  grid-template-rows: repeat(2, calc(var(--mc-h) * var(--px)));
  gap: calc(var(--mc-gap) * var(--px));
  font-size: calc(16 * var(--px));
}
/* assi: due linee con la freccia, un po' discoste dalla griglia (sinistra e sotto); testi tutti orizzontali */
.m-asse-x, .m-asse-y {
  position: absolute; color: var(--c-tenue-forte);
  font-size: calc(13 * var(--px)); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
}
.m-asse-y { /* sopra la punta della freccia verticale */
  left: calc((-1 * var(--mc-asse) + 1) * var(--px)); bottom: calc(100% + 30 * var(--px));
  transform: translateX(-50%);
}
.m-asse-x { left: 50%; top: calc(100% + (var(--mc-asse) + 40) * var(--px)); transform: translateX(-50%); }
.matrice::before, .matrice::after { content: ""; position: absolute; background: var(--c-tenue); }
.matrice::before { /* asse verticale: frequenza, verso l'alto */
  left: calc(-1 * var(--mc-asse) * var(--px)); top: calc(-12 * var(--px)); bottom: calc(-1 * var(--mc-asse) * var(--px));
  width: calc(2 * var(--px));
}
.matrice::after { /* asse orizzontale: rischio, verso destra */
  left: calc(-1 * var(--mc-asse) * var(--px)); right: calc(-12 * var(--px)); bottom: calc(-1 * var(--mc-asse) * var(--px));
  height: calc(2 * var(--px));
}
/* punta a chevron, stesso tratto della linea: un quadratino con due lati, ruotato di 45° */
.m-freccia {
  position: absolute; box-sizing: border-box;
  width: calc(12 * var(--px)); height: calc(12 * var(--px));
  border: 0 solid var(--c-tenue); transform: rotate(45deg);
}
.m-freccia-y { left: calc((-1 * var(--mc-asse) - 5) * var(--px)); top: calc(-11.5 * var(--px)); border-top-width: calc(2 * var(--px)); border-left-width: calc(2 * var(--px)); }
.m-freccia-x { right: calc(-11.5 * var(--px)); bottom: calc((-1 * var(--mc-asse) - 5) * var(--px)); border-top-width: calc(2 * var(--px)); border-right-width: calc(2 * var(--px)); }
/* etichette di righe e colonne */
.m-riga, .m-col { position: absolute; font-weight: 500; color: var(--c-tenue-forte); font-size: calc(15 * var(--px)); white-space: nowrap; }
.m-riga { right: calc(100% + (var(--mc-asse) + 12) * var(--px)); transform: translateY(-50%); }
.m-r1 { top: calc(var(--mc-h) / 2 * var(--px)); }
.m-r2 { top: calc((var(--mc-h) * 1.5 + var(--mc-gap)) * var(--px)); }
.m-col { top: calc(100% + (var(--mc-asse) + 8) * var(--px)); transform: translateX(-50%); }
.m-c1 { left: calc(var(--mc-w) / 2 * var(--px)); }
.m-c2 { left: calc((var(--mc-w) * 1.5 + var(--mc-gap)) * var(--px)); }
/* caselle: righe = frequente/raro, colonne = rischio basso/alto */
.m-delega { grid-row: 1; grid-column: 1; } .m-controlla { grid-row: 1; grid-column: 2; }
.m-lascia { grid-row: 2; grid-column: 1; } .m-tu { grid-row: 2; grid-column: 2; }
.slide .matrice .m-cella {
  margin: 0; font-size: calc(15 * var(--px)); line-height: 1.3; color: var(--c-tenue-forte);
  padding: calc(16 * var(--px)) calc(20 * var(--px));
  border-radius: calc(12 * var(--px));
  display: flex; flex-direction: column; justify-content: flex-end; gap: calc(4 * var(--px));
}
.m-cella strong { font-size: calc(26 * var(--px)); font-weight: 700; line-height: 1.1; color: var(--c-testo); }
.m-delega    { background: rgba(105, 143, 255, 0.30); }
.m-controlla { background: rgba(105, 143, 255, 0.12); }
.m-lascia, .m-tu { background: rgba(0, 0, 0, 0.04); }

/* Traccia audio in una slide «Da ascoltare» */
.audio-slide { display: block; width: calc(640 * var(--px)); max-width: 100%; margin-top: calc(28 * var(--px)); }

/* Link esterno */
.s-link p { font-size: calc(var(--t-corpo) * var(--px)); }
.s-link .url {
  font-size: calc(var(--t-corpo) * var(--px));
  margin-top: calc(28 * var(--px));
  overflow-wrap: anywhere;
}

/* Da vedere e da leggere sulla stessa slide: corpo delle note, in nero */
.s-letture { justify-content: flex-start; padding-top: calc((var(--margine-alto) - 40) * var(--px)); }
.s-letture ul { margin-top: 0; margin-bottom: 0; padding-left: 0; list-style: none; }
.s-letture li {
  font-size: calc(var(--t-piccolo) * var(--px));
  line-height: 1.4;
  color: var(--c-testo);
}
.s-letture li + li { margin-top: calc(14 * var(--px)); }
.s-letture ul + .etichetta { margin-top: calc(40 * var(--px)); }

/* Fonti / bibliografia */
.s-fonti { justify-content: flex-start; padding-top: calc((var(--margine-alto) - 40) * var(--px)); }
.s-fonti ol {
  padding-left: 0;
  list-style: none;
}
.s-fonti li {
  font-size: calc(var(--t-fonti) * var(--px));
  line-height: 1.4;
}
.s-fonti li + li { margin-top: calc(6 * var(--px)); }

/* Licenza (copertina e chiusura): righe con etichetta */
.licenza {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: calc(16 * var(--px));
  row-gap: calc(4 * var(--px));
  margin-top: calc(28 * var(--px)) !important;
  font-size: calc( 18 * var(--px));
  line-height: 1.4;
  color: var(--c-tenue-forte);
}
.licenza dt { color: var(--c-tenue); }
.licenza dd { margin: 0; }

/* Link: sempre interi, titolo + url, in forma [titolo](url) */
.slide a.link-md {
  --c-link-testo: var(--c-testo);
  border-bottom: none;
  color: var(--c-link-testo);
}
/* parentesi nel colore del titolo del link, non grigie */
.slide a.link-md::before { content: "["; }
.slide a.link-md .u::before { content: "]("; color: var(--c-link-testo); }
.slide a.link-md::after { content: ")"; }
.slide a.link-md .u {
  color: var(--c-blu);
  overflow-wrap: anywhere;
}

/* Immagine su fondo bianco (incisioni, stampe) */
.s-immagine.su-bianco { background: var(--c-fondo); }
.s-immagine.su-bianco .credito,
.s-immagine.passepartout .credito { color: var(--c-tenue-forte); }
.slide.s-immagine.su-bianco::before,
.slide.s-immagine.su-bianco::after,
.slide.s-immagine.passepartout::before,
.slide.s-immagine.passepartout::after { color: var(--c-tenue); }

/* Immagine con passepartout del colore della carta: --pp-sx / --pp-dx campionati ai bordi della foto.
   Passaggio sfumato al centro (coperto dalla foto): sotto, nella fascia di didascalia e piè, nessuna linea di giunzione. */
.s-immagine.passepartout {
  background: linear-gradient(to right, var(--pp-sx) 25%, var(--pp-dx) 75%);
}

/* Immagine ancora da scegliere (solo bozze) */
.s-immagine.da-scegliere {
  background: var(--c-schermo);
  display: flex;
  align-items: center;
  justify-content: center;
}
.s-immagine.da-scegliere p {
  margin: 0 !important;
  font-size: calc(var(--t-piccolo) * var(--px));
  color: var(--c-tenue-forte);
}

/* Schema disegnato (SVG) a tutta slide */
.s-immagine figure { flex: 1 1 0; min-height: 0; display: flex; }
.s-immagine svg { flex: 1 1 0; min-height: 0; width: 100%; height: 100%; }

/* Fonte breve: in basso, appena sopra il piè di slide (FORMAZIONE IA — BASE …).
   Link e fonti nello stesso blocco, uno per riga (<br>); il blocco cresce verso l'alto. */
.slide .fonte-breve {
  position: absolute;
  left: calc(var(--margine) * var(--px));
  right: calc(var(--margine) * var(--px));
  bottom: calc(44 * var(--px));
  margin: 0;
  font-size: calc(14 * var(--px));
  line-height: 1.45;
  color: var(--c-tenue);
}

.slide .fonte-breve a.link-md { --c-link-testo: var(--c-tenue); }

/* Testo piccolo di servizio (piè di slide, fonti brevi) */
.s-testo ul + p.small { margin-top: calc(32 * var(--px)); }
.slide p.small {
  font-size: calc(var(--t-etichetta) * var(--px));
  line-height: 1.4;
  color: var(--c-tenue);
}

/* Il trattino lungo non esiste in Lisbeth: lo prende dal testo */
.strillo .trattino { font-family: var(--f-testo); font-weight: 300; }

/* Probabilità del token (barre) */
.barre { list-style: none; padding: 0; }
.slide .barre li {
  display: grid;
  grid-template-columns: calc(260 * var(--px)) 1fr calc(110 * var(--px));
  align-items: center;
  gap: calc(20 * var(--px));
  font-size: calc(var(--t-medio) * var(--px));
  padding: 0;
}
.slide .barre li::before { content: none; }
.barre .barra { height: calc(28 * var(--px)); background: var(--c-salmone); }
.barre .perc { color: var(--c-tenue-forte); text-align: right; }

/* Post incorporato (es. Instagram): a schermo l'iframe, in stampa solo il link */
.s-embed { background: var(--c-testo); align-items: center; }
.s-embed iframe {
  width: calc(400 * var(--px));
  height: calc(640 * var(--px));
  border: 0;
  background: #fff;
  margin: auto;
}
.slide .solo-stampa { display: none; }

/* --- Menu e copyright dopo l'ultima slide (generati da strumenti/menu.py; solo a schermo) --- */
.piede-slide {
  width: min(100vw, calc(100dvh * 16 / 9));
  margin: 2vh auto 0;
  padding: 2rem clamp(1rem, 7vw, 88px) 3rem;
  background: var(--c-fondo);
  font-family: var(--f-testo);
  font-size: 0.85rem;
  scroll-snap-align: end;
}
.piede-slide nav.menu ul { list-style: none; padding: 0; margin: 0; }
.piede-slide nav.menu li { margin: 0; padding: 0.3rem 0; border-top: 1px solid rgba(0, 0, 0, 0.15); }
.piede-slide nav.menu a { color: var(--c-blu); text-decoration: none; }
.piede-slide nav.menu a:hover { border-bottom: 1px solid var(--c-blu); }
.piede-slide .disattivo { color: var(--c-tenue); }
.piede-slide .stato {
  display: inline-block; margin-left: 0.5rem; padding: 0.1em 0.6em; border-radius: 9999px;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid rgba(0, 0, 0, 0.2); color: var(--c-tenue-forte);
}
.piede-slide .menu--admin { margin-top: 2rem; }
.piede-slide .etichetta {
  margin: 0 0 0.3rem; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--c-rosa);
}
.piede-slide footer.licenza { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid rgba(0, 0, 0, 0.15); color: var(--c-tenue-forte); }
.piede-slide footer.licenza p { margin: 0; }
@media print { .piede-slide { display: none; } }

/* Interruttore di scala in un'infografica (es. s32b, pesi → sinapsi): solo CSS, checkbox + label.
   .scala-barra si accorcia (1 px = 100 miliardi), .scala-val segue la barra (--dx), .scala-1/.scala-100 si alternano. */
.scala-input { position: absolute; opacity: 0; pointer-events: none; }
.slide .scala-switch {
  position: absolute;
  top: calc(64 * var(--px));
  right: calc(var(--margine) * var(--px));
  margin: 0;
  display: flex;
  align-items: center;
  gap: calc(10 * var(--px));
  font-size: calc(16 * var(--px));
  color: var(--c-tenue-forte);
  cursor: pointer;
  z-index: 1;
}
.scala-track {
  position: relative;
  width: calc(40 * var(--px));
  height: calc(22 * var(--px));
  border-radius: calc(11 * var(--px));
  background: rgba(0, 0, 0, 0.18);
  transition: background 0.3s;
}
.scala-track::after {
  content: "";
  position: absolute;
  top: calc(3 * var(--px));
  left: calc(3 * var(--px));
  width: calc(16 * var(--px));
  height: calc(16 * var(--px));
  border-radius: 50%;
  background: #fff;
  transition: transform 0.3s;
}
.scala-input:checked ~ .scala-switch .scala-track { background: var(--c-blu); }
.scala-input:checked ~ .scala-switch .scala-track::after { transform: translateX(calc(18 * var(--px))); }
.scala-input:focus-visible ~ .scala-switch .scala-track { outline: 2px solid var(--c-blu); outline-offset: 2px; }

.scala-barra, .scala-val, .scala-sinapsi { transition: transform 1.2s ease-in-out, opacity 0.6s; transform-box: fill-box; transform-origin: left center; }
.scala-sinapsi { transform: scaleX(100); }
g.scala-100, text.scala-1 { transition: opacity 0.6s; }
g.scala-100 { opacity: 0; }
tspan.scala-100 { display: none; }
.scala-input:checked ~ figure .scala-barra { transform: scaleX(0.01); }
.scala-input:checked ~ figure .scala-val { transform: translateX(var(--dx)); }
.scala-input:checked ~ figure .scala-sinapsi { transform: scaleX(1); }
.scala-input:checked ~ figure g.scala-100 { opacity: 1; }
.scala-input:checked ~ figure text.scala-1 { opacity: 0; }
.scala-input:checked ~ figure tspan.scala-1 { display: none; }
.scala-input:checked ~ figure tspan.scala-100 { display: inline; }
@media print { .scala-switch { display: none; } }