/* ===========================================================================
   IC20 — sistema visivo
   Scuro, tecnico, anti-decorativo. Un solo colore vivo.

   I quattro colori e i due font sono quelli di sempre: qui non si aggiunge
   nessun valore nuovo. Tutto il resto — profondita', fondale, immagini,
   movimento — e' costruito con opacita' diverse degli stessi quattro.

   Le immagini sono sempre trattate: grigio + velo d'accento in fusione
   'color'. Nessuna foto entra a colori suoi, cosi' la tavolozza resta quella
   dichiarata anche quando la pagina e' piena di fotografie.
   =========================================================================== */

:root {
  --bg-primary:   #0D1117;
  --bg-secondary: #161B22;
  --text-primary: #E2E8F0;
  --accent-color: #00A8B5;

  /* Derivati dal solo --text-primary: nessun colore nuovo, solo opacita'
     diverse. I bordi a piena intensita' su fondo scuro spezzano la pagina in
     riquadri; al 20% il reticolo si legge senza urlare e torna pieno quando
     l'elemento e' interattivo e sotto il puntatore. */
  --border:        rgba(226, 232, 240, 0.20);
  --border-strong: rgba(226, 232, 240, 0.55);
  --text-muted:    rgba(226, 232, 240, 0.62);
  --text-faint:    rgba(226, 232, 240, 0.42);

  /* Superfici: non un grigio nuovo, ma il testo a opacita' bassissima sopra
     il fondo. Cosi' i pannelli salgono di un gradino senza uscire dai
     quattro colori. */
  --surface:       rgba(226, 232, 240, 0.035);
  --surface-hi:    rgba(226, 232, 240, 0.06);

  /* L'accento non compare mai come bordo pieno: solo come luce, velo e
     riempimento di stato. */
  --accent-glow:   rgba(0, 168, 181, 0.22);
  --accent-veil:   rgba(0, 168, 181, 0.10);
  --accent-line:   rgba(0, 168, 181, 0.45);

  --font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --measure: 68ch;
  --page:    76rem;
  --gutter:  1.5rem;
  --head-h:  5.5rem;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

/* Le colonne di griglia non devono mai essere allargate dal contenuto: senza
   questo, una fotografia dentro una colonna 1fr impone la propria larghezza
   nativa e su telefono la pagina esce dallo schermo. */
.hero-wrap > *,
.split > *,
.testata-pagina-testo > *,
.cols > *,
.grid > * { min-width: 0; }

img { max-width: 100%; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.72;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* --- fondale ------------------------------------------------------------- */

/* Due strati fissi dietro tutto: un reticolo tecnico e una luce d'accento
   molto bassa. Servono a dare profondita' alla pagina senza aggiungere
   elementi al markup e senza toccare la tavolozza. */
body::before,
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
body::before {
  background-image:
    linear-gradient(to right, rgba(226, 232, 240, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(226, 232, 240, 0.035) 1px, transparent 1px);
  background-size: 5.5rem 5.5rem;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
          mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
}
body::after {
  background:
    radial-gradient(52rem 34rem at 88% -6%, var(--accent-glow), transparent 62%),
    radial-gradient(40rem 30rem at 4% 6%, rgba(226, 232, 240, 0.05), transparent 60%);
}

body > * { position: relative; z-index: 1; }

/* --- tipografia ---------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-mono);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.1rem + 3.6vw, 3.75rem); font-weight: 600; }
h2 { font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2.1rem); }
h3 { font-size: 1.125rem; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--text-primary); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--accent-color); }

:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 3px;
}

.prose { max-width: var(--measure); }
.lead  { font-size: clamp(1.125rem, 1.02rem + 0.5vw, 1.3125rem); color: var(--text-muted); line-height: 1.6; }

/* Etichetta monospaziata: kicker di sezione, meta, tipo di contenuto.
   Il trattino davanti e' l'unico segno decorativo del sistema: marca
   l'inizio di un blocco come una tacca su un disegno tecnico. */
.label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-faint);
}

.section-head .label,
section > .wrap > .label,
.split > div > .label,
.hero-testo > .label,
.testata-pagina-titolo > .label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--accent-color);
}
.section-head .label::before,
section > .wrap > .label::before,
.split > div > .label::before,
.hero-testo > .label::before,
.testata-pagina-titolo > .label::before {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: var(--accent-line);
  flex: none;
}

.accent { color: var(--accent-color); }

/* --- impaginato ---------------------------------------------------------- */

.wrap {
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section {
  padding-block: clamp(4rem, 9vw, 7rem);
  position: relative;
}
section + section { border-top: 1px solid var(--border); }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 3rem;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: var(--gutter);
  top: 0.75rem;
  z-index: 10;
  background: var(--bg-secondary);
  border: 1px solid var(--border-strong);
  padding: 0.6rem 1rem;
}

/* --- bande fotografiche --------------------------------------------------- */

/* Una sezione con data-sfondo prende la sua fotografia come fondale.
   Due strati: la foto in scala di grigi, mascherata ai bordi perche' non
   tagli netta; sopra, un velo in fusione 'color' che le impone l'accento.
   Nessun colore estraneo puo' arrivare in pagina per questa via. */
[data-sfondo] {
  isolation: isolate;
  overflow: hidden;
}
[data-sfondo] > * { position: relative; z-index: 2; }

[data-sfondo]::before,
[data-sfondo]::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

[data-sfondo]::before {
  background-image: var(--img);
  background-size: cover;
  background-position: var(--img-pos, 50% 50%);
  filter: var(--img-filter, grayscale(1) contrast(1.3) brightness(0.34));
  opacity: var(--img-opacity, 0.14);
  -webkit-mask-image: var(--img-mask, linear-gradient(180deg, transparent, #000 30%, #000 62%, transparent));
          mask-image: var(--img-mask, linear-gradient(180deg, transparent, #000 30%, #000 62%, transparent));
  transform: scale(1.02);
}

[data-sfondo]::after {
  z-index: 1;
  mix-blend-mode: color;
  background: linear-gradient(155deg, var(--accent-color) 0%, rgba(13, 17, 23, 1) 68%);
  opacity: 0.45;
}

[data-sfondo='ufficio']  { --img: url('../img/sfondo-ufficio.jpg');  --img-pos: 50% 45%; }
[data-sfondo='tavolo']   { --img: url('../img/sfondo-tavolo.jpg');   --img-pos: 50% 60%; }
[data-sfondo='aula']     { --img: url('../img/sfondo-aula.jpg');     --img-pos: 50% 40%; }
[data-sfondo='officina'] { --img: url('../img/sfondo-officina.jpg'); --img-pos: 50% 50%; }
/* La lavagna arriva invertita: fondo scuro e tratto chiaro. E' l'unico modo
   perche' una foto di lavagna bianca stia su una pagina nera senza bucarla,
   e per come e' fatta diventa esattamente un disegno tecnico. */
[data-sfondo='lavagna'] {
  --img: url('../img/sfondo-lavagna.jpg');
  --img-filter: grayscale(1) invert(1) contrast(1.1) brightness(0.5);
  --img-opacity: 0.2;
  --img-pos: 50% 45%;
}

/* --- testata di pagina ---------------------------------------------------- */

/* Catalogo, contenuti, come si lavora: il titolo tiene la sua colonna e i
   paragrafi scorrono accanto. Su schermo stretto tornano in fila, nell'ordine
   in cui si leggono. */
.testata-pagina {
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
  --img-mask: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, #000 18%, transparent 55%);
}

.testata-pagina-testo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}
@media (min-width: 62rem) {
  .testata-pagina-testo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 4rem;
    align-items: start;
  }
}

.testata-pagina-titolo h1 { margin-top: 1.25rem; }
.testata-pagina-corpo .lead { margin-bottom: 1.5rem; }
.testata-pagina-corpo p:not(.lead) { color: var(--text-muted); font-size: 1rem; }

/* --- testata ------------------------------------------------------------- */

.site-head {
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(13, 17, 23, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
/* Filo d'accento che appare quando la pagina scorre: dice che la testata sta
   galleggiando sopra il contenuto, senza aggiungere un'ombra. */
.site-head::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-line), transparent);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.is-scrolled .site-head { background: rgba(13, 17, 23, 0.94); }
.is-scrolled .site-head::after { opacity: 1; }

.site-head > .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--head-h);
  flex-wrap: wrap;
  padding-block: 0.75rem;
}

/* Il marchio e' due righe: il nome con la firma, e sotto il payoff. */
.brand { display: flex; flex-direction: column; }
.brand-riga {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Payoff. E' parte del marchio, non un messaggio: stesse parole ovunque, sotto
   il logo in testata e in fondo pagina. Mono come il logo, perche' appartiene
   alla stessa famiglia di segni. Ma in minuscolo e quasi senza spaziatura,
   al contrario delle .label: in maiuscolo spaziato si leggerebbe come un
   secondo marchio, e invece e' una frase, una cosa detta. Al 42% di intensita'
   sta sotto la navigazione e non le contende il turno.

   I due tempi hanno la stessa intensita'. Smorzare il secondo darebbe la
   gerarchia sbagliata: e' li' che la frase gira. */
.payoff {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.35;
  color: var(--text-faint);
  margin: 0;
}
/* Il payoff e' in due tempi separati dal punto, e quando lo spazio finisce
   deve andare a capo li' e non a caso in mezzo a un tempo. Ogni tempo e' uno
   span inline-block: il punto d'interruzione naturale diventa l'unico. */
.payoff span { display: inline-block; }

.site-head .payoff { margin-top: 0.3rem; }
.site-foot .payoff { margin: 0.5rem 0 1.4rem; font-size: 0.75rem; }

/* Su schermo stretto la testata e' gia' alta e appiccicata: il payoff si
   stringe di un grado prima di prendersi la seconda riga. */
@media (max-width: 46rem) {
  .site-head .payoff { font-size: 0.625rem; }
}

.logo {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: 0.14em;
  text-decoration: none;
  white-space: nowrap;
}
.logo:hover { color: var(--text-primary); }
.logo .mark {
  color: var(--accent-color);
  margin-left: 0.15em;
  display: inline-block;
  transition: transform 0.4s var(--ease), filter 0.4s var(--ease);
}
.logo:hover .mark {
  transform: translateY(-0.12em) rotate(-8deg);
  filter: drop-shadow(0 0 0.5rem var(--accent-glow));
}

/* Firma accanto al logo. Deliberatamente NON in maiuscolo come le altre
   etichette mono: il maiuscolo lo farebbe leggere come un secondo marchio,
   mentre qui deve leggersi come una persona. Porta a chi-sono.html. */
.byline {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--text-faint);
  text-decoration: none;
  white-space: nowrap;
  padding-left: 0.75rem;
  border-left: 1px solid var(--border);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.byline:hover { color: var(--text-primary); border-left-color: var(--border-strong); }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.2vw, 1.9rem);
  flex-wrap: wrap;
}

.nav a {
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--text-muted);
  padding-block: 0.35rem;
  transition: color 0.25s var(--ease);
}
/* Il sottolineato cresce da sinistra invece di comparire tutto insieme. */
.nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--border-strong);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav a:hover { color: var(--text-primary); }
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current='page'] { color: var(--text-primary); }
.nav a[aria-current='page']::after { background: var(--text-primary); transform: scaleX(1); }

/* L'ultima voce e' l'invito alla call: e' un'azione, non una pagina. */
.nav a[data-calendly] {
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  padding: 0.4rem 0.9rem;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.nav a[data-calendly]::after { display: none; }
.nav a[data-calendly]:hover {
  background: var(--text-primary);
  color: var(--bg-primary);
  border-color: var(--text-primary);
}

/* Il bottone del menu esiste solo su schermo stretto: sopra 46rem le sei voci
   stanno in riga e non c'e' niente da aprire. */
.nav-toggle {
  display: none;
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.nav-toggle:hover { border-color: var(--text-primary); }

/* Tre righe da un solo <span>: le due esterne sono pseudo-elementi di quella
   di mezzo. Cosi' la X ad apertura e' una rotazione delle stesse righe, non
   una seconda icona da tenere allineata alla prima. */
.nav-toggle-barre { position: relative; display: block; }
.nav-toggle-barre,
.nav-toggle-barre::before,
.nav-toggle-barre::after {
  width: 1.15rem;
  height: 1px;
  background: currentColor;
  transition: transform 0.3s var(--ease), background-color 0.2s var(--ease);
}
.nav-toggle-barre::before,
.nav-toggle-barre::after {
  content: '';
  position: absolute;
  left: 0;
}
.nav-toggle-barre::before { top: -0.34rem; }
.nav-toggle-barre::after  { top: 0.34rem; }
.nav-toggle[aria-expanded='true'] .nav-toggle-barre { background: transparent; }
.nav-toggle[aria-expanded='true'] .nav-toggle-barre::before { transform: translateY(0.34rem) rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle-barre::after  { transform: translateY(-0.34rem) rotate(-45deg); }

/* Con sei voci il menu non ci sta su una riga stretta: sotto 46rem si chiude
   nel bottone in alto a destra e si apre come colonna dentro la stessa barra
   appiccicata. Lo stato aperto e' la classe .is-open sulla nav, e la mette
   app.js — che parte sempre, a differenza di scena.js. */
@media (max-width: 46rem) {
  .site-head > .wrap { gap: 0.5rem 1rem; }
  .nav-toggle { display: flex; }
  .nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: 0.5rem;
  }
  .nav.is-open { display: flex; }
  .nav a {
    font-size: 0.8125rem;
    padding-block: 0.9rem;
    border-top: 1px solid var(--border);
  }
  /* Il sottolineato che cresce da sinistra qui non ha senso: non c'e' un
     puntatore, e a separare le voci ci pensa gia' la riga di bordo. */
  .nav a::after { display: none; }
  .nav a[data-calendly] {
    margin-top: 0.9rem;
    padding: 0.75rem 1rem;
    text-align: center;
  }
}

/* --- bottoni ------------------------------------------------------------- */

.btn {
  position: relative;
  display: inline-block;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--text-primary);
  background: transparent;
  border: 1px solid var(--border-strong);
  padding: 0.85rem 1.6rem;
  cursor: pointer;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
  z-index: 0;
}
/* Il riempimento sale dal basso invece di accendersi tutto insieme. */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--text-primary);
  transform: translateY(100%);
  transition: transform 0.35s var(--ease);
  z-index: -1;
}
.btn:hover,
.btn:focus-visible {
  color: var(--bg-primary);
  border-color: var(--text-primary);
}
.btn:hover::before,
.btn:focus-visible::before { transform: translateY(0); }

/* Il bottone principale della pagina: pieno d'accento, uno solo per fascia. */
.btn-primario {
  background: var(--accent-color);
  border-color: transparent;
  color: var(--bg-primary);
  font-weight: 600;
  box-shadow: 0 0 0 0 var(--accent-glow);
  transition: box-shadow 0.35s var(--ease), color 0.25s var(--ease);
}
.btn-primario::before { background: var(--text-primary); }
.btn-primario:hover,
.btn-primario:focus-visible {
  color: var(--bg-primary);
  border-color: transparent;
  box-shadow: 0 0.75rem 2.5rem -0.5rem var(--accent-glow);
}

.btn-quiet {
  border-color: transparent;
  padding-inline: 0;
  padding-block: 0.5rem;
  text-decoration: none;
  overflow: visible;
}
.btn-quiet::before { display: none; }
/* Il filo sotto il link discreto: parte corto e si allunga. */
.btn-quiet::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0.15rem;
  width: 100%;
  height: 1px;
  background: var(--border-strong);
  transform: scaleX(0.28);
  transform-origin: left;
  transition: transform 0.4s var(--ease), background-color 0.3s var(--ease);
}
.btn-quiet:hover,
.btn-quiet:focus-visible {
  background: transparent;
  color: var(--accent-color);
  border-color: transparent;
}
.btn-quiet:hover::after,
.btn-quiet:focus-visible::after { transform: scaleX(1); background: var(--accent-line); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  align-items: center;
}

/* --- tag ----------------------------------------------------------------- */

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 2rem;
  padding: 0.3rem 0.7rem;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.tag:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
  background: var(--surface);
  transform: translateY(-1px);
}
/* Tag attivo: unico riempimento in accento della piattaforma. Nessun bordo,
   cosi' la regola "bordi mai in accento" resta intatta. */
.tag[aria-pressed='true'],
.tag.is-active {
  background: var(--accent-color);
  border-color: transparent;
  color: var(--bg-primary);
  box-shadow: 0 0.35rem 1.5rem -0.4rem var(--accent-glow);
}

.tag-count { opacity: 0.55; margin-left: 0.4em; }

.filter-bar {
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 1.35rem 1.5rem;
  margin-bottom: 3rem;
}
.filter-bar .label { display: block; margin-bottom: 0.9rem; }
.filter-status {
  margin-top: 1.15rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-faint);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: center;
}
.filter-status a { color: var(--text-muted); text-decoration: none; }
.filter-status a:hover { color: var(--accent-color); }

/* Su schermo largo la barra resta appesa sotto la testata: si filtra
   scorrendo, senza risalire. */
@media (min-width: 62rem) {
  .filter-bar {
    position: sticky;
    top: calc(var(--head-h) + 1px);
    z-index: 10;
    background: rgba(22, 27, 34, 0.86);
  }
}

/* --- griglia percorsi ---------------------------------------------------- */

.grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
}

.card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  padding: 2rem 1.75rem 1.75rem;
  overflow: hidden;
  transition: border-color 0.3s var(--ease), transform 0.4s var(--ease), background-color 0.3s var(--ease);
}
/* Alone che segue il puntatore: le coordinate arrivano da scena.js. Senza JS
   resta invisibile e non manca niente. */
.card::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: radial-gradient(18rem 18rem at var(--mx, 50%) var(--my, 0%), var(--accent-veil), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
/* Tacca d'accento in alto: cresce da sinistra al passaggio. */
.card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.card:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
}
.card:hover::before { opacity: 1; }
.card:hover::after  { transform: scaleX(1); }

.card-index {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--text-faint);
  transition: color 0.3s var(--ease);
}
.card:hover .card-index { color: var(--accent-color); }

.card h3 { font-size: 1.25rem; letter-spacing: -0.015em; line-height: 1.3; }
.card h3 a { text-decoration: none; }
.card h3 a:hover { color: var(--accent-color); }
/* L'ancora del titolo copre tutta la scheda: la card resta un <article>
   semantico ma e' cliccabile per intero. I tag stanno sopra e restano
   cliccabili da soli. */
.card h3 a::after {
  content: '';
  position: absolute;
  inset: 0;
}
.card .tags, .card .card-more { position: relative; z-index: 1; }

/* Sottotitolo della scheda: stesso peso visivo nei due tipi di percorso.
   .card-quote e' la frase del cliente e prende le virgolette; .card-sub e'
   l'area di competenza della formazione e non le prende. Nient'altro cambia:
   nessuna delle due schede deve sembrare piu' concreta dell'altra. */
.card-quote,
.card-sub {
  color: var(--text-muted);
  font-size: 0.9875rem;
  margin: 0;
}
.card-quote::before { content: '\201C'; }
.card-quote::after  { content: '\201D'; }

.card-more {
  margin-top: auto;
  padding-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  transition: color 0.3s var(--ease), letter-spacing 0.3s var(--ease);
}
.card:hover .card-more { color: var(--text-primary); letter-spacing: 0.16em; }

/* Riga di contesto sotto il titolo di una sezione: dice in una frase come si
   svolge quello che l'elenco sotto sta per elencare. Non e' un occhiello e non
   e' un paragrafo di testo: sta in mezzo, e per questo resta corta. */
.section-intro {
  color: var(--text-muted);
  font-size: 0.9875rem;
  margin: 0.85rem 0 0;
  max-width: 46ch;
}

/* Riga compatta di percorso: stessa gerarchia della scheda piena, senza
   riquadro e senza tag. */
.mini {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  border-top: 1px solid var(--border);
}
.mini > li { border-bottom: 1px solid var(--border); }

.mini-row {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: 0.15rem 0.75rem;
  padding: 1.1rem 2rem 1.1rem 0;
  text-decoration: none;
  transition: padding-left 0.35s var(--ease), background-color 0.35s var(--ease);
}
/* Barra d'accento che entra da sinistra e spinge la riga: il filtro visivo
   del passaggio, senza cambiare colore al testo. */
.mini-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent-color);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.35s var(--ease);
}
/* La freccia compare a destra solo quando serve. */
.mini-row::after {
  content: '\2192';
  position: absolute;
  right: 0.35rem;
  top: 1.15rem;
  font-family: var(--font-mono);
  color: var(--accent-color);
  opacity: 0;
  transform: translateX(-0.5rem);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.mini-row:hover { padding-left: 1rem; background: var(--surface); }
.mini-row:hover::before { transform: scaleY(1); }
.mini-row:hover::after  { opacity: 1; transform: translateX(0); }

.mini-row > .card-index {
  grid-row: 1;
  padding-top: 0.15em;
  font-size: 0.875rem;
  font-weight: 600;
}
.mini-row > .mini-titolo,
.mini-row > .card-quote,
.mini-row > .card-sub { grid-column: 2; }

.mini-titolo {
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.015em;
  transition: color 0.25s var(--ease);
}
.mini-row > .card-quote,
.mini-row > .card-sub { font-size: 0.875rem; line-height: 1.55; }

.mini-row:hover .mini-titolo { color: var(--accent-color); }
.mini-row:hover .card-index  { color: var(--text-muted); }

/* --- elenco contenuti ---------------------------------------------------- */

.feed { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }

.feed-item {
  border-bottom: 1px solid var(--border);
  padding: 2rem 0;
  display: grid;
  gap: 0.75rem 2rem;
  grid-template-columns: 1fr;
  position: relative;
  transition: padding-left 0.35s var(--ease), background-color 0.35s var(--ease);
}
.feed-item:hover { background: var(--surface); padding-left: 1.25rem; }
@media (min-width: 48rem) {
  .feed-item { grid-template-columns: 9rem 1fr; }
  .feed-meta { grid-row: span 3; }
}

.feed-meta { display: flex; flex-direction: column; gap: 0.35rem; }
.feed-item h3 { font-size: 1.125rem; }
.feed-item p  { color: var(--text-muted); font-size: 0.9875rem; max-width: var(--measure); margin: 0; }

/* --- scheda percorso (dettaglio) ----------------------------------------- */

/* Barra di lettura in cima: quanto manca alla fine della scheda.
   La larghezza la scrive scena.js. */
.progresso {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: var(--p, 0%);
  background: var(--accent-color);
  z-index: 30;
  transition: width 0.1s linear;
  box-shadow: 0 0 1rem var(--accent-glow);
}

.detail-head {
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 3.5rem);
  position: relative;
}
.detail-head h1 { max-width: 20ch; }
.detail-quote,
.detail-sub {
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  color: var(--text-muted);
  max-width: var(--measure);
  margin: 1.5rem 0 2rem;
  line-height: 1.55;
}
.detail-quote {
  border-left: 2px solid var(--border);
  padding-left: 1.5rem;
  font-style: italic;
}
.detail-quote::before { content: '\201C'; }
.detail-quote::after  { content: '\201D'; }

.sezioni { border-top: 1px solid var(--border); counter-reset: sez; }

.sezione {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem 3rem;
  padding-block: 2.5rem;
  border-bottom: 1px solid var(--border);
  position: relative;
  counter-increment: sez;
  transition: background-color 0.35s var(--ease);
}
.sezione:hover { background: var(--surface); }
@media (min-width: 52rem) {
  .sezione { grid-template-columns: 14rem 1fr; }
  /* L'etichetta resta appesa mentre si legge il testo lungo accanto. */
  .sezione > .label {
    position: sticky;
    top: calc(var(--head-h) + 2rem);
    align-self: start;
  }
}
.sezione > .label {
  padding-top: 0.35em;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  color: var(--text-muted);
}
/* Numero progressivo della sezione, generato dal contatore: nessun testo
   nuovo, solo la posizione resa visibile. */
.sezione > .label::before {
  content: counter(sez, decimal-leading-zero);
  color: var(--accent-color);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
}
.sezione p {
  max-width: var(--measure);
  font-size: 1.0625rem;
}

.crumb {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  padding-top: 2rem;
}
.crumb a { color: var(--text-faint); text-decoration: none; }
.crumb a:hover { color: var(--accent-color); }

.pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 3rem;
}
.pager a {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  text-decoration: none;
  max-width: 22rem;
  border: 1px solid var(--border);
  padding: 1.1rem 1.4rem;
  background: var(--surface);
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.pager a:hover {
  color: var(--accent-color);
  border-color: var(--border-strong);
  background: var(--surface-hi);
  transform: translateY(-2px);
}
.pager .label { display: block; margin-bottom: 0.4rem; }

/* --- blocchi di contenuto vari ------------------------------------------- */

.cols {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.block {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--border);
  padding: 2rem 1.75rem;
  background: var(--bg-secondary);
  overflow: hidden;
  transition: border-color 0.3s var(--ease), transform 0.4s var(--ease);
}
/* Il numero del blocco, ingigantito e quasi spento, come una filigrana. */
.block > .label:first-child {
  position: absolute;
  right: 0.5rem;
  bottom: -1.5rem;
  font-size: 6.5rem;
  line-height: 1;
  font-weight: 600;
  color: var(--text-primary);
  opacity: 0.05;
  letter-spacing: -0.04em;
  z-index: -1;
  transition: opacity 0.4s var(--ease), color 0.4s var(--ease);
}
.block:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.block:hover > .label:first-child { opacity: 0.16; color: var(--accent-color); }
.block h3 { margin: 0 0 0.75rem; font-size: 1.1875rem; }
.block p { color: var(--text-muted); font-size: 0.9875rem; margin: 0; }

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 52rem) {
  .split { grid-template-columns: 1fr 20rem; }
}

/* Lo specchio: colonna stretta a sinistra, testo a destra. Serve a chi-sono,
   che altrimenti ripeterebbe l'impaginazione dell'ingresso in home — stessa
   pagina due volte. Si sposta solo la colonna: nel documento il testo resta
   primo, quindi l'ordine di lettura e l'impilamento su telefono non cambiano.
   Sotto i 52rem non c'e' niente da invertire, c'e' una colonna sola. */
@media (min-width: 52rem) {
  .split-invertita { grid-template-columns: 20rem 1fr; }
  .split-invertita > * { grid-row: 1; }
  .split-invertita > figure { grid-column: 1; }
  .split-invertita > div { grid-column: 2; }
}

/* --- ritratto ------------------------------------------------------------- */

/* UNICA ECCEZIONE alla regola sulle immagini: la foto della persona non e'
   trattata. Niente grigio, niente velo d'accento — colori suoi.
   I fondali restano dentro la tavolozza perche' sono ambiente; questa e' una
   faccia, e una faccia in duotone sembra un'altra persona. Se qui torna un
   filtro, e' un errore. */
.ritratto {
  position: relative;
  isolation: isolate;
  display: block;
  margin: 0;
  width: 100%;
  max-width: min(20rem, 100%);
  border: 1px solid var(--border);
}

.portrait {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 62% 22%;
  display: block;
  transition: transform 0.8s var(--ease);
}
.ritratto:hover .portrait { transform: scale(1.02); }

/* Squadre agli angoli: due righe d'accento, il segno di un disegno tecnico.
   Stanno fuori dall'immagine, quindi non la coprono. */
.ritratto-cornice { position: relative; display: block; }
.ritratto-cornice::before,
.ritratto-cornice::after {
  content: '';
  position: absolute;
  width: 2.5rem;
  height: 2.5rem;
  pointer-events: none;
}
.ritratto-cornice::before {
  top: -0.6rem; left: -0.6rem;
  border-top: 1px solid var(--accent-line);
  border-left: 1px solid var(--accent-line);
}
.ritratto-cornice::after {
  bottom: -0.6rem; right: -0.6rem;
  border-bottom: 1px solid var(--accent-line);
  border-right: 1px solid var(--accent-line);
}

/* Ritratto di chi-sono: una striscia verticale, appesa mentre si legge il
   testo accanto — la persona non deve uscire di scena a meta' pagina.

   L'inquadratura la decide la FORMA del riquadro, non object-position: con
   object-fit: cover la frazione di larghezza che si vede e' esattamente
   (forma del riquadro) / (forma della foto). La foto e' 1280x1706, e se ne
   vuole la meta' centrale: 640x1706 — da cui aspect-ratio: 640/1706. Cosi'
   l'altezza si vede tutta e il taglio e' solo laterale, meta' per parte, con
   object-position al centro. Cambiare quel rapporto cambia quanta larghezza
   entra: piu' basso il riquadro, piu' foto si vede.

   height: auto NON e' di troppo, e' la riga che fa funzionare tutto il
   resto. L'<img> porta height="1706" come attributo, che vale come regola
   d'autore debole ma vale: senza, l'altezza resta 1706px, aspect-ratio non
   decide niente e cover mostra un quarto scarso della larghezza. E' la
   stessa trappola annotata piu' sotto nella fascia d'ingresso su telefono.

   Il rapporto pero' non e' lo stesso alle due larghezze, ed e' voluto. Su
   telefono la foto prende tutta la riga: tenere li' la meta' centrale
   vorrebbe dire un riquadro alto 2,7 volte la sua larghezza — due schermi e
   mezzo di foto sola. Il taglio laterale serve quando la colonna e' stretta
   (20rem) e senza la persona sarebbe un francobollo; a tutta larghezza non
   serve piu', quindi entra la foto intera in un 4/5 — sempre verticale, alto
   un quarto piu' della larghezza, con una limatura sopra e sotto (il 6%) per
   arrivarci. Il 640/1706 torna dai 52rem, dove ricompare la colonna. */
.chi-ritratto { margin: 0; }
.chi-ritratto .ritratto { max-width: none; }
.chi-ritratto .portrait {
  aspect-ratio: 4 / 5;
  height: auto;
  object-position: 50% 50%;
}
@media (min-width: 52rem) {
  .chi-ritratto { position: sticky; top: calc(var(--head-h) + 2.5rem); }
  .chi-ritratto .portrait { aspect-ratio: 640 / 1706; }
}

.persona-grande { font-size: 1.25rem; margin: 1.1rem 0 0; }
.split > div > h1 { margin-top: 1.25rem; }
.split .prose { margin-top: 1.75rem; }
.split .btn-row { margin-top: 2.25rem; }

/* --- home: fascia d'ingresso ---------------------------------------------- */

.hero {
  padding-block: clamp(3.5rem, 8vw, 7rem) clamp(4rem, 9vw, 8rem);
  border-bottom: 1px solid var(--border);
  --img-mask: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, #000 45%, transparent 97%);
  --img-opacity: 0.3;
}

.hero-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center;
}
@media (min-width: 58rem) {
  .hero-wrap { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}

.hero h1 {
  margin-top: 1.5rem;
  max-width: 15ch;
}
/* La coda del titolo prende l'accento: e' l'unica parola colorata della
   pagina, e dice di cosa si parla. */
.hero h1 .accent { color: var(--accent-color); }

.hero-testo > .prose { margin-top: 2rem; }
.hero-testo .btn-row { margin-top: 2.75rem; }

/* Il ritratto in ingresso: piu' grande, con la cornice tecnica e un alone
   d'accento dietro che lo stacca dal fondo. */
.hero-ritratto {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 24rem;
}
.hero-ritratto .ritratto { max-width: none; }
.hero-ritratto .portrait { aspect-ratio: 5 / 6; }
.hero-ritratto::before {
  content: '';
  position: absolute;
  inset: -12%;
  background: radial-gradient(closest-side, var(--accent-glow), transparent 72%);
  z-index: -1;
  filter: blur(1rem);
}
/* Riga d'accento che scorre una volta sull'immagine appena la pagina apre:
   un movimento solo, poi sparisce. */
.hero-ritratto .ritratto::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 35%;
  z-index: 2;
  background: linear-gradient(180deg, transparent, var(--accent-veil) 60%, var(--accent-line));
  opacity: 0;
  pointer-events: none;
}
.motion .hero-ritratto .ritratto::before {
  animation: scansione 2.2s var(--ease) 0.4s 1;
}
@keyframes scansione {
  0%   { opacity: 0;    transform: translateY(-120%); }
  15%  { opacity: 0.85; }
  85%  { opacity: 0.85; }
  100% { opacity: 0;    transform: translateY(300%); }
}

/* Sotto 58rem la fascia si impila, e su una colonna sola le due cose cambiano
   ruolo: il ritratto sale sopra il titolo — la faccia e' la prima cosa che si
   vede — e si taglia alla testa, una fascia larga invece di una colonna alta,
   se no da sola riempie lo schermo prima che si legga una parola.
   Il taglio ingrandisce, non deforma: le proporzioni le tiene sempre
   object-fit: cover, la fascia la decide aspect-ratio, e l'immagine piu' larga
   del suo contenitore serve solo a spostare l'inquadratura sulla persona e a
   lasciare fuori il monitor a sinistra. Se qui compare uno height fisso senza
   aspect-ratio, la foto si schiaccia: non e' la strada. */
@media (max-width: 57.99rem) {
  .hero-ritratto {
    order: -1;
    /* Piu' larga che in colonna (24rem), ma con un tetto: su telefono la
       fascia occupa tutta la riga, su tablet stretto non diventa un manifesto
       che si mangia lo schermo prima del titolo. */
    max-width: 30rem;
  }
  /* L'alone resta dentro i fianchi: a tutta larghezza sbordava dallo schermo. */
  .hero-ritratto::before { inset: -8% 0; }
  .hero-ritratto .ritratto { overflow: hidden; }
  .hero-ritratto .portrait {
    /* height: auto NON e' di troppo. L'<img> porta height="739" come
       attributo, che vale come regola d'autore debole ma vale: senza questa
       riga l'altezza resta 739px e aspect-ratio non decide niente. */
    aspect-ratio: 16 / 9;
    height: auto;
    width: 132%;
    max-width: none;
    margin-left: -24%;
    object-position: 50% 0;
  }
}

/* --- deflist / FAQ -------------------------------------------------------- */

.deflist { margin: 0; }
.deflist dt {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-top: 2rem;
  margin-top: 2rem;
  border-top: 1px solid var(--border);
}
.deflist dt:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.deflist dd { margin: 0.7rem 0 0; color: var(--text-muted); max-width: var(--measure); }

/* Su schermo largo termine e definizione si affiancano: la riga di bordo
   attraversa tutta la pagina invece di fermarsi a meta'. E' lo stesso
   reticolo delle sezioni, non un elemento nuovo. */
@media (min-width: 62rem) {
  .deflist {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
    column-gap: 4rem;
  }
  .deflist dt,
  .deflist dd {
    border-top: 1px solid var(--border);
    padding-top: 2rem;
    margin-top: 0;
    padding-bottom: 2rem;
  }
  .deflist dt:first-child,
  .deflist dt:first-child + dd {
    border-top: 0;
    padding-top: 0;
  }
  .deflist dd { max-width: none; }
}

/* Variante domanda/risposta: stesso reticolo, ma il dt e' una frase intera —
   il maiuscolo delle etichette a quella lunghezza diventa illeggibile. */
.deflist.faq { counter-reset: faq; }
.deflist.faq dt {
  text-transform: none;
  letter-spacing: -0.015em;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  max-width: var(--measure);
  counter-increment: faq;
  display: flex;
  gap: 1rem;
  align-items: baseline;
}
/* Numero della domanda: contatore, non testo. */
.deflist.faq dt::before {
  content: counter(faq, decimal-leading-zero);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--accent-color);
  flex: none;
}
@media (min-width: 52rem) and (max-width: 61.99rem) {
  .deflist.faq dd { margin-left: 2.5rem; }
}

/* --- richiamo alla call --------------------------------------------------- */

.call {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--border);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2rem;
  background: var(--bg-secondary);
  overflow: hidden;
}
/* Alone d'accento nell'angolo: e' l'ultima cosa della pagina, puo' scaldarsi
   un po' piu' del resto. */
.call::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(28rem 20rem at 100% 0%, var(--accent-veil), transparent 70%);
}
.call p { color: var(--text-muted); max-width: 44ch; margin: 0; }
.call > div:not(.call-chi) { flex: 1 1 22rem; }
.call .btn { flex: none; }

/* La faccia accanto all'invito: con chi si parla, non un pulsante astratto. */
.call-chi {
  flex: none;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  border: 1px solid var(--border-strong);
}
.call-chi img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 20%;
  display: block;
  transition: transform 0.4s var(--ease);
}
.call:hover .call-chi img { transform: scale(1.06); }

/* --- fondo pagina --------------------------------------------------------- */

.site-foot {
  border-top: 1px solid var(--border);
  padding-block: 4rem 3rem;
  font-size: 0.875rem;
  color: var(--text-faint);
  background: linear-gradient(180deg, transparent, rgba(22, 27, 34, 0.6));
}
.site-foot .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3rem;
  justify-content: space-between;
  align-items: flex-start;
}
/* Il nome a piena intensita': nel footer e' l'unico elemento che deve
   staccare dal grigio, perche' e' la risposta a "chi c'e' dietro". */
.persona {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-primary);
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}

.site-foot nav { display: flex; flex-direction: column; gap: 0.6rem; }
.site-foot a { color: var(--text-muted); text-decoration: none; font-size: 0.875rem; }
.site-foot a:hover { color: var(--accent-color); }

.empty {
  border: 1px dashed var(--border-strong);
  padding: 3rem;
  text-align: center;
  color: var(--text-muted);
  background: var(--surface);
}

/* --- comparse ------------------------------------------------------------- */

/* Gli elementi entrano dal basso quando arrivano in vista. La classe .motion
   la mette uno script in testa: senza JS, o con "riduci movimento", non
   viene mai nascosto niente. */
.motion [data-reveal],
.motion .card,
.motion .block,
.motion .mini > li,
.motion .feed-item,
.motion .sezione {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.motion .is-in {
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  [data-reveal], .card, .block, .mini > li, .feed-item, .sezione {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Fotografie di sfondo: Unsplash (licenza Unsplash).
   sfondo-ufficio  photo-1541746972996-4e0b0f43e02a
   sfondo-tavolo   photo-1517048676732-d65bc937f952
   sfondo-aula     photo-1524178232363-1fb2b075b655
   sfondo-lavagna  photo-1532622785990-d2c36a76f5a6
   sfondo-officina photo-1700727448686-b314cb5f9948 */