/* 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-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); }
}

/* 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; }