/* Regisco - pagina di presentazione
   Livrea identica al prodotto: token in chiaro, ridefiniti in scuro.
   Nessun font remoto, nessuna CDN: la cartella deve bastare a se stessa. */

/* ---------- Token: chiaro ---------- */
:root {
  color-scheme: light dark;

  --sfondo:       #F2F2F7;
  --superficie:   #FFFFFF;
  --superficie-2: #FAFAFD;
  --testo:        #17161F;
  --testo-tenue:  #66647A;
  --linea:        #DEDCE8;
  --linea-tenue:  #EBEAF2;

  --accento:      #4A3FC7;
  --accento-fondo:#EDEBFB;
  --su-accento:   #FFFFFF;

  --ass: #BF2A1D;  --ass-fondo: #FBEBE9;
  --rit: #96600A;  --rit-fondo: #FAF1DF;
  --usc: #0D6F76;  --usc-fondo: #E3F2F2;

  --ombra: 0 1px 2px rgba(23, 22, 31, .06), 0 8px 24px -16px rgba(23, 22, 31, .28);
  --ombra-alta: 0 2px 4px rgba(23, 22, 31, .06), 0 24px 60px -30px rgba(23, 22, 31, .42);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", sans-serif;
  --mono: "Cascadia Mono", Consolas, "SF Mono", ui-monospace, "Roboto Mono", monospace;

  --r: 8px;
  --r-grande: 14px;

  /* Le fasce vanno da bordo a bordo: non c'e' una colonna centrale, c'e' un
     margine di rispetto che cresce con la finestra. Il limite di leggibilita'
     sta sul singolo blocco di testo (max-width in ch), mai sulla pagina. */
  --margine: clamp(16px, 4vw, 104px);
  --vuoto: clamp(28px, 3.6vw, 80px);
}

/* ---------- Token: scuro ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --sfondo:       #111017;
    --superficie:   #1B1A24;
    --superficie-2: #201F2B;
    --testo:        #EAE9F2;
    --testo-tenue:  #9895AC;
    --linea:        #2F2D3D;
    --linea-tenue:  #262433;

    --accento:      #A79CFF;
    --accento-fondo:#241F42;
    --su-accento:   #14121F;

    --ass: #FF8E80;  --ass-fondo: #3A1E1A;
    --rit: #EFB457;  --rit-fondo: #362810;
    --usc: #4FC9CE;  --usc-fondo: #0F2F30;

    --ombra: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px -16px rgba(0, 0, 0, .9);
    --ombra-alta: 0 2px 4px rgba(0, 0, 0, .5), 0 24px 60px -30px rgba(0, 0, 0, 1);
  }
}

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

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

body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: var(--accento); }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--accento);
  outline-offset: 3px;
  border-radius: 4px;
}

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.salta {
  position: absolute;
  inset-inline-start: 12px;
  top: -60px;
  z-index: 100;
  background: var(--accento);
  color: var(--su-accento);
  padding: 10px 16px;
  border-radius: var(--r);
  text-decoration: none;
  font-weight: 600;
}
.salta:focus { top: 12px; }

.colonna {
  width: 100%;
  padding-inline: var(--margine);
}

.sezione { padding-block: clamp(48px, 6vw, 128px); }
.sezione-fondo { background: var(--superficie); border-block: 1px solid var(--linea); }

.occhiello {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--testo-tenue);
  margin-bottom: 14px;
}

h2 {
  font-size: clamp(26px, 3.4vw, 56px);
  font-weight: 800;
  letter-spacing: -.032em;
  line-height: 1.08;
  max-width: 20ch;
}

h3 {
  font-size: clamp(17px, 1.05vw, 21px);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.3;
}

.sottotitolo {
  margin-top: 16px;
  max-width: 62ch;
  font-size: clamp(16px, 1.1vw, 21px);
  color: var(--testo-tenue);
}

/* ---------- Intestazione di fascia ----------
   Sotto i 1100px resta impilata. Sopra, il titolo e il sottotitolo si
   affiancano: e' cosi' che la larghezza si usa senza stirare le righe. */
.intestazione { display: grid; }
@media (min-width: 1100px) {
  .intestazione {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    column-gap: var(--vuoto);
    align-items: end;
  }
  .intestazione .occhiello { grid-column: 1; grid-row: 1; }
  .intestazione h2 { grid-column: 1; grid-row: 2; }
  .intestazione .sottotitolo {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
    max-width: 66ch;
  }
}

/* ---------- Testata ---------- */
.testata {
  background: var(--superficie);
  border-bottom: 1px solid var(--linea);
}
.testata .colonna {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 62px;
  padding-block: clamp(12px, 1vw, 20px);
}
.marchio { display: block; height: clamp(30px, 1.9vw, 42px); width: auto; }
.marchio-scuro { display: none; }
@media (prefers-color-scheme: dark) {
  .marchio-chiaro { display: none; }
  .marchio-scuro { display: block; }
}
.pastiglia-stato {
  margin-inline-start: auto;
  font-size: clamp(12px, .8vw, 15px);
  font-weight: 600;
  color: var(--testo-tenue);
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 4px 12px;
}

/* ---------- Apertura ---------- */
.apertura {
  position: relative;
  overflow: hidden;
  background: var(--superficie);
  border-bottom: 1px solid var(--linea);
  padding-block: clamp(52px, 9vw, 108px);
}
/* La casella del registro: motivo del marchio, puramente decorativo. */
.apertura::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--linea-tenue) 1px, transparent 1px),
    linear-gradient(to bottom, var(--linea-tenue) 1px, transparent 1px);
  background-size: clamp(64px, 4.4vw, 88px) clamp(64px, 4.4vw, 88px);
  background-position: center top;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .85), transparent 78%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .85), transparent 78%);
}
.apertura .colonna { position: relative; }

/* Il simbolo grande: una casella del registro, in scala, che ancora la pagina.
   Decorativo - il nome del marchio e' gia' nella testata. */
.cellette { display: none; }

h1 {
  font-size: clamp(34px, 5.4vw, 104px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.02;
  max-width: 15ch;
}
h1 .indaco { color: var(--accento); }

.apertura-testo {
  margin-top: 22px;
  max-width: 60ch;
  font-size: clamp(17px, 1.35vw, 24px);
  line-height: 1.5;
  color: var(--testo-tenue);
}

/* Da 1280px in su l'apertura diventa un'apertura a tutto schermo:
   il titolo attraversa la fascia, e sotto una riga a tre - testo, invito,
   motivo - occupa la larghezza invece di lasciarla vuota. */
@media (min-width: 1280px) {
  .apertura .colonna {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    column-gap: var(--vuoto);
    align-items: center;
  }
  h1 {
    grid-column: 1 / -1;
    max-width: none;
    margin-bottom: clamp(24px, 2.4vw, 48px);
  }
  .apertura-testo { margin-top: 0; max-width: 48ch; }
  .apertura-invito { grid-column: 2; }
  .quattro-etichette { margin-top: 0; }
  .cellette {
    display: grid;
    grid-column: 3;
    grid-template-columns: repeat(5, clamp(56px, 4.2vw, 96px));
    grid-auto-rows: clamp(56px, 4.2vw, 96px);
  }
  .cellette span {
    border: 1px solid var(--linea);
    margin: -1px 0 0 -1px;
  }
  .cellette .tenue { background: var(--accento-fondo); }
  .cellette .accesa { background: var(--accento); border-color: var(--accento); }
}
.apertura-testo strong { color: var(--testo); font-weight: 650; }

.quattro-etichette {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}
.quattro-etichette li {
  font-size: 13px;
  font-weight: 600;
  color: var(--accento);
  background: var(--accento-fondo);
  border-radius: 999px;
  padding: 6px 14px;
}

.azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-top: 32px;
}
.bottone {
  display: inline-block;
  background: var(--accento);
  color: var(--su-accento);
  text-decoration: none;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -.01em;
  padding: 13px 24px;
  border-radius: var(--r);
  border: 1px solid var(--accento);
}
.bottone:hover { filter: brightness(1.08); }
.nota-azione { font-size: 14px; color: var(--testo-tenue); max-width: 34ch; }

/* ---------- Griglia di schede ---------- */
/* Sei schede: 1, 2, 3 o tutte e sei in fila. Mai un numero di colonne che
   lasci l'ultima riga spaiata. */
.griglia-schede {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 1.2vw, 24px);
  margin-top: clamp(40px, 3vw, 64px);
}
@media (min-width: 640px)  { .griglia-schede { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .griglia-schede { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 2000px) { .griglia-schede { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.scheda {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r-grande);
  padding: clamp(22px, 1.5vw, 30px);
  box-shadow: var(--ombra);
}
.sezione-fondo .scheda { background: var(--superficie-2); }
.scheda p { margin-top: 10px; font-size: clamp(15px, .95vw, 17px); color: var(--testo-tenue); }
.scheda p strong { color: var(--testo); font-weight: 650; }

/* ---------- I quattro adempimenti ---------- */
.adempimenti {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 1.3vw, 26px);
  margin-top: clamp(40px, 3vw, 64px);
}
@media (min-width: 760px)  { .adempimenti { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .adempimenti { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.adempimento {
  position: relative;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r-grande);
  padding: clamp(24px, 1.6vw, 34px) clamp(22px, 1.5vw, 30px) clamp(22px, 1.5vw, 30px);
  box-shadow: var(--ombra);
}
.sezione-fondo .adempimento { background: var(--superficie-2); }
.adempimento .conta {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--accento);
  background: var(--accento-fondo);
  border-radius: 6px;
  padding: 3px 8px;
  display: inline-block;
  margin-bottom: 12px;
}
.adempimento dl { margin-top: 14px; display: grid; gap: 12px; }
.adempimento dt {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--testo-tenue);
  margin-bottom: 3px;
}
.adempimento dd { font-size: clamp(15px, .95vw, 17px); }
.adempimento dd.tenue { color: var(--testo-tenue); }

/* La postilla e' una nota lunga: a tutto schermo si spezza in colonne
   invece di diventare una riga da 2000px o un blocco solo a sinistra. */
.postilla {
  margin-top: clamp(28px, 2.4vw, 48px);
  font-size: clamp(14px, .9vw, 16px);
  color: var(--testo-tenue);
  max-width: 78ch;
  border-inline-start: 3px solid var(--linea);
  padding-inline-start: 16px;
}
@media (min-width: 1400px) {
  .postilla { max-width: 108ch; column-count: 2; column-gap: var(--vuoto); }
}

/* ---------- Figure: le schermate disegnate ----------
   Sono la parte che convince: prendono tutta la larghezza che resta dopo il
   testo che le accompagna, e il testo si affianca invece di stare sopra. */
.schermate { margin-top: clamp(44px, 3vw, 64px); }
.schermata + .schermata { margin-top: clamp(44px, 5vw, 104px); }

.schermata-doppia,
.schermata-lezione,
.schermata-telefono {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}
.schermata-telefono { gap: 28px; }
@media (min-width: 1024px) {
  /* La giornata: disegno a sinistra, spiegazione a destra. Il disegno smette
     di crescere a 1150px, oltre i quali le righe dell'orario si stirerebbero
     invece di leggersi meglio. */
  .schermata-doppia { grid-template-columns: minmax(0, 1150px) minmax(320px, 1fr); gap: var(--vuoto); }
  /* La lezione, il disegno piu' ricco, prende la fetta piu' larga. */
  .schermata-lezione { grid-template-columns: minmax(300px, .85fr) minmax(0, 2.6fr); gap: var(--vuoto); }
  .schermata-lezione .schermata-figura-sotto { margin-top: 0; }
  /* Le famiglie: il telefono in vetrina a sinistra, il testo a destra. */
  .schermata-telefono { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--vuoto); }
}
@media (min-width: 1900px) {
  /* Oltre questa misura la vetrina non deve crescere ancora: il telefono
     resterebbe una macchia in mezzo al vuoto. Cresce il testo accanto. */
  .schermata-telefono { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); }
}

.schermata-testo p {
  margin-top: 10px;
  font-size: clamp(15.5px, 1vw, 18px);
  color: var(--testo-tenue);
  max-width: 46ch;
}
.schermata-testo.largo, .schermata-testo.largo p { max-width: 64ch; }
.schermata-figura-sotto { margin-top: 20px; }
.schermata-testo p strong { color: var(--testo); font-weight: 650; }

/* Oltre i 1800px la colonna di testo che sta accanto a un disegno e' larga
   abbastanza da spezzarsi in due: e' il modo di riempirla senza allungare le
   righe. La lezione resta a una colonna: la sua e' gia' una guida stretta. */
@media (min-width: 1800px) {
  .schermata-doppia .schermata-testo,
  .schermata-telefono .schermata-testo {
    columns: 2;
    column-gap: clamp(28px, 2.2vw, 52px);
  }
  .schermata-doppia .schermata-testo h3,
  .schermata-telefono .schermata-testo h3 { column-span: all; }
  .schermata-doppia .schermata-testo p,
  .schermata-telefono .schermata-testo p { max-width: none; }
}

/* La vetrina del telefono: il disegno e' stretto per natura, quindi invece di
   lasciargli intorno il vuoto gli si mette sotto un piano. */
.vetrina { display: block; }
@media (min-width: 1024px) {
  .vetrina {
    background: var(--superficie-2);
    border: 1px solid var(--linea);
    border-radius: var(--r-grande);
    padding: clamp(28px, 2.6vw, 64px) clamp(16px, 2vw, 48px);
  }
}

figure.finta { margin: 0; }
figure.finta figcaption {
  margin-top: 12px;
  font-size: 13px;
  color: var(--testo-tenue);
}

.telaio {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r-grande);
  box-shadow: var(--ombra-alta);
  overflow: hidden;
  max-width: 100%;
}

/* barra applicativa dentro il disegno */
.f-barra {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--linea);
  background: var(--superficie);
  font-size: 12.5px;
}
.f-marchio { font-weight: 800; font-size: 14px; letter-spacing: -.02em; }
.f-marchio span { color: var(--accento); }
.f-ruolo {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--testo-tenue);
  border: 1px solid var(--linea);
  border-radius: 4px;
  padding: 2px 6px;
}
.f-chi { margin-inline-start: auto; color: var(--testo-tenue); font-size: 12px; }

.f-corpo { padding: 16px 16px 18px; background: var(--sfondo); }
.f-corpo.nudo { padding: 0; }
.f-corpo.nudo .f-testata-lezione { padding: 16px 14px 12px; }
@media (prefers-color-scheme: dark) { .f-corpo { background: #16151E; } }

.f-occhiello {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}
.f-titolo {
  font-size: clamp(19px, 2.4vw, 25px);
  font-weight: 800;
  letter-spacing: -.028em;
  line-height: 1.1;
  margin-top: 4px;
}

.f-riquadro {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  margin-top: 14px;
  overflow: hidden;
}
.f-riquadro.pieno {
  margin-top: 0;
  border-radius: 0;
  border-inline: 0;
  border-bottom: 0;
}
.f-riquadro-testa {
  padding: 10px 14px;
  border-bottom: 1px solid var(--linea-tenue);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

/* --- disegno 1: la giornata --- */
.f-ore { padding: 4px 8px 8px; }
.f-ora {
  display: grid;
  grid-template-columns: 26px 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 6px;
  border-radius: 6px;
  font-size: 13.5px;
}
/* Sotto i 340px la colonna della classe verrebbe schiacciata a zero dallo
   stato: «3ª B» sparirebbe proprio dalla riga dell'ora in corso. Lo stato
   scende su una riga sua. */
@media (max-width: 340px) {
  .f-ora { grid-template-columns: 22px 44px minmax(0, 1fr); gap: 4px 8px; }
  .f-ora .s { grid-column: 1 / -1; text-align: start; padding-inline-start: 30px; }
}
.f-ora + .f-ora { border-top: 1px solid var(--linea-tenue); }
.f-ora .n, .f-ora .t { font-family: var(--mono); font-size: 11.5px; color: var(--testo-tenue); font-variant-numeric: tabular-nums; }
.f-ora .c { font-weight: 650; letter-spacing: -.01em; }
.f-ora .s { font-size: 11.5px; color: var(--testo-tenue); text-align: end; }
.f-ora.libera .c { font-weight: 400; font-style: italic; color: var(--testo-tenue); }
.f-ora.adesso {
  background: var(--accento-fondo);
  border-top-color: transparent;
}
.f-ora.adesso .n, .f-ora.adesso .t, .f-ora.adesso .c { color: var(--accento); }
.f-ora.adesso .s { color: var(--accento); font-weight: 700; }
.f-pausa {
  font-size: 11px;
  color: var(--testo-tenue);
  padding: 6px 6px 6px 42px;
  border-top: 1px solid var(--linea-tenue);
}

/* --- disegno 2: la lezione in corso --- */
.f-lezione { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; }
.f-classe { font-size: clamp(24px, 3.4vw, 34px); font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.f-materia { font-size: 15px; color: var(--testo-tenue); }
.f-vivo {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accento);
  background: var(--accento-fondo);
  border-radius: 999px;
  padding: 4px 10px;
}
.f-vivo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accento); }
.f-dati {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--testo-tenue);
}
.f-dati b { color: var(--testo); font-weight: 650; }

.f-conteggio {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  padding: 12px 14px;
  font-size: 12.5px;
  color: var(--testo-tenue);
}
.f-conteggio b {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 19px;
  font-weight: 700;
  color: var(--testo);
  letter-spacing: -.02em;
  margin-inline-end: 3px;
}
.f-conteggio .c-ass b { color: var(--ass); }
.f-conteggio .c-rit b { color: var(--rit); }
.f-finto-comando {
  margin-inline-start: auto;
  border: 1px solid var(--linea);
  border-radius: 6px;
  padding: 5px 11px;
  font-size: 12.5px;
  color: var(--testo-tenue);
}

.f-appello {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 7px;
  padding: 0 14px 14px;
}
/* Dodici studenti: quattro per riga o sei per riga, mai una riga spaiata. */
@media (min-width: 1024px) { .f-appello { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1500px) { .f-appello { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; } }
.f-alunno {
  background: var(--superficie-2);
  border: 1px solid var(--linea-tenue);
  border-radius: var(--r);
  padding: 9px 9px 7px;
}
.f-alunno .riga { display: flex; gap: 8px; align-items: flex-start; }
.f-alunno .n {
  flex: none;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 5px;
  background: var(--superficie);
  border: 1px solid var(--linea);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--testo-tenue);
}
.f-alunno .nome { font-size: 13px; font-weight: 650; letter-spacing: -.01em; line-height: 1.2; min-width: 0; }
.f-alunno .nome span { display: block; font-weight: 400; font-size: 11.5px; color: var(--testo-tenue); }
.f-alunno .stato {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 650;
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--superficie);
  border: 1px solid var(--linea);
  color: var(--testo-tenue);
}
.f-alunno.assente { background: var(--ass-fondo); border-color: var(--ass); }
.f-alunno.assente .nome { color: var(--ass); }
.f-alunno.assente .n { color: var(--ass); border-color: var(--ass); }
.f-alunno.assente .stato { background: var(--ass); border-color: var(--ass); color: var(--su-accento); }
.f-alunno.ritardo { background: var(--rit-fondo); border-color: var(--rit); }
.f-alunno.ritardo .n { color: var(--rit); border-color: var(--rit); }
.f-alunno.ritardo .stato { background: var(--rit); border-color: var(--rit); color: var(--su-accento); }

.f-firma {
  border-top: 1px solid var(--linea-tenue);
  padding: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
}
.f-campo { flex: 1 1 220px; min-width: 0; }
.f-campo .etichetta { display: block; font-size: 11.5px; font-weight: 650; color: var(--testo-tenue); margin-bottom: 5px; }
.f-campo .valore {
  display: block;
  background: var(--superficie-2);
  border: 1px solid var(--linea);
  border-radius: 6px;
  padding: 9px 10px;
  font-size: 13.5px;
}
.f-finto-bottone {
  background: var(--accento);
  color: var(--su-accento);
  border-radius: 6px;
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 650;
  white-space: nowrap;
}

/* --- disegno 3: il telefono --- */
.telefono {
  width: min(300px, 100%);
  margin-inline: auto;
  /* Un telefono non si stira: per farlo piu' grande si ingrandisce tutto
     insieme, cornice e contenuto, cosi' le proporzioni restano quelle vere. */
  zoom: 1;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 30px;
  padding: 9px;
  box-shadow: var(--ombra-alta);
}
.telefono-schermo {
  background: var(--sfondo);
  border: 1px solid var(--linea-tenue);
  border-radius: 22px;
  overflow: hidden;
}
@media (prefers-color-scheme: dark) { .telefono-schermo { background: #16151E; } }
.telefono-tacca {
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.telefono-tacca span {
  width: 74px; height: 5px;
  border-radius: 3px;
  background: var(--linea);
}
.tel-corpo { padding: 4px 12px 16px; }
.tel-testa { padding-bottom: 10px; border-bottom: 1px solid var(--linea-tenue); }
.tel-testa .chi { font-size: 16px; font-weight: 750; letter-spacing: -.02em; }
.tel-testa .dove { font-size: 12px; color: var(--testo-tenue); }
.tel-scheda {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  padding: 11px 12px;
  margin-top: 10px;
}
.tel-scheda .titolo {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--testo-tenue);
  margin-bottom: 8px;
}
.tel-voto {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  padding: 4px 0;
}
.tel-voto + .tel-voto { border-top: 1px solid var(--linea-tenue); }
.tel-voto .materia { font-weight: 600; }
.tel-voto .quando { margin-inline-start: auto; font-size: 11px; color: var(--testo-tenue); }
.tel-voto .valore {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 700;
  min-width: 26px;
}
.tel-riga { font-size: 13px; }
.tel-riga + .tel-riga { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--linea-tenue); }
.tel-riga .quando { display: block; font-size: 11px; color: var(--testo-tenue); }
.tel-segno {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 4px;
  padding: 2px 7px;
  margin-inline-start: 6px;
  vertical-align: 1px;
}
.tel-segno.da-leggere { background: var(--accento-fondo); color: var(--accento); }
.tel-segno.assenza { background: var(--ass-fondo); color: var(--ass); border: 1px solid var(--ass); }

@media (min-width: 1400px) { .telefono { zoom: 1.24; } }
@media (min-width: 2000px) { .telefono { zoom: 1.6; } }

/* ---------- A che punto è ---------- */
.tappe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px, 1.2vw, 24px);
  margin-top: clamp(40px, 3vw, 64px);
  counter-reset: tappa;
}
.tappa {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r-grande);
  padding: clamp(20px, 1.5vw, 30px);
  box-shadow: var(--ombra);
}
.sezione-fondo .tappa { background: var(--superficie-2); }
.tappa.adesso { border-color: var(--accento); box-shadow: var(--ombra), 0 0 0 1px var(--accento); }
.tappa .quando {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}
.tappa.adesso .quando { color: var(--accento); }
.tappa h3 { margin-top: 8px; }
.tappa p { margin-top: 8px; font-size: clamp(14.5px, .92vw, 16.5px); color: var(--testo-tenue); }
.tappa p strong { color: var(--testo); font-weight: 650; }

/* I quattro numeri si distribuiscono sull'intera fascia invece di ammucchiarsi
   a sinistra: sono un fregio, e un fregio va da bordo a bordo. */
.numeri {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 36px;
  margin-top: clamp(36px, 3vw, 60px);
  padding-top: clamp(28px, 2.2vw, 44px);
  border-top: 1px solid var(--linea);
}
@media (min-width: 760px) {
  .numeri { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 36px; }
  .numeri div { min-width: 0; }
}
.numeri div { min-width: 120px; }
.numeri .cifra {
  display: block;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(26px, 2.8vw, 58px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.numeri .voce { font-size: clamp(13.5px, .9vw, 16px); color: var(--testo-tenue); }

/* ---------- Chiusura ---------- */
.chiusura { text-align: start; }
.chiusura h2 { max-width: 26ch; }

/* L'invito a sinistra, le due note a destra: la fascia si riempie di roba
   vera, non di margini. */
.chiusura-griglia { display: grid; gap: clamp(24px, 3vw, 48px); }
@media (min-width: 1100px) {
  .chiusura-griglia {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    column-gap: var(--vuoto);
    align-items: start;
  }
  .chiusura-invito .sottotitolo { max-width: 74ch; }
  .chiusura-nota .rassicurazione { max-width: 68ch; }
  .chiusura-nota .chi-siamo { max-width: 72ch; }
}
@media (min-width: 1900px) {
  /* La colonna delle note e' larga abbastanza per due: la rassicurazione e
     il riquadro «chi lo sta costruendo» si affiancano. */
  .chiusura-nota {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(28px, 2.2vw, 52px);
    align-items: start;
  }
  .chiusura-nota .rassicurazione,
  .chiusura-nota .chi-siamo { max-width: none; }
  .chiusura-nota .chi-siamo { margin-top: 0; }
}
.chiusura .indirizzo {
  display: inline-block;
  margin-top: 18px;
  /* Il bersaglio deve restare toccabile con un dito anche a 390px. */
  padding-block: 10px;
  font-family: var(--mono);
  font-size: clamp(17px, 1.9vw, 42px);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--accento);
  text-decoration: underline;
  text-underline-offset: 5px;
  overflow-wrap: anywhere;
}
.chiusura .rassicurazione {
  margin-top: 0;
  font-size: clamp(14.5px, .92vw, 16.5px);
  color: var(--testo-tenue);
  max-width: 60ch;
}

.chi-siamo {
  margin-top: clamp(32px, 1.8vw, 40px);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-inline-start: 3px solid var(--accento);
  border-radius: var(--r);
  padding: clamp(18px, 1.4vw, 28px) clamp(20px, 1.6vw, 32px);
  font-size: clamp(15px, .95vw, 17px);
  max-width: 66ch;
}
.chi-siamo strong { font-weight: 650; }

/* ---------- Piede ---------- */
.piede {
  background: var(--superficie);
  border-top: 1px solid var(--linea);
  padding-block: clamp(32px, 3vw, 56px);
  font-size: clamp(13.5px, .85vw, 15.5px);
  color: var(--testo-tenue);
}
.piede-griglia {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px clamp(28px, 4vw, 96px);
}
.piede-marchio { flex: 0 0 auto; }
.piede p { flex: 1 1 300px; max-width: 52ch; margin: 0; }
.piede .marchio { height: 24px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}