/* ════════════════════════════════════════════════════════════════════
   DeltaGCM · stile del sito
   Tecnico e luminoso: fondi puliti, aloni nei colori del logo, linee
   sottili, titoli in Archivo semiespanso, etichette in monospaziato.
   Le fasce scure (lavori, metodo, piè di pagina) restano scure in tutti
   e due i temi. Ogni colore è una variabile: il tema scuro ridefinisce
   le stesse variabili più sotto, i componenti usano solo quelle.
   ════════════════════════════════════════════════════════════════════ */

@font-face { font-family: "Archivo"; src: url("caratteri/archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("caratteri/jetbrains-mono.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }

@property --angolo { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  /* Fondi, superfici e testo */
  --fondo: #F6F8FB;
  --fondo-2: #EEF2F7;
  --superficie: #FFFFFF;
  --superficie-2: #F2F5F9;
  --vetro: rgba(255, 255, 255, .72);
  --inchiostro: #0A1628;
  --testo: #2A3646;
  --tenue: #5A6878;
  --bordo: #E1E7EF;
  --bordo-forte: #C8D2DE;
  /* Colori del logo: --g1 → --g2 è la sfumatura dello stemma */
  --g1: #0B4275;
  --g2: #2A8F66;
  --verde: #2F946A;
  --verde-testo: #1D7652;
  --collegamento: #1A5FA8;
  --primario-1: #0B4275;
  --primario-2: #1E7A58;
  --sul-primario: #FFFFFF;
  --alone-blu: rgba(45, 125, 210, .17);
  --alone-verde: rgba(63, 191, 138, .15);
  --selezione: rgba(51, 155, 112, .24);
  --rosso: #C2362C;
  --tratto-disegno: #2C4560;
  /* Fasce scure: uguali nei due temi */
  --fascia: #07121F;
  --fascia-2: #0D1B2C;
  --fascia-3: #13243A;
  --fascia-testo: #EEF3F9;
  --fascia-testo-2: #C3CFDC;
  --fascia-tenue: #93A5B9;
  --fascia-bordo: rgba(148, 180, 214, .14);
  --fascia-bordo-forte: rgba(148, 180, 214, .28);
  --fascia-g1: #5AA2F0;
  --fascia-g2: #45CC92;
  --fascia-verde-testo: #5FD3A0;
  --fascia-collegamento: #8EC0F5;
  --fascia-tratto: #9FB4CA;
  /* Ombre */
  --ombra: 0 1px 2px rgba(10, 22, 40, .05), 0 12px 32px -16px rgba(10, 22, 40, .22);
  --ombra-forte: 0 2px 6px rgba(10, 22, 40, .07), 0 32px 64px -28px rgba(10, 22, 40, .42);
  /* Logo */
  --logo-blu: #0B4275;
  --logo-verde: #339B70;
  --logo-testo: #0A3B68;
  --logo-motto: #5E6267;
  --fascia-logo-blu: #6AA8E8;
  --fascia-logo-verde: #4FC793;
  --fascia-logo-testo: #EEF4F9;
  --fascia-logo-motto: #93A8BC;
  /* Dispositivi delle demo */
  --cornice: #0D1826;
  --cornice-luce: rgba(255, 255, 255, .10);
  --browser-barra: #E7ECF2;
  --browser-punto: #C3CDD7;
  /* Le app dentro le demo */
  --app-fondo: #FFFFFF;
  --app-fondo-2: #F2F5F8;
  --app-testo: #14202D;
  --app-tenue: #66727F;
  --app-bordo: #E1E7EC;
  --app-ok: #1C8455;
  --app-rosso: #C8372D;
  --app-ambra: #A8690F;
  --app-scuro: #14202D;
  --app-sul-scuro: #FFFFFF;
  --app-ombra: 0 8px 22px -10px rgba(20, 32, 45, .45);
  --app-ombra-su: 0 -14px 34px -14px rgba(20, 32, 45, .38);
  --palco-fondo: #150F28;
  --palco-fondo-2: #231A40;
  --palco-testo: #F3EEFF;
  --palco-tenue: #A99ECB;
  --palco-bordo: #33285A;
  --post-fondo: #0E3528;
  --post-fondo-2: #145B42;
  --post-testo: #F2FFF8;
  --post-accento: #6FE3AE;
  --acc-marchio: #1A5FA8;
  --acc-squadre: #1C8455;
  --acc-condominio: #2756A6;
  --acc-team: #5B4AB0;
  --acc-finanza: #0C7A82;
  --acc-migrazione: #33449E;
  --acc-officina: #BC5D16;
  --acc-edile: #A8462B;
  --acc-artista: #FF5C9D;
  --acc-palestra: #C9452F;
  --sul-acc: #FFFFFF;
  /* Caratteri: un solo Archivo variabile (larghezza e peso) più un monospaziato per le etichette */
  --f-titoli: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-testo: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-dati: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  /* Misure e interruttori del tema */
  --larghezza: 1200px;
  --raggio: 18px;
  --mostra-luna: block;
  --mostra-sole: none;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #060D17; --fondo-2: #08111D; --superficie: #0C1726; --superficie-2: #102035; --vetro: rgba(12, 23, 38, .62);
    --inchiostro: #F1F5FA; --testo: #C5D1DE; --tenue: #8798AD; --bordo: rgba(148, 180, 214, .13); --bordo-forte: rgba(148, 180, 214, .26);
    --g1: #5AA2F0; --g2: #45CC92; --verde: #45CC92; --verde-testo: #5FD3A0; --collegamento: #7DB6F2;
    --primario-1: #1B63B4; --primario-2: #1B8459; --sul-primario: #FFFFFF;
    --alone-blu: rgba(45, 125, 210, .26); --alone-verde: rgba(63, 191, 138, .16);
    --selezione: rgba(79, 199, 147, .30); --rosso: #FF8577; --tratto-disegno: #9FB4CA;
    --fascia: #0A1524; --fascia-2: #0F1D30; --fascia-3: #142740;
    --ombra: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 32px -14px rgba(0, 0, 0, .7);
    --ombra-forte: 0 2px 6px rgba(0, 0, 0, .4), 0 32px 64px -24px rgba(0, 0, 0, .8);
    --logo-blu: #6AA8E8; --logo-verde: #4FC793; --logo-testo: #EEF4F9; --logo-motto: #93A8BC;
    --cornice: #1B2E45; --cornice-luce: rgba(255, 255, 255, .16); --browser-barra: #132A42; --browser-punto: #2C4B6C;
    --app-fondo: #0F1E2E; --app-fondo-2: #172B40; --app-testo: #E8F0F6; --app-tenue: #95A8BA; --app-bordo: #233A52;
    --app-ok: #4FC793; --app-rosso: #FF8577; --app-ambra: #F2B555; --app-scuro: #E8F0F6; --app-sul-scuro: #0F1E2E;
    --app-ombra: 0 8px 22px -8px rgba(0, 0, 0, .7); --app-ombra-su: 0 -14px 34px -12px rgba(0, 0, 0, .7);
    --palco-fondo: #100B20; --palco-fondo-2: #1D1636; --palco-bordo: #2E2452;
    --acc-marchio: #5AA2F0;
    --acc-squadre: #4FC793; --acc-condominio: #7DB3EE; --acc-team: #A99CF2; --acc-finanza: #4CC6CC; --acc-migrazione: #97A3F2;
    --acc-officina: #F0A060; --acc-edile: #E8906F; --acc-artista: #FF7DB5; --acc-palestra: #F58B76; --sul-acc: #07131F;
    --mostra-luna: none; --mostra-sole: block;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fondo: #060D17; --fondo-2: #08111D; --superficie: #0C1726; --superficie-2: #102035; --vetro: rgba(12, 23, 38, .62);
  --inchiostro: #F1F5FA; --testo: #C5D1DE; --tenue: #8798AD; --bordo: rgba(148, 180, 214, .13); --bordo-forte: rgba(148, 180, 214, .26);
  --g1: #5AA2F0; --g2: #45CC92; --verde: #45CC92; --verde-testo: #5FD3A0; --collegamento: #7DB6F2;
  --primario-1: #1B63B4; --primario-2: #1B8459; --sul-primario: #FFFFFF;
  --alone-blu: rgba(45, 125, 210, .26); --alone-verde: rgba(63, 191, 138, .16);
  --selezione: rgba(79, 199, 147, .30); --rosso: #FF8577; --tratto-disegno: #9FB4CA;
  --fascia: #0A1524; --fascia-2: #0F1D30; --fascia-3: #142740;
  --ombra: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 32px -14px rgba(0, 0, 0, .7);
  --ombra-forte: 0 2px 6px rgba(0, 0, 0, .4), 0 32px 64px -24px rgba(0, 0, 0, .8);
  --logo-blu: #6AA8E8; --logo-verde: #4FC793; --logo-testo: #EEF4F9; --logo-motto: #93A8BC;
  --cornice: #1B2E45; --cornice-luce: rgba(255, 255, 255, .16); --browser-barra: #132A42; --browser-punto: #2C4B6C;
  --app-fondo: #0F1E2E; --app-fondo-2: #172B40; --app-testo: #E8F0F6; --app-tenue: #95A8BA; --app-bordo: #233A52;
  --app-ok: #4FC793; --app-rosso: #FF8577; --app-ambra: #F2B555; --app-scuro: #E8F0F6; --app-sul-scuro: #0F1E2E;
  --app-ombra: 0 8px 22px -8px rgba(0, 0, 0, .7); --app-ombra-su: 0 -14px 34px -12px rgba(0, 0, 0, .7);
  --palco-fondo: #100B20; --palco-fondo-2: #1D1636; --palco-bordo: #2E2452;
  --acc-marchio: #5AA2F0;
  --acc-squadre: #4FC793; --acc-condominio: #7DB3EE; --acc-team: #A99CF2; --acc-finanza: #4CC6CC; --acc-migrazione: #97A3F2;
  --acc-officina: #F0A060; --acc-edile: #E8906F; --acc-artista: #FF7DB5; --acc-palestra: #F58B76; --sul-acc: #07131F;
  --mostra-luna: none; --mostra-sole: block;
  color-scheme: dark;
}

/* ───────── Base ───────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--testo);
  background: var(--fondo);
  font: 400 1.0625rem/1.65 var(--f-testo);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; }
a { color: inherit; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-titoli); font-stretch: 112%; color: var(--inchiostro); text-wrap: balance; }
h1 { font-size: clamp(2.35rem, 1.2rem + 4.1vw, 4.15rem); font-weight: 700; line-height: 1.03; letter-spacing: -.038em; }
h2 { font-size: clamp(1.85rem, 1.2rem + 2.3vw, 2.85rem); font-weight: 700; line-height: 1.07; letter-spacing: -.032em; }
h3 { font-size: clamp(1.2rem, 1.05rem + .55vw, 1.48rem); font-weight: 650; font-stretch: 106%; line-height: 1.22; letter-spacing: -.018em; }
h4 { font-size: 1rem; font-weight: 650; letter-spacing: -.01em; }
strong { color: var(--inchiostro); font-weight: 650; }
:focus-visible { outline: 2px solid var(--collegamento); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--selezione); color: var(--inchiostro); }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.salta { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .7rem 1rem; border-radius: 10px; background: var(--primario-1); color: var(--sul-primario); font-weight: 650; text-decoration: none; }
.salta:focus { top: 1rem; }

/* Testo in sfumatura: i colori dello stemma */
.evidenzia, .numero strong {
  color: var(--g1);
  background: linear-gradient(100deg, var(--g1) 8%, var(--g2) 92%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
@media (forced-colors: active) { .evidenzia, .numero strong { -webkit-text-fill-color: currentColor; background: none; } }

/* ───────── Struttura ───────── */
main { counter-reset: sezione; }
.contenitore { width: 100%; max-width: var(--larghezza); margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }
.sezione { padding-block: clamp(4.25rem, 8.5vw, 7.5rem); }
.piana { background: var(--fondo-2); border-block: 1px solid var(--bordo); }
.fascia {
  --inchiostro: var(--fascia-testo); --testo: var(--fascia-testo-2); --tenue: var(--fascia-tenue);
  --bordo: var(--fascia-bordo); --bordo-forte: var(--fascia-bordo-forte); --verde-testo: var(--fascia-verde-testo);
  --superficie: var(--fascia-2); --superficie-2: var(--fascia-3); --vetro: rgba(148, 180, 214, .05);
  --g1: var(--fascia-g1); --g2: var(--fascia-g2); --collegamento: var(--fascia-collegamento); --tratto-disegno: var(--fascia-tratto);
  --primario-1: #1B63B4; --primario-2: #1B8459;
  --logo-blu: var(--fascia-logo-blu); --logo-verde: var(--fascia-logo-verde); --logo-testo: var(--fascia-logo-testo); --logo-motto: var(--fascia-logo-motto);
  --ombra: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 32px -14px rgba(0, 0, 0, .7);
  --ombra-forte: 0 2px 6px rgba(0, 0, 0, .4), 0 32px 64px -24px rgba(0, 0, 0, .85);
  position: relative; isolation: isolate;
  color: var(--testo);
  background:
    radial-gradient(48% 62% at 88% 0%, rgba(45, 125, 210, .22), transparent 72%),
    radial-gradient(42% 56% at 4% 100%, rgba(63, 191, 138, .13), transparent 72%),
    var(--fascia);
  border-block: 1px solid var(--fascia-bordo);
}
.fascia ::selection { background: rgba(79, 199, 147, .3); color: var(--fascia-testo); }
.sezione-testa { display: grid; gap: 1.1rem; justify-items: start; max-width: 47rem; margin-bottom: clamp(2.5rem, 4.5vw, 3.75rem); }
.occhiello {
  display: inline-flex; align-items: center; gap: .75em;
  font: 500 .74rem/1.3 var(--f-dati); letter-spacing: .14em; text-transform: uppercase; color: var(--verde-testo);
}
/* Le sezioni sono numerate come le tavole di un progetto: 01, 02, … */
.sezione-testa > .occhiello::before, .contatti-testo > .occhiello::before {
  counter-increment: sezione; content: counter(sezione, decimal-leading-zero);
  padding: .3em .5em; border-radius: 6px; border: 1px solid var(--bordo-forte);
  color: var(--inchiostro); font-weight: 600; letter-spacing: .06em;
}
.intro { font-size: clamp(1.07rem, 1rem + .3vw, 1.2rem); line-height: 1.62; color: var(--tenue); max-width: 39em; }

/* Crocini agli angoli, come il D del logo: un riquadro di precisione */
.mirino {
  --m: 14px; --s: 1.5px; --c: color-mix(in srgb, var(--g1) 55%, var(--bordo-forte));
  background:
    linear-gradient(var(--c) 0 0) left top / var(--m) var(--s), linear-gradient(var(--c) 0 0) left top / var(--s) var(--m),
    linear-gradient(var(--c) 0 0) right top / var(--m) var(--s), linear-gradient(var(--c) 0 0) right top / var(--s) var(--m),
    linear-gradient(var(--c) 0 0) left bottom / var(--m) var(--s), linear-gradient(var(--c) 0 0) left bottom / var(--s) var(--m),
    linear-gradient(var(--c) 0 0) right bottom / var(--m) var(--s), linear-gradient(var(--c) 0 0) right bottom / var(--s) var(--m);
  background-repeat: no-repeat;
}

/* ───────── Logo ───────── */
.emblema, .scritta, .motto { display: block; flex: none; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.emblema { aspect-ratio: 2779 / 2877; background: linear-gradient(to top right, var(--logo-blu) 0 42%, var(--logo-verde)); -webkit-mask-image: url("logo/emblema.svg"); mask-image: url("logo/emblema.svg"); }
.scritta { aspect-ratio: 6043 / 910; background: var(--logo-testo); -webkit-mask-image: url("logo/scritta.svg"); mask-image: url("logo/scritta.svg"); }
.motto { aspect-ratio: 5237 / 572; background: var(--logo-motto); -webkit-mask-image: url("logo/motto.svg"); mask-image: url("logo/motto.svg"); }
@media (forced-colors: active) { .emblema, .scritta, .motto { forced-color-adjust: none; background: CanvasText; } }

/* ───────── Testata ───────── */
.testata {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: color-mix(in srgb, var(--fondo) 74%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6);
  border-bottom: 1px solid transparent; transition: border-color .25s ease, box-shadow .25s ease;
}
.testata::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none; opacity: 0; transition: opacity .3s ease; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--g1) 45%, transparent) 30%, color-mix(in srgb, var(--g2) 45%, transparent) 70%, transparent); }
.testata.staccata { border-bottom-color: var(--bordo); box-shadow: 0 10px 30px -22px rgba(10, 22, 40, .35); }
.testata.staccata::after { opacity: 1; }
.barra { position: relative; display: flex; align-items: center; gap: .6rem; min-height: 4.25rem; }
.marchio { display: inline-flex; align-items: center; gap: .6rem; margin-right: auto; padding: .25rem 0; text-decoration: none; border-radius: 8px; }
.marchio .emblema { width: 2.25rem; }
.marchio .scritta { width: 8.4rem; }
.menu-voci { display: flex; align-items: center; gap: .1rem; margin: 0; padding: 0; list-style: none; }
.menu-voci a {
  display: block; padding: .5rem .72rem; border-radius: 9px; text-decoration: none;
  font: 500 .93rem/1.2 var(--f-testo); color: var(--tenue);
  transition: color .2s ease, background-color .2s ease;
}
.menu-voci a:hover { color: var(--inchiostro); background: color-mix(in srgb, var(--inchiostro) 5%, transparent); }
.menu-voci a[aria-current="page"] {
  color: var(--inchiostro);
  background: linear-gradient(90deg, var(--g1), var(--g2)) no-repeat 50% 100% / calc(100% - 1.44rem) 2px;
}
.menu-voci .solo-mobile { display: none; }
.tema, .menu-apri {
  display: inline-grid; place-items: center; width: 2.55rem; height: 2.55rem; flex: none;
  border-radius: 10px; border: 1px solid var(--bordo); background: var(--vetro); color: var(--inchiostro);
  cursor: pointer; transition: border-color .2s ease, background-color .2s ease;
}
.tema:hover, .menu-apri:hover { border-color: var(--bordo-forte); background: var(--superficie); }
.tema svg, .menu-apri svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tema .icona-luna { display: var(--mostra-luna); }
.tema .icona-sole { display: var(--mostra-sole); }
.menu-apri { display: none; }
.menu-apri .chiudi { display: none; }
.aperta .menu-apri .apri { display: none; }
.aperta .menu-apri .chiudi { display: block; }
@media (max-width: 1080px) {
  .menu-apri { display: inline-grid; }
  .menu-voci {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: .15rem;
    padding: .6rem clamp(16px, 4vw, 32px) 1.25rem;
    background: var(--fondo); border-bottom: 1px solid var(--bordo); box-shadow: var(--ombra-forte);
  }
  .aperta .menu-voci { display: flex; }
  .menu-voci a { padding: .85rem .75rem; font-size: 1.05rem; }
  .menu-voci a[aria-current="page"] { background: color-mix(in srgb, var(--g1) 8%, transparent); box-shadow: inset 2px 0 0 var(--g1); border-radius: 0 9px 9px 0; }
  .menu-voci .solo-mobile { display: block; margin-top: .5rem; }
  .menu-voci .solo-mobile a { text-align: center; font-weight: 600; color: var(--sul-primario); background: linear-gradient(100deg, var(--primario-1), var(--primario-2)); }
}
@media (max-width: 560px) {
  .testata .bottone-testata { display: none; }
  .marchio .scritta { width: 7.6rem; }
  .marchio .emblema { width: 2.05rem; }
}

/* ───────── Bottoni ───────── */
.bottone {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 3rem; padding: .8rem 1.3rem; border: 0; border-radius: 11px;
  background: linear-gradient(100deg, var(--primario-1), var(--primario-2)); color: var(--sul-primario);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(10, 22, 40, .18), 0 12px 26px -14px color-mix(in srgb, var(--primario-1) 80%, transparent);
  font: 600 1rem/1.15 var(--f-testo); letter-spacing: -.005em; text-decoration: none; cursor: pointer;
  transition: transform .2s ease, box-shadow .25s ease, filter .25s ease;
}
/* Un riflesso attraversa il bottone al passaggio del mouse */
.bottone::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .26) 50%, transparent 62%) no-repeat 140% 0 / 250% 100%;
  transition: background-position .75s ease;
}
.bottone:hover { transform: translateY(-1px); filter: saturate(1.15) brightness(1.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 2px 4px rgba(10, 22, 40, .18), 0 18px 34px -14px color-mix(in srgb, var(--primario-2) 75%, transparent); }
.bottone:hover::after { background-position: -40% 0; }
.bottone:active { transform: translateY(0); filter: brightness(.97); }
.bottone svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
.bottone:hover svg { transform: translateX(2px); }
.bottone.secondario { background: var(--vetro); color: var(--inchiostro); box-shadow: inset 0 0 0 1px var(--bordo-forte); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.bottone.secondario::after { display: none; }
.bottone.secondario:hover { filter: none; box-shadow: inset 0 0 0 1px var(--inchiostro); }
.bottone.piccolo { min-height: 2.5rem; padding: .55rem 1rem; font-size: .92rem; border-radius: 10px; }
.azioni { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ───────── Apertura ───────── */
.apertura { position: relative; isolation: isolate; padding-block: clamp(2.5rem, 6vw, 5.25rem) clamp(3.25rem, 7vw, 6rem); }
/* Aloni nei colori del logo: si muovono piano, fermi con "riduci movimento" */
.apertura::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: -9rem; bottom: -4rem; pointer-events: none;
  background:
    radial-gradient(36% 44% at 76% 34%, var(--alone-blu), transparent 72%),
    radial-gradient(28% 36% at 92% 70%, var(--alone-verde), transparent 72%),
    radial-gradient(30% 36% at 6% 8%, color-mix(in srgb, var(--alone-blu) 55%, transparent), transparent 72%);
}
.apertura-griglia { display: grid; gap: clamp(2.75rem, 5vw, 4rem); align-items: center; }
@media (min-width: 980px) { .apertura-griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.apertura-testo { display: grid; gap: 1.5rem; justify-items: start; min-width: 0; }
.apertura h1 { max-width: 11.5em; }
.apertura-testo > .occhiello {
  padding: .5em .9em .5em .75em; border-radius: 999px; border: 1px solid var(--bordo);
  background: var(--vetro); color: var(--testo); letter-spacing: .1em;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.apertura-testo > .occhiello::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 .28em color-mix(in srgb, var(--verde) 20%, transparent); }
.apertura-visuale { min-width: 0; display: grid; }
@media (prefers-reduced-motion: no-preference) {
  .apertura::before { animation: aurora 26s ease-in-out infinite alternate; }
  .apertura-testo > .occhiello::before { animation: battito 2.6s ease-in-out infinite; }
  .apertura-testo > * { animation: entra .8s cubic-bezier(.2, .75, .2, 1) both; }
  .apertura-testo > :nth-child(2) { animation-delay: .07s; }
  .apertura-testo > :nth-child(3) { animation-delay: .14s; }
  .apertura-testo > :nth-child(4) { animation-delay: .21s; }
  .apertura-visuale { animation: entra 1s .18s cubic-bezier(.2, .75, .2, 1) both; }
  .evidenzia { background-size: 200% 100%; animation: riflesso 2.2s .5s cubic-bezier(.4, 0, .2, 1) both; }
}
@keyframes aurora { 50% { transform: translate3d(-2%, 1.5%, 0) scale(1.04); } 100% { transform: translate3d(1.5%, -1%, 0) scale(1.02); } }
@keyframes battito { 50% { box-shadow: 0 0 0 .5em color-mix(in srgb, var(--verde) 0%, transparent); } }
@keyframes riflesso { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes entra { from { opacity: 0; transform: translateY(22px); filter: blur(5px); } }

/* ───────── Nastro che scorre ───────── */
.nastro-cornice { position: relative; border-block: 1px solid var(--bordo); background: var(--fondo); }
.nastro { position: relative; overflow: hidden; color: var(--tenue); }
.nastro::before, .nastro::after { content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; width: min(12%, 9rem); pointer-events: none; }
.nastro::before { left: 0; background: linear-gradient(90deg, var(--fondo), transparent); }
.nastro::after { right: 0; background: linear-gradient(270deg, var(--fondo) 30%, transparent); }
.nastro-traccia { display: flex; width: max-content; animation: scorri 56s linear infinite; }
.nastro:hover .nastro-traccia, .nastro.ferma .nastro-traccia { animation-play-state: paused; }
.nastro-pausa { position: absolute; z-index: 2; right: clamp(16px, 4vw, 32px); top: 50%; display: grid; place-items: center; width: 2rem; height: 2rem; margin-top: -1rem; padding: 0; border-radius: 50%; border: 1px solid var(--bordo-forte); background: var(--superficie); color: var(--inchiostro); cursor: pointer; }
.nastro-pausa:hover { border-color: var(--inchiostro); }
.nastro-pausa i { width: .58rem; height: .58rem; background: currentColor; clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0); }
.nastro-pausa[aria-pressed="true"] i { clip-path: polygon(12% 0, 100% 50%, 12% 100%); }
.nastro-gruppo { display: flex; align-items: center; margin: 0; padding: 1.05rem 0; list-style: none; }
.nastro-gruppo li { display: flex; align-items: center; gap: 1.5rem; margin-right: 1.5rem; font: 500 .78rem/1 var(--f-dati); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.nastro-gruppo li::after { content: ""; width: .4rem; height: .4rem; transform: rotate(45deg); background: linear-gradient(135deg, var(--g1), var(--g2)); }
@keyframes scorri { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .nastro-traccia { animation: none; width: auto; }
  .nastro::before, .nastro::after, .nastro-pausa { display: none; }
  .nastro-gruppo { flex-wrap: wrap; justify-content: center; row-gap: .7rem; padding-inline: 5%; }
  .nastro-gruppo li { gap: .9rem; margin-right: .9rem; }
  .nastro-gruppo[aria-hidden="true"] { display: none; }
}

/* ───────── Numeri ───────── */
.numeri-sezione { padding-block: clamp(2.75rem, 5vw, 4rem) 0; }
.numeri { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 1.9rem 0; }
.numero { display: grid; align-content: start; gap: .6rem; padding: .35rem 1.6rem; border-left: 1px solid var(--bordo); }
.numero:first-child { border-left: 0; }
.numero strong { font: 700 clamp(2.2rem, 1.5rem + 2.1vw, 3.2rem)/1 var(--f-titoli); font-stretch: 112%; letter-spacing: -.045em; font-variant-numeric: tabular-nums; justify-self: start; padding-bottom: .06em; }
.numero span { font-size: .95rem; line-height: 1.45; color: var(--tenue); }
.stima { display: inline-block; margin-left: .3rem; padding: .18em .5em; border-radius: 999px; border: 1px solid var(--bordo-forte); font: 500 .64rem/1.3 var(--f-dati); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); vertical-align: .12em; }
@media (max-width: 820px) {
  .numeri { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.6rem; padding: 1.6rem 0; }
  .numero { padding-inline: 1.1rem; }
  .numero:nth-child(3) { border-left: 0; }
}

/* ───────── Categorie ───────── */
.categorie { display: grid; gap: 1.1rem; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.categoria {
  position: relative; isolation: isolate; grid-column: span 2;
  display: grid; grid-template-rows: auto auto 1fr auto; gap: .8rem;
  padding: .6rem .6rem 1.35rem; border-radius: var(--raggio); border: 1px solid var(--bordo);
  background: var(--superficie); color: inherit; text-decoration: none;
  box-shadow: 0 1px 2px rgba(10, 22, 40, .04);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
}
.categoria > :not(.categoria-disegno) { margin-inline: .65rem; }
/* Luce che segue il puntatore (sito.js scrive --mx e --my) e bordo che si accende */
.categoria::before, .categoria::after { content: ""; position: absolute; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .35s ease; }
.categoria::before { inset: 0; z-index: -1; background: radial-gradient(26rem circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--g1) 8%, transparent), transparent 46%); }
.categoria::after {
  inset: -1px; padding: 1px;
  background: radial-gradient(16rem circle at var(--mx, 50%) var(--my, 0%), var(--g2), color-mix(in srgb, var(--g1) 55%, transparent) 42%, transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.categoria:hover { transform: translateY(-3px); box-shadow: 0 28px 50px -30px rgba(10, 22, 40, .38); }
.categoria:hover::before, .categoria:hover::after, .categoria:focus-visible::after { opacity: 1; }
.categoria:focus-visible { outline-offset: 4px; }
.categoria h3 { font-size: 1.28rem; }
.categoria p { color: var(--tenue); font-size: .97rem; }
.categoria-disegno {
  position: relative; height: 9rem; border-radius: 12px; display: flex; align-items: center; justify-content: center; overflow: hidden;
  border: 1px solid var(--bordo);
  background:
    radial-gradient(70% 95% at 88% 0%, var(--alone-verde), transparent 72%),
    radial-gradient(60% 85% at 0% 100%, var(--alone-blu), transparent 72%),
    var(--superficie-2);
}
.categoria-disegno svg { width: auto; height: 82%; max-width: 92%; overflow: visible; filter: drop-shadow(0 10px 14px rgba(10, 22, 40, .10)); }
.categoria-prodotti { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .1rem; }
.categoria-prodotti span { font: 500 .72rem/1 var(--f-dati); padding: .4rem .58rem; border-radius: 999px; border: 1px solid var(--bordo); color: var(--tenue); }
.vai { display: inline-flex; align-items: center; gap: .4em; font: 600 .93rem/1 var(--f-testo); color: var(--collegamento); }
.vai svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
.categoria:hover .vai svg { transform: translateX(4px); }
.categorie > .categoria:nth-child(-n+2) { grid-column: span 3; }
.altre { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.altre > .categoria, .altre > .categoria:nth-child(-n+2) { grid-column: span 1; }
.altre .categoria-disegno { height: 6.75rem; }
@media (max-width: 960px) {
  .categorie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .categorie > .categoria, .categorie > .categoria:nth-child(-n+2) { grid-column: span 1; }
  .categorie:not(.altre) > .categoria:last-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .categorie { grid-template-columns: minmax(0, 1fr); }
  .categorie:not(.altre) > .categoria:last-child { grid-column: auto; }
}
/* Disegni delle categorie: schemi tecnici a tratto sottile */
.i-carta { fill: var(--superficie); stroke: var(--tratto-disegno); stroke-width: 1.6; }
.i-linea { fill: none; stroke: var(--tratto-disegno); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.i-sottile { fill: none; stroke: color-mix(in srgb, var(--tratto-disegno) 28%, transparent); stroke-width: 2.4; stroke-linecap: round; }
.i-blu { fill: var(--g1); }
.i-verde { fill: var(--g2); }
.i-evid { fill: color-mix(in srgb, var(--g2) 22%, transparent); }
.i-tenue { fill: color-mix(in srgb, var(--tratto-disegno) 30%, transparent); }
.i-rosso { fill: var(--rosso); }
.i-tratto-verde { fill: none; stroke: var(--g2); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.i-muovi { transition: transform .5s cubic-bezier(.2, .8, .2, 1); transform-box: fill-box; transform-origin: center; }
.categoria:hover .i-muovi { transform: translateY(-4px) rotate(-4deg); }
.categoria:hover .i-gira { transform: rotate(90deg); }

/* ───────── Vetrina dei lavori (fascia) ───────── */
.vetrina { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); }
@media (min-width: 980px) { .vetrina { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; } }
.vetrina-schede { display: grid; gap: .35rem; align-content: start; }
.vetrina-scheda {
  position: relative; display: grid; gap: .22rem; padding: .95rem 1.15rem; text-align: left;
  border: 1px solid transparent; border-radius: 14px; background: transparent; color: var(--tenue);
  font: inherit; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.vetrina-scheda:hover { color: var(--inchiostro); background: rgba(148, 180, 214, .05); }
.vetrina-scheda[aria-selected="true"] {
  color: var(--inchiostro); border-color: var(--bordo);
  background: linear-gradient(180deg, rgba(148, 180, 214, .09), rgba(148, 180, 214, .03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 22px 40px -30px rgba(0, 0, 0, .8);
}
.vetrina-scheda .scheda-tipo { font: 500 .68rem/1.3 var(--f-dati); letter-spacing: .12em; text-transform: uppercase; color: var(--verde-testo); }
.vetrina-scheda .scheda-titolo { font: 600 1.04rem/1.3 var(--f-testo); letter-spacing: -.008em; color: inherit; }
.vetrina-scheda .scheda-nome { justify-self: start; margin-top: .3rem; font: 600 .76rem/1 var(--f-testo); padding: .32rem .6rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--g2) 38%, transparent); background: color-mix(in srgb, var(--g2) 12%, transparent); color: var(--inchiostro); }
.vetrina-scheda::before { content: ""; position: absolute; left: -1px; top: 20%; bottom: 20%; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--g1), var(--g2)); opacity: 0; transition: opacity .2s ease; }
.vetrina-scheda[aria-selected="true"]::before { opacity: 1; }
.vetrina-palco { position: relative; min-width: 0; }
.vetrina-palco::before { content: ""; position: absolute; z-index: -1; left: 10%; right: 10%; top: 4%; height: 70%; pointer-events: none; background: radial-gradient(closest-side, rgba(45, 125, 210, .34), rgba(63, 191, 138, .12) 58%, transparent); }
.vetrina-tutti { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1.1rem; padding-left: 1.15rem; }
.vetrina-tutti a { font: 500 .9rem/1.3 var(--f-testo); color: var(--tenue); text-decoration: none; }
.vetrina-tutti a:hover { color: var(--inchiostro); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 979px) {
  .vetrina-lista { min-width: 0; }
  .vetrina-schede {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .5rem;
    margin-inline: calc(-1 * clamp(16px, 4vw, 32px)); padding: .2rem clamp(16px, 4vw, 32px) .6rem;
    scrollbar-width: thin;
  }
  .vetrina-scheda { flex: 0 0 auto; width: min(15.5rem, 72vw); scroll-snap-align: start; border-color: var(--bordo); }
  .vetrina-scheda::before { left: 20%; right: 20%; top: auto; bottom: -1px; width: auto; height: 2px; background: linear-gradient(90deg, var(--g1), var(--g2)); }
  .vetrina-tutti { padding-left: 0; }
}

/* ───────── Demo: figura, capitoli, pausa ───────── */
.dimostrazione { margin: 0; display: grid; gap: 1.15rem; justify-items: center; width: 100%; }
.dimostrazione .palco { width: 100%; display: grid; justify-items: center; }
.dimostrazione figcaption { width: 100%; max-width: 34rem; display: grid; gap: .75rem; }
.capitoli { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.capitoli button {
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); align-items: center; gap: .85rem; width: 100%;
  padding: .45rem .55rem; border: 0; border-radius: 10px; background: none; text-align: left; cursor: pointer;
  color: var(--tenue); font: 400 .96rem/1.35 var(--f-testo); transition: color .2s ease, background-color .2s ease;
}
.capitoli button:hover { color: var(--inchiostro); background: color-mix(in srgb, var(--inchiostro) 5%, transparent); }
.capitoli li[aria-current="step"] button { color: var(--inchiostro); font-weight: 550; }
.cap-barra { position: relative; height: 3px; border-radius: 3px; background: var(--bordo); overflow: hidden; }
.cap-barra i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--g1), var(--g2)); transform-origin: left center; transform: scaleX(0); }
.capitoli li.fatto .cap-barra i { transform: scaleX(1); opacity: .5; }
.capitoli li[aria-current="step"] .cap-barra i { animation: riempi var(--durata, 3.2s) linear forwards; }
.ferma .capitoli li[aria-current="step"] .cap-barra i { animation-play-state: paused; }
@keyframes riempi { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.demo-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-left: .55rem; font: 500 .68rem/1.3 var(--f-dati); letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); }
.demo-pausa {
  display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .72rem; border-radius: 999px;
  border: 1px solid var(--bordo-forte); background: var(--vetro); color: var(--inchiostro); cursor: pointer;
  font: 500 .7rem/1 var(--f-dati); letter-spacing: .08em; text-transform: uppercase;
}
.demo-pausa:hover { border-color: var(--inchiostro); }
.demo-pausa i { width: .65rem; height: .65rem; flex: none; background: currentColor; clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0); }
.demo-pausa[aria-pressed="true"] i { clip-path: polygon(10% 0, 100% 50%, 10% 100%); }
.demo-pausa .riprendi, .demo-pausa[aria-pressed="true"] .pausa { display: none; }
.demo-pausa[aria-pressed="true"] .riprendi { display: inline; }
@media (prefers-reduced-motion: reduce) {
  .demo-pausa { display: none; }
  .capitoli li[aria-current="step"] .cap-barra i { animation: none; transform: scaleX(1); }
}

/* ───────── Progetti delle pagine di categoria ───────── */
.progetti { display: grid; gap: clamp(4.5rem, 8vw, 7rem); }
.progetto { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 980px) {
  .progetto { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .progetto:nth-child(even) .progetto-demo { order: -1; }
  .progetto-demo { position: sticky; top: 6rem; }
}
.progetto-testo { display: grid; gap: 1.3rem; min-width: 0; align-content: start; }
.progetto-demo { position: relative; min-width: 0; }
.progetto-demo::before { content: ""; position: absolute; z-index: -1; left: 6%; right: 6%; top: 2%; height: 72%; pointer-events: none; background: radial-gradient(closest-side, var(--alone-blu), color-mix(in srgb, var(--alone-verde) 50%, transparent) 62%, transparent); }
.progetto { position: relative; isolation: isolate; }
.etichette { display: flex; flex-wrap: wrap; gap: .45rem; }
.etichetta { font: 500 .68rem/1 var(--f-dati); letter-spacing: .1em; text-transform: uppercase; padding: .48rem .68rem; border-radius: 999px; border: 1px solid var(--bordo-forte); color: var(--tenue); }
.etichetta.nome { font: 600 .82rem/1 var(--f-testo); letter-spacing: -.005em; text-transform: none; border-color: color-mix(in srgb, var(--g2) 40%, transparent); background: color-mix(in srgb, var(--g2) 12%, transparent); color: var(--inchiostro); }
.problema { font-size: 1.05rem; color: var(--tenue); }
.funzioni, .elenco-spunte { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.funzioni li, .elenco-spunte li { position: relative; padding-left: 1.95rem; line-height: 1.5; }
.funzioni li::before, .elenco-spunte li::before { content: ""; position: absolute; left: 0; top: .1em; width: 1.3em; height: 1.3em; border-radius: 50%; background: linear-gradient(135deg, color-mix(in srgb, var(--g1) 16%, transparent), color-mix(in srgb, var(--g2) 22%, transparent)); }
.funzioni li::after, .elenco-spunte li::after { content: ""; position: absolute; left: .4em; top: .5em; width: .52em; height: .3em; border-left: 2px solid var(--verde-testo); border-bottom: 2px solid var(--verde-testo); transform: rotate(-45deg); }
.fatti { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 1rem 1.25rem; margin: 0; padding: 1.15rem 1.3rem; border-radius: 14px; border: 1px solid var(--bordo); background: var(--superficie); }
.fatti div { display: grid; gap: .25rem; align-content: start; }
.fatti dt { font: 700 1.06rem/1.25 var(--f-titoli); font-stretch: 108%; letter-spacing: -.015em; color: var(--inchiostro); }
.fatti dd { margin: 0; font-size: .9rem; line-height: 1.4; color: var(--tenue); }
.stack { font: 400 .76rem/1.6 var(--f-dati); letter-spacing: .02em; color: var(--tenue); }

/* ───────── Prima e dopo (pagine di categoria) ───────── */
.confronto { position: relative; display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 860px) {
  .confronto { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* il passaggio da una colonna all'altra */
  .confronto::after {
    content: ""; position: absolute; z-index: 2; left: 50%; top: 3.1rem; width: 2.6rem; height: 2.6rem; margin-left: -1.3rem;
    border-radius: 50%; border: 1px solid var(--bordo-forte); box-shadow: var(--ombra);
    background: var(--superficie) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6878' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 1.1rem no-repeat;
  }
}
.prima, .schermata { border-radius: var(--raggio); overflow: hidden; }
.prima { border: 1px dashed var(--bordo-forte); background: color-mix(in srgb, var(--superficie) 45%, transparent); }
.schermata {
  border: 1px solid transparent; box-shadow: var(--ombra-forte);
  background: linear-gradient(var(--superficie), var(--superficie)) padding-box, linear-gradient(140deg, var(--g1), color-mix(in srgb, var(--g2) 70%, var(--bordo)) 45%, var(--bordo) 75%) border-box;
}
.confronto-testa, .schermata-testa { display: flex; align-items: center; gap: .7rem; padding: 1rem 1.3rem; border-bottom: 1px solid var(--bordo); }
.confronto-testa h3, .schermata-testa h3 { font-size: 1.12rem; }
.confronto-testa small { margin-left: auto; font: 500 .66rem/1 var(--f-dati); letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); }
.schermata-testa i { width: .62rem; height: .62rem; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--verde) 18%, transparent); flex: none; }
.prima ul, .schermata ul { list-style: none; margin: 0; padding: .35rem 1.3rem 1rem; }
.prima li, .schermata li { position: relative; padding: .8rem 0 .8rem 2.2rem; border-bottom: 1px solid var(--bordo); line-height: 1.45; }
.prima li:last-child, .schermata li:last-child { border-bottom: 0; }
.prima li { color: var(--tenue); }
.prima li::before, .schermata li::before { content: ""; position: absolute; left: 0; top: .82rem; width: 1.35rem; height: 1.35rem; border-radius: 50%; }
.prima li::before { background: color-mix(in srgb, var(--rosso) 11%, transparent); }
.prima li::after { content: ""; position: absolute; left: .4rem; top: 1.22rem; width: .56rem; height: .56rem; background: linear-gradient(45deg, transparent 42%, var(--rosso) 42% 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, var(--rosso) 42% 58%, transparent 58%); }
.prima .rossa { color: var(--rosso); text-decoration: underline wavy color-mix(in srgb, var(--rosso) 55%, transparent) 1px; text-underline-offset: 4px; }
.schermata li::before { background: linear-gradient(135deg, color-mix(in srgb, var(--g1) 16%, transparent), color-mix(in srgb, var(--g2) 24%, transparent)); }
.schermata li::after { content: ""; position: absolute; left: .42rem; top: 1.2rem; width: .56rem; height: .32rem; border-left: 2px solid var(--verde-testo); border-bottom: 2px solid var(--verde-testo); transform: rotate(-45deg); }
.schermata li { color: var(--testo); }

/* ───────── Metodo ───────── */
.passi { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem 1.75rem; grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: passo; }
.passo { position: relative; display: grid; gap: .6rem; align-content: start; padding-top: 4.4rem; counter-increment: passo; }
.passo::before {
  content: counter(passo, decimal-leading-zero); position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 12px; border: 1px solid transparent;
  background: linear-gradient(var(--superficie), var(--superficie)) padding-box, linear-gradient(140deg, var(--g1), var(--g2)) border-box;
  font: 600 .95rem/1 var(--f-dati); color: var(--inchiostro); box-shadow: var(--ombra);
}
.passo::after { content: ""; position: absolute; top: 1.5rem; left: 3.75rem; right: -1rem; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--g2) 70%, transparent), var(--bordo) 60%, transparent); }
.passo:last-child::after { display: none; }
.passo h3 { font-size: 1.2rem; }
.passo p { color: var(--tenue); font-size: .97rem; }
@media (max-width: 920px) { .passi { grid-template-columns: repeat(2, minmax(0, 1fr)); } .passo::after { display: none; } }
@media (max-width: 540px) { .passi { grid-template-columns: minmax(0, 1fr); } }

/* ───────── Regole ───────── */
.regole { display: grid; gap: 2.25rem 2rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.regola { display: grid; gap: .7rem; align-content: start; }
.regola h3 { font-size: 1.15rem; }
.regola p { color: var(--tenue); font-size: .97rem; }
.icona {
  width: 2.9rem; height: 2.9rem; border-radius: 12px; display: grid; place-items: center; color: var(--g1); border: 1px solid transparent;
  background: linear-gradient(140deg, color-mix(in srgb, var(--g1) 9%, var(--superficie)), color-mix(in srgb, var(--g2) 12%, var(--superficie))) padding-box, linear-gradient(140deg, color-mix(in srgb, var(--g1) 45%, transparent), color-mix(in srgb, var(--g2) 45%, transparent)) border-box;
}
.icona svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 920px) { .regole { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .regole { grid-template-columns: minmax(0, 1fr); } }

/* ───────── Contatti ───────── */
.contatti-griglia { display: grid; gap: clamp(2.25rem, 4vw, 3.5rem); }
@media (min-width: 920px) { .contatti-griglia { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: start; } }
.contatti-testo { display: grid; gap: 1.3rem; justify-items: start; min-width: 0; }
/* Il modulo ha un bordo con una luce che gira piano */
.modulo {
  position: relative; display: grid; gap: 1rem; min-width: 0; padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--raggio);
  border: 1px solid transparent; box-shadow: var(--ombra-forte);
  background:
    linear-gradient(var(--superficie), var(--superficie)) padding-box,
    conic-gradient(from var(--angolo), var(--bordo) 0 58%, color-mix(in srgb, var(--g1) 80%, transparent) 72%, var(--g2) 80%, var(--bordo) 92%) border-box;
}
@media (prefers-reduced-motion: no-preference) { .modulo { animation: gira-bordo 9s linear infinite; } }
@keyframes gira-bordo { to { --angolo: 360deg; } }
@media (min-width: 640px) { .modulo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .modulo .intero { grid-column: 1 / -1; } }
.campo { display: grid; gap: .4rem; min-width: 0; }
.campo label { font: 600 .88rem/1.3 var(--f-testo); color: var(--inchiostro); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-width: 0; padding: .75rem .85rem; border-radius: 10px; border: 1px solid var(--bordo-forte);
  background: var(--fondo); color: var(--testo); font: inherit; font-size: 1rem; transition: border-color .2s ease, box-shadow .2s ease;
}
.campo textarea { min-height: 8.5rem; resize: vertical; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: color-mix(in srgb, var(--collegamento) 45%, var(--bordo-forte)); }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--collegamento); box-shadow: 0 0 0 4px color-mix(in srgb, var(--collegamento) 18%, transparent); }
.recapiti { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font: 600 1.05rem/1.4 var(--f-testo); }
.recapiti a { color: var(--inchiostro); text-underline-offset: 3px; }
.avviso { margin: 0; padding: .8rem 1rem; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--g1) 22%, transparent); background: color-mix(in srgb, var(--g1) 7%, var(--superficie)); color: var(--inchiostro); font-size: .95rem; }

/* ───────── Piè di pagina ───────── */
.piede { padding-block: clamp(3.5rem, 7vw, 5rem) 2rem; overflow: hidden; }
.piede-griglia { display: grid; gap: 2.25rem; grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); }
.piede-marchio { display: grid; gap: 1rem; justify-items: start; align-content: start; }
.piede-logo { display: inline-grid; justify-items: center; gap: .55rem; text-decoration: none; border-radius: 8px; }
.piede-logo .emblema { width: 3.8rem; }
.piede-logo .scritta { width: 10.2rem; }
.piede-logo .motto { width: 8.6rem; }
.piede-marchio p { color: var(--tenue); font-size: .95rem; max-width: 22rem; }
.piede h2 { font: 500 .7rem/1.3 var(--f-dati); font-stretch: 100%; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); margin-bottom: 1rem; }
.piede ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.piede ul a { color: var(--testo); text-decoration: none; transition: color .2s ease; }
.piede ul a:hover { color: var(--inchiostro); text-decoration: underline; text-underline-offset: 3px; }
.piede-fondo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem; margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--bordo); color: var(--tenue); font-size: .84rem; }
@media (max-width: 820px) { .piede-griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .piede-marchio { grid-column: 1 / -1; } }
@media (max-width: 480px) { .piede-griglia { grid-template-columns: minmax(0, 1fr); } }

/* ───────── Pagina 404 ───────── */
.errore { position: relative; isolation: isolate; display: grid; gap: 1.5rem; justify-items: start; padding-block: clamp(4rem, 10vw, 8rem); }
.errore::before { content: ""; position: absolute; z-index: -1; left: 0; top: 0; width: min(36rem, 90%); height: 70%; pointer-events: none; background: radial-gradient(closest-side, var(--alone-blu), color-mix(in srgb, var(--alone-verde) 50%, transparent) 60%, transparent); }
.errore .emblema { width: 5.2rem; }

/* ───────── Comparsa allo scorrimento (parte da uno stato visibile) ───────── */
@media (prefers-reduced-motion: no-preference) {
  .entra { animation: entra .75s cubic-bezier(.2, .75, .2, 1) backwards; animation-delay: var(--ritardo, 0s); }
}

/* ═══════════════════════════ DEMO ANIMATE ═══════════════════════════
   Ogni demo ha delle scene: [data-vis] dice in quali scene un pezzo si
   vede, sito.js mette data-in. Lo stato finale è già scritto nell'HTML. */

.demo [data-vis] { transition: opacity .45s ease, transform .6s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .6s; }
.demo [data-vis][data-in] { transition-delay: var(--ritardo, 0s), var(--ritardo, 0s), 0s; }
.demo [data-vis]:not([data-in]) { opacity: 0; visibility: hidden; }
.demo .su:not([data-in]) { transform: translateY(.9em); }
.demo .giu:not([data-in]) { transform: translateY(-.9em); }
.demo .pop:not([data-in]) { transform: scale(.75); }
.demo .dx:not([data-in]) { transform: translateX(1.6em); }
.demo .sx:not([data-in]) { transform: translateX(-1.6em); }
.demo .scorri:not([data-in]) { transform: translateX(14%); }
.demo .scorri[data-out]:not([data-in]) { transform: translateX(-14%); }
.demo .fondo:not([data-in]) { transform: translateY(105%); }
.demo.riavvolge, .demo.riavvolge * { transition: none !important; animation: none !important; }
.demo:not(.va) .gira, .demo:not(.va) .pulsa { animation-play-state: paused; }
.demo .cambia { animation: cambia .45s ease; }
@keyframes cambia { from { opacity: .2; transform: translateY(.25em); } }
@media (prefers-reduced-motion: reduce) {
  :root .demo *, :root .demo *::before, :root .demo *::after { transition: none !important; animation: none !important; }
  .demo .tocco, .demo .clic { display: none; }
}

/* Tocco del dito e cursore */
.tocco { position: absolute; z-index: 9; left: calc(var(--x, 50) * 1%); top: calc(var(--y, 50) * 1%); width: 2.6em; height: 2.6em; margin: -1.3em 0 0 -1.3em; border-radius: 50%; background: color-mix(in srgb, var(--app-testo) 24%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-fondo) 70%, transparent); pointer-events: none; }
.demo .tocco[data-vis] { transition: none; }
.demo .tocco[data-in] { animation: tocco 1s var(--ritardo, 0s) ease-out both; }
@keyframes tocco { 0% { opacity: 0; transform: scale(.5); } 18% { opacity: 1; transform: scale(.62); } 38% { opacity: 1; transform: scale(.5); } 100% { opacity: 0; transform: scale(1.5); } }
.cursore { position: absolute; z-index: 12; left: calc(var(--x, 50) * 1%); top: calc(var(--y, 50) * 1%); width: 1.75em; height: 1.75em; margin: -.15em 0 0 -.3em; pointer-events: none; transition: left 1s cubic-bezier(.5, 0, .2, 1), top 1s cubic-bezier(.5, 0, .2, 1), opacity .3s ease; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }
.cursore svg { width: 100%; height: 100%; display: block; fill: var(--app-scuro); stroke: var(--app-sul-scuro); stroke-width: 1.4; stroke-linejoin: round; }
.clic { position: absolute; z-index: 11; left: calc(var(--x, 50) * 1%); top: calc(var(--y, 50) * 1%); width: 2.6em; height: 2.6em; margin: -1.3em 0 0 -1.3em; border-radius: 50%; border: .18em solid var(--acc); pointer-events: none; }
.demo .clic[data-vis] { transition: none; }
.demo .clic[data-in] { animation: onda .8s var(--ritardo, 1s) ease-out both; }
@keyframes onda { 0% { opacity: 0; transform: scale(.3); } 20% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5); } }

/* ───────── Telefono ───────── */
.telefono {
  position: relative; width: min(100%, 18.5rem); aspect-ratio: 9 / 18.8; padding: .55rem; flex: none;
  border-radius: 2.85rem; background: var(--cornice); box-shadow: var(--ombra-forte), inset 0 0 0 1.5px var(--cornice-luce);
  container-type: inline-size;
}
.telefono::after { content: ""; position: absolute; right: -.18rem; top: 23%; width: .18rem; height: 12%; border-radius: 0 .2rem .2rem 0; background: var(--cornice); }
.telefono-schermo {
  position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden; isolation: isolate;
  border-radius: 2.3rem; background: var(--app-fondo); color: var(--app-testo); font: 400 calc(100cqw / 21) / 1.3 var(--f-testo);
}
.u-stato { flex: none; position: relative; display: flex; align-items: center; justify-content: space-between; height: 2.75em; padding: 0 1.55em 0 1.85em; font: 650 .78em/1 var(--f-testo); }
.u-isola { position: absolute; left: 50%; top: .7em; width: 6.6em; height: 1.75em; margin-left: -3.3em; border-radius: 1em; background: var(--cornice); }
.u-stato-icone { display: flex; align-items: center; gap: .4em; }
.u-segnale { width: 1.15em; height: .8em; background: currentColor; clip-path: polygon(0 100%, 18% 100%, 18% 72%, 27% 72%, 27% 100%, 45% 100%, 45% 48%, 54% 48%, 54% 100%, 72% 100%, 72% 24%, 81% 24%, 81% 100%, 100% 100%, 100% 0, 81% 0, 81% 24%, 72% 24%, 72% 48%, 54% 48%, 54% 72%, 27% 72%, 27% 100%, 0 100%); }
.u-batteria { position: relative; width: 1.7em; height: .85em; border-radius: .25em; border: 1.5px solid currentColor; }
.u-batteria::before { content: ""; position: absolute; inset: 1.5px 32% 1.5px 1.5px; border-radius: .1em; background: currentColor; }
.u-corpo { position: relative; flex: 1; overflow: hidden; }
.u-pannello { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--app-fondo); }
.u-tab { flex: none; display: flex; justify-content: space-around; padding: .55em .8em 1.4em; border-top: 1px solid var(--app-bordo); background: var(--app-fondo); }
.u-tab-voce { position: relative; display: grid; justify-items: center; gap: .25em; color: var(--app-tenue); font: 600 .62em/1 var(--f-testo); }
.u-tab-voce svg { width: 2.25em; height: 2.25em; }
.u-tab-voce:has(.u-tab-punto[data-in]) { color: var(--acc); }
.u-tab-punto { position: absolute; top: -.95em; width: 3em; height: .3em; border-radius: 0 0 .3em .3em; background: var(--acc); }

/* Icone dentro le demo */
.u-ico { width: 1.3em; height: 1.3em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Pezzi comuni delle app */
.u-barra { flex: none; display: flex; align-items: center; gap: .7em; padding: .35em 1.15em .75em; }
.u-barra > .u-ico { width: 1.5em; height: 1.5em; color: var(--acc); }
.u-barra-testi { display: grid; gap: .1em; min-width: 0; flex: 1; }
.u-titolo { font: 750 1.18em/1.15 var(--f-titoli); letter-spacing: -.015em; }
.u-sotto { font: 500 .72em/1.3 var(--f-testo); color: var(--app-tenue); }
.u-lista { list-style: none; margin: 0; padding: 0 1.15em; }
.u-riga { display: flex; align-items: center; gap: .75em; padding: .58em 0; border-bottom: 1px solid var(--app-bordo); }
.u-riga:last-child { border-bottom: 0; }
.u-avatar { flex: none; display: grid; place-items: center; width: 2.55em; height: 2.55em; border-radius: 50%; font: 750 .8em/1 var(--f-titoli); background: color-mix(in srgb, var(--acc) 15%, var(--app-fondo)); color: var(--acc); }
.u-nome { flex: 1; min-width: 0; display: grid; gap: .1em; font: 600 .9em/1.2 var(--f-testo); }
.u-nome small { font: 500 .8em/1.25 var(--f-testo); color: var(--app-tenue); }
.u-importo { font: 750 .92em/1 var(--f-titoli); font-variant-numeric: tabular-nums; white-space: nowrap; }
.u-importo.rosso { color: var(--app-rosso); }
.u-importo.ok { color: var(--app-ok); }
.u-etichetta { padding: .2em 1.4em .45em; font: 650 .68em/1.2 var(--f-dati); letter-spacing: .1em; text-transform: uppercase; color: var(--app-tenue); }
.u-chip { display: inline-flex; align-items: center; gap: .35em; padding: .32em .7em; border-radius: 999px; font: 650 .68em/1.1 var(--f-testo); white-space: nowrap; background: var(--app-fondo-2); color: var(--app-tenue); }
.u-chip .u-ico { width: 1.2em; height: 1.2em; }
.u-chip.ok { background: color-mix(in srgb, var(--app-ok) 15%, transparent); color: var(--app-ok); }
.u-chip.rosso { background: color-mix(in srgb, var(--app-rosso) 14%, transparent); color: var(--app-rosso); }
.u-chip.ambra { background: color-mix(in srgb, var(--app-ambra) 16%, transparent); color: var(--app-ambra); }
.u-chip.acc { background: color-mix(in srgb, var(--acc) 15%, transparent); color: var(--acc); }
.u-spunta { position: relative; flex: none; width: 1.5em; height: 1.5em; border-radius: 50%; border: 2px solid var(--app-bordo); }
.u-spunta b { position: absolute; inset: -2px; border-radius: 50%; background: var(--acc); }
.u-spunta b::after { content: ""; position: absolute; left: 50%; top: 45%; width: .58em; height: .32em; margin: -.24em 0 0 -.3em; border-left: 2px solid var(--sul-acc); border-bottom: 2px solid var(--sul-acc); transform: rotate(-45deg); }
.u-bottone { display: inline-flex; align-items: center; justify-content: center; gap: .45em; padding: .7em 1.1em; border-radius: .8em; background: var(--acc); color: var(--sul-acc); font: 700 .82em/1 var(--f-titoli); white-space: nowrap; }
.u-bottone.chiaro { background: var(--app-fondo-2); color: var(--app-testo); }
.u-bottone .u-ico { width: 1.25em; height: 1.25em; }
.u-scheda { border-radius: .9em; background: var(--app-fondo-2); padding: .85em 1em; }
.u-toast { position: absolute; z-index: 6; left: .9em; right: .9em; bottom: .9em; display: flex; align-items: center; gap: .6em; padding: .75em .9em; border-radius: .9em; background: var(--app-scuro); color: var(--app-sul-scuro); box-shadow: var(--app-ombra); font: 600 .78em/1.3 var(--f-testo); }
.u-toast > i { flex: none; position: relative; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--acc); }
.u-toast > i::after { content: ""; position: absolute; left: 50%; top: 45%; width: .6em; height: .33em; margin: -.24em 0 0 -.3em; border-left: 2px solid var(--sul-acc); border-bottom: 2px solid var(--sul-acc); transform: rotate(-45deg); }
.u-barra-prog { position: relative; height: .5em; border-radius: .5em; background: var(--app-bordo); overflow: hidden; }
.u-barra-prog i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, 0) * 100%); border-radius: inherit; background: var(--acc); transition: width 1s cubic-bezier(.3, .7, .2, 1); transition-delay: var(--ritardo, 0s); }
.u-barra-prog i.rosso { background: var(--app-rosso); }

/* ───────── Browser ───────── */
.browser { width: 100%; max-width: 44rem; border-radius: 14px; overflow: hidden; background: var(--app-fondo); box-shadow: var(--ombra-forte); border: 1px solid color-mix(in srgb, var(--bordo-forte) 55%, transparent); container-type: inline-size; }
.browser-barra { display: flex; align-items: center; gap: .55em; padding: .75em 1em; background: var(--browser-barra); font-size: calc(100cqw / 52); }
.browser-barra > i { width: .95em; height: .95em; border-radius: 50%; background: var(--browser-punto); flex: none; }
.indirizzo { display: flex; align-items: center; justify-content: center; gap: .5em; width: 46%; margin-inline: auto; padding: .4em 1em; border-radius: 999px; background: var(--app-fondo); color: var(--app-tenue); font: 500 1em/1 var(--f-dati); white-space: nowrap; overflow: hidden; }
.indirizzo .u-ico { width: 1.05em; height: 1.05em; }
.browser-pagina { position: relative; aspect-ratio: 16 / 10.4; overflow: hidden; background: var(--app-fondo); color: var(--app-testo); font: 400 calc(100cqw / 50) / 1.3 var(--f-testo); }
.b-colonne { position: absolute; inset: 0; display: grid; grid-template-columns: 11.5em minmax(0, 1fr); }
.b-lato { display: grid; align-content: start; gap: .25em; padding: 1.2em .8em; font-size: .82em; background: var(--app-fondo-2); border-right: 1px solid var(--app-bordo); position: relative; }
.b-lato-voce { position: relative; z-index: 1; display: flex; align-items: center; gap: .6em; height: 2.4em; padding: 0 .7em; border-radius: .6em; font: 600 1em/1 var(--f-testo); color: var(--app-tenue); }
.b-lato-voce .u-ico { width: 1.35em; height: 1.35em; }
.b-lato-segno { position: absolute; left: .8em; right: .8em; top: calc(4.45em + var(--y, 0) * 2.65em); height: 2.4em; border-radius: .6em; background: color-mix(in srgb, var(--acc) 14%, var(--app-fondo)); transition: top .6s cubic-bezier(.4, 0, .2, 1); }
.b-lato-logo { display: flex; align-items: center; gap: .5em; height: 2.4em; padding: 0 .7em; margin-bottom: .6em; font: 800 1em/1 var(--f-titoli); }
.b-lato-logo i { width: 1.5em; height: 1.5em; border-radius: .45em; background: var(--acc); }
.b-lato-logo b { width: 5em; height: .6em; border-radius: .3em; background: var(--app-bordo); }
.b-main { position: relative; overflow: hidden; }
.b-pannello { position: absolute; inset: 0; padding: 1.4em 1.6em; display: flex; flex-direction: column; gap: 1em; background: var(--app-fondo); }
.b-testa { display: flex; align-items: flex-end; justify-content: space-between; gap: 1em; }
.b-titolo { font: 800 1.45em/1.1 var(--f-titoli); letter-spacing: -.02em; }
.b-sotto { font: 500 .8em/1.3 var(--f-testo); color: var(--app-tenue); margin-top: .25em; }
.b-tabella { width: 100%; border-collapse: collapse; font-size: .82em; font-variant-numeric: tabular-nums; }
.b-tabella th { text-align: left; font: 650 .82em/1 var(--f-dati); letter-spacing: .06em; text-transform: uppercase; color: var(--app-tenue); padding: .55em .5em; border-bottom: 1.5px solid var(--app-bordo); }
.b-tabella td { padding: .62em .5em; border-bottom: 1px solid var(--app-bordo); }
.b-tabella .num { text-align: right; }
.b-tabella tfoot td { font-weight: 750; border-bottom: 0; }

/* ═════════ Le singole demo ═════════ */

/* Gestionale squadre */
.demo-squadre { --acc: var(--acc-squadre); }
.sq-riepilogo { display: flex; align-items: center; justify-content: space-between; margin: 0 1.15em .35em; padding: .7em .9em; border-radius: .9em; background: var(--app-fondo-2); font: 600 .82em/1.2 var(--f-testo); }
.sq-riepilogo b { font: 800 1.7em/1 var(--f-titoli); color: var(--acc); font-variant-numeric: tabular-nums; }
.sq-riepilogo span { display: flex; align-items: baseline; gap: .4em; }
.sq-quota { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; display: grid; gap: .55em; padding: 1.1em 1.25em 1.3em; border-radius: 1.4em 1.4em 0 0; background: var(--app-fondo); box-shadow: var(--app-ombra-su); }
.sq-quota::before { content: ""; justify-self: center; width: 2.6em; height: .3em; border-radius: .3em; background: var(--app-bordo); margin-bottom: .2em; }
.sq-calcolo { display: flex; justify-content: space-between; font: 500 .8em/1.3 var(--f-testo); color: var(--app-tenue); }
.sq-testa { display: flex; align-items: baseline; justify-content: space-between; }
.sq-testa b { font: 800 2.3em/1 var(--f-titoli); letter-spacing: -.03em; color: var(--acc); font-variant-numeric: tabular-nums; }
.sq-testa span { font: 600 .85em/1 var(--f-testo); color: var(--app-tenue); }
.sq-tessere { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; padding: 0 1.15em .6em; }
.sq-tessera { display: grid; gap: .25em; padding: .75em .85em; border-radius: .9em; background: var(--app-fondo-2); }
.sq-tessera small { font: 600 .66em/1.2 var(--f-testo); color: var(--app-tenue); }
.sq-tessera b { font: 800 1.15em/1 var(--f-titoli); font-variant-numeric: tabular-nums; }
.sq-tessera.rosso b { color: var(--app-rosso); }
.sq-azione { display: flex; padding: .7em 1.15em; }
.sq-azione .u-bottone { flex: 1; }
.sq-post { position: relative; margin: .1em 1.15em .8em; aspect-ratio: 1; border-radius: 1em; overflow: hidden; display: grid; place-items: center; align-content: center; gap: .6em; color: var(--post-testo); background: radial-gradient(120% 85% at 15% 0%, var(--post-fondo-2), var(--post-fondo) 70%); }
.sq-post::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent 0 1.1em, rgba(255, 255, 255, .045) 1.1em 2.2em); }
.sq-post-titolo { position: relative; font: 900 2.2em/0.95 var(--f-titoli); letter-spacing: -.01em; text-transform: uppercase; text-align: center; }
.sq-post-titolo span { display: block; color: var(--post-accento); }
.sq-scudi { position: relative; display: flex; align-items: center; gap: .8em; font: 800 .9em/1 var(--f-titoli); color: var(--post-accento); }
.sq-scudi svg { width: 3.2em; height: 3.6em; }
.sq-scudo-a { fill: var(--post-accento); }
.sq-scudo-b { fill: rgba(255, 255, 255, .88); }
.sq-scudo-righe { fill: none; stroke: var(--post-fondo); stroke-width: 3; opacity: .55; }
.sq-post-data { position: relative; font: 650 .72em/1.35 var(--f-dati); letter-spacing: .08em; text-transform: uppercase; text-align: center; opacity: .9; }
.sq-bottoni { display: grid; grid-template-columns: 1fr 1fr; gap: .55em; padding: 0 1.15em; }
.sq-didascalia { display: grid; gap: .3em; margin: .8em 1.15em 0; padding: .75em .9em; border-radius: .9em; background: var(--app-fondo-2); font: 500 .76em/1.4 var(--f-testo); color: var(--app-testo); }
.sq-didascalia small { font: 650 .82em/1 var(--f-dati); letter-spacing: .08em; text-transform: uppercase; color: var(--app-tenue); }

/* Gestionale condominio */
.demo-condominio { --acc: var(--acc-condominio); }
.co-tessere { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7em; }
.co-tessera { display: grid; gap: .45em; padding: .85em .9em; border-radius: .8em; border: 1px solid var(--app-bordo); background: var(--app-fondo); }
.co-tessera small { font: 600 .66em/1.25 var(--f-testo); color: var(--app-tenue); }
.co-tessera b { font: 800 1.65em/1 var(--f-titoli); font-variant-numeric: tabular-nums; }
.co-tessera.rosso b { color: var(--app-rosso); }
.co-tessera .u-ico { width: 1.3em; height: 1.3em; color: var(--acc); }
.co-scadenze { display: grid; gap: .1em; padding: .4em .9em; border-radius: .8em; background: var(--app-fondo-2); }
.co-scadenza { display: flex; align-items: center; gap: .7em; padding: .55em 0; border-bottom: 1px solid var(--app-bordo); font: 500 .8em/1.25 var(--f-testo); }
.co-scadenza:last-child { border-bottom: 0; }
.co-scadenza .u-ico { width: 1.25em; height: 1.25em; color: var(--app-tenue); }
.co-scadenza > span:not(.u-chip) { flex: 1; min-width: 0; }
.co-criterio { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; }
.co-totale { font: 800 1.6em/1 var(--f-titoli); letter-spacing: -.02em; color: var(--acc); font-variant-numeric: tabular-nums; }
.co-righe { display: grid; gap: .5em; }
.co-rata { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .9em; padding: .6em .9em; border-radius: .7em; border: 1px solid var(--app-bordo); font: 500 .82em/1.25 var(--f-testo); }
.co-rata b { font: 700 1em/1 var(--f-titoli); font-variant-numeric: tabular-nums; }
.co-rata small { display: block; color: var(--app-tenue); font-size: .85em; }
.co-stati { position: relative; display: grid; justify-items: end; }
.co-stati > * { grid-area: 1 / 1; }
.co-stati > .u-chip + .u-chip.ok { background-color: color-mix(in srgb, var(--app-ok) 15%, var(--app-fondo)); }
.co-stati > .u-chip + .u-chip.ambra { background-color: color-mix(in srgb, var(--app-ambra) 16%, var(--app-fondo)); }
.co-canali { display: flex; gap: .35em; margin-top: .35em; }
.co-avviso { display: flex; align-items: center; gap: .6em; padding: .6em .9em; border-radius: .7em; background: color-mix(in srgb, var(--acc) 12%, var(--app-fondo)); color: var(--app-testo); font: 600 .78em/1.3 var(--f-testo); }
.co-avviso .u-ico { color: var(--acc); }
.co-incassi { display: grid; gap: .65em; padding: .85em .95em; border-radius: .8em; border: 1px solid var(--app-bordo); }
.co-incassi-testa { display: flex; align-items: flex-end; justify-content: space-between; gap: 1em; }
.co-incassi-testa > span { display: grid; gap: .25em; font: 650 .82em/1.2 var(--f-testo); }
.co-incassi-testa small { font: 500 .85em/1.2 var(--f-testo); color: var(--app-tenue); }
.co-incassi-testa b { display: flex; align-items: baseline; gap: .35em; font: 800 1.3em/1 var(--f-titoli); letter-spacing: -.02em; color: var(--acc); font-variant-numeric: tabular-nums; }
.co-incassi-testa b small { font: 600 .55em/1 var(--f-testo); letter-spacing: 0; }

/* Gestionale per team */
.demo-team { --acc: var(--acc-team); }
.te-pagina { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 1em; padding: 1.3em 1.5em; }
.te-testa { display: flex; align-items: center; gap: .8em; }
.te-testa .b-titolo { flex: 1; }
.te-schede { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: .3em; padding: .25em; border-radius: .7em; background: var(--app-fondo-2); font: 650 .78em/1 var(--f-testo); }
.te-schede span { position: relative; z-index: 1; padding: .55em .9em; border-radius: .5em; color: var(--app-tenue); text-align: center; white-space: nowrap; }
.te-schede .attiva { position: absolute; z-index: 0; top: .25em; bottom: .25em; width: calc(50% - .4em); left: calc(.25em + var(--x, 0) * (50% - .1em)); border-radius: .5em; background: var(--app-fondo); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); transition: left .5s cubic-bezier(.4, 0, .2, 1); }
.te-schede-box { position: relative; display: flex; }
.te-persone { display: flex; }
.te-persone i { width: 2.7em; height: 2.7em; margin-left: -.55em; border-radius: 50%; border: 2px solid var(--app-fondo); display: grid; place-items: center; font: 750 .6em/1 var(--f-titoli); font-style: normal; color: var(--sul-acc); background: var(--acc); }
.te-persone i:first-child { margin-left: 0; }
.te-persone i:nth-child(2) { background: color-mix(in srgb, var(--acc) 60%, var(--app-ok)); }
.te-persone i:nth-child(3) { background: color-mix(in srgb, var(--acc) 50%, var(--app-ambra)); }
.te-tavola { position: relative; flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9em; }
.te-colonna { display: flex; flex-direction: column; gap: .55em; padding: .7em; border-radius: .8em; background: var(--app-fondo-2); }
.te-colonna h4 { display: flex; justify-content: space-between; font: 700 .76em/1 var(--f-dati); letter-spacing: .06em; text-transform: uppercase; color: var(--app-tenue); padding: .2em .2em .4em; }
.te-carta { display: grid; gap: .45em; padding: .65em .75em; border-radius: .6em; background: var(--app-fondo); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); border: 1px solid var(--app-bordo); font: 600 .8em/1.25 var(--f-testo); transition: opacity .5s ease; }
.te-carta small { display: flex; align-items: center; gap: .4em; font: 500 .85em/1 var(--f-testo); color: var(--app-tenue); }
.te-carta small i { width: .6em; height: .6em; border-radius: 50%; background: var(--acc); }
.demo-team[data-s="2"] .te-carta.altrui { opacity: .22; }
.te-posto { flex: none; height: 4.64em; border-radius: .5em; border: 1.5px dashed color-mix(in srgb, var(--acc) 35%, var(--app-bordo)); }
.te-mobile { position: absolute; z-index: 3; top: 3.0825em; height: 5.8em; align-content: center; width: calc((100% - 2.25em) / 3 - 1.75em); left: calc(.875em + var(--x, 0) * ((100% - 2.25em) / 3 + 1.125em)); border-color: color-mix(in srgb, var(--acc) 55%, var(--app-bordo)); box-shadow: var(--app-ombra); transition: left .9s cubic-bezier(.5, 0, .2, 1), top .9s cubic-bezier(.5, 0, .2, 1); }
.te-mobile .te-chi { display: flex; align-items: center; justify-content: space-between; }
.te-mobile .te-chi i { width: 1.6em; height: 1.6em; border-radius: 50%; display: grid; place-items: center; font: 750 .75em/1 var(--f-titoli); font-style: normal; background: var(--acc); color: var(--sul-acc); }

/* App di finanza personale */
.demo-finanza { --acc: var(--acc-finanza); }
.fi-saldo { display: grid; gap: .2em; padding: .2em 1.15em .9em; }
.fi-saldo small { font: 600 .72em/1.2 var(--f-testo); color: var(--app-tenue); }
.fi-saldo b { font: 800 2.4em/1 var(--f-titoli); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.fi-flussi { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; padding: 0 1.15em .8em; }
.fi-flusso { display: grid; gap: .3em; padding: .75em .85em; border-radius: .9em; background: var(--app-fondo-2); }
.fi-flusso small { font: 600 .66em/1.2 var(--f-testo); color: var(--app-tenue); }
.fi-flusso b { font: 800 1.1em/1 var(--f-titoli); font-variant-numeric: tabular-nums; }
.fi-flusso.entra b { color: var(--app-ok); }
.fi-flusso.esce b { color: var(--app-rosso); }
.fi-grafico { margin: 0 1.15em; padding: .8em .9em .5em; border-radius: .9em; border: 1px solid var(--app-bordo); }
.fi-grafico-testa { display: flex; justify-content: space-between; align-items: center; font: 600 .72em/1.2 var(--f-testo); color: var(--app-tenue); }
.fi-grafico-testa .u-chip { font-size: .92em; }
.fi-grafico svg { width: 100%; height: 6.5em; display: block; overflow: visible; }
.fi-area { fill: color-mix(in srgb, var(--acc) 16%, transparent); }
.fi-linea { fill: none; stroke: var(--acc); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 1)); transition: stroke-dashoffset 1.6s cubic-bezier(.4, 0, .2, 1); }
.fi-punto { fill: var(--acc); stroke: var(--app-fondo); stroke-width: 2.5; }
.fi-griglia { stroke: var(--app-bordo); stroke-width: 1; stroke-dasharray: 3 4; }
.fi-budget { display: grid; gap: .95em; padding: .2em 1.15em; }
.fi-voce { display: grid; gap: .4em; }
.fi-voce-testa { display: flex; justify-content: space-between; align-items: baseline; font: 600 .82em/1.2 var(--f-testo); }
.fi-voce-testa > span:not([class]) { font: 600 .9em/1 var(--f-testo); color: var(--app-tenue); font-variant-numeric: tabular-nums; }
.fi-voce-testa > span:not([class]) b { color: var(--app-testo); font-weight: 750; }
.fi-voce-testa .u-chip { margin: 0 auto 0 .55em; font-size: .78em; }
.fi-anello { position: relative; width: 10em; height: 10em; margin: .3em auto .6em; }
.fi-anello svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.fi-anello circle { fill: none; stroke-width: 9; }
.fi-anello .fondo-anello { stroke: var(--app-bordo); }
.fi-anello .pieno { stroke: var(--acc); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0) * 100); transition: stroke-dashoffset 1.4s cubic-bezier(.3, .7, .2, 1) .3s; }
.fi-anello-testo { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: .15em; }
.fi-anello-testo b { font: 800 1.55em/1 var(--f-titoli); font-variant-numeric: tabular-nums; }
.fi-anello-testo small { font: 600 .66em/1.2 var(--f-testo); color: var(--app-tenue); }
.fi-piano { display: flex; align-items: center; gap: .8em; margin: 0 1.15em; padding: .85em .95em; border-radius: .9em; background: color-mix(in srgb, var(--acc) 12%, var(--app-fondo)); }
.fi-piano > span:not([class]) { flex: 1; min-width: 0; font: 600 .8em/1.3 var(--f-testo); }
.fi-piano > span:not([class]) small { display: block; font-weight: 500; color: var(--app-tenue); }
.fi-piano > .u-ico { color: var(--acc); }
.fi-etichetta { margin-top: .85em; }
.fi-data { flex: none; display: grid; justify-items: center; gap: .1em; width: 3.3em; padding: .45em 0; border-radius: .7em; background: var(--app-fondo-2); font: 650 .62em/1 var(--f-dati); letter-spacing: .06em; text-transform: uppercase; color: var(--app-tenue); }
.fi-data b { font: 800 1.9em/1 var(--f-titoli); letter-spacing: -.02em; color: var(--app-testo); }
.fi-info { margin-top: .6em; background: var(--app-fondo-2); }
.fi-nota { margin: .85em 1.6em 0; font: 500 .72em/1.35 var(--f-testo); color: var(--app-tenue); }

/* Calcolatore per migrazioni IT */
.demo-migrazione { --acc: var(--acc-migrazione); }
.mi-pagina { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 1.1em; padding: 1.3em 1.6em; }
.mi-passi { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5em; }
.mi-passo { display: flex; align-items: center; gap: .5em; padding: .5em .65em; border-radius: .6em; font: 650 .76em/1 var(--f-testo); color: var(--app-tenue); background: var(--app-fondo-2); }
.mi-passo i { width: 1.6em; height: 1.6em; flex: none; border-radius: 50%; display: grid; place-items: center; font: 750 .85em/1 var(--f-titoli); font-style: normal; background: var(--app-fondo); }
.mi-segno { position: absolute; top: 0; bottom: 0; width: calc((100% - 1.5em) / 4); left: calc(var(--x, 0) * ((100% - 1.5em) / 4 + .5em)); border-radius: .6em; border: 1.5px solid var(--acc); background: color-mix(in srgb, var(--acc) 10%, transparent); transition: left .6s cubic-bezier(.4, 0, .2, 1); }
.mi-corpo { position: relative; flex: 1; }
.mi-scena { position: absolute; inset: 0; display: flex; flex-direction: column; gap: .9em; }
.mi-zona { position: relative; flex: 1; display: grid; place-items: center; align-content: center; gap: .6em; border-radius: 1em; border: 2px dashed var(--app-bordo); background: var(--app-fondo-2); text-align: center; font: 500 .85em/1.35 var(--f-testo); color: var(--app-tenue); }
.mi-zona > .u-ico { width: 2.4em; height: 2.4em; color: var(--acc); }
.mi-file { display: flex; align-items: center; gap: .8em; padding: .75em .95em; border-radius: .8em; background: var(--app-fondo); border: 1px solid var(--app-bordo); box-shadow: var(--app-ombra); width: 62%; text-align: left; }
.mi-file .mi-doc { flex: none; width: 2.3em; height: 2.8em; border-radius: .35em; display: grid; place-items: end center; padding-bottom: .3em; font: 800 .6em/1 var(--f-dati); color: var(--sul-acc); background: var(--app-ok); }
.mi-file span { flex: 1; display: grid; gap: .35em; font: 650 .82em/1 var(--f-testo); color: var(--app-testo); }
.mi-file small { font: 500 .85em/1 var(--f-testo); color: var(--app-tenue); }
.mi-grande { display: flex; align-items: baseline; gap: .5em; }
.mi-grande b { font: 800 2.6em/1 var(--f-titoli); letter-spacing: -.03em; color: var(--acc); font-variant-numeric: tabular-nums; }
.mi-grande span { font: 650 1em/1.2 var(--f-testo); }
.mi-chips { display: flex; flex-wrap: wrap; gap: .45em; }
.mi-grafico { position: relative; flex: 1; display: grid; grid-template-columns: 3.4em minmax(0, 1fr); gap: .4em; padding-bottom: 1.8em; }
.mi-assi { position: relative; font: 500 .66em/1 var(--f-dati); color: var(--app-tenue); }
.mi-assi span { position: absolute; right: .3em; transform: translateY(50%); }
.mi-area { position: relative; border-left: 1.5px solid var(--app-bordo); border-bottom: 1.5px solid var(--app-bordo); }
.mi-linea { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--app-bordo); }
.mi-barre { position: absolute; inset: 0 0 0 0; display: flex; justify-content: space-around; align-items: flex-end; }
.mi-barra { position: relative; width: 22%; height: calc(var(--p, 0) * 100%); border-radius: .5em .5em 0 0; background: var(--app-tenue); transition: height 1.2s cubic-bezier(.3, .7, .2, 1); transition-delay: var(--ritardo, 0s); }
.mi-barra.nuova { background: var(--acc); }
.mi-barra b { position: absolute; left: 50%; bottom: calc(100% + .45em); transform: translateX(-50%); font: 750 .82em/1 var(--f-titoli); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mi-barra small { position: absolute; left: 50%; top: calc(100% + .55em); transform: translateX(-50%); font: 600 .72em/1 var(--f-testo); color: var(--app-tenue); white-space: nowrap; }
.mi-risparmio { display: grid; gap: .5em; padding: 1.2em 1.3em; border-radius: 1em; background: color-mix(in srgb, var(--acc) 10%, var(--app-fondo)); border: 1px solid color-mix(in srgb, var(--acc) 30%, var(--app-bordo)); }
.mi-risparmio small { font: 600 .78em/1.2 var(--f-testo); color: var(--app-tenue); }
.mi-risparmio b { font: 800 2.9em/1 var(--f-titoli); letter-spacing: -.035em; color: var(--acc); font-variant-numeric: tabular-nums; }
.mi-report { display: flex; gap: .7em; }
.mi-report .u-bottone { flex: 1; }
.mi-righe { display: grid; gap: .1em; font: 500 .78em/1.2 var(--f-dati); }
.mi-riga { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: .5em; padding: .5em .7em; border-radius: .45em; background: var(--app-fondo-2); }
.mi-riga span:not(:first-child) { color: var(--app-tenue); }
.mi-domanda { display: flex; align-items: center; gap: .7em; padding: .65em .85em; border-radius: .8em; border: 1.5px solid color-mix(in srgb, var(--acc) 40%, var(--app-bordo)); background: color-mix(in srgb, var(--acc) 6%, var(--app-fondo)); }
.mi-domanda > span:not([class]) { flex: 1; min-width: 0; display: grid; gap: .2em; font: 650 .82em/1.25 var(--f-testo); }
.mi-domanda small { font: 500 .85em/1.2 var(--f-testo); color: var(--app-tenue); }
.mi-risposta { flex: none; min-width: 3.4em; padding: .45em .7em; border-radius: .5em; border: 1.5px solid var(--acc); background: var(--app-fondo); font: 750 .85em/1 var(--f-dati); text-align: center; }
.mi-indice { list-style: none; margin: 0; padding: 0; display: grid; gap: .5em; }
.mi-indice li { display: flex; align-items: center; gap: .6em; font: 600 .82em/1.2 var(--f-testo); }
.mi-indice .u-ico { width: 1.35em; height: 1.35em; color: var(--app-ok); }

/* Siti per aziende: officina e impresa edile */
.demo-officina { --acc: var(--acc-officina); }
.demo-edile { --acc: var(--acc-edile); }
.si-nav { position: absolute; z-index: 3; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 1.6em; height: 3.6em; padding: 0 1.8em; background: var(--app-fondo); border-bottom: 1px solid var(--app-bordo); font: 600 .8em/1 var(--f-testo); color: var(--app-tenue); }
.si-marchio { display: flex; align-items: center; gap: .55em; margin-right: auto; }
.si-marchio i { width: 1.7em; height: 1.7em; border-radius: .4em; background: var(--acc); }
.si-marchio b { width: 6.5em; height: .65em; border-radius: .3em; background: var(--app-testo); opacity: .8; }
.si-nav .u-bottone { font-size: .95em; padding: .65em 1em; }
.si-eroe { position: absolute; inset: 3.6em 0 0 0; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 1.5em; padding: 0 2.2em; background: linear-gradient(115deg, var(--app-fondo) 45%, color-mix(in srgb, var(--acc) 9%, var(--app-fondo))); }
.si-eroe-testo { display: grid; gap: .9em; justify-items: start; }
.si-occhiello { font: 650 .7em/1.2 var(--f-dati); letter-spacing: .12em; text-transform: uppercase; color: var(--acc); }
.si-eroe h5 { margin: 0; font: 800 2.15em/1.05 var(--f-titoli); letter-spacing: -.03em; color: var(--app-testo); }
.si-eroe p { font: 500 .88em/1.4 var(--f-testo); color: var(--app-tenue); max-width: 22em; }
.si-disegno { display: grid; place-items: center; }
.si-disegno svg { width: 92%; height: auto; overflow: visible; }
.si-pezzo { fill: none; stroke: var(--app-testo); stroke-width: 1.6; stroke-linejoin: round; }
.si-pezzo-acc { fill: none; stroke: var(--acc); stroke-width: 1.6; }
.si-quota { fill: none; stroke: var(--app-tenue); stroke-width: .8; stroke-dasharray: 3 3; }
.si-quota-testo { fill: var(--app-tenue); font: 600 7px var(--f-dati); }
.gira { transform-box: fill-box; transform-origin: center; animation: gira 22s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.si-numeri { position: absolute; z-index: 4; left: 2.2em; right: 2.2em; bottom: 1.8em; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 1em; background: var(--app-fondo); border: 1px solid var(--app-bordo); box-shadow: var(--app-ombra); }
.si-numeri div { display: grid; gap: .35em; padding: 1em 1.2em; border-left: 1px solid var(--app-bordo); }
.si-numeri div:first-child { border-left: 0; }
.si-numeri b { font: 800 1.9em/1 var(--f-titoli); letter-spacing: -.03em; color: var(--acc); font-variant-numeric: tabular-nums; }
.si-numeri small { font: 600 .72em/1.25 var(--f-testo); color: var(--app-tenue); }
.si-velo { position: absolute; z-index: 5; inset: 3.6em 0 0 0; background: color-mix(in srgb, var(--app-testo) 38%, transparent); }
.si-modulo { position: absolute; z-index: 6; top: 4.9em; left: 50%; width: 27em; margin-left: -13.5em; display: flex; flex-direction: column; gap: .8em; padding: 1.3em 1.4em; border-radius: 1em; background: var(--app-fondo); box-shadow: var(--app-ombra); }
.si-modulo h6 { margin: 0; font: 800 1.2em/1.15 var(--f-titoli); color: var(--app-testo); letter-spacing: -.015em; }
.si-campo { display: grid; gap: .3em; font: 600 .7em/1 var(--f-testo); color: var(--app-tenue); }
.si-campo span { display: block; min-height: 2.6em; padding: .75em .8em; border-radius: .55em; border: 1.5px solid var(--app-bordo); font: 500 1.2em/1 var(--f-testo); color: var(--app-testo); background: var(--app-fondo-2); white-space: nowrap; overflow: hidden; }
.si-allegato { display: flex; align-items: center; gap: .65em; padding: .6em .75em; border-radius: .6em; border: 1.5px dashed color-mix(in srgb, var(--acc) 60%, var(--app-bordo)); background: color-mix(in srgb, var(--acc) 8%, var(--app-fondo)); font: 650 .8em/1 var(--f-testo); }
.si-allegato .u-ico { color: var(--acc); }
.si-allegato small { margin-left: auto; color: var(--app-tenue); font-weight: 500; }
.si-modulo .u-bottone { margin-top: .3em; padding-block: .85em; }
.browser-pagina > .u-toast { z-index: 7; left: 0; right: 0; bottom: 1.3em; width: 25em; margin-inline: auto; }
.si-scelte { display: flex; flex-wrap: wrap; gap: .4em; }
.si-scelte span { padding: .5em .8em; border-radius: 999px; border: 1.5px solid var(--app-bordo); font: 650 .72em/1 var(--f-testo); color: var(--app-tenue); }
.si-scelte span { position: relative; }
.si-scelto { position: absolute; inset: -1.5px; border-radius: 999px; border: 1.5px solid var(--acc); background: color-mix(in srgb, var(--acc) 14%, transparent); }
.si-galleria { position: absolute; inset: 3.6em 0 0 0; padding: 1.6em 2.2em; display: grid; grid-template-rows: auto 1fr; gap: 1em; background: var(--app-fondo); }
.si-galleria h5 { margin: 0; font: 800 1.5em/1.1 var(--f-titoli); letter-spacing: -.02em; color: var(--app-testo); }
.si-foto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; min-height: 0; }
.si-foto figure { margin: 0; display: grid; grid-template-rows: 1fr auto; gap: .5em; min-height: 0; }
.si-foto .riquadro-foto { border-radius: .8em; overflow: hidden; display: grid; place-items: center; background: linear-gradient(160deg, color-mix(in srgb, var(--acc) 30%, var(--app-fondo-2)), color-mix(in srgb, var(--acc) 8%, var(--app-fondo-2))); }
.si-foto svg { width: 70%; height: auto; }
.si-foto figcaption { font: 650 .78em/1.2 var(--f-testo); color: var(--app-testo); }
.si-foto figcaption small { display: block; font-weight: 500; color: var(--app-tenue); margin-top: .2em; }
.si-tetto { fill: none; stroke: var(--app-testo); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 1)); transition: stroke-dashoffset 2.2s cubic-bezier(.45, 0, .2, 1) .3s; }
.si-tetto-acc { fill: none; stroke: var(--acc); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 1)); transition: stroke-dashoffset 1.6s cubic-bezier(.45, 0, .2, 1) 1.4s; }
.si-ill { fill: color-mix(in srgb, var(--app-fondo) 75%, transparent); stroke: var(--app-testo); stroke-width: 1.6; stroke-linejoin: round; }
.si-ill-acc { fill: var(--acc); }

/* Sito con coda dal vivo per un artista */
.demo-artista { --acc: var(--acc-artista); }
.demo-artista .telefono-schermo { background: var(--palco-fondo); color: var(--palco-testo); }
.demo-artista .u-pannello { background: var(--palco-fondo); }
.ar-testa { display: flex; align-items: center; gap: .6em; padding: .3em 1.15em .8em; }
.ar-testa .u-titolo { flex: 1; color: var(--palco-testo); }
.ar-live { display: inline-flex; align-items: center; gap: .4em; padding: .3em .6em; border-radius: 999px; background: color-mix(in srgb, var(--acc) 22%, transparent); color: var(--acc); font: 750 .62em/1 var(--f-dati); letter-spacing: .1em; }
.ar-live i { width: .55em; height: .55em; border-radius: 50%; background: var(--acc); }
.pulsa { animation: pulsa 1.4s ease-in-out infinite; }
@keyframes pulsa { 50% { opacity: .35; transform: scale(.8); } }
.ar-cerca { display: flex; align-items: center; gap: .55em; margin: 0 1.15em .7em; padding: .75em .9em; border-radius: .9em; background: var(--palco-fondo-2); border: 1px solid var(--palco-bordo); color: var(--palco-tenue); font: 500 .85em/1 var(--f-testo); }
.ar-cerca b { color: var(--palco-testo); font-weight: 600; }
.ar-cerca .cursore-testo { display: inline-block; width: 1.5px; height: 1.1em; margin-left: -.3em; background: var(--acc); }
.ar-lista { list-style: none; margin: 0; padding: 0 1.15em; display: grid; gap: .5em; }
.ar-brano { display: flex; align-items: center; gap: .7em; padding: .65em .7em; border-radius: .9em; background: var(--palco-fondo-2); }
.ar-copertina { flex: none; width: 2.6em; height: 2.6em; border-radius: .55em; display: grid; place-items: center; background: linear-gradient(140deg, var(--acc), color-mix(in srgb, var(--acc) 40%, var(--palco-fondo))); color: var(--sul-acc); }
.ar-copertina .u-ico { width: 1.3em; height: 1.3em; }
.ar-brano > span:not([class]) { flex: 1; display: grid; gap: .2em; min-width: 0; font: 600 .82em/1.2 var(--f-testo); }
.ar-brano small { font: 500 .85em/1.2 var(--f-testo); color: var(--palco-tenue); }
.ar-prenota { position: relative; display: grid; }
.ar-prenota > * { grid-area: 1 / 1; }
.ar-prenota .u-bottone { font-size: .72em; padding: .6em .85em; }
.ar-prenota .fatto { background: color-mix(in srgb, var(--app-ok) 25%, var(--palco-fondo-2)); color: var(--app-ok); }
.ar-trovati { margin: -.2em 0 .8em; padding-inline: 1.7em; font: 600 .68em/1.2 var(--f-dati); letter-spacing: .04em; color: var(--palco-tenue); }
.ar-palco { display: flex; align-items: center; gap: .7em; margin: 0 1.15em .8em; padding: .85em .9em; border-radius: .9em; background: linear-gradient(120deg, color-mix(in srgb, var(--acc) 30%, var(--palco-fondo-2)), var(--palco-fondo-2)); }
.ar-palco small { display: block; font: 650 .64em/1.2 var(--f-dati); letter-spacing: .1em; text-transform: uppercase; color: var(--palco-tenue); }
.ar-palco b { font: 750 .95em/1.2 var(--f-titoli); }
.ar-palco .u-ico { width: 1.7em; height: 1.7em; color: var(--acc); }
.ar-coda { list-style: none; margin: 0; padding: 0 1.15em; display: grid; gap: .45em; transition: opacity .5s ease; }
.demo-artista[data-s="3"] .ar-coda { opacity: .35; }
.ar-coda li { display: flex; align-items: center; gap: .7em; padding: .6em .75em; border-radius: .8em; background: var(--palco-fondo-2); font: 600 .8em/1.2 var(--f-testo); }
.ar-coda li > i { flex: none; width: 1.9em; height: 1.9em; border-radius: 50%; display: grid; place-items: center; font: 750 .85em/1 var(--f-titoli); font-style: normal; background: var(--palco-bordo); color: var(--palco-testo); }
.ar-coda li > span:not([class]) { flex: 1; min-width: 0; display: grid; gap: .15em; }
.ar-coda li.via:not([data-in]) { display: none; }
.ar-coda li small { font: 500 .85em/1.2 var(--f-testo); color: var(--palco-tenue); }
.ar-coda li.tu { background: color-mix(in srgb, var(--acc) 24%, var(--palco-fondo-2)); box-shadow: inset 0 0 0 1.5px var(--acc); }
.ar-coda li.tu > i { background: var(--acc); color: var(--sul-acc); }
.ar-posto { display: flex; align-items: center; justify-content: space-between; margin: 0 1.15em .7em; padding: .8em .95em; border-radius: .9em; background: var(--palco-fondo-2); font: 600 .8em/1.2 var(--f-testo); color: var(--palco-tenue); }
.ar-posto b { font: 800 1.7em/1 var(--f-titoli); color: var(--acc); font-variant-numeric: tabular-nums; }
.ar-posto small { display: block; margin-top: .3em; font: 500 .88em/1.2 var(--f-testo); color: var(--palco-tenue); }
.ar-posto > span:first-child { color: var(--palco-testo); }
.ar-nota { margin: .75em 1.15em 0; text-align: center; font: 500 .68em/1.3 var(--f-testo); color: var(--palco-tenue); }
.ar-avviso { position: absolute; z-index: 5; left: 1em; right: 1em; top: 34%; display: grid; justify-items: center; gap: .6em; padding: 1.4em 1.2em; border-radius: 1.2em; text-align: center; background: linear-gradient(150deg, var(--acc), color-mix(in srgb, var(--acc) 55%, var(--palco-fondo))); color: var(--sul-acc); box-shadow: 0 1.2em 2.6em -1em color-mix(in srgb, var(--acc) 70%, transparent); }
.ar-avviso b { font: 800 1.45em/1.1 var(--f-titoli); letter-spacing: -.02em; }
.ar-avviso span { font: 600 .85em/1.3 var(--f-testo); }
.ar-avviso .u-ico { width: 2.4em; height: 2.4em; }

/* Iscrizioni online per una società sportiva */
.demo-palestra { --acc: var(--acc-palestra); }
.demo-palestra .u-corpo { display: flex; flex-direction: column; }
.pa-area { position: relative; flex: 1; }
.pa-passi { display: flex; align-items: center; gap: .7em; padding: 0 1.15em .8em; font: 600 .7em/1 var(--f-dati); color: var(--app-tenue); }
.pa-passi .u-barra-prog { flex: 1; }
.pa-corsi { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; padding: 0 1.15em; }
.pa-corso { position: relative; display: grid; gap: .5em; padding: .8em .8em .85em; border-radius: .9em; border: 1.5px solid var(--app-bordo); background: var(--app-fondo); font: 650 .8em/1.2 var(--f-testo); }
.pa-corso .u-ico { width: 1.8em; height: 1.8em; color: var(--acc); }
.pa-corso small { font: 500 .85em/1.2 var(--f-testo); color: var(--app-tenue); }
.pa-scelto { position: absolute; inset: -1.5px; border-radius: .9em; border: 2px solid var(--acc); background: color-mix(in srgb, var(--acc) 8%, transparent); }
.pa-scelto::after { content: ""; position: absolute; right: .55em; top: .55em; width: 1.3em; height: 1.3em; border-radius: 50%; background: var(--acc); }
.pa-scelto::before { content: ""; position: absolute; z-index: 1; right: .93em; top: .9em; width: .55em; height: .3em; border-left: 2px solid var(--sul-acc); border-bottom: 2px solid var(--sul-acc); transform: rotate(-45deg); }
.pa-opzioni { display: grid; gap: .65em; padding: 0 1.15em; }
.pa-opzione { position: relative; display: grid; gap: .3em; padding: 1em 1em; border-radius: .9em; border: 1.5px solid var(--app-bordo); font: 650 .86em/1.25 var(--f-testo); }
.pa-opzione b { font: 800 1.35em/1 var(--f-titoli); color: var(--app-testo); font-variant-numeric: tabular-nums; }
.pa-opzione small { font: 500 .85em/1.3 var(--f-testo); color: var(--app-tenue); }
.pa-documenti { display: grid; gap: .1em; padding: 0 1.15em; }
.pa-documento { display: flex; align-items: center; gap: .75em; padding: .7em 0; border-bottom: 1px solid var(--app-bordo); font: 600 .84em/1.25 var(--f-testo); }
.pa-documento > span:not([class]) { flex: 1; min-width: 0; display: grid; gap: .15em; }
.pa-documento small { font: 500 .85em/1.2 var(--f-testo); color: var(--app-tenue); }
.pa-documento .u-ico { width: 1.4em; height: 1.4em; color: var(--app-tenue); }
.pa-fatto { flex: 1; display: grid; place-items: center; align-content: center; gap: .9em; padding: 0 1.6em 2em; text-align: center; }
.pa-fatto b { font: 800 1.45em/1.15 var(--f-titoli); letter-spacing: -.02em; }
.pa-fatto span { font: 500 .85em/1.4 var(--f-testo); color: var(--app-tenue); }
.pa-cerchio { width: 6em; height: 6em; }
.pa-cerchio circle { fill: color-mix(in srgb, var(--acc) 14%, transparent); stroke: var(--acc); stroke-width: 3; }
.pa-cerchio path { fill: none; stroke: var(--acc); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .7s ease-out .5s; }
.demo .pa-cerchio:not([data-in]) path { stroke-dashoffset: 1; }
.pa-azioni { flex: none; display: grid; padding: .75em 1.15em 1.35em; border-top: 1px solid var(--app-bordo); background: var(--app-fondo); }
.pa-azioni .u-bottone { padding-block: .9em; }

/* ───────── Prima e dopo, animato (nell'apertura) ─────────
   Scena 1: gli appunti si scrivono riga per riga. Scena 2: i dubbi si
   segnalano (sottolineatura ondulata, righe barrate, avvisi rossi).
   Scena 3: gli appunti passano nel software e arriva la scheda dell'app.
   Scena 4: il totale si calcola da solo. */
.trasforma { display: grid; gap: 1rem; width: 100%; max-width: 36rem; justify-self: center; }
.schede-mini { display: flex; min-width: 0; }
.schede-mini [role="tablist"] {
  display: flex; gap: .2rem; max-width: 100%; padding: .25rem; overflow-x: auto; scrollbar-width: none;
  border-radius: 12px; border: 1px solid var(--bordo); background: var(--vetro);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.schede-mini [role="tablist"]::-webkit-scrollbar { display: none; }
.scheda-mini { flex: none; padding: .5rem .85rem; border: 0; border-radius: 9px; background: transparent; color: var(--tenue); font: 500 .88rem/1 var(--f-testo); cursor: pointer; transition: color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.scheda-mini:hover { color: var(--inchiostro); }
.scheda-mini[aria-selected="true"] { color: var(--inchiostro); background: var(--superficie); box-shadow: 0 1px 2px rgba(10, 22, 40, .1), 0 0 0 1px var(--bordo); }
@media (max-width: 420px) { .scheda-mini { padding: .48rem .62rem; font-size: .82rem; } }
.trasf-palco { container-type: inline-size; width: 100%; }
.trasf-fig { margin: 0; display: grid; gap: .7rem; }
.trasf-didascalia { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.trasf-didascalia p { display: grid; gap: .35rem; max-width: 30rem; font-size: .95rem; line-height: 1.45; color: var(--tenue); }
.trasf-didascalia small { font: 500 .66rem/1.3 var(--f-dati); letter-spacing: .1em; text-transform: uppercase; }
.trasf-didascalia .demo-pausa { flex: none; margin-top: .1rem; }

.trasf { --acc: var(--acc-marchio); position: relative; aspect-ratio: 1 / .8; font-size: calc(100cqw / 27); }
@container (max-width: 400px) { .trasf { font-size: calc(100cqw / 24); aspect-ratio: 1 / .9; } }
.trasf::before { content: ""; position: absolute; z-index: -1; left: 30%; right: -4%; top: 30%; bottom: -6%; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) 20%, transparent), transparent); }
.trasf-chip { flex: none; padding: .42em .62em; border-radius: .45em; border: 1px solid var(--app-bordo); background: var(--app-fondo); color: var(--app-tenue); font: 600 max(.6rem, .62em)/1 var(--f-dati); letter-spacing: .1em; text-transform: uppercase; }
.trasf-chip.dopo { border-color: color-mix(in srgb, var(--acc) 35%, transparent); background: color-mix(in srgb, var(--acc) 12%, var(--app-fondo)); color: var(--acc); }

/* Gli appunti di prima */
.nota {
  position: absolute; left: 0; top: 0; width: 58%; overflow: hidden;
  border-radius: .9em; border: 1px solid var(--app-bordo); background: var(--app-fondo); color: var(--app-testo);
  box-shadow: var(--ombra); font: 400 .78em/1.25 var(--f-testo);
  transform-origin: 20% 20%; transition: transform 1s cubic-bezier(.2, .8, .2, 1), opacity .8s ease;
}
.nota-testa { display: flex; align-items: center; gap: .6em; padding: .7em .95em; border-bottom: 1px solid var(--app-bordo); background: var(--app-fondo-2); }
.nota-app { flex: 1; min-width: 0; font: 600 .92em/1 var(--f-testo); color: var(--app-tenue); }
.nota-testa > i { width: .34em; height: .34em; border-radius: 50%; background: var(--app-tenue); opacity: .55; }
.nota-righe { counter-reset: riga; padding: .5em 0 .75em; }
.nota .riga { position: relative; display: block; padding: .34em .9em .34em 2.65em; white-space: nowrap; counter-increment: riga; }
.nota .riga::before { content: counter(riga); position: absolute; left: .8em; top: .34em; width: 1.1em; text-align: right; font: 500 .8em/1.56 var(--f-dati); color: var(--app-tenue); opacity: .65; }
.nota .riga > .scrivi { display: inline-block; }
.nota-titolo { font-weight: 700; }
.trasf[data-s="3"] .nota, .trasf[data-s="4"] .nota { transform: translate(-1%, -1%) scale(.97); opacity: .9; }
/* Scena 3: una linea di lettura passa sugli appunti */
.nota::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 28%; pointer-events: none; opacity: 0; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--acc) 14%, transparent) 75%, color-mix(in srgb, var(--acc) 55%, transparent)); border-bottom: 1.5px solid var(--acc); }
.trasf.va[data-s="3"] .nota::after { animation: lettura 1.5s cubic-bezier(.45, 0, .3, 1) .05s both; }
@keyframes lettura { 0% { opacity: 0; transform: translateY(-100%); } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: translateY(360%); } }

/* Scrittura riga per riga */
.demo .scrivi[data-vis] { transition: clip-path .85s linear, opacity 0s, visibility 0s; }
.demo .scrivi[data-vis]:not([data-in]) { opacity: 1; visibility: visible; clip-path: inset(-.6em 100% -.6em -.3em); }
.demo .scrivi[data-vis][data-in] { clip-path: inset(-.6em -.6em -.6em -.3em); transition-delay: var(--ritardo, 0s); }

/* I dubbi: sottolineatura ondulata, righe barrate, avvisi */
.dubbio, .barrato { position: relative; display: inline-block; }
.ondina {
  position: absolute; left: -.05em; right: -.05em; bottom: -.32em; height: .36em; background: var(--app-rosso);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 4'%3E%3Cpath d='M0 2Q2 0 4 2T8 2' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E") 0 50% / .6em 100% repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 4'%3E%3Cpath d='M0 2Q2 0 4 2T8 2' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E") 0 50% / .6em 100% repeat-x;
}
.demo .ondina[data-vis] { transition: clip-path .6s ease-out, opacity 0s, visibility 0s; }
.demo .ondina[data-vis]:not([data-in]) { opacity: 1; visibility: visible; clip-path: inset(0 100% 0 0); }
.demo .ondina[data-vis][data-in] { clip-path: inset(0); transition-delay: var(--ritardo, 0s); }
.tratto { position: absolute; left: -.12em; right: -.12em; top: 54%; height: .1em; border-radius: .1em; background: var(--app-rosso); transform-origin: left center; }
.demo .tratto[data-vis] { transition: transform .45s ease-out, opacity 0s, visibility 0s; }
.demo .tratto[data-vis]:not([data-in]) { opacity: 1; visibility: visible; transform: scaleX(0); }
.demo .tratto[data-vis][data-in] { transition-delay: var(--ritardo, 0s); }
.barrato:has(.tratto[data-in]) { color: var(--app-tenue); transition: color .4s ease .3s; }
.segnale { display: inline-block; margin-left: .2em; padding: .14em .42em; border-radius: .4em; border: 1px solid color-mix(in srgb, var(--app-rosso) 32%, transparent); background: color-mix(in srgb, var(--app-rosso) 12%, var(--app-fondo)); color: var(--app-rosso); font: 700 .8em/1.15 var(--f-dati); vertical-align: .06em; }

/* Il passaggio: una linea che porta gli appunti nell'app */
/* misure in cqw (larghezza della scena): la linea arriva sempre al bordo alto della scheda dell'app */
.trasf-flusso { position: absolute; left: 58%; top: 6.4cqw; width: 27cqw; height: 20.8cqw; color: var(--acc); }
.trasf-flusso svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; }
.flusso-base, .flusso-scorre { stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.flusso-base { stroke: color-mix(in srgb, var(--acc) 34%, transparent); stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .8s ease-out .1s; }
.flusso-scorre { stroke: var(--acc); stroke-dasharray: .05 .09; animation: flusso 1.3s linear infinite; transition: opacity .3s ease .8s; }
@keyframes flusso { to { stroke-dashoffset: -.14; } }
.demo:not(.va) .flusso-scorre { animation-play-state: paused; }
.trasf-flusso::before, .trasf-flusso > i { content: ""; position: absolute; border-radius: 50%; }
.trasf-flusso::before { left: -.26em; top: calc(6% - .26em); width: .52em; height: .52em; background: var(--app-fondo); border: 2px solid color-mix(in srgb, var(--app-rosso) 75%, transparent); }
.trasf-flusso > i { left: calc(100% - .3em); top: calc(100% - .3em); width: .6em; height: .6em; background: var(--acc); box-shadow: 0 0 0 .3em color-mix(in srgb, var(--acc) 20%, transparent); transition: transform .3s ease .75s; }
.trasf-flusso-etichetta { position: absolute; left: 100%; top: 66%; transform: translate(-50%, -50%); padding: .5em .7em; border-radius: 999px; white-space: nowrap; border: 1px solid color-mix(in srgb, var(--acc) 38%, transparent); background: var(--app-fondo); color: var(--acc); box-shadow: var(--app-ombra); font: 600 max(.6rem, .58em)/1 var(--f-dati); letter-spacing: .1em; text-transform: uppercase; transition: opacity .35s ease .55s, transform .45s cubic-bezier(.2, .8, .2, 1) .55s; }
.demo .trasf-flusso[data-vis]:not([data-in]) { opacity: 1; visibility: visible; }
.demo .trasf-flusso:not([data-in]) .flusso-base { stroke-dashoffset: 1; }
.demo .trasf-flusso:not([data-in]) .flusso-scorre, .demo .trasf-flusso:not([data-in]) .trasf-flusso-etichetta { opacity: 0; transition-delay: 0s; }
.demo .trasf-flusso:not([data-in]) .trasf-flusso-etichetta { transform: translate(-50%, -30%); }
.demo .trasf-flusso:not([data-in]) > i { transform: scale(0); transition-delay: 0s; }
.demo .trasf-flusso:not([data-in])::before { opacity: 0; }

/* La scheda dell'app, dopo */
.trasf-app {
  position: absolute; right: 0; top: 27.2cqw; width: 64%; border-radius: 1em; overflow: hidden;
  background: var(--app-fondo); color: var(--app-testo); border: 1px solid var(--app-bordo);
  box-shadow: var(--ombra-forte), 0 24px 60px -30px color-mix(in srgb, var(--acc) 70%, transparent);
  font: 400 .74em/1.35 var(--f-testo);
}
.demo .trasf-app[data-vis]:not([data-in]) { transform: translateY(7%) scale(.97); }
.trasf.va[data-s="3"] .trasf-app, .trasf.va[data-s="4"] .trasf-app {
  border-color: transparent; animation: gira-bordo 3.2s linear infinite;
  background: linear-gradient(var(--app-fondo), var(--app-fondo)) padding-box, conic-gradient(from var(--angolo), var(--app-bordo) 0 58%, color-mix(in srgb, var(--acc) 90%, transparent) 74%, var(--app-bordo) 90%) border-box;
}
.ta-testa { display: flex; align-items: center; gap: .7em; padding: .85em 1em; border-bottom: 1px solid var(--app-bordo); }
.ta-testa > i { width: .7em; height: .7em; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 .25em color-mix(in srgb, var(--acc) 18%, transparent); flex: none; }
.ta-testa div { flex: 1; display: grid; gap: .2em; min-width: 0; }
.ta-titolo { font: 700 1.08em/1.2 var(--f-titoli); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-sotto { font: 500 .8em/1.2 var(--f-dati); color: var(--app-tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-righe { list-style: none; margin: 0; padding: .25em 1em; }
.ta-riga { display: flex; align-items: center; gap: .6em; padding: .55em 0; border-bottom: 1px solid var(--app-bordo); }
.ta-riga:last-child { border-bottom: 0; }
.ta-riga > span:not([class]) { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-riga .u-avatar { width: 2.2em; height: 2.2em; font-size: .78em; }
.ta-fondo { display: flex; align-items: center; justify-content: space-between; gap: .6em; padding: .75em 1em; border-top: 1px solid var(--app-bordo); background: color-mix(in srgb, var(--acc) 7%, var(--app-fondo)); font: 600 .9em/1.25 var(--f-testo); }
.ta-fondo b { font: 800 1.25em/1 var(--f-titoli); color: var(--acc); font-variant-numeric: tabular-nums; white-space: nowrap; }