/* =========================================================
   Scene motion graphic FabricHub
   Costruite in HTML/CSS: niente immagini, nitide a ogni misura,
   pesano pochissimo. Il movimento usa solo transform e opacity.
   ========================================================= */

:root {
  /* Colori del brand: tutte le scene passano da qui */
  --fh-frosted: #F2C499;   /* riempimenti */
  --fh-bronzo: #8A5A2B;    /* testo e icone di accento */
  --fh-ink: #1A1A1C;       /* testo principale */
  --fh-pagina: #F2F5FA;    /* sfondo pagina */
  --fh-card: #FFFFFF;      /* card */
  --fh-grigio: #6B7280;    /* testi secondari */
  --fh-linea: #E6E8EC;     /* bordi e divisori */
  --fh-scena-bg: #ECEEF2;  /* fondo della scena, come nelle schermate dell'app */

  /* Una sola curva per tutto: morbida, senza rimbalzi */
  --mg-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Scena ---------- */
.mg-scena {
  position: relative; width: 100%;
  /* La scena è un container: tutte le misure interne sono in "u",
     una frazione della sua larghezza, così scala in modo uniforme */
  container-type: inline-size;
  overflow: hidden; border-radius: 20px;
  background: var(--fh-scena-bg);
  font-family: "Inter Tight", system-ui, sans-serif; color: var(--fh-ink);
  -webkit-font-smoothing: antialiased;
}
.mg-scena *, .mg-scena *::before, .mg-scena *::after { box-sizing: border-box; }
.mg-contenuto {
  position: absolute; inset: 0;
  /* --base è la larghezza di progetto della scena (in unità) */
  --u: calc(100cqw / var(--base));
  font-size: calc(var(--u) * 14);
  transition: opacity .5s var(--mg-ease);
}
.mg-scena.uscita .mg-contenuto { opacity: 0; }
/* Durante l'azzeramento niente transizioni: si riparte puliti */
.mg-scena.reset * { transition: none !important; animation: none !important; }

/* Titoli e testi: niente stili ereditati dal tema */
.mg-scena h4 { font-family: inherit; line-height: 1.15; color: inherit; }
.mg-scena b { font-weight: 600; }

/* Posizionamento assoluto in unità di progetto */
.mg-abs { position: absolute; left: calc(var(--x, 0) * var(--u)); top: calc(var(--y, 0) * var(--u)); }
.mg-mono { font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* ---------- Entrate generiche ----------
   Un elemento con data-mg-e="N" compare quando la scena raggiunge la fase N.
   Le fasi sono cumulative (f1, f2, f3... restano tutte), il ritardo
   a scalare si regola con --d */
[data-mg-e] {
  opacity: 0;
  transform: translateY(calc(var(--u) * 16));
  transition: opacity .7s var(--mg-ease) var(--d, 0s), transform .9s var(--mg-ease) var(--d, 0s);
}
[data-mg-e][data-dir="destra"] { transform: translateX(calc(var(--u) * 70)); }
[data-mg-e][data-dir="sinistra"] { transform: translateX(calc(var(--u) * -70)); }
[data-mg-e][data-dir="scala"] { transform: scale(.88); }
[data-mg-e][data-dir="giu"] { transform: translateY(calc(var(--u) * -16)); }
[data-mg-e][data-dir="su-lungo"] { transform: translateY(calc(var(--u) * 80)); }
.f1 [data-mg-e="1"], .f2 [data-mg-e="2"], .f3 [data-mg-e="3"], .f4 [data-mg-e="4"],
.f5 [data-mg-e="5"], .f6 [data-mg-e="6"], .f7 [data-mg-e="7"], .f8 [data-mg-e="8"],
.f9 [data-mg-e="9"], .f10 [data-mg-e="10"], .f11 [data-mg-e="11"], .f12 [data-mg-e="12"] {
  opacity: 1; transform: none;
}

/* ---------- Cursore ---------- */
.mg-cursore {
  position: absolute; left: 0; top: 0; z-index: 20;
  width: calc(var(--u) * 22); height: calc(var(--u) * 22);
  opacity: 0; pointer-events: none;
  transition: transform 1s var(--mg-ease), opacity .4s var(--mg-ease);
  will-change: transform;
}
.mg-cursore svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
/* Il "clic": un cerchio che si allarga e svanisce */
.mg-clic {
  position: absolute; left: calc(var(--u) * -10); top: calc(var(--u) * -10);
  width: calc(var(--u) * 24); height: calc(var(--u) * 24); border-radius: 50%;
  background: var(--fh-frosted); opacity: 0; transform: scale(.2);
}
@keyframes mg-clic { 0% { opacity: .9; transform: scale(.2); } 100% { opacity: 0; transform: scale(1.6); } }
/* Stessi fotogrammi con nomi diversi: servono per far ripartire il clic in fasi successive */
@keyframes mg-clic2 { 0% { opacity: .9; transform: scale(.2); } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes mg-clic3 { 0% { opacity: .9; transform: scale(.2); } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes mg-premi { 0%,100% { transform: scale(1); } 40% { transform: scale(.94); } }

/* ---------- Texture dei tessuti (solo gradienti CSS) ---------- */
.mg-t-spigato {
  background:
    repeating-linear-gradient(90deg, transparent 0 5px, rgba(0,0,0,.35) 5px 6px),
    repeating-linear-gradient(45deg, #2b2b30 0 2px, #56565e 2px 4px);
}
.mg-t-spigato-b {
  background:
    repeating-linear-gradient(90deg, transparent 0 5px, rgba(0,0,0,.35) 5px 6px),
    repeating-linear-gradient(-45deg, #2b2b30 0 2px, #56565e 2px 4px);
}
.mg-t-galles {
  background-color: #c4bdb2;
  background-image:
    repeating-linear-gradient(0deg, rgba(80,70,60,.35) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, rgba(80,70,60,.35) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(120,60,50,.35) 22px 23px);
}
.mg-t-georgette {
  background-color: #6e1a2c;
  background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1.2px);
  background-size: 3px 3px;
}
.mg-t-jersey {
  background-color: #66652c;
  background-image: radial-gradient(#8d8a42 1px, transparent 1.4px);
  background-size: 4px 4px;
}
.mg-t-cammello {
  background-color: #b8895a;
  background-image: repeating-linear-gradient(60deg, rgba(255,255,255,.12) 0 1px, transparent 1px 4px);
}
.mg-t-avorio {
  background-color: #ece3d1;
  background-image: repeating-linear-gradient(90deg, rgba(150,130,100,.12) 0 1px, transparent 1px 3px);
}
.mg-t-blu {
  background-color: #26324d;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 1px, transparent 1px 4px);
}
.mg-t-salvia {
  background-color: #8f9c84;
  background-image: repeating-linear-gradient(-30deg, rgba(255,255,255,.10) 0 1px, transparent 1px 4px);
}
.mg-t-ruggine {
  background-color: #a5502e;
  background-image: repeating-linear-gradient(30deg, rgba(0,0,0,.10) 0 1px, transparent 1px 4px);
}

/* Chi preferisce meno movimento vede subito lo stato finale */
@media (prefers-reduced-motion: reduce) {
  .mg-scena *, .mg-scena *::before, .mg-scena *::after { transition: none !important; animation: none !important; }
}

/* =========================================================
   Scena "Il problema" 1 · Cataloghi: dal caos all'ordine
   ========================================================= */
.s1 { aspect-ratio: 562 / 886; }
.s1 .mg-contenuto { --base: 400; }

/* ===== B · Dal caos all'ordine ===== */
  #mg-cataloghi .testa { --x: 28; --y: 36; display: flex; align-items: center; gap: calc(var(--u) * 12); }
  #mg-cataloghi .testa h4 { margin: 0; font-size: calc(var(--u) * 38); font-weight: 700; letter-spacing: -.02em; }
  #mg-cataloghi .testa .chip {
    font-size: calc(var(--u) * 14); padding: calc(var(--u) * 5) calc(var(--u) * 12);
    border-radius: 999px; background: var(--fh-frosted); color: var(--fh-bronzo); font-weight: 500;
  }
  /* Ogni pezzo nasce "buttato lì" (posizione e rotazione in --cx --cy --cr)
     e alla fase 2 scivola nella sua riga ordinata */
  #mg-cataloghi .pezzo {
    --x: 28; width: calc(var(--u) * 344); height: calc(var(--u) * 76);
    opacity: 0;
    transform: translate(calc(var(--cx) * var(--u)), calc(var(--cy) * var(--u))) rotate(var(--cr)) scale(1.14);
    transition: opacity .6s var(--mg-ease) var(--d), transform .8s var(--mg-ease) var(--d);
    will-change: transform;
  }
  #mg-cataloghi.f1 .pezzo { opacity: 1; transform: translate(calc(var(--cx) * var(--u)), calc(var(--cy) * var(--u))) rotate(var(--cr)); }
  #mg-cataloghi.f2 .pezzo { transform: none; transition: transform 1.1s var(--mg-ease) var(--d2); }
  #mg-cataloghi .foglio, #mg-cataloghi .riga { position: absolute; left: 0; top: 0; height: 100%; transition: opacity .5s var(--mg-ease) calc(var(--d2) + .3s); }
  #mg-cataloghi .riga { width: 100%; opacity: 0; }
  #mg-cataloghi.f2 .riga { opacity: 1; }
  #mg-cataloghi.f2 .foglio { opacity: 0; }

  /* I vari "pezzi" del caos di oggi */
  #mg-cataloghi .foglio { display: flex; align-items: center; gap: calc(var(--u) * 10); padding: 0 calc(var(--u) * 14); box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 16) rgba(0,0,0,.1); }
  #mg-cataloghi .cartellino { width: calc(var(--u) * 196); background: #fffdf8; border-radius: calc(var(--u) * 6); }
  #mg-cataloghi .cartellino .sw { width: calc(var(--u) * 46); height: calc(var(--u) * 54); border-radius: calc(var(--u) * 3); flex: none; }
  #mg-cataloghi .mano { font-weight: 500; font-size: calc(var(--u) * 14.5); color: #3b3f4a; line-height: 1.3; }
  #mg-cataloghi .pdf { width: calc(var(--u) * 290); background: #fff; border-radius: calc(var(--u) * 12); }
  #mg-cataloghi .pdf .ico { width: calc(var(--u) * 40); height: calc(var(--u) * 48); border-radius: calc(var(--u) * 6); background: #c8463b; color: #fff; display: grid; place-items: center; font-size: calc(var(--u) * 11); font-weight: 700; flex: none; }
  #mg-cataloghi .pdf b { display: block; font-size: calc(var(--u) * 13.5); font-weight: 600; }
  #mg-cataloghi .pdf small { display: block; font-size: calc(var(--u) * 12); color: var(--fh-grigio); margin-top: calc(var(--u) * 3); }
  #mg-cataloghi .chat { width: calc(var(--u) * 250); background: #dcf3d8; border-radius: calc(var(--u) * 16) calc(var(--u) * 16) calc(var(--u) * 16) calc(var(--u) * 4); font-size: calc(var(--u) * 14); line-height: 1.3; color: #233024; }
  #mg-cataloghi .cartella { width: calc(var(--u) * 300); background: #fff; border-radius: calc(var(--u) * 4); gap: calc(var(--u) * 6); }
  #mg-cataloghi .cartella i { width: calc(var(--u) * 34); height: calc(var(--u) * 50); border-radius: calc(var(--u) * 2); flex: none; }
  #mg-cataloghi .cartella small { font-size: calc(var(--u) * 11); color: var(--fh-grigio); writing-mode: vertical-rl; transform: rotate(180deg); }
  #mg-cataloghi .postit { width: calc(var(--u) * 176); background: var(--fh-frosted); border-radius: calc(var(--u) * 2); }
  #mg-cataloghi .postit .mano { color: #5a3a1c; }

  /* La riga ordinata finale */
  #mg-cataloghi .riga {
    background: #fff; border-radius: calc(var(--u) * 16); display: flex; align-items: center;
    gap: calc(var(--u) * 14); padding: 0 calc(var(--u) * 16);
    box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 12) rgba(20,20,30,.04);
  }
  #mg-cataloghi .riga .sw { width: calc(var(--u) * 44); height: calc(var(--u) * 44); border-radius: calc(var(--u) * 10); flex: none; }
  #mg-cataloghi .riga b { display: block; font-size: calc(var(--u) * 16.5); font-weight: 600; }
  #mg-cataloghi .riga small { display: block; font-size: calc(var(--u) * 13); color: var(--fh-grigio); margin-top: calc(var(--u) * 3); }
  #mg-cataloghi .riga .frec { margin-left: auto; color: var(--fh-bronzo); font-size: calc(var(--u) * 18); }
  #mg-cataloghi .pill {
    --x: 28; --y: 584; width: calc(var(--u) * 344); height: calc(var(--u) * 36);
    border-radius: 999px; border: calc(var(--u) * 1.5) solid var(--fh-bronzo); color: var(--fh-bronzo);
    display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 8);
    font-size: calc(var(--u) * 14); font-weight: 500;
  }
  #mg-cataloghi .pill svg { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }

  
/* =========================================================
   Scena "Il problema" 2 · Griglia prodotti
   ========================================================= */
.s2 { aspect-ratio: 898 / 513; }
.s2 .mg-contenuto { --base: 600; }

.s2 .testa { --x: 24; --y: 18; display: flex; align-items: center; gap: calc(var(--u) * 10); }
  .s2 .testa b { font-size: calc(var(--u) * 18); font-weight: 600; }
  .s2 .testa .chip { font-size: calc(var(--u) * 12); padding: calc(var(--u) * 3) calc(var(--u) * 9); border-radius: 999px; background: #fff; color: var(--fh-grigio); }
  .s2 .anello {
    position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    box-shadow: 0 0 0 calc(var(--u) * 2) var(--fh-frosted); opacity: 0; transition: opacity .4s var(--mg-ease);
  }

  /* ===== A · Griglia prodotti ===== */
  #mg-prodotti .card {
    width: calc(var(--u) * 270); height: calc(var(--u) * 128);
    background: #fff; border-radius: calc(var(--u) * 14);
    box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 12) rgba(20,20,30,.05);
  }
  #mg-prodotti .k1 { --x: 24; --y: 56; } #mg-prodotti .k2 { --x: 306; --y: 56; }
  #mg-prodotti .k3 { --x: 24; --y: 198; } #mg-prodotti .k4 { --x: 306; --y: 198; }
  #mg-prodotti .box {
    position: absolute; left: calc(var(--u) * 14); top: calc(var(--u) * 16);
    width: calc(var(--u) * 18); height: calc(var(--u) * 18); border-radius: calc(var(--u) * 4);
    border: calc(var(--u) * 1.5) solid #c9ced6; overflow: hidden;
  }
  /* La spunta: un quadrato pieno che compare con un piccolo zoom */
  #mg-prodotti .spunta {
    position: absolute; inset: calc(var(--u) * -1.5); background: var(--fh-bronzo); display: grid; place-items: center;
    opacity: 0; transform: scale(.4); transition: opacity .3s var(--mg-ease), transform .5s var(--mg-ease);
  }
  #mg-prodotti .spunta svg { width: 80%; height: 80%; }
  #mg-prodotti.f5 .k1 .spunta, #mg-prodotti.f7 .k4 .spunta { opacity: 1; transform: none; }
  #mg-prodotti.f5 .k1 .anello, #mg-prodotti.f7 .k4 .anello { opacity: 1; }
  #mg-prodotti .sw { position: absolute; left: calc(var(--u) * 44); top: calc(var(--u) * 12); width: calc(var(--u) * 48); height: calc(var(--u) * 48); border-radius: calc(var(--u) * 8); }
  #mg-prodotti .nome { position: absolute; left: calc(var(--u) * 104); top: calc(var(--u) * 14); font-size: calc(var(--u) * 17); font-weight: 600; white-space: nowrap; }
  #mg-prodotti .cod { position: absolute; left: calc(var(--u) * 104); top: calc(var(--u) * 38); font-size: calc(var(--u) * 12); color: var(--fh-grigio); }
  #mg-prodotti .div { position: absolute; left: calc(var(--u) * 14); right: calc(var(--u) * 14); top: calc(var(--u) * 72); height: 1px; background: var(--fh-linea); }
  #mg-prodotti .specs { position: absolute; left: calc(var(--u) * 14); top: calc(var(--u) * 84); display: flex; gap: calc(var(--u) * 6); }
  #mg-prodotti .specs span {
    font-size: calc(var(--u) * 12.5); padding: calc(var(--u) * 5) calc(var(--u) * 9);
    border-radius: 999px; background: #F3F4F6; color: #3d434f; white-space: nowrap;
  }
  #mg-prodotti .specs span.st { background: #FBEBDC; color: var(--fh-bronzo); }
  #mg-prodotti .barra {
    --x: 120; --y: 280; width: calc(var(--u) * 360); height: calc(var(--u) * 48); z-index: 10;
    background: var(--fh-ink); color: #fff; border-radius: 999px;
    display: flex; align-items: center; padding: 0 calc(var(--u) * 6) 0 calc(var(--u) * 20);
    box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 26) rgba(0,0,0,.25);
    font-size: calc(var(--u) * 14);
  }
  #mg-prodotti .barra .btn {
    margin-left: auto; position: relative; width: calc(var(--u) * 176); height: calc(var(--u) * 36);
    border-radius: 999px; background: var(--fh-frosted); color: var(--fh-ink); overflow: hidden; font-weight: 500;
  }
  #mg-prodotti .btn span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 6); transition: opacity .35s var(--mg-ease), transform .5s var(--mg-ease); }
  #mg-prodotti .btn .dopo { opacity: 0; transform: translateY(100%); color: var(--fh-bronzo); }
  #mg-prodotti.f10 .btn .prima { opacity: 0; transform: translateY(-100%); }
  #mg-prodotti.f10 .btn .dopo { opacity: 1; transform: none; }
  #mg-prodotti.f10 .btn { animation: mg-premi .35s var(--mg-ease); }
  #mg-prodotti .btn svg { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }

  #mg-prodotti .mg-cursore { transform: translate(calc(var(--u) * 640), calc(var(--u) * 360)); }
  #mg-prodotti.f4 .mg-cursore { opacity: 1; transform: translate(calc(var(--u) * 41), calc(var(--u) * 78)); }
  #mg-prodotti.f6 .mg-cursore { transform: translate(calc(var(--u) * 323), calc(var(--u) * 220)); }
  #mg-prodotti.f9 .mg-cursore { transform: translate(calc(var(--u) * 400), calc(var(--u) * 302)); }
  #mg-prodotti.f5 .mg-clic { animation: mg-clic .6s var(--mg-ease); }
  #mg-prodotti.f7 .mg-clic { animation: mg-clic2 .6s var(--mg-ease); }
  #mg-prodotti.f10 .mg-clic { animation: mg-clic3 .6s var(--mg-ease); }

  
/* ---------- Scene fluide ----------
   L'altezza nasce dal contenuto (aspect-ratio sul contenuto, non sulla scena):
   così sotto i 400px di larghezza un container query può cambiare proporzioni
   e impaginazione, e i testi restano leggibili anche su telefono.
   --u qui è limitato: non diventa né minuscolo né enorme. */
.mg-fluido .mg-contenuto {
  position: relative; inset: auto;
  aspect-ratio: var(--ratio);
  --u: clamp(.72px, calc(100cqw / var(--base)), 1.3px);
}
@container (max-width: 400px) {
  .mg-fluido .mg-contenuto {
    aspect-ratio: var(--ratio-m, var(--ratio));
    --u: calc(100cqw / var(--base-m, 360));
  }
}
/* Nelle scene fluide il cursore parte fuori scena in basso a destra;
   le posizioni successive le calcola il motore sugli elementi bersaglio */
.mg-fluido .mg-cursore { transform: translate(calc(100cqw + 10px), calc(100cqw * .7)); }
.mg-clic.vai { animation: mg-clic .6s var(--mg-ease); }
.premuto { animation: mg-premi .35s var(--mg-ease); }


/* =========================================================
   Scena "Statistiche" · Condivisione automatizzata: destinatari
   ========================================================= */
/* ---------- Scena: impostazioni comuni ---------- */
  .s6 { background: #F7F8FA; }
  .s6 .mg-contenuto { --base: 560; --ratio: 17 / 10; /* stessa proporzione delle altre immagini della sezione */ --base-m: 340; }
  .s6 .pan { position: absolute; inset: 0; padding: calc(var(--u) * 18) calc(var(--u) * 20); display: flex; flex-direction: column; gap: calc(var(--u) * 10); }
  .s6 svg { display: block; }
  .s6 .ico { width: calc(var(--u) * 17); height: calc(var(--u) * 17); flex: none; }
  .s6 .av {
    width: calc(var(--u) * 30); height: calc(var(--u) * 30); border-radius: 50%; flex: none;
    display: grid; place-items: center; color: #fff; font-size: calc(var(--u) * 11); font-weight: 600;
  }
  .s6 .av.a1 { background: #5b6b8c; } .s6 .av.a2 { background: #8a5a2b; } .s6 .av.a3 { background: #6c7a5c; } .s6 .av.a4 { background: #7d5c74; }
  .s6 .bt {
    position: relative; overflow: hidden; border-radius: calc(var(--u) * 12);
    display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 8);
    font-size: calc(var(--u) * 14.5); font-weight: 500; white-space: nowrap;
  }
  /* Etichette che si scambiano (prima / dopo): solo opacità e spostamento */
  .s6 .scambio { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 8); transition: opacity .35s var(--mg-ease), transform .5s var(--mg-ease); }
  .s6 .scambio.dopo { opacity: 0; transform: translateY(100%); }

  /* =====================================================
     A · Destinatari: contatti salvati + nuovo destinatario
     ===================================================== */
  #mg-condivisione .scegli { height: calc(var(--u) * 42); border: calc(var(--u) * 1.5) solid #cdb89c; color: var(--fh-bronzo); background: #fff; }
  #mg-condivisione .scegli .chev { margin-left: calc(var(--u) * 4); opacity: .7; }
  #mg-condivisione .dest {
    min-height: calc(var(--u) * 42); border: 1px solid #d9dde3; border-radius: calc(var(--u) * 12); background: #fff;
    display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 6); padding: calc(var(--u) * 6) calc(var(--u) * 10);
    position: relative;
  }
  #mg-condivisione .dest .a { font-size: calc(var(--u) * 13); color: var(--fh-grigio); margin-right: calc(var(--u) * 2); }
  /* Il segnaposto sta sopra lo spazio dei chip, che restano invisibili finché non entrano */
  #mg-condivisione .dest .vuoto { position: absolute; left: calc(var(--u) * 34); top: 50%; translate: 0 -50%; font-size: calc(var(--u) * 13); color: #a3a9b4; transition: opacity .3s var(--mg-ease); }
  #mg-condivisione.f5 .dest .vuoto { opacity: 0; }
  #mg-condivisione .chip {
    display: inline-flex; align-items: center; gap: calc(var(--u) * 6);
    padding: calc(var(--u) * 3) calc(var(--u) * 10) calc(var(--u) * 3) calc(var(--u) * 3);
    border-radius: 999px; background: #FBEBDC; font-size: calc(var(--u) * 12.5); color: #4a3520; white-space: nowrap;
  }
  #mg-condivisione .chip .av { width: calc(var(--u) * 22); height: calc(var(--u) * 22); font-size: calc(var(--u) * 9); }
  #mg-condivisione .oppure { display: flex; align-items: center; gap: calc(var(--u) * 10); font-size: calc(var(--u) * 12); color: #9aa1ad; white-space: nowrap; }
  #mg-condivisione .oppure::before, #mg-condivisione .oppure::after { content: ""; flex: 1; height: 1px; background: #e3e6eb; }
  #mg-condivisione .campi { display: grid; grid-template-columns: 1fr 1.25fr auto; gap: calc(var(--u) * 8); }
  #mg-condivisione .campo {
    position: relative; height: calc(var(--u) * 38); border: 1px solid #d9dde3; border-radius: calc(var(--u) * 10); background: #fff;
    font-size: calc(var(--u) * 13.5); overflow: hidden;
  }
  #mg-condivisione .campo span { position: absolute; left: calc(var(--u) * 12); right: calc(var(--u) * 8); top: 50%; translate: 0 -50%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .35s var(--mg-ease); }
  #mg-condivisione .campo .ph { color: #a3a9b4; }
  #mg-condivisione .campo .val { color: var(--fh-ink); opacity: 0; }
  #mg-condivisione.f6 .campo .val { opacity: 1; transition-delay: var(--d, 0s); }
  #mg-condivisione.f6 .campo .ph { opacity: 0; transition-delay: var(--d, 0s); }
  #mg-condivisione.f8 .campo .val { opacity: 0; transition-delay: .15s; }
  #mg-condivisione.f8 .campo .ph { opacity: 1; transition-delay: .15s; }
  #mg-condivisione .aggiungi { height: calc(var(--u) * 38); padding: 0 calc(var(--u) * 16); background: var(--fh-frosted); color: var(--fh-ink); border-radius: calc(var(--u) * 10); }
  #mg-condivisione .invia { margin-top: auto; height: calc(var(--u) * 42); background: var(--fh-ink); color: #fff; }
  #mg-condivisione .invia .dopo { background: var(--fh-frosted); color: var(--fh-bronzo); }
  #mg-condivisione.f10 .invia .prima { opacity: 0; transform: translateY(-100%); }
  #mg-condivisione.f10 .invia .dopo { opacity: 1; transform: none; }

  /* Tendina dei contatti salvati */
  #mg-condivisione .tendina {
    position: absolute; z-index: 8; left: 50%; top: calc(var(--u) * 66);
    width: calc(var(--u) * 300); margin-left: calc(var(--u) * -150);
    background: #fff; border-radius: calc(var(--u) * 14); padding: calc(var(--u) * 6);
    box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 34) rgba(20,20,30,.16), 0 0 0 1px rgba(20,20,30,.05);
    transform-origin: 50% 0;
  }
  #mg-condivisione.f5 .tendina { opacity: 0; transform: translateY(calc(var(--u) * -6)) scale(.97); transition-delay: 0s; }
  #mg-condivisione .tendina .r { display: flex; align-items: center; gap: calc(var(--u) * 10); padding: calc(var(--u) * 7) calc(var(--u) * 8); border-radius: calc(var(--u) * 9); }
  #mg-condivisione .tendina b { display: block; font-size: calc(var(--u) * 13); font-weight: 600; }
  #mg-condivisione .tendina small { display: block; font-size: calc(var(--u) * 11.5); color: var(--fh-grigio); }
  #mg-condivisione .tendina .cb {
    margin-left: auto; position: relative; width: calc(var(--u) * 18); height: calc(var(--u) * 18);
    border-radius: calc(var(--u) * 5); border: calc(var(--u) * 1.5) solid #c9ced6; overflow: hidden; flex: none;
  }
  #mg-condivisione .tendina .cb i {
    position: absolute; inset: calc(var(--u) * -1.5); background: var(--fh-bronzo); display: grid; place-items: center;
    opacity: 0; transform: scale(.4); transition: opacity .3s var(--mg-ease) var(--d), transform .5s var(--mg-ease) var(--d);
  }
  #mg-condivisione .tendina .cb svg { width: 75%; height: 75%; }
  #mg-condivisione.f4 .tendina .cb i { opacity: 1; transform: none; }

  /* Telefono: nome a tutta riga, email e "Aggiungi" sotto */
  @container (max-width: 400px) {
    #mg-condivisione .mg-contenuto { --ratio-m: 340 / 372; }
    #mg-condivisione .campi { grid-template-columns: 1fr auto; }
    #mg-condivisione .campi .campo:first-child { grid-column: 1 / -1; }
    #mg-condivisione .tendina { width: calc(var(--u) * 290); margin-left: calc(var(--u) * -145); }
  }

  
/* =========================================================
   Sezione "Come funziona": scene a riquadro (altezza fissa)
   ========================================================= */
/* ---------- Scene "a riquadro" ----------
   Per i riquadri con altezza fissa (es. le card di "Come funziona"):
   la scena riempie il riquadro e la "tela" interna scala per starci dentro
   sia in larghezza che in altezza. Sotto i 440px di larghezza la tela usa
   un'impaginazione compatta (340x300) pensata per telefono e tablet stretto. */
.mg-box { height: 100%; container-type: size; }
.mg-box .mg-contenuto {
  display: grid; place-items: center;
  --bw: 600; --bh: 464;
  --u: min(calc(100cqw / var(--bw)), calc(100cqh / var(--bh)));
}
@container (max-width: 440px) {
  .mg-box .mg-contenuto { --bw: 340; --bh: 300; }
}
.mg-box .tela { position: relative; width: calc(var(--bw) * var(--u)); height: calc(var(--bh) * var(--u)); }
.mg-box .mg-cursore { transform: translate(calc(var(--bw) * var(--u) + 10px), calc(var(--bh) * var(--u) + 10px)); }


/* ---------- Posizionamento nella tela ----------
   --x --y --w --h in unità di progetto (tela 600x464);
   --cx --cy --cw --ch per la tela compatta (340x300) */
.ab {
  position: absolute;
  left: calc(var(--x, 0) * var(--u)); top: calc(var(--y, 0) * var(--u));
  width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u));
}
@container (max-width: 440px) {
  .ab {
    left: calc(var(--cx, var(--x, 0)) * var(--u)); top: calc(var(--cy, var(--y, 0)) * var(--u));
    width: calc(var(--cw, var(--w)) * var(--u)); height: calc(var(--ch, var(--h)) * var(--u));
  }
  .solo-largo { display: none !important; }
}
@container (min-width: 441px) { .solo-compatto { display: none !important; } }

/* ---------- Pezzi comuni ---------- */
.mg-scena .pnl { background: #fff; border-radius: calc(var(--u) * 14); box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 16) rgba(20,20,30,.06), 0 0 0 1px rgba(20,20,30,.04); }
.mg-scena .tit { font-size: calc(var(--u) * 15); font-weight: 600; }
.mg-scena .sub { font-size: calc(var(--u) * 12); color: var(--fh-grigio); }
.mg-scena .lbl { font-size: calc(var(--u) * 10.5); color: #7b818c; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; }
.mg-scena .ico { width: calc(var(--u) * 16); height: calc(var(--u) * 16); flex: none; display: block; }
.mg-scena .av {
  width: calc(var(--u) * 30); height: calc(var(--u) * 30); border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff; font-size: calc(var(--u) * 11); font-weight: 600; font-style: normal;
}
.mg-scena .a1 { background: #5b6b8c; } .mg-scena .a2 { background: #8a5a2b; } .mg-scena .a3 { background: #6c7a5c; } .mg-scena .a4 { background: #7d5c74; }
.mg-scena .bt {
  position: relative; overflow: hidden; border-radius: calc(var(--u) * 10);
  display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 7);
  font-size: calc(var(--u) * 13.5); font-weight: 500; white-space: nowrap;
}
.mg-scena .bt.nero { background: var(--fh-ink); color: #fff; }
.mg-scena .bt.frost { background: var(--fh-frosted); color: var(--fh-ink); }
.mg-scena .bt.bordo { background: #fff; border: 1px solid #d9dde3; color: var(--fh-ink); }
.mg-scena .scambio { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 7); transition: opacity .35s var(--mg-ease), transform .5s var(--mg-ease); }
.mg-scena .scambio.dopo { opacity: 0; transform: translateY(100%); background: var(--fh-frosted); color: var(--fh-bronzo); }
.mg-scena .riga-sep { border-bottom: 1px solid #eef0f3; }
.mg-scena .pill { display: inline-flex; align-items: center; gap: calc(var(--u) * 5); font-size: calc(var(--u) * 11.5); padding: calc(var(--u) * 3) calc(var(--u) * 9); border-radius: 999px; white-space: nowrap; }
.mg-scena .p-cat { background: #E8EEFB; color: #3557a8; }
.mg-scena .p-cmp { background: #FBEBDC; color: var(--fh-bronzo); }
.mg-scena .p-car { background: #F0E8F7; color: #7b4aa3; }
/* Barra di avanzamento: si riempie con scaleX, durata in --t */
.mg-scena .barra { height: calc(var(--u) * 6); border-radius: 999px; background: #EEF0F3; overflow: hidden; }
.mg-scena .barra i { display: block; height: 100%; background: var(--fh-bronzo); border-radius: inherit; transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--t, 2s) cubic-bezier(.4, 0, .2, 1) var(--d, 0s); }
/* Spunta riutilizzabile: quadratino che si riempie */
.mg-scena .cb { position: relative; width: calc(var(--u) * 16); height: calc(var(--u) * 16); border-radius: calc(var(--u) * 4); border: calc(var(--u) * 1.5) solid #c9ced6; overflow: hidden; flex: none; }
.mg-scena .cb i { position: absolute; inset: calc(var(--u) * -1.5); background: var(--fh-bronzo); display: grid; place-items: center; opacity: 0; transform: scale(.4); transition: opacity .3s var(--mg-ease), transform .5s var(--mg-ease); }
.mg-scena .cb svg { width: 80%; height: 80%; }

[data-process-image] .mg-scena { border-radius: 0; background: #F5F6F8; }

/* ----- Come funziona 1 · Crea il tuo archivio: scheda compilata ----- */

#mg-crea .form { --x: 40; --y: 20; --w: 520; --h: 424; --cx: 8; --cy: 8; --cw: 324; --ch: 284;
  display: flex; flex-direction: column; }
#mg-crea .testa { display: flex; align-items: center; gap: calc(var(--u) * 10); padding: calc(var(--u) * 14) calc(var(--u) * 18); border-bottom: 1px solid #eef0f3; }
#mg-crea .testa .x { margin-left: auto; color: #9aa1ad; font-size: calc(var(--u) * 18); line-height: 1; }
#mg-crea .auto { font-size: calc(var(--u) * 11); }
#mg-crea .corpo { flex: 1; padding: calc(var(--u) * 14) calc(var(--u) * 18); display: grid; grid-template-columns: calc(var(--u) * 132) 1fr 1fr 1fr; grid-auto-rows: min-content; gap: calc(var(--u) * 10) calc(var(--u) * 12); }
#mg-crea .foto { grid-row: span 2; position: relative; aspect-ratio: 1; border-radius: calc(var(--u) * 12); border: calc(var(--u) * 1.5) dashed #d5d9e0; display: grid; place-items: center; text-align: center; font-size: calc(var(--u) * 11); color: #9aa1ad; overflow: hidden; }
#mg-crea .foto .img { position: absolute; inset: 0; opacity: 0; transform: scale(1.25); transition: opacity .5s var(--mg-ease), transform 1.2s var(--mg-ease); }
#mg-crea.f2 .foto .img { opacity: 1; transform: none; }
#mg-crea .c { display: flex; flex-direction: column; gap: calc(var(--u) * 4); min-width: 0; }
#mg-crea .c.s3 { grid-column: span 3; } #mg-crea .c.s4 { grid-column: span 4; } #mg-crea .c.s1 { grid-column: span 1; }
#mg-crea .c > span { font-size: calc(var(--u) * 11.5); font-weight: 500; color: #3d434f; }
#mg-crea .in { position: relative; height: calc(var(--u) * 34); border-radius: calc(var(--u) * 8); background: #F3F4F6; overflow: hidden; font-size: calc(var(--u) * 12.5); }
#mg-crea .in em, #mg-crea .in b { position: absolute; left: calc(var(--u) * 10); right: calc(var(--u) * 8); top: 50%; translate: 0 -50%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: normal; font-weight: 400; transition: opacity .35s var(--mg-ease) var(--d, 0s); }
#mg-crea .in em { color: #a3a9b4; }
#mg-crea .in b { color: var(--fh-ink); opacity: 0; }
#mg-crea .in::after { content: ""; position: absolute; inset: 0; background: var(--fh-frosted); opacity: 0; }
#mg-crea.f4 .in b { opacity: 1; } #mg-crea.f4 .in em { opacity: 0; }
#mg-crea.f4 .in::after { animation: s7-lampo .9s var(--mg-ease) var(--d, 0s); }
@keyframes s7-lampo { 0% { opacity: 0; } 30% { opacity: .55; } 100% { opacity: 0; } }
#mg-crea .piede { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 10); padding: calc(var(--u) * 12) calc(var(--u) * 18); border-top: 1px solid #eef0f3; }
#mg-crea .piede .bt { height: calc(var(--u) * 36); }
#mg-crea.f6 .salva .prima { opacity: 0; transform: translateY(-100%); }
#mg-crea.f6 .salva .dopo { opacity: 1; transform: none; }
#mg-crea .toast { --x: 170; --y: 6; --w: 260; --h: 40; --cx: 50; --cy: 4; --cw: 240; --ch: 34; z-index: 8;
  background: var(--fh-ink); color: #fff; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 12.5);
  box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 24) rgba(0,0,0,.2); }
#mg-crea .toast .ico { color: var(--fh-frosted); }
@container (max-width: 440px) {
  #mg-crea .testa { padding: calc(var(--u) * 9) calc(var(--u) * 12); }
  #mg-crea .corpo { padding: calc(var(--u) * 10) calc(var(--u) * 12); grid-template-columns: calc(var(--u) * 70) 1fr 1fr 1fr; gap: calc(var(--u) * 7) calc(var(--u) * 8); }
  #mg-crea .in { height: calc(var(--u) * 28); }
  #mg-crea .piede { padding: calc(var(--u) * 9) calc(var(--u) * 12); }
  #mg-crea .piede .bt { height: calc(var(--u) * 30); }
  #mg-crea .auto { display: none; }
}

/* ----- Come funziona 2 · Organizza: crea un campionario ----- */

#mg-organizza .lista { --x: 20; --y: 20; --w: 280; --h: 424; --cx: 8; --cy: 8; --cw: 172; --ch: 284; }
#mg-organizza .lista .testa { position: absolute; left: calc(var(--u) * 16); top: calc(var(--u) * 16); }
#mg-organizza .r { --x: 8; --w: 264; --h: 50; --cx: 6; --cw: 160; --ch: 40;
  display: flex; align-items: center; gap: calc(var(--u) * 10); padding: 0 calc(var(--u) * 10); border-radius: calc(var(--u) * 10); }
#mg-organizza .r .sw { width: calc(var(--u) * 34); height: calc(var(--u) * 34); border-radius: calc(var(--u) * 7); flex: none; }
#mg-organizza .r b { display: block; font-size: calc(var(--u) * 13); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mg-organizza .r small { display: block; font-size: calc(var(--u) * 11); color: var(--fh-grigio); }
#mg-organizza .r > div { min-width: 0; }
#mg-organizza .r::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #FBF3EA; opacity: 0; transition: opacity .3s var(--mg-ease); }
#mg-organizza .r > * { position: relative; }
#mg-organizza .card { --x: 316; --y: 20; --w: 264; --h: 424; --cx: 188; --cy: 8; --cw: 144; --ch: 284;
  padding: calc(var(--u) * 16); display: flex; flex-direction: column; gap: calc(var(--u) * 8); }
#mg-organizza .card .testa { display: flex; align-items: center; gap: calc(var(--u) * 8); color: var(--fh-bronzo); }
#mg-organizza .card .testa .tit { color: var(--fh-ink); }
#mg-organizza .in { position: relative; height: calc(var(--u) * 34); border-radius: calc(var(--u) * 8); border: 1px solid #d9dde3; font-size: calc(var(--u) * 12.5); overflow: hidden; }
#mg-organizza .in em, #mg-organizza .in b { position: absolute; left: calc(var(--u) * 10); right: calc(var(--u) * 8); top: 50%; translate: 0 -50%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: normal; font-weight: 400; transition: opacity .35s var(--mg-ease); }
#mg-organizza .in em { color: #a3a9b4; } #mg-organizza .in b { opacity: 0; }
#mg-organizza.f8 .in b { opacity: 1; } #mg-organizza.f8 .in em { opacity: 0; }
#mg-organizza .slot { height: calc(var(--u) * 58); border-radius: calc(var(--u) * 10); border: calc(var(--u) * 1.5) dashed #e0d3c2; background: #FCF8F3; }
#mg-organizza .conta-p { font-size: calc(var(--u) * 12); color: var(--fh-grigio); }
#mg-organizza .dest { display: flex; align-items: center; }
#mg-organizza .dest .av { width: calc(var(--u) * 26); height: calc(var(--u) * 26); font-size: calc(var(--u) * 9.5); border: calc(var(--u) * 2) solid #fff; margin-left: calc(var(--u) * -6); }
#mg-organizza .dest .av:first-child { margin-left: 0; }
#mg-organizza .dest span { font-size: calc(var(--u) * 11.5); color: var(--fh-grigio); margin-left: calc(var(--u) * 8); }
#mg-organizza .crea { margin-top: auto; height: calc(var(--u) * 38); }
#mg-organizza.f10 .crea .prima { opacity: 0; transform: translateY(-100%); }
#mg-organizza.f10 .crea .dopo { opacity: 1; transform: none; }
/* Le miniature che volano nel campionario */
#mg-organizza .vola { --w: 34; --h: 34; --cw: 28; --ch: 28; border-radius: calc(var(--u) * 7); z-index: 6; opacity: 0;
  box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 14) rgba(0,0,0,.18); border: calc(var(--u) * 2) solid #fff;
  transition: opacity .25s var(--mg-ease), transform 1s var(--mg-ease); }
@container (max-width: 440px) {
  #mg-organizza .lista .testa { left: calc(var(--u) * 12); top: calc(var(--u) * 10); }
  #mg-organizza .r { gap: calc(var(--u) * 7); padding: 0 calc(var(--u) * 6); }
  #mg-organizza .r .sw { width: calc(var(--u) * 28); height: calc(var(--u) * 28); }
  #mg-organizza .r small { display: none; }
  #mg-organizza .r b { font-size: calc(var(--u) * 11.5); }
  #mg-organizza .card { padding: calc(var(--u) * 10); gap: calc(var(--u) * 6); }
  #mg-organizza .in { height: calc(var(--u) * 30); font-size: calc(var(--u) * 11); }
  #mg-organizza .slot { height: calc(var(--u) * 40); }
  #mg-organizza .crea { height: calc(var(--u) * 32); font-size: calc(var(--u) * 12); }
}

#mg-organizza.f3 .r0 .cb i { opacity: 1; transform: none; }
#mg-organizza.f3 .r0::before { opacity: 1; }
#mg-organizza.f3 .v0 { opacity: 1; transform: translate(calc(var(--tx) * var(--u)), calc(var(--ty) * var(--u))); }
@container (max-width: 440px) { #mg-organizza.f3 .v0 { transform: translate(calc(var(--ctx) * var(--u)), calc(var(--cty) * var(--u))); } }
#mg-organizza.f5 .r2 .cb i { opacity: 1; transform: none; }
#mg-organizza.f5 .r2::before { opacity: 1; }
#mg-organizza.f5 .v2 { opacity: 1; transform: translate(calc(var(--tx) * var(--u)), calc(var(--ty) * var(--u))); }
@container (max-width: 440px) { #mg-organizza.f5 .v2 { transform: translate(calc(var(--ctx) * var(--u)), calc(var(--cty) * var(--u))); } }
#mg-organizza.f7 .r4 .cb i { opacity: 1; transform: none; }
#mg-organizza.f7 .r4::before { opacity: 1; }
#mg-organizza.f7 .v4 { opacity: 1; transform: translate(calc(var(--tx) * var(--u)), calc(var(--ty) * var(--u))); }
@container (max-width: 440px) { #mg-organizza.f7 .v4 { transform: translate(calc(var(--ctx) * var(--u)), calc(var(--cty) * var(--u))); } }
/* ----- Come funziona 3 · Condividi: email o WhatsApp ----- */

#mg-condividi .pan { position: absolute; inset: 0; padding: calc(var(--u) * 20); display: flex; flex-direction: column; gap: calc(var(--u) * 12); }
#mg-condividi .barra-c { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 10); }
#mg-condividi .seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: calc(var(--u) * 250); height: calc(var(--u) * 40); background: #EBEDF1; border-radius: 999px; padding: calc(var(--u) * 3); flex: none; }
#mg-condividi .seg .ind { position: absolute; top: calc(var(--u) * 3); left: calc(var(--u) * 3); width: calc(50% - var(--u) * 3); height: calc(100% - var(--u) * 6); border-radius: 999px; background: #fff; box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 6) rgba(0,0,0,.08); transition: transform .6s var(--mg-ease); }
#mg-condividi.f3 .seg .ind { transform: translateX(100%); }
#mg-condividi .seg span { position: relative; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 6); font-size: calc(var(--u) * 13.5); font-weight: 500; color: #6b7280; }
#mg-condividi .seg span svg, #mg-condividi .priv svg { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }
#mg-condividi .seg .e1 { color: var(--fh-ink); }
#mg-condividi.f3 .seg .e1 { color: #6b7280; } #mg-condividi.f3 .seg .e2 { color: var(--fh-ink); }
#mg-condividi .priv { display: flex; align-items: center; gap: calc(var(--u) * 6); font-size: calc(var(--u) * 12); color: var(--fh-bronzo); white-space: nowrap; }
#mg-condividi .anteprima { position: relative; flex: 1; min-height: 0; }
#mg-condividi .vista { position: absolute; inset: 0; border-radius: calc(var(--u) * 14); overflow: hidden; transition: opacity .5s var(--mg-ease), transform .7s var(--mg-ease); }
#mg-condividi .mail { background: #fff; padding: calc(var(--u) * 16) calc(var(--u) * 18); display: flex; flex-direction: column; gap: calc(var(--u) * 10); box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 12) rgba(20,20,30,.05); }
#mg-condividi.f3 .mail { opacity: 0; transform: translateX(calc(var(--u) * -24)); }
#mg-condividi .mail .r { font-size: calc(var(--u) * 12.5); color: var(--fh-grigio); padding-bottom: calc(var(--u) * 8); border-bottom: 1px solid #eef0f3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mg-condividi .mail .r b { color: var(--fh-ink); font-weight: 500; }
#mg-condividi .mail p { margin: 0; font-size: calc(var(--u) * 13); line-height: 1.5; color: #3d434f; }
#mg-condividi .anlink { display: flex; align-items: center; gap: calc(var(--u) * 10); border-radius: calc(var(--u) * 10); background: #F5F6F8; padding: calc(var(--u) * 8); }
#mg-condividi .anlink .sw { width: calc(var(--u) * 42); height: calc(var(--u) * 42); border-radius: calc(var(--u) * 7); flex: none; }
#mg-condividi .anlink b { display: block; font-size: calc(var(--u) * 13); font-weight: 600; }
#mg-condividi .anlink small { display: block; font-size: calc(var(--u) * 11.5); color: var(--fh-grigio); margin-top: calc(var(--u) * 2); }
#mg-condividi .anlink .apri { margin-left: auto; font-size: calc(var(--u) * 12); color: var(--fh-bronzo); font-weight: 500; white-space: nowrap; padding-right: calc(var(--u) * 4); }
#mg-condividi .wa { background: #F3EEE7; opacity: 0; transform: translateX(calc(var(--u) * 24)); display: flex; flex-direction: column; }
#mg-condividi.f3 .wa { opacity: 1; transform: none; }
#mg-condividi .wa .top { display: flex; align-items: center; gap: calc(var(--u) * 8); background: #fff; padding: calc(var(--u) * 9) calc(var(--u) * 12); font-size: calc(var(--u) * 13); }
#mg-condividi .wa .top .av { width: calc(var(--u) * 28); height: calc(var(--u) * 28); font-size: calc(var(--u) * 10); }
#mg-condividi .wa .top small { display: block; font-size: calc(var(--u) * 11); color: var(--fh-grigio); }
#mg-condividi .wa .chat { flex: 1; padding: calc(var(--u) * 12); display: flex; flex-direction: column; justify-content: flex-end; gap: calc(var(--u) * 8); }
#mg-condividi .data { align-self: center; font-size: calc(var(--u) * 10.5); color: #8b8f97; background: rgba(255,255,255,.7); padding: calc(var(--u) * 3) calc(var(--u) * 10); border-radius: 999px; margin-bottom: auto; }
#mg-condividi .bolla { max-width: 78%; border-radius: calc(var(--u) * 12); padding: calc(var(--u) * 6); font-size: calc(var(--u) * 12.5); line-height: 1.35; box-shadow: 0 1px 1px rgba(0,0,0,.05); }
#mg-condividi .bolla.mia { align-self: flex-end; background: #FBE6D1; border-bottom-right-radius: calc(var(--u) * 3); transform-origin: 100% 100%; }
#mg-condividi .bolla .anlink { background: rgba(255,255,255,.65); }
#mg-condividi .bolla .txt { padding: calc(var(--u) * 6) calc(var(--u) * 4) 0; }
#mg-condividi .bolla .ora { display: flex; justify-content: flex-end; align-items: center; gap: calc(var(--u) * 3); font-size: calc(var(--u) * 10); color: #8b8f97; margin-top: calc(var(--u) * 2); }
#mg-condividi .spunte { position: relative; width: calc(var(--u) * 16); height: calc(var(--u) * 11); }
#mg-condividi .spunte svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .4s var(--mg-ease); }
#mg-condividi .spunte .letto { opacity: 0; }
#mg-condividi.f5 .spunte .letto { opacity: 1; } #mg-condividi.f5 .spunte .grigie { opacity: 0; }
#mg-condividi .risposta { display: grid; align-self: flex-start; max-width: 80%; }
#mg-condividi .risposta > * { grid-area: 1 / 1; }
#mg-condividi .sua { background: #fff; border-bottom-left-radius: calc(var(--u) * 3); padding: calc(var(--u) * 7) calc(var(--u) * 10); transform-origin: 0 100%; max-width: none; }
#mg-condividi .scrive { align-self: start; justify-self: start; background: #fff; border-radius: calc(var(--u) * 12); padding: calc(var(--u) * 9) calc(var(--u) * 11); display: flex; gap: calc(var(--u) * 4); }
#mg-condividi .scrive i { width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 50%; background: #b9bdc5; }
#mg-condividi.f6 .scrive i { animation: s9-punti 1s ease-in-out infinite; }
#mg-condividi.f6 .scrive i:nth-child(2) { animation-delay: .15s; } #mg-condividi.f6 .scrive i:nth-child(3) { animation-delay: .3s; }
@keyframes s9-punti { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(calc(var(--u) * -3)); opacity: 1; } }
#mg-condividi.f7 .scrive { opacity: 0; transition-delay: 0s; }
@container (max-width: 440px) {
  #mg-condividi .pan { padding: calc(var(--u) * 10); gap: calc(var(--u) * 8); }
  #mg-condividi .barra-c { flex-direction: column; align-items: stretch; gap: calc(var(--u) * 6); }
  #mg-condividi .seg { width: 100%; height: calc(var(--u) * 34); }
  #mg-condividi .priv { font-size: calc(var(--u) * 11); }
  #mg-condividi .anlink .apri { display: none; }
  #mg-condividi .mail { padding: calc(var(--u) * 10) calc(var(--u) * 12); gap: calc(var(--u) * 6); }
  #mg-condividi .mail p { font-size: calc(var(--u) * 12); }
  #mg-condividi .anlink .sw { width: calc(var(--u) * 34); height: calc(var(--u) * 34); }
  #mg-condividi .wa .top { padding: calc(var(--u) * 6) calc(var(--u) * 10); }
  #mg-condividi .wa .chat { padding: calc(var(--u) * 8); gap: calc(var(--u) * 6); }
  #mg-condividi .data { display: none; }
  #mg-condividi .bolla { font-size: calc(var(--u) * 11.5); max-width: 86%; }
}

/* ----- Come funziona 4 · Analizza: andamento ed export ----- */

#mg-analizza .kpi { --y: 20; --w: 176; --h: 92; --cy: 8; --cw: 156; --ch: 70; padding: calc(var(--u) * 14) calc(var(--u) * 16); display: flex; flex-direction: column; gap: calc(var(--u) * 4); }
#mg-analizza .kpi b { font-size: calc(var(--u) * 28); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
#mg-analizza .kpi small { font-size: calc(var(--u) * 11.5); color: #3fa96b; font-weight: 500; }
#mg-analizza .graf { --x: 20; --y: 128; --w: 560; --h: 236; --cx: 8; --cy: 86; --cw: 324; --ch: 146; padding: calc(var(--u) * 14) calc(var(--u) * 16); display: flex; flex-direction: column; gap: calc(var(--u) * 8); }
#mg-analizza .graf .testa { display: flex; justify-content: space-between; align-items: center; }
#mg-analizza .area { position: relative; flex: 1; overflow: hidden; }
/* Le candele: una per giorno, crescono dal basso una dopo l'altra (scaleY) */
#mg-analizza .candele { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 1.6%; padding-top: calc(var(--u) * 26); }
#mg-analizza .candele::before { content: ""; position: absolute; inset: calc(var(--u) * 26) 0 0; background: repeating-linear-gradient(to bottom, #eef0f3 0 1px, transparent 1px 25%); pointer-events: none; }
#mg-analizza .candele i { position: relative; flex: 1; height: var(--h); border-radius: calc(var(--u) * 4) calc(var(--u) * 4) calc(var(--u) * 2) calc(var(--u) * 2); background: var(--fh-frosted);
  transform: scaleY(0); transform-origin: 50% 100%; transition: transform .9s var(--mg-ease) var(--d); }
#mg-analizza .candele i.oggi { background: var(--fh-bronzo); }
#mg-analizza.f3 .candele i { transform: none; }
#mg-analizza .tip { position: absolute; right: 0; top: 0; background: var(--fh-ink); color: #fff; font-size: calc(var(--u) * 11); padding: calc(var(--u) * 4) calc(var(--u) * 9); border-radius: calc(var(--u) * 7); white-space: nowrap; }
#mg-analizza .esp { --x: 20; --y: 380; --w: 560; --h: 64; --cx: 8; --cy: 240; --cw: 324; --ch: 52; display: flex; align-items: center; gap: calc(var(--u) * 12); padding: 0 calc(var(--u) * 12) 0 calc(var(--u) * 16); }
#mg-analizza .esp .file { position: relative; flex: 1; min-width: 0; height: 100%; }
#mg-analizza .esp .file > div { position: absolute; inset: 0; display: flex; align-items: center; gap: calc(var(--u) * 10); transition: opacity .4s var(--mg-ease), transform .6s var(--mg-ease); }
#mg-analizza .esp .file .ic { width: calc(var(--u) * 34); height: calc(var(--u) * 34); border-radius: calc(var(--u) * 8); background: #FBEBDC; color: var(--fh-bronzo); display: grid; place-items: center; flex: none; }
#mg-analizza .esp .file b { display: block; font-size: calc(var(--u) * 13); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mg-analizza .esp .file small { display: block; font-size: calc(var(--u) * 11); color: var(--fh-grigio); white-space: nowrap; }
#mg-analizza .esp .file .dopo { opacity: 0; transform: translateY(calc(var(--u) * 10)); }
#mg-analizza.f6 .esp .file .prima { opacity: 0; transform: translateY(calc(var(--u) * -10)); }
#mg-analizza.f6 .esp .file .dopo { opacity: 1; transform: none; }
#mg-analizza .esp .bt { height: calc(var(--u) * 38); width: calc(var(--u) * 150); flex: none; }
#mg-analizza.f6 .esp .bt .prima { opacity: 0; transform: translateY(-100%); }
#mg-analizza.f6 .esp .bt .dopo { opacity: 1; transform: none; }
@container (max-width: 440px) {
  #mg-analizza .kpi { padding: calc(var(--u) * 10) calc(var(--u) * 12); gap: calc(var(--u) * 2); }
  #mg-analizza .kpi b { font-size: calc(var(--u) * 22); }
  #mg-analizza .graf { padding: calc(var(--u) * 10) calc(var(--u) * 12); gap: calc(var(--u) * 6); }
  #mg-analizza .graf .testa .pill { display: none; }
  #mg-analizza .esp { padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 10); gap: calc(var(--u) * 8); }
  #mg-analizza .esp .file .ic { width: calc(var(--u) * 28); height: calc(var(--u) * 28); }
  #mg-analizza .esp .bt { width: calc(var(--u) * 104); height: calc(var(--u) * 32); font-size: calc(var(--u) * 12); }
}

/* =========================================================
   Sezione "La piattaforma": interessi, controllo accessi, visite nel tempo
   ========================================================= */

/* Tela a misura di ciascuna scena (la base comune e' 600x464) */
[data-pf-media] .mg-box .mg-contenuto { --bw: var(--bw-l); --bh: var(--bh-l); }
@container (max-width: 440px) { [data-pf-media] .mg-box .mg-contenuto { --bw: 340; --bh: 300; } }
[data-pf-media] .mg-scena { background: #F4F5F8; border-radius: 0; }
[data-pf-media] .mg-scena.scura { background: radial-gradient(120% 90% at 85% 15%, #3a2a20 0%, #1b1a1c 45%, #121214 100%); color: #f5f5f5; }
[data-pf-media] .logo { display: block; height: calc(var(--u) * 17); width: auto; }

/* A · Notifiche in tempo reale */
#mg-interessi .notif { --x: 30; --w: 410; --h: 70; --cx: 14; --cw: 312; --ch: 62;
  display: flex; align-items: center; gap: calc(var(--u) * 12); padding: 0 calc(var(--u) * 16);
  opacity: 0; transform: translateY(calc(var(--u) * -40)) scale(.96);
  transition: opacity .6s var(--mg-ease), transform .9s var(--mg-ease); }
#mg-interessi .notif .av { width: calc(var(--u) * 36); height: calc(var(--u) * 36); font-size: calc(var(--u) * 12); }
#mg-interessi .notif p { margin: 0; font-size: calc(var(--u) * 13); line-height: 1.35; color: #3d434f; min-width: 0; flex: 1; }
#mg-interessi .notif p b { color: var(--fh-ink); font-weight: 600; }
#mg-interessi .notif small { display: block; font-size: calc(var(--u) * 11); color: #9aa1ad; margin-top: calc(var(--u) * 2); }
#mg-interessi .notif .tipo { width: calc(var(--u) * 34); height: calc(var(--u) * 34); border-radius: 50%; display: grid; place-items: center; flex: none; }
#mg-interessi .notif .tipo .ico { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
#mg-interessi .t-cuore { background: #FBEBDC; color: #c0533b; }
#mg-interessi .t-camp { background: #E8EEFB; color: #3557a8; }
#mg-interessi .testa-n { --x: 30; --y: 24; --w: 410; --h: 30; --cx: 14; --cy: 12; --cw: 312; --ch: 26; display: flex; align-items: center; justify-content: space-between; }
#mg-interessi .testa-n .live { display: flex; align-items: center; gap: calc(var(--u) * 6); font-size: calc(var(--u) * 11.5); color: #3fa96b; font-weight: 500; }
#mg-interessi .testa-n .live i { width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: 50%; background: #3fa96b; animation: i-pulsa 1.6s ease-in-out infinite; }
@keyframes i-pulsa { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

#mg-interessi.f2 .n0 { opacity: 1; transform: translateY(calc(0 * var(--u))); }
@container (max-width: 440px) { #mg-interessi.f2 .n0 { transform: translateY(calc(0 * var(--u))); } }
#mg-interessi.f3 .n0 { opacity: 1; transform: translateY(calc(82 * var(--u))); }
@container (max-width: 440px) { #mg-interessi.f3 .n0 { transform: translateY(calc(62 * var(--u))); } }
#mg-interessi.f4 .n0 { opacity: 1; transform: translateY(calc(164 * var(--u))); }
@container (max-width: 440px) { #mg-interessi.f4 .n0 { transform: translateY(calc(124 * var(--u))); } }
#mg-interessi.f5 .n0 { opacity: 0.45; transform: translateY(calc(246 * var(--u))); }
@container (max-width: 440px) { #mg-interessi.f5 .n0 { transform: translateY(calc(186 * var(--u))); } }
#mg-interessi.f6 .n0 { opacity: 0; transform: translateY(calc(286 * var(--u))) scale(.96); }
@container (max-width: 440px) { #mg-interessi.f6 .n0 { transform: translateY(calc(216 * var(--u))) scale(.96); } }
#mg-interessi.f3 .n1 { opacity: 1; transform: translateY(calc(0 * var(--u))); }
@container (max-width: 440px) { #mg-interessi.f3 .n1 { transform: translateY(calc(0 * var(--u))); } }
#mg-interessi.f4 .n1 { opacity: 1; transform: translateY(calc(82 * var(--u))); }
@container (max-width: 440px) { #mg-interessi.f4 .n1 { transform: translateY(calc(62 * var(--u))); } }
#mg-interessi.f5 .n1 { opacity: 1; transform: translateY(calc(164 * var(--u))); }
@container (max-width: 440px) { #mg-interessi.f5 .n1 { transform: translateY(calc(124 * var(--u))); } }
#mg-interessi.f6 .n1 { opacity: 0.45; transform: translateY(calc(246 * var(--u))); }
@container (max-width: 440px) { #mg-interessi.f6 .n1 { transform: translateY(calc(186 * var(--u))); } }
#mg-interessi.f4 .n2 { opacity: 1; transform: translateY(calc(0 * var(--u))); }
@container (max-width: 440px) { #mg-interessi.f4 .n2 { transform: translateY(calc(0 * var(--u))); } }
#mg-interessi.f5 .n2 { opacity: 1; transform: translateY(calc(82 * var(--u))); }
@container (max-width: 440px) { #mg-interessi.f5 .n2 { transform: translateY(calc(62 * var(--u))); } }
#mg-interessi.f6 .n2 { opacity: 1; transform: translateY(calc(164 * var(--u))); }
@container (max-width: 440px) { #mg-interessi.f6 .n2 { transform: translateY(calc(124 * var(--u))); } }
#mg-interessi.f5 .n3 { opacity: 1; transform: translateY(calc(0 * var(--u))); }
@container (max-width: 440px) { #mg-interessi.f5 .n3 { transform: translateY(calc(0 * var(--u))); } }
#mg-interessi.f6 .n3 { opacity: 1; transform: translateY(calc(82 * var(--u))); }
@container (max-width: 440px) { #mg-interessi.f6 .n3 { transform: translateY(calc(62 * var(--u))); } }
#mg-interessi.f6 .n4 { opacity: 1; transform: translateY(calc(0 * var(--u))); }
@container (max-width: 440px) { #mg-interessi.f6 .n4 { transform: translateY(calc(0 * var(--u))); } }

#mg-accessi .side { --x: 10; --y: 10; --w: 150; --h: 352; padding: calc(var(--u) * 14) calc(var(--u) * 10); display: flex; flex-direction: column; gap: calc(var(--u) * 2); }
#mg-accessi .side .logo { margin: 0 calc(var(--u) * 6) calc(var(--u) * 12); height: calc(var(--u) * 18); align-self: flex-start; }
#mg-accessi .side .sez { font-size: calc(var(--u) * 8); letter-spacing: .08em; color: #8b919c; font-weight: 600; margin: calc(var(--u) * 8) calc(var(--u) * 6) calc(var(--u) * 3); }
#mg-accessi .side .vo { position: relative; display: flex; align-items: center; gap: calc(var(--u) * 8); padding: calc(var(--u) * 6) calc(var(--u) * 8); border-radius: calc(var(--u) * 8); font-size: calc(var(--u) * 11); color: #2f343d; white-space: nowrap; }
#mg-accessi .side .vo .ico { width: calc(var(--u) * 13); height: calc(var(--u) * 13); color: #6b717c; }
#mg-accessi .side .vo em { margin-left: auto; font-style: normal; font-size: calc(var(--u) * 10); color: #4b5260; font-variant-numeric: tabular-nums; }
#mg-accessi .side .vo.att::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #FBEBDC; opacity: 0; transition: opacity .5s var(--mg-ease) .4s; }
#mg-accessi.f1 .side .vo.att::before { opacity: 1; }
#mg-accessi .side .vo > * { position: relative; }
#mg-accessi .side .piede { margin-top: auto; display: flex; align-items: center; gap: calc(var(--u) * 8); padding: 0 calc(var(--u) * 6); font-size: calc(var(--u) * 10); font-weight: 600; white-space: nowrap; }
#mg-accessi .side .piede i { width: calc(var(--u) * 22); height: calc(var(--u) * 22); border-radius: calc(var(--u) * 6); background: #F3EDE4; display: grid; place-items: center; font-size: calc(var(--u) * 8.5); font-style: normal; font-weight: 700; flex: none; }
#mg-accessi .bar { --x: 170; --y: 10; --w: 510; --h: 36; display: flex; align-items: center; gap: calc(var(--u) * 10); padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 14); font-size: calc(var(--u) * 11); }
#mg-accessi .bar .bric { color: #6b717c; white-space: nowrap; } #mg-accessi .bar .bric b { color: var(--fh-ink); font-weight: 500; }
#mg-accessi .bar .cerca { margin-left: auto; display: flex; align-items: center; gap: calc(var(--u) * 7); height: calc(var(--u) * 24); width: calc(var(--u) * 210); padding: 0 calc(var(--u) * 10); border-radius: calc(var(--u) * 7); background: #F3F4F6; color: #8b919c; font-size: calc(var(--u) * 10.5); white-space: nowrap; overflow: hidden; }
#mg-accessi .bar .cerca .ico { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }
#mg-accessi .titolo { --x: 172; --y: 58; --w: 508; --h: 30; display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 10); }
#mg-accessi .titolo h4 { margin: 0; font-size: calc(var(--u) * 20); font-weight: 650; letter-spacing: -.02em; white-space: nowrap; }
#mg-accessi .titolo .bt { height: calc(var(--u) * 28); padding: 0 calc(var(--u) * 14); font-size: calc(var(--u) * 11); border-radius: calc(var(--u) * 8); }
#mg-accessi .titolo .bt .ico { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }
#mg-accessi .tab { --x: 170; --y: 98; --w: 510; --h: 264; overflow: hidden; }
/* colonne a misura fissa per azienda, data e azioni: niente testi schiacciati */
#mg-accessi .riga { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--u) * 86) calc(var(--u) * 66) calc(var(--u) * 86); align-items: center; column-gap: calc(var(--u) * 12); padding: calc(var(--u) * 9) calc(var(--u) * 14); border-bottom: 1px solid #eef0f3; font-size: calc(var(--u) * 10.5); color: #3d434f; }
#mg-accessi .riga.int { padding-top: calc(var(--u) * 10); padding-bottom: calc(var(--u) * 10); }
#mg-accessi .riga.int span { font-size: calc(var(--u) * 8); letter-spacing: .07em; color: #7b818c; font-weight: 600; white-space: nowrap; }
#mg-accessi .nome { min-width: 0; }
#mg-accessi .nome b { display: flex; align-items: center; gap: calc(var(--u) * 5); font-size: calc(var(--u) * 11.5); font-weight: 600; color: var(--fh-ink); margin-bottom: calc(var(--u) * 5); white-space: nowrap; }
#mg-accessi .nome b .ico { width: calc(var(--u) * 10); height: calc(var(--u) * 10); color: #9aa1ad; }
#mg-accessi .tags { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 4); }
#mg-accessi .tags i { font-style: normal; font-size: calc(var(--u) * 8.5); padding: calc(var(--u) * 2) calc(var(--u) * 7); border-radius: 999px; white-space: nowrap; border: 1px solid; flex: none; }
#mg-accessi .tg-c { color: #3557a8; background: #EEF3FD; border-color: #C9D8F6 !important; }
#mg-accessi .tg-p { color: #8A5A2B; background: #FDF3DD; border-color: #F0D9A2 !important; }
#mg-accessi .tg-r { color: #7b4aa3; background: #F4EEFB; border-color: #DCCBF0 !important; }
#mg-accessi .tg-n { color: #4b5260; background: #F3F4F6; border-color: #E3E6EB !important; }
#mg-accessi .az, #mg-accessi .dt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mg-accessi .azioni { display: flex; align-items: center; justify-content: flex-end; gap: calc(var(--u) * 6); }
#mg-accessi .azioni .bt { width: calc(var(--u) * 28); height: calc(var(--u) * 28); flex: none; border-radius: calc(var(--u) * 8); padding: 0; }
#mg-accessi .azioni .bt .ico { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
#mg-accessi .azioni > .ico { width: calc(var(--u) * 13); height: calc(var(--u) * 13); color: #9aa1ad; flex: none; }
/* I tag compaiono uno alla volta */
#mg-accessi .tags i { opacity: 0; transform: scale(.7); transition: opacity .35s var(--mg-ease) var(--dt), transform .5s var(--mg-ease) var(--dt); }
#mg-accessi.f3 .tags i { opacity: 1; transform: none; }
#mg-accessi .recupera .dopo { background: #EAF6EE; color: #2f7d4e; }
#mg-accessi.f5 .recupera.sel .prima { opacity: 0; transform: translateY(-100%); }
#mg-accessi.f5 .recupera.sel .dopo { opacity: 1; transform: none; }
#mg-accessi .toast { --x: 300; --y: 318; --w: 250; --h: 34; --cx: 50; --cy: 256; --cw: 240; --ch: 32; z-index: 8;
  background: var(--fh-ink); color: #fff; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 11.5); white-space: nowrap;
  box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 24) rgba(0,0,0,.2); }
#mg-accessi .toast .ico { color: var(--fh-frosted); width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
#mg-accessi .toast.t2 { opacity: 0; }
#mg-accessi.f7 .toast.t1 { opacity: 0; transform: translateY(calc(var(--u) * 10)); transition-delay: 0s; }
@container (max-width: 440px) {
  #mg-accessi .side, #mg-accessi .bar { display: none; }
  #mg-accessi .titolo { --cx: 10; --cy: 10; --cw: 320; --ch: 30; }
  #mg-accessi .titolo h4 { font-size: calc(var(--u) * 18); }
  #mg-accessi .tab { --cx: 10; --cy: 50; --cw: 320; --ch: 240; }
  #mg-accessi .riga { grid-template-columns: minmax(0, 1fr) calc(var(--u) * 82); padding: calc(var(--u) * 9) calc(var(--u) * 10); }
  #mg-accessi .riga > .az, #mg-accessi .riga > .dt { display: none; }
  #mg-accessi .azioni > .ico { display: none; }
}

#mg-accessi.f7 .toast.t2 { opacity: 1; transform: none; }
#mg-visite .asse span { position: absolute; font-size: calc(var(--u) * 11); color: #8b919c; font-variant-numeric: tabular-nums; }
#mg-visite .gl { position: absolute; height: 0; border-top: 1px dashed #dfe2e7; }
#mg-visite .ylab { position: absolute; font-size: calc(var(--u) * 11); color: #8b919c; transform: rotate(-90deg); transform-origin: 0 0; }
#mg-visite .seg { position: absolute; transform: scaleY(0); transform-origin: 50% 100%; transition: transform .8s var(--mg-ease) var(--d); border: 1px solid; border-bottom: 0; }
#mg-visite .s-c { background: #C9DBFB; border-color: #9DBCF5; border-radius: 0; }
#mg-visite .s-p { background: #F8E59A; border-color: #EBCB5E; }
#mg-visite .s-r { background: #DDD6F8; border-color: #BFB2EF; border-radius: calc(var(--u) * 3) calc(var(--u) * 3) 0 0; }
#mg-visite.f2 .s-c, #mg-visite.f3 .s-p, #mg-visite.f4 .s-r { transform: none; }
#mg-visite .xlab { position: absolute; font-size: calc(var(--u) * 9.5); color: #8b919c; text-align: center; font-variant-numeric: tabular-nums; }
#mg-visite .leg { --x: 380; --y: 336; --w: 300; --h: 22; --cx: 30; --cy: 274; --cw: 300; --ch: 20; display: flex; justify-content: flex-end; gap: calc(var(--u) * 14); font-size: calc(var(--u) * 11.5); }
#mg-visite .leg span { display: flex; align-items: center; gap: calc(var(--u) * 6); }
#mg-visite .leg i { width: calc(var(--u) * 16); height: calc(var(--u) * 11); border-radius: calc(var(--u) * 2); border: 1px solid; }
/* fascia di evidenza e riquadro con i numeri del giorno */
#mg-visite .fascia { background: rgba(197, 200, 250, .28); opacity: 0; transition: opacity .4s var(--mg-ease), transform .9s var(--mg-ease); }
#mg-visite .tip { z-index: 4; background: #fff; border-radius: calc(var(--u) * 12); border: 1px solid #e3e6eb; box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 22) rgba(20,20,30,.1); padding: calc(var(--u) * 10) calc(var(--u) * 14); transition: opacity .4s var(--mg-ease), transform .9s var(--mg-ease); }
#mg-visite .tip .vista { position: absolute; inset: calc(var(--u) * 10) calc(var(--u) * 14); display: flex; flex-direction: column; gap: calc(var(--u) * 4); font-size: calc(var(--u) * 12); transition: opacity .35s var(--mg-ease); }
#mg-visite .tip .giorno { color: #6b717c; margin-bottom: calc(var(--u) * 2); }
#mg-visite .tip .tc { color: #3557a8; } #mg-visite .tip .tp { color: #8A5A2B; } #mg-visite .tip .tr { color: #7b4aa3; }
#mg-visite .tip .tot { border-top: 1px solid #eef0f3; padding-top: calc(var(--u) * 5); margin-top: calc(var(--u) * 2); font-weight: 700; }
#mg-visite .tip .v2 { opacity: 0; }
#mg-visite.f6 .tip .v1 { opacity: 0; } #mg-visite.f6 .tip .v2 { opacity: 1; }
#mg-visite.f5 .fascia { opacity: 1; }

#mg-visite.f6 .fascia { transform: translateX(calc(-186.6 * var(--u))); }
#mg-visite.f6 .tip { transform: translateX(calc(-186.6 * var(--u))); }
@container (max-width: 440px) {
  #mg-visite.f6 .fascia { transform: translateX(calc(-89.4 * var(--u))); }
  #mg-visite.f6 .tip { transform: translateX(calc(-89.4 * var(--u))); }
  #mg-visite .tip .vista { font-size: calc(var(--u) * 10.5); inset: calc(var(--u) * 8) calc(var(--u) * 10); gap: calc(var(--u) * 2); }
  #mg-visite .xlab { font-size: calc(var(--u) * 9.5); }
  #mg-visite .leg { font-size: calc(var(--u) * 10.5); gap: calc(var(--u) * 10); justify-content: center; }
}
/* =========================================================
   Sezione "Vantaggi": mini scene delle card e telefono
   ========================================================= */

/* ---------- Mini scene delle card: tela 262 x 132, scala solo per stare nel riquadro ---------- */
.mg-mini { height: 100%; container-type: size; background: #F4F5F8; border-radius: 14px; }
.mg-mini .mg-contenuto { display: grid; place-items: center; --u: min(calc(100cqw / 262), calc(100cqh / 132)); }
.mg-mini .tela { position: relative; width: calc(262 * var(--u)); height: calc(132 * var(--u)); }
.mg-mini .mg-cursore, .mg-tel .mg-cursore { transform: translate(calc(280 * var(--u)), calc(150 * var(--u))); }
:is(.mg-mini, .mg-tel) .ab { position: absolute; left: calc(var(--x, 0) * var(--u)); top: calc(var(--y, 0) * var(--u)); width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); }
:is(.mg-mini, .mg-tel) .pnl { background: #fff; border-radius: calc(var(--u) * 10); box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 10) rgba(20,20,30,.07), 0 0 0 1px rgba(20,20,30,.04); }
:is(.mg-mini, .mg-tel) .ico { display: block; width: calc(var(--u) * 13); height: calc(var(--u) * 13); flex: none; }
:is(.mg-mini, .mg-tel) .av { width: calc(var(--u) * 26); height: calc(var(--u) * 26); border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: calc(var(--u) * 9.5); font-weight: 600; font-style: normal; flex: none; }
:is(.mg-mini, .mg-tel) .a1 { background: #5b6b8c; } :is(.mg-mini, .mg-tel) .a2 { background: #8a5a2b; } :is(.mg-mini, .mg-tel) .a3 { background: #6c7a5c; } :is(.mg-mini, .mg-tel) .a4 { background: #7d5c74; }
:is(.mg-mini, .mg-tel) .t9 { font-size: calc(var(--u) * 9); } :is(.mg-mini, .mg-tel) .t10 { font-size: calc(var(--u) * 10); } :is(.mg-mini, .mg-tel) .t11 { font-size: calc(var(--u) * 11); } :is(.mg-mini, .mg-tel) .t12 { font-size: calc(var(--u) * 12); }
:is(.mg-mini, .mg-tel) .gr { color: #7b818c; } :is(.mg-mini, .mg-tel) .bz { color: var(--fh-bronzo); } :is(.mg-mini, .mg-tel) b { font-weight: 600; }
:is(.mg-mini, .mg-tel) .riga-f { display: flex; align-items: center; gap: calc(var(--u) * 7); }
/* dito (tocco su telefono): un cerchio che preme */
:is(.mg-mini, .mg-tel) .dito { position: absolute; width: calc(var(--u) * 18); height: calc(var(--u) * 18); border-radius: 50%; background: rgba(26,26,28,.28); border: calc(var(--u) * 2) solid rgba(255,255,255,.8); opacity: 0; z-index: 9; }

/* ===== 1 · Tessuti e cartelle colore ===== */
/* A · cartella colore a ventaglio */
#mg-v-tessuti .st { --x: 114; --y: 18; --w: 34; --h: 100; background: #fff; border-radius: calc(var(--u) * 5); padding: calc(var(--u) * 3); box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 8) rgba(0,0,0,.12); transform-origin: 50% 94%; opacity: 0; transform: translateY(calc(var(--u) * 20)); transition: opacity .5s var(--mg-ease) var(--d), transform 1s var(--mg-ease) var(--d); }
#mg-v-tessuti .st i { display: block; height: 76%; border-radius: calc(var(--u) * 3); }
#mg-v-tessuti.f1 .st { opacity: 1; transform: none; }
#mg-v-tessuti.f2 .st { transform: rotate(var(--r)); }
#mg-v-tessuti.f4 .st.sc { transform: rotate(var(--r)) translateY(calc(var(--u) * -12)) scale(1.08); z-index: 3; }
#mg-v-tessuti .lab { --x: 72; --y: 104; --w: 118; --h: 22; z-index: 4; background: var(--fh-ink); color: #fff; border-radius: 999px; display: flex; align-items: center; justify-content: center; }
/* B · griglia che si apre */
/* C · ricerca */

/* ===== 2 · Zero PDF pesanti ===== */
/* A · il PDF che non parte diventa un link */
#mg-v-pdf .pdf { --x: 31; --y: 22; --w: 200; --h: 46; display: flex; align-items: center; gap: calc(var(--u) * 9); padding: 0 calc(var(--u) * 10); transition: opacity .5s var(--mg-ease), transform .7s var(--mg-ease); }
#mg-v-pdf .pdf .doc { width: calc(var(--u) * 24); height: calc(var(--u) * 30); border-radius: calc(var(--u) * 4); background: #c8463b; color: #fff; display: grid; place-items: center; font-size: calc(var(--u) * 7.5); font-weight: 700; flex: none; }
#mg-v-pdf .bar { --x: 31; --y: 80; --w: 200; --h: 6; border-radius: 999px; background: #e6e8ec; overflow: hidden; transition: opacity .4s; }
#mg-v-pdf .bar i { display: block; height: 100%; background: #c8463b; transform: scaleX(0); transform-origin: 0 50%; transition: transform 2.2s cubic-bezier(.2,.7,.2,1); }
#mg-v-pdf.f2 .bar i { transform: scaleX(.12); }
#mg-v-pdf .lento { --x: 31; --y: 92; --w: 200; --h: 16; transition: opacity .4s; }
#mg-v-pdf.f4 .pdf, #mg-v-pdf.f4 .bar, #mg-v-pdf.f4 .lento { opacity: 0; transform: scale(.92); }
#mg-v-pdf .link { --x: 31; --y: 40; --w: 200; --h: 52; display: flex; align-items: center; gap: calc(var(--u) * 9); padding: 0 calc(var(--u) * 12); }
#mg-v-pdf .link .ic { width: calc(var(--u) * 28); height: calc(var(--u) * 28); border-radius: 50%; background: #FBEBDC; color: var(--fh-bronzo); display: grid; place-items: center; flex: none; }
/* B · il confronto dei pesi */
/* C · l'allegato rifiutato */
@keyframes v-scuoti { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(calc(var(--u) * -4)); } 75% { transform: translateX(calc(var(--u) * 4)); } }

/* ===== 3 · Sai sempre chi vede cosa ===== */
/* A · avatar con l'occhio */
/* B · le righe dell'attivita' */
#mg-v-chi .r { --x: 14; --w: 234; --h: 30; display: flex; align-items: center; gap: calc(var(--u) * 7); padding: 0 calc(var(--u) * 8); }
#mg-v-chi .r .av { width: calc(var(--u) * 20); height: calc(var(--u) * 20); font-size: calc(var(--u) * 7.5); }
#mg-v-chi .r p { margin: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* C · il catalogo e chi l'ha visto */

/* ===== 4 · Un'immagine piu' professionale ===== */
/* A · dal disordine alla vetrina */
#mg-v-immagine .ft { --w: 46; --h: 58; border-radius: calc(var(--u) * 5); border: calc(var(--u) * 2.5) solid #fff; box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 8) rgba(0,0,0,.15);
  transform: translate(calc(var(--mx) * var(--u)), calc(var(--my) * var(--u))) rotate(var(--mr)); filter: saturate(.75) brightness(.92); opacity: 0;
  transition: opacity .5s var(--mg-ease) var(--d), transform 1.1s var(--mg-ease) var(--d2); }
#mg-v-immagine.f1 .ft { opacity: 1; }
#mg-v-immagine.f2 .ft { transform: none; }
#mg-v-immagine .testa { --x: 30; --y: 10; --w: 202; --h: 24; display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--u) * 10); }
#mg-v-immagine .badge { --x: 41; --y: 108; --w: 180; --h: 18; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 4); color: var(--fh-bronzo); }
#mg-v-immagine .badge .ico { width: calc(var(--u) * 11); height: calc(var(--u) * 11); }
/* B · dalla chat alla vetrina */
/* C · prima e dopo con la tendina */
/* la vetrina pulita si scopre da sinistra: contenitore e contenuto si spostano in versi opposti */

/* ===== 5 · Funziona anche da telefono ===== */
:is(.mg-mini, .mg-tel) .tel { background: #1a1a1c; border-radius: calc(var(--u) * 14); padding: calc(var(--u) * 4); box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 16) rgba(0,0,0,.18); }
:is(.mg-mini, .mg-tel) .tel .schermo { position: relative; width: 100%; height: 100%; border-radius: calc(var(--u) * 10); overflow: hidden; background: #fff; }
:is(.mg-mini, .mg-tel) .tel .notch { position: absolute; left: 50%; top: calc(var(--u) * 3); width: calc(var(--u) * 20); height: calc(var(--u) * 5); margin-left: calc(var(--u) * -10); border-radius: 999px; background: #1a1a1c; z-index: 3; }
/* A · lo scorrimento con il pollice */
@keyframes v-swipe { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 80% { opacity: 1; transform: translateY(calc(var(--u) * -50)); } 100% { opacity: 0; transform: translateY(calc(var(--u) * -50)); } }
@keyframes v-tap { 0% { opacity: 0; transform: scale(1.4); } 40% { opacity: 1; transform: scale(.9); } 100% { opacity: 0; transform: scale(1); } }
/* B · telefono e computer sincronizzati */
/* C · le schede che scorrono con lo swipe */
@keyframes v-sx { 0% { opacity: 0; transform: translateX(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateX(calc(var(--u) * -40)); } }
@keyframes v-sx2 { 0% { opacity: 0; transform: translateX(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateX(calc(var(--u) * -40)); } }


/* ---------- Telefono grande: tela 300 x 600 che scala per stare nella card ---------- */
.mg-tel { height: 100%; container-type: size; background: transparent; }
.mg-tel .mg-contenuto { display: grid; place-items: center; --u: min(calc(100cqw / 300), calc(100cqh / 600)); }
.mg-tel .tela { position: relative; width: calc(300 * var(--u)); height: calc(600 * var(--u)); }
.mg-tel .cornice { --x: 12; --y: 4; --w: 276; --h: 592; background: #0d0d0f; border-radius: calc(var(--u) * 46); padding: calc(var(--u) * 9); box-shadow: 0 calc(var(--u) * 20) calc(var(--u) * 50) rgba(20,20,30,.25), inset 0 0 0 calc(var(--u) * 2) #2a2a2e; }
.mg-tel .app { position: relative; width: 100%; height: 100%; border-radius: calc(var(--u) * 38); overflow: hidden; background: #121214; color: #f2f2f3; display: flex; flex-direction: column; }
.mg-tel .app.chiaro { background: #F4F5F8; color: var(--fh-ink); }
.mg-tel .isola { position: absolute; left: 50%; top: calc(var(--u) * 9); width: calc(var(--u) * 76); height: calc(var(--u) * 22); margin-left: calc(var(--u) * -38); border-radius: 999px; background: #000; z-index: 6; }
.mg-tel .stato { height: calc(var(--u) * 40); flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--u) * 22) 0 calc(var(--u) * 26); font-size: calc(var(--u) * 11); font-weight: 600; }
.mg-tel .stato i { width: calc(var(--u) * 22); height: calc(var(--u) * 9); border-radius: calc(var(--u) * 3); border: 1.5px solid currentColor; opacity: .8; }
.mg-tel .corpo { flex: 1; min-height: 0; position: relative; padding: 0 calc(var(--u) * 12) calc(var(--u) * 12); display: flex; flex-direction: column; gap: calc(var(--u) * 10); }
.mg-tel .dk { background: #1c1c1f; border: 1px solid rgba(255,255,255,.07); border-radius: calc(var(--u) * 12); }
.mg-tel .barra-app { display: flex; align-items: center; gap: calc(var(--u) * 8); padding: calc(var(--u) * 8) calc(var(--u) * 10); font-size: calc(var(--u) * 10); color: rgba(255,255,255,.7); }
.mg-tel .barra-app .men { width: calc(var(--u) * 12); height: calc(var(--u) * 8); border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; position: relative; }
.mg-tel .barra-app .men::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px solid currentColor; transform: translateY(-50%); }
.mg-tel .barra-app .ut { margin-left: auto; width: calc(var(--u) * 22); height: calc(var(--u) * 22); border-radius: calc(var(--u) * 6); background: var(--fh-frosted); color: var(--fh-ink); display: grid; place-items: center; font-size: calc(var(--u) * 8.5); font-weight: 700; }
.mg-tel h5 { margin: 0; font-size: calc(var(--u) * 17); font-weight: 650; letter-spacing: -.01em; line-height: 1.2; }
.mg-tel .sottot { font-size: calc(var(--u) * 10.5); color: rgba(255,255,255,.55); margin-top: calc(var(--u) * 3); }
.mg-tel .chiaro .sottot { color: #6b717c; }
.mg-tel .chips { display: flex; gap: calc(var(--u) * 6); }
.mg-tel .chips span { font-size: calc(var(--u) * 9.5); padding: calc(var(--u) * 5) calc(var(--u) * 9); border-radius: calc(var(--u) * 7); background: #1c1c1f; border: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.8); }
.mg-tel .kpi { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 8); }
.mg-tel .kpi > div { padding: calc(var(--u) * 10) calc(var(--u) * 11); display: flex; flex-direction: column; gap: calc(var(--u) * 3); }
.mg-tel .kpi .ic { width: calc(var(--u) * 22); height: calc(var(--u) * 22); border-radius: calc(var(--u) * 6); background: rgba(255,255,255,.08); display: grid; place-items: center; margin-bottom: calc(var(--u) * 4); }
.mg-tel .kpi .ic .ico { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }
.mg-tel .kpi small { font-size: calc(var(--u) * 8); letter-spacing: .07em; color: rgba(255,255,255,.5); font-weight: 600; }
.mg-tel .kpi b { font-size: calc(var(--u) * 22); font-weight: 650; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mg-tel .kpi em { font-style: normal; font-size: calc(var(--u) * 8.5); color: #7fcf9b; }
.mg-tel .att { padding: calc(var(--u) * 10) calc(var(--u) * 11); display: flex; flex-direction: column; gap: calc(var(--u) * 8); }
.mg-tel .att .testa { display: flex; justify-content: space-between; align-items: center; font-size: calc(var(--u) * 11); font-weight: 600; }
.mg-tel .att .testa span { font-size: calc(var(--u) * 9.5); color: var(--fh-frosted); font-weight: 500; }
.mg-tel .ev { display: flex; gap: calc(var(--u) * 8); align-items: flex-start; font-size: calc(var(--u) * 10); line-height: 1.35; }
.mg-tel .ev .av { width: calc(var(--u) * 22); height: calc(var(--u) * 22); font-size: calc(var(--u) * 7.5); }
.mg-tel .ev p { margin: 0; flex: 1; color: rgba(255,255,255,.85); }
.mg-tel .ev small { color: rgba(255,255,255,.45); font-size: calc(var(--u) * 9); }
/* notifica che scende dall'alto */
.mg-tel .notifica { --x: 26; --y: 18; --w: 248; --h: 52; z-index: 8; background: rgba(40,40,44,.96); color: #fff; border-radius: calc(var(--u) * 16); display: flex; align-items: center; gap: calc(var(--u) * 9); padding: 0 calc(var(--u) * 12); font-size: calc(var(--u) * 10); line-height: 1.3; box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 24) rgba(0,0,0,.35); }
.mg-tel .notifica .lg { width: calc(var(--u) * 28); height: calc(var(--u) * 28); border-radius: calc(var(--u) * 7); background: var(--fh-frosted); color: var(--fh-ink); display: grid; place-items: center; font-weight: 700; font-size: calc(var(--u) * 9); flex: none; }

/* B · azienda e buyer */

/* C · il buyer sfoglia e chiede il campione (app chiara) */

/* Telefono Vantaggi: blindatura contro gli stili del tema (h5, p, small) */
.mg-tel .app h5 { color: inherit; font-family: inherit; }
.mg-tel .app p, .mg-tel .app small, .mg-tel .app span { font-family: inherit; letter-spacing: normal; }
.mg-tel .ev p { font-size: calc(var(--u) * 10); line-height: 1.35; margin: 0; }
.mg-mini p { margin: 0; }

/* Vantaggi · card 5 "Funziona anche da telefono": il QR sul cartellino del campione */
#mg-v-qr .cart { --x: 18; --y: 8; --w: 104; --h: 116; background: #fff; border-radius: calc(var(--u) * 6); padding: calc(var(--u) * 7); box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 10) rgba(20,20,30,.1), 0 0 0 1px rgba(20,20,30,.04); transform: rotate(-4deg); }
#mg-v-qr .cart .foro { position: absolute; left: 50%; top: calc(var(--u) * 5); width: calc(var(--u) * 7); height: calc(var(--u) * 7); margin-left: calc(var(--u) * -3.5); border-radius: 50%; background: #F4F5F8; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
#mg-v-qr .cart .sw { display: block; height: calc(var(--u) * 46); border-radius: calc(var(--u) * 4); margin-top: calc(var(--u) * 8); }
#mg-v-qr .cart .piede { display: flex; justify-content: space-between; align-items: flex-end; margin-top: calc(var(--u) * 6); gap: calc(var(--u) * 4); }
#mg-v-qr .cart .qr { width: calc(var(--u) * 34); height: calc(var(--u) * 34); flex: none; position: relative; }
#mg-v-qr .cart .qr svg { width: 100%; height: 100%; display: block; }
#mg-v-qr .cart .qr::after { content: ""; position: absolute; inset: calc(var(--u) * -3); border-radius: calc(var(--u) * 4); box-shadow: 0 0 0 calc(var(--u) * 1.5) var(--fh-bronzo); opacity: 0; transition: opacity .3s; }
#mg-v-qr.f2 .cart .qr::after { opacity: 1; } #mg-v-qr.f3 .cart .qr::after { opacity: 0; }
#mg-v-qr .tel { --x: 160; --y: 5; --w: 72; --h: 124; }
#mg-v-qr .schermo > div { position: absolute; inset: 0; transition: opacity .45s var(--mg-ease); }
#mg-v-qr .schermo { background: #2a2a2e; }
#mg-v-qr .cam { background: #2a2a2e; opacity: 0; }
#mg-v-qr .art { background: #fff; }
#mg-v-qr.f2 .cam { opacity: 1; } #mg-v-qr.f3 .cam { opacity: 0; }
#mg-v-qr .cam .mira { position: absolute; left: 50%; top: 46%; width: calc(var(--u) * 38); height: calc(var(--u) * 38); margin: calc(var(--u) * -19) 0 0 calc(var(--u) * -19);
  background: linear-gradient(#fff,#fff) 0 0 / 22% 2px no-repeat, linear-gradient(#fff,#fff) 0 0 / 2px 22% no-repeat, linear-gradient(#fff,#fff) 100% 0 / 22% 2px no-repeat, linear-gradient(#fff,#fff) 100% 0 / 2px 22% no-repeat,
              linear-gradient(#fff,#fff) 0 100% / 22% 2px no-repeat, linear-gradient(#fff,#fff) 0 100% / 2px 22% no-repeat, linear-gradient(#fff,#fff) 100% 100% / 22% 2px no-repeat, linear-gradient(#fff,#fff) 100% 100% / 2px 22% no-repeat; }
#mg-v-qr .cam .mira svg { position: absolute; inset: 18%; width: 64%; height: 64%; opacity: .85; }
#mg-v-qr .cam .linea { position: absolute; left: 12%; right: 12%; top: 10%; height: 2px; background: var(--fh-frosted); box-shadow: 0 0 calc(var(--u) * 6) var(--fh-frosted); }
#mg-v-qr.f2 .cam .linea { animation: v-scan 1.2s ease-in-out infinite alternate; }
@keyframes v-scan { to { top: 86%; } }
#mg-v-qr .art { opacity: 0; padding: calc(var(--u) * 12) calc(var(--u) * 5) calc(var(--u) * 5); display: flex; flex-direction: column; gap: calc(var(--u) * 4); }
#mg-v-qr.f3 .art { opacity: 1; }
#mg-v-qr .art i { display: block; height: calc(var(--u) * 50); border-radius: calc(var(--u) * 5); transform: scale(.94); transition: transform .8s var(--mg-ease); }
#mg-v-qr.f3 .art i { transform: none; }
#mg-v-qr .art b { font-size: calc(var(--u) * 7.5); line-height: 1.2; }
#mg-v-qr .art small { font-size: calc(var(--u) * 6); color: #7b818c; }
#mg-v-qr .art .bt { margin-top: auto; height: calc(var(--u) * 16); border-radius: calc(var(--u) * 5); background: var(--fh-ink); color: #fff; font-size: calc(var(--u) * 6.5); display: grid; place-items: center; }
#mg-v-qr .dito { left: calc(var(--u) * 187); top: calc(var(--u) * 106); }
#mg-v-qr.f4 .dito { animation: v-tap .6s ease-out; }
#mg-v-qr .esito { --x: 8; --y: 100; --w: 124; --h: 22; z-index: 6; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 5); border-radius: 999px; background: var(--fh-ink); color: #fff; }
#mg-v-qr .esito .ico { width: calc(var(--u) * 10); height: calc(var(--u) * 10); color: var(--fh-frosted); }
#mg-v-qr .art b, #mg-v-qr .art small { display: block; font-family: inherit; letter-spacing: normal; }
#mg-v-qr .art b { font-weight: 600; color: var(--fh-ink); }
/* Telefono Vantaggi: l'ombra del telefono non deve essere tagliata dai bordi del riquadro */
.mg-tel { overflow: visible; }
.mg-tel .mg-cursore { display: none; }
/* Telefono Vantaggi: cornice di un iPhone vero (images/iphone-cornice.webp, 828x1712).
   Lo schermo dell'immagine e' gia' scuro con la barra di stato: l'app animata ci sta sopra,
   sotto la barra di stato e sopra la barretta in basso. 1 unita' = 2,76 px dell'immagine. */
.mg-tel .mg-contenuto { --u: min(calc(100cqw / 300), calc(100cqh / 620.3)); }
.mg-tel .tela { height: calc(620.3 * var(--u)); }
.mg-tel .cornice { --x: 0; --y: 0; --w: 300; --h: 620.3; background: none; padding: 0; border-radius: 0; box-shadow: none; filter: drop-shadow(0 calc(var(--u) * 14) calc(var(--u) * 20) rgba(20,20,30,.2)); }
.mg-tel .cornice .foto-iphone { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block; }
.mg-tel .cornice .app { position: absolute; left: calc(var(--u) * 12.3); right: calc(var(--u) * 12.7); top: calc(var(--u) * 46); bottom: calc(var(--u) * 30); width: auto; height: auto; background: transparent; border-radius: 0; overflow: hidden; }
/* Card 5 (QR): telefonino con la stessa cornice iPhone del telefono grande.
   images/iphone-cornice-vuota.webp ha lo schermo trasparente (resta solo l'isola):
   lo schermo animato sta sotto, la cornice sopra copre gli angoli. */
#mg-v-qr .tel { --x: 166; --y: 5; --w: 60; --h: 124; background: none; padding: 0; border-radius: 0; box-shadow: none; filter: drop-shadow(0 calc(var(--u) * 4) calc(var(--u) * 6) rgba(20,20,30,.2)); }
#mg-v-qr .tel .foto-iphone { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block; z-index: 2; pointer-events: none; }
#mg-v-qr .tel .schermo { position: absolute; left: 4%; right: 4%; top: 1.5%; bottom: 1.5%; width: auto; height: auto; border-radius: calc(var(--u) * 7); }
#mg-v-qr .art { padding-top: calc(var(--u) * 13); }
#mg-v-qr .art i { height: calc(var(--u) * 46); }
#mg-v-qr .dito { left: calc(var(--u) * 187); top: calc(var(--u) * 104); }