/* =========================================================================
   Metagroup sito v2 · foglio di stile dei prototipi (fase 3, rev. 3: marchio "direzione D")
   Prefisso classi: mg-   ·  Variabili: --mg-*
   Fase 4: questo file e' servito INTERO come mg-base.<hash>.css dopo selectors.css di Oxygen (wp/deploy.sh + metagroup-golos.php);
   l'import in Oxygen (collection "mg-base") serve solo a far esistere le classi per html-to-page.
   Marchio direzione D (27/10/2026): wordmark "metagroup" in Golos Text 700, anello vuoto · linea · punto verde pieno sopra "meta".
   Font unico: Golos Text (OFL). Nessun font mono: date, orari e dati usano Golos con font-variant-numeric: tabular-nums (.mg-dato).
   Palette D (brand/direzione-D/note.md): Nero fumo / Carta / Bianco / Inchiostro / Grigio registro / Grigio su scuro /
   Verde registro (solo su chiaro) / Verde chiaro (solo su scuro) / Linea / Linea scura / Ambra e Rosso timbro (solo stati).
   Niente Carta 2: le superfici rialzate su Carta sono Bianco con bordo Linea; su Nero fumo restano Nero fumo con bordo Linea scura.
   ========================================================================= */

/* ---------- 1. Token di marchio (palette D, non cambiano mai) ---------- */
:root {
  /* Neutri (stile Apple, 30/10/2026: fasce piene Bianco / Grigio Apple / Nero, tessere senza bordo) */
  --mg-nero: #000000;            /* Nero: fondo di hero, CTA, fasce scure */
  --mg-nero-2: #1D1D1F;          /* tessere su nero, barra emergenza */
  --mg-carta: #F5F5F7;           /* ex Carta: ora testo chiaro su nero (19,29) */
  --mg-grigio-apple: #F5F5F7;    /* fascia grigia e tessere su bianco */
  --mg-bianco: #FFFFFF;          /* fascia bianca e tessere sulla fascia grigia */
  --mg-inchiostro: #1D1D1F;      /* testo corrente su chiaro (16,83 su bianco) */
  --mg-grigio: #6E6E73;          /* testo secondario su chiaro: 5,07 su bianco, 4,66 su grigio. Mai sotto 14 px, mai su scuro */
  --mg-grigio-su-scuro: #A1A1A6; /* testo secondario su scuro: 8,16 su nero, 6,54 su #1D1D1F. Mai su chiaro */
  --mg-linea-chiara: #D2D2D7;    /* solo separatori di elenchi e FAQ */
  --mg-linea-scura: #424245;     /* solo separatori su nero */
  --mg-grigio-bordo: #86868B;    /* bordi di campi e scelte su chiaro (3,62 su bianco, >= 3:1): mai testo */

  /* Verdi: uno per superficie */
  --mg-verde: #1F6B3A;           /* Verde registro: link, pulsanti (testo Carta), punto del segno. SOLO su chiaro (5,98 su Carta · 6,52 su Bianco) */
  --mg-verde-chiaro: #6CC47A;    /* Verde chiaro: accento, punto del segno e pulsanti (testo Nero fumo) SOLO su scuro (8,57) */
  --mg-verde-velo: rgba(31, 107, 58, .10);          /* velo su chiaro: scelta selezionata, esito; mai testo */
  --mg-verde-velo-scuro: rgba(108, 196, 122, .14);  /* velo su scuro */

  /* Stati (solo per stati: riquadro test, avvisi, errori dei moduli, schemi, timeline; mai titoli, pulsanti o sfondi di sezione) */
  --mg-ambra: #8A5A0B;           /* attenzione su chiaro: 5,43 su Carta · 5,92 su Bianco · 4,76 sul velo 10 % su Carta */
  --mg-ambra-chiara: #E2A23B;    /* attenzione su scuro: 8,26 */
  --mg-ambra-velo: rgba(138, 90, 11, .10);
  --mg-ambra-velo-scuro: rgba(226, 162, 59, .14);
  --mg-rosso: #A3301F;           /* fermo / errore su chiaro: 6,42 su Carta · 7,00 su Bianco */
  --mg-rosso-chiaro: #E57362;    /* fermo / errore su scuro: 6,07 */
  --mg-rosso-velo: rgba(163, 48, 31, .10);
  --mg-rosso-velo-scuro: rgba(229, 115, 98, .12);

  /* Tipografia: una sola famiglia */
  --mg-font: "Golos Text", "Helvetica Neue", Arial, sans-serif;
  --mg-t-display: clamp(2.5rem, 1.5rem + 4.2vw, 4.75rem);
  --mg-t-h1: clamp(2.5rem, 6.4vw, 5.25rem);   /* 40 -> 84 px */
  --mg-t-h2: clamp(2.25rem, 4.6vw, 3.5rem);   /* 36 -> 56 px */
  --mg-t-h3: clamp(1.1875rem, 1.05rem + .55vw, 1.4375rem);
  --mg-t-lead: clamp(1.125rem, 1.02rem + .5vw, 1.375rem);
  --mg-t-corpo: 1.0625rem;      /* 17 px: pagine servizio */
  --mg-t-lettura: 1.125rem;     /* 18 px: guide lunghe */
  --mg-t-piccolo: .9375rem;
  --mg-t-etichetta: .875rem;    /* 14 px: etichette in maiuscoletto, Golos 600 */
  --mg-lh-corpo: 1.6;
  --mg-lh-titoli: 1.1;
  --mg-misura: 68ch;            /* lunghezza riga per la lettura */

  /* Segno del marchio: punto 12 px, anello e linea 3 px (nel logo: punto 0,44 h, anello e linea 0,14 h) */
  --mg-punto: 12px;
  --mg-tratto: 3px;

  /* Spaziature (scala 4 px) */
  --mg-s1: .25rem; --mg-s2: .5rem; --mg-s3: .75rem; --mg-s4: 1rem;
  --mg-s5: 1.5rem; --mg-s6: 2rem; --mg-s7: 3rem; --mg-s8: 4rem;
  --mg-s9: 6rem; --mg-s10: 8rem;
  --mg-sezione: clamp(3.5rem, 7vw, 7rem);
  --mg-gutter: clamp(1rem, 4vw, 2rem);
  --mg-contenitore: 1200px;
  --mg-contenitore-stretto: 840px;

  /* Forme */
  --mg-r-s: 8px; --mg-r-m: 18px; --mg-r-l: 28px; --mg-r-pill: 980px;
  --mg-durata: 220ms;
  --mg-curva: cubic-bezier(.2, .7, .2, 1);

  color-scheme: light dark;
}

/* ---------- 2. Token semantici per tema (si applicano per sezione; una sola classe per regola: Oxygen risolve le classi degli elementi solo sui selettori "class" semplici) ---------- */
.mg-scuro {
  --mg-sfondo: var(--mg-nero);
  --mg-sfondo-2: var(--mg-nero-2);              /* superficie rialzata su nero */
  --mg-tessera: var(--mg-nero-2);               /* tessere sulla fascia nera */
  --mg-campo-bg: var(--mg-nero-2);
  --mg-testo: var(--mg-carta);
  --mg-testo-2: var(--mg-grigio-su-scuro);      /* 8,42 */
  --mg-testo-3: var(--mg-grigio-su-scuro);
  --mg-linea: var(--mg-linea-scura);
  --mg-accento: var(--mg-verde-chiaro);
  --mg-accento-testo: var(--mg-verde-chiaro);   /* 8,57 su Nero fumo */
  --mg-accento-velo: var(--mg-verde-velo-scuro);
  --mg-bottone-bg: var(--mg-verde-chiaro);
  --mg-bottone-testo: var(--mg-nero);           /* 8,57 */
  --mg-bottone-bg-hover: color-mix(in srgb, var(--mg-verde-chiaro) 82%, var(--mg-carta)); /* stato transitorio, non una superficie: Nero sopra 9,7 */
  --mg-bordo-controllo: var(--mg-grigio-su-scuro); /* bordi di campi e scelte: 8,42 (WCAG 1.4.11 ≥ 3:1) */
  --mg-focus: var(--mg-verde-chiaro);
  --mg-attenzione: var(--mg-ambra-chiara);
  --mg-attenzione-velo: var(--mg-ambra-velo-scuro);
  --mg-fermo: var(--mg-rosso-chiaro);
  --mg-fermo-velo: var(--mg-rosso-velo-scuro);
  --mg-punto-vuoto: var(--mg-carta);            /* anello e linea del segno */
  color-scheme: dark;
}
.mg-chiaro {
  --mg-sfondo: var(--mg-bianco);
  --mg-sfondo-2: var(--mg-grigio-apple);        /* superficie rialzata: grigio Apple */
  --mg-tessera: var(--mg-grigio-apple);         /* tessere sulla fascia bianca */
  --mg-campo-bg: var(--mg-bianco);
  --mg-testo: var(--mg-inchiostro);
  --mg-testo-2: var(--mg-grigio);               /* 5,88 su Carta · 6,41 su Bianco */
  --mg-testo-3: var(--mg-grigio);
  --mg-linea: var(--mg-linea-chiara);
  --mg-accento: var(--mg-verde);
  --mg-accento-testo: var(--mg-verde);          /* 5,98 su Carta · 6,52 su Bianco */
  --mg-accento-velo: var(--mg-verde-velo);
  --mg-bottone-bg: var(--mg-verde);
  --mg-bottone-testo: var(--mg-bianco);         /* 6,52 (nero su Verde registro sarebbe 2,81: vietato) */
  --mg-bottone-bg-hover: color-mix(in srgb, var(--mg-verde) 86%, var(--mg-nero)); /* Carta sopra 7,0 */
  --mg-bordo-controllo: var(--mg-grigio-bordo);       /* 5,88 su Carta */
  --mg-focus: var(--mg-verde);                  /* 5,98 */
  --mg-attenzione: var(--mg-ambra);
  --mg-attenzione-velo: var(--mg-ambra-velo);
  --mg-fermo: var(--mg-rosso);
  --mg-fermo-velo: var(--mg-rosso-velo);
  --mg-punto-vuoto: var(--mg-nero);
  color-scheme: light;
}
/* Fascia grigia: come .mg-chiaro ma con fondo Grigio Apple e tessere bianche */
.mg-chiaro-2 {
  --mg-sfondo: var(--mg-grigio-apple);
  --mg-sfondo-2: var(--mg-bianco);
  --mg-tessera: var(--mg-bianco);
  --mg-campo-bg: var(--mg-bianco);
  --mg-testo: var(--mg-inchiostro);
  --mg-testo-2: var(--mg-grigio);               /* 4,66 su grigio */
  --mg-testo-3: var(--mg-grigio);
  --mg-linea: var(--mg-linea-chiara);
  --mg-accento: var(--mg-verde);
  --mg-accento-testo: var(--mg-verde);          /* 5,99 su grigio */
  --mg-accento-velo: var(--mg-verde-velo);
  --mg-bottone-bg: var(--mg-verde);
  --mg-bottone-testo: var(--mg-bianco);
  --mg-bottone-bg-hover: color-mix(in srgb, var(--mg-verde) 86%, var(--mg-nero));
  --mg-bordo-controllo: var(--mg-grigio-bordo);
  --mg-focus: var(--mg-verde);
  --mg-attenzione: var(--mg-ambra);
  --mg-attenzione-velo: var(--mg-ambra-velo);
  --mg-fermo: var(--mg-rosso);
  --mg-fermo-velo: var(--mg-rosso-velo);
  --mg-punto-vuoto: var(--mg-nero);
  color-scheme: light;
}

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--mg-font);
  font-size: var(--mg-t-corpo);
  line-height: var(--mg-lh-corpo);
  color: var(--mg-testo);
  background: var(--mg-sfondo);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: var(--mg-lh-titoli); font-weight: 600; letter-spacing: -.015em; text-wrap: balance; }
h1, .mg-titolo-xl { font-size: var(--mg-t-h1); line-height: 1.04; font-weight: 600; letter-spacing: -.03em; }
h2, .mg-titolo { font-size: var(--mg-t-h2); line-height: 1.07; font-weight: 600; letter-spacing: -.03em; }
h3 { font-size: var(--mg-t-h3); letter-spacing: -.01em; }
h4 { font-size: 1.0625rem; letter-spacing: 0; }
p, ul, ol, table, figure, blockquote { margin: 0 0 1.1em; }
ul, ol { padding-left: 1.3em; }
li + li { margin-top: .35em; }
a { color: var(--mg-accento-testo); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--mg-focus); outline-offset: 3px; border-radius: var(--mg-r-s); }
::placeholder { color: var(--mg-testo-2); opacity: 1; }
strong { font-weight: 600; }
small { font-size: var(--mg-t-piccolo); }
hr { border: 0; border-top: 1px solid var(--mg-linea); margin: var(--mg-s7) 0; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; }
::selection { background: var(--mg-verde-chiaro); color: var(--mg-nero); }

.mg-vis-nascosto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mg-salta { position: absolute; left: var(--mg-s4); top: -4rem; z-index: 100; padding: .5rem 1rem; background: var(--mg-verde-chiaro); color: var(--mg-nero); border-radius: var(--mg-r-s); font-weight: 600; }
.mg-salta:focus { top: var(--mg-s4); }

/* Testo */
/* Dati (date, orari, durate, numeri, codici): stessa famiglia, peso 500 e numeri tabellari. Niente mono. */
.mg-dato { font-family: var(--mg-font); font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.mg-etichetta { font-family: var(--mg-font); font-weight: 600; font-size: var(--mg-t-etichetta); text-transform: uppercase; letter-spacing: .07em; color: var(--mg-testo-2); font-variant-numeric: tabular-nums; }
.mg-lead { font-size: var(--mg-t-lead); line-height: 1.45; color: var(--mg-testo); max-width: 38em; }
.mg-lead--2 { color: var(--mg-testo-2); }
.mg-nota { font-size: var(--mg-t-piccolo); color: var(--mg-testo-2); }
.mg-misura { max-width: var(--mg-misura); }
.mg-display { font-size: var(--mg-t-display); line-height: 1.02; letter-spacing: -.03em; font-weight: 700; }

/* Layout */
.mg-cont { width: min(100% - 2 * var(--mg-gutter), var(--mg-contenitore)); margin-inline: auto; }
.mg-cont--stretto { width: min(100% - 2 * var(--mg-gutter), var(--mg-contenitore-stretto)); margin-inline: auto; }
.mg-sezione { padding-block: clamp(80px, 9vw, 120px); background: var(--mg-sfondo); color: var(--mg-testo); }
/* Sezione rialzata: fascia piena dell'altro colore (su bianco: grigio Apple; su nero: #1D1D1F), bordo netto senza linee; le tessere dentro prendono il colore della fascia opposta */
.mg-sezione--2 { background: var(--mg-sfondo-2); }
.mg-sezione--compatta { padding-block: clamp(48px, 5.4vw, 72px); }
@media (max-width: 734px) { .mg-sezione { padding-block: 80px; } }
.mg-sezione--2 > .mg-cont, .mg-sezione--2 > .mg-cont--stretto { --mg-sfondo-2: var(--mg-sfondo); --mg-tessera: var(--mg-sfondo); }
.mg-sezione__testa { max-width: 46rem; margin-bottom: var(--mg-s7); }
.mg-sezione__testa h2 { margin-bottom: .35em; }
.mg-griglia { display: grid; gap: var(--mg-s5); }
.mg-griglia--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.mg-griglia--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.mg-griglia--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.mg-griglia--sciolta { align-items: start; }   /* card con contenuti diseguali: niente stiramento */
.mg-griglia--laterale { grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .mg-griglia--laterale { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--mg-s8); } }
.mg-riga { display: flex; flex-wrap: wrap; gap: var(--mg-s3) var(--mg-s4); align-items: center; }

/* ---------- 4. Segno del marchio: anello vuoto · linea · punto verde pieno ("da qui a lì") ---------- */
/* Come nel logo D: l'anello e la linea hanno lo stesso spessore (--mg-tratto), il punto pieno ha il diametro esterno dell'anello (--mg-punto).
   La linea parte dal bordo esterno dell'anello e arriva al bordo del punto. Mai inclinato, mai curvo, mai come freccia; il verde è sempre a destra. */
.mg-vettore {
  --mg-vettore-l: 7rem;
  display: inline-block; height: var(--mg-punto); width: var(--mg-vettore-l);
  position: relative; vertical-align: middle; margin-bottom: var(--mg-s4);
}
.mg-vettore::before, .mg-vettore::after {
  content: ""; position: absolute; top: 50%; width: var(--mg-punto); height: var(--mg-punto); border-radius: 50%; transform: translateY(-50%);
}
.mg-vettore::before { left: 0; background: transparent; border: var(--mg-tratto) solid var(--mg-punto-vuoto); }
.mg-vettore::after { right: 0; background: var(--mg-accento); }
.mg-vettore > i { position: absolute; left: calc(var(--mg-punto) - 1px); right: calc(var(--mg-punto) - 1px); top: 50%; height: var(--mg-tratto); background: var(--mg-punto-vuoto); transform: translateY(-50%); }
.mg-vettore--lungo { --mg-vettore-l: min(100%, 22rem); }
@media (max-width: 640px) { .mg-vettore--lungo { --mg-vettore-l: min(100%, 8rem); } }
.mg-vettore--pieno { --mg-vettore-l: 100%; }

/* Lista a passi: punti sulla linea (percorso chiamata → rapportino). Gli anelli numerati sono "ancora da fare", l'ultimo è il punto verde pieno (arrivo). */
.mg-passi { list-style: none; padding: 0; margin: 0; counter-reset: passo; display: grid; gap: var(--mg-s5); position: relative; }
.mg-passi > li { position: relative; padding-left: 3.25rem; counter-increment: passo; }
.mg-passi > li::before {
  content: counter(passo); position: absolute; left: 0; top: .1rem; width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center; font-weight: 600; font-size: .875rem; font-variant-numeric: tabular-nums;
  background: var(--mg-sfondo); color: var(--mg-testo); border: var(--mg-tratto) solid var(--mg-testo);
}
.mg-passi > li:last-child::before { background: var(--mg-accento); border-color: var(--mg-accento); color: var(--mg-bottone-testo); }
.mg-passi > li::after { content: ""; position: absolute; left: calc(1rem - 1px); top: 2.3rem; bottom: calc(-1 * var(--mg-s5) - .2rem); width: 2px; background: var(--mg-linea); }
.mg-passi > li:last-child::after { display: none; }
.mg-passi h3, .mg-passi h4 { margin-bottom: .25em; }
.mg-passi p:last-child { margin-bottom: 0; }
@media (min-width: 900px) {
  .mg-passi--orizz { grid-template-columns: repeat(5, 1fr); gap: var(--mg-s5); }
  .mg-passi--orizz > li { padding-left: 0; padding-top: 3rem; }
  .mg-passi--orizz > li::before { top: 0; left: 0; }
  .mg-passi--orizz > li::after { top: calc(1rem - 1px); left: 2.4rem; right: calc(-1 * var(--mg-s5) + .4rem); bottom: auto; width: auto; height: 2px; }
}

/* Schema "dove vanno i vostri dati": nodi su una linea (anello = da voi, tratteggiato = facoltativo, pieno verde = da noi) */
.mg-schema { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--mg-s4); position: relative; }
.mg-schema > li { position: relative; padding-left: 2.6rem; }
.mg-schema > li::before { content: ""; position: absolute; left: 0; top: .35rem; width: 14px; height: 14px; border-radius: 50%; border: var(--mg-tratto) solid var(--mg-testo); background: var(--mg-sfondo); }
.mg-schema > li[data-tipo="noi"]::before { background: var(--mg-accento); border-color: var(--mg-accento); }
.mg-schema > li[data-tipo="facoltativo"]::before { border-style: dashed; border-width: 2px; }
.mg-schema > li::after { content: ""; position: absolute; left: 6px; top: 1.4rem; bottom: calc(-1 * var(--mg-s4) - .3rem); width: 2px; background: var(--mg-linea); }
.mg-schema > li:last-child::after { display: none; }
.mg-schema .mg-etichetta { display: block; margin-bottom: .15rem; }
.mg-schema p { margin: 0; font-size: var(--mg-t-piccolo); color: var(--mg-testo-2); }
.mg-schema strong { display: block; color: var(--mg-testo); font-size: 1rem; }
@media (min-width: 900px) {
  .mg-schema--orizz { grid-template-columns: repeat(5, 1fr); gap: var(--mg-s5); }
  .mg-schema--orizz > li { padding-left: 0; padding-top: 2rem; }
  .mg-schema--orizz > li::before { top: 0; }
  .mg-schema--orizz > li::after { top: 6px; left: 1.4rem; right: calc(-1 * var(--mg-s5) + .3rem); bottom: auto; width: auto; height: 2px; }
}

/* ---------- 5. Pulsanti ---------- */
.mg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: .75rem 1.4rem; border-radius: var(--mg-r-pill);
  font: 500 1.0625rem/1.2 var(--mg-font); text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background var(--mg-durata) var(--mg-curva), color var(--mg-durata), border-color var(--mg-durata), transform var(--mg-durata);
}
.mg-btn--primario { background: var(--mg-bottone-bg); color: var(--mg-bottone-testo); border-color: var(--mg-bottone-bg); }
.mg-btn--primario:hover { background: var(--mg-bottone-bg-hover); border-color: var(--mg-bottone-bg-hover); }
.mg-btn--secondario { background: transparent; color: var(--mg-testo); border-color: var(--mg-testo); }
.mg-btn--secondario:hover { background: var(--mg-testo); color: var(--mg-sfondo); }
.mg-btn--neutro { background: transparent; color: var(--mg-testo); border-color: var(--mg-bordo-controllo); }   /* niente terza tinta: bordo Grigio (≥ 3:1) */
.mg-btn--neutro:hover { border-color: var(--mg-testo); }
.mg-btn:active { transform: translateY(1px); }
.mg-btn--grande { min-height: 3.5rem; padding: .95rem 1.8rem; font-size: 1.0625rem; }
.mg-btn--piccolo { min-height: 2.5rem; padding: .45rem 1rem; font-size: .9375rem; }
.mg-btn[aria-disabled="true"], .mg-btn:disabled { opacity: .5; cursor: not-allowed; }
[hidden] { display: none !important; }
.mg-azioni { display: flex; flex-wrap: wrap; gap: var(--mg-s3) var(--mg-s4); align-items: center; }
.mg-azioni .mg-nota { flex-basis: 100%; margin: 0; }
.mg-link-freccia { font-weight: 600; text-decoration: none; }
.mg-link-freccia::after { content: " ›"; }
.mg-link-freccia:hover { text-decoration: underline; }

/* ---------- 6. Barra emergenza + barra sticky (stile Apple, 30/10/2026) ---------- */
.mg-emergenza {
  background: var(--mg-nero-2); color: var(--mg-grigio-su-scuro);
  font-size: 12px; line-height: 1.33; letter-spacing: 0; border: 0; padding: 0;
}
.mg-emergenza .mg-cont { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 24px; min-height: 44px; padding-block: 6px; }
.mg-emergenza__q { font-weight: 400; }
.mg-emergenza__tel { color: var(--mg-carta); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 12px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.mg-emergenza__tel::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mg-verde-chiaro); box-shadow: 0 0 0 0 rgba(108,196,122,.6); animation: mg-pulsa 2.4s infinite; }
.mg-emergenza__orari { color: var(--mg-grigio-su-scuro); font-variant-numeric: tabular-nums; font-size: 12px; }
.mg-emergenza__q-lunga { display: inline; }
.mg-emergenza__q-breve { display: none; }
.mg-emergenza__orari--breve { display: none; }
.mg-emergenza__link { display: flex; flex-wrap: wrap; gap: 0 16px; }
.mg-emergenza__link a { color: var(--mg-carta); text-decoration: none; display: inline-block; padding-block: 6px; }
.mg-emergenza__link a:hover { text-decoration: underline; }
@media (max-width: 720px) {
  /* Due righe: domanda + telefono / orari abbreviati (14 px: testo secondario). I tre link stanno nel menu e nel piè di pagina. */
  .mg-emergenza .mg-cont { gap: 0 .75rem; padding-block: .4rem; min-height: 44px; }
  .mg-emergenza__q { font-size: .875rem; }
  .mg-emergenza__q-lunga { display: none; }
  .mg-emergenza__q-breve { display: inline; }
  .mg-emergenza__tel { font-size: 1rem; padding-block: .1rem; }
  .mg-emergenza__orari { display: none; }
  .mg-emergenza__orari--breve { display: block; flex-basis: 100%; text-align: center; font-size: .875rem; line-height: 1.4; color: var(--mg-grigio-su-scuro); font-variant-numeric: tabular-nums; }
  .mg-emergenza__link { display: none; }
}
@keyframes mg-pulsa { 0% { box-shadow: 0 0 0 0 rgba(108,196,122,.55); } 70% { box-shadow: 0 0 0 9px rgba(108,196,122,0); } 100% { box-shadow: 0 0 0 0 rgba(108,196,122,0); } }

/* Barra sticky: vetro traslucido; scroll.js le mette/toglie .mg-scuro secondo la fascia che le sta sotto.
   Colori propri (--b-*): non dipendono dai token di fascia, cosi' funzionano anche senza classe di tema. */
.mg-barra {
  --b-fg: var(--mg-inchiostro); --b-fg2: var(--mg-grigio); --b-pannello: var(--mg-bianco); --b-tessera: var(--mg-grigio-apple);
  --b-bordo: rgba(0,0,0,.08); --b-acc: var(--mg-verde);
  --mg-bottone-bg: var(--mg-verde); --mg-bottone-testo: var(--mg-bianco); --mg-bottone-bg-hover: color-mix(in srgb, var(--mg-verde) 86%, var(--mg-nero)); --mg-focus: var(--mg-verde);
  position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 50; height: 52px;
  background: rgba(255,255,255,.72); color: var(--b-fg);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--b-bordo);
  transition: background-color .3s var(--mg-curva), color .3s var(--mg-curva), border-color .3s var(--mg-curva);
}
.mg-barra.mg-scuro {
  --b-fg: var(--mg-carta); --b-fg2: var(--mg-grigio-su-scuro); --b-pannello: var(--mg-nero-2); --b-tessera: var(--mg-nero);
  --b-bordo: rgba(255,255,255,.1); --b-acc: var(--mg-verde-chiaro);
  --mg-bottone-bg: var(--mg-verde-chiaro); --mg-bottone-testo: var(--mg-nero); --mg-bottone-bg-hover: color-mix(in srgb, var(--mg-verde-chiaro) 82%, var(--mg-carta)); --mg-focus: var(--mg-verde-chiaro);
  background: rgba(22,22,23,.72);
}
.mg-barra .mg-cont { display: flex; align-items: center; gap: 24px; height: 100%; min-height: 0; }
.mg-logo { position: relative; display: block; flex: none; width: 118px; height: 33px; }
.mg-logo img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .3s; }
/* due logo sovrapposti: il primo (logo.svg) su fondo chiaro, il secondo (logo-scuro.svg) su fondo scuro */
.mg-logo img:nth-child(2) { opacity: 0; }
.mg-barra.mg-scuro .mg-logo img:nth-child(1) { opacity: 0; }
.mg-barra.mg-scuro .mg-logo img:nth-child(2) { opacity: 1; }
body.mg-menu-aperto { overflow: hidden; }
/* ---------- 6b. Menu (template header Oxygen: Container con tag details/summary + TextLink; punto di scambio desktop/telefono = breakpoint Oxygen 1119 px) ---------- */
.mg-nav { margin-left: auto; display: flex; flex-direction: row; align-items: center; gap: 4px; }
.mg-nav > a:not(.mg-btn), .mg-nav__gruppo > summary { color: var(--b-fg); text-decoration: none; font-size: 13px; font-weight: 400; padding: .5rem .7rem; border-radius: var(--mg-r-s); list-style: none; cursor: pointer; white-space: nowrap; opacity: .8; }
.mg-nav__gruppo > summary { display: inline-flex; flex-direction: row; align-items: center; }
.mg-nav__gruppo > summary::-webkit-details-marker { display: none; }
.mg-nav__gruppo > summary::after { content: ""; display: inline-block; width: .45em; height: .45em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-.2em); margin-left: .45em; }
.mg-nav > a:not(.mg-btn):hover, .mg-nav__gruppo > summary:hover, .mg-nav__gruppo[open] > summary { opacity: 1; }
.mg-nav > a.mg-btn { color: var(--mg-bottone-testo); border-radius: var(--mg-r-pill); font-weight: 500; }   /* batte la vecchia regola .mg-nav > a rimasta in selectors.css */
.mg-nav .mg-btn { margin-left: 8px; min-height: 32px; padding: .3rem .95rem; font-size: 13px; }
.mg-nav__gruppo { position: relative; }
.mg-nav__pannello {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  background: var(--b-pannello); color: var(--b-fg); border: 1px solid var(--b-bordo); border-radius: var(--mg-r-m);
  padding: var(--mg-s5); display: grid; grid-template-columns: repeat(3, minmax(190px, 1fr)); gap: var(--mg-s5);
  width: max-content; max-width: min(92vw, 860px); box-shadow: 0 24px 60px rgba(0,0,0,.25);
}
.mg-nav__pannello--stretto { grid-template-columns: repeat(2, minmax(190px, 1fr)); }
.mg-nav__titolo, .mg-nav__pannello .mg-nav__titolo { margin: 0 0 .6rem; font-weight: 600; font-size: var(--mg-t-etichetta); letter-spacing: .07em; text-transform: uppercase; color: var(--b-fg2); }
.mg-nav__tutti, .mg-nav__pannello .mg-nav__tutti { font-weight: 600; margin-bottom: .6rem; padding-left: 0; }
.mg-nav__pannello ul { list-style: none; margin: 0; padding: 0; }
.mg-nav__pannello li + li { margin-top: .15rem; }
.mg-nav__pannello a { color: var(--b-fg); text-decoration: none; display: block; padding: .3rem .4rem; border-radius: var(--mg-r-s); font-size: .9375rem; }
.mg-nav__pannello a:hover { color: var(--b-acc); text-decoration: underline; text-underline-offset: .18em; }
.mg-nav__strade { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--mg-s4); padding-bottom: var(--mg-s4); border-bottom: 1px solid var(--b-bordo); }
.mg-strada { display: block; padding: .8rem 1rem; border-radius: var(--mg-r-m); background: var(--b-tessera); text-decoration: none; color: var(--b-fg); border: 0; }
.mg-nav__pannello a.mg-strada { padding: .8rem 1rem; }
.mg-strada:hover { text-decoration: none; }
.mg-strada .mg-etichetta { display: block; margin-bottom: .15rem; color: var(--b-fg2); }
.mg-strada strong { display: block; font-size: 1rem; }
.mg-strada span:last-child { color: var(--b-fg2); font-size: .875rem; }
/* Menu telefono: <details class="mg-menu-mobile"> a tutta larghezza sotto la barra; il pulsante mostra tre barre, aperto diventa una X (::before ruotato + ::after) */
.mg-menu-mobile { display: none; }
@media (max-width: 1119px) {
  .mg-nav { display: none; }
  .mg-menu-mobile { display: block; margin-left: auto; }
  .mg-menu-mobile > summary { position: relative; list-style: none; cursor: pointer; display: inline-flex; flex-direction: row; align-items: center; gap: .5rem; font-weight: 600; font-size: 13px; padding: .4rem .75rem; border: 1.5px solid var(--b-fg2); border-radius: var(--mg-r-pill); color: var(--b-fg); }
  .mg-menu-mobile > summary::-webkit-details-marker { display: none; }
  .mg-menu-mobile > summary::before { content: ""; width: 18px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
  .mg-menu-mobile[open] > summary::before { box-shadow: none; transform: rotate(45deg); }
  .mg-menu-mobile[open] > summary::after { content: ""; position: absolute; left: .75rem; top: 50%; width: 18px; height: 2px; margin-top: -1px; background: currentColor; transform: rotate(-45deg); }
  .mg-menu-mobile__pannello { position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - 52px); max-height: calc(100dvh - 52px - var(--wp-admin--admin-bar--height, 0px)); overflow: auto; background: var(--b-pannello); color: var(--b-fg); padding: var(--mg-s5) var(--mg-gutter) var(--mg-s8); border-bottom: 1px solid var(--b-bordo); box-shadow: 0 30px 60px rgba(0,0,0,.25); }
  .mg-menu-mobile__pannello .mg-nav__strade { grid-template-columns: 1fr; border: 0; padding: 0 0 var(--mg-s4); }
  .mg-menu-mobile__pannello .mg-nav__titolo { margin: var(--mg-s5) 0 .5rem; }
  .mg-menu-mobile__pannello ul { list-style: none; margin: 0; padding: 0; }
  .mg-menu-mobile__pannello li a { display: block; padding: .55rem 0; color: var(--b-fg); text-decoration: none; font-size: 1.0625rem; font-weight: 600; border-bottom: 1px solid var(--b-bordo); }
  .mg-menu-mobile__pannello .mg-strada { color: var(--b-fg); }
  .mg-menu-mobile__pannello .mg-btn { margin-top: var(--mg-s5); width: 100%; }
}

/* ---------- 7. Hero ---------- */
.mg-hero { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 9vw, 8rem) clamp(3rem, 7vw, 6rem); background: var(--mg-sfondo); color: var(--mg-testo); }
.mg-hero__griglia { display: grid; gap: var(--mg-s7); align-items: start; }
@media (min-width: 960px) { .mg-hero__griglia { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.mg-hero h1 { max-width: 15ch; margin-bottom: .4em; }
.mg-hero .mg-lead { margin-bottom: var(--mg-s6); }
.mg-hero__sfondo { position: absolute; inset: 0; pointer-events: none; opacity: .9; display: none; }
@media (min-width: 960px) { .mg-hero__sfondo { display: block; } }
.mg-hero__sfondo svg { width: 100%; height: 100%; }
.mg-hero .mg-cont { position: relative; }
.mg-hero--pagina { padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem); }
.mg-hero--pagina h1 { max-width: 18ch; }
@media (max-width: 640px) {
  .mg-hero, .mg-hero--pagina { padding-top: 2rem; }
  .mg-hero .mg-lead { margin-bottom: var(--mg-s5); }
  /* Pagine servizio su telefono: titolo, dove vale, pulsante, poi la lead (la CTA resta sopra la piega; l'ordine nel DOM non cambia) */
  .mg-hero--pagina .mg-hero__testo { display: flex; flex-direction: column; }
  .mg-hero--pagina .mg-hero__testo > .mg-vettore { order: 1; }
  .mg-hero--pagina .mg-hero__testo > h1 { order: 2; }
  .mg-hero--pagina .mg-hero__testo > .mg-dove { order: 3; }
  .mg-hero--pagina .mg-hero__testo > .mg-azioni { order: 4; margin-bottom: var(--mg-s5); }
  .mg-hero--pagina .mg-hero__testo > .mg-lead { order: 5; margin-bottom: 0; }
}
.mg-hero .mg-dove { margin-block: 0 var(--mg-s4); }
.mg-briciole { font-size: var(--mg-t-etichetta); font-weight: 500; color: var(--mg-testo-2); margin-bottom: var(--mg-s5); letter-spacing: .01em; }
.mg-briciole a { color: inherit; text-decoration: none; display: inline-block; padding: .3rem 0; }
.mg-briciole a:hover { color: var(--mg-accento-testo); }
.mg-briciole__sep { margin: 0 .5em; opacity: .6; }
.mg-briciole [aria-current="page"] { color: var(--mg-testo); }
.mg-dove { display: inline-flex; flex-wrap: wrap; gap: .5rem; margin-block: var(--mg-s4) var(--mg-s5); }
.mg-dove span { font-size: var(--mg-t-etichetta); font-weight: 600; letter-spacing: .02em; padding: .35rem .7rem; border-radius: var(--mg-r-pill); border: 1px solid var(--mg-bordo-controllo); color: var(--mg-testo); display: inline-flex; align-items: center; gap: .45rem; }
.mg-dove span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mg-accento); }
.mg-dove span[data-off]::before { background: transparent; border: 2px solid var(--mg-testo-2); }

/* ---------- 8. Card ---------- */
.mg-card { background: var(--mg-tessera); border: 0; border-radius: var(--mg-r-l); padding: var(--mg-s5); display: flex; flex-direction: column; gap: var(--mg-s3); position: relative; }
.mg-card--3 { background: var(--mg-sfondo); }   /* card dentro una sezione rialzata: torna al fondo di pagina (Carta) */
.mg-card h3 { margin: 0; }
.mg-card p { margin: 0; color: var(--mg-testo-2); }
.mg-card .mg-link-freccia { margin-top: auto; padding-top: var(--mg-s2); }
.mg-card--servizio { transition: border-color var(--mg-durata), transform var(--mg-durata) var(--mg-curva); }
.mg-card--servizio:hover { border-color: var(--mg-accento); transform: translateY(-2px); }
.mg-card--servizio .mg-vettore { --mg-vettore-l: 3.5rem; margin: 0 0 .25rem; }
.mg-card__num { font-weight: 600; color: var(--mg-accento-testo); font-size: var(--mg-t-etichetta); letter-spacing: .07em; font-variant-numeric: tabular-nums; }
.mg-card--prova h3 { font-size: 1.25rem; }
.mg-card--prova p { color: var(--mg-testo); }
.mg-card--prova .mg-nota { color: var(--mg-testo-2); }
.mg-card a.mg-card__tutto::after { content: ""; position: absolute; inset: 0; }

/* Riquadro "ultimo test di ripristino" (dati vivi, aggiornati in automatico in fase 4) */
/* Niente barra colorata su un solo lato (controllo design): il colore dello stato sta nel punto accanto all'esito
   e in un bordo uniforme appena tinto. Lo stato si può mettere anche sul contenitore (data-stato) per i browser senza :has(). */
.mg-test {
  --mg-test-colore: var(--mg-accento);
  border: 0; border-radius: var(--mg-r-l);   /* lo stato lo dicono il punto e l'etichetta colorati, non il bordo */
  background: var(--mg-tessera); padding: var(--mg-s5); display: grid; gap: var(--mg-s3);
}
.mg-test[data-stato="attenzione"], .mg-test:has(.mg-test__stato[data-stato="attenzione"]) { --mg-test-colore: var(--mg-attenzione); }
.mg-test[data-stato="fermo"], .mg-test:has(.mg-test__stato[data-stato="fermo"]) { --mg-test-colore: var(--mg-fermo); }
.mg-test__testa { display: flex; justify-content: space-between; gap: var(--mg-s3); flex-wrap: wrap; align-items: center; }
.mg-test__stato { font-weight: 600; font-size: var(--mg-t-etichetta); letter-spacing: .05em; text-transform: uppercase; display: inline-flex; align-items: center; gap: .45rem; color: var(--mg-accento-testo); }
.mg-test__stato::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--mg-accento); }
.mg-test__stato[data-stato="attenzione"] { color: var(--mg-attenzione); } .mg-test__stato[data-stato="attenzione"]::before { background: var(--mg-attenzione); }
.mg-test__stato[data-stato="fermo"] { color: var(--mg-fermo); } .mg-test__stato[data-stato="fermo"]::before { background: var(--mg-fermo); }
.mg-test dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--mg-s4); margin: 0; }
.mg-test dt { font-weight: 600; font-size: var(--mg-t-etichetta); text-transform: uppercase; letter-spacing: .07em; color: var(--mg-testo-2); margin-bottom: .2rem; }
.mg-test dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; font-size: 1.25rem; color: var(--mg-testo); white-space: nowrap; }
@media (max-width: 420px) { .mg-test dl { grid-template-columns: 1fr; gap: var(--mg-s3); } }   /* "circa 1,5-2 min" non entra in mezza card: i dati vanno in colonna */
.mg-test p { margin: 0; color: var(--mg-testo-2); font-size: var(--mg-t-piccolo); }
.mg-test__frase { font-size: 1rem !important; color: var(--mg-testo) !important; }

/* Numeri aziendali */
.mg-numeri { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: var(--mg-s5); }
.mg-numeri div { border-top: 2px solid var(--mg-linea); padding-top: var(--mg-s3); }
.mg-numeri strong { display: block; font-weight: 600; font-variant-numeric: tabular-nums; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); color: var(--mg-testo); letter-spacing: -.02em; }
.mg-numeri span { color: var(--mg-testo-2); font-size: var(--mg-t-piccolo); }

/* Riquadro "In breve" per le guide (citabile dalle IA) */
.mg-inbreve { background: var(--mg-tessera); border: 0; border-radius: var(--mg-r-l); padding: var(--mg-s5) var(--mg-s5) var(--mg-s4); margin-block: var(--mg-s6); }
.mg-inbreve h2 { font-size: 1.125rem; margin-bottom: var(--mg-s3); display: flex; align-items: center; gap: .75rem; }
.mg-inbreve h2::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--mg-accento); }
.mg-inbreve ul { margin: 0; padding-left: 1.2em; }
.mg-inbreve li + li { margin-top: .5em; }
.mg-inbreve .mg-nota { margin: var(--mg-s3) 0 0; }

/* Avvisi (stati: ok / attenzione / fermo), colori solo funzionali */
.mg-avviso { border-radius: var(--mg-r-m); padding: var(--mg-s4) var(--mg-s5); border: 0; background: var(--mg-tessera); display: grid; grid-template-columns: auto 1fr; gap: var(--mg-s3); align-items: start; }
.mg-avviso::before { content: ""; width: 10px; height: 10px; border-radius: 50%; margin-top: .5rem; background: var(--mg-accento); }
.mg-avviso p { margin: 0; }
.mg-avviso--attenzione { border-color: color-mix(in srgb, var(--mg-attenzione) 45%, transparent); background: var(--mg-attenzione-velo); }
.mg-avviso--attenzione::before { background: var(--mg-attenzione); }
.mg-avviso--fermo { border-color: color-mix(in srgb, var(--mg-fermo) 45%, transparent); background: var(--mg-fermo-velo); }
.mg-avviso--fermo::before { background: var(--mg-fermo); }

/* ---------- 9. Tabelle incluso / escluso ---------- */
.mg-tabella-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1.1em; }
.mg-tabella { width: 100%; border-collapse: collapse; font-size: 1rem; }
.mg-tabella th, .mg-tabella td { text-align: left; vertical-align: top; padding: .8rem 1rem; border-bottom: 1px solid var(--mg-linea); }
.mg-tabella th { font-weight: 600; font-size: var(--mg-t-etichetta); text-transform: uppercase; letter-spacing: .07em; color: var(--mg-testo-2); }
.mg-tabella td { font-variant-numeric: tabular-nums; }
.mg-tabella tr:last-child td { border-bottom: 0; }
.mg-incluso { display: grid; gap: var(--mg-s5); }
@media (min-width: 760px) { .mg-incluso { grid-template-columns: 1.4fr 1fr; align-items: start; } }   /* "Non incluso" è corto: colonna stretta, non stirata */
.mg-incluso__col { border: 0; border-radius: var(--mg-r-l); background: var(--mg-tessera); padding: var(--mg-s5); }
.mg-incluso__col h3 { font-size: 1.0625rem; display: flex; align-items: center; gap: .6rem; margin-bottom: var(--mg-s4); }
.mg-incluso__col h3::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--mg-accento); flex-shrink: 0; }
.mg-incluso__col--no h3::before { background: transparent; border: var(--mg-tratto) solid var(--mg-testo-2); }
.mg-incluso__col ul { list-style: none; padding: 0; margin: 0; }
.mg-incluso__col li { padding: .55rem 0; border-top: 1px solid var(--mg-linea); }
.mg-incluso__col li:first-child { border-top: 0; padding-top: 0; }

/* ---------- 10. FAQ ---------- */
.mg-faq { border-top: 1px solid var(--mg-linea); }
.mg-faq details { border-bottom: 1px solid var(--mg-linea); }
.mg-faq summary { list-style: none; cursor: pointer; padding: 1.1rem 3rem 1.1rem 0; font-weight: 600; font-size: 1.0625rem; position: relative; }
.mg-faq summary::-webkit-details-marker { display: none; }
.mg-faq summary::before, .mg-faq summary::after { content: ""; position: absolute; right: .6rem; top: 50%; width: 16px; height: 2px; background: var(--mg-accento); transform: translateY(-50%); transition: transform var(--mg-durata) var(--mg-curva); }
.mg-faq summary::after { transform: translateY(-50%) rotate(90deg); }
.mg-faq details[open] summary::after { transform: translateY(-50%) rotate(0); }
.mg-faq summary:hover { color: var(--mg-accento-testo); }
.mg-faq details > div { padding: 0 0 1.25rem; max-width: var(--mg-misura); color: var(--mg-testo); }
.mg-faq details > div p:last-child { margin-bottom: 0; }

/* ---------- 11. Blocco CTA ---------- */
.mg-cta { border-radius: var(--mg-r-l); padding: clamp(2rem, 5vw, 4rem); display: grid; gap: var(--mg-s5); background: var(--mg-tessera); border: 0; position: relative; overflow: hidden; }
@media (min-width: 900px) { .mg-cta { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; } }
.mg-cta h2 { margin-bottom: .3em; }
.mg-cta p { color: var(--mg-testo-2); max-width: 48ch; }
.mg-cta__dopo { background: var(--mg-sfondo); border: 0; border-radius: var(--mg-r-m); padding: var(--mg-s5); }
.mg-cta__dopo h3 { font-size: var(--mg-t-etichetta); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--mg-testo-2); }
.mg-cta__dopo p { color: var(--mg-testo); margin: 0; font-size: 1rem; }
.mg-cta__dopo ol { margin: 0; padding-left: 1.2em; }

/* ---------- 12. Moduli ---------- */
.mg-campo { display: grid; gap: .45rem; margin-bottom: var(--mg-s5); }
.mg-campo label, .mg-campo legend { font-weight: 600; font-size: 1.0625rem; }
.mg-campo .mg-aiuto { color: var(--mg-testo-2); font-size: var(--mg-t-piccolo); margin: 0; }
.mg-input { width: 100%; font: 400 1.0625rem/1.4 var(--mg-font); padding: .85rem 1rem; border: 1.5px solid var(--mg-bordo-controllo); border-radius: var(--mg-r-m); background: var(--mg-campo-bg); color: var(--mg-testo); min-height: 3.25rem; }
.mg-input:focus { outline: none; border-color: var(--mg-focus); box-shadow: 0 0 0 4px var(--mg-accento-velo); }
.mg-input[aria-invalid="true"] { border-color: var(--mg-fermo); box-shadow: 0 0 0 1px var(--mg-fermo); }
textarea.mg-input { min-height: 7rem; resize: vertical; }
.mg-input--num { font-weight: 500; font-variant-numeric: tabular-nums; font-size: 1.5rem; max-width: 16rem; }
.mg-scelte { display: grid; gap: .6rem; margin: 0; padding: 0; border: 0; }
.mg-scelte[aria-invalid="true"] { outline: 2px solid var(--mg-fermo); outline-offset: 6px; border-radius: var(--mg-r-s); }
.mg-scelta { position: relative; display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; border: 1.5px solid var(--mg-bordo-controllo); border-radius: var(--mg-r-m); background: var(--mg-campo-bg); cursor: pointer; font-size: 1.0625rem; transition: border-color var(--mg-durata), background var(--mg-durata); }
.mg-scelta:hover { border-color: var(--mg-testo); }
.mg-scelta input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.mg-scelta .mg-scelta__tasto { font-weight: 600; font-size: .875rem; width: 1.75rem; height: 1.75rem; border: 1.5px solid var(--mg-bordo-controllo); border-radius: var(--mg-r-s); display: grid; place-items: center; flex-shrink: 0; color: var(--mg-testo-2); }
/* .is-scelta è la classe di riserva che il JS aggiunge per i browser senza :has() */
.mg-scelta:has(input:checked), .mg-scelta.is-scelta { border-color: var(--mg-accento); background: var(--mg-accento-velo); }
.mg-scelta:has(input:checked) .mg-scelta__tasto, .mg-scelta.is-scelta .mg-scelta__tasto { background: var(--mg-accento); border-color: var(--mg-accento); color: var(--mg-bottone-testo); }
.mg-scelta:has(input:focus-visible) { outline: 3px solid var(--mg-focus); outline-offset: 2px; }
.mg-errore { color: var(--mg-fermo); font-size: var(--mg-t-piccolo); margin: 0; display: flex; gap: .5rem; align-items: start; }
.mg-errore:empty { display: none; }
.mg-errore::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mg-fermo); margin-top: .45rem; flex-shrink: 0; }
.mg-spunta { display: flex; gap: .75rem; align-items: start; font-size: 1rem; }
.mg-spunta input { width: 1.25rem; height: 1.25rem; margin-top: .2rem; accent-color: var(--mg-accento); flex-shrink: 0; }
.mg-spunta input[aria-invalid="true"] { outline: 2px solid var(--mg-fermo); outline-offset: 2px; border-radius: 2px; }
.mg-campo .mg-errore { margin-top: .1rem; }

/* Modulo a passi */
.mg-passo-form { max-width: 40rem; }
.mg-avanzamento { display: grid; gap: .5rem; margin-bottom: var(--mg-s6); }
.mg-avanzamento__testo { font-weight: 600; font-size: var(--mg-t-etichetta); text-transform: uppercase; letter-spacing: .07em; color: var(--mg-testo-2); font-variant-numeric: tabular-nums; }
/* La linea di avanzamento è il segno del marchio: anello vuoto all'inizio, il punto verde avanza, la parte percorsa diventa piena */
.mg-avanzamento__linea { position: relative; height: 14px; }
/* La linea parte dal bordo esterno dell'anello (14 px), non dal suo centro: il foro resta vuoto */
.mg-avanzamento__linea::before { content: ""; position: absolute; left: 14px; right: 7px; top: 5.5px; height: var(--mg-tratto); background: var(--mg-linea); }
/* Avanzamento animato solo con transform (niente width/left): la linea percorsa è scalata, il punto è traslato dal JS in px */
.mg-avanzamento__fatto { position: absolute; left: 14px; right: 7px; top: 5.5px; height: var(--mg-tratto); background: var(--mg-testo); transform: scaleX(0); transform-origin: 0 50%; transition: transform 400ms var(--mg-curva); }
.mg-avanzamento__punto { position: absolute; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--mg-accento); transition: transform 400ms var(--mg-curva); z-index: 2; }
.mg-avanzamento__inizio { position: absolute; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--mg-sfondo); border: var(--mg-tratto) solid var(--mg-testo); z-index: 1; }
.mg-passo { display: none; }
.mg-passo[data-attivo] { display: block; animation: mg-entra 320ms var(--mg-curva); }
.no-js .mg-passo { display: block; margin-bottom: var(--mg-s7); }
.no-js .mg-avanzamento, .no-js #btn-avanti, .no-js #btn-indietro { display: none; }   /* senza JS: tutti i passi in sequenza e il solo pulsante di invio */
.mg-passo legend, .mg-passo .mg-domanda { font-size: var(--mg-t-h2); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; margin-bottom: var(--mg-s3); padding: 0; }
.mg-passo legend:focus { outline: none; }   /* focus solo programmatico (lo screen reader legge la domanda) */
.mg-passo .mg-aiuto { font-size: 1rem; margin-bottom: var(--mg-s5); max-width: 44ch; }
.mg-navig { display: flex; flex-wrap: wrap; gap: var(--mg-s3); align-items: center; margin-top: var(--mg-s6); }
.mg-navig .mg-nota { margin: 0 0 0 auto; }
@keyframes mg-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- 13. Guide lunghe ---------- */
.mg-articolo { font-size: var(--mg-t-lettura); line-height: 1.65; }
.mg-articolo > * { max-width: var(--mg-misura); }
.mg-articolo h2 { margin-top: 2.2em; padding-top: .4em; }
.mg-articolo h3 { margin-top: 1.6em; }
.mg-articolo h2 + h3 { margin-top: 1em; }
.mg-articolo li + li { margin-top: .45em; }
.mg-articolo .mg-tabella-scroll, .mg-articolo .mg-inbreve, .mg-articolo .mg-timeline { max-width: none; }
.mg-articolo em.mg-fonte { display: block; font-style: normal; font-size: var(--mg-t-piccolo); color: var(--mg-testo-2); margin-bottom: var(--mg-s5); }
.mg-indice { position: sticky; top: 7.5rem; border-left: 2px solid var(--mg-linea); padding-left: var(--mg-s4); font-size: .9375rem; }
.mg-indice h2 { font-weight: 600; font-size: var(--mg-t-etichetta); letter-spacing: .07em; text-transform: uppercase; color: var(--mg-testo-2); margin-bottom: var(--mg-s3); }
.mg-indice ol { list-style: none; margin: 0; padding: 0; counter-reset: idx; }
.mg-indice li { margin: 0; counter-increment: idx; }
.mg-indice a { display: block; padding: .3rem 0; color: var(--mg-testo); text-decoration: none; }
.mg-indice a::before { content: counter(idx) " "; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--mg-testo-2); font-size: .875rem; }
.mg-indice a:hover { color: var(--mg-accento-testo); }
.mg-indice--inline { position: static; border: 0; border-radius: var(--mg-r-m); padding: var(--mg-s4) var(--mg-s5); background: var(--mg-tessera); margin-block: var(--mg-s6); }
.mg-indice--inline ol { columns: 2; column-gap: var(--mg-s5); }
@media (max-width: 640px) { .mg-indice--inline ol { columns: 1; } }
.mg-progresso { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--mg-verde-chiaro); z-index: 60; pointer-events: none; }
@supports (animation-timeline: scroll()) {
  .mg-progresso { animation: mg-progresso linear both; animation-timeline: scroll(root); }
}
@keyframes mg-progresso { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.mg-timeline { display: grid; gap: var(--mg-s5); margin-block: var(--mg-s6); }
@media (min-width: 760px) { .mg-timeline { grid-template-columns: 1fr 1fr; } }
.mg-timeline__binario { border: 0; border-radius: var(--mg-r-l); background: var(--mg-tessera); padding: var(--mg-s5); }
.mg-timeline__binario h3 { font-size: 1.0625rem; margin-bottom: var(--mg-s4); }
.mg-timeline__binario ul { list-style: none; margin: 0; padding: 0; position: relative; }
.mg-timeline__binario li { position: relative; padding-left: 1.75rem; padding-bottom: 1rem; font-size: 1rem; }
.mg-timeline__binario li + li, .mg-decisione li + li, .mg-domande li + li { margin-top: 0; }   /* annulla il margine dei li dell'articolo */
.mg-timeline__fonte { margin: var(--mg-s3) 0 0; font-size: .875rem; color: var(--mg-testo-2); }
.mg-timeline__binario li::before { content: ""; position: absolute; left: 0; top: .45rem; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--mg-testo); background: var(--mg-sfondo); }
.mg-timeline__binario li[data-stato="passato"]::before { background: var(--mg-testo); }
.mg-timeline__binario li[data-stato="prossimo"]::before { background: var(--mg-accento); border-color: var(--mg-accento); }
.mg-timeline__binario li::after { content: ""; position: absolute; left: 5px; top: 1.2rem; bottom: 0; width: 1.5px; background: var(--mg-linea); }
.mg-timeline__binario li:last-child::after { display: none; }
.mg-timeline__binario li:last-child { padding-bottom: 0; }
.mg-timeline__binario .mg-dato { display: block; font-size: .875rem; color: var(--mg-testo-2); }
.mg-decisione { list-style: none; margin: var(--mg-s6) 0; padding: 0; display: grid; gap: var(--mg-s3); }
.mg-decisione li { display: grid; grid-template-columns: auto 1fr; gap: var(--mg-s4); align-items: start; border: 0; border-radius: var(--mg-r-m); padding: var(--mg-s4) var(--mg-s5); background: var(--mg-tessera); font-size: 1rem; }
.mg-decisione .mg-dato { font-size: .875rem; color: var(--mg-testo-2); padding-top: .2rem; white-space: nowrap; }
.mg-decisione strong { display: block; }
.mg-decisione li[data-esito] { border-color: var(--mg-accento); background: var(--mg-accento-velo); }   /* esito evidenziato con velo e bordo uniforme, non con una barra laterale */
.mg-decisione li[data-esito] .mg-dato { color: var(--mg-accento-testo); }

/* ---------- 14. Piè di pagina (stile Apple: fascia grigia, testo 12 px) ---------- */
.mg-footer { background: var(--mg-grigio-apple); color: rgba(0,0,0,.56); border: 0; padding: 40px 0 24px; font-size: 12px; line-height: 1.33; letter-spacing: 0; }
.mg-footer a { color: rgba(0,0,0,.72); text-decoration: none; }
.mg-footer a:hover { text-decoration: underline; }
.mg-footer__griglia { display: grid; gap: 24px; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); padding-bottom: 28px; margin-bottom: 0; border-bottom: 1px solid var(--mg-linea-chiara); }
.mg-footer__marchio { grid-column: auto; }
.mg-footer__marchio img { width: 130px; height: auto; margin-bottom: 14px; }
.mg-footer__marchio p { color: rgba(0,0,0,.56); max-width: 30ch; margin: 0 0 10px; }
.mg-footer__titolo { margin: 0 0 12px; font-weight: 600; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--mg-inchiostro); }
.mg-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mg-footer li { margin: 0; }
.mg-footer li a { display: inline-block; padding-block: 0; }
.mg-footer__marchio ul { gap: 4px; }
.mg-footer__dati { border: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; padding-top: 18px; font-size: 12px; font-variant-numeric: tabular-nums; color: rgba(0,0,0,.56); line-height: 1.33; }
.mg-footer__dati > div { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.mg-footer__dati strong { color: var(--mg-inchiostro); font-weight: 600; }
.mg-footer__dati .mg-vettore { display: none; }
.mg-footer__dati .mg-footer__dato + .mg-footer__dato::before { content: none; display: none; }   /* niente punti separatori (ancora nella vecchia regola di selectors.css) */
@media (max-width: 834px) {
  .mg-footer__griglia { grid-template-columns: 1fr 1fr; }
  .mg-footer__marchio { grid-column: 1 / -1; }
}
@media (max-width: 734px) {
  /* telefono: testo secondario >= 14 px (regola del Task 1) */
  .mg-footer, .mg-footer__dati, .mg-footer__titolo { font-size: 14px; }
  .mg-footer__dati, .mg-footer__dati > div { flex-direction: column; gap: 6px; }
  .mg-footer li a { padding-block: .15rem; }
}

/* ---------- 15. Movimento: sobrio, nativo, disattivabile ---------- */
/* Comparsa allo scroll: la guida scroll.js (aggiunge .js su <html> e .vista all'ingresso).
   Sostituisce la vecchia animazione nativa view() di .mg-rivela: due meccanismi sullo stesso elemento raddoppierebbero il movimento.
   Senza JS la classe .js non c'e' e il contenuto resta visibile. */
/* Comparsa con @keyframes (non transition): cosi' non sovrascrive le transizioni proprie dell'elemento (es. hover di .mg-card--servizio).
   fill-mode backwards: finita l'animazione l'elemento torna ai suoi stili normali. */
.js .mg-rivela:not(.vista) { opacity: 0; transform: translateY(40px); }
.js .mg-rivela.vista { animation: mg-entra .9s var(--mg-curva) backwards; }
@keyframes mg-entra { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
.js .mg-bento .mg-rivela.vista:nth-child(2), .js .mg-rivela.vista:nth-child(4n+2) { animation-delay: .08s; }
.js .mg-bento .mg-rivela.vista:nth-child(3), .js .mg-rivela.vista:nth-child(4n+3) { animation-delay: .16s; }
.js .mg-rivela.vista:nth-child(4n) { animation-delay: .24s; }
/* Frasi che si accendono (data-frasi) e percorso (data-percorso): solo con JS, senza resta tutto leggibile */
.js .mg-frase { opacity: .18; transition: opacity .45s var(--mg-curva); }
.js .mg-frase.accesa { opacity: 1; }
[data-percorso] > li { transition: opacity .4s var(--mg-curva); }
.js [data-percorso] > li:not(.ok) { opacity: .35; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .mg-emergenza__tel::before { animation: none; }
  .js .mg-rivela:not(.vista) { opacity: 1; transform: none; }
  .js .mg-frase { opacity: 1; }
  .js .mg-rivela.vista { animation: none; }
  .js [data-percorso] > li { opacity: 1; }
  .mg-progresso { display: none; }
  /* Animazioni native di Oxygen (entrance.js / parallax.js non guardano prefers-reduced-motion): stato finale fisso.
     entrance.css nasconde [data-entrance] con visibility:hidden finche' il JS non parte: qui si forza visibile. */
  [data-entrance], [data-parallax] { visibility: visible !important; opacity: 1 !important; transform: none !important; filter: none !important; }
  .mg-vettore__punto { background: var(--mg-accento) !important; }
  .mg-passi__nodo { background: var(--mg-verde) !important; color: var(--mg-carta) !important; }
}

/* ---------- 15b. Telefono: card e blocchi CTA più compatti, stesso testo, meno aria (critica I3) ---------- */
@media (max-width: 640px) {
  .mg-card, .mg-incluso__col, .mg-cta__dopo, .mg-test { padding: var(--mg-s4); }
  .mg-cta { padding: var(--mg-s5) var(--mg-s4); }
}

/* ---------- 16. Stampa ---------- */
@media print {
  .mg-emergenza, .mg-barra, .mg-menu-mobile, .mg-footer nav, .mg-progresso, .mg-cta { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a { color: #000; }
}

/* ---------- 17. Home (fase 4, task 5): regole dal <style> di design/prototipi/home.html + agganci per le animazioni di Oxygen ---------- */
/* Sfera a rete (sfera.js) su tutto il hero: sostituisce i vettori sfalsati di .mg-hero__sfondo (ruling del task 5). Senza JS resta vuota. */
.mg-hero__sfera { position: absolute; inset: 0; pointer-events: none; overflow: hidden; opacity: .9; }   /* come su newsite: tutto il hero, sfera centrata (slice), testo sopra */
.mg-hero__sfera svg { display: block; width: 100%; height: 100%; }
@media (max-width: 959px) { .mg-hero__sfera { bottom: auto; height: 130vw; } }   /* telefono: a tutta larghezza ma alto come la sfera (hero da 1300 px: lo "slice" ne mostrerebbe solo una fascia) */
.mg-hero__prova { display: grid; gap: var(--mg-s4); margin-top: var(--mg-s5); }
@media (min-width: 960px) { .mg-hero__prova { margin-top: 1.75rem; } }
/* Segno animato (hero e CTA): linea e punto sono elementi veri, cosi' Oxygen li anima; l'anello resta ::before, il punto ::after si spegne */
.mg-vettore--anim::after { display: none; }
.mg-vettore__linea { position: absolute; left: calc(var(--mg-punto) - 1px); right: calc(var(--mg-punto) - 1px); top: calc(50% - var(--mg-tratto) / 2); height: var(--mg-tratto); background: var(--mg-punto-vuoto); transform-origin: left center; }
.mg-vettore__punto { position: absolute; right: 0; top: 0; width: var(--mg-punto); height: var(--mg-punto); border-radius: 50%; background: var(--mg-accento); }
/* Cinque cose: due colonne dai 760 px; segnaposto del rapportino */
.mg-prove { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .mg-prove { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.mg-card--rapportino { justify-content: center; align-items: flex-start; }
.mg-rapportino { position: relative; width: 100%; border: 0; border-radius: var(--mg-r-l); background: var(--mg-sfondo); padding: var(--mg-s5); font-weight: 500; font-variant-numeric: tabular-nums; font-size: .875rem; color: var(--mg-testo-2); display: grid; gap: .7rem; min-height: 15rem; align-content: start; }   /* in fase 4: screenshot 4:3 con width/height dichiarati */
.mg-rapportino__riga { display: grid; grid-template-columns: 1fr auto; gap: 1rem; border-bottom: 1px dashed var(--mg-linea); padding-bottom: .5rem; opacity: .35; }
.mg-rapportino__riga--ultima { border-bottom: 0; }
.mg-rapportino__riga span:last-child { color: var(--mg-testo); }
.mg-rapportino__barra { height: 6px; border-radius: 3px; background: var(--mg-linea); overflow: hidden; }
.mg-rapportino__barra i { display: block; height: 100%; width: 38%; background: var(--mg-accento); }
.mg-rapportino__seg { position: absolute; left: var(--mg-s4); right: var(--mg-s4); top: 50%; transform: translateY(-50%); text-align: center; padding: var(--mg-s3) var(--mg-s4); font-weight: 500; font-variant-numeric: tabular-nums; font-size: .75rem; color: var(--mg-testo); background: var(--mg-sfondo-2); border: 1px dashed var(--mg-testo-2); border-radius: var(--mg-r-s); }
/* Le due strade: Veneto / Italia */
.mg-strade-home { display: grid; gap: var(--mg-s5); }
@media (min-width: 860px) { .mg-strade-home { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.mg-strada-card { border: 0; border-radius: var(--mg-r-l); padding: var(--mg-s6); background: var(--mg-tessera); display: grid; gap: var(--mg-s3); align-content: start; }
@media (max-width: 640px) { .mg-strada-card { padding: var(--mg-s5) var(--mg-s4); } .mg-rapportino { min-height: 11rem; } }
.mg-strada-card .mg-vettore { margin-bottom: var(--mg-s2); }
.mg-strada-card--italia { --mg-vettore-l: 12rem; }
.mg-strada-card h3 { font-size: var(--mg-t-h3); }
.mg-strada-card p { color: var(--mg-testo-2); margin: 0; }
.mg-strada-card .mg-azioni { margin-top: var(--mg-s3); }
/* Da dove volete partire: la riga di link nelle card */
.mg-card__link { gap: .4rem 1rem; font-size: .9375rem; }
/* "Da dove volete partire": card dai 760 px, elenco compatto sotto (critica I3) */
@media (max-width: 767px) {   /* breakpoint Oxygen Phone Landscape */
  .mg-partire { gap: 0; border-top: 1px solid var(--mg-linea); }
  .mg-partire .mg-card { border: 0; border-bottom: 1px solid var(--mg-linea); border-radius: 0; background: transparent; padding: var(--mg-s4) 0; gap: .35rem; transform: none !important; }
  .mg-partire .mg-card .mg-vettore { display: none; }
  .mg-partire .mg-card h3 { font-size: 1.125rem; }
  .mg-partire .mg-card p { font-size: var(--mg-t-piccolo); }
}
/* Percorso animato (#percorso): i numeri sono span veri (.mg-passi__nodo, da anello a punto verde con lo scroll) e la spina verde unica (.mg-passi__spina) si riempie sopra la traccia grigia; sotto i 900 px resta la traccia per segmento del prototipo */
.mg-passi--orizz { position: relative; }   /* classe registrata anche in Oxygen (la regola vera e' nella @media 900 della sezione 3) */
.mg-passi--anim > li::before { content: none; }
.mg-passi__nodo { position: absolute; left: 0; top: .1rem; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: .875rem; font-variant-numeric: tabular-nums; background: var(--mg-verde); color: var(--mg-carta); border: var(--mg-tratto) solid currentColor; }
.mg-passi__spina { display: none; }
.mg-dopo-passi { margin-top: var(--mg-s6); }
@media (min-width: 900px) {
  .mg-passi--anim > li > .mg-passi__nodo { top: 0; left: 0; }
  .mg-passi__spina { display: block; position: absolute; z-index: 1; top: calc(1rem - 1px); left: 1rem; width: calc(80% + .8 * var(--mg-s5)); height: 2px; background: var(--mg-verde); transform-origin: left top; }
}
/* Settori e guide */
.mg-settori { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--mg-linea); }
.mg-settori li { border-bottom: 1px solid var(--mg-linea); }
.mg-settori a { display: grid; grid-template-columns: 1fr; gap: .2rem 1.5rem; padding: 1.1rem 0; color: var(--mg-testo); text-decoration: none; }
@media (min-width: 760px) { .mg-settori a { grid-template-columns: 17rem 1fr auto; align-items: baseline; } }
.mg-settori strong { font-size: 1.125rem; }
.mg-settori span { color: var(--mg-testo-2); }
.mg-settori a::after { content: "→"; color: var(--mg-accento-testo); justify-self: end; display: none; }
@media (min-width: 760px) { .mg-settori a::after { display: block; } }
.mg-settori a:hover strong { color: var(--mg-accento-testo); }
.mg-sezione__testa--stretta { margin-bottom: var(--mg-s5); }
.mg-titolo--h3 { font-size: var(--mg-t-h3); }
.mg-guide { list-style: none; margin: 0; padding: 0; border: 0; border-radius: var(--mg-r-l); background: var(--mg-tessera); overflow: hidden; }
.mg-guide li + li { margin: 0; border-top: 1px solid var(--mg-linea); }
.mg-guide a { display: block; padding: var(--mg-s4) var(--mg-s5); text-decoration: none; color: var(--mg-testo); font-weight: 600; font-size: 1.0625rem; line-height: 1.35; }
.mg-guide a:hover { background: var(--mg-sfondo); color: var(--mg-accento-testo); }
.mg-guide .mg-etichetta { display: block; margin-bottom: .3rem; font-weight: 400; }

/* ---------- 18. Pagine servizio (fase 4, task 6): modello S (componenti Hero servizio / FAQ / CTA finale / Segno) e pagina Backup aziendale ---------- */
/* Regole dal <style> di design/prototipi/backup-aziendale.html senza inline style e senza attributi data-* (html-to-page non li porta: varianti a classe). */
.mg-hero__testo { min-width: 0; }                                   /* colonna del testo del hero di pagina */
.mg-hero__lato { min-width: 0; }                                    /* colonna laterale del hero di pagina (riquadro test, schermata...); nel prototipo era un .mg-rivela anonimo */
.mg-primo { margin-top: 0; }                                        /* primo titolo di un articolo, subito sotto il segno (era style="margin-top:0") */
.mg-articolo .mg-primo { margin-top: 0; }
.mg-articolo--dopo { margin-top: var(--mg-s7); }                    /* blocco di testo dopo la griglia passi + schema */
.mg-sezione--coda { padding-top: 0; }                               /* riga "Collegamenti" attaccata alla CTA scura */
.mg-collegamenti strong { color: var(--mg-testo); }
/* Schema "dove vanno i vostri dati": varianti a classe equivalenti a li[data-tipo="noi"] / [data-tipo="facoltativo"] */
.mg-schema > li.mg-schema__noi::before { background: var(--mg-accento); border-color: var(--mg-accento); }   /* (0,2,2): batte .mg-schema > li::before */
.mg-schema > li.mg-schema__facoltativo::before { border-style: dashed; border-width: 2px; }
/* Pillola "dove vale" spenta (equivale a span[data-off]) */
.mg-dove .mg-dove__off::before { background: transparent; border: 2px solid var(--mg-testo-2); }
/* RAID contro backup separato: schema in HTML/CSS (l'SVG a 11 px sbordava: critica B5). Testo a 13 px, mai sotto. */
.mg-raid { display: grid; gap: var(--mg-s5); margin-block: var(--mg-s5) var(--mg-s6); }
@media (min-width: 760px) { .mg-raid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.mg-raid__pannello { border: 0; border-radius: var(--mg-r-l); background: var(--mg-tessera); padding: var(--mg-s5); }
.mg-raid__pannello h3 { font-size: 1.0625rem; margin: 0 0 var(--mg-s3); }
.mg-raid__pannello p { font-size: var(--mg-t-piccolo); color: var(--mg-testo-2); margin: var(--mg-s3) 0 0; }
.mg-raid .mg-etichetta { display: block; }
.mg-raid__schema { display: grid; grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 1fr); align-items: center; margin-block: var(--mg-s3) var(--mg-s4); }
.mg-disco { display: grid; gap: .15rem; text-align: center; padding: .9rem .6rem; border: 2px solid var(--mg-testo); border-radius: 8px; background: var(--mg-sfondo); font-weight: 500; font-variant-numeric: tabular-nums; font-size: .8125rem; line-height: 1.35; color: var(--mg-testo); min-width: 0; }
.mg-disco small { font-size: .875rem; color: var(--mg-testo-2); }
.mg-disco--colpito { border-color: var(--mg-fermo); background: var(--mg-rosso-velo); }
.mg-disco--colpito small { color: var(--mg-fermo); }
.mg-disco--salvo { border-color: var(--mg-accento); background: var(--mg-accento-velo); }
.mg-disco--salvo small { color: var(--mg-accento-testo); }
.mg-raid__linea { position: relative; height: 2px; background: var(--mg-testo-2); }
.mg-raid__linea::after { content: ""; position: absolute; right: -2px; top: 50%; width: 10px; height: 10px; border-radius: 50%; transform: translateY(-50%); background: var(--mg-testo); }
.mg-raid__linea--fermo { background: var(--mg-fermo); }
.mg-raid__linea--fermo::after { background: var(--mg-fermo); }
.mg-raid__linea--tratt { background: repeating-linear-gradient(90deg, var(--mg-testo-2) 0 4px, transparent 4px 10px); }
.mg-raid__linea--tratt::after { background: var(--mg-accento); }
@media (max-width: 479px) {
  .mg-raid__schema { grid-template-columns: minmax(0, 1fr); }
  .mg-raid__linea { width: 2px; height: 2.5rem; margin: 0 auto; }
  .mg-raid__linea--tratt { background: repeating-linear-gradient(180deg, var(--mg-testo-2) 0 4px, transparent 4px 10px); }
  .mg-raid__linea::after { right: auto; left: 50%; top: auto; bottom: -2px; transform: translateX(-50%); }
}
/* Tre domande del backup in cloud: la domanda e' un p.mg-tre__q (html-to-page non tiene uno strong "nudo" come blocco) */
.mg-tre { counter-reset: d; list-style: none; padding: 0; margin: var(--mg-s4) 0 var(--mg-s6); display: grid; gap: var(--mg-s4); }
@media (min-width: 760px) { .mg-tre { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mg-tre li { counter-increment: d; border: 0; border-radius: var(--mg-r-l); padding: var(--mg-s5); background: var(--mg-tessera); }
.mg-tre li + li { margin-top: 0; }
.mg-tre li::before { content: counter(d); display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--mg-testo); font-weight: 600; font-variant-numeric: tabular-nums; font-size: .875rem; margin-bottom: var(--mg-s3); }
.mg-tre li p { margin: 0; color: var(--mg-testo-2); font-size: 1rem; }
.mg-tre li .mg-tre__q { display: block; font-weight: 600; margin: 0 0 .25rem; color: var(--mg-testo); font-size: var(--mg-t-lettura); }
/* Per chi e': elenco con il punto verde */
.mg-perchi { list-style: none; padding: 0; margin: 0 0 var(--mg-s5); display: grid; gap: var(--mg-s3); }
.mg-perchi li { padding-left: 1.6rem; position: relative; }
.mg-perchi li::before { content: ""; position: absolute; left: 0; top: .6rem; width: 10px; height: 10px; border-radius: 50%; background: var(--mg-accento); }

/* ---------- 19. Pagine servizio (fase 4, task 7) ---------- */
.mg-articolo .mg-passi h3 { margin-top: 0; }                         /* passi con h3 dentro un articolo: titolo allineato al numero */
.mg-articolo .mg-passi > li > p:first-child { margin-top: 0; }
.mg-perchi li p { margin: 0; }
.mg-articolo .mg-passi + p { margin-top: var(--mg-s5); }   /* paragrafo dopo i passi (assistenza-remota) */

/* ---------- 20. Noleggio stampanti (fase 4, task 8) ---------- */
/* Pannello del toner nel hero (esempio di schermata) e passi toner -> avviso -> cartuccia */
.mg-livello { display: grid; grid-template-columns: 4.5rem 1fr auto; align-items: center; gap: .4rem .6rem; font-weight: 500; font-variant-numeric: tabular-nums; font-size: .875rem; color: var(--mg-testo-2); }
.mg-livello__nota { grid-column: 1 / -1; color: var(--mg-attenzione); }
.mg-livello__intera { grid-column: 1 / -1; }
.mg-livello__avviso { color: var(--mg-accento-testo); }
.mg-livello i { height: 8px; border-radius: 4px; background: var(--mg-linea); position: relative; overflow: hidden; }
.mg-livello i::after { content: ""; position: absolute; inset: 0; width: var(--l, 50%); background: var(--mg-testo-2); border-radius: 4px; }
.mg-livello--soglia i::after { background: var(--mg-attenzione); }
.mg-livello--ok i::after { background: var(--mg-accento); }
.mg-l14 { --l: 14%; }
.mg-l100 { --l: 100%; }
.mg-stampante { border: 0; border-radius: var(--mg-r-l); background: var(--mg-tessera); padding: var(--mg-s5); display: grid; gap: var(--mg-s3); }
.mg-stampante__seg { font-weight: 500; font-variant-numeric: tabular-nums; font-size: .875rem; color: var(--mg-testo-2); text-align: center; border: 1px dashed var(--mg-testo-2); border-radius: var(--mg-r-s); padding: var(--mg-s4); min-height: 9rem; display: grid; place-items: center; }
.mg-toner { list-style: none; counter-reset: t; margin: var(--mg-s5) 0 var(--mg-s6); padding: 0; display: grid; gap: var(--mg-s4); max-width: none; }
.mg-toner li { counter-increment: t; border: 0; border-radius: var(--mg-r-l); background: var(--mg-tessera); padding: var(--mg-s5); display: grid; gap: .5rem; align-content: start; margin-top: 0; }
.mg-toner li + li { margin-top: 0; }
.mg-toner strong { font-size: 1.0625rem; }
.mg-toner strong::before { content: counter(t) ". "; font-variant-numeric: tabular-nums; }
.mg-toner p { margin: 0; color: var(--mg-testo-2); font-size: 1rem; }
@media (min-width: 760px) { .mg-toner { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Esempio di eccedenza: le tre frasi del testo in una scheda, l'ultima in ambra */
.mg-eccedenza { border: 0; border-radius: var(--mg-r-l); background: var(--mg-tessera); padding: var(--mg-s5); font-weight: 500; font-variant-numeric: tabular-nums; display: grid; gap: .6rem; max-width: 34rem; margin-block: var(--mg-s4) var(--mg-s5); }
.mg-eccedenza p { margin: 0; border-bottom: 1px dashed var(--mg-linea); padding-bottom: .5rem; font-size: .9375rem; }
.mg-eccedenza p:last-child { border: 0; padding-bottom: 0; color: var(--mg-attenzione); }
/* Cosa fa variare il costo: schede con la frase intera */
.mg-variabili { list-style: none; padding: 0; margin: var(--mg-s4) 0 var(--mg-s5); display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); max-width: none; }
.mg-variabili li { padding: .75rem 1rem; border: 0; border-radius: var(--mg-r-l); background: var(--mg-tessera); font-size: 1rem; margin-top: 0; }
.mg-variabili li + li { margin-top: 0; }
.mg-articolo > div:has(> .mg-toner), .mg-articolo > div:has(> .mg-variabili) { max-width: none; }

/* ---------- 21. Preventivo stampanti (fase 4, task 9b) ---------- */
.mg-hero--strumento { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem); }
.mg-hero--strumento .mg-vettore { --mg-vettore-l: min(100%, 22rem); margin-bottom: var(--mg-s4); }
@media (max-width: 640px) { .mg-hero--strumento .mg-vettore { --mg-vettore-l: min(100%, 8rem); } }
.mg-hero--strumento .mg-azioni { margin-top: var(--mg-s5); }
.mg-hero__lato--come { margin-top: 0; }
.mg-hero__lato--come .mg-etichetta { display: block; margin-bottom: var(--mg-s4); }
.mg-hero__lato--come > .mg-nota { margin-top: var(--mg-s4); }
.mg-come { counter-reset: c; list-style: none; padding: 0; margin: 0; display: grid; gap: var(--mg-s4); max-width: none; }
@media (min-width: 480px) { .mg-come--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.mg-come li { counter-increment: c; border-top: 2px solid var(--mg-linea); padding-top: var(--mg-s3); font-size: 1rem; margin-top: 0; }
.mg-come li::before { content: "0" counter(c); display: block; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--mg-accento-testo); font-size: var(--mg-t-etichetta); letter-spacing: .09em; margin-bottom: .4rem; }
.mg-annuncio { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mg-modulo { border: 1px solid var(--mg-linea); border-radius: var(--mg-r-l); background: var(--mg-sfondo); padding: clamp(1.5rem, 4vw, 3rem); }
.mg-modulo__fine { display: none; }
.mg-modulo__fine[data-attivo] { display: block; animation: mg-entra 320ms var(--mg-curva); }
.mg-modulo__fine:focus { outline: none; }
.mg-modulo__fine h2 { display: flex; gap: .7rem; align-items: center; }
.mg-modulo__fine h2::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--mg-accento); }
.mg-trovate { list-style: none; padding: 0; margin: 0 0 var(--mg-s4); display: grid; gap: .6rem; max-width: none; }
.mg-trovate li { padding: .75rem 1rem; border: 0; border-radius: var(--mg-r-l); background: var(--mg-tessera); font-size: 1rem; display: flex; gap: .7rem; align-items: start; margin-top: 0; }
.mg-trovate li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--mg-accento); margin-top: .5rem; flex-shrink: 0; }
.mg-nonloso { margin-top: var(--mg-s3); }
.mg-campi-2 { display: grid; gap: var(--mg-s4); align-items: start; }
@media (min-width: 640px) { .mg-campi-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.mg-campi-2 .mg-campo { margin-bottom: 0; }
.mg-campo--privacy { margin-top: var(--mg-s5); }
.mg-campo--turnstile { margin-top: var(--mg-s5); margin-bottom: 0; }
.mg-sezione__testa--modulo .mg-nota { margin-top: var(--mg-s3); }
.mg-fine-nota { margin-top: var(--mg-s4); }
.mg-privacy-card p { color: var(--mg-testo); }
.mg-privacy-card .mg-etichetta { display: block; margin-bottom: var(--mg-s3); }
/* esca anti-spam: fuori schermo, non nel flusso */
.mg-esca { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.mg-invio-errore { margin: var(--mg-s4) 0 0; flex-basis: 100%; }
.mg-trovate-griglia { display: grid; gap: var(--mg-s7); align-items: start; }
@media (min-width: 900px) { .mg-trovate-griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* pagina /strumenti/: scheda dello strumento, non a tutta larghezza */
.mg-card--strumento { max-width: 36rem; display: grid; gap: var(--mg-s4); justify-items: start; }
.mg-card--strumento h2, .mg-card--strumento p { margin: 0; }

/* ---------- 22. Guide (fase 4, task 10, stile Apple 31/10/2026): modello G sobrio. Testa bianca, articolo su bianco con indice laterale,
   "In breve" e schede come tessere grigie senza bordo, barra di lettura; nessun effetto oltre la comparsa. Pagina /guide/ a tessere.
   Le regole vecchie delle stesse classi in selectors.css (Oxygen, con bordi Linea) sono battute qui: mg-base si carica dopo. ---------- */
/* Testa: bianca, allineata alla colonna di lettura, niente linee */
.mg-guida-testa { padding: clamp(48px, 7vw, 96px) 0 clamp(24px, 3vw, 40px); border: 0; background: var(--mg-bianco); color: var(--mg-testo); }
.mg-guida-testa h1 { max-width: 22ch; margin: 0 0 24px; font-size: clamp(34px, 4.6vw, 56px); line-height: 1.07; letter-spacing: -.03em; font-weight: 600; }
.mg-guida-testa .mg-etichetta { display: block; margin: 0 0 16px; }
.mg-guida-testa .mg-briciole { margin-bottom: 28px; }
.mg-guida-testa .mg-guida-sotto { margin: 0; max-width: 62ch; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.45; color: var(--mg-testo-2); }
.mg-fonte { font-size: var(--mg-t-piccolo); color: var(--mg-testo-2); max-width: 70ch; margin: 0; }
.mg-fonte a, .mg-guida-sotto a { color: var(--mg-accento-testo); }
/* Corpo: articolo + indice laterale (dai 1000 px) */
.mg-guida-corpo { padding: clamp(24px, 3vw, 40px) 0 clamp(80px, 9vw, 120px); border: 0; background: var(--mg-bianco); color: var(--mg-testo); }
.mg-guida-griglia { display: grid; grid-template-columns: minmax(0, 1fr); gap: 64px; align-items: start; }
@media (min-width: 1000px) { .mg-guida-griglia { grid-template-columns: minmax(0, 1fr) 260px; gap: 80px; } }
.mg-guida-corpo .mg-articolo > * { max-width: 70ch; }
.mg-articolo h2 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; letter-spacing: -.02em; font-weight: 600; margin: 2.4em 0 .6em; padding: 0; }
.mg-articolo h3 { font-size: 1.25rem; line-height: 1.3; letter-spacing: -.01em; font-weight: 600; margin: 1.8em 0 .5em; }
.mg-articolo h2 + h3 { margin-top: .8em; }
.mg-articolo p { margin: 0 0 1em; }
.mg-articolo ul, .mg-articolo ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.mg-articolo a { color: var(--mg-accento-testo); }
.mg-articolo h2[id], .mg-articolo h3[id], .mg-guida-faq { scroll-margin-top: 76px; }
.mg-articolo > :first-child { margin-top: 0; }
.mg-articolo .mg-tabella-scroll { max-width: none; margin: 1.4em 0 1.6em; }
.mg-articolo .mg-tabella { font-size: 1rem; }
.mg-articolo .mg-tabella th { font-size: .875rem; }
/* In breve: tessera grigia */
.mg-inbreve { background: var(--mg-tessera); border: 0; border-radius: var(--mg-r-l); padding: clamp(24px, 3vw, 36px); margin: 0 0 40px; font-size: 1.0625rem; }
.mg-articolo .mg-inbreve { max-width: none; }
.mg-inbreve h2 { flex-wrap: wrap; margin: 0 0 16px !important; font-size: 1.25rem; letter-spacing: -.01em; }
.mg-inbreve h2 .mg-dato { margin-left: auto; font-size: .875rem; font-weight: 400; color: var(--mg-testo-2); letter-spacing: 0; }
.mg-inbreve ul { margin: 0; padding-left: 1.2em; }
.mg-inbreve li + li { margin-top: .6em; }
/* Indice: un solo componente (nav.mg-indice); .mg-indice-box = tessera nell'articolo (fino a 999 px), .mg-indice-desk = colonna fissa */
.mg-indice-desk { display: none; }
.mg-indice-box { margin: 0 0 40px; max-width: none !important; }
.mg-indice-box .mg-indice { position: static; border: 0; border-radius: var(--mg-r-l); padding: 24px 28px; background: var(--mg-tessera); }
.mg-indice-box .mg-indice ol { columns: 2; column-gap: 32px; }
@media (max-width: 640px) { .mg-indice-box .mg-indice ol { columns: 1; } }
@media (min-width: 1000px) { .mg-indice-desk { display: block; position: sticky; top: 76px; } .mg-indice-box { display: none; } }
.mg-indice { position: static; border: 0; padding: 0; font-size: .9375rem; line-height: 1.35; }
.mg-indice-desk .mg-indice { border-left: 1px solid var(--mg-linea); padding-left: 20px; }
.mg-indice h2 { margin: 0 0 12px !important; padding: 0; font-size: .875rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--mg-testo-2); }
.mg-indice li { break-inside: avoid; }
.mg-articolo .mg-indice ol, .mg-indice ol { list-style: none; margin: 0; padding: 0; }
.mg-indice a { display: block; padding: .35rem 0; border-radius: var(--mg-r-s); color: var(--mg-testo-2); text-decoration: none; }
.mg-indice a::before { color: var(--mg-testo-2); font-size: .875rem; }
.mg-indice a:hover { color: var(--mg-testo); }
.mg-indice a.is-attiva { color: var(--mg-testo); font-weight: 600; }
.mg-indice a.is-attiva::before { color: var(--mg-accento-testo); }
/* Barra di lettura: sottile, verde, sopra la barra sticky; spenta con movimento ridotto (sezione 13 per l'animazione legata allo scroll) */
.mg-progresso { background: var(--mg-verde); height: 3px; }
@media (prefers-reduced-motion: reduce) { .mg-progresso { display: none; } }
/* Schede dentro l'articolo (tessere grigie, raggio 28, senza bordo) */
.mg-articolo .mg-obblighi, .mg-articolo .mg-catena, .mg-articolo .mg-regole, .mg-articolo .mg-decisione, .mg-articolo .mg-timeline, .mg-articolo .mg-domande, .mg-articolo .mg-spunte, .mg-articolo .mg-formula, .mg-articolo .mg-avviso { max-width: none; }
.mg-obblighi { display: grid; gap: 16px; margin: 1.4em 0 1.6em; align-items: stretch; }
@media (min-width: 700px) { .mg-obblighi { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .mg-obblighi > div:nth-child(2):nth-last-child(3) { grid-row: span 3; } }   /* NIS2: la scheda lunga (misure) a destra, le tre brevi a sinistra */
.mg-obblighi > div { border: 0; border-radius: var(--mg-r-l); background: var(--mg-tessera); padding: 28px; font-size: 1rem; }
.mg-articolo .mg-obblighi h3 { margin: 0 0 .5em; font-size: 1.125rem; }
.mg-obblighi ul { padding-left: 1.2em; margin: 0; }
.mg-obblighi p { margin: 0 0 .5em; }
.mg-obblighi p:last-child { margin-bottom: 0; }
.mg-articolo .mg-obblighi li + li { margin-top: .3em; }
/* tre schede affiancate (regole, esempi di configurazione) */
.mg-regole { display: grid; gap: 16px; margin: 1.4em 0 1.6em; }
@media (min-width: 700px) { .mg-regole { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mg-regole > div { border: 0; border-radius: var(--mg-r-l); padding: 24px; background: var(--mg-tessera); font-size: 1rem; }
.mg-regole p { margin: 0; }
.mg-regole p + p { margin-top: .5em; }
.mg-regole strong { display: flex; gap: .55rem; align-items: baseline; margin-bottom: .35rem; }
.mg-regole strong::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--mg-accento); flex-shrink: 0; transform: translateY(-1px); }
/* catena di fornitura: quattro colonne con filetto */
.mg-catena { list-style: none; padding: 0 !important; margin: 1.4em 0 1.6em; display: grid; gap: 20px; }
@media (min-width: 700px) { .mg-catena { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mg-catena li { border-top: 2px solid var(--mg-testo); padding-top: 12px; font-size: 1rem; margin: 0; }
.mg-articolo .mg-catena li + li { margin-top: 0; }
/* elenchi numerati 01, 02... (domande, passi) */
.mg-domande { counter-reset: q; list-style: none; padding: 0 !important; margin: 1.2em 0 1.6em; display: grid; gap: 0; }
.mg-domande li { counter-increment: q; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: .5rem; padding: 14px 0; border-bottom: 1px solid var(--mg-linea); font-size: 1.0625rem; margin: 0; }
.mg-domande li:first-child { border-top: 1px solid var(--mg-linea); }
.mg-articolo .mg-domande li + li { margin-top: 0; }
.mg-domande li::before { content: counter(q, decimal-leading-zero); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--mg-accento-testo); font-size: .875rem; padding-top: .2rem; }
/* checklist "cosa preparare" / "cosa chiedere": quadratino vuoto da spuntare a mano (anche in stampa) */
.mg-spunte { list-style: none; padding: 0 !important; margin: 1.2em 0 1.6em; background: var(--mg-tessera); border-radius: var(--mg-r-l); padding: 20px 28px !important; }
.mg-spunte li { position: relative; padding: 10px 0 10px 34px; margin: 0; font-size: 1.0625rem; }
.mg-articolo .mg-spunte li + li { margin-top: 0; border-top: 1px solid var(--mg-linea); }
.mg-spunte li::before { content: ""; position: absolute; left: 0; top: 14px; width: 18px; height: 18px; border: 1.5px solid var(--mg-bordo-controllo); border-radius: 5px; background: var(--mg-bianco); }
/* formula / riquadro evidenziato */
.mg-formula { margin: 1.4em 0 1.6em; padding: 24px 28px; border-radius: var(--mg-r-l); background: var(--mg-tessera); font-size: clamp(18px, 1.6vw, 21px); line-height: 1.4; }
.mg-formula p { margin: 0; }
.mg-articolo .mg-avviso { margin: 1.4em 0 1.6em; border-radius: var(--mg-r-l); padding: 20px 24px; }
/* Decisione "La mia azienda rientra?" */
.mg-decisione { list-style: none; margin: 1.2em 0 1.4em; padding: 0 !important; display: grid; gap: 12px; }
.mg-decisione li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; border: 0; border-radius: var(--mg-r-l); padding: 20px 24px; background: var(--mg-tessera); font-size: 1rem; margin: 0; }
.mg-articolo .mg-decisione li + li { margin-top: 0; }
.mg-decisione .mg-dato { font-size: .875rem; color: var(--mg-testo-2); padding-top: .15rem; white-space: nowrap; }
.mg-decisione strong { display: block; }
.mg-decisione li p { margin: 0; }
@media (max-width: 540px) { .mg-decisione li { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
/* Timeline delle scadenze: due binari come tessere; il punto pieno verde = scadenza vicina, pieno scuro = gia' in vigore */
.mg-timeline { display: grid; gap: 16px; margin: 1.4em 0 .6em; }
@media (min-width: 760px) { .mg-timeline { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.mg-timeline__binario { border: 0; border-radius: var(--mg-r-l); background: var(--mg-tessera); padding: 28px; }
.mg-articolo .mg-timeline__binario h3 { font-size: 1.0625rem; margin: 0 0 16px; }
.mg-timeline__binario ul { list-style: none; margin: 0; padding: 0 !important; position: relative; }
.mg-timeline__binario li { position: relative; padding: 0 0 1rem 1.75rem; font-size: 1rem; margin: 0; }
.mg-articolo .mg-timeline__binario li + li { margin-top: 0; }
.mg-timeline__binario li::before { content: ""; position: absolute; left: 0; top: .45rem; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--mg-testo); background: var(--mg-tessera); }
.mg-timeline__binario li::after { content: ""; position: absolute; left: 5.5px; top: 1.3rem; bottom: .1rem; width: 1px; background: var(--mg-linea); }
.mg-timeline__binario li:last-child { padding-bottom: 0; }
.mg-timeline__binario li:last-child::after { display: none; }
.mg-timeline__binario li.mg-timeline__passato::before { background: var(--mg-testo); }
.mg-timeline__binario li.mg-timeline__prossimo::before { background: var(--mg-accento); border-color: var(--mg-accento); }
.mg-timeline__binario li.mg-timeline__fonte-voce { padding-left: 0; font-size: .9375rem; color: var(--mg-testo-2); }
.mg-timeline__binario li.mg-timeline__fonte-voce::before { display: none; }
.mg-articolo .mg-timeline__verificato { margin: 0 0 1.4em; font-size: .9375rem; color: var(--mg-testo-2); }
/* FAQ della guida (componente 248) e collegamenti in coda */
.mg-guida-faq { display: block; }
/* Pagina /guide/: tessere grigie su fascia bianca, con le guide pratiche (trucchi) in fondo */
.mg-guide-elenco { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: stretch; max-width: 1000px; }
@media (min-width: 760px) { .mg-guide-elenco { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mg-guide-elenco li + li { margin-top: 0; }
.mg-guide-elenco > li { display: flex; flex-direction: column; gap: 12px; border-radius: var(--mg-r-l); background: var(--mg-tessera); padding: clamp(28px, 3vw, 40px); }
.mg-guide-elenco h2 { font-size: clamp(22px, 2vw, 28px); line-height: 1.18; letter-spacing: -.02em; margin: 0; }
.mg-guide-elenco h2 a { color: var(--mg-testo); text-decoration: none; }
.mg-guide-elenco h2 a:hover { color: var(--mg-accento-testo); }
.mg-guide-elenco p { margin: 0; color: var(--mg-testo-2); font-size: 1.0625rem; line-height: 1.45; }
.mg-guide-elenco .mg-etichetta { display: block; }
.mg-guide-elenco .mg-link-freccia { margin-top: auto; padding-top: 8px; }
/* link sotto un titolo centrato (es. "Vedete tutti i trucchi" su /guide/) */
.mg-h-centro .mg-h-links { justify-items: center; margin-top: 24px; padding-top: 0; font-size: 17px; }

/* ---------- 99. Stile Apple (30/10/2026): fasce, tessere, bento, titoli, occhiello (da design/prototipi/home-apple.html) ---------- */
/* Fasce: il cambio di sezione e' solo il cambio di colore pieno. Si usano insieme a .mg-scuro / .mg-chiaro / .mg-chiaro-2 per i token */
.mg-fascia { padding: clamp(80px, 9vw, 120px) 24px; background: var(--mg-sfondo); color: var(--mg-testo); }
.mg-fascia--bianca { background: var(--mg-bianco); --mg-tessera: var(--mg-grigio-apple); }
.mg-fascia--grigia { background: var(--mg-grigio-apple); --mg-tessera: var(--mg-bianco); }
.mg-fascia--nera { background: var(--mg-nero); color: var(--mg-carta); --mg-tessera: var(--mg-nero-2); }
@media (max-width: 734px) { .mg-fascia { padding-block: 80px; } }

/* Tessere: senza bordo, raggio 28 px, colore della fascia opposta */
.mg-tessera { background: var(--mg-tessera); border-radius: var(--mg-r-l); padding: 40px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; position: relative; }
.mg-tessera h3 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.125; font-weight: 600; letter-spacing: -.025em; }
.mg-tessera p { color: var(--mg-testo-2); }
.mg-tessera .mg-link-freccia { margin-top: auto; padding-top: 8px; }
.mg-tessera__num { font-size: 14px; font-weight: 600; color: var(--mg-accento-testo); font-variant-numeric: tabular-nums; }

/* Bento: tessere di misure diverse su 6 colonne */
.mg-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.mg-t-grande { grid-column: span 4; grid-row: span 2; }
.mg-t-media { grid-column: span 2; }
.mg-t-meta { grid-column: span 3; }
.mg-t-grande h3 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -.03em; }
.mg-t-grande p { font-size: 19px; max-width: 560px; }
.mg-t-media h3 { font-size: clamp(22px, 2vw, 26px); }
@media (max-width: 1068px) { .mg-t-grande { grid-column: span 6; grid-row: auto; } .mg-t-media { grid-column: span 3; } }
@media (max-width: 734px) { .mg-bento { grid-template-columns: 1fr; } .mg-t-grande, .mg-t-media, .mg-t-meta { grid-column: auto; } .mg-tessera { padding: 32px 26px; } }

/* Tessera grande: titolo e misure (la variante "grande" di una tessera singola, fuori dal bento) */
.mg-tessera--grande { padding: 56px 48px; min-height: 420px; }
.mg-tessera--grande h3 { font-size: clamp(30px, 3vw, 40px); }
@media (max-width: 834px) { .mg-tessera--grande { min-height: 0; padding: 40px 28px; } }

/* Occhiello sopra il titolo (non maiuscolo, come Apple) */
/* Task 6 (31/10/2026): hero centrati, toner, modulo del preventivo (solo selettori su classi gia' registrate e attributi) */

/* Hero di pagina su nero (.mg-h-testo fuori dalla griglia della home): il blocco di 1000 px sta al centro della pagina.
   Senza questa regola briciole e titolo restano spostati a sinistra su tutte le pagine servizio (512, 526, 527 e le pagine del lotto 5A). */
.mg-fascia .mg-h-testo { margin-inline: auto; }

/* /noleggio-stampanti/: i tre passi del toner (ol[data-percorso][data-colonne="3"]) occupano tutta la larghezza della tessera, non 3 colonne su 5 */
.mg-h-percorso[data-colonne="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 834px) { .mg-h-percorso[data-colonne="3"] { grid-template-columns: minmax(0, 1fr); } }
.mg-h-percorso[data-colonne="3"] .mg-livello { grid-template-columns: 4rem 1fr; margin-bottom: 14px; }
.mg-h-percorso[data-colonne="3"] .mg-livello .mg-livello__intera { grid-column: 1 / -1; }
.mg-h-percorso[data-colonne="3"] h3 { margin-top: 0; }
/* barre del toner: grigie finche' il passo non e' acceso dallo scroll, poi ambra (sotto soglia) o verde (ok); senza JS restano nei colori finali */
.js [data-percorso][data-colonne="3"] > li:not(.ok) .mg-livello i::after { background: var(--mg-testo-2); }
.mg-h-percorso[data-colonne="3"] .mg-livello i::after { transition: background .4s var(--mg-curva); }

/* Pannello toner dentro la tessera grande: niente secondo riquadro (stesso colore della tessera) e le due foto in colonna a destra, centrate */
.mg-tessera .mg-stampante { padding: 0; }
.mg-tessera .mg-griglia--2 { align-items: center; margin-bottom: 40px; }
.mg-tessera .mg-tappa__gruppo { min-height: 0; }

/* Modulo del preventivo (/strumenti/preventivo-stampanti/, fascia bianca, senza effetti di scroll): solo stile */
#modulo .mg-input { border-radius: 12px; border: 1.5px solid #86868B; }
#modulo .mg-input:focus { border-color: var(--mg-verde); }
#modulo .mg-scelta { border-radius: 16px; border: 1.5px solid #86868B; background: var(--mg-grigio-apple); padding: 1.1rem 1.25rem; }
#modulo .mg-scelta:hover { border-color: var(--mg-testo); }
#modulo .mg-scelta:has(input:checked), #modulo .mg-scelta.is-scelta { border-color: var(--mg-verde); background: var(--mg-verde-velo); }
#modulo .mg-scelta .mg-scelta__tasto { border-radius: 10px; }
#modulo .mg-btn { border-radius: var(--mg-r-pill); }
.mg-occhiello { display: block; font-size: 17px; font-weight: 600; color: var(--mg-testo-2); margin-bottom: 12px; letter-spacing: 0; }
/* Task 5A (31/10/2026): rifiniture di CTA e hero delle pagine servizio (solo selettori su classi gia registrate) */

/* CTA delle pagine servizio (componente 250): il riquadro "Cosa succede dopo" sta sotto il titolo, come tessera #1D1D1F a sinistra del testo */
.mg-fascia .mg-cta__dopo.mg-tessera { margin: 64px auto 0; max-width: 840px; text-align: left; }
.mg-fascia .mg-cta__dopo.mg-tessera .mg-occhiello { margin-bottom: 0; }
.mg-fascia .mg-cta__dopo.mg-tessera h3.mg-occhiello { font-size: 17px; text-transform: none; letter-spacing: 0; margin: 0 0 8px; }   /* occhiello, non titolo maiuscolo (riquadro "Cosa succede dopo" della CTA) */

/* Hero servizio (componente 246): il riquadro prova, quando una pagina lo mostra, sta sotto il testo come tessera */
.mg-fascia .mg-hero__lato { margin-top: 56px; text-align: left; }

/* Movimento ridotto: nessuna animazione ne' scorrimento morbido (le regole di scroll.js, task 2, vanno sotto lo stesso blocco) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- 99b. Home stile Apple (30/10/2026, task 4): regole specifiche della home (post 7), da design/prototipi/home-apple.html ---------- */
/* Tutto con token --mg-*; nessun colore fisso tranne il velo nero sopra la sfera. Classi mg-h-* = solo home. */
.mg-fascia .mg-tessera h3, .mg-fascia .mg-tessera p { margin: 0; }
.mg-tessera img { max-width: 100%; border-radius: var(--mg-r-m); }   /* spazio per le foto di prodotto (task successivo): un'immagine messa in fondo alla tessera sta gia' bene */
.mg-fascia .mg-link-freccia { position: relative; padding-right: .85em; }   /* la freccia e' nel riempimento a destra: mai da sola su una riga */
.mg-fascia .mg-link-freccia::after { content: "›"; position: absolute; right: 0; top: 0; }
.mg-fascia .mg-link-freccia { align-self: flex-start; justify-self: start; max-width: 100%; }   /* il link si stringe al testo: la freccia gli sta accanto; se va a capo resta a fianco dell'ultima riga */   /* la freccia resta attaccata all'ultima parola */
.mg-prova__durata span:first-child::after { content: ":"; }
.mg-h-centro { text-align: center; max-width: 900px; margin: 0 auto 64px; }
.mg-h-lead { font-size: clamp(19px, 1.8vw, 24px); line-height: 1.33; font-weight: 500; color: var(--mg-testo-2); letter-spacing: -.015em; max-width: 720px; }
.mg-h-centro + .mg-h-lead { margin: -40px auto 64px; text-align: center; }
/* sottotitolo DENTRO il blocco centrato (es. home, "Tecnologie che usiamo"): la scatola da 720 px va al centro del blocco da 900.
   Sta prima delle regole .mg-h-testo / .mg-h-cta .mg-h-lead (stessa specificita'): se combaciano vincono quelle. */
.mg-h-centro .mg-h-lead { margin: 20px auto 0; }
/* pulsante sotto il nastro dei loghi: staccato dai loghi, senza i 64 px di .mg-h-centro in fondo alla fascia */
.mg-partner-nastro + .mg-cont { margin-top: 56px; }
.mg-partner-nastro + .mg-cont .mg-h-centro { margin-bottom: 0; }
@media (max-width: 734px) { .mg-partner-nastro + .mg-cont { margin-top: 32px; } }

/* Hero: nera, 170vh, palco fermo; la sfera si allontana e il titolo sale (--p da scroll.js) */
.mg-h-hero { position: relative; background: var(--mg-nero); color: var(--mg-carta); height: 135vh; height: 135svh; margin-top: -52px; }   /* corsa corta (era 170svh): niente schermata nera con la sola sfera prima della sezione dopo */
.mg-h-palco { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; display: grid; place-items: center; padding: 52px 24px 0; }
.mg-h-sfera { position: absolute; inset: 0; pointer-events: none; transform: scale(calc(1 - var(--p, 0) * .45)); opacity: calc(.9 - var(--p, 0) * .75); will-change: transform, opacity; }
.mg-h-sfera > *, .mg-h-sfera svg { width: 100%; height: 100%; display: block; }
.mg-h-sfera::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(0,0,0,.85), rgba(0,0,0,.2) 75%); }
.mg-h-testo { position: relative; text-align: center; max-width: 1000px; transform: translateY(calc(var(--p, 0) * -6vh)); opacity: calc(1 - var(--p, 0) * .55);   /* il titolo non sparisce mai prima che il palco si sganci: esce scorrendo */ will-change: transform, opacity; }
.mg-h-testo h1 { margin: 0; }
.mg-h-testo .mg-h-lead { margin: 28px auto 0; color: var(--mg-testo-2); }
.mg-h-azioni { justify-content: center; gap: 16px 28px; margin-top: 36px; }
.mg-h-nota { margin: 20px 0 0; font-size: 14px; color: var(--mg-testo-2); }
.mg-h-nota a { color: var(--mg-accento-testo); }
.mg-h-scendi { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); font-size: 14px; color: var(--mg-testo-2); opacity: calc(1 - var(--p, 0) * 4); }
@media (max-width: 734px) { .mg-h-testo h1 { letter-spacing: -.035em; line-height: 1.06; } }
/* Telefono (31/10/2026, riscontro da iPhone): corsa del hero piu' corta (niente coda nera vuota) e titolo che sfuma solo a meta',
   poi esce scorrendo; svh e non vh perche' su iOS Safari vh e' la finestra con la barra degli indirizzi nascosta (piu' alta). */
@media (max-width: 734px) {
  .mg-h-hero { height: 125vh; height: 125svh; }
  .mg-h-testo { transform: translateY(calc(var(--p, 0) * -4svh)); opacity: calc(1 - var(--p, 0) * .5); }
}   /* il corpo resta quello del titolo (clamp 40-84): solo spaziatura piu' stretta */

/* Ultimo test di ripristino in grande (variante "grande" dello shortcode) + numeri */
.mg-h-prova { text-align: center; }
.mg-prova__data { font-size: clamp(64px, 12vw, 160px); line-height: 1; font-weight: 600; letter-spacing: -.05em; font-variant-numeric: tabular-nums; margin: 8px 0 24px; }
.mg-prova__esito { display: inline-flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 600; color: var(--mg-accento-testo); margin: 0; }
.mg-prova__esito::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: currentColor; }
.mg-prova__esito[data-stato="attenzione"] { color: var(--mg-attenzione); }
.mg-prova__esito[data-stato="fermo"] { color: var(--mg-fermo); }
.mg-prova__durata { margin: 10px 0 0; font-size: 21px; color: var(--mg-testo-2); font-variant-numeric: tabular-nums; }
.mg-prova__frase { max-width: 640px; margin: 32px auto 0; font-size: clamp(19px, 1.8vw, 24px); line-height: 1.33; font-weight: 500; letter-spacing: -.015em; color: var(--mg-testo); }
.mg-prova__nota { max-width: 640px; margin: 14px auto 0; color: var(--mg-testo-2); font-size: var(--mg-t-piccolo); }
.mg-h-numeri { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 96px; text-align: center; }
.mg-h-numeri strong { display: block; font-size: clamp(48px, 6.5vw, 80px); line-height: 1; font-weight: 600; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--mg-testo); }
.mg-h-numeri span { display: block; margin-top: 12px; font-size: 17px; color: var(--mg-testo-2); }
@media (max-width: 734px) { .mg-h-numeri { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 16px; margin-top: 72px; } }
/* I numeri sono ora il primo blocco della fascia (il riquadro del test di ripristino e' stato tolto): niente margine sopra, basta il padding della fascia */
.mg-h-prova > .mg-h-numeri:first-child { margin-top: 0; }

/* Piano: la schermata si ferma e il testo si accende una frase alla volta */
.mg-h-piano { height: 260vh; background: var(--mg-nero); color: var(--mg-carta); }
.mg-h-piano__palco { position: sticky; top: 52px; height: calc(100vh - 52px); height: calc(100svh - 52px); display: grid; align-content: center; padding: 0 24px; }
.mg-h-piano__testo { max-width: 1000px; margin: 0 auto; }
.mg-h-piano__testo h2 { font-size: 17px; font-weight: 600; letter-spacing: 0; color: var(--mg-testo-2); margin: 0 0 28px; line-height: 1.3; }
.mg-h-frasi { font-size: clamp(28px, 3.6vw, 48px); line-height: 1.17; font-weight: 600; letter-spacing: -.025em; color: var(--mg-carta); }
.mg-h-frasi .mg-frase::after { content: " "; }
.mg-h-frasi .mg-h-verde.accesa, .js .mg-h-frasi .mg-h-verde { color: var(--mg-verde-chiaro); }
@media (max-width: 734px) { .mg-h-frasi { font-size: clamp(26px, 7.4vw, 32px); } }

/* Schema del backup nella tessera grande (ol[data-percorso]: quattro tappe; la linea verde si disegna con --s) */
.mg-h-schema { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 8px 0 12px; padding: 48px 0 0; max-width: 620px; counter-reset: s; }
.mg-h-schema::before, .mg-h-schema::after { content: ""; position: absolute; top: 14px; left: 12px; right: 12px; height: 4px; border-radius: 2px; background: var(--mg-linea-chiara); }
.mg-h-schema::after { background: var(--mg-verde); right: auto; width: calc((100% - 24px) * var(--s, 0)); }
.mg-h-schema li { position: relative; margin: 0; font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--mg-testo-2); }
.mg-h-schema li::before { content: ""; position: absolute; top: -44px; left: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--mg-tessera); border: 4px solid var(--mg-grigio-bordo); z-index: 1; transition: border-color .3s; }
.mg-h-schema li.ok::before { border-color: var(--mg-verde); }
.mg-h-schema li:last-child::before { background: var(--mg-linea-chiara); border: 0; width: 32px; height: 32px; top: -48px; }
.mg-h-schema li:last-child.ok::before { background: var(--mg-verde); }
@media (max-width: 734px) {
  .mg-h-schema { grid-template-columns: minmax(0, 1fr); padding: 0 0 0 48px; gap: 22px; }
  .mg-h-schema::before, .mg-h-schema::after { top: 12px; bottom: 12px; left: 10px; right: auto; width: 4px; height: auto; }
  .mg-h-schema::after { bottom: auto; height: calc((100% - 24px) * var(--s, 0)); }
  .mg-h-schema li::before { top: 0; left: -48px; }
  .mg-h-schema li:last-child::before { top: -4px; left: -52px; }
}

/* Rapportino (segnaposto onesto) dentro la tessera */
.mg-bento .mg-rapportino { background: var(--mg-sfondo); min-height: 0; margin-top: 4px; }

/* Due strade: Veneto e Italia */
.mg-h-strade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.mg-h-strade .mg-link-freccia { margin-top: 0; padding-top: 0; }
.mg-h-strade .mg-link-freccia:first-of-type { margin-top: auto; padding-top: 8px; }
.mg-h-mappa { font-size: clamp(56px, 7vw, 96px) !important; font-weight: 600; letter-spacing: -.05em; line-height: 1; color: var(--mg-accento-testo) !important; margin-bottom: 8px !important; font-variant-numeric: tabular-nums; }
@media (max-width: 834px) { .mg-h-strade { grid-template-columns: minmax(0, 1fr); } }

/* Servizi su nero: otto tessere */
.mg-h-servizi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.mg-h-servizi .mg-tessera { padding: 32px 28px; min-height: 280px; transition: transform .4s var(--mg-curva); }
.mg-h-servizi .mg-tessera:hover { transform: scale(1.02); }
.mg-h-servizi .mg-tessera h3 { font-size: 24px; }
.mg-h-servizi .mg-tessera p { font-size: 15px; }
.mg-h-servizi .mg-vettore { --mg-vettore-l: 64px; margin: 0 0 6px; }
.mg-h-links { display: grid; gap: 2px; margin-top: auto; padding-top: 8px; font-size: 15px; }
.mg-h-links .mg-link-freccia { margin-top: 0; padding-top: 0; }
@media (max-width: 1068px) { .mg-h-servizi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mg-h-servizi { grid-template-columns: minmax(0, 1fr); } .mg-h-servizi .mg-tessera { min-height: 0; } }

/* Percorso: la linea si disegna con lo scroll, dall'anello vuoto al punto verde */
.mg-h-percorso { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; list-style: none; margin: 0; padding: 72px 0 0; }
.mg-h-percorso::before, .mg-h-percorso::after { content: ""; position: absolute; top: 23px; left: 24px; right: 24px; height: 4px; border-radius: 2px; background: var(--mg-linea-chiara); }
.mg-h-percorso::after { background: var(--mg-verde); right: auto; width: calc((100% - 48px) * var(--s, 0)); }
.mg-h-percorso li { position: relative; margin: 0; }
.mg-h-percorso li::before { content: ""; position: absolute; top: -63px; left: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--mg-sfondo); border: 4px solid var(--mg-grigio-bordo); z-index: 1; transition: border-color .3s; }
.mg-h-percorso li.ok::before { border-color: var(--mg-verde); }
.mg-h-percorso li:last-child::before { background: var(--mg-linea-chiara); border: 0; width: 36px; height: 36px; top: -67px; }
.mg-h-percorso li:last-child.ok::before { background: var(--mg-verde); }
.mg-h-percorso h3 { font-size: 21px; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; margin: 0; }
.mg-h-percorso p { margin: 6px 0 0; color: var(--mg-testo-2); }
.mg-h-vai { text-align: center; margin: 56px 0 0; }
@media (max-width: 834px) {
  .mg-h-percorso { grid-template-columns: minmax(0, 1fr); padding: 0 0 0 64px; gap: 36px; }
  .mg-h-percorso::before, .mg-h-percorso::after { top: 12px; bottom: 12px; left: 22px; right: auto; width: 4px; height: auto; }
  .mg-h-percorso::after { bottom: auto; height: calc((100% - 24px) * var(--s, 0)); }
  .mg-h-percorso li::before { top: 0; left: -56px; }
  .mg-h-percorso li:last-child::before { top: -4px; left: -60px; }
}

/* Settori e guide */
.mg-h-settori { list-style: none; margin: 0; padding: 0; }
.mg-h-settori li { margin: 0; }
.mg-h-settori a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px 32px; align-items: baseline; padding: 28px 0; border-bottom: 1px solid var(--mg-linea-chiara); text-decoration: none; color: var(--mg-testo); }
.mg-h-settori li:first-child a { border-top: 1px solid var(--mg-linea-chiara); }
.mg-h-settori strong { font-size: clamp(24px, 2.6vw, 32px); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; transition: color .2s; }
.mg-h-settori span { color: var(--mg-testo-2); }
.mg-h-settori a::after { content: "›"; font-size: 28px; color: var(--mg-accento-testo); transition: transform .3s var(--mg-curva); }
.mg-h-settori a:hover strong { color: var(--mg-accento-testo); }
.mg-h-settori a:hover::after { transform: translateX(6px); }
@media (max-width: 734px) { .mg-h-settori a { grid-template-columns: minmax(0, 1fr) auto; } .mg-h-settori span { grid-column: 1; } .mg-h-settori a::after { grid-row: 1 / span 2; grid-column: 2; align-self: center; } }
.mg-h-titolo-guide { font-size: clamp(28px, 3vw, 40px); margin: 120px 0 40px; }
.mg-h-guide { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.mg-h-guide .mg-tessera { padding: 28px; min-height: 220px; text-decoration: none; color: var(--mg-testo); transition: transform .4s var(--mg-curva); }
.mg-h-guide .mg-tessera:hover { transform: scale(1.02); }
.mg-h-guide .mg-tessera h3 { font-size: 21px; line-height: 1.24; letter-spacing: -.015em; }
.mg-h-guide .mg-occhiello { font-size: 14px; margin: 0; }
@media (max-width: 1068px) { .mg-h-guide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mg-h-guide { grid-template-columns: minmax(0, 1fr); } .mg-h-guide .mg-tessera { min-height: 0; } }

/* FAQ */
.mg-h-faq details { border-bottom: 1px solid var(--mg-linea-chiara); }
.mg-h-faq details:first-child { border-top: 1px solid var(--mg-linea-chiara); }
.mg-h-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 26px 0; font-size: clamp(19px, 1.8vw, 24px); font-weight: 600; letter-spacing: -.02em; }
.mg-h-faq summary::-webkit-details-marker { display: none; }
.mg-h-faq summary::after { content: "+"; font-weight: 400; font-size: 28px; line-height: 1; color: var(--mg-accento-testo); transition: transform .3s var(--mg-curva); }
.mg-h-faq details[open] summary::after { transform: rotate(45deg); }
.mg-h-faq details p { padding: 0 0 28px; margin: 0; color: var(--mg-testo-2); max-width: 700px; }
.mg-h-faq details p a { color: var(--mg-accento-testo); }

/* CTA finale */
.mg-h-cta { text-align: center; }
.mg-h-cta .mg-h-lead { margin: 24px auto 0; }
.mg-h-cta h2 { margin: 0; }
.mg-h-dopo-t { margin: 80px 0 20px; font-size: 17px; font-weight: 600; letter-spacing: 0; color: var(--mg-testo-2); }
.mg-h-dopo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 980px; margin: 0 auto; text-align: left; list-style: none; padding: 0; counter-reset: dopo; }
.mg-h-dopo li { margin: 0; background: var(--mg-tessera); border-radius: 20px; padding: 28px; color: var(--mg-testo-2); counter-increment: dopo; }
.mg-h-dopo li::before { content: counter(dopo); display: block; font-size: 40px; font-weight: 600; color: var(--mg-accento-testo); letter-spacing: -.03em; margin-bottom: 8px; }
@media (max-width: 734px) { .mg-h-dopo { grid-template-columns: minmax(0, 1fr); } }

/* Movimento ridotto: tutto fermo e gia' visibile (scroll.js mette gia' lo stato finale) */
@media (prefers-reduced-motion: reduce) {
  .mg-h-hero { height: auto; }
  .mg-h-palco { position: relative; }
  .mg-h-sfera, .mg-h-testo { transform: none !important; }
  .mg-h-sfera { opacity: .9 !important; }
  .mg-h-testo, .mg-h-scendi { opacity: 1 !important; }
  .mg-h-piano { height: auto; padding: 120px 0; }
  .mg-h-piano__palco { position: static; height: auto; }
  .mg-h-frasi .mg-frase { opacity: 1; }
  .mg-h-servizi .mg-tessera:hover, .mg-h-guide .mg-tessera:hover { transform: none; }
}

/* Esempio di rapportino (immagine nella tessera) */
.mg-bento .mg-rapportino-img { width: 100%; height: auto; border-radius: var(--mg-r-m); margin-top: 4px; display: block; }

/* ---------- 99c. Foto prodotto animate (31/10/2026, task 4b) ----------
   Le foto le stampa lo shortcode [metagroup_foto] (wp/mu-plugins/metagroup-foto.php): <picture class="mg-foto"> con WebP + fallback.
   scroll.js scrive solo variabili e classi: --e 0..1 su [data-entra], --y su [data-parallasse], --p/.attiva/.passata nelle scene.
   Tutte le transform stanno qui e sono legate a .js: senza JS le foto sono ferme e visibili; con movimento ridotto pure.
   Regole generiche: valgono anche per le pagine servizio (nomi in design/assets/prodotti/uso.json). */
.mg-foto { display: block; max-width: 100%; }
.mg-foto img { display: block; max-width: min(100%, var(--mg-foto-max, 100%)); height: auto; border-radius: 0; }   /* --mg-foto-max dallo shortcode: mai oltre nativa/2 (retina) */
.mg-tessera .mg-foto img { border-radius: 0; }
/* Foto su fondo nero pieno (Apple): su una fascia nera il fondo sparisce anche sopra il bagliore */
.mg-foto--su-nero { mix-blend-mode: lighten; }

/* Ingresso con lo scroll: --e 0 = fuori, 1 = in posa (valore assente = in posa) */
.js [data-entra] { opacity: clamp(0, calc(var(--e, 1) * 1.6), 1); will-change: transform, opacity; }
.js [data-entra="sinistra"] { transform: translateX(calc((1 - var(--e, 1)) * -30%)); }
.js [data-entra="destra"] { transform: translateX(calc((1 - var(--e, 1)) * 30%)); }
.js [data-entra="basso"] { transform: translateY(calc((1 - var(--e, 1)) * 80px)); }
.js [data-entra="zoom"] { transform: scale(calc(.8 + .2 * var(--e, 1))); }
.js [data-entra="ruota"] { transform: perspective(1400px) rotateY(calc((1 - var(--e, 1)) * 25deg)) scale(calc(.8 + .2 * var(--e, 1))); transform-origin: 50% 60%; }
.js [data-parallasse] { transform: translateY(var(--y, 0px)); will-change: transform; }

/* Vetrina della home: senza JS, con movimento ridotto o in caso di errore (.ferma) e' una griglia di prodotti su nero, tutti visibili */
.mg-vetrina { position: relative; background: var(--mg-nero); color: var(--mg-carta); padding: clamp(80px, 9vw, 120px) 24px; }
.mg-vetrina__palco { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; justify-items: center; }
.mg-vetrina__titolo { margin: 0; text-align: center; font-size: clamp(40px, 6vw, 80px); line-height: 1.05; letter-spacing: -.035em; font-weight: 600; color: var(--mg-carta); max-width: 14ch; }
.mg-vetrina__tappe { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 56px 32px; width: 100%; max-width: 1200px; }
.mg-tappa { position: relative; margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: end; gap: 20px; min-width: 0; }
.mg-tappa > .oxy-shortcode, .mg-tappa__gruppo { position: relative; display: flex; align-items: flex-end; justify-content: center; width: 100%; min-height: 0; }
.mg-tappa .mg-foto img { width: auto; max-height: 240px; margin-inline: auto; }
.mg-tappa__testo { position: relative; text-align: center; display: grid; gap: 4px; max-width: 42rem; }
.mg-tappa__nome { font-size: 17px; font-weight: 600; color: var(--mg-testo-2); letter-spacing: 0; }
.mg-tappa__riga { font-size: clamp(21px, 2.4vw, 32px); line-height: 1.15; font-weight: 600; letter-spacing: -.025em; color: var(--mg-carta); }
/* gruppo (Lexmark A3 + A4, postazione PC + telefono): appoggiati sulla stessa linea; --scala (dallo shortcode) = altezza relativa reale */
.mg-tappa__gruppo { gap: clamp(12px, 3vw, 48px); }
.mg-tappa__gruppo > * { flex: 0 1 auto; min-width: 0; display: flex; align-items: flex-end; }
.mg-tappa__gruppo .mg-foto img { max-height: calc(240px * var(--scala, 1)); }
.mg-vetrina__avanzamento { display: none; }

/* Con JS e movimento consentito: palco fermo per 560vh, la fila delle tappe scorre in orizzontale (--k da scroll.js) */
@media (prefers-reduced-motion: no-preference) {
  .js .mg-vetrina:not(.ferma) { height: 560vh; padding: 0; }
  .js .mg-vetrina:not(.ferma) .mg-vetrina__palco { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 3vh, 32px); padding: 84px 0 32px; justify-items: stretch; }   /* colonna minmax(0): la fila lunga delle tappe non allarga il palco */
  .js .mg-vetrina:not(.ferma) .mg-vetrina__titolo { justify-self: center; padding-inline: 16px; }
  .js .mg-vetrina:not(.ferma) .mg-vetrina__tappe { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 0; max-width: none; height: 100%; min-height: 0; transform: translateX(calc(var(--k, 0) * -100%)); will-change: transform; }
  .js .mg-vetrina:not(.ferma) .mg-tappa { flex: 0 0 100%; height: 100%; padding-inline: 24px; gap: clamp(12px, 2.4vh, 24px); }
  .js .mg-vetrina:not(.ferma) .mg-tappa > .oxy-shortcode, .js .mg-vetrina:not(.ferma) .mg-tappa__gruppo { height: 100%; align-items: center; }
  .js .mg-vetrina:not(.ferma) .mg-tappa__gruppo > * { height: 100%; align-items: flex-end; padding-block: 4% 2%; }
  .js .mg-vetrina:not(.ferma) .mg-tappa .mg-foto { max-height: 100%; display: flex; align-items: center; height: 100%; }
  .js .mg-vetrina:not(.ferma) .mg-tappa__gruppo .mg-foto { align-items: flex-end; }
  .js .mg-vetrina:not(.ferma) .mg-tappa .mg-foto img { max-height: min(100%, 520px); max-width: min(100%, var(--mg-foto-max, 100%), 980px); }
  .js .mg-vetrina:not(.ferma) .mg-tappa__gruppo .mg-foto img { max-height: min(calc(100% * var(--scala, 1)), calc(520px * var(--scala, 1))); }
  .js .mg-vetrina:not(.ferma) .mg-tappa__testo { opacity: clamp(0, calc(var(--e, 1) * 2.2 - 1.2), 1); transform: translateY(calc((1 - var(--e, 1)) * 14px)); }
  .js .mg-vetrina:not(.ferma) [data-tappa] [data-entra] { opacity: clamp(.15, calc(var(--e, 1) * 1.4), 1); }
  .js .mg-vetrina:not(.ferma) .mg-vetrina__avanzamento { display: block; justify-self: center; position: relative; width: min(240px, 60%); height: 3px; border-radius: 2px; background: rgba(255,255,255,.18); overflow: hidden; }
  .js .mg-vetrina:not(.ferma) .mg-vetrina__avanzamento::after { content: ""; position: absolute; inset: 0; background: var(--mg-verde-chiaro); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 734px) {
  .js .mg-vetrina:not(.ferma) .mg-vetrina__palco { padding: 72px 0 24px; }
  .js .mg-vetrina:not(.ferma) .mg-tappa { padding-inline: 16px; }
  .js .mg-vetrina:not(.ferma) .mg-tappa .mg-foto img { max-height: min(100%, 44vh); }
}

/* ---------- 99d. Vetrina: prodotti che si aprono (31/10/2026) ----------
   [metagroup_sequenza] (wp/mu-plugins/metagroup-foto.php) stampa .mg-sequenza > .mg-fotogramma[data-fotogramma] > .mg-fotogramma__box
   (proporzioni --ar della foto) con la foto, eventuali .mg-strato (strati sulla stessa tela) e .mg-cassetto/.mg-vano (copie ritagliate).
   scroll.js scrive solo --t 0..1 sulla tappa (avanzamento della sosta); qui --t diventa opacita' e transform.
   Senza JS / movimento ridotto / .ferma: si vede solo il fotogramma [data-fermo], fermo. */
.mg-sequenza { position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: end center; width: 100%; }
.mg-fotogramma { grid-area: 1 / 1; display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 100%; min-height: 0; }
.mg-fotogramma:not([data-fermo]) { display: none; }
.mg-fotogramma__box { position: relative; aspect-ratio: var(--ar); width: min(100%, var(--mg-foto-max, 100%), calc(240px * var(--scala, 1) * var(--ar))); }
.mg-fotogramma__box .mg-foto, .mg-fotogramma__box .mg-foto img { width: 100%; height: 100%; max-width: none !important; max-height: none !important; }
.mg-strato, .mg-cassetto, .mg-vano { position: absolute; inset: 0; pointer-events: none; }
.mg-cassetto, .mg-vano { display: none; }
.mg-tappa .mg-sequenza { height: auto; }

/* Le tappe mostrano solo la frase (decisione del 31/10/2026: niente nomi di modello sotto la foto; i modelli restano nell'alt) */
.mg-tappa__nome { display: none; }

@media (prefers-reduced-motion: no-preference) {
  /* altezza della vetrina dalla lunghezza della corsa (--l da scroll.js: soste + spostamenti) */
  .js .mg-vetrina:not(.ferma) { height: calc(100vh + var(--l, 15) * 22vh); height: calc(100svh + var(--l, 15) * 22svh); }   /* 10 tappe: circa 440svh */
  .js .mg-vetrina:not(.ferma) .mg-sequenza { height: 100%; container-type: size; }
  .js .mg-vetrina:not(.ferma) .mg-fotogramma { display: flex; align-items: center; opacity: var(--v, 1); will-change: opacity, transform; }
  .js .mg-vetrina:not(.ferma) .mg-fotogramma__box { width: min(100cqw, var(--mg-foto-max, 100cqw), 980px, calc(min(100cqh, 520px) * var(--ar))); }
  .js .mg-vetrina:not(.ferma) .mg-cassetto, .js .mg-vetrina:not(.ferma) .mg-vano { display: block; }

  /* dissolvenza generica tra due fotogrammi a meta' sosta */
  .js .mg-vetrina:not(.ferma) .mg-sequenza [data-fotogramma="0"] { --v: calc(1 - clamp(0, (var(--t, 0) - .4) / .2, 1)); }
  .js .mg-vetrina:not(.ferma) .mg-sequenza [data-fotogramma="1"] { --v: clamp(0, (var(--t, 0) - .4) / .2, 1); }

  /* SERVER: il server di tre quarti si inclina all'indietro come se la camera salisse; dall'alto appare aperto
     (ventole, processori, memorie, schede), poi un leggero avvicinamento sui componenti */
  .js .mg-vetrina:not(.ferma) .mg-sequenza--server { perspective: 1400px; }
  .js .mg-vetrina:not(.ferma) .mg-sequenza--server [data-fotogramma="0"] {
    --a: clamp(0, (var(--t, 0) - .12) / .4, 1);
    --v: calc(1 - clamp(0, (var(--t, 0) - .36) / .14, 1));
    transform: rotateX(calc(var(--a) * 62deg)) scale(calc(1 - var(--a) * .12)); transform-origin: 50% 70%; }
  .js .mg-vetrina:not(.ferma) .mg-sequenza--server [data-fotogramma="1"] {
    --a: clamp(0, (var(--t, 0) - .36) / .34, 1);
    --z: clamp(0, (var(--t, 0) - .74) / .26, 1);
    --v: clamp(0, (var(--t, 0) - .36) / .14, 1);
    transform: rotateX(calc((1 - var(--a)) * 48deg)) scale(calc(.9 + var(--a) * .1 + var(--z) * .08)); transform-origin: 50% 40%; }

  /* NAS: i dodici cassetti dei dischi escono uno dopo l'altro e si allargano a ventaglio; dietro resta il vano scuro */
  .js .mg-vetrina:not(.ferma) .mg-sequenza--nas { --o: clamp(0, (var(--t, 0) - .1) / .62, 1); }
  .js .mg-vetrina:not(.ferma) .mg-sequenza--nas .mg-cassetto, .js .mg-vetrina:not(.ferma) .mg-sequenza--nas .mg-vano {
    --q: clamp(0, var(--o) * 1.65 - var(--i) * .055, 1); }
  .js .mg-vetrina:not(.ferma) .mg-sequenza--nas .mg-vano { inset: var(--y0) var(--x1) var(--y1) var(--x0); background: #050505; border-radius: 3px; opacity: calc(var(--q) * .92); }
  .js .mg-vetrina:not(.ferma) .mg-sequenza--nas .mg-cassetto {
    clip-path: inset(var(--y0) var(--x1) var(--y1) var(--x0) round 3px);
    transform-origin: calc(50% + var(--cx) * 1%) calc(50% + var(--cy) * 1%);
    transform: translate(calc(var(--q) * var(--cx) * .12%), calc(var(--q) * var(--cy) * .62%)) scale(calc(1 + var(--q) * .04));
    filter: brightness(calc(1 + var(--q) * .18)); will-change: transform; }
  .js .mg-vetrina:not(.ferma) .mg-sequenza--nas [data-fotogramma] { --v: 1; }
  .js .mg-vetrina:not(.ferma) .mg-sequenza--nas .mg-fotogramma__box { transform: scale(calc(1 - var(--o) * .1)); }

  /* PORTATILE: di profilo, lo schermo chiuso si alza sulla cerniera fino ad aprirsi; poi il portatile ruota di tre quarti */
  .js .mg-vetrina:not(.ferma) .mg-sequenza--portatile { perspective: 1600px; }
  .js .mg-vetrina:not(.ferma) .mg-sequenza--portatile [data-fotogramma="0"] {
    --a: clamp(0, (var(--t, 0) - .08) / .44, 1);
    --v: calc(1 - clamp(0, (var(--t, 0) - .58) / .08, 1));
    transform: rotateY(calc(clamp(0, (var(--t, 0) - .54) / .14, 1) * -50deg)) scale(calc(.9 + var(--a) * .1)); }
  .js .mg-vetrina:not(.ferma) .mg-sequenza--portatile [data-fotogramma="0"] .mg-strato {
    transform-origin: 4.03% 92.76%;   /* cerniera nella tela 3300x3232 (wp/tools: dividi-portatile) */
    transform: rotate(calc((1 - var(--a) * (2 - var(--a))) * 90deg)); will-change: transform; }
  .js .mg-vetrina:not(.ferma) .mg-sequenza--portatile [data-fotogramma="1"] {
    --v: clamp(0, (var(--t, 0) - .6) / .1, 1);
    transform: rotateY(calc((1 - clamp(0, (var(--t, 0) - .6) / .3, 1)) * 30deg)) scale(calc(.94 + clamp(0, (var(--t, 0) - .6) / .3, 1) * .06)); }
}
@media (prefers-reduced-motion: no-preference) {
  /* MACBOOK AIR: due Air di profilo, schiena contro schiena: i due schermi chiusi si alzano insieme sulle cerniere */
  .js .mg-vetrina:not(.ferma) .mg-sequenza--air [data-fotogramma="0"] { --v: 1; --a: clamp(0, (var(--t, 0) - .1) / .6, 1); transform: scale(calc(.92 + var(--a) * .08)); }
  .js .mg-vetrina:not(.ferma) .mg-sequenza--air .mg-strato { will-change: transform; }
  .js .mg-vetrina:not(.ferma) .mg-sequenza--air [data-strato="1"] { transform-origin: 45.57% 93.3%; transform: rotate(calc((1 - var(--a) * (2 - var(--a))) * -90deg)); }
  .js .mg-vetrina:not(.ferma) .mg-sequenza--air [data-strato="2"] { transform-origin: 49.84% 93.3%; transform: rotate(calc((1 - var(--a) * (2 - var(--a))) * 90deg)); }

  /* CAMBIO DI VISTA (due foto ufficiali, es. portatile quasi chiuso -> aperto, PC e telefono di fronte -> di tre quarti):
     la prima gira e sfuma, la seconda arriva girando dall'altra parte */
  .js .mg-vetrina:not(.ferma) .mg-sequenza--cambio { perspective: 1600px; --a: clamp(0, (var(--t, 0) - .2) / .5, 1); }
  .js .mg-vetrina:not(.ferma) .mg-sequenza--cambio [data-fotogramma="0"] { --v: calc(1 - clamp(0, (var(--a) - .35) / .3, 1)); transform: rotateY(calc(var(--a) * -35deg)) scale(calc(1 - var(--a) * .06)); }
  .js .mg-vetrina:not(.ferma) .mg-sequenza--cambio [data-fotogramma="1"] { --v: clamp(0, (var(--a) - .35) / .3, 1); transform: rotateY(calc((1 - var(--a)) * 30deg)) scale(calc(.94 + var(--a) * .06)); }

  /* VOLTA: il prodotto gira su se stesso e mostra il retro con le porte (Mac mini) */
  .js .mg-vetrina:not(.ferma) .mg-sequenza--volta { perspective: 1400px; --a: clamp(0, (var(--t, 0) - .15) / .6, 1); }
  .js .mg-vetrina:not(.ferma) .mg-sequenza--volta [data-fotogramma="0"] { --v: clamp(0, (.5 - var(--a)) * 1000, 1); transform: rotateY(calc(var(--a) * 180deg)); backface-visibility: hidden; }
  .js .mg-vetrina:not(.ferma) .mg-sequenza--volta [data-fotogramma="1"] { --v: clamp(0, (var(--a) - .5) * 1000, 1); transform: rotateY(calc(var(--a) * 180deg - 180deg)); backface-visibility: hidden; }

  /* GIRA (ripiego dove non esiste una foto ufficiale aperta o di un'altra vista: iMac, MacBook Pro): una sola foto che ruota piano in 3D */
  .js .mg-vetrina:not(.ferma) .mg-sequenza--gira { perspective: 1600px; --a: clamp(0, (var(--t, 0) - .05) / .8, 1); }
  .js .mg-vetrina:not(.ferma) .mg-sequenza--gira [data-fotogramma="0"] { --v: 1; transform: rotateY(calc((1 - var(--a) * (2 - var(--a))) * 24deg)) scale(calc(.88 + var(--a) * .12)); transform-origin: 50% 60%; }

  /* Sequenze dentro un gruppo (postazione: PC + telefono): il gruppo fa da contenitore, ogni foto prende la sua quota d'altezza (--scala) */
  .js .mg-vetrina:not(.ferma) .mg-tappa__gruppo:has(.mg-sequenza) { container-type: size; }
  .js .mg-vetrina:not(.ferma) .mg-tappa__gruppo .mg-sequenza { container-type: normal; height: auto; width: auto; place-items: end center; }
  .js .mg-vetrina:not(.ferma) .mg-tappa__gruppo .mg-fotogramma { align-items: flex-end; height: auto; }
  .js .mg-vetrina:not(.ferma) .mg-tappa__gruppo .mg-fotogramma__box { width: min(var(--mg-foto-max, 100cqw), 46cqw, calc(min(92cqh, 520px) * var(--scala, 1) * var(--ar))); }
}
@media (prefers-reduced-motion: reduce) {
  .mg-fotogramma, .mg-strato, .mg-cassetto { transform: none !important; opacity: 1 !important; }
}

/* Foto nelle tessere della home */
.mg-h-foto-bento { align-self: flex-end; width: min(100%, 520px); margin-top: auto; padding-block: 8px; }
.mg-tessera .mg-h-foto-bento + .mg-link-freccia { margin-top: 0; }
.mg-h-foto-toner { align-self: center; margin-top: auto; padding-top: 8px; }
.mg-h-foto-toner img { max-height: 220px; width: auto; }
/* Servizi su nero: icona Phosphor (peso light, MIT) in cima a ogni tessera, al posto del segno; verde chiaro su #1D1D1F */
.mg-h-icona, .mg-h-servizi .mg-h-icona { width: 56px; height: 56px; min-width: 56px; flex: none; color: var(--mg-verde-chiaro); fill: var(--mg-verde-chiaro); margin: 0 0 10px; font-size: 56px; transition: transform .4s var(--mg-curva); }   /* + gap 14 della tessera = 24 px sopra il titolo */
.mg-h-icona svg, .mg-h-servizi .mg-h-icona svg { display: block; width: 56px; height: 56px; fill: currentColor; }
@media (max-width: 734px) { .mg-h-icona, .mg-h-servizi .mg-h-icona { width: 48px; height: 48px; min-width: 48px; font-size: 48px; } .mg-h-icona svg, .mg-h-servizi .mg-h-icona svg { width: 48px; height: 48px; } }
.mg-h-servizi .mg-tessera:hover .mg-h-icona { transform: translateY(-2px) scale(1.08); }

@media (prefers-reduced-motion: reduce) {
  .js [data-entra], .js [data-parallasse] { transform: none !important; opacity: 1 !important; }
  .mg-tappa__testo { opacity: 1 !important; transform: none !important; }
  .mg-h-servizi .mg-tessera:hover .mg-h-icona { transform: none; }
}

/* ---------- Pagina /partner/ (31/10/2026): nastro dei loghi, movimento ridotto, pausa, bordi sfumati ---------- */
/* Movimento ridotto: nastro fermo, loghi a capo, copia duplicata nascosta (oggi lo fa un JavaScriptCode nella pagina 757; con questa regola si puo' togliere) */
@media (prefers-reduced-motion: reduce) {
  .mg-partner-pista { animation: none; width: auto; flex-wrap: wrap; justify-content: center; row-gap: 24px; }
  .mg-partner-pista > [aria-hidden="true"] { display: none; }
}
/* Pausa al passaggio del mouse e sulla tastiera */
.mg-partner-nastro:hover .mg-partner-pista, .mg-partner-nastro:focus-within .mg-partner-pista { animation-play-state: paused; }
/* Bordi sfumati ai lati del nastro */
.mg-partner-nastro { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }

/* ---------- Pagine funzionali /ticket/, /area-clienti/, /area-clienti/stato/ (31/10/2026, task 13): campi chiari come il modulo del preventivo ---------- */
/* campi: come #modulo del preventivo (raggio 12, bordo #86868B) */
:is(#modulo, #proposta) .metagroup-ticket-form { gap: 22px; }
:is(#modulo, #proposta) .metagroup-ticket-label { color: var(--mg-testo); font-family: inherit; font-size: 15px; font-weight: 600; }
:is(#modulo, #proposta) .metagroup-ticket-optional { color: var(--mg-testo-2); font-weight: 400; }
:is(#modulo, #proposta) .metagroup-ticket-input {
  width: 100%; box-sizing: border-box; min-height: 52px; padding: 13px 16px;
  font-family: inherit; font-size: 17px; line-height: 1.4;
  color: var(--mg-testo); background-color: #fff;
  border: 1.5px solid #86868B; border-radius: 12px;
}
:is(#modulo, #proposta) .metagroup-ticket-textarea { min-height: 140px; }
:is(#modulo, #proposta) .metagroup-ticket-input::placeholder { color: var(--mg-testo-2); opacity: 1; }
:is(#modulo, #proposta) .metagroup-ticket-input:focus { outline: none; border-color: var(--mg-verde); box-shadow: 0 0 0 4px var(--mg-verde-velo); }
:is(#modulo, #proposta) .metagroup-ticket-hint { color: var(--mg-testo-2); font-family: inherit; font-size: 14px; margin: -6px 0 0; }
/* pulsante: pillola verde, come .mg-btn--primario */
:is(#modulo, #proposta) .metagroup-ticket-submit {
  align-self: flex-start; min-height: 52px; padding: 14px 32px; cursor: pointer;
  font-family: inherit; font-size: 17px; font-weight: 600; letter-spacing: 0;
  color: #fff; background-color: var(--mg-verde); border: 0; border-radius: var(--mg-r-pill);
  transition: background-color .2s;
}
:is(#modulo, #proposta) .metagroup-ticket-submit:hover { opacity: 1; background-color: #17512C; }
:is(#modulo, #proposta) .metagroup-ticket-submit:focus-visible { outline: 3px solid var(--mg-verde); outline-offset: 3px; }
:is(#modulo, #proposta) .metagroup-ticket-submit:disabled { opacity: .5; cursor: not-allowed; }
/* messaggi di esito */
:is(#modulo, #proposta) .metagroup-ticket-msg { min-height: 22px; font-family: inherit; font-size: 15px; color: var(--mg-testo-2); margin: 0; }
:is(#modulo, #proposta) .metagroup-ticket-msg.is-success { color: var(--mg-verde); font-weight: 600; }
:is(#modulo, #proposta) .metagroup-ticket-msg.is-error { color: #A3301F; font-weight: 600; }
@media (max-width: 767px) { :is(#modulo, #proposta) .metagroup-ticket-submit { align-self: stretch; } }

/* elenco ticket (/area-clienti/stato/): tessere grigie senza bordo, stato a pillola */
:is(#modulo, #proposta) .metagroup-area-clienti-lista { display: grid; gap: 12px; }
:is(#modulo, #proposta) .metagroup-area-clienti-item { background: var(--mg-grigio-apple); border: 0; border-radius: 20px; padding: 20px 24px; }
:is(#modulo, #proposta) .metagroup-area-clienti-item-oggetto { margin: 0 0 6px; color: var(--mg-testo); font-size: 17px; font-weight: 600; }
:is(#modulo, #proposta) .metagroup-area-clienti-item-meta { margin: 0; color: var(--mg-testo-2); font-size: 15px; }
:is(#modulo, #proposta) .metagroup-area-clienti-badge { display: inline-block; padding: 2px 12px; border-radius: 980px; background: #fff; color: var(--mg-testo); font-size: 14px; font-weight: 600; }

/* area clienti v2 (03/11/2026): elenco, dettaglio con conversazione, risposta, Esci. Tutto dentro #modulo (.mg-modulo bianca) */
#modulo .mgac { display: grid; gap: 20px; min-width: 0; overflow-wrap: anywhere; }
#modulo .mgac > * { margin: 0; }
#modulo .mgac-titolo { margin: 0; color: var(--mg-testo); font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; font-weight: 600; letter-spacing: -.02em; }
#modulo .mgac-testo, #modulo .mgac-nota { margin: 0; color: var(--mg-testo-2); font-size: 17px; line-height: 1.5; }
#modulo .mgac-nota { font-size: 15px; }
#modulo .mgac-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--mg-linea-chiara); }
#modulo .mgac-barra__testo { margin: 0; color: var(--mg-testo-2); font-size: 14px; }
#modulo .mgac-barra form { margin: 0; }
#modulo .mgac-pillola { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 18px; border-radius: var(--mg-r-pill); font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; max-width: 100%; }
#modulo .mgac-pillola--neutra { background: #fff; color: var(--mg-testo); border: 1.5px solid var(--mg-grigio-bordo); }
#modulo .mgac-pillola--neutra:hover { border-color: var(--mg-testo); }
#modulo .mgac-pillola:focus-visible, #modulo .mgac-voce:focus-visible, #modulo .mgac-indietro:focus-visible { outline: 3px solid var(--mg-verde); outline-offset: 3px; }
#modulo .mgac-link-pulsante { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; justify-self: start; }
@media (max-width: 767px) { #modulo .mgac-link-pulsante { justify-self: stretch; } }
#modulo .mgac-gruppo { margin: 8px 0 0; color: var(--mg-testo); font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
#modulo .mgac-lista, #modulo .mgac-conversazione, #modulo .mgac-allegati { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
#modulo .mgac-lista > li + li, #modulo .mgac-conversazione > li + li, #modulo .mgac-allegati > li + li { margin-top: 0; }
#modulo .mgac-voce { display: grid; gap: 6px; padding: 20px 24px; border-radius: 20px; background: var(--mg-grigio-apple); color: var(--mg-testo); text-decoration: none; transition: background-color .2s; }
#modulo .mgac-voce:hover { background: #EBEBF0; }
#modulo .mgac-voce__riga { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
#modulo .mgac-voce__oggetto { font-size: 17px; font-weight: 600; line-height: 1.35; }
#modulo .mgac-voce__meta { margin: 0; color: var(--mg-testo-2); font-size: 14px; }
#modulo .mgac-numero { color: var(--mg-testo-2); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
#modulo .mgac-stato { display: inline-block; padding: 2px 12px; border-radius: var(--mg-r-pill); background: var(--mg-verde-velo); color: var(--mg-verde); font-size: 14px; font-weight: 600; }
#modulo .is-chiuso .mgac-stato { background: #fff; color: var(--mg-testo-2); }
#modulo .mgac-indietro { justify-self: start; color: var(--mg-verde); font-size: 15px; font-weight: 600; text-decoration: none; }
#modulo .mgac-indietro:hover { text-decoration: underline; }
#modulo .mgac-testata { display: grid; gap: 8px; }
#modulo .mgac-messaggio { display: grid; gap: 8px; padding: 20px 24px; border-radius: 20px; background: var(--mg-grigio-apple); min-width: 0; }
#modulo .mgac-messaggio--voi { background: var(--mg-verde-velo); }
#modulo .mgac-messaggio__autore { margin: 0; color: var(--mg-testo); font-size: 15px; font-weight: 600; }
#modulo .mgac-messaggio__data { color: var(--mg-testo-2); font-weight: 400; margin-left: 6px; }
#modulo .mgac-messaggio__corpo { color: var(--mg-testo); font-size: 16px; line-height: 1.55; min-width: 0; overflow-x: auto; }
#modulo .mgac-messaggio__corpo > * { margin: 0; }
#modulo .mgac-messaggio__corpo > * + * { margin-top: .7em; }
#modulo .mgac-messaggio__corpo a { color: var(--mg-verde); }
#modulo .mgac-messaggio__corpo blockquote { margin-left: 0; padding-left: 12px; border-left: 3px solid var(--mg-linea-chiara); color: var(--mg-testo-2); }
#modulo .mgac-messaggio__corpo pre { white-space: pre-wrap; }
#modulo .mgac-allegati { display: flex; flex-wrap: wrap; gap: 8px; }
#modulo .mgac-allegati__peso { color: var(--mg-testo-2); font-weight: 400; }
#modulo .mgac-rispondi { display: grid; gap: 16px; padding-top: 8px; }
#modulo .mgac-file { max-width: 100%; font: inherit; font-size: 15px; color: var(--mg-testo); }
#modulo .mgac-file::file-selector-button { margin-right: 12px; min-height: 40px; padding: 8px 18px; border-radius: var(--mg-r-pill); border: 1.5px solid var(--mg-grigio-bordo); background: #fff; color: var(--mg-testo); font: inherit; font-weight: 600; cursor: pointer; }
#modulo .mgac-avviso { margin-bottom: 20px; }

/* ---------- Correzioni di allineamento (31/10/2026, report allineamento/report.md, numeri tra parentesi) ---------- */
/* (2) foto nei gruppi fuori dalla vetrina (noleggio, tessera toner): width="1778" faceva da larghezza e max-height schiacciava l'immagine */
.mg-tappa__gruppo > * > .mg-foto > img { width: auto; height: auto; }
/* (4) freccia dei link: legata all'ultima parola con uno spazio non separabile, sulla stessa riga del testo (niente absolute) */
.mg-link-freccia::after { content: "\00a0›"; }
.mg-fascia .mg-link-freccia { padding-right: 0; }
.mg-fascia .mg-link-freccia::after { content: "\00a0›"; position: static; }
/* (5) contenitore "dove" vuoto nel hero dei componenti: non deve creare una riga vuota */
.mg-dove:empty { display: none; }
/* (6) bento a 2 colonne (735-1068 px): l'ultima tessera rimasta sola prende tutta la riga */
@media (min-width: 735px) and (max-width: 1068px) {
  .mg-bento > :is(.mg-t-media, .mg-t-meta):last-child:nth-child(odd of .mg-t-media, .mg-t-meta) { grid-column: 1 / -1; }
  /* (19) bento misto media + meta: a questa larghezza le tessere sono uguali, anche i titoli */
  .mg-bento:has(> .mg-t-media) > .mg-t-meta h3 { font-size: clamp(22px, 2vw, 26px); }
}
/* (7) testo stretto seguito dalle sue tessere: stesso bordo sinistro (le tessere prendono la larghezza del testo) */
.mg-cont--stretto + .mg-cont.mg-articolo--dopo { width: min(100% - 2 * var(--mg-gutter), var(--mg-contenitore-stretto)); }
/* (8) riga sotto le tessere (dati societari): staccata dal bento */
.mg-h-centro.mg-articolo--dopo { margin-top: 24px; }
/* (9) link dopo il sottotitolo centrato e due blocchi centrati di fila (contatti: "Dove siamo") */
.mg-h-lead + a.mg-link-freccia { display: inline-block; margin-top: 16px; }
.mg-h-centro + .mg-h-centro { margin-top: 112px; }
/* (10) riquadro "È urgente?" sopra il modulo del ticket */
.mg-tessera + .mg-modulo { margin-top: 20px; }
/* (11) h1 lunghi dei hero di pagina su telefono: al massimo 6 righe (balance lavora fino a 6) */
@media (max-width: 734px) { .mg-hero__testo h1, .mg-fascia .mg-h-testo h1 { font-size: clamp(30px, 8.4vw, 40px); } }
/* (14) tessere e loghi in elenco: niente margine "li + li" del testo corrente */
:is(.mg-griglia, .mg-bento, .mg-partner-pista, .mg-vetrina__tappe) > li + li { margin-top: 0; }
/* (15) nastro dei partner fermo su telefono: loghi su piu' colonne, non in fila verticale */
@media (prefers-reduced-motion: reduce) and (max-width: 734px) { .mg-partner-voce { width: 140px; padding: 0 10px; } }
/* (16) vetrina senza movimento: righe centrate, l'ultimo prodotto non resta solo a sinistra */
.mg-vetrina__tappe { display: flex; flex-wrap: wrap; justify-content: center; }
.mg-vetrina__tappe > .mg-tappa { flex: 0 1 360px; }   /* la vetrina animata (.js, movimento consentito) ha regole piu' specifiche: flex 0 0 100% */
/* (18) titolo seguito da tessere, spunte o domande: 20 px di stacco */
:is(h2, h3) + :is(.mg-bento, .mg-spunte, .mg-domande) { margin-top: 20px; }