/* Sito WAL — design system. Un solo foglio di stile, caratteri serviti dal sito (Poppins, Lato: OFL).
   Marca = quella del gestionale (lynx-piano-enterprise/frontend: tailwind.config.js, index.css,
   AppLayout.tsx): BLU NOTTE della barra laterale #0B1B35 + AZZURRO #0076DD (brand-600, pulsanti con testo bianco, 4,5:1)
   + CELESTE #01B2FD (accent-500) / #38C3FE (accent-400) del logo, antracite #1E293B per il testo,
   Poppins per testo e titoli, Lato per numeri e tabelle.
   Il celeste è uno sfondo (evidenze, filetti, pulsanti sul blu notte) con testo blu notte sopra (7,2:1): mai testo bianco
   piccolo sul celeste (2,4:1) e mai testo celeste sul bianco; sul bianco l'«azzurro da leggere» è #0069C7 (5,5:1).
   Colori semantici: chiaro di base, scuro con prefers-color-scheme. Contrasti misurati (WCAG 2.2 AA):
   testo ≥ 4,5:1, elementi d'interfaccia e fuoco ≥ 3:1, in entrambi i temi. */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("/caratteri/poppins-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/caratteri/poppins-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("/caratteri/poppins-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("/caratteri/poppins-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("/caratteri/lato-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("/caratteri/lato-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 900; font-display: swap; src: url("/caratteri/lato-latin-900-normal.woff2") format("woff2"); }

:root {
  /* marca (dal gestionale): blu notte della barra laterale, celeste accent */
  --notte: #0B1B35; --notte-2: #12264A; --notte-3: #1E3358;
  --celeste: #01B2FD;          /* accent-500: sfondo di evidenze e pulsanti sul blu notte, testo blu notte sopra (7,2:1) */
  --celeste-chiaro: #38C3FE;   /* accent-400: hover, testo celeste sul blu notte (8,9:1) */
  --celeste-scuro: #0097D6;    /* accent-600: decorativo (filetti, sottolineature), mai per il testo */
  /* semantici — tema chiaro */
  --sfondo: #ffffff; --sfondo-2: #F8FAFC; --sfondo-3: #F1F5F9; --superficie: #ffffff;
  --testo: #1E293B;            /* antracite: 14,6:1 */
  --tenue: #475569;            /* 7,6:1 sul bianco, 6,9:1 su --sfondo-3 */
  --titoli: #0B1B35;           /* 17,4:1 */
  --bordo: #E2E8F0; --bordo-forte: #64748B;   /* bordo dei controlli: 4,8:1 */
  --link: #0069C7;             /* azzurro sottolineato (filetto celeste): 5,5:1 */
  --link-filetto: #0097D6;
  --accento-testo: #005FB8;    /* 6,3:1 sul bianco, 6,0:1 su --sfondo-2 */
  --fuoco: #0069C7;            /* 5,5:1 sul bianco */
  --evidenza-sfondo: #E6F5FF; --evidenza-testo: #0A3A6E;   /* 9,6:1 */
  --icona-sfondo: #D6EFFF; --icona-testo: #0B1B35;
  --scelto-sfondo: #0B1B35; --scelto-testo: #ffffff;
  --errore: #b42318; --errore-sfondo: #fff4f2;
  --avviso: #8a4b00; --avviso-sfondo: #fff7e6; --avviso-bordo: #e2b04a;
  --successo: #15803D; --successo-sfondo: #F0FDF4;          /* 4,8:1 */
  --info: #1D4ED8; --info-sfondo: #EFF6FF;                  /* 6,2:1 */
  --primario-sfondo: #0076DD; --primario-testo: #ffffff; --primario-hover: #005FB8;
  --cta-sfondo: #0B1B35; --cta-testo: #ffffff;
  --ombra-1: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
  --ombra-2: 0 2px 4px rgba(15, 23, 42, .05), 0 12px 32px rgba(15, 23, 42, .10);
  --ombra-3: 0 24px 64px rgba(15, 23, 42, .18);
  --raggio-s: 8px; --raggio: 14px; --raggio-l: 22px;
  --larghezza: 1200px; --stretto: 760px; --medio: 960px;
  --carattere: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --carattere-titoli: "Poppins", system-ui, -apple-system, sans-serif;
  --carattere-dati: "Lato", "Poppins", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --sfondo: #071327; --sfondo-2: #0B1B35; --sfondo-3: #12264A; --superficie: #0E2040;
    --testo: #F1F5F9;          /* 17:1 */
    --tenue: #CBD5E1;          /* 12,8:1 su --sfondo, 11,8:1 su --superficie */
    --titoli: #ffffff;
    --bordo: #1E3358; --bordo-forte: #7C93B5;   /* 4,6:1 su --superficie */
    --link: #38C3FE;           /* 11,4:1 su --superficie */
    --link-filetto: #38C3FE;
    --accento-testo: #38C3FE;
    --fuoco: #38C3FE;
    --evidenza-sfondo: #0A2A4D; --evidenza-testo: #7ED6FE;
    --icona-sfondo: #1E3358; --icona-testo: #38C3FE;
    --scelto-sfondo: #01B2FD; --scelto-testo: #0B1B35;
    --errore: #FCA5A5; --errore-sfondo: #2a1416;
    --avviso: #FDE68A; --avviso-sfondo: #2a2010; --avviso-bordo: #8a6420;
    --successo: #86EFAC; --successo-sfondo: #0F2417;
    --info: #93C5FD; --info-sfondo: #111C33;
    --primario-sfondo: #0076DD; --primario-testo: #ffffff; --primario-hover: #005FB8;
    --cta-sfondo: #0B1B35; --cta-testo: #ffffff;
    --ombra-1: 0 1px 2px rgba(0, 0, 0, .4); --ombra-2: 0 12px 32px rgba(0, 0, 0, .45); --ombra-3: 0 24px 64px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5.5rem; }
body { margin: 0; background: var(--sfondo); color: var(--testo); font: 400 1rem/1.7 var(--carattere); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, svg, picture { max-width: 100%; height: auto; }
picture { display: block; }
h1, h2, h3, h4 { font-family: var(--carattere-titoli); line-height: 1.18; color: var(--titoli); margin: 0 0 .55em; text-wrap: balance; font-weight: 700; letter-spacing: -.012em; }
h1 { font-size: clamp(2.05rem, 1.35rem + 2.8vw, 3.35rem); font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.3vw, 2.15rem); }
h3 { font-size: 1.17rem; }
h4 { font-size: 1.02rem; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.3rem; }
a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: 2px; text-decoration-color: var(--link-filetto); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--fuoco); outline-offset: 3px; border-radius: 4px; }
code { font-family: var(--mono); font-size: .9em; background: var(--sfondo-2); padding: .1em .35em; border-radius: 5px; border: 1px solid var(--bordo); }
pre { font-family: var(--mono); font-size: .9rem; background: var(--sfondo-2); padding: 1rem; border-radius: var(--raggio-s); overflow-x: auto; border: 1px solid var(--bordo); }
hr { border: 0; border-top: 1px solid var(--bordo); margin: 2rem 0; }
::selection { background: #7ED6FE; color: var(--notte); }
.visivamente-nascosto { position: absolute !important; width: 1px; height: 1px; padding: 0; 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; background: var(--notte); color: #fff; padding: .75rem 1rem; border-radius: var(--raggio-s); font-weight: 600; }
.salta:focus { top: 1rem; }
.contenitore { max-width: var(--larghezza); margin: 0 auto; padding: 0 1rem; }
.contenitore.stretto { max-width: calc(var(--stretto) + 2rem); }
.contenitore.medio { max-width: calc(var(--medio) + 2rem); }
main:focus { outline: none; }
.occhiello { display: inline-block; font: 700 .8rem/1.2 var(--carattere); letter-spacing: .09em; text-transform: uppercase; color: var(--accento-testo); margin: 0 0 .75rem; }

/* ── Pulsanti (bersagli ≥ 44px) ── */
.pulsante { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .7rem 1.3rem; border-radius: 12px; border: 2px solid transparent; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; line-height: 1.2; text-align: center; }
.pulsante.piccolo { min-height: 44px; padding: .5rem 1rem; font-size: .975rem; }
.pulsante.grande { min-height: 56px; padding: .9rem 1.6rem; font-size: 1.08rem; }
.pulsante.primario { background: var(--primario-sfondo); color: var(--primario-testo); box-shadow: var(--ombra-1); }
.pulsante.primario:hover { background: var(--primario-hover); }
.pulsante.primario:focus-visible { outline-color: var(--fuoco); }
.testata .pulsante.primario, .hero-scuro .pulsante.primario, .scuro .pulsante.primario { background: var(--celeste); color: var(--notte); }
.testata .pulsante.primario:hover, .hero-scuro .pulsante.primario:hover, .scuro .pulsante.primario:hover { background: var(--celeste-chiaro); }
.pulsante.secondario { background: var(--superficie); color: var(--titoli); border-color: currentColor; }
.pulsante.secondario:hover { background: var(--sfondo-2); }
.pulsante.terziario { background: transparent; color: var(--link); text-decoration: underline; text-decoration-color: var(--link-filetto); text-decoration-thickness: 2px; text-underline-offset: .2em; padding-left: .4rem; padding-right: .4rem; }
.pulsante[disabled], .pulsante[aria-disabled="true"] { opacity: .65; cursor: not-allowed; }
.pulsante .rotella { width: 1rem; height: 1rem; }
.collegamento { background: none; border: 0; padding: .5rem 0; min-height: 44px; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.azioni { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; align-items: center; }
.freccia::after { content: "→"; display: inline-block; margin-left: .35rem; transition: transform .15s ease; }
a:hover .freccia::after, a.freccia:hover::after { transform: translateX(3px); }

/* ── Etichette ── */
.etichetta { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 600; line-height: 1; padding: .38rem .6rem; border-radius: 999px; background: var(--sfondo-3); color: var(--testo); border: 1px solid var(--bordo); white-space: nowrap; }
.etichetta.di-piano { background: var(--evidenza-sfondo); color: var(--evidenza-testo); border-color: transparent; }
.etichetta.verde { background: var(--successo-sfondo); color: var(--successo); border-color: transparent; }
.etichetta.avviso { background: var(--avviso-sfondo); color: var(--avviso); border-color: transparent; }
.etichette { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .9rem; padding: 0; list-style: none; }

/* ── Testata e menu ── */
/* nera in entrambi i temi, come la barra laterale del gestionale; logo nella variante chiara */
.testata { position: sticky; top: 0; z-index: 50; background: var(--notte); color: #fff; border-bottom: 3px solid var(--celeste); }
.testata :focus-visible { outline-color: var(--celeste-chiaro); }
.testata-riga { display: flex; align-items: center; gap: 1rem; min-height: 4.4rem; flex-wrap: wrap; }
.marchio { display: inline-flex; align-items: center; gap: .55rem; color: #fff; text-decoration: none; min-height: 44px; }
.logo-segno { width: auto; height: 42px; flex: none; }
.marchio-testo { display: flex; flex-direction: column; line-height: 1; }
.marchio-nome { font: 800 1.3rem/1 var(--carattere-titoli); letter-spacing: .04em; color: #fff; }
.marchio-sotto { font: 600 .6rem/1 var(--carattere); letter-spacing: .13em; text-transform: uppercase; color: var(--celeste-chiaro); margin-top: .3rem; }
.menu { display: flex; align-items: center; gap: .75rem; margin-left: auto; }
.menu ul { display: flex; gap: .1rem; margin: 0; padding: 0; list-style: none; }
.menu ul a { display: inline-flex; align-items: center; min-height: 44px; padding: .25rem .55rem; color: #E2E8F0; text-decoration: none; border-radius: var(--raggio-s); font-weight: 600; font-size: .94rem; }
.menu ul a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.menu a[aria-current="page"], .menu a[data-sezione-attiva] { color: #fff; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .5em; text-decoration-color: var(--celeste); }
.testata .pulsante.terziario { color: #fff; text-decoration-color: var(--celeste); }
.testata .pulsante.secondario { background: transparent; color: #fff; border-color: #fff; }
.testata .pulsante.secondario:hover { background: rgba(255, 255, 255, .08); }
.menu-azioni { display: flex; gap: .5rem; align-items: center; }
.apri-menu { display: none; margin-left: auto; align-items: center; gap: .5rem; min-height: 44px; min-width: 44px; padding: .5rem .8rem; background: transparent; border: 2px solid #fff; border-radius: 10px; font: inherit; font-weight: 600; color: #fff; cursor: pointer; }
.icona-menu, .icona-menu::before, .icona-menu::after { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
.icona-menu::before, .icona-menu::after { content: ""; position: absolute; left: 0; }
.icona-menu::before { top: -6px; } .icona-menu::after { top: 6px; }
.apri-menu[aria-expanded="true"] .icona-menu { background: transparent; }
.apri-menu[aria-expanded="true"] .icona-menu::before { top: 0; transform: rotate(45deg); }
.apri-menu[aria-expanded="true"] .icona-menu::after { top: 0; transform: rotate(-45deg); }
@media (max-width: 1180px) {
  .js .apri-menu { display: inline-flex; }
  .menu { width: 100%; flex-direction: column; align-items: stretch; margin: 0; padding: .5rem 0 1rem; }
  .js .menu { display: none; }
  .js .menu.aperto { display: flex; }
  .menu ul { flex-direction: column; }
  .menu ul a { width: 100%; padding: .65rem .5rem; }
  .menu-azioni { flex-direction: column; align-items: stretch; }
  .menu-azioni .pulsante { width: 100%; }
}

/* ── Briciole di pane ── */
.briciole { font-size: .92rem; margin: 0 0 1rem; }
.briciole ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; list-style: none; margin: 0; padding: 0; }
.briciole li { display: inline-flex; align-items: center; gap: .5rem; color: var(--tenue); }
.briciole li + li::before { content: "/"; color: var(--bordo-forte); }
.briciole a { display: inline-block; padding: .35rem 0; color: var(--tenue); }

/* ── Hero e intestazioni ── */
.hero { position: relative; overflow: hidden; padding: clamp(2.5rem, 6vw, 5.5rem) 0 clamp(2rem, 5vw, 4rem); background:
  radial-gradient(60rem 30rem at 85% -10%, rgba(1,178,253, .16), transparent 60%),
  radial-gradient(50rem 26rem at -10% 10%, rgba(148, 163, 184, .14), transparent 60%), var(--sfondo); }
.hero-griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.hero-testo { font-size: clamp(1.1rem, 1rem + .4vw, 1.28rem); color: var(--tenue); max-width: 38rem; }
.hero-note { font-size: .92rem; color: var(--tenue); margin-top: 1rem; }
.hero-figura { position: relative; }
.hero-figura svg { display: block; width: 100%; height: auto; }
.ill-fondo { fill: var(--notte); stroke: var(--notte-3); stroke-width: 2; } .ill-strada { fill: none; stroke: var(--notte-3); stroke-width: 26; stroke-linecap: round; }
.ill-tratteggio { fill: none; stroke: var(--celeste); stroke-width: 3; stroke-dasharray: 10 12; stroke-linecap: round; }
.ill-tappa { fill: #fff; stroke: var(--celeste); stroke-width: 6; } .ill-arrivo { fill: var(--celeste); }
.ill-spunta { fill: none; stroke: var(--notte); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.ill-mezzo { fill: #fff; } .ill-cabina { fill: var(--celeste); } .ill-ruota { fill: #050C1A; stroke: #fff; stroke-width: 3; }
.ill-scheda { fill: #fff; } .ill-riga { fill: var(--notte); } .ill-riga-chiara { fill: #CBD5E1; }
.intestazione-pagina { background: linear-gradient(180deg, var(--sfondo-2), var(--sfondo)); padding: clamp(1.75rem, 4vw, 3.25rem) 0 clamp(1.25rem, 3vw, 2rem); border-bottom: 1px solid var(--bordo); }
.intestazione-pagina .etichette { margin-top: .5rem; }
.sez-intro { font-size: 1.15rem; color: var(--tenue); max-width: 46rem; }

/* ── Schermate (vere, dati di esempio) ── */
.schermata { margin: 0; }
.cornice { display: block; border-radius: var(--raggio); overflow: hidden; background: var(--superficie); border: 1px solid var(--bordo); box-shadow: var(--ombra-3); }
.cornice-barra { display: flex; align-items: center; gap: .4rem; height: 30px; padding: 0 .8rem; background: var(--sfondo-3); border-bottom: 1px solid var(--bordo); }
.cornice-barra span { width: 10px; height: 10px; border-radius: 50%; background: var(--bordo-forte); opacity: .55; }
.cornice img { display: block; width: 100%; height: auto; }
.schermata figcaption { font-size: .9rem; color: var(--tenue); margin-top: .65rem; }
.ingrandisci { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--raggio); text-align: left; color: inherit; font: inherit; }
.telefono { max-width: 270px; margin: 0 auto; border-radius: 34px; padding: 10px; background: #050C1A; box-shadow: var(--ombra-3); }
.telefono img { display: block; border-radius: 26px; width: 100%; height: auto; }
.galleria { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 1.5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.galleria-telefoni { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 1.5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.galleria h3 { font-size: 1.05rem; margin: .9rem 0 .25rem; }
.galleria p, .galleria-telefoni p { font-size: .95rem; color: var(--tenue); margin: .35rem 0 0; }

/* ── Sezioni ── */
.sezione { padding: clamp(2.25rem, 5vw, 4rem) 0; }
.sezione + .sezione { padding-top: 0; }
.sezione.tinta { background: var(--sfondo-2); padding-top: clamp(2.25rem, 5vw, 4rem); border-top: 1px solid var(--bordo); border-bottom: 1px solid var(--bordo); }
.sezione.tinta + .sezione { padding-top: clamp(2.25rem, 5vw, 4rem); }
.titolo-sezione { max-width: 46rem; margin-bottom: 1.5rem; }
.schede { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.scheda { position: relative; background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 1.35rem; box-shadow: var(--ombra-1); display: flex; flex-direction: column; }
.scheda h3 { margin-bottom: .45rem; }
.scheda h3 a { color: var(--titoli); text-decoration: none; display: inline-block; padding: .15rem 0; }
.scheda h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--raggio); }
.scheda:has(h3 a):hover { border-color: var(--bordo-forte); box-shadow: var(--ombra-2); }
.scheda:has(h3 a:focus-visible) { outline: 3px solid var(--fuoco); outline-offset: 3px; }
.scheda h3 a:focus-visible { outline: none; }
.scheda p { margin: 0; color: var(--tenue); }
.scheda .piede-scheda { margin-top: auto; padding-top: .9rem; }
.scheda .icona { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--icona-sfondo); color: var(--icona-testo); margin-bottom: .9rem; }
.scheda .icona svg { width: 24px; height: 24px; }
.scheda.evidenza { border-top: 4px solid var(--celeste); }
.spunte { padding: 0; list-style: none; }
.spunte li { position: relative; padding-left: 1.9rem; margin: 0 0 .75rem; }
.spunte li::before { content: ""; position: absolute; left: .2rem; top: .45em; width: .9rem; height: .5rem; border-left: 3px solid var(--accento-testo); border-bottom: 3px solid var(--accento-testo); transform: rotate(-45deg); }
.spunte.compatte li { margin-bottom: .35rem; }
.passi { counter-reset: passo; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1rem; }
.passi li { counter-increment: passo; background: var(--sfondo-2); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 1.3rem; }
.passi li::before { content: counter(passo); display: inline-grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--celeste); color: var(--notte); font: 900 1.05rem/1 var(--carattere-dati); margin-bottom: .65rem; }
.passi.compatti { grid-template-columns: 1fr; }
.passi p { margin: 0; color: var(--tenue); }
.due-colonne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.due-colonne.testo-largo { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.problema-soluzione { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 1rem; list-style: none; padding: 0; margin: 1.5rem 0 0; }
.problema-soluzione li { border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--superficie); overflow: hidden; }
.problema-soluzione .prima, .problema-soluzione .dopo { padding: 1rem 1.25rem; }
.problema-soluzione .prima { background: var(--sfondo-2); border-bottom: 1px solid var(--bordo); }
.problema-soluzione h3 { font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .35rem; color: var(--tenue); font-family: var(--carattere); }
.problema-soluzione .dopo h3 { color: var(--accento-testo); }
.problema-soluzione p { margin: 0; }
.cta .contenitore > div { background: radial-gradient(40rem 20rem at 90% 0%, rgba(1,178,253, .22), transparent 60%), var(--cta-sfondo); border: 1px solid var(--notte-3); color: var(--cta-testo); border-radius: var(--raggio-l); padding: clamp(1.75rem, 4vw, 3.25rem); }
.cta h2 { color: #fff; }
.cta p { color: #CBD5E1; max-width: 44rem; }
.cta .pulsante.primario { background: var(--celeste); color: var(--notte); }
.cta .pulsante.primario:hover { background: var(--celeste-chiaro); }
.cta .pulsante.secondario { background: transparent; color: #fff; border-color: #fff; }
.cta .pulsante.terziario { color: #fff; text-decoration-color: var(--celeste); }
.cta :focus-visible { outline-color: var(--celeste-chiaro); }

/* ── Avvisi, notifiche, stati (caricamento, vuoto, errore) ── */
.avviso { background: var(--avviso-sfondo); border: 1px solid var(--avviso-bordo); border-left: 6px solid var(--fuoco); border-radius: 10px; padding: 1rem 1.25rem; margin: 0 0 1.5rem; }
.avviso.evidenza { background: var(--evidenza-sfondo); border-color: transparent; border-left-color: var(--celeste); }
.avviso.info { background: var(--info-sfondo); border-color: transparent; border-left-color: var(--info); }
.avviso.successo { background: var(--successo-sfondo); border-color: transparent; border-left-color: var(--successo); }
.avviso.errore { background: var(--errore-sfondo); border-color: var(--errore); border-left-color: var(--errore); }
.avviso p:last-child { margin: 0; }
.avviso strong:first-child { display: block; margin-bottom: .2rem; }
.nota, .nota-prezzi { color: var(--tenue); font-size: .975rem; }
.nota-prezzi { background: var(--evidenza-sfondo); border-left: 4px solid var(--celeste); border-radius: 10px; padding: .8rem 1rem; color: var(--testo); }
.notifica { position: fixed; z-index: 95; right: 1rem; bottom: 1rem; max-width: min(26rem, calc(100vw - 2rem)); background: var(--superficie); color: var(--testo); border: 1px solid var(--bordo); border-left: 6px solid var(--successo); border-radius: 12px; padding: .9rem 1rem; box-shadow: var(--ombra-2); }
.notifica[hidden] { display: none; }
.stato { text-align: center; padding: 2rem 1rem; border: 1px dashed var(--bordo-forte); border-radius: var(--raggio); color: var(--tenue); background: var(--sfondo-2); }
.stato h3 { margin-bottom: .35rem; }
.stato.errore { border-style: solid; border-color: var(--errore); background: var(--errore-sfondo); color: var(--testo); }
.rotella { display: inline-block; width: 1.4rem; height: 1.4rem; border: 3px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -.25em; }
@media (prefers-reduced-motion: no-preference) { .rotella { animation: gira .8s linear infinite; } }
@keyframes gira { to { transform: rotate(360deg); } }
.scheletro { display: block; height: .9rem; border-radius: 6px; background: linear-gradient(90deg, var(--sfondo-3), var(--sfondo-2), var(--sfondo-3)); background-size: 200% 100%; margin: .5rem 0; }

/* ── Finestra (modale) ── */
dialog.finestra { width: min(92vw, 1280px); max-height: 92vh; padding: 0; border: 0; border-radius: var(--raggio-l); background: var(--superficie); color: var(--testo); box-shadow: var(--ombra-3); }
dialog.finestra::backdrop { background: rgba(10, 12, 15, .72); }
.finestra-testa { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; border-bottom: 1px solid var(--bordo); }
.finestra-testa h2 { font-size: 1rem; margin: 0; font-family: var(--carattere); }
.finestra-corpo { padding: 1rem; overflow: auto; max-height: calc(92vh - 4rem); }
.finestra-corpo img { display: block; width: 100%; height: auto; border-radius: var(--raggio-s); }
.chiudi { min-width: 44px; min-height: 44px; border-radius: 10px; border: 2px solid var(--bordo-forte); background: var(--superficie); color: var(--testo); font: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer; }

/* ── Piani e prezzi ── */
.piani { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); gap: 1rem; }
.piano { position: relative; display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio-l); padding: 1.6rem; box-shadow: var(--ombra-1); }
.piano.consigliato { border: 2px solid var(--celeste); box-shadow: var(--ombra-2); }
.piano .nastro { position: absolute; top: -.8rem; left: 1.4rem; background: var(--celeste); color: var(--notte); font-size: .78rem; font-weight: 700; padding: .3rem .7rem; border-radius: 999px; }
.piano h3 { font-size: 1.35rem; }
.piano .pulsante { margin-top: auto; }
.prezzo { margin: 0; color: var(--titoli); }
.prezzo-importo { font: 900 2.35rem/1.1 var(--carattere-dati); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.prezzo-da, .prezzo-per, .prezzo-anno, .prezzo-iva { color: var(--tenue); font-size: .95rem; }
.prezzo-anno, .prezzo-iva { margin: 0; }
.prezzo-iva { margin-bottom: 1rem; }

/* ── Tabelle (anche comparative) ── */
.tabella-scorre { overflow-x: auto; border: 1px solid var(--bordo); border-radius: var(--raggio); margin: 1rem 0; background: var(--superficie); }
/* tabelle e numeri in Lato con cifre tabellari, come nel gestionale */
table { border-collapse: collapse; width: 100%; min-width: 36rem; font-size: 1rem; font-family: var(--carattere-dati); font-variant-numeric: tabular-nums; }
caption { text-align: left; font-weight: 700; padding: .85rem 1rem; color: var(--titoli); }
th, td { text-align: left; padding: .7rem 1rem; border-top: 1px solid var(--bordo); vertical-align: top; }
thead th { background: var(--sfondo-2); color: var(--titoli); font-size: .92rem; }
tbody th { font-weight: 700; }
table.confronto td, table.confronto thead th:not(:first-child) { text-align: center; }
table.confronto-generico td:last-child { background: var(--evidenza-sfondo); color: var(--testo); }
.si { color: var(--accento-testo); font-weight: 700; }
.no { color: var(--tenue); }

/* ── FAQ ── */
.faq details { border-bottom: 1px solid var(--bordo); }
.faq summary { cursor: pointer; padding: 1.05rem 2.2rem 1.05rem 0; min-height: 44px; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .3rem; top: .75rem; font-size: 1.5rem; color: var(--titoli); }
.faq details[open] summary::after { content: "−"; }
.faq-d { display: inline; font-size: 1.08rem; margin: 0; font-family: var(--carattere); font-weight: 600; }
.faq-r { padding-bottom: 1rem; color: var(--tenue); }

/* ── Moduli ── */
.modulo { display: grid; gap: 1.1rem; }
.campo { display: grid; gap: .35rem; }
.campo label { font-weight: 600; }
.campo input:not([type="checkbox"]):not([type="radio"]), .campo textarea, .campo select, .ricerca input {
  font: inherit; width: 100%; min-height: 48px; padding: .6rem .8rem; border: 2px solid var(--bordo-forte); border-radius: 10px; background: var(--superficie); color: var(--testo); }
.campo textarea { resize: vertical; }
.campo [aria-invalid="true"] { border-color: var(--errore); }
.campo-scelta { grid-template-columns: auto 1fr; align-items: start; column-gap: .75rem; }
.campo-scelta input { width: 24px; height: 24px; margin: .15rem 0 0; accent-color: var(--titoli); }
.campo-scelta .errore-campo { grid-column: 1 / -1; }
fieldset.campo { border: 0; padding: 0; margin: 0; }
fieldset.campo legend { font-weight: 600; padding: 0; margin-bottom: .35rem; }
.scelte { display: flex; flex-wrap: wrap; gap: .5rem; }
.scelte label { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .4rem .9rem; border: 2px solid var(--bordo-forte); border-radius: 10px; cursor: pointer; font-weight: 600; }
.scelte input { width: 20px; height: 20px; accent-color: var(--titoli); margin: 0; }
.scelte label:has(input:checked) { border-color: var(--titoli); background: var(--sfondo-2); }
.aiuto { color: var(--tenue); font-size: .95rem; margin: 0; }
.obbl { color: var(--errore); }
.errore-campo { color: var(--errore); font-weight: 600; margin: 0; }
.riepilogo-errori { border: 2px solid var(--errore); border-radius: 10px; padding: 1rem; background: var(--errore-sfondo); }
.riepilogo-errori h2 { font-size: 1.1rem; color: var(--errore); font-family: var(--carattere); }
.riepilogo-errori ul { margin: 0; }
.esito { font-weight: 600; margin: 0; }
.esito.errore { color: var(--errore); }
.trappola { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.modulo .pulsante { justify-self: start; }

/* ── Ricerca (Academy, Assistenza) ── */
.ricerca { display: grid; gap: .35rem; max-width: 40rem; }
.ricerca label { font-weight: 600; }
.risultati { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .6rem; }
.risultati li { border: 1px solid var(--bordo); border-radius: 12px; padding: .8rem 1rem; background: var(--superficie); }
.risultati a { font-weight: 600; display: inline-block; padding: .15rem 0; }
.risultati p { margin: .2rem 0 0; color: var(--tenue); font-size: .95rem; }
.filtri { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; padding: 0; list-style: none; }
.filtri button { min-height: 44px; padding: .4rem .9rem; border-radius: 999px; border: 2px solid var(--bordo-forte); background: var(--superficie); color: var(--testo); font: inherit; font-weight: 600; cursor: pointer; }
.filtri button[aria-pressed="true"] { background: var(--scelto-sfondo); border-color: var(--scelto-sfondo); color: var(--scelto-testo); }

/* ── Academy ── */
.corso-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; color: var(--tenue); font-size: .95rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.corso-meta strong { color: var(--testo); }
.moduli-corso { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 1rem; }
.moduli-corso > li { border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 1.1rem 1.25rem; background: var(--superficie); }
.lezioni { list-style: none; padding: 0; margin: .5rem 0 0; }
.lezioni li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--bordo); padding: .55rem 0; }
.lezioni a { display: inline-block; padding: .2rem 0; font-weight: 600; }
.lezioni .durata { color: var(--tenue); font: 400 .95rem/1.4 var(--carattere-dati); font-variant-numeric: tabular-nums; white-space: nowrap; }
.riservato { display: flex; gap: 1rem; align-items: flex-start; border-radius: var(--raggio); padding: clamp(1.25rem, 3vw, 1.75rem); background: radial-gradient(30rem 16rem at 80% 10%, rgba(1,178,253, .22), transparent 60%), var(--notte); color: #fff; margin: 0 0 1.5rem; }
.riservato p { color: #CBD5E1; margin: .35rem 0 0; }
.riservato .riservato-titolo { font: 700 1.25rem/1.3 var(--carattere-titoli); color: #fff; margin: 0; }
.riservato .nota { color: #CBD5E1; }
.riservato a:not(.pulsante) { color: #fff; }
.riservato .azioni { margin-top: 1rem; }
.riservato .pulsante.primario { background: var(--celeste); color: var(--notte); }
.riservato .pulsante.secondario { background: transparent; color: #fff; border-color: #fff; }
.riservato :focus-visible { outline-color: var(--celeste-chiaro); }
.due-colonne > .riservato { margin: 0; }
.lezione-griglia { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 2rem; align-items: start; }
.lezione-lato { position: sticky; top: 6rem; border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 1rem 1.1rem; background: var(--sfondo-2); }
.lezione-lato h2 { font-size: 1rem; font-family: var(--carattere); }
.lezione-lato ol { padding-left: 1.2rem; margin: 0; }
.lezione-lato li { margin: .25rem 0; }
.lezione-lato a { display: inline-block; padding: .2rem 0; }

/* ── Articoli, testi lunghi, legali ── */
.prosa { max-width: var(--stretto); }
.prosa h2 { margin-top: 2.2rem; }
.prosa h3 { margin-top: 1.6rem; }
.prosa li { margin: .3rem 0; }
.prosa blockquote, .prosa .avviso { margin: 1.5rem 0; }
.articolo-meta { color: var(--tenue); font-size: .95rem; }
.testo-legale h2 { margin-top: 2rem; }
.testo-legale table { min-width: 34rem; }
.indice-pagina { border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 1rem 1.25rem; background: var(--sfondo-2); margin: 0 0 2rem; }
.indice-pagina h2 { font-size: 1rem; font-family: var(--carattere); margin-bottom: .4rem; }
.indice-pagina ol { margin: 0; }
.indice-pagina a { display: inline-block; padding: .2rem 0; }

/* ── Piede ── */
.piede { background: var(--notte); color: #CBD5E1; margin-top: 3rem; padding: 3rem 0 1rem; border-top: 3px solid var(--celeste); }
.piede a, .piede .collegamento { color: #fff; text-decoration-color: var(--celeste); }
.piede-logo { display: block; height: 80px; width: auto; margin: 0 0 1rem; }
.piede h2 { color: #fff; font-size: 1rem; margin-bottom: .5rem; font-family: var(--carattere); }
.piede-griglia { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 1.75rem; }
.piede ul { list-style: none; margin: 0; padding: 0; }
.piede li a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; }
.piede li a:hover { text-decoration: underline; }
.piede :focus-visible { outline-color: var(--celeste-chiaro); }
.piede-marchio p { color: #CBD5E1; font-size: .95rem; }
.piede-fondo { border-top: 1px solid var(--notte-3); margin-top: 2rem; padding-top: 1rem; font-size: .92rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; }
@media (max-width: 960px) { .piede-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } .piede-marchio { grid-column: 1 / -1; } }

/* ── Banner del consenso: rifiutare costa quanto accettare ── */
.consenso { position: fixed; z-index: 90; left: 1rem; right: 1rem; bottom: 1rem; max-width: 40rem; margin: 0 auto; background: var(--superficie); color: var(--testo); border: 2px solid var(--titoli); border-radius: 16px; padding: 1.25rem; box-shadow: var(--ombra-3); }
.consenso h2 { font-size: 1.15rem; }
.consenso .azioni { margin-top: .5rem; }
.consenso .pulsante { flex: 1 1 10rem; }

/* ── 404 ── */
.pagina-404 { text-align: center; }
.pagina-404 .codice { font: 800 clamp(4rem, 3rem + 6vw, 7.5rem)/1 var(--carattere-titoli); color: var(--titoli); letter-spacing: -.04em; margin: 0; }
.pagina-404 .azioni { justify-content: center; }

/* ── Adattamenti ── */
@media (max-width: 860px) {
  .hero-griglia, .due-colonne, .due-colonne.testo-largo, .lezione-griglia { grid-template-columns: minmax(0, 1fr); }
  .lezione-lato { position: static; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .pulsante, .menu ul a, .scheda { transition: background-color .15s ease, box-shadow .15s ease, border-color .15s ease; }
}
@media (forced-colors: active) {
  .pulsante, .etichetta, .filtri button { border-color: ButtonText; }
  .spunte li::before { border-color: CanvasText; }
}
@media print {
  .testata, .piede, .consenso, .cta, .notifica, .salta { display: none; }
  body { background: #fff; color: #000; }
}
.h3-come { font-size: 1.17rem; }
/* link negli elenchi e nei recapiti: bersaglio ≥ 24px (WCAG 2.5.8) */
li a:not(.pulsante), .recapiti a { padding-block: .22rem; }
/* pulsanti del menu sulla pagina corrente: restano leggibili (il colore della voce attiva vale solo per i link) */
.menu .pulsante.primario[aria-current="page"] { color: var(--notte); text-decoration: underline; text-decoration-color: currentColor; }
.menu .pulsante.terziario[aria-current="page"] { color: #fff; }

/* ════════ Sezioni commerciali: hero scuro, mockup, carosello, fascia dei benefici ════════
   Le immagini sono SOLO le schermate vere (static/schermate): telefono, schermo, inclinazione e
   alone sono disegnati qui. Le zone «.scuro» ridefiniscono i token: stessi controlli di contrasto. */
.scuro, .hero-scuro {
  --sfondo: #071327; --sfondo-2: #0B1B35; --sfondo-3: #12264A; --superficie: #0E2040;
  --testo: #F1F5F9; --tenue: #CBD5E1; --titoli: #ffffff; --bordo: #1E3358; --bordo-forte: #7C93B5;
  --link: #38C3FE; --link-filetto: #38C3FE; --accento-testo: #38C3FE; --fuoco: #38C3FE;
  --icona-sfondo: rgba(1,178,253, .12); --icona-testo: #38C3FE;
  --evidenza-sfondo: #0A2A4D; --evidenza-testo: #7ED6FE; --scelto-sfondo: #01B2FD; --scelto-testo: #0B1B35;
  --errore: #FCA5A5; --errore-sfondo: #2a1416; --avviso: #FDE68A; --avviso-sfondo: #2a2010; --avviso-bordo: #8a6420;
  --successo: #86EFAC; --successo-sfondo: #0F2417; --info: #93C5FD; --info-sfondo: #111C33;
  color: var(--testo);
}
.hero-scuro { position: relative; overflow: hidden; isolation: isolate; padding: clamp(1.75rem, 4.5vw, 4rem) 0 clamp(2.5rem, 5vw, 4.5rem); background:
  radial-gradient(46rem 30rem at 56% 42%, rgba(1,178,253, .20), transparent 62%),
  radial-gradient(36rem 22rem at 0% 100%, rgba(56,195,254, .07), transparent 60%),
  linear-gradient(180deg, #0B1B35 0%, #071327 100%); }
.hero-scuro::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 25%, transparent 72%); mask-image: radial-gradient(ellipse at 50% 40%, #000 25%, transparent 72%); }
.hs-griglia { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr) minmax(14rem, .66fr); grid-template-areas: "testo figura vantaggi"; gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
.hero-scuro.senza-figura .hs-griglia { grid-template-columns: minmax(0, 1.3fr) minmax(16rem, .8fr); grid-template-areas: "testo vantaggi"; }
.hero-scuro.senza-vantaggi .hs-griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "testo figura"; column-gap: clamp(2rem, 5vw, 4.5rem); }
.hero-scuro.senza-vantaggi .hs-figura .mk-principale ~ .mk-tel-1 { left: 2%; }
.hs-testo { grid-area: testo; }
.hs-figura { grid-area: figura; }
.hs-vantaggi { grid-area: vantaggi; }
.hero-scuro h1 { color: #fff; font-size: clamp(2.1rem, 1.35rem + 2.1vw, 3.1rem); line-height: 1.08; margin-bottom: .45em; }
.hs-evidenza { display: block; width: fit-content; color: var(--celeste-chiaro); padding-bottom: .22em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 10 C 55 2, 125 2, 197 7' stroke='%2301B2FD' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 100% / min(100%, 9.5em) .3em; }
.hs-badge { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 1.1rem; padding: .45rem .85rem; border-radius: 10px; background: rgba(1,178,253, .12); border: 1px solid rgba(1,178,253, .45); color: #7ED6FE; font-weight: 600; font-size: .92rem; line-height: 1.2; }
.hs-badge svg { width: 18px; height: 18px; }
.hs-sottotitolo { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--tenue); max-width: 34rem; }
.hs-nota { font-size: .88rem; color: #A9B4C4; margin: 1rem 0 0; }
.hero-scuro .azioni { margin-top: 1.6rem; gap: .65rem; }
.hero-scuro .azioni .pulsante.grande { padding-left: 1.25rem; padding-right: 1.25rem; font-size: 1.02rem; }
.hero-scuro .pulsante.secondario, .scuro .pulsante.secondario { background: transparent; color: #fff; border-color: #fff; }
.hero-scuro .pulsante.secondario:hover, .scuro .pulsante.secondario:hover { background: rgba(255, 255, 255, .08); }
.hero-scuro .briciole li, .hero-scuro .briciole a { color: var(--tenue); }
/* figura: alone celeste e anello luminoso dietro alle schermate */
.hs-figura, .vs-figura { position: relative; display: flex; align-items: center; justify-content: center; min-height: 22rem; }
.hs-figura::before, .vs-figura::before { content: ""; position: absolute; inset: 8% 4%; z-index: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(1,178,253, .42), rgba(1,178,253, .1) 55%, transparent); filter: blur(18px); }
.hs-figura::after { content: ""; position: absolute; left: -4%; right: -4%; top: 30%; height: 44%; z-index: 0; border-radius: 50%; border: 3px solid transparent; border-top-color: rgba(56,195,254, .85); border-left-color: rgba(56,195,254, .35); transform: rotate(-11deg); filter: drop-shadow(0 0 10px rgba(56,195,254, .55)); pointer-events: none; }
.mk-schermo, .mk-telefono { position: relative; z-index: 1; background: #050C1A; }
.mk-schermo { width: 100%; border-radius: 14px; overflow: hidden; border: 1px solid #26406B; box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 0 50px rgba(1,178,253, .16); transform: perspective(1500px) rotateY(-13deg) rotateX(4deg); transform-origin: 60% 50%; }
.mk-barra { display: flex; gap: .35rem; align-items: center; height: 22px; padding: 0 .7rem; background: #12264A; }
.mk-barra span { width: 8px; height: 8px; border-radius: 50%; background: #4B5563; }
.mk-schermo img, .mk-telefono img { display: block; width: 100%; height: auto; }
.mk-telefono { width: 200px; flex: none; padding: 8px; border-radius: 34px; border: 1px solid #2A4570; box-shadow: 0 28px 60px rgba(0, 0, 0, .55), 0 0 0 2px #12264A inset, 0 0 46px rgba(1,178,253, .22); }
.mk-telefono img { border-radius: 26px; }
.mk-tacca { position: absolute; z-index: 2; top: 14px; left: 50%; width: 30%; height: 14px; transform: translateX(-50%); border-radius: 10px; background: #050C1A; }
/* schermo + telefono (home), due telefoni (app autisti) */
.hs-figura .mk-principale ~ .mk-tel-1, .vs-figura .mk-principale ~ .mk-tel-1 { position: absolute; z-index: 2; left: -6%; bottom: -10%; width: 34%; transform: rotate(-7deg); }
.solo-telefoni .mk-tel-1 { transform: rotate(-9deg) translateX(10%); z-index: 2; }
.solo-telefoni .mk-tel-2 { transform: rotate(8deg) translate(-12%, 8%) scale(.92); z-index: 1; filter: brightness(.92); }
.solo-telefoni .mk-telefono { width: min(46%, 220px); }
/* vantaggi a icone (colonna del hero, sezioni chiare e scure) */
.hs-vantaggi, .vantaggi { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.3rem; }
.hs-vantaggi li, .vantaggi li, .fascia li { display: flex; gap: .9rem; align-items: flex-start; }
.v-icona { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--icona-sfondo); color: var(--icona-testo); border: 1px solid rgba(1,178,253, .4); }
.v-icona svg { width: 24px; height: 24px; }
.v-testo { display: flex; flex-direction: column; gap: .15rem; }
.v-testo strong { color: var(--titoli); font-size: 1.05rem; line-height: 1.3; }
.v-testo span { color: var(--tenue); font-size: .95rem; line-height: 1.5; }
.vantaggi { margin-top: 1.5rem; }
/* ── carosello delle funzionalità ── */
.carosello-sez { background: var(--sfondo); }
.carosello-sez.scuro { background: #071327; padding-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid #12264A; }
.sezione + .carosello-sez.scuro { padding-top: clamp(2.5rem, 5vw, 4rem); }
.scuro + .sezione, .fascia-sez + .sezione:not(.cta) { padding-top: clamp(2.25rem, 5vw, 4rem); }
.schede:has(> li:nth-child(9):last-child), .schede:has(> li:nth-child(6):last-child) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.schede:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.titolo-centrato { text-align: center; max-width: 46rem; margin: 0 auto 1.75rem; }
.titolo-centrato h2::after { content: ""; display: block; width: 72px; height: 4px; border-radius: 2px; background: var(--celeste); margin: .6rem auto 0; }
.titolo-centrato .sez-intro { margin: 0 auto; }
.carosello { position: relative; }
.car-lista { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3rem) / 4); gap: 1rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; list-style: none; margin: 0; padding: .4rem .2rem 1.1rem; scrollbar-width: thin; scrollbar-color: var(--bordo-forte) transparent; }
.car-lista:focus-visible { outline-offset: 2px; }
.car-scheda { position: relative; scroll-snap-align: start; display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--bordo); border-radius: 18px; overflow: hidden; box-shadow: var(--ombra-1); }
.car-scheda:has(h3 a):hover { border-color: var(--celeste); }
.car-scheda:has(h3 a:focus-visible) { outline: 3px solid var(--fuoco); outline-offset: 3px; }
.car-schermo { height: 15.5rem; overflow: hidden; display: flex; justify-content: center; align-items: flex-end; padding: 1.1rem 1rem 0; background: radial-gradient(14rem 9rem at 50% 70%, rgba(1,178,253, .28), transparent 70%), #0B1B35; }
.car-scheda:not(.car-tel) .car-schermo { justify-content: flex-start; align-items: flex-start; padding: 1.1rem 0 0 1.1rem; }
.car-schermo > picture { width: 170%; flex: none; }
.car-schermo > picture img { display: block; width: 100%; height: auto; border-radius: 10px 0 0 0; box-shadow: 0 -6px 30px rgba(0, 0, 0, .45); }
.car-tel .car-schermo { align-items: flex-start; padding-top: 1.25rem; }
.car-tel .mk-telefono { width: 158px; border-radius: 28px; padding: 6px; }
.car-tel .mk-telefono img { border-radius: 22px; }
.car-tel .mk-tacca { top: 11px; height: 11px; }
.car-corpo { display: flex; gap: .8rem; padding: 1.05rem 1.1rem 1.3rem; }
.car-corpo .v-icona { width: 42px; height: 42px; }
.car-corpo .v-icona svg { width: 21px; height: 21px; }
.car-corpo h3 { font-size: 1.06rem; margin: 0 0 .3rem; }
.car-corpo h3 a { color: var(--titoli); text-decoration: none; }
.car-corpo h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 18px; }
.car-corpo h3 a:focus-visible { outline: none; }
.car-corpo p { margin: 0; color: var(--tenue); font-size: .94rem; line-height: 1.5; }
.car-freccia { position: absolute; z-index: 3; top: 6.6rem; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--celeste); background: #0B1B35; color: #fff; font: 700 1.25rem/1 var(--carattere); cursor: pointer; box-shadow: var(--ombra-2); }
.car-freccia[hidden] { display: none; }
.car-freccia:disabled { opacity: .4; cursor: default; }
.car-freccia:hover:not(:disabled) { background: var(--celeste); color: #0B1B35; }
.car-prec { left: -1.4rem; } .car-succ { right: -1.4rem; }
@media (max-width: 1260px) { .car-prec { left: .35rem; } .car-succ { right: .35rem; } }
.car-nota { text-align: center; margin: .75rem 0 0; }
/* ── fascia dei benefici ── */
.fascia { list-style: none; margin: 0; padding: 1.4rem 1.5rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; border-radius: 20px; background: radial-gradient(30rem 12rem at 15% 0%, rgba(1,178,253, .16), transparent 70%), #0B1B35; border: 1px solid #1E3358;
  --titoli: #fff; --tenue: #CBD5E1; --icona-sfondo: rgba(1,178,253, .12); --icona-testo: #38C3FE; }
.fascia li + li { border-left: 1px solid #1E3358; padding-left: 1.25rem; }
/* ── sezione vantaggi con figura ── */
.vs-griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.vantaggi-sez.rovescia .vs-griglia > :first-child { order: 2; }
.vs-figura { border-radius: 24px; padding: 2.5rem 1.5rem; background: radial-gradient(24rem 16rem at 50% 55%, rgba(1,178,253, .3), transparent 70%), #0B1B35; overflow: hidden; }
.vs-figura .mk-schermo { transform: perspective(1500px) rotateY(-9deg); }
@media (max-width: 1100px) {
  .hs-griglia, .hero-scuro.senza-figura .hs-griglia, .hero-scuro.senza-vantaggi .hs-griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "testo testo" "figura vantaggi"; }
  .hero-scuro.senza-figura .hs-griglia { grid-template-areas: "testo testo" "vantaggi vantaggi"; }
  .hero-scuro.senza-figura .hs-vantaggi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-scuro.senza-vantaggi .hs-griglia { grid-template-areas: "testo testo" "figura figura"; }
  .car-lista { grid-auto-columns: calc((100% - 2rem) / 3); }
  .fascia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fascia li:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 760px) {
  .hs-griglia, .hero-scuro.senza-figura .hs-griglia, .hero-scuro.senza-vantaggi .hs-griglia { grid-template-columns: minmax(0, 1fr); grid-template-areas: "testo" "figura" "vantaggi"; }
  .hero-scuro.senza-figura .hs-griglia { grid-template-areas: "testo" "vantaggi"; }
  .hero-scuro.senza-figura .hs-vantaggi { grid-template-columns: minmax(0, 1fr); }
  .hs-figura { min-height: 0; padding: 1rem .5rem 2.5rem; }
  .hs-figura .mk-principale ~ .mk-tel-1 { left: 3%; bottom: -2%; width: 31%; }
  .mk-schermo { transform: perspective(1200px) rotateY(-8deg); }
  .solo-telefoni .mk-telefono { width: 46%; }
  .hero-scuro .azioni .pulsante { width: 100%; }
  .car-lista { grid-auto-columns: 80%; }
  .car-freccia { display: none !important; }
  .fascia { grid-template-columns: minmax(0, 1fr); padding: 1.25rem; }
  .fascia li + li { border-left: 0; padding-left: 0; border-top: 1px solid #1E3358; padding-top: 1rem; }
  .vs-griglia { grid-template-columns: minmax(0, 1fr); }
  .vantaggi-sez.rovescia .vs-griglia > :first-child { order: 0; }
  .vs-figura { min-height: 0; padding: 2rem 1rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .car-scheda { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
  .car-scheda:has(h3 a):hover { transform: translateY(-3px); box-shadow: var(--ombra-2); }
}
@media (forced-colors: active) {
  .car-scheda, .fascia, .mk-schermo, .mk-telefono, .car-freccia { border: 1px solid CanvasText; }
  .hs-figura::after, .hs-figura::before, .vs-figura::before { display: none; }
}
@media print {
  .hs-figura, .vs-figura, .car-freccia { display: none; }
  .hero-scuro, .scuro, .fascia { background: #fff; color: #000; }
}

/* ════════ Pagine interne con lo stesso stile commerciale ════════
   Intestazione scura (classe «scuro»: token ridefiniti), hero compatto, ricerca in evidenza,
   modulo con colonna laterale, schede di aiuto, pagine dei moduli, lezioni dell'Academy. */
.intestazione-pagina.scuro { position: relative; isolation: isolate; overflow: hidden; border-bottom: 0; padding: clamp(1.75rem, 4vw, 3.25rem) 0 clamp(1.75rem, 4vw, 3rem); background:
  radial-gradient(40rem 22rem at 85% 0%, rgba(1,178,253, .18), transparent 62%), linear-gradient(180deg, #0B1B35 0%, #071327 100%); }
.intestazione-pagina.scuro::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 70% 20%, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse at 70% 20%, #000 20%, transparent 70%); }
.intestazione-pagina.scuro h1 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.8rem); max-width: 22em; }
.intestazione-pagina.scuro h1::after { content: ""; display: block; width: 72px; height: 4px; border-radius: 2px; background: var(--celeste); margin-top: .7rem; }
.intestazione-pagina.scuro .sez-intro { margin-bottom: 0; }
.intestazione-pagina.scuro .etichette { margin: 1rem 0 0; }
.hero-scuro.compatto { padding: clamp(1.5rem, 3.5vw, 3rem) 0 clamp(1.75rem, 4vw, 3.25rem); }
.hero-scuro.compatto h1 { font-size: clamp(1.95rem, 1.3rem + 1.9vw, 2.75rem); }
.hero-scuro.senza-figura.senza-vantaggi .hs-griglia { grid-template-columns: minmax(0, 1fr); grid-template-areas: "testo"; }
.hero-scuro.senza-figura.senza-vantaggi .hs-testo { max-width: 46rem; }
.hs-etichette { margin: 1rem 0 0; }
.hs-figura.figura-icona { min-height: 16rem; }
.hs-figura.figura-icona::after { display: none; }
.hs-icona-grande { position: relative; z-index: 1; display: grid; place-items: center; width: 11rem; height: 11rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #1E3358, #0B1B35 70%); border: 2px solid rgba(56,195,254, .6); box-shadow: 0 0 0 14px rgba(1,178,253, .08), 0 0 60px rgba(1,178,253, .35); color: var(--celeste-chiaro); }
.hs-icona-grande svg { width: 4.5rem; height: 4.5rem; }
/* ricerca dentro l'hero (Assistenza) e barra di ricerca dell'Academy */
.hs-testo .ricerca { margin-top: 1.5rem; max-width: 38rem; }
.ricerca-grande label { font-size: 1.05rem; }
.ricerca-grande input { min-height: 58px; font-size: 1.08rem; padding-left: 1rem; border-radius: 14px; }
.hero-scuro .ricerca input { border-color: #94A3B8; background: #050C1A; }
.hero-scuro .ricerca input:focus-visible { outline-color: var(--celeste-chiaro); }
.ricerca-risultati:empty { display: none; }
.hero-scuro .ricerca-risultati { max-width: 38rem; }
.ricerca-barra { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: flex-end; justify-content: space-between; padding: 1.25rem; border: 1px solid var(--bordo); border-radius: var(--raggio-l); background: var(--sfondo-2); }
.ricerca-barra .ricerca { flex: 1 1 22rem; }
.ricerca-barra .filtri { margin: 0; }
/* schede di aiuto (Accedi, Assistenza) */
.schede-aiuto { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.schede-aiuto .scheda p a { font-weight: 600; }
/* modulo con colonna laterale (Contatti, Demo, Assistenza) */
.modulo-griglia { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(16rem, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.modulo-sez .modulo-scheda { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio-l); padding: clamp(1.25rem, 3vw, 2rem); box-shadow: var(--ombra-2); }
.modulo-scheda h2 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); }
.modulo-lato { display: grid; gap: 1rem; position: sticky; top: 6rem; }
.lato-recapiti { border-radius: var(--raggio); padding: 1.1rem 1.25rem; background: var(--evidenza-sfondo); color: var(--evidenza-testo); }
.lato-recapiti h3 { color: inherit; font-size: 1.05rem; }
.lato-recapiti ul { list-style: none; margin: 0; padding: 0; }
.lato-recapiti a { color: inherit; font-weight: 600; }
.lato-elenco { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.lato-voce { display: flex; gap: .9rem; align-items: flex-start; padding: 1.1rem 1.15rem; border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--superficie); }
.lato-voce h3 { font-size: 1.05rem; margin: .15rem 0 .3rem; }
.lato-voce p { margin: 0; color: var(--tenue); font-size: .95rem; }
.lato-voce p + p { margin-top: .4rem; }
.lato-voce a { font-weight: 600; }
/* pagine dei moduli: problema → soluzione, esempio, piano */
.ps-grande { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; max-width: 64rem; margin: 0 auto; }
.ps-prima, .ps-dopo { border-radius: var(--raggio-l); padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--bordo); }
.ps-prima { background: var(--sfondo-2); }
.ps-dopo { background: var(--superficie); border-top: 5px solid var(--celeste); box-shadow: var(--ombra-2); }
.ps-grande h3 { display: flex; align-items: center; gap: .75rem; font-size: 1.15rem; margin-bottom: .8rem; }
.ps-grande p { margin: 0; font-size: 1.05rem; }
.ps-prima p { color: var(--tenue); }
.ps-prima .v-icona { background: var(--sfondo-3); color: var(--tenue); border-color: var(--bordo); }
.esempio-scheda { border-radius: var(--raggio-l); padding: clamp(1.5rem, 3.5vw, 2.5rem); background: radial-gradient(26rem 14rem at 90% 0%, rgba(1,178,253, .2), transparent 65%), #0B1B35; border: 1px solid #1E3358; }
.esempio-testo { font-size: 1.12rem; line-height: 1.7; color: var(--testo); }
.esempio-scheda .nota { margin: 0; font-size: .92rem; }
.piano-scheda { display: flex; gap: 1.1rem; align-items: flex-start; padding: clamp(1.25rem, 3vw, 2rem); border: 2px solid var(--celeste); border-radius: var(--raggio-l); background: var(--superficie); box-shadow: var(--ombra-2); margin-bottom: 1.5rem; }
.piano-scheda h2 { font-size: 1.45rem; margin-bottom: .5rem; }
.piano-scheda p:last-child { margin: 0; }
/* Academy */
.corso-scheda .occhiello { margin-bottom: .35rem; font-size: .74rem; }
.percorso-blocco + .percorso-blocco { margin-top: 2.5rem; }
.percorso-blocco h2 { display: flex; align-items: center; gap: .8rem; }
.lezione-corpo > h2 { margin-top: 2.25rem; }
.lezione-sintesi { margin-top: 1.5rem; padding: clamp(1.25rem, 3vw, 1.75rem); border-radius: var(--raggio-l); background: var(--evidenza-sfondo); color: var(--evidenza-testo); }
.lezione-sintesi h2, .lezione-sintesi h3 { color: inherit; }
.lezione-sintesi h2 { font-size: 1.35rem; margin-bottom: .4rem; }
.lezione-sintesi h3 { font-size: 1rem; margin: 1rem 0 .5rem; text-transform: uppercase; letter-spacing: .06em; }
.lezione-obiettivo { font-size: 1.12rem; font-weight: 600; margin: 0; }
.punti-chiave { margin: 0; padding-left: 1.4rem; }
.punti-chiave li { margin: .3rem 0; }
.lezione-nav { justify-content: space-between; border-top: 1px solid var(--bordo); padding-top: 1.25rem; }
/* Assistenza: problemi e soluzioni */
.problema-scheda { border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 1.25rem 1.4rem; margin: 0 0 1.25rem; background: var(--superficie); box-shadow: var(--ombra-1); }
.problema-scheda h2 { font-size: 1.25rem; }
.problema-scheda h3 { font-size: .85rem; letter-spacing: .07em; text-transform: uppercase; color: var(--accento-testo); font-family: var(--carattere); margin: 1rem 0 .4rem; }
.problema-scheda ol { margin: 0; }
.problema-causa { color: var(--tenue); margin: 0; }
/* blog */
.schede-blog .leggi { font-weight: 700; color: var(--accento-testo); }
/* 404 nell'hero scuro */
.hero-scuro.pagina-404 { text-align: left; }
.hero-scuro.pagina-404 .azioni { justify-content: flex-start; }
.hero-scuro.pagina-404 .codice { color: var(--celeste-chiaro); font-size: clamp(3.5rem, 2.5rem + 5vw, 6rem); margin-bottom: .25rem; }
.hero-scuro .hs-nota a { color: #fff; }
@media (max-width: 860px) {
  .modulo-griglia, .ps-grande { grid-template-columns: minmax(0, 1fr); }
  .modulo-lato { position: static; }
  .lezione-nav { flex-direction: column; align-items: stretch; }
  .lezione-nav .pulsante { width: 100%; }
}
@media (max-width: 760px) {
  .hs-figura.figura-icona { min-height: 0; padding: .5rem 0 0; }
  .hs-icona-grande { width: 7.5rem; height: 7.5rem; }
  .hs-icona-grande svg { width: 3rem; height: 3rem; }
  .piano-scheda { flex-direction: column; }
}
.schede[data-elenco-corsi] { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.lezione-lato li a { display: block; }