/* =========================================================
   Audia — foglio di stile del sito (ga-soft.it/audia)
   Palette: [data-palette] su <html>   Forme: [data-stile]
   ========================================================= */

/* ---------- Palette (tutte sul viola) ---------- */
:root, [data-palette="audia"] {
  --bg:#F6F8FE; --bg-2:#EEF0FC; --surface:#FFFFFF;
  --ink:#1A1033; --ink-2:#3F3A5E; --muted:#6E6A8C; --line:#E4E5F5;
  --p:#4361EE; --s:#8B5CF6; --a:#EC4899; --deep:#2E1065; --on-deep:#F3EEFF; --deep-muted:#C3B6EA;
  --glow:rgba(139,92,246,.22); --sh:46,16,101;
}
[data-palette="lavanda"] {
  --bg:#FAF7FF; --bg-2:#F2ECFE; --surface:#FFFFFF;
  --ink:#1E1236; --ink-2:#463A62; --muted:#76698F; --line:#EAE2F8;
  --p:#7C3AED; --s:#A78BFA; --a:#F472B6; --deep:#2E1065; --on-deep:#F5F0FF; --deep-muted:#CDBDF0;
  --glow:rgba(167,139,250,.26); --sh:46,16,101;
}
[data-palette="ametista"] {
  --bg:#F8F5FD; --bg-2:#EFE8FA; --surface:#FFFFFF;
  --ink:#1C1030; --ink-2:#44375C; --muted:#73678A; --line:#E7DFF4;
  --p:#6D28D9; --s:#9333EA; --a:#F59E0B; --deep:#2A0E57; --on-deep:#F6F0FF; --deep-muted:#C9B5EC;
  --glow:rgba(147,51,234,.22); --sh:42,14,87;
}
[data-palette="orchidea"] {
  --bg:#FDF7FC; --bg-2:#F8ECF7; --surface:#FFFFFF;
  --ink:#24102E; --ink-2:#4C3656; --muted:#7D6686; --line:#F1E0EF;
  --p:#9D4EDD; --s:#C77DFF; --a:#FF5D8F; --deep:#3C0D52; --on-deep:#FBF0FF; --deep-muted:#D9B6EA;
  --glow:rgba(199,125,255,.26); --sh:60,13,82;
}
[data-palette="indaco"] {
  --bg:#F5F6FE; --bg-2:#ECEDFC; --surface:#FFFFFF;
  --ink:#141432; --ink-2:#3A3A5E; --muted:#6A6A8C; --line:#E2E3F5;
  --p:#4F46E5; --s:#7C3AED; --a:#06B6D4; --deep:#1E1B4B; --on-deep:#EEF0FF; --deep-muted:#B5B7E6;
  --glow:rgba(79,70,229,.2); --sh:30,27,75;
}
[data-palette="prugna"] {
  --bg:#FBF6FB; --bg-2:#F4EAF4; --surface:#FFFFFF;
  --ink:#22102A; --ink-2:#4A3452; --muted:#7A6381; --line:#EEDFEE;
  --p:#7E22CE; --s:#C026D3; --a:#22D3EE; --deep:#3B0A45; --on-deep:#FCEFFF; --deep-muted:#D8B3DE;
  --glow:rgba(192,38,211,.2); --sh:59,10,69;
}
[data-palette="iris"] {
  --bg:#F7F7FF; --bg-2:#EFEEFE; --surface:#FFFFFF;
  --ink:#171635; --ink-2:#3D3B61; --muted:#6D6B90; --line:#E5E4F7;
  --p:#6366F1; --s:#A855F7; --a:#F43F5E; --deep:#26215C; --on-deep:#F1F0FF; --deep-muted:#BDB9EA;
  --glow:rgba(168,85,247,.22); --sh:38,33,92;
}
[data-palette="prugna-viva"] {
  --bg:#FCF6FC; --bg-2:#F6E8F7; --surface:#FFFFFF;
  --ink:#2A1033; --ink-2:#51365A; --muted:#7F6588; --line:#F0DDF1;
  --p:#8E24C9; --s:#D62FD8; --a:#16C7E8; --deep:#6B1A86; --on-deep:#FFFFFF; --deep-muted:#EBCDF0;
  --glow:rgba(214,47,216,.22); --sh:80,16,100;
}
[data-palette="ribes"] {
  --bg:#FBF7FE; --bg-2:#F3EAFD; --surface:#FFFFFF;
  --ink:#24103A; --ink-2:#4A3666; --muted:#7A6A92; --line:#ECE0FA;
  --p:#8B2BE2; --s:#E0379C; --a:#14C8D4; --deep:#5B1FA6; --on-deep:#FFFFFF; --deep-muted:#E3D2FA;
  --glow:rgba(224,55,156,.2); --sh:70,20,120;
}
[data-palette="ciclamino"] {
  --bg:#FDF7FC; --bg-2:#F9E9F6; --surface:#FFFFFF;
  --ink:#2B0F2E; --ink-2:#563A5A; --muted:#856A89; --line:#F2DDEF;
  --p:#9D23C9; --s:#F04BB4; --a:#FFAA1F; --deep:#7A1C8C; --on-deep:#FFFFFF; --deep-muted:#F2D0EC;
  --glow:rgba(240,75,180,.22); --sh:90,20,90;
}
[data-palette="glicine"] {
  --bg:#F8F7FF; --bg-2:#EEEAFF; --surface:#FFFFFF;
  --ink:#1D1640; --ink-2:#433C6E; --muted:#726B9A; --line:#E4DFFA;
  --p:#7C4DFF; --s:#C04DF9; --a:#00C2A8; --deep:#4B2BBF; --on-deep:#FFFFFF; --deep-muted:#D6CCFF;
  --glow:rgba(124,77,255,.22); --sh:60,40,150;
}
[data-palette="notte"] {
  --bg:#1C1533; --bg-2:#241C40; --surface:#2C2350;
  --ink:#F3EEFF; --ink-2:#D2C8F0; --muted:#A79CC9; --line:#3B3166;
  --p:#8B7BFF; --s:#C084FC; --a:#F472B6; --deep:#140E28; --on-deep:#F3EEFF; --deep-muted:#A79CC9;
  --glow:rgba(192,132,252,.25); --sh:0,0,0;
}

/* ---------- Forme ---------- */
:root, [data-stile="morbido"] { --r:18px; --r-lg:28px; --pill:999px; }
[data-stile="netto"] { --r:10px; --r-lg:16px; --pill:12px; }

:root {
  --f-head:"Plus Jakarta Sans","Inter",system-ui,sans-serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --grad:linear-gradient(120deg,var(--p),var(--s) 55%,var(--a));
  --sh-s:0 1px 2px rgba(var(--sh),.06),0 2px 8px rgba(var(--sh),.05);
  --sh-m:0 14px 34px -12px rgba(var(--sh),.22),0 4px 10px rgba(var(--sh),.06);
  --sh-l:0 40px 80px -28px rgba(var(--sh),.40),0 12px 28px -10px rgba(var(--sh),.14);
}

/* ---------- Base ---------- */
*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { font-family:var(--f-body); background:var(--bg); color:var(--ink); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:background-color .4s ease, color .4s ease; }
img,svg { display:block; max-width:100%; }
a { color:inherit; }
button,input,select,textarea { font:inherit; color:inherit; }
h1,h2,h3,h4 { font-family:var(--f-head); font-weight:800; letter-spacing:-.025em; line-height:1.1; color:var(--ink); }
h1 { font-size:clamp(2.4rem,5.2vw,4.2rem); }
h2 { font-size:clamp(1.9rem,3.6vw,2.8rem); }
h3 { font-size:1.2rem; }
p { color:var(--ink-2); }
::selection { background:var(--s); color:#fff; }
:focus-visible { outline:3px solid var(--s); outline-offset:3px; }
.wrap { width:min(1200px, 100% - 40px); margin-inline:auto; }
.skip { position:absolute; left:-999px; top:8px; z-index:100; padding:8px 14px; border-radius:var(--r); background:var(--p); color:#fff; }
.skip:focus { left:12px; }
.grad-text { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.kicker { display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:var(--pill); background:color-mix(in srgb, var(--s) 12%, var(--surface)); color:var(--p); font-size:.82rem; font-weight:700; letter-spacing:.02em; }
.kicker i { width:8px; height:8px; border-radius:50%; background:var(--a); box-shadow:0 0 0 4px color-mix(in srgb, var(--a) 22%, transparent); }
.lead { font-size:1.15rem; max-width:56ch; }
.section { position:relative; padding-block:clamp(72px,9vw,120px); }
.section--alt { background:var(--bg-2); }
.head { max-width:720px; margin-bottom:48px; }
.head.center { text-align:center; margin-inline:auto; }
.head.center .lead { margin-inline:auto; }
.head h2 { margin:16px 0 14px; }

/* ---------- Pulsanti ---------- */
.btn { display:inline-flex; align-items:center; gap:10px; padding:15px 26px; border-radius:var(--pill); border:0; cursor:pointer; text-decoration:none; font-weight:700; font-size:1rem; color:#fff; background:var(--grad); background-size:150% 100%; box-shadow:0 14px 30px -12px color-mix(in srgb, var(--s) 70%, transparent); transition:transform .2s ease, box-shadow .2s ease, background-position .5s ease; }
.btn:hover { transform:translateY(-2px); background-position:100% 0; box-shadow:0 20px 40px -14px color-mix(in srgb, var(--s) 80%, transparent); }
.btn svg { width:18px; height:18px; transition:transform .2s ease; }
.btn:hover svg { transform:translateX(4px); }
.btn--ghost { background:var(--surface); color:var(--ink); box-shadow:var(--sh-s); border:1px solid var(--line); }
.btn--ghost:hover { box-shadow:var(--sh-m); }
.btn--white { background:#fff; color:var(--deep); }
.btn-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.link { display:inline-flex; align-items:center; gap:8px; color:var(--p); font-weight:700; text-decoration:none; }
.link svg { width:16px; height:16px; transition:transform .2s ease; }
.link:hover svg { transform:translateX(4px); }

/* ---------- Header ---------- */
.top { position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:saturate(170%) blur(16px); -webkit-backdrop-filter:saturate(170%) blur(16px); transition:box-shadow .3s ease; }
.top.is-scrolled { box-shadow:0 1px 0 var(--line), 0 10px 30px -20px rgba(var(--sh),.4); }
.top__in { display:flex; align-items:center; justify-content:space-between; gap:20px; height:76px; }
.logo { display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.logo svg { width:46px; height:36px; }
.logo b { font-family:var(--f-head); font-weight:800; font-size:1.55rem; letter-spacing:-.03em; color:#2E1065; line-height:1; }
[data-palette="notte"] .logo b { color:#fff; }
.nav { display:flex; align-items:center; gap:6px; }
.nav ul { display:flex; gap:2px; list-style:none; padding:0; }
.nav ul a { display:block; padding:9px 15px; border-radius:var(--pill); text-decoration:none; font-weight:600; font-size:.95rem; color:var(--ink-2); transition:background .2s ease, color .2s ease; }
.nav ul a:hover { background:var(--bg-2); color:var(--ink); }
.nav ul a[aria-current="page"] { background:var(--surface); color:var(--p); box-shadow:var(--sh-s); }
.nav .btn { padding:11px 20px; font-size:.92rem; margin-left:8px; }
.burger { display:none; width:46px; height:46px; border-radius:var(--r); border:1px solid var(--line); background:var(--surface); cursor:pointer; position:relative; box-shadow:var(--sh-s); }
.burger span, .burger span::before, .burger span::after { position:absolute; left:12px; right:12px; height:2px; background:var(--ink); content:""; transition:transform .25s ease; }
.burger span { top:22px; } .burger span::before { top:-6px; left:0; right:0; } .burger span::after { top:6px; left:0; right:0; }
.burger[aria-expanded="true"] span { background:transparent; }
.burger[aria-expanded="true"] span::before { transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform:translateY(-6px) rotate(-45deg); }
@media (max-width:1080px) {
  .burger { display:block; }
  .nav { position:absolute; top:76px; left:12px; right:12px; display:none; flex-direction:column; align-items:stretch; padding:14px; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-l); }
  .nav.is-open { display:flex; }
  .nav ul { flex-direction:column; }
  .nav ul a { padding:13px 14px; }
  .nav .btn { margin:8px 0 0; justify-content:center; }
}

/* ---------- Sfondo animato ---------- */
.aura { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.aura i { position:absolute; border-radius:50%; filter:blur(70px); opacity:.75; }
.aura i:nth-child(1) { width:560px; height:560px; right:-140px; top:-160px; background:color-mix(in srgb, var(--s) 40%, transparent); animation:drift 18s ease-in-out infinite alternate; }
.aura i:nth-child(2) { width:420px; height:420px; left:-160px; top:25%; background:color-mix(in srgb, var(--p) 28%, transparent); animation:drift 22s ease-in-out infinite alternate-reverse; }
.aura i:nth-child(3) { width:340px; height:340px; right:30%; bottom:-180px; background:color-mix(in srgb, var(--a) 22%, transparent); animation:drift 26s ease-in-out infinite alternate; }
@keyframes drift { to { transform:translate(-60px,50px) scale(1.15); } }
.wave-lines { position:absolute; left:0; right:0; bottom:0; height:140px; opacity:.5; pointer-events:none; }
.wave-lines path { fill:none; stroke-width:2; }
.wave-lines .w1 { stroke:color-mix(in srgb, var(--s) 50%, transparent); animation:wave 9s linear infinite; }
.wave-lines .w2 { stroke:color-mix(in srgb, var(--a) 40%, transparent); animation:wave 13s linear infinite reverse; }
.wave-lines .w3 { stroke:color-mix(in srgb, var(--p) 35%, transparent); stroke-width:1.5; animation:wave 19s linear infinite; }
@keyframes wave { to { transform:translateX(-50%); } }

/* ---------- Dispositivi (cornici generiche: telefono "iPhone" e "Android") ---------- */
.device { position:relative; width:var(--w,270px); aspect-ratio:620/1348; border-radius:calc(var(--w,270px) * .16); padding:calc(var(--w,270px) * .035); background:linear-gradient(145deg,#3a3a40,#16161a 40%,#2b2b31); box-shadow:inset 0 0 0 2px #4a4a52, inset 0 0 0 5px #0c0c0e, var(--sh-l); flex:none; }
.device__screen { position:relative; width:100%; height:100%; border-radius:calc(var(--w,270px) * .13); overflow:hidden; background:#fff; }
.device__screen img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.device--ios .device__notch { position:absolute; z-index:3; top:calc(var(--w,270px) * .055); left:50%; width:30%; height:calc(var(--w,270px) * .085); transform:translateX(-50%); border-radius:999px; background:#000; }
.device--android { border-radius:calc(var(--w,270px) * .12); background:linear-gradient(145deg,#e9e6f2,#b9b4c9 45%,#dcd8e6); box-shadow:inset 0 0 0 2px #cfcadb, inset 0 0 0 5px #111, var(--sh-l); }
.device--android .device__screen { border-radius:calc(var(--w,270px) * .095); }
.device--android .device__notch { position:absolute; z-index:3; top:calc(var(--w,270px) * .06); left:50%; width:calc(var(--w,270px) * .06); height:calc(var(--w,270px) * .06); transform:translateX(-50%); border-radius:50%; background:#000; }
.device::before { content:""; position:absolute; right:-3px; top:24%; width:3px; height:12%; border-radius:0 3px 3px 0; background:#2b2b31; }
.device--android::before { background:#bdb8cb; }
.device__label { position:absolute; left:50%; bottom:-34px; transform:translateX(-50%); font-size:.78rem; font-weight:600; color:var(--muted); white-space:nowrap; }

/* schermate che si alternano (scene animate) */
.scene img { opacity:0; }
.scene img.is-on { opacity:1; transition:opacity .6s ease; }
.slide-track { position:absolute; inset:0; display:flex; transition:transform .8s cubic-bezier(.6,.05,.3,1); }
.slide-track img { position:relative; flex:none; width:100%; height:100%; opacity:1; }

/* il "dito": un punto che tocca e scorre */
.touch { position:absolute; z-index:5; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%; background:rgba(255,255,255,.55); border:2px solid rgba(255,255,255,.95); box-shadow:0 6px 18px rgba(0,0,0,.25); left:var(--tx,50%); top:var(--ty,50%); opacity:0; transition:left .9s cubic-bezier(.5,0,.3,1), top .9s cubic-bezier(.5,0,.3,1), opacity .3s ease, transform .15s ease; pointer-events:none; backdrop-filter:blur(2px); }
.touch.is-on { opacity:1; }
.touch.is-press { transform:scale(.78); }
.touch::after { content:""; position:absolute; inset:-2px; border-radius:50%; border:2px solid #fff; opacity:0; }
.touch.is-press::after { animation:ripple .6s ease-out; }
@keyframes ripple { from { transform:scale(.6); opacity:.9; } to { transform:scale(2.6); opacity:0; } }

/* ---------- HERO ---------- */
.hero { position:relative; padding:clamp(40px,6vw,90px) 0 clamp(80px,9vw,130px); overflow:hidden; }
.hero__in { position:relative; z-index:1; display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(30px,5vw,60px); align-items:center; }
.hero h1 { margin:20px 0 20px; }
.chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.chip { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:var(--pill); background:var(--surface); box-shadow:var(--sh-s); font-size:.86rem; font-weight:600; color:var(--ink-2); }
.chip svg { width:16px; height:16px; color:var(--s); }
.hero__devices { position:relative; display:flex; justify-content:center; align-items:flex-end; min-height:600px; }
.hero__devices .device--ios { --w:280px; z-index:2; transform:rotate(-4deg); animation:floaty 7s ease-in-out infinite; }
.hero__devices .device--android { --w:250px; margin-left:-70px; margin-bottom:60px; transform:rotate(6deg); animation:floaty 8s ease-in-out -3s infinite; }
@keyframes floaty { 50% { translate:0 -14px; } }
.bubble { position:absolute; z-index:4; display:inline-flex; align-items:center; gap:10px; padding:11px 15px; border-radius:16px; background:var(--surface); box-shadow:var(--sh-m); font-size:.85rem; font-weight:700; color:var(--ink); animation:floaty 6s ease-in-out infinite; }
.bubble small { display:block; font-weight:500; color:var(--muted); font-size:.75rem; }
.bubble .ico { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:var(--grad); color:#fff; flex:none; }
.bubble .ico svg { width:18px; height:18px; }
.bubble--1 { left:0; top:14%; animation-delay:-2s; }
.bubble--2 { right:0; bottom:16%; animation-delay:-4s; }
@media (max-width:980px) { .hero__in { grid-template-columns:1fr; } .hero__devices { min-height:520px; } .hero__devices .device--ios { --w:240px; } .hero__devices .device--android { --w:210px; margin-left:-60px; } .bubble--1 { left:2%; } .bubble--2 { right:2%; } }
@media (max-width:480px) { .hero__devices .device--ios { --w:200px; } .hero__devices .device--android { --w:175px; } .bubble { font-size:.75rem; padding:8px 11px; } }

/* ---------- Nastro funzioni ---------- */
.marquee { overflow:hidden; padding:18px 0; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee__track { display:flex; gap:12px; width:max-content; animation:marquee 40s linear infinite; }
.marquee:hover .marquee__track { animation-play-state:paused; }
@keyframes marquee { to { transform:translateX(-50%); } }
.marquee .chip { white-space:nowrap; }

/* ---------- Vetrina white label ---------- */
.brandshow { display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(24px,4vw,56px); align-items:center; }
.brandtabs { display:grid; gap:10px; margin-top:26px; }
.brandtab { display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:var(--r); border:1px solid var(--line); background:var(--surface); cursor:pointer; text-align:left; transition:box-shadow .25s ease, border-color .25s ease, transform .25s ease; }
.brandtab:hover { transform:translateX(4px); }
.brandtab[aria-selected="true"] { border-color:var(--c); box-shadow:0 0 0 2px var(--c), var(--sh-m); }
.brandtab i { width:38px; height:38px; border-radius:12px; background:var(--c); flex:none; display:grid; place-items:center; color:#fff; font-style:normal; font-weight:800; font-family:var(--f-head); }
.brandtab b { display:block; font-family:var(--f-head); }
.brandtab small { color:var(--muted); }
.brandstage { position:relative; min-height:520px; border-radius:var(--r-lg); overflow:hidden; background:linear-gradient(180deg, color-mix(in srgb, var(--c) 18%, #fff), #fff 70%); box-shadow:var(--sh-l); transition:background .6s ease; }
.brandstage__shop { position:absolute; left:0; right:0; bottom:0; height:78%; }
.brandstage__shop svg { width:100%; height:100%; }
.brandstage .device { --w:190px; position:absolute; right:7%; bottom:6%; z-index:2; animation:floaty 7s ease-in-out infinite; }
.brandstage .device__screen img { transition:filter .6s ease; }
.brandstage__name { position:absolute; z-index:3; left:7%; top:4.6%; padding:3px 8px 3px 5px; border-radius:6px; background:#F6F8FE; font:800 11px/1.2 var(--f-head); color:var(--c); display:flex; align-items:center; gap:5px; white-space:nowrap; max-width:62%; overflow:hidden; }
.brandstage__name::before { content:""; width:13px; height:13px; border-radius:4px; background:var(--c); flex:none; }
.brandstage__caption { position:absolute; left:20px; top:18px; z-index:3; padding:8px 14px; border-radius:var(--pill); background:rgba(255,255,255,.9); box-shadow:var(--sh-s); font-weight:700; font-size:.85rem; color:#1A1033; }
@media (max-width:900px) { .brandshow { grid-template-columns:1fr; } .brandstage { min-height:440px; } .brandstage .device { --w:160px; } }

/* ---------- Persone (illustrazioni) ---------- */
.people { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.person { border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-m); overflow:hidden; transition:transform .3s ease, box-shadow .3s ease; }
.person:hover { transform:translateY(-6px); box-shadow:var(--sh-l); }
.person__art { aspect-ratio:4/3; background:linear-gradient(160deg, color-mix(in srgb, var(--s) 16%, #fff), color-mix(in srgb, var(--a) 10%, #fff)); }
.person__art svg { width:100%; height:100%; }
.person__body { padding:22px 24px 26px; }
.person__body h3 { margin-bottom:6px; }
.person__body p { font-size:.97rem; }
@media (max-width:900px) { .people { grid-template-columns:1fr; max-width:520px; margin-inline:auto; } }
/* piccoli movimenti nelle illustrazioni */
.blink { animation:blink 4.5s infinite; transform-box:fill-box; transform-origin:center; }
@keyframes blink { 0%,94%,100% { transform:scaleY(1); } 97% { transform:scaleY(.1); } }
.nod { animation:nod 5s ease-in-out infinite; transform-box:fill-box; transform-origin:50% 90%; }
@keyframes nod { 50% { transform:rotate(-3deg); } }
.tap { animation:tap 2.4s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes tap { 0%,60%,100% { transform:translateY(0); } 70% { transform:translateY(3px); } }
.sound { animation:sound 1.8s ease-out infinite; transform-box:fill-box; transform-origin:left center; opacity:0; }
.sound--2 { animation-delay:.6s; } .sound--3 { animation-delay:1.2s; }
@keyframes sound { 0% { opacity:0; transform:scale(.6); } 30% { opacity:1; } 100% { opacity:0; transform:scale(1.4); } }
.glow-screen { animation:glowscreen 3s ease-in-out infinite; }
@keyframes glowscreen { 50% { opacity:.6; } }

/* ---------- Percorso in 4 passi ---------- */
.journey { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:passo; }
.step { position:relative; padding:26px 22px 24px; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-m); counter-increment:passo; }
.step::before { content:counter(passo,decimal-leading-zero); display:inline-grid; place-items:center; width:42px; height:42px; border-radius:14px; background:var(--grad); color:#fff; font:800 .95rem var(--f-head); margin-bottom:16px; box-shadow:0 10px 20px -8px var(--glow); }
.step h3 { margin-bottom:6px; }
.step p { font-size:.95rem; }
.step__mini { height:120px; margin:0 -6px 14px; border-radius:var(--r); background:var(--bg-2); position:relative; overflow:hidden; }
.step__mini svg { width:100%; height:100%; }
@media (max-width:980px) { .journey { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .journey { grid-template-columns:1fr; } }

/* ---------- Galleria schermate ---------- */
.gallery { display:flex; gap:34px; overflow-x:auto; scroll-snap-type:x mandatory; padding:20px 4px 60px; scrollbar-width:thin; cursor:grab; }
.gallery.is-drag { cursor:grabbing; scroll-snap-type:none; }
.gallery figure { scroll-snap-align:center; flex:none; text-align:center; }
.gallery .device { --w:220px; margin-inline:auto; transition:transform .3s ease; }
.gallery figure:hover .device { transform:translateY(-8px) rotate(-1.5deg); }
.gallery figcaption { margin-top:46px; }
.gallery figcaption b { display:block; font-family:var(--f-head); }
.gallery figcaption small { color:var(--muted); }
.gallery-hint { display:flex; align-items:center; gap:10px; justify-content:center; color:var(--muted); font-size:.88rem; }
.gallery-hint .swipe { width:40px; height:24px; position:relative; }
.gallery-hint .swipe i { position:absolute; top:4px; left:0; width:16px; height:16px; border-radius:50%; background:var(--s); opacity:.8; animation:swipe 2s ease-in-out infinite; }
@keyframes swipe { 0% { transform:translateX(24px); opacity:0; } 20% { opacity:.9; } 80% { transform:translateX(0); opacity:.9; } 100% { opacity:0; } }

/* ---------- App + portale ---------- */
.duo { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(24px,4vw,60px); align-items:center; }
.portal { border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-l); overflow:hidden; border:1px solid var(--line); }
.portal__bar { display:flex; gap:7px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--bg-2); }
.portal__bar i { width:10px; height:10px; border-radius:50%; background:#FF5F57; }
.portal__bar i:nth-child(2) { background:#FEBC2E; } .portal__bar i:nth-child(3) { background:#28C840; }
.portal__bar span { margin-left:12px; padding:4px 12px; border-radius:8px; background:var(--surface); font-size:.75rem; color:var(--muted); }
.portal__body { display:grid; grid-template-columns:150px 1fr; min-height:330px; }
.portal__side { padding:16px 12px; background:linear-gradient(180deg,var(--deep),color-mix(in srgb, var(--deep) 70%, var(--p))); display:grid; align-content:start; gap:6px; }
.portal__side span { padding:8px 10px; border-radius:8px; font-size:.78rem; font-weight:600; color:var(--deep-muted); }
.portal__side span.on { background:rgba(255,255,255,.14); color:#fff; }
.portal__main { padding:18px; display:grid; gap:10px; align-content:start; }
.portal__main h4 { font-size:.95rem; }
.appt { display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:12px; border:1px solid var(--line); font-size:.82rem; background:var(--surface); }
.appt b { display:block; font-size:.86rem; }
.appt small { color:var(--muted); }
.appt .av { width:32px; height:32px; border-radius:50%; background:var(--grad); flex:none; }
.appt .st { margin-left:auto; padding:5px 10px; border-radius:999px; font-weight:700; font-size:.72rem; }
.appt .st--ok { background:#DCFCE7; color:#15803D; } .appt .st--new { background:color-mix(in srgb, var(--a) 16%, #fff); color:var(--a); } .appt .st--wait { background:#FEF3C7; color:#B45309; }
.appt--new { animation:newappt 6s ease-in-out infinite; }
@keyframes newappt { 0%,10% { opacity:0; transform:translateY(-10px); } 18%,85% { opacity:1; transform:none; } 100% { opacity:0; } }
.feature-list { list-style:none; padding:0; display:grid; gap:14px; margin-top:24px; }
.feature-list li { display:flex; gap:14px; align-items:flex-start; }
.feature-list li > i { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:color-mix(in srgb, var(--s) 14%, var(--surface)); color:var(--p); flex:none; }
.feature-list li > i svg { width:20px; height:20px; }
.feature-list b { display:block; font-family:var(--f-head); }
.feature-list span { color:var(--ink-2); font-size:.95rem; }
@media (max-width:900px) { .duo { grid-template-columns:1fr; } .portal__body { grid-template-columns:110px 1fr; } }

/* ---------- Carte funzioni ---------- */
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { padding:26px; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-m); transition:transform .3s ease, box-shadow .3s ease; }
.card:hover { transform:translateY(-5px); box-shadow:var(--sh-l); }
.card .ic { width:48px; height:48px; border-radius:15px; display:grid; place-items:center; background:var(--grad); color:#fff; margin-bottom:16px; box-shadow:0 12px 24px -10px var(--glow); }
.card .ic svg { width:24px; height:24px; }
.card h3 { margin-bottom:6px; }
.card p { font-size:.96rem; }
@media (max-width:900px) { .cards { grid-template-columns:1fr 1fr; } }
@media (max-width:600px) { .cards { grid-template-columns:1fr; } }

/* ---------- Configuratore colori (anteprima app) ---------- */
.config { display:grid; grid-template-columns:1fr auto; gap:clamp(24px,4vw,60px); align-items:center; }
.config__controls { display:grid; gap:16px; padding:26px; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-m); }
.config__controls label { display:grid; gap:6px; font-weight:700; font-size:.92rem; }
.config__controls small { font-weight:500; color:var(--muted); }
.config__controls input[type=text] { padding:12px 14px; border-radius:var(--r); border:1px solid var(--line); background:var(--bg); }
.swatches { display:flex; flex-wrap:wrap; gap:8px; }
.swatches button { width:36px; height:36px; border-radius:50%; border:3px solid #fff; box-shadow:0 0 0 1px var(--line); cursor:pointer; background:var(--c); }
.swatches button[aria-pressed="true"] { box-shadow:0 0 0 2px var(--ink); }
.swatches input[type=color] { width:36px; height:36px; border:0; padding:0; border-radius:50%; overflow:hidden; cursor:pointer; background:none; }
.mock { --mp:#4361EE; --ms:#8B5CF6; --ma:#EC4899; }
.mock .device__screen { background:#F6F8FE; padding:22% 7% 0; font-family:var(--f-body); }
.mock__top { display:flex; align-items:center; gap:6px; font:800 13px var(--f-head); color:var(--mp); margin-bottom:10px; }
.mock__top i { width:16px; height:16px; border-radius:5px; background:linear-gradient(135deg,var(--mp),var(--ms)); }
.mock__hero { padding:14px; border-radius:16px; background:linear-gradient(135deg,var(--mp),var(--ms)); color:#fff; }
.mock__hero b { display:block; font:800 14px var(--f-head); }
.mock__hero small { font-size:9.5px; opacity:.85; }
.mock__hero span { display:block; margin-top:10px; padding:8px; border-radius:999px; background:#fff; color:var(--mp); font:800 10.5px var(--f-head); text-align:center; }
.mock__row { display:flex; align-items:center; gap:8px; margin-top:8px; padding:9px; border-radius:12px; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.05); font:700 10.5px var(--f-head); color:#1A1033; }
.mock__row i { width:22px; height:22px; border-radius:7px; background:linear-gradient(135deg,var(--mp),var(--ms)); flex:none; }
.mock__offer { margin-top:8px; padding:10px; border-radius:12px; background:var(--ma); color:#fff; font:800 10.5px var(--f-head); }
@media (max-width:820px) { .config { grid-template-columns:1fr; } .config .device { margin-inline:auto; } }

/* ---------- FAQ ---------- */
.faq { display:grid; gap:10px; max-width:860px; margin-inline:auto; }
.faq details { border-radius:var(--r); background:var(--surface); box-shadow:var(--sh-s); }
.faq details[open] { box-shadow:var(--sh-m); }
.faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:16px; align-items:center; padding:18px 20px; font:700 1.04rem var(--f-head); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary i { position:relative; width:28px; height:28px; flex:none; border-radius:50%; background:var(--bg-2); }
.faq summary i::before, .faq summary i::after { content:""; position:absolute; left:50%; top:50%; width:11px; height:2px; background:var(--ink); transform:translate(-50%,-50%); }
.faq summary i::after { transform:translate(-50%,-50%) rotate(90deg); transition:transform .3s ease; }
.faq details[open] summary i { background:var(--grad); }
.faq details[open] summary i::before, .faq details[open] summary i::after { background:#fff; }
.faq details[open] summary i::after { transform:translate(-50%,-50%) rotate(0); }
.faq details p { padding:0 20px 20px; }

/* ---------- Banda finale ---------- */
.cta { position:relative; overflow:hidden; display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:24px; padding:clamp(34px,5vw,64px); border-radius:calc(var(--r-lg) + 6px); background:radial-gradient(500px 260px at 90% 0%, color-mix(in srgb, var(--a) 45%, transparent), transparent 60%), linear-gradient(130deg,var(--deep),color-mix(in srgb, var(--deep) 60%, var(--s))); box-shadow:var(--sh-l); }
.cta h2 { color:#fff; max-width:15ch; }
.cta p { color:var(--deep-muted); margin-top:14px; max-width:44ch; }
.cta .btn--ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,.3); box-shadow:none; }
.cta__art { position:relative; height:260px; }
.cta__art .device { --w:150px; position:absolute; right:10%; top:6px; transform:rotate(8deg); animation:floaty 6s ease-in-out infinite; }
.cta__art .device + .device { right:44%; top:40px; transform:rotate(-6deg); animation-delay:-2s; }
@media (max-width:820px) { .cta { grid-template-columns:1fr; } .cta__art { display:none; } }

/* ---------- Pagine interne ---------- */
.page-head { position:relative; overflow:hidden; padding:clamp(56px,7vw,96px) 0 clamp(40px,5vw,64px); }
.page-head .wrap { position:relative; z-index:1; }
.page-head h1 { margin:16px 0 14px; max-width:18ch; }
.prose { max-width:820px; margin-inline:auto; padding:clamp(24px,4vw,48px); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-m); }
.prose h2 { font-size:1.5rem; margin:34px 0 10px; }
.prose h3 { font-size:1.15rem; margin:26px 0 8px; }
.prose h2:first-child, .prose h3:first-child { margin-top:0; }
.prose p, .prose li { color:var(--ink-2); }
.prose p + p { margin-top:12px; }
.prose ul, .prose ol { padding-left:22px; margin:12px 0; display:grid; gap:6px; }
.prose a { color:var(--p); }
.prose table { width:100%; border-collapse:collapse; margin:16px 0; font-size:.95rem; }
.prose th, .prose td { text-align:left; padding:10px; border-bottom:1px solid var(--line); vertical-align:top; }
.da-compilare { background:#FEF3C7; color:#92400E; padding:1px 6px; border-radius:6px; font-size:.9em; }

/* ---------- Contatti ---------- */
.contact { display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(24px,4vw,56px); align-items:start; }
.form { display:grid; gap:16px; padding:clamp(22px,4vw,38px); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-l); border-top:5px solid; border-image:var(--grad) 1; }
.form .row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field { display:grid; gap:6px; }
.field label { font-weight:700; font-size:.88rem; }
.field input, .field textarea { width:100%; padding:13px 14px; border-radius:var(--r); border:1px solid var(--line); background:var(--bg); transition:border-color .2s ease, box-shadow .2s ease; }
.field textarea { min-height:130px; resize:vertical; }
.field input:focus, .field textarea:focus { outline:none; border-color:var(--s); box-shadow:0 0 0 4px var(--glow); }
.req { color:var(--a); }
.err { display:none; font-size:.83rem; font-weight:600; color:#DC2626; }
.has-error .err { display:block; }
.has-error input, .has-error textarea { border-color:#DC2626; }
.consent { display:flex; gap:12px; align-items:flex-start; padding:14px; border-radius:var(--r); border:1px solid transparent; font-size:.9rem; color:var(--ink-2); transition:border-color .2s ease, background .2s ease; }
.consent input { width:20px; height:20px; margin-top:2px; accent-color:var(--p); flex:none; }
.consent.has-error { border-color:#DC2626; background:#FEF2F2; animation:shake .4s ease; }
@keyframes shake { 25% { transform:translateX(-6px); } 75% { transform:translateX(6px); } }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.esito { display:none; padding:13px 16px; border-radius:var(--r); font-weight:600; font-size:.94rem; }
.esito.is-on { display:block; }
.esito--errore { background:#FEF2F2; color:#B91C1C; border-left:4px solid #DC2626; }
.esito--attesa { background:var(--bg-2); color:var(--ink-2); border-left:4px solid var(--s); }
.side-card { padding:24px; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-m); }
.side-card + .side-card { margin-top:16px; }
.side-card h3 { margin-bottom:12px; }
.steps-list { list-style:none; padding:0; display:grid; gap:14px; counter-reset:s; }
.steps-list li { display:grid; grid-template-columns:34px 1fr; gap:12px; counter-increment:s; font-size:.95rem; color:var(--ink-2); }
.steps-list li::before { content:counter(s); width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--grad); color:#fff; font:800 .9rem var(--f-head); }
.steps-list b { display:block; color:var(--ink); }
.contact-visual { position:relative; height:220px; border-radius:var(--r-lg); overflow:hidden; background:linear-gradient(140deg,var(--p),var(--s) 60%,var(--a)); box-shadow:var(--sh-l); margin-bottom:16px; }
.contact-visual svg { position:absolute; inset:0; width:100%; height:100%; }
@media (max-width:900px) { .contact { grid-template-columns:1fr; } }
@media (max-width:560px) { .form .row { grid-template-columns:1fr; } }

/* ---------- Footer ---------- */
.foot { margin-top:clamp(70px,9vw,110px); background:var(--deep); color:var(--deep-muted); padding:60px 0 28px; font-size:.94rem; }
.foot__grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:34px; }
.foot .logo b { color:#fff; }
.foot p { color:var(--deep-muted); margin-top:14px; max-width:40ch; }
.foot h4 { font:700 .78rem var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:#fff; margin-bottom:14px; }
.foot ul { list-style:none; padding:0; display:grid; gap:8px; }
.foot a { color:var(--deep-muted); text-decoration:none; }
.foot a:hover { color:#fff; }
.foot__bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:40px; padding-top:20px; border-top:1px solid rgba(255,255,255,.1); font-size:.84rem; }
@media (max-width:760px) { .foot__grid { grid-template-columns:1fr; } }

/* ---------- Comparsa allo scroll ---------- */
.rv { opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.rv.is-in { opacity:1; transform:none; }

/* ---------- Pannello di prova colori/stile (da togliere dopo la scelta) ---------- */
.prova-fab { position:fixed; left:18px; bottom:18px; z-index:90; display:inline-flex; align-items:center; gap:10px; padding:10px 16px 10px 10px; border-radius:999px; border:0; background:#111; color:#fff; cursor:pointer; font:600 .86rem/1 Inter,system-ui,sans-serif; box-shadow:0 12px 30px rgba(0,0,0,.3); }
.prova-fab span { display:flex; } .prova-fab span i { width:18px; height:18px; border-radius:50%; border:2px solid #111; margin-left:-6px; }
.prova-fab span i:first-child { margin-left:0; background:var(--p); } .prova-fab span i:nth-child(2) { background:var(--s); } .prova-fab span i:nth-child(3) { background:var(--a); }
.prova { position:fixed; left:18px; bottom:76px; z-index:90; width:min(400px, calc(100vw - 36px)); max-height:calc(100vh - 110px); overflow:auto; padding:20px; border-radius:18px; background:#fff; color:#111; box-shadow:0 30px 70px rgba(0,0,0,.3); font-family:Inter,system-ui,sans-serif; opacity:0; transform:translateY(10px); pointer-events:none; transition:opacity .25s ease, transform .25s ease; }
.prova.is-open { opacity:1; transform:none; pointer-events:auto; }
.prova h4 { font:600 .7rem/1 Inter,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:#777; margin:0 0 10px; }
.prova h4 + div { margin-bottom:18px; }
.prova__pal { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.prova__pal button, .prova__sti button { border:1px solid #e3e3e3; background:#fafafa; border-radius:10px; cursor:pointer; padding:7px 5px 6px; display:grid; gap:5px; justify-items:center; font:500 .7rem/1.1 Inter,sans-serif; color:#444; }
.prova__pal button[aria-pressed="true"], .prova__sti button[aria-pressed="true"] { border-color:#111; box-shadow:inset 0 0 0 1px #111; color:#111; background:#fff; }
.prova__pal .sw { display:flex; width:100%; height:20px; border-radius:6px; overflow:hidden; } .prova__pal .sw i { flex:1; }
.prova__sti { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.prova__sti button { padding:12px 6px; font-size:.78rem; }
.prova p { font-size:.75rem; color:#777; }

/* ---------- Torna su ---------- */
.su { position:fixed; right:18px; bottom:18px; z-index:70; width:48px; height:48px; border-radius:50%; border:0; background:var(--surface); color:var(--ink); box-shadow:var(--sh-m); display:grid; place-items:center; cursor:pointer; opacity:0; pointer-events:none; transition:opacity .3s ease, transform .3s ease; }
.su.is-on { opacity:1; pointer-events:auto; }
.su:hover { transform:translateY(-3px); }
.su svg { width:18px; height:18px; }

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .rv { opacity:1; transform:none; }
}
.disegna { stroke-dasharray:200; animation:disegna 4s ease-in-out infinite; }
@keyframes disegna { 0% { stroke-dashoffset:200; } 40%,80% { stroke-dashoffset:0; } 100% { stroke-dashoffset:-200; } }
.prose .segnaposto { padding:14px 16px; border-radius:var(--r); background:#FFFBEB; border-left:4px solid #F59E0B; color:#92400E; font-size:.92rem; }
.prose .segnaposto strong { display:block; margin-bottom:4px; }
.prose .indice-pagina { padding:18px 20px; border-radius:var(--r); background:var(--bg-2); margin:18px 0 8px; }
.prose .indice-pagina h2 { font-size:1rem; margin:0 0 8px; }
.prose .aggiornato { font-size:.88rem; color:var(--muted); }
.prose section { padding:0; }
.form input, .form textarea, .consent { scroll-margin-top:110px; }

/* =========================================================
   v3 — onde ovunque, demo animata, portale, configuratore
   ========================================================= */
:root { --onda:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 22Q150 4 300 22T600 22T900 22T1200 22V40H0Z'/%3E%3C/svg%3E"); }

/* stati generici */
.st { margin-left:auto; padding:4px 10px; border-radius:999px; font-weight:700; font-size:.72rem; white-space:nowrap; }
.st--ok { background:#DCFCE7; color:#15803D; } .st--new { background:color-mix(in srgb, var(--a) 18%, #fff); color:color-mix(in srgb, var(--a) 70%, #000); } .st--wait { background:#FEF3C7; color:#B45309; }
.dbtn { display:inline-block; padding:6px 12px; border-radius:999px; background:var(--grad); color:#fff; font-weight:700; font-size:.7rem; white-space:nowrap; text-align:center; transition:transform .15s ease; }
.dbtn--ghost { background:var(--surface); color:var(--ink); border:1px solid var(--line); }
.dbtn--full { display:block; padding:8px; }
.dbtn.is-press { transform:scale(.9); }
.dfield { display:block; padding:7px 9px; border-radius:8px; border:1px solid var(--line); background:var(--bg); font-size:.72rem; color:var(--ink); font-weight:500; }
.dfield--sm { color:var(--muted); }
.dfield--area { min-height:58px; }
.dcheck { display:flex; gap:8px; align-items:center; font-size:.7rem; font-weight:600; color:var(--ink-2); }
.dcheck i { position:relative; width:15px; height:15px; border-radius:4px; background:var(--grad); flex:none; }
.dcheck i::after { content:""; position:absolute; left:5px; top:1.5px; width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.av { width:30px; height:30px; border-radius:50%; background:var(--grad); flex:none; }
.av--2 { background:linear-gradient(135deg,#F59E0B,#EF4444); } .av--3 { background:linear-gradient(135deg,#10B981,#0EA5E9); }
.center-link { text-align:center; margin-top:30px; }

/* cursore simulato */
.dcursor, .dash__cursor { position:absolute; z-index:9; left:0; top:0; width:26px; height:26px; pointer-events:none; opacity:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 2.5l14 9.2-6.4 1.3-3.4 6.5z' fill='%231A1033' stroke='white' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
  transition:transform .9s cubic-bezier(.5,0,.3,1), opacity .3s ease; filter:drop-shadow(0 3px 5px rgba(0,0,0,.25)); }
.dcursor.is-on, .dash__cursor.is-on { opacity:1; }
.dcursor::after, .dash__cursor::after { content:""; position:absolute; left:-9px; top:-9px; width:26px; height:26px; border-radius:50%; border:2px solid var(--s); opacity:0; }
.dcursor.is-click::after, .dash__cursor.is-click::after { animation:ripple .6s ease-out; }

/* ---------- Onde nei bordi delle sezioni ---------- */
.section--alt::before, .section--alt::after, .foot::before {
  content:""; position:absolute; left:0; right:0; height:40px; background:var(--bg-2); pointer-events:none;
  -webkit-mask:var(--onda) repeat-x 0 0 / 1200px 40px; mask:var(--onda) repeat-x 0 0 / 1200px 40px;
  animation:ondamask 36s linear infinite; }
.section--alt::before { top:-39px; }
.section--alt::after { bottom:-39px; transform:scaleY(-1); animation-direction:reverse; }
.foot { position:relative; }
.foot::before { top:-39px; background:var(--deep); animation-duration:48s; }
@keyframes ondamask { to { -webkit-mask-position:1200px 0; mask-position:1200px 0; } }

/* ---------- Intestazioni di pagina: onde + equalizzatore ---------- */
.page-head { padding-bottom:clamp(70px,8vw,120px); }
.page-head--eq .wrap { padding-right:min(44%, 520px); }
.eqbars { position:absolute; z-index:0; right:max(24px, calc((100vw - 1200px) / 2)); top:50%; transform:translateY(-50%); width:min(40%, 460px); height:210px; display:flex; align-items:center; gap:4px; pointer-events:none; }
.eqbars span { flex:1; height:var(--h); border-radius:99px; background:linear-gradient(180deg,var(--p),var(--s) 50%,var(--a)); opacity:.85; animation:eq var(--d) ease-in-out var(--dl) infinite alternate; }
@keyframes eq { from { transform:scaleY(.22); } to { transform:scaleY(1); } }
@media (max-width:860px) {
  .page-head--eq .wrap { padding-right:0; }
  .eqbars { left:16px; right:16px; width:auto; top:auto; bottom:18px; transform:none; height:80px; opacity:.35; }
}
.wave-lines--chiare { z-index:0; height:120px; }
.wave-lines--chiare path { stroke:rgba(255,255,255,.22) !important; }
.cta > *:not(.wave-lines) { position:relative; z-index:1; }

/* ---------- Demo animata: app → server → portale ---------- */
.demo { position:relative; padding:clamp(18px,3vw,36px); border-radius:calc(var(--r-lg) + 4px); background:var(--surface); box-shadow:var(--sh-l); overflow:hidden; }
.demo::before { content:""; position:absolute; inset:0; background:radial-gradient(500px 260px at 15% 0%, color-mix(in srgb, var(--s) 10%, transparent), transparent 70%), radial-gradient(500px 260px at 90% 100%, color-mix(in srgb, var(--a) 10%, transparent), transparent 70%); pointer-events:none; }
.demo__stage { position:relative; display:grid; grid-template-columns:auto minmax(40px,1fr) auto minmax(40px,1fr) minmax(280px,1.5fr); align-items:center; min-height:470px; }
.demo__node { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:12px; }
.demo__node [data-punto] { transition:transform .5s ease, box-shadow .5s ease; }
.demo__node.is-active [data-punto] { transform:translateY(-6px); }
.demo .device { --w:200px; }
.demo .device__screen img { opacity:0; transition:opacity .5s ease; }
.demo .device__screen img.is-on { opacity:1; }
.demo__tag { display:inline-flex; align-items:center; gap:8px; padding:6px 13px 6px 6px; border-radius:var(--pill); background:var(--bg-2); font:700 .84rem var(--f-head); color:var(--ink); white-space:nowrap; transition:background .4s ease, color .4s ease; }
.demo__tag b { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:var(--grad); color:#fff; font-size:.72rem; }
.demo__node.is-active .demo__tag { background:var(--grad); color:#fff; }
.demo__node.is-active .demo__tag b { background:#fff; color:var(--p); }
.demo__sub { font-size:.74rem; color:var(--muted); text-align:center; max-width:17ch; margin-top:-6px; }
.demo__link { position:relative; height:4px; margin:0 10px 46px; border-radius:4px; background:repeating-linear-gradient(90deg, color-mix(in srgb, var(--s) 40%, transparent) 0 8px, transparent 8px 16px); background-size:32px 4px; animation:flusso 1.2s linear infinite; }
.demo__link.is-on { background-image:repeating-linear-gradient(90deg, var(--a) 0 8px, transparent 8px 16px); }
.demo__link span { position:absolute; left:50%; top:-32px; transform:translateX(-50%); padding:3px 9px; border-radius:var(--pill); border:1px solid var(--line); background:var(--surface); font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
@keyframes flusso { to { background-position:32px 0; } }
@keyframes flussoV { to { background-position:0 32px; } }
.srv { position:relative; width:118px; height:118px; border-radius:32px; display:grid; place-items:center; background:var(--grad); color:#fff; box-shadow:0 22px 44px -18px var(--glow), var(--sh-m); }
.srv svg { position:relative; z-index:1; width:54px; height:54px; }
.srv__ring { position:absolute; inset:0; border-radius:inherit; border:2px solid var(--s); opacity:0; }
.demo__node--server.is-active .srv__ring { animation:anelli 1.6s ease-out infinite; }
.demo__node--server.is-active .srv__ring + .srv__ring { animation-delay:.8s; }
@keyframes anelli { from { transform:scale(1); opacity:.7; } to { transform:scale(1.6); opacity:0; } }
.dpor { position:relative; width:100%; max-width:450px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-l); overflow:hidden; }
.dpor__bar, .dash__bar { display:flex; gap:6px; align-items:center; padding:10px 14px; border-bottom:1px solid var(--line); background:var(--bg-2); }
.dpor__bar i, .dash__bar i { width:9px; height:9px; border-radius:50%; background:#FF5F57; }
.dpor__bar i:nth-child(2), .dash__bar i:nth-child(2) { background:#FEBC2E; } .dpor__bar i:nth-child(3), .dash__bar i:nth-child(3) { background:#28C840; }
.dpor__bar span, .dash__bar span { margin-left:10px; padding:3px 12px; border-radius:7px; background:var(--surface); font-size:.7rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dpor__body { display:grid; grid-template-columns:96px 1fr; min-height:300px; }
.dpor__side { padding:12px 8px; display:grid; align-content:start; gap:4px; background:linear-gradient(180deg,var(--deep),color-mix(in srgb, var(--deep) 70%, var(--p))); }
.dpor__side span { padding:6px 8px; border-radius:6px; font-size:.68rem; font-weight:600; color:var(--deep-muted); transition:background .3s ease, color .3s ease; }
.dpor__side span.on { background:rgba(255,255,255,.16); color:#fff; }
.dpor__main { position:relative; padding:12px; display:grid; gap:7px; align-content:start; }
.dpor__h { font:800 .84rem var(--f-head); margin-bottom:2px; }
.drow { display:flex; align-items:center; gap:8px; padding:8px 9px; border-radius:10px; border:1px solid var(--line); background:var(--surface); font-size:.7rem; transition:all .5s ease; }
.drow b { display:block; font-size:.74rem; } .drow small { display:block; color:var(--muted); font-size:.64rem; }
.drow .av { width:24px; height:24px; }
.drow .st { font-size:.6rem; padding:3px 8px; }
.drow .dbtn { font-size:.62rem; padding:4px 9px; }
.drow--nuova { max-height:0; opacity:0; padding-block:0; margin-top:-7px; border-width:0; overflow:hidden; }
.demo.has-new .drow--nuova { max-height:60px; opacity:1; padding-block:8px; margin-top:0; border-width:1px; box-shadow:0 0 0 2px color-mix(in srgb, var(--a) 60%, transparent); }
.demo.has-ok .drow--nuova { box-shadow:0 0 0 2px #86EFAC; }
.demo.has-ok .drow--nuova [data-conferma] { display:none; }
.dpor__offer { position:absolute; inset:10px; z-index:3; display:grid; gap:7px; align-content:start; padding:12px; border-radius:12px; border:1px solid var(--line); background:var(--surface); box-shadow:var(--sh-l); opacity:0; transform:translateY(14px) scale(.98); transition:opacity .45s ease, transform .45s ease; pointer-events:none; }
.dpor__offer > b { font:800 .84rem var(--f-head); }
.demo.has-offer .dpor__offer { opacity:1; transform:none; }
.demo-cta { position:absolute; z-index:4; left:9%; right:9%; bottom:8%; padding:10px 6px; border-radius:999px; background:var(--grad); color:#fff; font:800 .68rem var(--f-head); text-align:center; box-shadow:0 10px 20px -8px var(--glow); opacity:0; transform:translateY(16px); transition:opacity .4s ease, transform .3s ease; }
.demo.has-cta .demo-cta { opacity:1; transform:none; }
.demo .demo-cta.is-press { transform:scale(.92); }
.demo-notif { position:absolute; z-index:5; left:5%; right:5%; top:7%; display:flex; gap:8px; align-items:center; padding:8px 9px; border-radius:14px; background:rgba(255,255,255,.96); box-shadow:0 12px 26px rgba(0,0,0,.2); font-size:.6rem; line-height:1.3; color:#1A1033; opacity:0; transform:translateY(-130%); transition:opacity .4s ease, transform .55s cubic-bezier(.2,.9,.3,1.2); }
.demo-notif > i { width:26px; height:26px; border-radius:7px; display:grid; place-items:center; background:#fff; box-shadow:inset 0 0 0 1px #ECEAF3; flex:none; }
.demo-notif > i svg { width:22px; height:auto; }
.demo-notif b { display:block; font-size:.56rem; font-weight:600; color:#6E6A8C; }
.demo.has-notif .demo-notif { opacity:1; transform:none; }
.demo__packet { position:absolute; z-index:6; left:0; top:0; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; display:grid; place-items:center; background:var(--surface); box-shadow:0 0 0 5px color-mix(in srgb, var(--a) 30%, transparent), 0 10px 20px rgba(var(--sh),.3); opacity:0; pointer-events:none; }
.demo__packet::after { content:""; width:14px; height:14px; border-radius:50%; background:var(--grad); }
.demo__foot { position:relative; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 28px; margin-top:26px; padding-top:22px; border-top:1px solid var(--line); }
.demo__caption { display:flex; gap:16px; align-items:flex-start; flex:1; min-width:260px; min-height:76px; }
.demo__num { font:800 2.4rem/1 var(--f-head); background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; flex:none; }
.demo__caption b { display:block; font:800 1.18rem var(--f-head); color:var(--ink); }
.demo__caption p { margin-top:4px; font-size:.98rem; max-width:62ch; }
.demo__caption.is-cambio > * { animation:vista .45s ease; }
.demo__ctrl { display:flex; align-items:center; gap:12px; }
.demo__play { width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--ink); display:grid; place-items:center; cursor:pointer; box-shadow:var(--sh-s); }
.demo__play svg { width:18px; height:18px; }
.demo__play .i-play, .demo.is-paused .demo__play .i-pausa { display:none; }
.demo.is-paused .demo__play .i-play { display:block; }
.demo__steps { display:flex; gap:5px; }
.demo__steps button { position:relative; width:30px; height:26px; padding:0; border:0; background:none; cursor:pointer; }
.demo__steps button::before, .demo__steps button::after { content:""; position:absolute; left:0; right:0; top:9px; height:8px; border-radius:99px; background:var(--line); }
.demo__steps button::after { background:var(--grad); transform:scaleX(0); transform-origin:left; }
.demo__steps button.is-done::after { transform:none; }
.demo__steps button[aria-selected="true"]::after { animation:avanza var(--dur,4s) linear forwards; }
.demo.is-paused .demo__steps button[aria-selected="true"]::after, .demo.is-manuale .demo__steps button[aria-selected="true"]::after { animation:none; transform:none; }
@keyframes avanza { to { transform:none; } }
@keyframes vista { from { opacity:0; transform:translateY(8px); } }
@media (max-width:980px) {
  .demo__stage { grid-template-columns:1fr; justify-items:center; min-height:0; }
  .demo__link { width:4px; height:58px; margin:10px 0; background:repeating-linear-gradient(180deg, color-mix(in srgb, var(--s) 40%, transparent) 0 8px, transparent 8px 16px); background-size:4px 32px; animation-name:flussoV; }
  .demo__link.is-on { background-image:repeating-linear-gradient(180deg, var(--a) 0 8px, transparent 8px 16px); }
  .demo__link span { left:18px; top:50%; transform:translateY(-50%); }
  .demo .device { --w:180px; }
}

/* ---------- Dashboard del portale ---------- */
.dash { position:relative; max-width:1100px; margin-inline:auto; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-l); overflow:hidden; }
.dash__bar { padding:12px 16px; }
.dash__body { display:grid; grid-template-columns:230px 1fr; min-height:540px; }
.dash__side { display:flex; flex-direction:column; gap:4px; padding:18px 12px; background:linear-gradient(180deg,var(--deep),color-mix(in srgb, var(--deep) 75%, var(--p))); }
.dash__brand { display:flex; align-items:center; gap:10px; padding:4px 8px 16px; margin-bottom:6px; border-bottom:1px solid rgba(255,255,255,.12); color:#fff; }
.dash__brand b { display:block; font:800 .86rem var(--f-head); color:#fff; }
.dash__brand small { color:var(--deep-muted); font-size:.72rem; }
.dash__logo { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none; background:linear-gradient(135deg,#E11D48,#FB7185); color:#fff; font:800 1rem var(--f-head); }
.dash__side button { display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border:0; border-radius:10px; background:none; color:var(--deep-muted); font-weight:600; font-size:.88rem; text-align:left; cursor:pointer; transition:background .2s ease, color .2s ease; }
.dash__side button svg { width:18px; height:18px; flex:none; }
.dash__side button em { margin-left:auto; padding:1px 7px; border-radius:99px; background:var(--a); color:#fff; font-style:normal; font-size:.7rem; font-weight:800; }
.dash__side button:hover { background:rgba(255,255,255,.08); color:#fff; }
.dash__side button[aria-selected="true"] { background:rgba(255,255,255,.17); color:#fff; }
.dash__main { position:relative; min-width:0; padding:24px; background:var(--bg); }
.dash__view { animation:vista .45s ease; }
.dash__view[hidden] { display:none; }
.dv-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:18px; }
.dv-head h4 { font-size:1.2rem; }
.dv-head small { color:var(--muted); font-size:.86rem; }
.dv-pill { padding:6px 12px; border-radius:99px; border:1px solid var(--line); background:var(--surface); font-size:.78rem; font-weight:600; white-space:nowrap; }
.dash .dbtn { font-size:.78rem; padding:8px 14px; }
.kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:14px; }
.kpi { padding:14px; border-radius:14px; border:1px solid var(--line); background:var(--surface); box-shadow:var(--sh-s); }
.kpi small { display:block; color:var(--muted); font-size:.74rem; font-weight:600; }
.kpi b { display:block; font:800 1.9rem/1.2 var(--f-head); }
.kpi span { font-size:.72rem; color:var(--muted); }
.kpi--a { border:0; background:var(--grad); }
.kpi--a small, .kpi--a b, .kpi--a span { color:#fff; }
.dv-cols { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.dv-box { padding:16px; border-radius:14px; border:1px solid var(--line); background:var(--surface); }
.dv-box > b { display:block; margin-bottom:8px; font:800 .92rem var(--f-head); }
.todo { display:flex; gap:10px; align-items:center; padding:8px 0; border-bottom:1px dashed var(--line); font-size:.84rem; color:var(--ink-2); }
.todo i { width:16px; height:16px; border-radius:5px; border:2px solid var(--s); flex:none; }
.todo--ok { color:var(--muted); text-decoration:line-through; }
.todo--ok i { background:var(--s); }
.act { display:grid; grid-template-columns:10px 1fr; gap:4px 10px; align-items:center; padding:7px 0; font-size:.82rem; color:var(--ink-2); }
.act small { grid-column:2; color:var(--muted); font-size:.72rem; }
.dot { width:8px; height:8px; border-radius:50%; background:var(--s); }
.dot--a { background:var(--a); } .dot--ok { background:#22C55E; }
.dv-filtri { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.dv-filtri span { padding:6px 12px; border-radius:99px; border:1px solid var(--line); background:var(--surface); font-size:.78rem; font-weight:600; }
.dv-filtri .on { background:var(--ink); border-color:var(--ink); color:var(--surface); }
.dv-split { display:grid; grid-template-columns:1.25fr 1fr; gap:14px; align-items:start; }
.dv-split--chat { grid-template-columns:.85fr 1.15fr; }
.dv-table, .threads, .sedi { display:grid; gap:8px; }
.tr, .th, .sede { display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:12px; border:1px solid var(--line); background:var(--surface); font-size:.82rem; color:var(--ink); }
.tr b, .th b, .sede b { display:block; }
.tr small, .th small, .sede small { display:block; color:var(--muted); font-size:.74rem; }
.tr--on, .th--on, .sede--on { box-shadow:0 0 0 2px var(--s); }
.th small { max-width:150px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.th > i { width:8px; height:8px; margin-left:auto; border-radius:50%; background:var(--a); flex:none; }
.sede { display:block; }
.dv-detail { padding:16px; border-radius:14px; border:1px solid var(--line); background:var(--surface); box-shadow:var(--sh-m); }
.dv-detail > b { font:800 1.05rem var(--f-head); }
.dv-detail dl { display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:12px 0 14px; font-size:.82rem; }
.dv-detail dt { color:var(--muted); } .dv-detail dd { margin:0; font-weight:600; }
.dv-act { display:flex; flex-wrap:wrap; gap:8px; }
.chat { display:flex; flex-direction:column; gap:8px; min-height:270px; padding:14px; border-radius:14px; border:1px solid var(--line); background:var(--surface); }
.bub { max-width:84%; padding:9px 12px; border-radius:14px 14px 14px 4px; background:var(--bg-2); font-size:.8rem; color:var(--ink); }
.bub--me { align-self:flex-end; border-radius:14px 14px 4px 14px; background:var(--grad); color:#fff; }
.chat__in { margin-top:auto; display:flex; align-items:center; justify-content:space-between; padding:8px 8px 8px 14px; border-radius:99px; border:1px solid var(--line); font-size:.78rem; color:var(--muted); }
.chat__in i { width:26px; height:26px; border-radius:50%; background:var(--grad); }
.dv-form { display:grid; gap:10px; padding:16px; border-radius:14px; border:1px solid var(--line); background:var(--surface); }
.dv-form label { display:grid; gap:5px; font-size:.74rem; font-weight:700; color:var(--muted); }
.dash .dfield { font-size:.82rem; }
.dash .dcheck { font-size:.8rem; }
.dv-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.dv-phone { display:grid; justify-items:center; gap:8px; }
.dv-phone > small { color:var(--muted); font-size:.74rem; }
.mini-phone { --mp:var(--p); --ms:var(--s); --ma:var(--a); position:relative; width:180px; height:330px; padding:34px 12px 12px; display:flex; flex-direction:column; gap:8px; border-radius:30px; border:7px solid #1D1B22; background:#F6F3FB; box-shadow:var(--sh-l); overflow:hidden; }
.mini-phone::before { content:""; position:absolute; top:7px; left:50%; width:50px; height:14px; border-radius:99px; background:#1D1B22; transform:translateX(-50%); }
.mini-phone--aurora { --mp:#E11D48; --ms:#FB7185; --ma:#F59E0B; }
.mini-notif { display:flex; gap:7px; align-items:center; padding:7px; border-radius:12px; background:#fff; box-shadow:0 6px 14px rgba(0,0,0,.12); font-size:.6rem; line-height:1.3; color:#1A1033; animation:notifin 4.5s ease-in-out infinite; }
.mini-notif i { width:22px; height:22px; border-radius:6px; background:linear-gradient(135deg,#E11D48,#FB7185); flex:none; }
.mini-notif b { display:block; font-size:.58rem; color:#6E6A8C; }
@keyframes notifin { 0%,8% { transform:translateY(-150%); opacity:0; } 20%,80% { transform:none; opacity:1; } 92%,100% { transform:translateY(-150%); opacity:0; } }
.mini-offer { display:grid; gap:3px; padding:12px; border-radius:14px; background:linear-gradient(135deg,var(--mp),var(--ms)); color:#fff; }
.mini-offer b { font:800 .78rem var(--f-head); color:#fff; } .mini-offer small { font-size:.6rem; opacity:.85; }
.mini-offer em { justify-self:start; margin-top:4px; padding:5px 10px; border-radius:99px; background:#fff; color:var(--mp); font-style:normal; font-weight:800; font-size:.62rem; }
.mini-row { height:30px; border-radius:10px; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.05); }
.mini-row--a { background:var(--ma); }
.mini-top { display:flex; align-items:center; gap:6px; font:800 .7rem var(--f-head); color:var(--mp); }
.mini-top i { width:16px; height:16px; border-radius:5px; background:linear-gradient(135deg,var(--mp),var(--ms)); }
.prodotti { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.prod { position:relative; display:grid; gap:2px; align-content:start; padding:12px; border-radius:14px; border:1px solid var(--line); background:var(--surface); font-size:.82rem; }
.prod__img { height:62px; margin-bottom:8px; border-radius:10px; display:grid; place-items:center; background:var(--bg-2); color:var(--p); }
.prod__img svg { width:60px; }
.prod small { color:var(--muted); font-size:.72rem; }
.sw { position:absolute; right:12px; bottom:14px; width:30px; height:17px; border-radius:99px; background:var(--line); }
.sw::after { content:""; position:absolute; left:2px; top:2px; width:13px; height:13px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.sw--on { background:var(--s); } .sw--on::after { left:15px; }
.brands { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.brands i { padding:5px 10px; border-radius:8px; background:var(--bg-2); font-style:normal; font-weight:700; font-size:.72rem; }
.mappa { aspect-ratio:220/160; border-radius:14px; overflow:hidden; background:color-mix(in srgb, var(--s) 12%, #ECF1E8); }
.mappa svg { width:100%; height:100%; }
.pin { fill:var(--p); animation:pin 2.4s ease-in-out infinite; transform-box:fill-box; transform-origin:bottom; }
.pin--2 { fill:var(--s); animation-delay:.4s; } .pin--3 { fill:var(--a); animation-delay:.8s; }
@keyframes pin { 50% { transform:translateY(-6px); } }
.upload, .colrow { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; border:1px solid var(--line); background:var(--bg); font-size:.8rem; font-weight:600; color:var(--ink); }
.upload { border-style:dashed; }
.upload .dash__logo { width:28px; height:28px; font-size:.8rem; }
.colrow i { width:20px; height:20px; border-radius:6px; }
.dash__note { margin-top:14px; text-align:center; font-size:.82rem; color:var(--muted); }
@media (max-width:900px) {
  .dash__body { grid-template-columns:1fr; min-height:0; }
  .dash__side { flex-direction:row; overflow-x:auto; padding:10px; scrollbar-width:none; }
  .dash__brand { display:none; }
  .dash__side button { flex:none; width:auto; padding:8px 12px; font-size:.8rem; white-space:nowrap; }
  .dash__main { padding:16px; }
  .dash__cursor { display:none; }
  .kpis { grid-template-columns:1fr 1fr; }
  .dv-cols, .dv-split, .dv-split--chat { grid-template-columns:1fr; }
  .prodotti { grid-template-columns:1fr 1fr; }
}

/* ---------- Contatti e fidelizzazione ---------- */
.valori { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.valore { display:flex; flex-direction:column; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-m); overflow:hidden; }
.valore__art { position:relative; height:300px; display:grid; place-items:center; overflow:hidden; background:linear-gradient(160deg, color-mix(in srgb, var(--s) 14%, var(--surface)), color-mix(in srgb, var(--a) 10%, var(--surface))); }
.valore__body { padding:26px 28px 30px; }
.valore__body h3 { margin:12px 0 14px; font-size:1.35rem; line-height:1.25; }
.valore__tag { display:inline-block; padding:5px 12px; border-radius:var(--pill); background:var(--grad); color:#fff; font-size:.78rem; font-weight:700; }
.valore__tag--b { background:linear-gradient(120deg,var(--s),var(--p)); }
.spunte { list-style:none; padding:0; display:grid; gap:10px; }
.spunte li { position:relative; padding-left:31px; color:var(--ink-2); font-size:.97rem; }
.spunte li::before { content:""; position:absolute; left:0; top:3px; width:20px; height:20px; border-radius:50%; background:var(--grad); }
.spunte li::after { content:""; position:absolute; left:7.5px; top:7px; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.spunte--sm li { font-size:.9rem; }
.imbuto { position:relative; width:min(360px, 88%); display:grid; gap:8px; justify-items:center; }
.imbuto__liv { position:relative; z-index:1; width:var(--w); display:grid; padding:8px 12px; border-radius:12px; background:var(--surface); box-shadow:var(--sh-s); text-align:center; }
.imbuto__liv b { font:800 .84rem var(--f-head); }
.imbuto__liv small { color:var(--muted); font-size:.7rem; }
.imbuto__liv--fine { background:var(--grad); box-shadow:0 14px 26px -12px var(--glow); }
.imbuto__liv--fine b, .imbuto__liv--fine small { color:#fff; }
.goccia { position:absolute; z-index:2; top:-14px; left:50%; width:12px; height:12px; margin-left:-6px; border-radius:50%; background:var(--a); box-shadow:0 0 0 4px color-mix(in srgb, var(--a) 25%, transparent); opacity:0; animation:goccia 3.6s cubic-bezier(.5,0,.5,1) infinite; }
.goccia--2 { left:38%; animation-delay:1.2s; } .goccia--3 { left:62%; animation-delay:2.4s; }
@keyframes goccia { 0% { transform:translateY(0); opacity:0; } 12%,80% { opacity:1; } 100% { transform:translateY(230px) scale(.6); opacity:0; } }
.anello { position:relative; width:240px; height:240px; }
.anello svg { width:100%; height:100%; }
.anello__giro { transform-box:view-box; transform-origin:center; animation:gira 6s linear infinite; }
@keyframes gira { from { transform:rotate(-90deg); } to { transform:rotate(270deg); } }
.anello__c { position:absolute; inset:0; display:grid; place-content:center; text-align:center; font:800 1rem var(--f-head); color:var(--ink); }
.anello__c small { display:block; font:500 .72rem var(--f-body); color:var(--muted); }
.anello__n { position:absolute; left:50%; top:50%; padding:5px 11px; border-radius:var(--pill); background:var(--surface); box-shadow:var(--sh-m); font:700 .74rem var(--f-head); color:var(--ink); white-space:nowrap; transform:translate(-50%,-50%) rotate(var(--a)) translateY(-96px) rotate(calc(var(--a) * -1)); animation:accende 6s linear infinite; }
.anello__n:nth-child(4) { animation-delay:1.2s; } .anello__n:nth-child(5) { animation-delay:2.4s; } .anello__n:nth-child(6) { animation-delay:3.6s; } .anello__n:nth-child(7) { animation-delay:4.8s; }
@keyframes accende { 0%,16% { background:var(--p); color:#fff; } 20%,100% { background:var(--surface); color:var(--ink); } }
@media (max-width:900px) { .valori { grid-template-columns:1fr; max-width:620px; margin-inline:auto; } }

/* ---------- Configuratore white label ---------- */
.cfg { display:grid; grid-template-columns:minmax(300px,.85fr) 1.15fr; gap:clamp(20px,3vw,40px); align-items:stretch; }
.cfg__panel { display:grid; gap:22px; align-content:start; padding:26px; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-m); }
.cfg__passo { position:relative; padding-left:44px; }
.cfg__n { position:absolute; left:0; top:0; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--grad); color:#fff; font:800 .85rem var(--f-head); }
.cfg__lbl { display:block; margin:4px 0 10px; font:800 1rem var(--f-head); }
.cfg__input { width:100%; padding:12px 14px; border-radius:var(--r); border:1px solid var(--line); background:var(--bg); font-weight:600; }
.cfg__input:focus { outline:none; border-color:var(--s); box-shadow:0 0 0 4px var(--glow); }
.cfg__temi { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.cfg__temi button { display:grid; gap:6px; justify-items:start; padding:10px; border-radius:12px; border:1px solid var(--line); background:var(--bg); font-weight:700; font-size:.82rem; color:var(--ink); cursor:pointer; transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.cfg__temi button:hover { transform:translateY(-2px); }
.cfg__temi button span { display:flex; gap:3px; }
.cfg__temi button i { width:18px; height:18px; border-radius:50%; }
.cfg__temi button[aria-checked="true"] { border-color:var(--ink); box-shadow:0 0 0 1px var(--ink); background:var(--surface); }
.cfg__su-misura { margin-top:12px; }
.cfg__su-misura summary { cursor:pointer; color:var(--p); font-weight:700; font-size:.88rem; }
.cfg__colori { display:flex; flex-wrap:wrap; gap:14px; margin-top:12px; }
.cfg__colori label { display:flex; align-items:center; gap:8px; font-size:.85rem; font-weight:600; }
.cfg__colori input { width:38px; height:38px; padding:0; border:0; border-radius:10px; background:none; cursor:pointer; }
.cfg__seg { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:4px; border-radius:14px; background:var(--bg-2); }
.cfg__seg--4 { grid-template-columns:repeat(4,1fr); } .cfg__seg--2 { grid-template-columns:1fr 1fr; }
.cfg__seg button { padding:9px 4px; border:0; border-radius:10px; background:none; color:var(--ink-2); font-weight:700; font-size:.8rem; cursor:pointer; }
.cfg__seg button[aria-checked="true"], .cfg__seg button[aria-selected="true"] { background:var(--surface); color:var(--ink); box-shadow:var(--sh-s); }
.cfg__stage { position:relative; min-height:640px; display:grid; place-items:center; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-l);
  background:radial-gradient(420px 300px at 85% 8%, color-mix(in srgb, var(--ms) 32%, transparent), transparent 70%), linear-gradient(170deg, color-mix(in srgb, var(--mp) 18%, #fff), #fff 78%); }
.cfg__onde { position:absolute; left:0; bottom:0; width:200%; height:42%; animation:wave 18s linear infinite; }
.cfg__onde path:first-child { fill:color-mix(in srgb, var(--mp) 14%, transparent); }
.cfg__onde path:last-child { fill:color-mix(in srgb, var(--ms) 14%, transparent); }
.cfg__insegna { position:absolute; z-index:3; top:22px; left:50%; max-width:90%; display:flex; align-items:center; gap:10px; padding:9px 18px 9px 10px; border-radius:14px; background:var(--mp); color:#fff; font:800 1rem var(--f-head); box-shadow:0 14px 30px -12px var(--mp); transform:translateX(-50%); transition:background .5s ease; }
.cfg__insegna b { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#fff; }
.cfg__insegna .cfg__ico { background:rgba(255,255,255,.2); box-shadow:none; }
.cfg__ico { width:56px; height:56px; border-radius:16px; display:grid; place-items:center; flex:none; background:linear-gradient(135deg,var(--mp),var(--ms)); color:#fff; font:800 1.45rem var(--f-head); box-shadow:0 10px 20px -10px var(--mp); transition:background .5s ease; }
.cfg__ico svg { width:74%; height:auto; }
.cfg__ico--sm { width:34px; height:34px; border-radius:10px; font-size:.95rem; }
.cfg__ico--xs { width:20px; height:20px; border-radius:6px; font-size:.62rem; box-shadow:none; }
.cfg__home { position:absolute; z-index:3; left:6%; top:34%; display:grid; justify-items:center; gap:6px; padding:14px 14px 10px; border-radius:20px; background:rgba(255,255,255,.8); box-shadow:var(--sh-m); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); animation:floaty 7s ease-in-out infinite; }
.cfg__home small { max-width:72px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.72rem; font-weight:700; color:#1A1033; }
.cfg__device { --w:250px; z-index:2; margin-top:40px; }
.cfg__screen { background:#F7F6FB; font-family:var(--f-body); color:#1A1033; }
.cs { position:absolute; inset:0; display:flex; flex-direction:column; gap:7px; padding:21% 7% 0; opacity:0; transform:translateX(14px); transition:opacity .4s ease, transform .4s ease; pointer-events:none; }
.cs.is-on { opacity:1; transform:none; }
.cs__top { display:flex; align-items:center; gap:6px; margin-bottom:3px; font:800 12px var(--f-head); color:var(--mp); }
.cs__top b { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cs__hero { padding:13px; border-radius:16px; background:linear-gradient(135deg,var(--mp),var(--ms)); color:#fff; }
.cs__hero b { display:block; font:800 13px var(--f-head); }
.cs__hero small { font-size:9px; opacity:.85; }
.cs__hero span { display:block; margin-top:9px; padding:7px; border-radius:999px; background:#fff; color:var(--mp); font:800 10px var(--f-head); text-align:center; }
.cs__grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.cs__grid span { display:grid; gap:5px; padding:9px; border-radius:12px; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.05); font:700 9.5px var(--f-head); }
.cs__grid i { width:20px; height:20px; border-radius:7px; border:2px solid var(--mp); background:color-mix(in srgb, var(--mp) 14%, #fff); }
.cs__offer { padding:10px; border-radius:12px; background:var(--ma); color:#fff; font:800 10px var(--f-head); text-shadow:0 1px 2px rgba(0,0,0,.25); }
.cs__tab { display:flex; justify-content:space-around; margin:auto -8% 0; padding:10px 0 16px; border-top:1px solid #ECEAF3; background:#fff; }
.cs__tab i { width:18px; height:18px; border-radius:6px; background:#E4E2EE; }
.cs__tab i.on { background:var(--mp); }
.cs__img { position:relative; height:108px; display:grid; place-items:center; border-radius:16px; background:linear-gradient(135deg,var(--mp),var(--ms)); }
.cs__img svg { width:62px; }
.cs__img em { position:absolute; top:8px; right:8px; padding:3px 8px; border-radius:99px; background:var(--ma); color:#fff; font:800 9px var(--f-head); font-style:normal; }
.cs__t { margin-top:4px; font:800 13px/1.25 var(--f-head); }
.cs__s { font-size:9px; font-weight:700; color:var(--mp); }
.cs__p { font-size:9.5px; line-height:1.45; color:#555; }
.cs__btn { margin-top:4px; padding:9px; border-radius:999px; background:var(--mp); color:#fff; font:800 10.5px var(--f-head); text-align:center; }
.cs__lab { margin-top:3px; font-size:8.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#8A86A0; }
.cs__opt { display:flex; justify-content:space-between; align-items:center; padding:9px 10px; border-radius:11px; border:1.5px solid transparent; background:#fff; font:700 10px var(--f-head); }
.cs__opt i { width:12px; height:12px; border-radius:50%; border:2px solid #CFCBE0; }
.cs__opt.on { border-color:var(--mp); } .cs__opt.on i { border-color:var(--mp); background:radial-gradient(var(--mp) 40%, transparent 46%); }
.cs__chips { display:flex; gap:5px; }
.cs__chips span { flex:1; padding:7px 0; border-radius:9px; background:#fff; text-align:center; font:700 9.5px var(--f-head); }
.cs__chips span.on { background:var(--mp); color:#fff; }
.cs--notifica { align-items:center; padding-top:22%; background:linear-gradient(160deg,var(--mp),var(--ms) 60%,var(--ma)); }
.cs__ora { margin-top:8px; color:#fff; font:700 42px/1 var(--f-head); }
.cs__data { margin-bottom:14px; color:rgba(255,255,255,.85); font-size:10px; }
.cs__notif { width:100%; display:flex; gap:7px; align-items:center; padding:8px; border-radius:14px; background:rgba(255,255,255,.92); font-size:9px; line-height:1.35; color:#1A1033; }
.cs__notif b { display:block; font-size:8.5px; color:#666; }
.cs--notifica.is-on .cs__notif { animation:notifin2 .6s ease both; }
.cs--notifica.is-on .cs__notif--2 { animation-delay:.35s; }
@keyframes notifin2 { from { opacity:0; transform:translateY(-22px); } }
.cfg__store { position:absolute; z-index:3; right:5%; bottom:6%; max-width:270px; display:flex; align-items:center; gap:10px; padding:10px 14px 10px 10px; border-radius:16px; background:#fff; box-shadow:var(--sh-m); animation:floaty 8s ease-in-out -2s infinite; }
.cfg__store b { display:block; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:800 .82rem var(--f-head); color:#1A1033; }
.cfg__store small { font-size:.68rem; color:#6E6A8C; }
.cfg__store em { margin-left:auto; padding:5px 10px; border-radius:99px; background:var(--mp); color:#fff; font-style:normal; font-weight:800; font-size:.7rem; }
@media (max-width:980px) { .cfg { grid-template-columns:1fr; } }
@media (max-width:560px) {
  .cfg__stage { min-height:580px; }
  .cfg__home { display:none; }
  .cfg__device { --w:220px; margin-top:20px; }
  .cfg__store { left:5%; right:5%; max-width:none; }
  .cfg__temi { grid-template-columns:1fr 1fr; }
}

/* ---------- Come funziona ---------- */
.pezzi { display:grid; grid-template-columns:1fr 44px 1fr 44px 1fr; align-items:stretch; }
.pezzo { display:flex; flex-direction:column; gap:10px; padding:28px 24px; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-m); }
.pezzo--server { background:linear-gradient(170deg, color-mix(in srgb, var(--s) 12%, var(--surface)), var(--surface) 60%); box-shadow:0 0 0 2px color-mix(in srgb, var(--s) 30%, transparent), var(--sh-m); }
.pezzo__ico { width:58px; height:58px; display:grid; place-items:center; border-radius:18px; background:var(--grad); color:#fff; box-shadow:0 14px 26px -12px var(--glow); }
.pezzo__ico svg { width:28px; height:28px; }
.pezzo__chi { font-size:.76rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--p); }
.pezzo h3 { font-size:1.55rem; }
.pezzo .link { margin-top:auto; padding-top:8px; }
.pezzi__link { align-self:center; height:4px; background:repeating-linear-gradient(90deg, var(--s) 0 8px, transparent 8px 16px); background-size:32px 4px; animation:flusso 1.2s linear infinite; }
@media (max-width:980px) {
  .pezzi { grid-template-columns:1fr; max-width:560px; margin-inline:auto; }
  .pezzi__link { justify-self:center; width:4px; height:38px; background:repeating-linear-gradient(180deg, var(--s) 0 8px, transparent 8px 16px); background-size:4px 32px; animation-name:flussoV; }
}
.chi { display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:1000px; margin-inline:auto; }
.chi__col { padding:28px; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-m); border-top:5px solid var(--a); }
.chi__col--noi { border-top-color:var(--p); }
.chi__col h3 { display:flex; align-items:center; gap:10px; margin-bottom:16px; font-size:1.3rem; }
.chi__dot { width:12px; height:12px; border-radius:50%; background:var(--a); box-shadow:0 0 0 5px color-mix(in srgb, var(--a) 20%, transparent); }
.chi__col--noi .chi__dot { background:var(--p); box-shadow:0 0 0 5px color-mix(in srgb, var(--p) 20%, transparent); }
@media (max-width:760px) { .chi { grid-template-columns:1fr; } }
.tempo { position:relative; list-style:none; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.tempo::before { content:""; position:absolute; left:4%; right:4%; top:18px; height:4px; border-radius:4px; background:linear-gradient(90deg,var(--p),var(--s),var(--a)); }
.tempo li { position:relative; margin-top:52px; padding:22px 18px; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-m); }
.tempo li::before { content:""; position:absolute; top:-44px; left:18px; width:26px; height:26px; border-radius:50%; background:var(--surface); border:6px solid var(--s); box-shadow:0 0 0 6px color-mix(in srgb, var(--s) 18%, transparent); }
.tempo li:nth-child(odd)::before { animation:battito 2.4s ease-in-out infinite; }
@keyframes battito { 50% { box-shadow:0 0 0 12px color-mix(in srgb, var(--s) 8%, transparent); } }
.tempo__q { font-size:.74rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--p); }
.tempo h3 { margin:6px 0; font-size:1.06rem; line-height:1.25; }
.tempo p { font-size:.92rem; }
@media (max-width:1100px) {
  .tempo { grid-template-columns:1fr; max-width:640px; margin-inline:auto; }
  .tempo::before { left:11px; right:auto; top:0; bottom:0; width:4px; height:auto; background:linear-gradient(180deg,var(--p),var(--s),var(--a)); }
  .tempo li { margin:0 0 0 48px; }
  .tempo li::before { top:22px; left:-50px; }
}
.vista { display:grid; grid-template-columns:auto 130px 1fr; align-items:center; gap:20px; }
.vista figure { margin:0; display:grid; justify-items:center; gap:22px; }
.vista figcaption { max-width:42ch; text-align:center; color:var(--ink-2); }
.vista__b .portal { width:100%; }
.vista__freccia svg { width:130px; }
@media (max-width:900px) { .vista { grid-template-columns:1fr; } .vista__freccia { justify-self:center; transform:rotate(90deg); } }

/* ---------- Pagina portale ---------- */
.sezioni { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.sezione { display:flex; gap:16px; padding:24px; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-m); transition:transform .3s ease, box-shadow .3s ease; }
.sezione:hover { transform:translateY(-4px); box-shadow:var(--sh-l); }
.sezione .ic { width:46px; height:46px; flex:none; display:grid; place-items:center; border-radius:14px; background:var(--grad); color:#fff; }
.sezione .ic svg { width:22px; height:22px; }
.sezione h3 { margin-bottom:6px; }
.sezione p { font-size:.94rem; }
.nell-app { margin-top:10px; padding:8px 12px; border-radius:10px; background:var(--bg-2); font-size:.86rem !important; }
.nell-app b { color:var(--p); }
@media (max-width:980px) { .sezioni { grid-template-columns:1fr 1fr; } }
@media (max-width:640px) { .sezioni { grid-template-columns:1fr; } }
.ovunque { position:relative; padding:0 60px 50px 0; }
.ovunque__tel { position:absolute; right:0; bottom:0; z-index:2; animation:floaty 7s ease-in-out infinite; }
.ovunque__mini { display:flex; flex-direction:column; gap:6px; padding:30% 8% 0; background:#F7F6FB; }
.ovunque__mini > b { font:800 11px var(--f-head); }
.drow--mini { gap:5px; padding:6px; font-size:.5rem; }
.drow--mini b { font-size:.56rem; } .drow--mini small { font-size:.5rem; }
.drow--mini .av { width:14px; height:14px; }
.drow--mini .st { padding:2px 5px; font-size:.48rem; }

/* ---------- App: righe con schermata ---------- */
.frow { display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,72px); align-items:center; padding:26px 0; }
.frow--rev .frow__vis { order:2; }
.frow__vis { position:relative; display:flex; justify-content:center; padding:24px 0 34px; }
.frow__vis::before, .frow__vis::after { content:""; position:absolute; top:50%; left:50%; width:min(400px,92%); aspect-ratio:1; border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; }
.frow__vis::before { background:radial-gradient(circle, color-mix(in srgb, var(--s) 22%, transparent), transparent 68%); }
.frow__vis::after { border:2px solid color-mix(in srgb, var(--s) 30%, transparent); animation:onda-cerchio 3.6s ease-out infinite; }
@keyframes onda-cerchio { from { transform:translate(-50%,-50%) scale(.55); opacity:.9; } to { transform:translate(-50%,-50%) scale(1.15); opacity:0; } }
.frow__vis .device { position:relative; z-index:1; animation:floaty 7s ease-in-out infinite; }
.frow__n { font:800 3rem/1 var(--f-head); background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.frow__txt h3 { margin:10px 0 12px; font-size:clamp(1.5rem,2.5vw,2rem); }
.frow__txt p { max-width:52ch; font-size:1.05rem; }
.bubble--sx { left:4%; top:24%; } .bubble--dx { right:4%; bottom:24%; }
.mini-cards { display:grid; gap:10px; margin-top:20px; }
.mini-cards span { padding:12px 14px; border-radius:var(--r); background:var(--surface); box-shadow:var(--sh-s); font-size:.9rem; color:var(--ink-2); }
.mini-cards b { display:block; color:var(--ink); font-family:var(--f-head); }
@media (max-width:860px) { .frow { grid-template-columns:1fr; } .frow--rev .frow__vis { order:0; } }

/* ---------- Idee per farla conoscere ---------- */
.idee { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.idea { position:relative; overflow:hidden; padding:22px 18px 26px; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-m); transition:transform .3s ease; }
.idea:hover { transform:translateY(-5px); }
.idea::after { content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--grad); }
.idea__n { font:800 2.1rem/1 var(--f-head); color:transparent; -webkit-text-stroke:1.5px var(--s); }
.idea h3 { margin:10px 0 6px; font-size:1.04rem; }
.idea p { font-size:.9rem; }
@media (max-width:1100px) { .idee { grid-template-columns:repeat(3,1fr); } }
@media (max-width:700px) { .idee { grid-template-columns:1fr 1fr; } }
@media (max-width:460px) { .idee { grid-template-columns:1fr; } }

/* pannello prova: segno "nuova" */
.prova__pal button em { font-style:normal; font-size:.58rem; font-weight:700; color:#C026D3; }
/* correzioni larghezze su schermi stretti */
.hero__in > *, .cfg > *, .dash__body > *, .vista > *, .duo > *, .frow > * { min-width:0; }
.vista__b { width:100%; justify-items:stretch !important; }
.vista__b figcaption { justify-self:center; }
.cfg__seg button { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:480px) {
  .hero__devices .device { --w:185px !important; }
  .hero__devices .device--android { margin-left:-50px; }
  .cfg__seg--4 { grid-template-columns:1fr 1fr; }
  .cfg__panel { padding:20px 16px; }
  .cfg__passo { padding-left:40px; }
}
.demo:not(.has-ok) .drow--nuova .st { display:none; }
.dpor__body { grid-template-columns:104px 1fr; }
.dpor__side span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cfg__onde { max-width:none; }
.cfg__stage { min-height:690px; }
.cfg__device { margin-top:96px; margin-bottom:40px; }
.cfg__store { max-width:320px; }
.cfg__store small { white-space:nowrap; }
.mini-phone { padding-top:30px; }
@media (max-width:560px) { .cfg__stage { min-height:640px; } .cfg__device { margin-top:84px; margin-bottom:90px; } .cfg__store small { white-space:normal; } }
.appt .st--new { color:color-mix(in srgb, var(--a) 70%, #000); }
@media (max-width:980px) { .dpor__body { grid-template-columns:1fr; } .dpor__side { display:none; } }
@media (max-width:560px) {
  .cfg__store { position:relative; left:auto; right:auto; bottom:auto; margin:0 16px 22px; animation:none; }
  .cfg__device { margin-bottom:18px; }
}