/* Minerva, pagine di anteprima (v2).
 *
 * ISOLATO DI PROPOSITO. Ogni regola sta sotto `.mv2` o sotto una classe che
 * comincia per `mv2-`: nessun selettore di elemento nudo (section, h1, button),
 * nessuna classe generica (.card, .hero). Le pagine pubblicate caricano
 * site.css e non caricano questo; queste caricano questo e non site.css.
 * Nessuna delle due puo' rompere l'altra, in nessuna direzione.
 *
 * I colori vengono dal marchio (site.css: --accent #3b82f6, --gold #f59e0b,
 * --green #10b981, fondo nero, testo #f1f5f9), ridichiarati qui perche' questo
 * foglio deve reggersi da solo.
 */

.mv2 {
  --mv2-fondo: #06080d;
  --mv2-fondo-2: #0b1018;
  --mv2-bordo: rgba(255, 255, 255, 0.11);
  --mv2-testo: #f1f5f9;
  --mv2-testo-2: #a8b5c7;          /* 7.1:1 su --mv2-fondo */
  --mv2-accento: #3b82f6;
  /* Il blu del marchio va benissimo per bordi, accenti e testo su fondo
     scuro, ma NON regge il bianco sopra: bianco su #3b82f6 fa 3,68, e WCAG AA
     ne chiede 4,5 per il testo normale. Misurato, non stimato. Questo e' lo
     stesso blu che gia' serviva al passaggio del puntatore: 4,70. */
  --mv2-accento-cta: #2f6fe0;      /* bianco sopra: 4,70 — AA */
  --mv2-accento-cta-su: #1d4ed8;   /* bianco sopra: 6,70 */
  --mv2-accento-chiaro: #93b8fb;   /* per il testo su fondo scuro: AA */
  --mv2-studente: #38bdf8;
  --mv2-docente: #a78bfa;
  --mv2-sostegno: #34d399;
  --mv2-scuole: #fbbf24;
  --mv2-raggio: 14px;
  --mv2-gutter: clamp(16px, 5vw, 48px);
  --mv2-ritmo: clamp(56px, 9vw, 120px);

  margin: 0;
  background: var(--mv2-fondo);
  color: var(--mv2-testo);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

/* ---- scheletro ---------------------------------------------------------- */
.mv2 .mv2-dentro { width: 100%; max-width: 1120px; margin: 0 auto; padding-inline: var(--mv2-gutter); }
.mv2 .mv2-sez { padding-block: var(--mv2-ritmo); border-top: 1px solid var(--mv2-bordo); }
.mv2 .mv2-sez--stretta .mv2-dentro { max-width: 760px; }

.mv2 .mv2-salta {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  background: var(--mv2-accento-cta); color: #fff; padding: 12px 18px; border-radius: 0 0 var(--mv2-raggio) 0;
}
.mv2 .mv2-salta:focus { left: 0; }

/* ---- fascia di anteprima ------------------------------------------------ */
.mv2 .mv2-anteprima { background: #1c1403; border-bottom: 1px solid rgba(251, 191, 36, 0.4); }
.mv2 .mv2-anteprima__riga {
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center;
  padding-block: 10px; font-size: 0.9rem;
}
.mv2 .mv2-anteprima__bollo {
  color: #fcd34d; font-weight: 600; letter-spacing: 0.02em;
}
.mv2 .mv2-anteprima__bollo::before { content: "\25CF"; margin-right: 8px; font-size: 0.7em; vertical-align: 1px; }
/* Sul telefono il bersaglio deve essere alto almeno 44px: un collegamento
   alto quanto la sua riga si manca col pollice, e questa fascia e' il solo
   modo di tornare alla pagina pubblicata. */
.mv2 .mv2-anteprima__torna {
  color: var(--mv2-testo-2); text-decoration: underline;
  display: inline-flex; align-items: center; min-height: 44px;
}
.mv2 .mv2-anteprima__torna:hover { color: var(--mv2-testo); }

/* ---- tipografia --------------------------------------------------------- */
.mv2 .mv2-eyebrow {
  margin: 0 0 14px; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.13em; color: var(--mv2-accento-chiaro); text-transform: uppercase;
}
.mv2 .mv2-h1 {
  margin: 0 0 18px; font-size: clamp(2rem, 5.2vw, 3.3rem); line-height: 1.1;
  font-weight: 700; letter-spacing: -0.02em; text-wrap: balance;
}
.mv2 .mv2-titolo {
  margin: 0 0 14px; font-size: clamp(1.5rem, 3.4vw, 2.2rem); line-height: 1.2;
  font-weight: 700; letter-spacing: -0.015em; text-wrap: balance;
}
.mv2 .mv2-guida { margin: 0 0 28px; font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: var(--mv2-testo-2); max-width: 58ch; }
.mv2 .mv2-testo { margin: 0 0 8px; color: var(--mv2-testo-2); max-width: 66ch; }
.mv2 .mv2-nota {
  margin: 22px 0 0; padding: 14px 16px; font-size: 0.92rem; color: var(--mv2-testo-2);
  background: var(--mv2-fondo-2); border: 1px solid var(--mv2-bordo);
  border-left: 3px solid var(--mv2-accento); border-radius: 0 var(--mv2-raggio) var(--mv2-raggio) 0;
  max-width: 72ch;
}
.mv2 .mv2-nascosto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---- richiami all'azione ------------------------------------------------ */
.mv2 .mv2-azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.mv2 .mv2-hero__nota { margin: 16px 0 0; font-size: 0.86rem; line-height: 1.5; color: var(--mv2-testo-2); max-width: 58ch; opacity: .85; }
.mv2 .mv2-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 13px 24px; border-radius: 999px;
  font-size: 0.98rem; font-weight: 600; text-decoration: none; text-align: center;
  transition: background-color .16s, border-color .16s, transform .16s;
}
.mv2 .mv2-cta--primaria { background: var(--mv2-accento-cta); color: #fff; }
.mv2 .mv2-cta--primaria:hover { background: var(--mv2-accento-cta-su); }
.mv2 .mv2-cta--secondaria { color: var(--mv2-testo); border: 1px solid rgba(255, 255, 255, 0.28); }
.mv2 .mv2-cta--secondaria:hover { border-color: rgba(255, 255, 255, 0.55); }
.mv2 .mv2-cta:focus-visible, .mv2 .mv2-faq__q:focus-visible, .mv2 .mv2-demo__bottone:focus-visible {
  outline: 3px solid #93b8fb; outline-offset: 3px;
}

/* ---- hero --------------------------------------------------------------- */
.mv2 .mv2-hero { padding-block: clamp(44px, 8vw, 96px) var(--mv2-ritmo); }
.mv2 .mv2-hero__griglia { display: grid; gap: clamp(28px, 5vw, 56px); }
@media (min-width: 900px) {
  .mv2 .mv2-hero__griglia { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; }
}
.mv2 .mv2-hero__visivo:empty { display: none; }

/* ---- schede dei quattro interlocutori ----------------------------------- */
.mv2 .mv2-schede { display: grid; gap: 16px; margin-top: 34px; }
@media (min-width: 620px) { .mv2 .mv2-schede { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .mv2 .mv2-schede { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mv2 .mv2-scheda {
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px 22px 22px; background: var(--mv2-fondo-2);
  border: 1px solid var(--mv2-bordo); border-top: 3px solid var(--mv2-accento);
  border-radius: var(--mv2-raggio);
}
.mv2 .mv2-scheda--student { border-top-color: var(--mv2-studente); }
.mv2 .mv2-scheda--teacher { border-top-color: var(--mv2-docente); }
.mv2 .mv2-scheda--support { border-top-color: var(--mv2-sostegno); }
.mv2 .mv2-scheda--schools { border-top-color: var(--mv2-scuole); }
.mv2 .mv2-eyebrow--scheda { margin-bottom: 4px; font-size: 0.68rem; color: var(--mv2-testo-2); }
.mv2 .mv2-scheda--student .mv2-eyebrow--scheda { color: var(--mv2-studente); }
.mv2 .mv2-scheda--teacher .mv2-eyebrow--scheda { color: var(--mv2-docente); }
.mv2 .mv2-scheda--support .mv2-eyebrow--scheda { color: var(--mv2-sostegno); }
.mv2 .mv2-scheda--schools .mv2-eyebrow--scheda { color: var(--mv2-scuole); }
.mv2 .mv2-scheda__titolo { margin: 0; font-size: 1.16rem; font-weight: 700; }
.mv2 .mv2-scheda__testo { margin: 0; color: var(--mv2-testo-2); font-size: 0.95rem; flex: 1; }
.mv2 .mv2-scheda .mv2-cta { margin-top: 14px; align-self: flex-start; }

/* ---- passi e leve ------------------------------------------------------- */
.mv2 .mv2-passi, .mv2 .mv2-leve { display: grid; gap: 16px; margin-top: 32px; }
@media (min-width: 760px) { .mv2 .mv2-passi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 680px) { .mv2 .mv2-leve { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .mv2 .mv2-leve { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mv2 .mv2-passo, .mv2 .mv2-leva {
  padding: 22px; background: var(--mv2-fondo-2);
  border: 1px solid var(--mv2-bordo); border-radius: var(--mv2-raggio);
}
.mv2 .mv2-passo__n, .mv2 .mv2-leva__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-bottom: 12px; border-radius: 50%;
  background: rgba(59, 130, 246, 0.16); color: var(--mv2-accento-chiaro);
  font-size: 0.88rem; font-weight: 700;
}
.mv2 .mv2-passo__titolo, .mv2 .mv2-leva__titolo { margin: 0 0 6px; font-size: 1.08rem; font-weight: 700; }
.mv2 .mv2-passo__testo, .mv2 .mv2-leva__testo { margin: 0; color: var(--mv2-testo-2); font-size: 0.95rem; }

/* ---- confronto ---------------------------------------------------------- */
/* Da 820px in su e' una tabella. Sotto diventa un elenco di schede, senza
 * duplicare l'HTML: le etichette di colonna stanno gia' dentro le celle e
 * compaiono solo quando la tabella si scompone. Una tabella a tre colonne a
 * 360px si leggerebbe solo scorrendo di lato, e chi scorre non confronta. */
.mv2 .mv2-conf { margin-top: 30px; }
.mv2 .mv2-conf__tab { width: 100%; border-collapse: collapse; text-align: left; }
.mv2 .mv2-conf__etichetta { display: none; }
.mv2 .mv2-conf__tab thead { display: none; }
.mv2 .mv2-conf__riga {
  display: grid; gap: 4px; padding: 18px; margin-bottom: 14px;
  background: var(--mv2-fondo-2); border: 1px solid var(--mv2-bordo); border-radius: var(--mv2-raggio);
}
.mv2 .mv2-conf__funzione { font-size: 1.04rem; font-weight: 700; padding: 0 0 6px; }
.mv2 .mv2-conf__minerva, .mv2 .mv2-conf__altro { color: var(--mv2-testo-2); font-size: 0.94rem; padding: 6px 0 0; }
.mv2 .mv2-conf__minerva { border-top: 1px solid var(--mv2-bordo); }
.mv2 .mv2-conf__altro { border-top: 1px solid var(--mv2-bordo); }
.mv2 .mv2-conf__etichetta {
  display: block; margin-bottom: 3px; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--mv2-testo-2);
}
.mv2 .mv2-conf__minerva .mv2-conf__etichetta { color: var(--mv2-accento-chiaro); }
@media (min-width: 820px) {
  .mv2 .mv2-conf__tab thead { display: table-header-group; }
  .mv2 .mv2-conf__tab thead th {
    padding: 0 16px 12px; font-size: 0.82rem; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--mv2-testo-2); font-weight: 700;
  }
  .mv2 .mv2-conf__riga { display: table-row; background: none; border: 0; padding: 0; margin: 0; }
  .mv2 .mv2-conf__riga > * {
    padding: 16px; border-top: 1px solid var(--mv2-bordo); vertical-align: top;
  }
  .mv2 .mv2-conf__funzione { width: 22%; }
  .mv2 .mv2-conf__minerva { width: 39%; color: var(--mv2-testo); background: rgba(59, 130, 246, 0.05); }
  .mv2 .mv2-conf__altro { width: 39%; }
  .mv2 .mv2-conf__etichetta { display: none; }
}

/* ---- prezzi ------------------------------------------------------------- */
.mv2 .mv2-bozza {
  display: inline-block; margin: 0 0 20px; padding: 7px 14px;
  background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.45);
  border-radius: 999px; color: #fcd34d; font-size: 0.85rem; font-weight: 600;
}
.mv2 .mv2-piani { display: grid; gap: 16px; margin-top: 32px; }
@media (min-width: 760px) { .mv2 .mv2-piani { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mv2 .mv2-piano {
  display: flex; flex-direction: column; padding: 26px 22px;
  background: var(--mv2-fondo-2); border: 1px solid var(--mv2-bordo); border-radius: var(--mv2-raggio);
}
.mv2 .mv2-piano--evidenza { border-color: rgba(59, 130, 246, 0.55); }
.mv2 .mv2-piano__nome { margin: 0 0 10px; font-size: 1.1rem; font-weight: 700; }
.mv2 .mv2-piano__prezzo { margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.mv2 .mv2-piano__prezzo strong { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em; }
.mv2 .mv2-piano__prezzo span { color: var(--mv2-testo-2); font-size: 0.92rem; }
.mv2 .mv2-piano__anno { flex-basis: 100%; }
.mv2 .mv2-piano__desc { margin: 4px 0 14px; color: var(--mv2-testo-2); font-size: 0.94rem; }
.mv2 .mv2-piano__voci { margin: 0 0 18px; padding: 0; list-style: none; flex: 1; }
.mv2 .mv2-piano__voci li { position: relative; padding: 4px 0 4px 22px; font-size: 0.93rem; color: var(--mv2-testo-2); }
.mv2 .mv2-piano__voci li::before {
  content: ""; position: absolute; left: 4px; top: 12px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--mv2-accento-cta);
}
.mv2 .mv2-scuole-prezzi { margin-top: 30px; padding: 24px 22px; background: var(--mv2-fondo-2); border: 1px solid var(--mv2-bordo); border-radius: var(--mv2-raggio); }
.mv2 .mv2-fasce { margin: 12px 0 0; padding: 0; list-style: none; }
.mv2 .mv2-fascia {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px;
  padding: 11px 0; border-top: 1px solid var(--mv2-bordo);
}
.mv2 .mv2-fascia__n { color: var(--mv2-testo); }
.mv2 .mv2-fascia__p { color: var(--mv2-testo-2); }

/* ---- FAQ ---------------------------------------------------------------- */
.mv2 .mv2-faq { margin-top: 28px; max-width: 820px; }
.mv2 .mv2-faq__voce { border-bottom: 1px solid var(--mv2-bordo); }
.mv2 .mv2-faq__h { margin: 0; font-size: 1rem; }
.mv2 .mv2-faq__q {
  display: flex; width: 100%; gap: 16px; align-items: flex-start; justify-content: space-between;
  min-height: 56px; padding: 16px 2px; background: none; border: 0; cursor: pointer;
  color: var(--mv2-testo); font: inherit; font-weight: 600; text-align: left;
}
.mv2 .mv2-faq__segno { position: relative; flex: 0 0 16px; height: 16px; margin-top: 4px; }
.mv2 .mv2-faq__segno::before, .mv2 .mv2-faq__segno::after {
  content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 2px;
  background: var(--mv2-accento-chiaro); transition: transform .18s;
}
.mv2 .mv2-faq__segno::after { transform: rotate(90deg); }
.mv2 .mv2-faq__q[aria-expanded="true"] .mv2-faq__segno::after { transform: rotate(0deg); }
.mv2 .mv2-faq__a { padding: 0 2px 18px; }
.mv2 .mv2-faq__a p { margin: 0; color: var(--mv2-testo-2); max-width: 70ch; }

/* ---- demo --------------------------------------------------------------- */
.mv2 .mv2-demo { max-width: 820px; }
.mv2 .mv2-demo__palco {
  margin-top: 18px; padding: 26px 22px; min-height: 190px;
  background: var(--mv2-fondo-2); border: 1px solid var(--mv2-bordo); border-radius: var(--mv2-raggio);
}
.mv2 .mv2-demo__stato { margin: 0; color: var(--mv2-testo-2); font-size: 0.95rem; }
.mv2 .mv2-demo__comandi { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.mv2 .mv2-demo__bottone {
  min-height: 44px; padding: 10px 18px; border-radius: 999px; cursor: pointer;
  background: none; border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--mv2-testo); font: inherit; font-size: 0.9rem;
}
.mv2 .mv2-demo__bottone:hover { border-color: rgba(255, 255, 255, 0.55); }
.mv2 .mv2-demo__didascalia { margin: 14px 0 0; color: var(--mv2-testo-2); font-size: 0.93rem; max-width: 68ch; }

/* ---- chi ha chiesto meno movimento -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mv2 *, .mv2 *::before, .mv2 *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
}

/* ---- indice delle anteprime --------------------------------------------- */
.mv2 .mv2-indice { margin: 30px 0 0; padding: 0; list-style: none; }
.mv2 .mv2-indice__voce {
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; justify-content: space-between;
  padding: 16px 0; border-top: 1px solid var(--mv2-bordo);
}
.mv2 .mv2-indice__nuova { color: var(--mv2-testo); font-size: 1.06rem; font-weight: 600; text-decoration: none; }
.mv2 .mv2-indice__nuova:hover { color: var(--mv2-accento-chiaro); text-decoration: underline; }
.mv2 .mv2-indice__attuale { color: var(--mv2-testo-2); font-size: 0.88rem; text-decoration: underline; }
.mv2 .mv2-indice__attuale:hover { color: var(--mv2-testo); }
.mv2 .mv2--indice .mv2-sez { border-top: 0; }

/* ---- il pannello che somiglia all'app ------------------------------------
 * Le demo ricostruiscono l'interfaccia di Minerva con le sue parole vere
 * (demoUi, prese da app.js). I passi si rivelano con la sola OPACITA': gli
 * elementi occupano il loro spazio fin dall'inizio, quindi la pagina non si
 * muove mai mentre la demo va avanti. */
.mv2 .mv2-app {
  display: grid; gap: 14px; padding: 18px;
  background: #080c14; border: 1px solid var(--mv2-bordo); border-radius: 12px;
  font-size: 0.92rem;
}
.mv2 .mv2-app__riga { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mv2 .mv2-app__campo {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 130px;
  padding: 9px 12px; background: var(--mv2-fondo-2);
  border: 1px solid var(--mv2-bordo); border-radius: 9px;
}
.mv2 .mv2-app__campo--largo { flex-basis: 100%; }
.mv2 .mv2-app__eti {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--mv2-testo-2);
}
.mv2 .mv2-app__val { color: var(--mv2-testo); overflow-wrap: anywhere; }
.mv2 .mv2-app__sottotitolo { margin: 4px 0 0; font-weight: 700; color: var(--mv2-testo); }

/* chat */
.mv2 .mv2-app__domanda {
  margin: 0; padding: 10px 14px; justify-self: end; max-width: 88%;
  background: rgba(59, 130, 246, 0.16); border-radius: 12px 12px 4px 12px;
}
.mv2 .mv2-app__risposta { display: grid; gap: 8px; }
.mv2 .mv2-app__risposta p { margin: 0; color: var(--mv2-testo-2); }
.mv2 .mv2-app__formula {
  padding: 10px 12px; background: var(--mv2-fondo-2); border-radius: 9px;
  text-align: center; color: var(--mv2-testo) !important; font-size: 0.95rem;
  overflow-x: auto;
}
.mv2 .mv2-app__verifica { display: flex; flex-wrap: wrap; gap: 8px; }
.mv2 .mv2-app__chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
}
.mv2 .mv2-app__chip--attesa { background: rgba(148, 163, 184, 0.16); color: var(--mv2-testo-2); }
.mv2 .mv2-app__chip--ok { background: rgba(16, 185, 129, 0.16); color: #6ee7b7; }
.mv2-demo[data-mv2-passo="3"] .mv2-app__chip--attesa { display: none; }
.mv2-demo:not([data-mv2-passo="3"]) .mv2-app__chip--ok { display: none; }

/* lezione */
.mv2 .mv2-app__fasce { display: grid; gap: 8px; }
.mv2 .mv2-app__fascia {
  display: grid; grid-template-columns: auto 1fr auto; gap: 8px 10px; align-items: center;
  padding: 9px 12px; background: var(--mv2-fondo-2);
  border: 1px solid var(--mv2-bordo); border-radius: 9px;
}
.mv2 .mv2-app__ora { color: var(--mv2-testo-2); font-variant-numeric: tabular-nums; font-size: 0.85rem; }
.mv2 .mv2-app__titolofascia { min-width: 0; overflow-wrap: anywhere; }
.mv2 .mv2-app__sigma {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: 1px solid var(--mv2-bordo); border-radius: 7px;
  color: var(--mv2-testo-2);
}
.mv2 .mv2-app__esito {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  color: #6ee7b7; font-size: 0.82rem;
}
.mv2 .mv2-app__mini {
  padding: 3px 10px; border: 1px solid var(--mv2-bordo); border-radius: 999px;
  color: var(--mv2-testo-2);
}
.mv2 .mv2-app__pillole { display: flex; flex-wrap: wrap; gap: 8px; }
.mv2 .mv2-app__pillola {
  padding: 6px 14px; border: 1px solid var(--mv2-bordo); border-radius: 999px;
  color: var(--mv2-testo-2); font-size: 0.84rem;
}
.mv2 .mv2-app__pillola--on { background: var(--mv2-accento-cta); border-color: var(--mv2-accento-cta); color: #fff; }

/* sostegno */
.mv2 .mv2-app__leve { display: grid; gap: 7px; }
@media (min-width: 560px) { .mv2 .mv2-app__leve { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mv2 .mv2-app__leva {
  display: flex; align-items: center; gap: 9px; padding: 8px 11px;
  background: var(--mv2-fondo-2); border: 1px solid var(--mv2-bordo); border-radius: 9px;
  color: var(--mv2-testo-2); font-size: 0.87rem;
}
.mv2 .mv2-app__spunta {
  flex: 0 0 17px; height: 17px; border: 1.5px solid var(--mv2-testo-2); border-radius: 4px;
  position: relative; transition: background-color .3s, border-color .3s;
}
.mv2 .mv2-app__riga--int { gap: 8px; }
.mv2 .mv2-app__confronto { display: grid; gap: 12px; }
@media (min-width: 620px) { .mv2 .mv2-app__confronto { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.mv2 .mv2-app__prima, .mv2 .mv2-app__dopo {
  padding: 14px; background: var(--mv2-fondo-2); border: 1px solid var(--mv2-bordo); border-radius: 9px;
}
.mv2 .mv2-app__dopo { border-color: rgba(52, 211, 153, 0.38); }
.mv2 .mv2-app__prima p, .mv2 .mv2-app__dopo p { margin: 0 0 6px; color: var(--mv2-testo-2); }
.mv2 .mv2-app__passi { margin: 0 0 8px; padding-left: 20px; color: var(--mv2-testo-2); }
.mv2 .mv2-app__passi li { padding: 2px 0; }
.mv2 .mv2-app__esempio { font-style: italic; }
.mv2 .mv2-app__domandina {
  margin: 8px 0 0 !important; padding: 8px 11px;
  background: rgba(59, 130, 246, 0.12); border-radius: 8px; color: var(--mv2-testo) !important;
}

/* ---- i passi ------------------------------------------------------------ */
/* Le fasi le accende il motore mettendo `mv2-vista`, non una regola per ogni
   combinazione di passo: le regole erano scritte fino a passo="3", ma la demo
   del sostegno ha TRE passi (0,1,2), quindi la sua ultima fase non si
   accendeva mai. E' il difetto che il brief chiama «alcune fasi possono
   rimanere invisibili».

   Lo stato nascosto vale SOLO sotto .mv2-js: senza javascript nessuno
   mette la classe, e prima queste regole lasciavano il palco vuoto. */
.mv2-js .mv2-demo [data-mv2-fase] { opacity: 0; transition: opacity .5s ease; }
.mv2-js .mv2-demo [data-mv2-fase].mv2-vista { opacity: 1; }
/* le cinque leve si accendono una dopo l'altra, senza muovere niente */
.mv2 .mv2-demo[data-mv2-passo="1"] .mv2-app__leva .mv2-app__spunta,
.mv2 .mv2-demo[data-mv2-passo="2"] .mv2-app__leva .mv2-app__spunta,
.mv2 .mv2-demo[data-mv2-passo="3"] .mv2-app__leva .mv2-app__spunta {
  background: var(--mv2-sostegno); border-color: var(--mv2-sostegno);
}
.mv2 .mv2-app__leva[data-mv2-leva="2"] .mv2-app__spunta { transition-delay: .25s; }
.mv2 .mv2-app__leva[data-mv2-leva="3"] .mv2-app__spunta { transition-delay: .5s; }
.mv2 .mv2-app__leva[data-mv2-leva="4"] .mv2-app__spunta { transition-delay: .75s; }
.mv2 .mv2-app__leva[data-mv2-leva="5"] .mv2-app__spunta { transition-delay: 1s; }
.mv2 .mv2-demo[data-mv2-passo="1"] .mv2-app__leva,
.mv2 .mv2-demo[data-mv2-passo="2"] .mv2-app__leva,
.mv2 .mv2-demo[data-mv2-passo="3"] .mv2-app__leva { color: var(--mv2-testo); }

/* chi ha chiesto meno movimento vede tutto, fermo */
@media (prefers-reduced-motion: reduce) {
  .mv2 .mv2-demo [data-mv2-fase] { opacity: 1 !important; }
  .mv2 .mv2-demo .mv2-app__spunta { background: var(--mv2-sostegno); border-color: var(--mv2-sostegno); }
  .mv2 .mv2-demo .mv2-app__chip--attesa { display: none; }
  .mv2 .mv2-demo .mv2-app__chip--ok { display: inline-flex !important; }
}

/* ---- immagini ------------------------------------------------------------ */
.mv2 .mv2-figura { display: block; }
.mv2 .mv2-figura__img {
  display: block; width: 100%; height: auto; border-radius: 16px;
  border: 1px solid var(--mv2-bordo);
  /* il bordo inferiore sfuma nel fondo: l'immagine si posa sulla pagina
   * invece di starci sopra come un francobollo */
  -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
}

/* ---- l'alone dell'hero ---------------------------------------------------
 * Un bagliore basso e largo dietro al titolo. Sta SOTTO il testo e non ne
 * tocca il contrasto: e' un gradiente sul fondo, non un filtro sopra. */
.mv2 .mv2-hero { position: relative; overflow: hidden; }
.mv2 .mv2-hero::before {
  content: ""; position: absolute; inset: -30% -10% auto -10%; height: 78%;
  background: radial-gradient(60% 70% at 30% 40%, rgba(59, 130, 246, 0.17), transparent 70%);
  pointer-events: none;
}
.mv2 .mv2-hero--student::before { background: radial-gradient(60% 70% at 30% 40%, rgba(56, 189, 248, 0.17), transparent 70%); }
.mv2 .mv2-hero--teacher::before { background: radial-gradient(60% 70% at 30% 40%, rgba(167, 139, 250, 0.16), transparent 70%); }
.mv2 .mv2-hero--support::before { background: radial-gradient(60% 70% at 30% 40%, rgba(52, 211, 153, 0.15), transparent 70%); }
.mv2 .mv2-hero--schools::before { background: radial-gradient(60% 70% at 30% 40%, rgba(251, 191, 36, 0.13), transparent 70%); }
.mv2 .mv2-hero__testo, .mv2 .mv2-hero__visivo { position: relative; }

/* il filo che separa le sezioni sfuma ai lati invece di tagliare la pagina */
.mv2 .mv2-sez { position: relative; border-top: 0; }
.mv2 .mv2-sez::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--mv2-bordo) 18%, var(--mv2-bordo) 82%, transparent);
}

/* ---- le schede rispondono al puntatore ---------------------------------- */
.mv2 .mv2-scheda, .mv2 .mv2-passo, .mv2 .mv2-leva, .mv2 .mv2-piano {
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}
.mv2 .mv2-scheda:hover, .mv2 .mv2-passo:hover, .mv2 .mv2-piano:hover {
  transform: translateY(-2px); background: #0d131c;
}
.mv2 .mv2-scheda--student:hover { border-color: rgba(56, 189, 248, 0.5); }
.mv2 .mv2-scheda--teacher:hover { border-color: rgba(167, 139, 250, 0.5); }
.mv2 .mv2-scheda--support:hover { border-color: rgba(52, 211, 153, 0.5); }
.mv2 .mv2-scheda--schools:hover { border-color: rgba(251, 191, 36, 0.5); }

/* ---- le sezioni compaiono scorrendo -------------------------------------
 * Lo stato nascosto vale SOLO se il javascript e' partito (classe mv2-js sul
 * body): senza, tutto resta visibile. Un effetto che puo' nascondere il
 * contenuto quando qualcosa non va non e' un effetto, e' un guasto. */
.mv2-js [data-mv2-rivela] { opacity: 0; transform: translateY(14px); }
.mv2-js [data-mv2-rivela].mv2-visibile {
  opacity: 1; transform: none;
  transition: opacity .55s ease, transform .55s ease;
}
@media (prefers-reduced-motion: reduce) {
  .mv2-js [data-mv2-rivela] { opacity: 1 !important; transform: none !important; }
  .mv2 .mv2-scheda:hover, .mv2 .mv2-passo:hover, .mv2 .mv2-piano:hover { transform: none; }
}

/* ---- avanzamento delle demo -------------------------------------------- */
.mv2 .mv2-demo__avanzamento { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.mv2 .mv2-demo__barra {
  flex: 1 1 auto; height: 4px; border-radius: 999px; min-width: 80px;
  background: rgba(255, 255, 255, .12); overflow: hidden;
}
.mv2 .mv2-demo__barra span {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: currentColor; transition: width .45s ease;
}
.mv2 .mv2-demo__passo {
  margin: 0; flex: 0 0 auto; font-size: .82rem; color: var(--mv2-testo-2);
  font-variant-numeric: tabular-nums;
}
.mv2 .mv2-demo__bottone[disabled] { opacity: .45; cursor: default; }
.mv2 .mv2-demo__bottone--primario { border-color: rgba(255, 255, 255, .42); }
@media (prefers-reduced-motion: reduce) {
  .mv2 .mv2-demo__barra span { transition: none; }
  .mv2-js .mv2-demo [data-mv2-fase] { transition: none; }
}

/* ---- schermate vere dell'app sopra lo sfondo --------------------------- */
/* Lo sfondo astratto resta, ma da solo non dice niente del prodotto: sopra ci
   va una schermata dell'app vera. Su schermo largo si sovrappone all'angolo;
   sotto i 760px si mette in colonna, perche' sovrapposta diventerebbe
   illeggibile proprio dove la leggono di piu'. */
.mv2-composta { position: relative; }
.mv2-app { margin: 0; }
.mv2-app img {
  display: block; width: 100%; height: auto; max-width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
  background: #0b0d12;
}
.mv2-app figcaption {
  margin-top: .45rem; font-size: .78rem; letter-spacing: .02em;
  color: var(--mv2-tenue, #9aa3b2); text-align: right;
}
.mv2-app-tre { display: grid; gap: .8rem; }

/* Da 900 e non da 760 (23 set 2026): fra 760 e 899 l'intestazione e' ancora in
   colonna, e la schermata alta del docente, sovrapposta, saliva fino a coprire il
   secondo pulsante (misurato a 768x1024). */
@media (min-width: 900px) {
  .mv2-composta .mv2-figura { display: block; }
  .mv2-composta > .mv2-app {
    position: absolute; right: -6px; bottom: -14px;
    width: 58%; max-width: 330px;
  }
  .mv2-composta--tre .mv2-app-tre {
    position: absolute; right: -6px; bottom: -14px;
    width: 46%; max-width: 260px;
    grid-template-columns: 1fr; gap: .5rem;
  }
  .mv2-app--piccola figcaption { display: none; }
  .mv2-app--piccola:not(:first-child) img { opacity: .92; }
}

@media (max-width: 899px) {
  .mv2-composta > .mv2-app,
  .mv2-composta--tre .mv2-app-tre { margin-top: .9rem; }
  /* in colonna basta la prima: tre schermate di fila su un telefono sono
     tre schermate che nessuno guarda */
  .mv2-app-tre .mv2-app:not(:first-child) { display: none; }
}

/* Chi ha chiesto meno movimento non vuole nemmeno ombre che si muovono: qui
   non ce ne sono, ma la scheda non deve nemmeno sollevarsi al passaggio. */
@media (prefers-reduced-motion: reduce) {
  .mv2-app img { transition: none; }
}

/* ---- mappe: i quattro formati ------------------------------------------ */
.mv2 .mv2-formati {
  display: grid; gap: 14px; margin: 22px 0 8px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.mv2 .mv2-formato {
  padding: 14px 16px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .03);
}
.mv2 .mv2-formato__nome { margin: 0 0 6px; font-size: 1rem; }
.mv2 .mv2-formato__testo { margin: 0; color: var(--mv2-testo-2); font-size: .93rem; }

/* ---- mappe: il palco della dimostrazione -------------------------------- */
/* HTML e non SVG: deve restare leggibile a 360px e selezionabile. I
   collegamenti sono bordi, non linee disegnate — un ramo che si allunga non
   lascia la sua linea indietro. */
.mv2 .mv2-mappa { margin: 12px 0 4px; }
.mv2 .mv2-mappa__centro {
  display: inline-block; margin: 0 0 12px; padding: 8px 14px;
  border-radius: 999px; font-weight: 600;
  background: rgba(59, 130, 246, .16);
  border: 1px solid rgba(59, 130, 246, .45);
}
.mv2 .mv2-mappa__rami { list-style: none; margin: 0; padding: 0 0 0 16px; }
.mv2 .mv2-mappa__ramo {
  position: relative; margin: 0 0 8px; padding: 7px 12px 7px 16px;
  border-left: 2px solid rgba(255, 255, 255, .18);
  color: var(--mv2-testo);
}
.mv2 .mv2-mappa__ramo--cambia { border-left-color: rgba(59, 130, 246, .6); }
/* il prima sparisce quando arriva il dopo: due testi sovrapposti nello stesso
   punto direbbero due cose insieme */
.mv2-js .mv2-mappa__dopo.mv2-vista ~ .mv2-mappa__prima,
.mv2-js .mv2-mappa__prima { display: block; }
.mv2-js .mv2-demo[data-mv2-passo="4"] .mv2-mappa__prima,
.mv2-js .mv2-demo[data-mv2-motore="finito"] .mv2-mappa__prima { display: none; }
.mv2 .mv2-mappa__figli { list-style: none; margin: 8px 0 0; padding: 0 0 0 14px; }
.mv2 .mv2-mappa__figli li {
  position: relative; margin: 0 0 5px; padding-left: 12px;
  color: var(--mv2-testo-2); font-size: .92rem;
}
.mv2 .mv2-mappa__figli li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 1px; background: rgba(255, 255, 255, .3);
}
.mv2 .mv2-app__istruzione {
  margin: 10px 0 0; padding: 8px 12px; border-radius: 8px;
  background: rgba(255, 255, 255, .05); color: var(--mv2-testo-2);
  font-size: .92rem; font-style: italic;
}
@media (max-width: 420px) {
  .mv2 .mv2-mappa__rami { padding-left: 6px; }
  .mv2 .mv2-mappa__ramo { padding-left: 12px; }
}

/* ---- la CTA che resta sul telefono -------------------------------------- */
/* Sotto i 760px l'azione primaria dell'hero resta a portata di pollice. Non
   copre il contenuto: il corpo prende un margine in fondo pari all'altezza
   della barra, safe-area compresa — l'iPhone ha una striscia sua sotto, e
   senza quella il pulsante ci finisce dentro. */
.mv2 .mv2-cta-fissa { display: none; }

@media (max-width: 759px) {
  .mv2 .mv2-cta-fissa {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(8, 10, 16, .94);
    border-top: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(8px);
  }
  .mv2 .mv2-cta-fissa .mv2-cta { display: block; width: 100%; text-align: center; }
  /* Lo spazio che la barra occupa, restituito in fondo alla pagina. NON si
     indovina: il valore qui e' solo il ripiego per quando il javascript non
     arriva, ed e' volutamente abbondante (una barra su iPhone, safe-area
     compresa, sta sotto i 100px). Quando il javascript c'e', misura la barra
     vera e scrive --mv2-barra: la prima stesura aveva 68px fissi contro una
     barra alta 73, e copriva l'ultima riga. */
  .mv2 body, body.mv2 { padding-bottom: var(--mv2-barra, 104px); }
}

/* Sul computer (28 set 2026, il proprietario: «sullo smartphone e' ben visibile, sul
   pc molto meno»): la stessa azione come pulsante flottante in basso al centro, che
   entra quando il pulsante della testata esce dallo schermo e se ne va quando arriva
   la chiamata finale (niente doppioni). Lo accende minerva-v2.js (azioneFlottante). */
@media (min-width: 760px) {
  .mv2 .mv2-cta-fissa {
    display: block; position: fixed; left: 50%; bottom: 22px; z-index: 40; width: max-content;
    transform: translate(-50%, 140%); opacity: 0; pointer-events: none;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .25s ease;
  }
  .mv2 .mv2-cta-fissa--vista { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
  .mv2 .mv2-cta-fissa .mv2-cta {
    padding: 14px 30px; font-size: 1.02rem; white-space: nowrap;
    box-shadow: 0 14px 34px -10px rgba(37, 99, 235, .9), 0 0 0 1px rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .2);
  }
}
@media (min-width: 760px) and (prefers-reduced-motion: reduce) { .mv2 .mv2-cta-fissa { transition: none; } }

/* Chi stampa non ha un pollice: la barra non deve finire sul foglio. */
@media print { .mv2 .mv2-cta-fissa { display: none; } }

/* ---- v186 (23 set 2026): schermate vere, video della mappa, aziende ------
   Le schermate stanno in una cornice sobria, la stessa di .mv2-app: niente
   browser o telefoni finti intorno. Testo e figura affiancati solo quando
   c'e' posto; sotto i 900px uno sotto l'altro, e il testo viene prima. */
.mv2 .mv2-trio { margin: 24px 0 8px; }
.mv2 .mv2-affianca { display: grid; gap: clamp(24px, 4vw, 48px); align-items: start; }
@media (min-width: 900px) { .mv2 .mv2-affianca { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.mv2 .mv2-affianca__testo > :last-child { margin-bottom: 0; }
.mv2 .mv2-scatto, .mv2 .mv2-video { margin: 0; }
.mv2 .mv2-scatto img, .mv2 .mv2-video__v, .mv2 .mv2-video__fermo {
  display: block; width: 100%; height: auto; max-width: 100%;
  border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55); background: #0b0d12;
}
/* le schermate alte non devono diventare un muro: sul telefono si leggono intere,
   su schermo largo stanno in colonna e non superano l'altezza utile */
@media (min-width: 900px) { .mv2 .mv2-affianca__figura .mv2-scatto img { max-height: 82vh; width: auto; margin-inline: auto; } }
.mv2 .mv2-scatto figcaption, .mv2 .mv2-video figcaption {
  margin-top: .55rem; font-size: .86rem; line-height: 1.45; color: var(--mv2-testo-2);
}
.mv2 .mv2-coppia { display: grid; gap: 24px; margin: 28px 0 8px; align-items: start; }
@media (min-width: 760px) { .mv2 .mv2-coppia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 760px) { .mv2 .mv2-coppia--mappa { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.mv2 .mv2-chiusura { margin-top: 18px; }
.mv2 .mv2-video__cornice { position: relative; }
.mv2 .mv2-video__fermo { display: none; }
/* Chi ha chiesto meno movimento vede il poster, e il video non parte:
   CSS lo nasconde, minerva-v2.js lo ferma. */
@media (prefers-reduced-motion: reduce) {
  .mv2 .mv2-video__v { display: none; }
  .mv2 .mv2-video__fermo { display: block; }
}
/* La formazione aziendale: un'altra strada, e deve vedersi. Fondo proprio e
   bordo superiore che la staccano dai percorsi scolastici. */
.mv2 .mv2-sez--aziende {
  background: linear-gradient(180deg, rgba(34, 197, 94, .06), rgba(59, 130, 246, .05) 60%, transparent);
  border-top: 2px solid rgba(52, 211, 153, .45);
}
.mv2 .mv2-sez--aziende .mv2-eyebrow { color: #6ee7b7; }
.mv2 .mv2-aziende__foto { margin: 0; }
.mv2 .mv2-aziende__foto img {
  display: block; width: 100%; height: auto; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
.mv2 .mv2-aziende__nota { margin: 10px 0 0; font-size: .88rem; color: var(--mv2-testo-2); }

/* I due titoli della sezione mappe vivevano dei margini del browser: scritti
   qui, perche' site.css (sulle ufficiali) azzera tutti i margini. */
.mv2 .mv2-h2 { margin: 0.83em 0; }
.mv2 .mv2-h3 { margin: 1em 0; }

/* ---- pagine ufficiali (dal 23 set 2026) ----------------------------------
   Sotto la testata del sito, che site.css tiene fissa e alta 70px. */
.mv2.mv2--pubblica #mv2-contenuto { padding-top: 70px; }
/* La cornice del sito (testata, menu, piede, cio' che site.js aggiunge al
   body) ha il carattere e l'interlinea del sito, non quelli di .mv2. */
.mv2.mv2--pubblica > :not(main):not(.mv2-salta) { font-family: var(--font); line-height: normal; }

/* ==== 24 set 2026: schermate da telefono, palco, simboli, ingrandimento ====
   TUTTO sotto .mv2--pubblica: questo foglio lo usano anche le /preview/, che
   non devono cambiare aspetto. */

/* il tono del percorso: lo usano simboli, vassoi e palco */
.mv2.mv2--pubblica { --mv2-tono: var(--mv2-accento); }
.mv2.mv2--pubblica.mv2--student { --mv2-tono: var(--mv2-studente); }
.mv2.mv2--pubblica.mv2--teacher { --mv2-tono: var(--mv2-docente); }
.mv2.mv2--pubblica.mv2--support { --mv2-tono: var(--mv2-sostegno); }
.mv2.mv2--pubblica.mv2--aziende { --mv2-tono: #34d399; }

/* ---- i simboli accanto ai titoli ----
   Nel tono del percorso, su una pastiglia appena colorata: danno ritmo alla
   pagina senza competere con il titolo. */
.mv2--pubblica .mv2-titolo--icona { display: flex; align-items: flex-start; gap: .5em; }
.mv2--pubblica .mv2-icona {
  flex: 0 0 auto; width: .95em; height: .95em; margin-top: .08em; padding: .24em;
  box-sizing: content-box; border-radius: .42em; color: var(--mv2-tono);
  background: rgba(255, 255, 255, .06);
  background: color-mix(in srgb, var(--mv2-tono) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--mv2-tono) 32%, transparent);
}

/* ---- il vassoio: ogni schermata dell'app sta su una superficie ----------
   Le schermate sono scure come la pagina: senza una superficie di contrasto
   sembrano un buco. Un vassoio colorato nel tono del percorso, con bordo, le
   stacca; raggio, ombra e didascalia uguali ovunque. */
.mv2--pubblica .mv2-scatto > picture,
.mv2--pubblica .mv2-video__cornice {
  display: block; padding: 12px; border-radius: 20px;
  background: linear-gradient(155deg, rgba(59, 130, 246, .28), rgba(11, 18, 32, .9) 72%);
  background: linear-gradient(155deg, color-mix(in srgb, var(--mv2-tono) 38%, #0b1220), #0b1220 72%);
  border: 1px solid color-mix(in srgb, var(--mv2-tono) 42%, rgba(255, 255, 255, .08));
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .75);
}
.mv2--pubblica .mv2-scatto img, .mv2--pubblica .mv2-video__v {
  border-radius: 12px; border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
}
.mv2--pubblica .mv2-scatto figcaption, .mv2--pubblica .mv2-video figcaption { margin-top: .6rem; }

/* le schermate da telefono: mai piu' larghe di come sono state catturate */
.mv2--pubblica .mv2-scatto--tel { max-width: 424px; margin-inline: auto; }
.mv2--pubblica .mv2-scatto--tel figcaption { text-align: center; }
@media (min-width: 900px) {
  .mv2--pubblica .mv2-scatto--tel img { max-height: min(82vh, 760px); width: auto; margin-inline: auto; }
}
.mv2--pubblica .mv2-coppia--tel { align-items: start; }

/* ---- il palco dell'hero ----
   La schermata vera su un fondo vivace nel tono del percorso, al posto dello
   sfondo astratto scuro. Sul computer la schermata non supera l'altezza utile
   (a 1366x768 resta larga ~297 px, l'80% della misura dell'app: si legge). */
.mv2--pubblica .mv2-palco {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(16px, 4vw, 34px); border-radius: 26px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .22), transparent 55%),
    linear-gradient(145deg, var(--palco-a, #2563eb), var(--palco-b, #7c3aed));
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8);
}
.mv2--pubblica .mv2-palco--teacher { --palco-a: #7c3aed; --palco-b: #2563eb; }
.mv2--pubblica .mv2-palco--student { --palco-a: #0284c7; --palco-b: #6366f1; }
.mv2--pubblica .mv2-palco--support { --palco-a: #047857; --palco-b: #0ea5e9; }
/* una trama di punti che sfuma: da' profondita' senza disegnare niente */
.mv2--pubblica .mv2-palco::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .32) 1px, transparent 1.3px); background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(160deg, #000 15%, transparent 65%); mask-image: linear-gradient(160deg, #000 15%, transparent 65%);
}
.mv2--pubblica .mv2-palco .mv2-scatto > picture { padding: 0; background: none; border: 0; box-shadow: none; }
.mv2--pubblica .mv2-palco .mv2-scatto img {
  border: 1px solid rgba(255, 255, 255, .45); box-shadow: 0 26px 60px -14px rgba(2, 6, 23, .75);
}
.mv2--pubblica .mv2-palco figcaption {
  color: #fff; font-weight: 500; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); margin-top: .8rem;
}
@media (min-width: 900px) {
  .mv2--pubblica .mv2-palco .mv2-scatto img { max-height: min(72vh, 620px); }
}
/* l'illustrazione al posto della schermata (docenti, dal 27 set 2026): niente palco,
   linee luminose su fondo trasparente, che si posano sul fondo della testata.
   Quadrata, con width/height dichiarati: lo spazio e' riservato prima che arrivi. */
.mv2--pubblica .mv2-illustrato { margin: 0; }
.mv2--pubblica .mv2-illustrato img {
  display: block; width: 100%; height: auto; aspect-ratio: 1; max-width: 520px; margin-inline: auto;
}
@media (max-width: 899px) {
  .mv2--pubblica .mv2-illustrato img { max-width: min(92vw, 460px); }
}
/* il ritorno alla pagina di provenienza, agganciato mentre si scorre, MAI sopra il
   testo (sopra la colonna copriva il titolo) e sempre ben visibile: fondo pieno
   viola-blu come le azioni principali (27 set 2026: «ha perso la scritta ed e' poco
   evidente»). Dove sta dipende da quanto spazio c'e':
   - da 1440px: pillola nel margine sinistro, sotto la testata;
   - 1280-1439px: il margine e' piu' stretto della pillola (la toccherebbe il filo):
     linguetta VERTICALE attaccata al bordo dello schermo, con la scritta intera;
   - 600-1279px: la testata ha il panino e fra logo e panino c'e' posto: pillola li';
   - sotto 600px: fra logo e panino ci sono ~90px, resta la freccia, piena.
   Il testo resta sempre nel link per i lettori di schermo. */
.mv2--pubblica .mv2-indietro { position: sticky; top: 82px; z-index: 50; height: 0; pointer-events: none; }
.mv2--pubblica .mv2-indietro .mv2-dentro { max-width: none; padding-inline: 16px; }
.mv2--pubblica .mv2-indietro .pr-back {
  pointer-events: auto; color: #fff; font-weight: 600; border: 0; padding: 9px 18px;
  background: linear-gradient(135deg, #7c3aed, #2563eb);
  box-shadow: 0 8px 22px -8px rgba(124, 58, 237, .85), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.mv2--pubblica .mv2-indietro .pr-back:hover, .mv2--pubblica .mv2-indietro .pr-back:focus-visible {
  color: #fff; background: linear-gradient(135deg, #7c3aed, #2563eb); filter: brightness(1.12);
  transform: translateY(-1px); box-shadow: 0 12px 26px -8px rgba(124, 58, 237, .95), inset 0 1px 0 rgba(255, 255, 255, .3);
}
@media (min-width: 1280px) and (max-width: 1439px) {
  .mv2--pubblica .mv2-indietro { position: fixed; top: 96px; left: 0; height: auto; }
  .mv2--pubblica .mv2-indietro .mv2-dentro { padding: 0; }
  .mv2--pubblica .mv2-indietro .pr-back {
    writing-mode: vertical-rl; padding: 16px 9px; border-radius: 0 12px 12px 0; letter-spacing: .02em;
  }
  .mv2--pubblica .mv2-indietro .pr-back:hover { transform: translateX(2px); }
}
@media (max-width: 1279px) {
  .mv2--pubblica .mv2-indietro { position: fixed; top: 15px; right: 74px; left: auto; height: auto; z-index: 3500; }
  .mv2--pubblica .mv2-indietro .mv2-dentro { padding: 0; }
  .mv2--pubblica .mv2-indietro .pr-back { height: 40px; padding: 0 16px; }
}
@media (max-width: 599px) {
  .mv2--pubblica .mv2-indietro .pr-back { width: 40px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
  .mv2--pubblica .mv2-indietro .pr-back::before { content: "\2190"; font-size: 19px; line-height: 1; }
}

/* ---- il video della mappa: uno per misura, scelto qui ----
   Il video nascosto non scarica niente: le sorgenti stanno in data-src e
   minerva-v2.js le assegna solo a quello visibile. */
.mv2--pubblica .mv2-video--doppio .mv2-video__v--tel { display: none; }
@media (max-width: 759px) {
  .mv2--pubblica .mv2-video--doppio .mv2-video__v--largo { display: none; }
  .mv2--pubblica .mv2-video--doppio .mv2-video__v--tel { display: block; }
  .mv2--pubblica .mv2-video--doppio { max-width: 424px; margin-inline: auto; }
}
.mv2--pubblica .mv2-video--doppio .mv2-video__fermo { display: none; border: 0; box-shadow: none; background: none; }
.mv2--pubblica .mv2-video--doppio .mv2-video__fermo img {
  display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .16);
}
@media (prefers-reduced-motion: reduce) {
  .mv2--pubblica .mv2-video--doppio .mv2-video__v { display: none !important; }
  .mv2--pubblica .mv2-video--doppio .mv2-video__fermo { display: block; }
}

/* ---- aziende: la schermata si posa sull'angolo della foto ---- */
.mv2--pubblica .mv2-aziende__scatto { margin-top: 0; }
@media (min-width: 900px) {
  .mv2--pubblica .mv2-aziende__scatto { position: relative; width: min(300px, 62%); margin: -120px 0 0 auto; }
}
@media (max-width: 899px) {
  /* sul telefono la schermata e' l'immagine principale, e la foto non c'e' */
  .mv2--pubblica .mv2-aziende__visivo .mv2-aziende__foto { display: none; }
}

/* ---- l'ingrandimento ----
   Solo dove la schermata e' resa sotto l'85% della misura a cui e' stata
   catturata: lo decide minerva-v2.js, che aggiunge .mv2-zoomabile. */
.mv2--pubblica .mv2-scatto { position: relative; }
.mv2--pubblica .mv2-zoomabile img { cursor: zoom-in; }
.mv2--pubblica .mv2-zoom-apri {
  position: absolute; top: 20px; right: 20px; z-index: 2;
  display: inline-flex; align-items: center; gap: .4em; min-height: 36px; padding: 6px 12px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); cursor: zoom-in;
  background: rgba(8, 12, 20, .78); color: #fff; font: inherit; font-size: .82rem;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.mv2--pubblica .mv2-zoom-apri:hover, .mv2--pubblica .mv2-zoom-apri:focus-visible { background: rgba(37, 99, 235, .92); }
.mv2--pubblica .mv2-zoom-apri svg { width: 16px; height: 16px; }
.mv2-zoom {
  max-width: min(96vw, 1440px); max-height: 94vh; padding: 0; border: 0; border-radius: 16px;
  background: #0b0d12; color: #f1f5f9; overflow: auto; box-shadow: 0 40px 120px rgba(0, 0, 0, .8);
}
.mv2-zoom::backdrop { background: rgba(2, 6, 12, .82); }
.mv2-zoom img { display: block; max-width: none; width: auto; height: auto; }
@media (max-width: 1440px) { .mv2-zoom img { max-width: 94vw; } }
.mv2-zoom__chiudi {
  position: sticky; top: 10px; float: right; margin: 10px 10px -46px 0; z-index: 1;
  min-width: 44px; min-height: 44px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(8, 12, 20, .85); color: #fff; font-size: 1.2rem; cursor: pointer;
}
/* sul telefono il vassoio restituisce spazio alla schermata: 8 px e non 12 */
@media (max-width: 759px) {
  .mv2--pubblica .mv2-scatto > picture, .mv2--pubblica .mv2-video__cornice { padding: 8px; border-radius: 16px; }
}

/* ---- niente salti mentre le schermate arrivano (24 set 2026) ------------
   «width:auto» con un tetto d'altezza lasciava l'immagine larga ZERO finche'
   non era scesa, e al suo arrivo la pagina si spostava (CLS 0,127 misurato su
   aziende EN a 1024x768). Qui la larghezza e' sempre il 100%, limitata dal
   tetto d'altezza convertito in larghezza con le misure DICHIARATE
   (--mv2-w/--mv2-h, scritte dal generatore): lo spazio e' giusto prima del
   download, e il risultato visivo e' lo stesso. */
@media (min-width: 900px) {
  .mv2--pubblica .mv2-scatto img[style*="--mv2-w"] {
    width: 100%; height: auto; max-height: none; margin-inline: auto;
    max-width: min(100%, calc(var(--mv2-tetto, min(82vh, 760px)) * var(--mv2-w) / var(--mv2-h)));
  }
  .mv2--pubblica .mv2-scatto--tel img[style*="--mv2-w"] { --mv2-tetto: min(82vh, 760px); }
  .mv2--pubblica .mv2-palco .mv2-scatto img[style*="--mv2-w"] { --mv2-tetto: min(72vh, 620px); }
  .mv2--pubblica .mv2-affianca__figura .mv2-scatto img[style*="--mv2-w"] { --mv2-tetto: 82vh; }
}

/* ── Il filo della pagina docenti (27 set 2026) ──────────────────────────────
   Continua quello dell'illustrazione in testa e attraversa tutta la pagina.
   - Tappe (.mv2-sez--tappa, genera.js TAPPE_DOCENTI): il filo al centro, un nodo per
     tappa, testo e disegno a zig-zag.
   - Sezioni larghe (.mv2-filo, genera.js FILO_DOCENTI): il filo nel margine sinistro,
     dove non attraversa tabelle e schede, con un nodo all'altezza del titolo.
   - Passaggi: --da-centro / --a-centro, una curva nel margine alto / basso della
     sezione larga, che porta il filo dal centro al margine o viceversa.
   - Telefono: il filo corre sempre sul bordo sinistro, niente curve.
   ::before e' il filo. ATTENZIONE: .mv2-sez::before e' gia' il separatore orizzontale
   (height: 1px, right: 0): qui height e right vanno annullati, o il filo e' alto un pixel. */
.mv2--pubblica {
  --filo-a: #8b5cf6; --filo-b: #3b82f6;
  /* il margine sinistro della colonna, 24px prima dell'inizio del testo */
  --filo-x: calc(max(0px, (100% - 1120px) / 2) + var(--mv2-gutter) - 24px);
  --curva-h: clamp(48px, 7vw, 96px);
}
.mv2--pubblica .mv2-sez--tappa, .mv2--pubblica .mv2-filo { position: relative; }
.mv2--pubblica .mv2-sez--tappa { border-top: 0; padding-block: clamp(40px, 6vw, 72px); }
.mv2--pubblica .mv2-sez--tappa::before, .mv2--pubblica .mv2-filo::before {
  top: 0; bottom: 0; right: auto; height: auto; width: 2px; margin-left: -1px;
  background: linear-gradient(var(--filo-a), var(--filo-b));
  box-shadow: 0 0 10px rgba(139, 92, 246, .55);
  transform-origin: top;
}
.mv2--pubblica .mv2-sez--tappa::before { left: 50%; }
.mv2--pubblica .mv2-filo::before { left: var(--filo-x); }
.mv2--pubblica .mv2-filo--da-centro::before { top: var(--curva-h); }
.mv2--pubblica .mv2-filo--a-centro::before { bottom: var(--curva-h); }
/* nasce e finisce sfumando: una maschera, cosi' vale anche col filo acceso dalla cometa */
.mv2--pubblica .mv2-filo--primo::before { -webkit-mask-image: linear-gradient(transparent, #000 45%); mask-image: linear-gradient(transparent, #000 45%); }
.mv2--pubblica .mv2-filo--ultimo::before { -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }

/* i nodi: al centro della tappa, all'altezza del titolo nelle sezioni larghe */
.mv2--pubblica .mv2-sez--tappa::after, .mv2--pubblica .mv2-filo > .mv2-dentro::before {
  content: ""; position: absolute; pointer-events: none;
  width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
  background: #c4b5fd; box-shadow: 0 0 0 4px rgba(139, 92, 246, .25), 0 0 18px 4px rgba(139, 92, 246, .7);
}
.mv2--pubblica .mv2-sez--tappa::after { top: 50%; left: 50%; margin-top: -7px; }
.mv2--pubblica .mv2-filo > .mv2-dentro::before { left: var(--filo-x); top: calc(var(--mv2-ritmo) + .55em); }

/* le curve di raccordo: un SVG che si stira fra il margine e il centro */
.mv2--pubblica .mv2-filo--da-centro::after, .mv2--pubblica .mv2-filo--a-centro > .mv2-dentro::after {
  content: ""; position: absolute; pointer-events: none;
  left: var(--filo-x); width: calc(50% - var(--filo-x)); height: var(--curva-h);
  background: no-repeat center / 100% 100%;
  filter: drop-shadow(0 0 5px rgba(139, 92, 246, .7));
}
.mv2--pubblica .mv2-filo--da-centro::after {
  top: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100 0C100 55 0 45 0 100' fill='none' stroke='%238b5cf6' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
.mv2--pubblica .mv2-filo--a-centro > .mv2-dentro::after {
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0C0 55 100 45 100 100' fill='none' stroke='%233b82f6' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

/* le tappe: testo e disegno a zig-zag */
.mv2--pubblica .mv2-sez--tappa .mv2-dentro {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(64px, 9vw, 120px); align-items: center;
}
.mv2--pubblica .mv2-tappa--sinistra .mv2-tappa__disegno { order: -1; }
.mv2--pubblica .mv2-tappa__disegno { margin: 0; }
.mv2--pubblica .mv2-tappa__disegno img { display: block; width: 100%; height: auto; max-width: 400px; margin-inline: auto; }

/* il filo si disegna mentre si scorre, dove il browser lo sa fare; altrove, e per
   chi ha chiesto meno movimento, e' gia' disegnato */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .mv2--pubblica .mv2-sez--tappa::before, .mv2--pubblica .mv2-filo::before {
      animation: mv2-filo linear both; animation-timeline: view(); animation-range: entry 10% cover 55%;
    }
    .mv2--pubblica .mv2-sez--tappa::after, .mv2--pubblica .mv2-filo > .mv2-dentro::before {
      animation: mv2-nodo linear both; animation-timeline: view(); animation-range: entry 40% cover 35%;
    }
  }
}
@keyframes mv2-filo { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes mv2-nodo { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ── il filo SVG e la cometa (minerva-v2.js, cometa()) ─────────────────────────
   Con JavaScript il filo e' un tracciato solo, disegnato dallo script dietro al
   contenuto (serpeggia fra le tappe e visita i disegni): i pezzi CSS qui sopra
   restano solo come ripiego senza JavaScript, e si spengono. */
.mv2-filo-js.mv2--pubblica .mv2-sez--tappa::before, .mv2-filo-js.mv2--pubblica .mv2-sez--tappa::after,
.mv2-filo-js.mv2--pubblica .mv2-filo::before, .mv2-filo-js.mv2--pubblica .mv2-filo::after,
.mv2-filo-js.mv2--pubblica .mv2-filo > .mv2-dentro::before, .mv2-filo-js.mv2--pubblica .mv2-filo > .mv2-dentro::after { display: none; }
.mv2--pubblica #mv2-contenuto { position: relative; }
/* SOPRA a tutto il contenuto, demo e schede comprese (proprietario, 28 set 2026: «la
   cometa non disturba, falla passare sempre sopra»), ma sotto testata, barra fissa e
   pulsante di ritorno. pointer-events: none: non riceve ne' clic ne' tocchi, i comandi
   sotto restano tutti raggiungibili (provato con elementFromPoint, clic, tocco e Invio). */
.mv2-filo-svg { position: absolute; left: 0; top: 0; z-index: 30; pointer-events: none; overflow: visible; }
.mv2-filo-svg path { fill: none; stroke-linecap: round; }
.mv2-filo-svg__spento { stroke-width: 2; opacity: .2; }
.mv2-filo-svg__acceso { stroke-width: 2; filter: drop-shadow(0 0 4px rgba(139, 92, 246, .8)); }
.mv2-filo-svg__coda { stroke-width: 3.5; filter: drop-shadow(0 0 6px rgba(196, 181, 253, .9)); }
.mv2-filo-svg__testa { fill: #fff; filter: drop-shadow(0 0 5px #e9d5ff) drop-shadow(0 0 14px rgba(139, 92, 246, .95)) drop-shadow(0 0 28px rgba(59, 130, 246, .6)); }
.mv2-filo-svg__nodo { fill: #c4b5fd; opacity: .3; transform-box: fill-box; transform-origin: center; transform: scale(.6);
  transition: opacity .35s ease, transform .35s ease; }
.mv2-filo-svg__nodo.mv2-acceso { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 6px rgba(139, 92, 246, .95)); }
/* i disegni delle tappe si accendono quando la cometa li raggiunge; prima sono
   accennati. Solo con la cometa: con meno movimento restano accesi. */
.mv2-cometa-attiva.mv2--pubblica .mv2-tappa__disegno img { opacity: .38; filter: saturate(.5); transition: opacity .5s ease, filter .5s ease; }
.mv2-cometa-attiva.mv2--pubblica .mv2-sez--tappa.mv2-acceso .mv2-tappa__disegno img {
  opacity: 1; filter: saturate(1.1) drop-shadow(0 0 18px rgba(139, 92, 246, .45));
}
/* e nelle sezioni larghe l'icona del titolo */
.mv2-cometa-attiva.mv2--pubblica .mv2-filo .mv2-titolo--icona .mv2-icona { transition: box-shadow .4s ease, color .4s ease; }
.mv2-cometa-attiva.mv2--pubblica .mv2-filo.mv2-acceso .mv2-titolo--icona .mv2-icona { box-shadow: 0 0 0 1px rgba(196, 181, 253, .6), 0 0 18px 2px rgba(139, 92, 246, .6); color: #e9d5ff; }

@media (max-width: 899px) {
  /* un filo solo, sul bordo sinistro, nel margine della pagina */
  .mv2--pubblica { --filo-x: max(7px, calc(var(--mv2-gutter) / 2)); }
  .mv2--pubblica .mv2-sez--tappa::before { left: var(--filo-x); }
  .mv2--pubblica .mv2-sez--tappa::after { left: var(--filo-x); top: calc(clamp(40px, 6vw, 72px) + 4px); margin-top: 0; }
  /* nodo piu' piccolo: nel margine del telefono (circa 20px) quello da 14px toccava i titoli */
  .mv2--pubblica .mv2-sez--tappa::after, .mv2--pubblica .mv2-filo > .mv2-dentro::before {
    width: 9px; height: 9px; margin-left: -4.5px; box-shadow: 0 0 0 3px rgba(139, 92, 246, .25), 0 0 12px 3px rgba(139, 92, 246, .7);
  }
  .mv2--pubblica .mv2-filo--da-centro::before { top: 0; }
  .mv2--pubblica .mv2-filo--a-centro::before { bottom: 0; }
  .mv2--pubblica .mv2-filo--da-centro::after, .mv2--pubblica .mv2-filo--a-centro > .mv2-dentro::after { display: none; }
  .mv2--pubblica .mv2-sez--tappa .mv2-dentro { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .mv2--pubblica .mv2-tappa__disegno { order: -1; }
  .mv2--pubblica .mv2-tappa__disegno img { max-width: min(72vw, 300px); margin-inline: 0; }
}

/* ── La demo come un video (genera.js COPERTINE_DEMO/comandiVideo, minerva-v2.js demo()) ──
   La locandina sta SOPRA il riquadro della demo e ne prende la forma esatta
   (proprietario: «rispetta il formato della demo»): premendo ▶ non si sposta niente.
   Sotto, la barra dei comandi come in un lettore video. Senza JavaScript la
   locandina non c'e' e la demo si vede intera, ferma allo stato finale. */
.mv2--pubblica .mv2-demo__schermo { position: relative; }
.mv2--pubblica .mv2-demo__copertina { display: none; }
.mv2--pubblica .mv2-demo--chiusa .mv2-demo__copertina {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  position: absolute; inset: 0; z-index: 5; overflow: hidden; border-radius: 16px; background: #05060c;
}
.mv2--pubblica .mv2-demo__copertina picture, .mv2--pubblica .mv2-demo__copertina img {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
/* l'insegnante sta nel terzo destro: ritagliando, resta lei */
.mv2--pubblica .mv2-demo__copertina img { object-fit: cover; object-position: 72% 40%; }
.mv2--pubblica .mv2-demo__copertina::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 55% at 50% 50%, rgba(5, 6, 12, .55), transparent 75%), linear-gradient(transparent 55%, rgba(5, 6, 12, .75));
}
.mv2--pubblica .mv2-demo__guarda {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 14px; cursor: pointer; border: 0; border-radius: 999px;
  padding: 12px 26px 12px 12px; font: inherit; font-size: 1.08rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #7c3aed, #2563eb);
  box-shadow: 0 14px 40px -8px rgba(124, 58, 237, .95), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .15s ease, filter .15s ease;
}
.mv2--pubblica .mv2-demo__guarda:hover, .mv2--pubblica .mv2-demo__guarda:focus-visible { filter: brightness(1.12); transform: scale(1.03); }
.mv2--pubblica .mv2-demo__guarda-icona {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, .2); position: relative;
  animation: mv2-guarda 2.2s ease-out infinite;
}
.mv2--pubblica .mv2-demo__guarda-icona::after {
  content: ""; position: absolute; left: 20px; top: 15px; border-style: solid; border-width: 11px 0 11px 17px;
  border-color: transparent transparent transparent #fff;
}
@keyframes mv2-guarda { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .45); } 70%, 100% { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); } }
@media (prefers-reduced-motion: reduce) { .mv2--pubblica .mv2-demo__guarda-icona { animation: none; } }
.mv2--pubblica .mv2-demo__guarda-nota {
  position: relative; z-index: 1; margin: 0; padding-inline: 20px; max-width: 34ch; text-align: center;
  color: #e2e8f0; font-size: .9rem; text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
/* sul telefono il pulsante copriva la locandina («nasconde un po' troppo», 28 set
   2026): piu' piccolo, e con la nota in basso, dove la locandina e' gia' in ombra */
@media (max-width: 899px) {
  .mv2--pubblica .mv2-demo--chiusa .mv2-demo__copertina { justify-content: flex-end; gap: 8px; padding-bottom: 18px; }
  .mv2--pubblica .mv2-demo__guarda { gap: 10px; padding: 6px 16px 6px 6px; font-size: .92rem; }
  .mv2--pubblica .mv2-demo__guarda-icona { width: 36px; height: 36px; }
  .mv2--pubblica .mv2-demo__guarda-icona::after { left: 14px; top: 10px; border-width: 8px 0 8px 12px; }
  .mv2--pubblica .mv2-demo__guarda-nota { font-size: .76rem; max-width: 38ch; }
}
/* sotto la locandina lo stato direbbe gia' «pronta per la revisione»: nascosto
   finche' la demo non parte, ma lo spazio resta (niente salti) */
.mv2--pubblica .mv2-demo--chiusa .mv2-demo__stato { visibility: hidden; }

/* la barra dei comandi */
.mv2--pubblica .mv2-vc { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.mv2--pubblica .mv2-vc__play, .mv2--pubblica .mv2-vc__ricomincia {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer; position: relative; color: #fff;
}
.mv2--pubblica .mv2-vc__play { background: linear-gradient(135deg, #7c3aed, #2563eb); box-shadow: 0 8px 20px -8px rgba(124, 58, 237, .9); }
.mv2--pubblica .mv2-vc__ricomincia { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); }
.mv2--pubblica .mv2-vc__play:hover, .mv2--pubblica .mv2-vc__ricomincia:hover { filter: brightness(1.15); }
/* ▶ quando e' fermo, in pausa o finito; ❚❚ mentre va */
.mv2--pubblica .mv2-vc__play::before {
  content: ""; position: absolute; left: 16px; top: 13px; border-style: solid; border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent #fff;
}
.mv2--pubblica .mv2-demo[data-mv2-motore="inCorso"] .mv2-vc__play::before {
  left: 14px; top: 13px; width: 5px; height: 16px; border: 0; background: #fff; box-shadow: 9px 0 0 #fff;
}
.mv2--pubblica .mv2-vc__ricomincia::before {
  content: "\21BB"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 20px; line-height: 1;
}
.mv2--pubblica .mv2-vc__traccia {
  flex: 1 1 auto; position: relative; height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .12); cursor: pointer;
}
.mv2--pubblica .mv2-vc__traccia::before { content: ""; position: absolute; inset: -12px 0; }   /* piu' facile da toccare */
.mv2--pubblica .mv2-vc__traccia:focus-visible { outline: 2px solid #a78bfa; outline-offset: 4px; }
.mv2--pubblica .mv2-vc__riempito {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; background: linear-gradient(90deg, #7c3aed, #3b82f6);
  box-shadow: 0 0 10px rgba(139, 92, 246, .7);
}
.mv2--pubblica .mv2-vc__traccia i { position: absolute; top: -3px; width: 2px; height: 14px; margin-left: -1px; background: rgba(5, 6, 12, .9); border-radius: 1px; }
.mv2--pubblica .mv2-vc__passo { flex: 0 0 auto; font-size: .85rem; color: var(--mv2-testo-2); min-width: 7.5em; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 599px) { .mv2--pubblica .mv2-vc__passo { min-width: 0; } }
.mv2--pubblica .mv2-demo--video .mv2-demo__stato { margin-top: 10px; }

/* sul telefono il palco alto quanto lo schermo, e scorre da solo fino al passo in
   corso (demo(): adatta() e segui()); si puo' scorrere anche col dito */
/* nel lettore sul telefono il contenuto si riduce fino a stare nello schermo
   (minerva-v2.js adatta()): niente scorrimento interno, lo si guarda come un video */
.mv2--pubblica .mv2-demo--scalata .mv2-demo__palco { overflow: hidden; }
/* e il bordo interno si stringe: ogni pixel dato al contenuto e' scala in piu' */
@media (max-width: 899px) {
  .mv2--pubblica .mv2-demo--video .mv2-demo__palco { padding: 12px 10px; }
  /* una cornice sola: quella del palco (dentro c'era la finestra dell'app, una seconda) */
  .mv2--pubblica .mv2-demo--video .mv2-demo__palco > .mv2-app { padding: 0; border: 0; background: none; }
}
.mv2--pubblica .mv2-demo--scalata .mv2-demo__palco > * { transform-origin: 0 0; max-width: none; }
.mv2--pubblica .mv2-demo--adattata .mv2-demo__palco {
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent); mask-image: linear-gradient(#000 calc(100% - 28px), transparent);
}

/* ── I disegni delle sezioni larghe (genera.js DISEGNI_SEZIONI, 28 set 2026) ──
   «testa»: titolo e introduzione a sinistra, disegno a destra; «lato» (domande): il
   contenuto a sinistra e il disegno a destra, agganciato mentre si scorre. Come i
   disegni delle tappe, si accendono quando la cometa arriva al titolo. */
.mv2--pubblica .mv2-sez-disegno { margin: 0; }
.mv2--pubblica .mv2-sez-disegno img { display: block; width: 100%; height: auto; max-width: 340px; margin-inline: auto; }
@media (min-width: 900px) {
  .mv2--pubblica .mv2-sez-testa {
    display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center;
    margin-bottom: clamp(20px, 3vw, 36px);
  }
  .mv2--pubblica .mv2-sez-lato { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
  .mv2--pubblica .mv2-sez-lato .mv2-sez-disegno { position: sticky; top: 140px; }
}
@media (max-width: 899px) {
  .mv2--pubblica .mv2-sez-testa, .mv2--pubblica .mv2-sez-lato { display: flex; flex-direction: column; }
  .mv2--pubblica .mv2-sez-disegno { margin: 8px 0 22px; }
  .mv2--pubblica .mv2-sez-disegno img { max-width: min(66vw, 260px); margin-inline: 0; }
  /* sul telefono il disegno viene PRIMA del titolo, come nelle tappe (28 set 2026,
     «l'immagine prima del testo»): cosi' due disegni non si toccano mai, fra l'uno e
     l'altro c'e' sempre almeno il titolo e il testo di una sezione */
  .mv2--pubblica .mv2-sez-testa .mv2-sez-disegno,
  .mv2--pubblica .mv2-sez-lato .mv2-sez-disegno { order: -1; }
}
.mv2-cometa-attiva.mv2--pubblica .mv2-filo .mv2-sez-disegno img { opacity: .38; filter: saturate(.5); transition: opacity .5s ease, filter .5s ease; }
.mv2-cometa-attiva.mv2--pubblica .mv2-filo.mv2-acceso .mv2-sez-disegno img { opacity: 1; filter: saturate(1.1) drop-shadow(0 0 18px rgba(139, 92, 246, .45)); }

/* ── Sostegno in evidenza, racconto, verifiche (pagina docenti, 28 set 2026) ── */
.mv2--pubblica .mv2-evidenza {
  position: relative; border-radius: 24px; padding: clamp(22px, 4vw, 44px);
  background: linear-gradient(160deg, rgba(16, 185, 129, .10), rgba(124, 58, 237, .10) 55%, rgba(37, 99, 235, .08));
  border: 1px solid rgba(52, 211, 153, .35);
  box-shadow: 0 30px 80px -40px rgba(16, 185, 129, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.mv2--pubblica .mv2-evidenza__icf {
  margin-top: clamp(24px, 4vw, 40px); padding-top: clamp(20px, 3vw, 32px); border-top: 1px solid rgba(255, 255, 255, .1);
}
.mv2--pubblica .mv2-gettoni { list-style: none; margin: 12px 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.mv2--pubblica .mv2-gettoni li {
  padding: 8px 14px; border-radius: 999px; font-size: .92rem; color: #e9d5ff;
  background: rgba(139, 92, 246, .12); border: 1px solid rgba(167, 139, 250, .35);
}
.mv2--pubblica .mv2-evidenza .mv2-gettoni li { color: #d1fae5; background: rgba(16, 185, 129, .12); border-color: rgba(52, 211, 153, .4); }
/* cinque schede: tre sopra e due sotto, a tutta larghezza (su quattro colonne la
   quinta restava sola su una riga) */
@media (min-width: 900px) {
  .mv2--pubblica #mv2-verifiche .mv2-trio { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .mv2--pubblica #mv2-verifiche .mv2-trio > :nth-child(-n+3) { grid-column: span 2; }
  .mv2--pubblica #mv2-verifiche .mv2-trio > :nth-child(n+4) { grid-column: span 3; }
}

/* ── La demo della mappa, su una tela (genera.js demoMappe, 28 set 2026) ──────
   Lo stato di base e' quello FINALE (colori, nodo spostato): e' cio' che vede chi
   non ha JavaScript. Con il motore della demo, finche' la tavolozza o il cursore
   non sono comparsi, i nodi restano neutri e il nodo mobile al suo posto iniziale. */
.mv2 .mv2-mappa2__barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.mv2 .mv2-mappa2__barra .mv2-app__domanda { margin: 0; }
.mv2 .mv2-mappa2__tavolozza { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--mv2-testo-2); }
.mv2 .mv2-mappa2__tavolozza span { margin-right: 4px; }
.mv2 .mv2-mappa2__tavolozza i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .5); }
.mv2 .mv2-mappa2__tavolozza i[data-tinta="0"] { background: #8b5cf6; }
.mv2 .mv2-mappa2__tavolozza i[data-tinta="1"] { background: #22d3ee; }
.mv2 .mv2-mappa2__tavolozza i[data-tinta="2"] { background: #34d399; }
.mv2 .mv2-mappa2__tavolozza i[data-tinta="3"] { background: #fb923c; }
.mv2 .mv2-mappa2__tavolozza i[data-tinta="4"] { background: #f472b6; }
.mv2 .mv2-mappa2 {
  position: relative; aspect-ratio: 16 / 10; margin: 12px 0; border-radius: 16px; overflow: hidden;
  background-color: #0b0f1a; background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.4px); background-size: 20px 20px;
  border: 1px solid rgba(255, 255, 255, .12);
}
/* sul telefono quadrata: deve stare TUTTA nello schermo insieme ai comandi (con 4:5
   il riquadro scorreva e tagliava la parte alta della mappa) */
@media (max-width: 599px) { .mv2 .mv2-mappa2 { aspect-ratio: 1; } }
.mv2 .mv2-mappa2__linee { position: absolute; inset: 0; width: 100%; height: 100%; }
.mv2 .mv2-mappa2__linee line { stroke-width: 2; transition: stroke .6s ease, opacity .5s ease; }
.mv2 .mv2-mappa2__nodo {
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); transform: translate(-50%, -50%);
  /* width: max-content: un nodo assoluto vicino al bordo destro si restringerebbe
     allo spazio che resta fino al bordo (Luce del sole finiva largo 41px, su 3 righe) */
  display: flex; flex-direction: column; align-items: center; gap: 4px; width: max-content; max-width: 10em;
  padding: 6px 12px; border-radius: 12px; font-size: .82rem; line-height: 1.2; text-align: center; color: #f1f5f9;
  border: 1.5px solid; transition: left 2s ease-in-out, top 2s ease-in-out, background-color .6s ease, border-color .6s ease, border-radius .6s ease, opacity .5s ease, box-shadow .3s ease;
}
.mv2 .mv2-mappa2__nodo--centro {
  z-index: 2; padding: 10px 20px; border-radius: 999px; font-size: 1rem; font-weight: 700; color: #fff; border: 0;
  background: linear-gradient(135deg, #7c3aed, #2563eb); box-shadow: 0 0 24px rgba(124, 58, 237, .55);
}
.mv2 .mv2-mappa2__nodo--ramo { z-index: 1; font-weight: 600; border-radius: 999px; }
.mv2 .mv2-mappa2__nodo--foto { padding: 5px 9px 7px; }
.mv2 .mv2-mappa2__foto img { display: block; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, .7);
  transition: width .6s ease, height .6s ease, border-width .6s ease; }
/* prima del passo delle foto il nodo non tiene un riquadro vuoto: la foto cresce
   quando arriva (le linee la seguono, minerva-v2.js seguiLinee) */
.mv2-js .mv2-app--mappe2 .mv2-mappa2__foto:not(.mv2-vista) img { width: 0 !important; height: 0 !important; border-width: 0; }
@media (max-width: 599px) {
  /* la disposizione del telefono (genera.js MAPPA_DEMO, seconda coppia) */
  .mv2 .mv2-mappa2__nodo { left: calc(var(--xm) * 1%); top: calc(var(--ym) * 1%); }
  .mv2-js .mv2-app--mappe2:not(:has(.mv2-mappa2__cursore.mv2-vista)) [data-sposta] { left: calc(var(--x0m) * 1%); top: calc(var(--y0m) * 1%); }
  .mv2 .mv2-mappa2__nodo { font-size: .64rem; padding: 3px 7px; max-width: 7.2em; gap: 2px; }
  .mv2 .mv2-mappa2__nodo--centro { font-size: .76rem; padding: 6px 11px; }
  .mv2 .mv2-mappa2__foto img { width: 32px; height: 32px; }
}
/* i colori dei rami (stato finale) */
.mv2 .mv2-mappa2__nodo[data-colore="0"] { background: rgba(139, 92, 246, .24); border-color: #8b5cf6; }
.mv2 .mv2-mappa2__nodo[data-colore="1"] { background: rgba(34, 211, 238, .18); border-color: #22d3ee; }
.mv2 .mv2-mappa2__nodo[data-colore="2"] { background: rgba(52, 211, 153, .18); border-color: #34d399; }
.mv2 .mv2-mappa2__nodo[data-colore="3"] { background: rgba(251, 146, 60, .2); border-color: #fb923c; }
.mv2 .mv2-mappa2__linee line[data-colore="0"] { stroke: #8b5cf6; }
.mv2 .mv2-mappa2__linee line[data-colore="1"] { stroke: #22d3ee; }
.mv2 .mv2-mappa2__linee line[data-colore="2"] { stroke: #34d399; }
.mv2 .mv2-mappa2__linee line[data-colore="3"] { stroke: #fb923c; }
/* prima dei colori: nodi e linee neutri, i rami ancora rettangoli */
.mv2-js .mv2-app--mappe2:not(:has(.mv2-mappa2__tavolozza.mv2-vista)) .mv2-mappa2__nodo:not(.mv2-mappa2__nodo--centro) {
  background: #111827; border-color: rgba(255, 255, 255, .28);
}
.mv2-js .mv2-app--mappe2:not(:has(.mv2-mappa2__tavolozza.mv2-vista)) .mv2-mappa2__nodo--ramo { border-radius: 10px; }
.mv2-js .mv2-app--mappe2:not(:has(.mv2-mappa2__tavolozza.mv2-vista)) .mv2-mappa2__linee line { stroke: rgba(203, 213, 225, .45); }
/* prima del trascinamento: il nodo mobile al suo posto generato */
.mv2-js .mv2-app--mappe2:not(:has(.mv2-mappa2__cursore.mv2-vista)) [data-sposta] { left: calc(var(--x0) * 1%); top: calc(var(--y0) * 1%); }
/* il cursore si vede solo mentre trascina; il nodo afferrato si solleva */
.mv2 .mv2-mappa2__cursore {
  position: absolute; right: -12px; bottom: -20px; width: 22px; height: 26px; pointer-events: none;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 26'%3E%3Cpath d='M2 2l17 11-8 1.5 4.5 8.5-3 1.5-4.5-8.5L2 21z' fill='%23fff' stroke='%23111827' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6));
}
/* tre trascinamenti, uno alla volta: ogni nodo mobile parte dopo il suo --ritardo, e
   il cursore compare su di lui solo mentre lo porta (1,4 s) */
.mv2 .mv2-mappa2__nodo[data-sposta] {
  transition: left 1.3s ease-in-out var(--ritardo, 0ms), top 1.3s ease-in-out var(--ritardo, 0ms),
    background-color .6s ease, border-color .6s ease, border-radius .6s ease, opacity .5s ease;
}
/* nascosto sempre, TRANNE nel passo dei trascinamenti: li' comanda l'animazione (un
   !important la batterebbe, e il cursore non comparirebbe mai) */
.mv2 .mv2-demo:not([data-mv2-passo="4"][data-mv2-motore="inCorso"]) .mv2-mappa2__cursore { opacity: 0 !important; }
.mv2 .mv2-demo[data-mv2-passo="4"][data-mv2-motore="inCorso"] .mv2-mappa2__cursore { animation: mv2-cursore 1.5s ease var(--ritardo, 0ms) both; }
.mv2 .mv2-demo[data-mv2-passo="4"][data-mv2-motore="inCorso"] [data-sposta] { animation: mv2-afferra 1.5s ease var(--ritardo, 0ms) both; }
@keyframes mv2-cursore { 0% { opacity: 0; } 8%, 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes mv2-afferra {
  0%, 100% { box-shadow: none; }
  8%, 88% { box-shadow: 0 10px 26px rgba(0, 0, 0, .55), 0 0 0 3px rgba(251, 146, 60, .4); }
}
@media (prefers-reduced-motion: reduce) { .mv2 .mv2-mappa2__nodo { transition: none; } }
/* i telefoni piu' stretti (360px): la tela e' di circa 230px */
@media (max-width: 380px) {
  .mv2 .mv2-mappa2__nodo { font-size: .56rem; padding: 2px 6px; max-width: 6.8em; }
  .mv2 .mv2-mappa2__nodo--centro { font-size: .68rem; padding: 5px 9px; }
  .mv2 .mv2-mappa2__foto img { width: 26px; height: 26px; }
}

/* «torna su» (28 set 2026): a destra, agganciato, sopra la barra fissa del telefono
   (--mv2-barra la misura minerva-v2.js) e sopra il filo della cometa */
.mv2 .mv2-su {
  position: fixed; right: 18px; bottom: calc(var(--mv2-barra, 0px) + 18px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer; color: #fff;
  background: linear-gradient(135deg, #7c3aed, #2563eb);
  box-shadow: 0 10px 26px -8px rgba(124, 58, 237, .9), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .15s ease, filter .15s ease;
}
.mv2 .mv2-su::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -3px 0 0 -6px;
  border-left: 2.5px solid #fff; border-top: 2.5px solid #fff; transform: rotate(45deg);
}
.mv2 .mv2-su:hover, .mv2 .mv2-su:focus-visible { filter: brightness(1.15); transform: translateY(-2px); }
@media print { .mv2 .mv2-su { display: none; } }

/* i due pulsanti della testata affiancati sul telefono, su due colonne (28 set 2026,
   il proprietario: «mettili sulla stessa riga, su due colonne») */
@media (max-width: 899px) {
  .mv2--pubblica .mv2-hero .mv2-azioni { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; }
  .mv2--pubblica .mv2-hero .mv2-azioni .mv2-cta { min-height: 52px; padding: 10px 12px; font-size: .88rem; line-height: 1.25; border-radius: 16px; }
}