/* Demo dimostrative (dati di esempio). Generate da tools/build_demos.py: modificare lì i contenuti. */
@font-face { font-family:"Inter"; src:url(/assets/fonts/inter.woff2) format("woff2"); font-weight:100 900; font-display:swap; }
@font-face { font-family:"Montserrat"; src:url(/assets/fonts/montserrat.woff2) format("woff2"); font-weight:100 900; font-display:swap; }
@font-face { font-family:"Space Grotesk"; src:url(/assets/fonts/space-grotesk.woff2) format("woff2"); font-weight:300 700; font-display:swap; }
*,*::before,*::after { box-sizing:border-box; }
html,body { margin:0; }
body { font:14px/1.5 "Inter",system-ui,sans-serif; color:#0f172a; background:#f6f7f9; -webkit-font-smoothing:antialiased; font-feature-settings:"cv11","ss01"; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; cursor:pointer; }
svg { display:block; flex:none; }
[hidden] { display:none !important; }
.i { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.i.sm { width:15px; height:15px; } .i.lg { width:22px; height:22px; }
.num { font-variant-numeric:tabular-nums; }
.muted { color:#64748b; } .r { text-align:right; } .b { font-weight:600; }

/* Barra demo */
.demo-bar { position:sticky; top:0; z-index:60; display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; padding:7px 14px; background:#0b0d14; color:#cfd5e6; font:12.5px/1.4 "Inter",sans-serif; }
.demo-bar b { background:linear-gradient(120deg,#7c5cff,#22d3ee); color:#fff; padding:2px 8px; border-radius:99px; font-size:11px; letter-spacing:.06em; }
.demo-bar a { color:#fff; text-decoration:underline; text-underline-offset:3px; }
.shot .demo-bar { display:none; }

/* ========== APP GESTIONALE ========== */
.app { --a:#4f46e5; --a-50:#eef2ff; --a-100:#e0e7ff; --a-600:#4338ca; display:grid; grid-template-columns:248px 1fr; min-height:calc(100vh - 32px); }
.shot .app { min-height:100vh; }
.side { background:#fff; border-right:1px solid #e7e9ee; padding:16px 14px; display:flex; flex-direction:column; gap:2px; position:sticky; top:0; height:100vh; }
.brand { display:flex; align-items:center; gap:11px; padding:6px 8px 18px; }
.brand-logo { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--a),var(--a-600)); box-shadow:0 6px 16px -6px var(--a); }
.brand b { display:block; font-size:15px; letter-spacing:-.01em; } .brand small { color:#64748b; font-size:12px; }
.nav { display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:10px; color:#475569; font-weight:500; }
.nav:hover { background:#f1f5f9; color:#0f172a; }
.nav.on { background:var(--a-50); color:var(--a-600); font-weight:600; }
.nav .cnt { margin-left:auto; font-size:11.5px; font-weight:600; padding:1px 8px; border-radius:99px; background:#f1f5f9; color:#475569; }
.nav.on .cnt { background:var(--a); color:#fff; }
.grp { font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:#94a3b8; font-weight:600; margin:16px 10px 6px; }
.side-card { margin-top:auto; border:1px solid #e7e9ee; border-radius:14px; padding:12px; background:linear-gradient(180deg,#fff,#f8fafc); font-size:12.5px; }
.side-card .row { display:flex; align-items:center; gap:8px; color:#334155; }
.dot { width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 3px #dcfce7; flex:none; }
.user { display:flex; align-items:center; gap:10px; padding:12px 8px 2px; font-size:13px; }
.user small { display:block; color:#64748b; font-size:12px; }
.av { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:12px; color:#fff; flex:none; background:linear-gradient(135deg,#6366f1,#06b6d4); }
.av.s { width:28px; height:28px; font-size:11px; }
.main { min-width:0; display:flex; flex-direction:column; }
.top { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:14px; padding:14px 28px; background:rgba(246,247,249,.85); backdrop-filter:blur(10px); border-bottom:1px solid #eceef2; }
.crumb { color:#64748b; font-size:13px; } .crumb b { color:#0f172a; }
.search { margin-left:auto; display:flex; align-items:center; gap:8px; width:300px; background:#fff; border:1px solid #e2e5ea; border-radius:10px; padding:8px 11px; color:#94a3b8; }
.search input { border:0; outline:0; font:inherit; width:100%; color:#0f172a; background:none; }
.kbd { font-size:11px; border:1px solid #e2e5ea; border-radius:5px; padding:0 5px; color:#64748b; }
.icon-btn { position:relative; width:38px; height:38px; border-radius:10px; border:1px solid #e2e5ea; background:#fff; display:grid; place-items:center; color:#475569; }
.icon-btn .badge { position:absolute; top:7px; right:8px; width:8px; height:8px; border-radius:50%; background:#ef4444; border:2px solid #fff; }
.page { padding:24px 28px 40px; }
.ph { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
.ph h1 { margin:0; font:700 24px/1.2 "Inter",sans-serif; letter-spacing:-.025em; }
.ph p { margin:4px 0 0; color:#64748b; }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 14px; border-radius:10px; border:1px solid var(--a); background:var(--a); color:#fff; font-weight:600; font-size:13.5px; box-shadow:0 1px 2px rgba(16,24,40,.08), inset 0 1px 0 rgba(255,255,255,.15); white-space:nowrap; }
.btn:hover { background:var(--a-600); }
.btn.ghost { background:#fff; color:#0f172a; border-color:#e2e5ea; box-shadow:0 1px 2px rgba(16,24,40,.05); }
.btn.ghost:hover { background:#f8fafc; }
.btn.sm { height:32px; padding:0 11px; font-size:12.5px; }
.btn.lg { height:48px; font-size:15px; justify-content:center; }
.seg { display:inline-flex; background:#eef0f3; border-radius:10px; padding:3px; }
.seg span, .seg button { padding:6px 12px; border-radius:8px; font-size:13px; font-weight:500; color:#475569; border:0; background:none; }
.seg .on { background:#fff; color:#0f172a; box-shadow:0 1px 2px rgba(16,24,40,.1); font-weight:600; }
.card { background:#fff; border:1px solid #e7e9ee; border-radius:16px; box-shadow:0 1px 2px rgba(16,24,40,.04); min-width:0; }
.card-h { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 18px 0; }
.card-h h2 { margin:0; font:600 15px "Inter",sans-serif; letter-spacing:-.01em; }
.card-h small { color:#64748b; font-size:12.5px; }
.card-b { padding:16px 18px 18px; }
.grid { display:grid; gap:16px; }
.g4 { grid-template-columns:repeat(4,1fr); } .g3 { grid-template-columns:repeat(3,1fr); } .g2 { grid-template-columns:1fr 1fr; }
.g-main { grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); }
.mt { margin-top:16px; }
.kpi { padding:16px 18px; display:flex; flex-direction:column; gap:10px; }
.kpi-top { display:flex; align-items:center; justify-content:space-between; color:#64748b; font-size:13px; font-weight:500; }
.kpi-ico { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--a-50); color:var(--a); }
.kpi-val { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }
.kpi-val strong { font:700 26px/1 "Inter",sans-serif; letter-spacing:-.03em; }
.delta { display:inline-flex; align-items:center; gap:3px; font-size:12px; font-weight:600; padding:2px 7px; border-radius:99px; background:#dcfce7; color:#15803d; }
.delta.dn { background:#fee2e2; color:#b91c1c; }
.spark { width:90px; height:32px; }
.pill { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:99px; font-size:12px; font-weight:600; background:#f1f5f9; color:#334155; white-space:nowrap; }
.pill.ok { background:#dcfce7; color:#15803d; } .pill.warn { background:#fef3c7; color:#b45309; } .pill.bad { background:#fee2e2; color:#b91c1c; } .pill.acc { background:var(--a-50); color:var(--a-600); } .pill.info { background:#e0f2fe; color:#0369a1; }
.pill i { width:6px; height:6px; border-radius:50%; background:currentColor; }
table.t { width:100%; border-collapse:collapse; font-size:13.5px; }
table.t th { text-align:left; font-size:12px; color:#64748b; font-weight:500; padding:10px 18px; background:#f8fafc; border-bottom:1px solid #eef0f3; border-top:1px solid #eef0f3; white-space:nowrap; }
table.t td { padding:12px 18px; border-bottom:1px solid #f1f3f6; vertical-align:middle; }
table.t tr:last-child td { border-bottom:0; }
table.t tbody tr:hover { background:#fafbfc; }
table.t th.r, table.t td.r { text-align:right; }
.cell { display:flex; align-items:center; gap:11px; }
.cell small { display:block; color:#64748b; font-size:12px; }
.thumb { width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:none; overflow:hidden; }
.thumb svg { width:30px; height:30px; }
.bar { height:6px; border-radius:99px; background:#eef0f3; overflow:hidden; min-width:60px; }
.bar i { display:block; height:100%; border-radius:99px; background:var(--a); }
.bar.ok i { background:#22c55e; } .bar.warn i { background:#f59e0b; } .bar.bad i { background:#ef4444; }
.list-row { display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid #f1f3f6; }
.list-row:last-child { border-bottom:0; } .list-row .grow { flex:1; min-width:0; }
.list-row small { display:block; color:#64748b; font-size:12px; }
.chart { width:100%; height:auto; }
.legend { display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; color:#475569; }
.legend span { display:inline-flex; align-items:center; gap:6px; }
.legend i { width:10px; height:10px; border-radius:3px; display:inline-block; }
.screen { display:none; } .screen.on { display:block; }
.tabs { display:flex; gap:4px; border-bottom:1px solid #e7e9ee; margin-bottom:0; padding:0 18px; }
.tabs span { padding:12px 10px; font-weight:500; color:#64748b; border-bottom:2px solid transparent; margin-bottom:-1px; }
.tabs .on { color:#0f172a; border-color:var(--a); font-weight:600; }

/* Sala */
.floor { position:relative; width:100%; aspect-ratio:16/10; background:#fbfbfc; border-radius:12px; border:1px solid #eef0f3; background-image:radial-gradient(#e5e7eb 1px, transparent 1px); background-size:22px 22px; overflow:hidden; }
.floor svg.walls { position:absolute; inset:0; width:100%; height:100%; }
.tbl { position:absolute; transform:translate(-50%,-50%); display:grid; place-items:center; border:0; background:none; padding:0; }
.tbl .tt { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#fff; border:2px solid #d8dde5; border-radius:12px; box-shadow:0 2px 6px rgba(16,24,40,.06); transition:.15s; }
.tbl .tt b { font:700 15px "Inter",sans-serif; line-height:1.1; }
.tbl .tt small { font-size:10.5px; color:#64748b; font-weight:600; }
.tbl.round .tt { border-radius:50%; }
.tbl .ch { position:absolute; background:#e2e6ec; border-radius:6px; }
.tbl.busy .tt { border-color:#f59e0b; background:#fffbeb; } .tbl.busy .ch { background:#fcd34d; }
.tbl.bill .tt { border-color:#ef4444; background:#fef2f2; } .tbl.bill .ch { background:#fca5a5; }
.tbl.res .tt { border-color:#6366f1; background:#eef2ff; } .tbl.res .ch { background:#c7d2fe; }
.tbl.sel .tt { box-shadow:0 0 0 4px var(--a-100), 0 6px 16px rgba(16,24,40,.12); border-color:var(--a); }
.tbl:hover .tt { transform:translateY(-1px); }
.zone-lbl { position:absolute; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#94a3b8; }
.order-line { display:flex; gap:10px; padding:10px 0; border-bottom:1px dashed #e7e9ee; }
.order-line:last-child { border-bottom:0; }
.order-line .q { width:26px; height:26px; border-radius:8px; background:#f1f5f9; display:grid; place-items:center; font-weight:700; font-size:12.5px; flex:none; }
.order-line small { display:block; color:#b45309; font-size:12px; }
.order-line .p { margin-left:auto; font-weight:600; }
.course { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#94a3b8; margin:12px 0 2px; display:flex; justify-content:space-between; }
.tot { display:flex; justify-content:space-between; align-items:baseline; padding-top:12px; margin-top:6px; border-top:1px solid #e7e9ee; }
.tot strong { font:700 22px "Inter",sans-serif; letter-spacing:-.02em; }
/* Comanda */
.pos { display:grid; grid-template-columns:180px minmax(0,1fr) 340px; gap:16px; align-items:start; }
.cats { display:flex; flex-direction:column; gap:6px; }
.cats button { display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:12px; border:1px solid #e7e9ee; background:#fff; font-weight:600; text-align:left; }
.cats button i { width:10px; height:10px; border-radius:3px; }
.cats button.on { background:#0f172a; color:#fff; border-color:#0f172a; }
.items { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.item { position:relative; text-align:left; border:1px solid #e7e9ee; background:#fff; border-radius:14px; padding:14px; min-height:104px; display:flex; flex-direction:column; justify-content:space-between; transition:.15s; overflow:hidden; }
.item::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--c,#cbd5e1); }
.item:hover { border-color:#cbd5e1; transform:translateY(-1px); box-shadow:0 6px 16px rgba(16,24,40,.06); }
.item b { font-size:14px; line-height:1.25; }
.item .row2 { display:flex; justify-content:space-between; align-items:center; margin-top:10px; }
.item .price { font-weight:700; }
.alg { display:flex; gap:3px; } .alg span { font-size:9.5px; font-weight:700; color:#64748b; border:1px solid #e2e5ea; border-radius:4px; padding:0 4px; }
.stepper { display:inline-flex; align-items:center; border:1px solid #e2e5ea; border-radius:8px; overflow:hidden; }
.stepper button { width:26px; height:26px; border:0; background:#f8fafc; font-weight:700; }
.stepper span { width:26px; text-align:center; font-weight:700; font-size:13px; }
/* KDS */
.kds-wrap { background:#0b1020; border-radius:18px; padding:16px; color:#e2e8f0; }
.kds-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.kds-top .seg { background:#151b2e; } .kds-top .seg span { color:#94a3b8; } .kds-top .seg .on { background:#232b45; color:#fff; box-shadow:none; }
.kds { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; align-items:start; }
.tk { background:#141a2d; border:1px solid #232b45; border-radius:14px; overflow:hidden; }
.tk-h { display:flex; justify-content:space-between; align-items:center; padding:11px 13px; background:#1b2340; font-weight:700; }
.tk-h small { display:block; font-weight:500; color:#94a3b8; font-size:11.5px; }
.timer { font:700 13px "Inter",sans-serif; padding:3px 9px; border-radius:99px; background:#22c55e22; color:#4ade80; }
.timer.w { background:#f59e0b22; color:#fbbf24; } .timer.l { background:#ef444433; color:#f87171; }
.tk-p { height:3px; background:#232b45; } .tk-p i { display:block; height:100%; background:#4ade80; } .tk-p.w i { background:#fbbf24; } .tk-p.l i { background:#f87171; }
.tk ul { list-style:none; margin:0; padding:8px 13px 4px; }
.tk li { display:flex; gap:9px; padding:7px 0; border-bottom:1px solid #1f2742; font-size:13.5px; }
.tk li:last-child { border-bottom:0; }
.tk li .cb { width:18px; height:18px; border-radius:5px; border:2px solid #3b4566; flex:none; margin-top:1px; }
.tk li.done { color:#64748b; text-decoration:line-through; } .tk li.done .cb { background:#22c55e; border-color:#22c55e; }
.tk li em { display:block; font-style:normal; color:#fbbf24; font-size:12px; text-decoration:none; }
.tk .bump { margin:8px 13px 13px; width:calc(100% - 26px); height:36px; border-radius:10px; border:0; background:#22c55e; color:#052e12; font-weight:700; }
.tk .bump.n { background:#232b45; color:#cbd5e1; }
/* Cassa negozio */
.pos2 { display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:16px; align-items:start; }
.prods { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.prod { border:1px solid #e7e9ee; background:#fff; border-radius:14px; padding:10px; text-align:left; display:flex; flex-direction:column; gap:8px; transition:.15s; }
.prod:hover { border-color:#cbd5e1; box-shadow:0 6px 16px rgba(16,24,40,.06); }
.prod .pic { aspect-ratio:4/3; border-radius:10px; display:grid; place-items:center; }
.prod .pic svg { width:58%; height:auto; }
.prod b { font-size:13.5px; } .prod .row2 { display:flex; justify-content:space-between; align-items:center; }
.receipt-line { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid #f1f3f6; }
.receipt-line .grow { flex:1; min-width:0; } .receipt-line small { display:block; color:#64748b; font-size:12px; }
.loyal { display:flex; align-items:center; gap:12px; padding:12px; border-radius:12px; background:linear-gradient(135deg,var(--a-50),#fff); border:1px solid var(--a-100); }
.sumrow { display:flex; justify-content:space-between; padding:4px 0; color:#475569; }
.paygrid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.paygrid .btn { justify-content:center; height:46px; }
.donut-wrap { display:flex; align-items:center; gap:18px; }
.donut-wrap svg { width:130px; height:130px; }

/* Toast */
.toast { position:fixed; bottom:22px; left:50%; transform:translate(-50%,12px); background:#0f172a; color:#fff; padding:12px 18px; border-radius:12px; box-shadow:0 18px 40px rgba(0,0,0,.25); opacity:0; transition:.25s; pointer-events:none; z-index:80; font-size:13.5px; display:flex; gap:8px; align-items:center; }
.toast.on { opacity:1; transform:translate(-50%,0); }

/* ========== E-COMMERCE ========== */
.shop { --s:#6f4426; --s-d:#2b1d14; --s-50:#f7f1ea; --s-100:#efe3d4; background:#fffcf8; color:#2b1d14; font:15px/1.6 "Montserrat",sans-serif; }
.shop h1, .shop h2, .shop h3 { font-family:"Montserrat",sans-serif; letter-spacing:-.025em; }
.ann { background:var(--s-d); color:#f4e6d6; text-align:center; font-size:12.5px; padding:8px; letter-spacing:.02em; }
.ann b { color:#fff; }
.snav { position:sticky; top:0; z-index:20; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:14px 48px; background:rgba(255,252,248,.92); backdrop-filter:blur(10px); border-bottom:1px solid #f0e6da; }
.slinks { display:flex; gap:28px; font-weight:600; font-size:14px; }
.slinks a:hover, .slinks a.on { color:var(--s); }
.slogo { display:flex; align-items:center; gap:10px; font:800 22px "Montserrat",sans-serif; letter-spacing:-.04em; }
.slogo span { width:34px; height:34px; border-radius:50%; background:var(--s); color:#fff; display:grid; place-items:center; }
.sicons { display:flex; justify-content:flex-end; gap:8px; }
.sicons a, .sicons button { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; position:relative; border:0; background:none; }
.sicons a:hover { background:var(--s-50); }
.cart-n { position:absolute; top:3px; right:2px; min-width:18px; height:18px; padding:0 5px; border-radius:99px; background:var(--s); color:#fff; font-size:11px; font-weight:700; display:grid; place-items:center; }
.wrap { max-width:1240px; margin:0 auto; padding:0 48px; }
.hero { display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:center; padding:56px 0 64px; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--s); }
.hero h1 { font-size:60px; line-height:1.02; margin:16px 0 18px; font-weight:800; }
.hero h1 em { font-style:italic; font-weight:500; color:var(--s); }
.hero p { font-size:17.5px; color:#6b5646; margin:0 0 28px; max-width:520px; }
.sbtn { display:inline-flex; align-items:center; gap:10px; height:52px; padding:0 26px; border-radius:99px; background:var(--s-d); color:#fff; font-weight:700; border:0; font-size:15px; transition:.2s; }
.sbtn:hover { background:var(--s); transform:translateY(-1px); }
.sbtn.ghost { background:transparent; color:var(--s-d); border:1.5px solid #d9c6b1; }
.sbtn.full { width:100%; justify-content:center; }
.proof { display:flex; align-items:center; gap:14px; margin-top:30px; font-size:13.5px; color:#6b5646; }
.faces { display:flex; } .faces span { width:34px; height:34px; border-radius:50%; border:2px solid #fffcf8; margin-left:-9px; display:grid; place-items:center; font-size:11px; font-weight:700; color:#fff; }
.faces span:first-child { margin-left:0; }
.stars { color:#d4932f; letter-spacing:1px; font-size:14px; }
.stage { position:relative; aspect-ratio:1/1.02; border-radius:36px; overflow:hidden; background:radial-gradient(120% 90% at 30% 20%, #f6dcc0 0%, #d9a273 45%, #8a5532 100%); }
.stage .b1 { position:absolute; width:46%; left:28%; top:16%; filter:drop-shadow(0 40px 40px rgba(60,25,5,.4)); }
.stage .b2 { position:absolute; width:30%; left:6%; top:42%; transform:rotate(-8deg); filter:drop-shadow(0 30px 30px rgba(60,25,5,.35)); }
.stage .b3 { position:absolute; width:30%; right:5%; top:40%; transform:rotate(7deg); filter:drop-shadow(0 30px 30px rgba(60,25,5,.35)); }
.stage .beans { position:absolute; inset:auto 0 0 0; height:30%; }
.stage .tag { position:absolute; left:22px; top:22px; background:#fffcf8; color:var(--s-d); font-weight:700; font-size:13px; padding:9px 14px; border-radius:14px; box-shadow:0 12px 30px rgba(60,25,5,.25); }
.stage .tag small { display:block; color:#8b715d; font-weight:600; font-size:11.5px; }
.usp { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid #f0e6da; border-radius:20px; background:#fff; margin-bottom:64px; }
.usp div { display:flex; gap:12px; align-items:center; padding:18px 20px; border-right:1px solid #f0e6da; font-size:13.5px; color:#6b5646; }
.usp div:last-child { border-right:0; }
.usp b { display:block; color:var(--s-d); font-size:14px; }
.usp .ic { width:42px; height:42px; border-radius:12px; background:var(--s-50); color:var(--s); display:grid; place-items:center; flex:none; }
.sec-h { display:flex; justify-content:space-between; align-items:flex-end; margin:0 0 24px; gap:16px; }
.sec-h h2 { font-size:34px; margin:6px 0 0; font-weight:800; }
.sec-h a { font-weight:700; color:var(--s); display:inline-flex; gap:6px; align-items:center; }
.cats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:72px; }
.cat { position:relative; border-radius:22px; overflow:hidden; aspect-ratio:1/1.08; padding:20px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; }
.cat svg.art { position:absolute; width:58%; right:-4%; top:8%; filter:drop-shadow(0 20px 22px rgba(0,0,0,.25)); }
.cat b { font-size:20px; font-weight:800; position:relative; } .cat small { position:relative; opacity:.85; font-weight:600; }
.cat::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.35)); }
.cat > * { z-index:1; }
.products { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.products.p4 { grid-template-columns:repeat(4,1fr); }
.product { display:flex; flex-direction:column; gap:4px; }
.p-img { position:relative; aspect-ratio:1/1.1; border-radius:22px; display:grid; place-items:center; overflow:hidden; transition:transform .35s; }
.product:hover .p-img { transform:translateY(-4px); }
.p-img > svg { width:54%; filter:drop-shadow(0 22px 22px rgba(60,25,5,.22)); }
.p-img .flag { position:absolute; top:14px; left:14px; background:#fffcf8; color:var(--s-d); border-radius:99px; padding:4px 11px; font-size:12px; font-weight:700; }
.p-img .flag.sale { background:#b42318; color:#fff; }
.p-img .fav { position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%; background:#fffcf8; display:grid; place-items:center; color:var(--s-d); }
.p-img .quick { position:absolute; left:14px; right:14px; bottom:14px; height:44px; border-radius:99px; border:0; background:var(--s-d); color:#fff; font-weight:700; opacity:0; transform:translateY(8px); transition:.25s; }
.product:hover .quick { opacity:1; transform:none; }
.product h3 { margin:12px 0 0; font-size:16.5px; font-weight:700; letter-spacing:-.01em; }
.product .notes { color:#8b715d; font-size:13.5px; }
.prow { display:flex; justify-content:space-between; align-items:center; margin-top:4px; }
.price { font-weight:800; font-size:17px; } .price s { color:#b09a88; font-weight:500; font-size:14px; margin-left:6px; }
.story { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; background:var(--s-d); color:#f4e6d6; border-radius:32px; padding:48px; margin:80px 0; }
.story h2 { color:#fff; font-size:38px; margin:10px 0 16px; font-weight:800; }
.story p { color:#d8c3ad; }
.story .eyebrow { color:#e5b98d; }
.story-art { aspect-ratio:1.2; border-radius:24px; background:radial-gradient(circle at 50% 60%,#5a3a24,#2b1d14 70%); position:relative; overflow:hidden; }
.facts { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:26px; }
.facts b { display:block; font-size:30px; color:#fff; font-weight:800; }
.reviews { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:80px; }
.review { background:#fff; border:1px solid #f0e6da; border-radius:22px; padding:24px; }
.review p { margin:12px 0 16px; color:#4a3a2e; }
.review footer { display:flex; align-items:center; gap:10px; font-size:13.5px; }
.review footer small { display:block; color:#8b715d; }
.news { display:grid; grid-template-columns:1.2fr 1fr; gap:30px; align-items:center; background:var(--s-50); border-radius:28px; padding:40px 44px; margin-bottom:72px; }
.news h2 { font-size:30px; margin:0 0 8px; font-weight:800; }
.news form { display:flex; gap:8px; background:#fff; border-radius:99px; padding:6px; border:1px solid #ead9c4; }
.news input { flex:1; border:0; outline:0; font:inherit; padding:0 16px; background:none; }
.sfoot { background:var(--s-d); color:#cdb59d; padding:56px 0 30px; font-size:13.5px; }
.sfoot .cols { display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:30px; }
.sfoot h4 { color:#fff; margin:0 0 12px; font-size:14px; }
.sfoot a { display:block; padding:3px 0; }
.sfoot .bottom { border-top:1px solid #4a3426; margin-top:36px; padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.paym { display:flex; gap:8px; } .paym span { border:1px solid #5a4030; border-radius:6px; padding:2px 8px; font-size:11px; font-weight:700; color:#e8d5c0; }
.crumbs { font-size:13px; color:#8b715d; padding:22px 0 0; } .crumbs a:hover { color:var(--s); }
.catalog { display:grid; grid-template-columns:260px 1fr; gap:40px; padding:24px 0 72px; }
.filters { position:sticky; top:86px; align-self:start; }
.fgroup { border-bottom:1px solid #f0e6da; padding:18px 0; }
.fgroup:first-child { padding-top:0; }
.fgroup h3 { font-size:14px; margin:0 0 12px; font-weight:800; display:flex; justify-content:space-between; }
.fgroup label { display:flex; align-items:center; gap:10px; padding:5px 0; color:#4a3a2e; cursor:pointer; font-size:14px; }
.fgroup label span { margin-left:auto; color:#b09a88; font-size:12.5px; }
.fgroup input { accent-color:#6f4426; width:17px; height:17px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chips button { padding:7px 13px; border-radius:99px; border:1.5px solid #ead9c4; background:#fff; font-weight:600; font-size:13px; }
.chips button.on { background:var(--s-d); border-color:var(--s-d); color:#fff; }
.range { height:4px; border-radius:99px; background:#ead9c4; position:relative; margin:18px 8px 12px; }
.range i { position:absolute; left:8%; right:28%; top:0; bottom:0; background:var(--s); }
.range i::before, .range i::after { content:""; position:absolute; top:-7px; width:18px; height:18px; border-radius:50%; background:#fff; border:3px solid var(--s); }
.range i::before { left:-9px; } .range i::after { right:-9px; }
.toolbar { display:flex; justify-content:space-between; align-items:center; margin:0 0 22px; color:#8b715d; gap:12px; flex-wrap:wrap; }
.toolbar select { font:inherit; font-weight:600; padding:10px 14px; border-radius:12px; border:1.5px solid #ead9c4; background:#fff; color:var(--s-d); }
.active-f { display:flex; gap:8px; flex-wrap:wrap; }
.active-f span { background:var(--s-50); border-radius:99px; padding:5px 12px; font-size:12.5px; font-weight:600; color:var(--s-d); }
.pdp { display:grid; grid-template-columns:1.1fr 1fr; gap:56px; padding:28px 0 64px; }
.gal { display:grid; grid-template-columns:88px 1fr; gap:14px; align-self:start; position:sticky; top:86px; }
.thumbs { display:flex; flex-direction:column; gap:12px; }
.thumbs div { aspect-ratio:1; border-radius:14px; display:grid; place-items:center; cursor:pointer; }
.thumbs div svg { width:62%; }
.thumbs div.on { outline:2px solid var(--s-d); outline-offset:3px; }
.gal .big { aspect-ratio:1/1.05; border-radius:28px; display:grid; place-items:center; }
.gal .big svg { width:52%; filter:drop-shadow(0 30px 30px rgba(60,25,5,.25)); }
.pdp h1 { font-size:42px; margin:10px 0 10px; font-weight:800; line-height:1.05; }
.pdp .price { font-size:28px; }
.unit { font-size:13.5px; color:#8b715d; font-weight:600; }
.profile { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:22px 0 6px; }
.profile div { background:var(--s-50); border-radius:16px; padding:12px 14px; font-size:12.5px; color:#8b715d; font-weight:600; }
.profile b { display:block; color:var(--s-d); font-size:14px; margin-bottom:6px; }
.dots { display:flex; gap:4px; } .dots i { flex:1; height:5px; border-radius:99px; background:#e4d3bf; } .dots i.f { background:var(--s); }
.opt-t { font-weight:800; margin:22px 0 10px; font-size:14px; display:flex; justify-content:space-between; }
.opt-t span { color:#8b715d; font-weight:600; }
.opts { display:flex; gap:8px; flex-wrap:wrap; }
.opts button { padding:11px 16px; border-radius:14px; border:1.5px solid #ead9c4; background:#fff; font-weight:600; font-size:14px; }
.opts button.on { border-color:var(--s-d); background:var(--s-d); color:#fff; }
.sub-box { display:flex; gap:12px; margin-top:20px; }
.sub-box label { flex:1; border:1.5px solid #ead9c4; border-radius:16px; padding:14px; display:flex; gap:10px; cursor:pointer; background:#fff; font-size:13.5px; }
.sub-box label.on { border-color:var(--s-d); box-shadow:0 0 0 1px var(--s-d) inset; }
.sub-box b { display:block; font-size:14.5px; }
.sub-box small { color:#2f7a3d; font-weight:700; }
.buy { display:flex; gap:12px; margin:24px 0 18px; }
.qty { display:inline-flex; align-items:center; border:1.5px solid #ead9c4; border-radius:99px; background:#fff; }
.qty button { width:44px; height:50px; border:0; background:none; font-size:18px; }
.qty span { width:26px; text-align:center; font-weight:800; }
.perks { list-style:none; padding:0; margin:0; display:grid; gap:10px; font-size:14px; color:#4a3a2e; }
.perks li { display:flex; gap:10px; align-items:center; }
.acc { border-top:1px solid #f0e6da; margin-top:22px; }
.acc details { border-bottom:1px solid #f0e6da; padding:16px 0; }
.acc summary { font-weight:800; cursor:pointer; list-style:none; display:flex; justify-content:space-between; }
.acc summary::after { content:"+"; font-size:20px; line-height:1; }
.acc details[open] summary::after { content:"−"; }
.acc p { color:#6b5646; margin:10px 0 0; }
.cartp { display:grid; grid-template-columns:1.5fr 1fr; gap:44px; padding:28px 0 72px; }
.steps-co { display:flex; gap:8px; align-items:center; font-size:13px; font-weight:700; color:#b09a88; margin-bottom:18px; }
.steps-co .on { color:var(--s-d); } .steps-co i { width:24px; height:1px; background:#e4d3bf; }
.cline { display:grid; grid-template-columns:110px 1fr auto; gap:18px; align-items:center; padding:18px 0; border-bottom:1px solid #f0e6da; }
.cline .p-img { border-radius:18px; aspect-ratio:1; } .cline .p-img > svg { width:60%; }
.cline b { font-size:16px; } .cline .notes { display:block; color:#8b715d; font-size:13.5px; margin:2px 0 10px; }
.rm { color:#8b715d; font-size:13px; font-weight:600; margin-left:12px; text-decoration:underline; }
.summary { background:#fff; border:1px solid #f0e6da; border-radius:26px; padding:26px; align-self:start; position:sticky; top:86px; box-shadow:0 20px 50px -30px rgba(60,25,5,.25); }
.summary h2 { font-size:20px; margin:0 0 16px; font-weight:800; }
.srow { display:flex; justify-content:space-between; padding:7px 0; color:#4a3a2e; }
.srow.total { font-weight:800; font-size:21px; color:var(--s-d); border-top:1px solid #f0e6da; margin-top:10px; padding-top:16px; }
.ship { background:var(--s-50); border-radius:16px; padding:14px; font-size:13.5px; margin-bottom:18px; }
.ship .bar2 { height:6px; border-radius:99px; background:#ead9c4; margin-top:10px; overflow:hidden; } .ship .bar2 i { display:block; height:100%; background:var(--s); border-radius:99px; }
.coupon { display:flex; gap:8px; margin:14px 0 4px; } .coupon input { flex:1; font:inherit; padding:11px 14px; border-radius:12px; border:1.5px solid #ead9c4; }
.coupon button { padding:0 16px; border-radius:12px; border:0; background:var(--s-50); font-weight:700; }
.upsell { display:flex; gap:14px; align-items:center; border:1.5px dashed #e4d3bf; border-radius:18px; padding:14px; margin-top:22px; }
.upsell .p-img { width:72px; aspect-ratio:1; border-radius:14px; } .upsell .p-img > svg { width:62%; }

/* ========== SITO VETRINA ========== */
.site { --g:#0f766e; --g-d:#0b3b37; --g-50:#ecf7f5; --g-100:#d5ede9; background:#fbfdfc; color:#0f2a27; font:16px/1.65 "Montserrat",sans-serif; }
.site h1, .site h2, .site h3 { letter-spacing:-.03em; }
.vnav { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; padding:16px 56px; background:rgba(251,253,252,.9); backdrop-filter:blur(10px); border-bottom:1px solid #e3efed; }
.vlogo { display:flex; align-items:center; gap:10px; font:800 21px "Montserrat",sans-serif; letter-spacing:-.03em; }
.vlogo span { width:38px; height:38px; border-radius:12px; background:linear-gradient(140deg,#14b8a6,var(--g)); color:#fff; display:grid; place-items:center; }
.vlinks { display:flex; gap:30px; font-weight:600; font-size:14.5px; color:#35524e; }
.vbtn { display:inline-flex; align-items:center; gap:9px; height:50px; padding:0 24px; border-radius:14px; background:var(--g); color:#fff; font-weight:700; border:0; font-size:15px; box-shadow:0 12px 26px -12px var(--g); }
.vbtn.ghost { background:#fff; color:var(--g-d); border:1.5px solid #cfe5e1; box-shadow:none; }
.vbtn.sm { height:42px; font-size:14px; padding:0 18px; }
.vhero { display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:center; padding:56px 56px 72px; max-width:1360px; margin:0 auto; }
.vhero h1 { font-size:62px; line-height:1.02; margin:18px 0 20px; font-weight:800; }
.vhero h1 em { font-style:normal; background:linear-gradient(120deg,#14b8a6,#0f766e); -webkit-background-clip:text; background-clip:text; color:transparent; }
.vhero p { font-size:18.5px; color:#4b6b66; margin:0 0 30px; max-width:540px; }
.vpill { display:inline-flex; gap:8px; align-items:center; background:var(--g-50); color:var(--g); padding:7px 15px; border-radius:99px; font-weight:700; font-size:13px; }
.trust { display:flex; gap:34px; margin-top:34px; padding-top:26px; border-top:1px solid #e3efed; }
.trust b { display:block; font-size:26px; font-weight:800; color:var(--g-d); }
.trust span { color:#4b6b66; font-size:13.5px; font-weight:600; }
.hero-vis { position:relative; aspect-ratio:1/1; border-radius:40px; background:linear-gradient(155deg,#2dd4bf 0%,#0f766e 52%,#0b3b37 100%); overflow:hidden; }
.hero-vis .shape { position:absolute; inset:0; width:100%; height:100%; }
.float { position:absolute; background:#fff; border-radius:20px; padding:14px 16px; box-shadow:0 24px 60px rgba(5,40,36,.3); font-size:13.5px; display:flex; gap:12px; align-items:center; }
.float .ic { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--g-50); color:var(--g); }
.float small { display:block; color:#4b6b66; font-weight:600; }
.appt { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:68%; background:#fff; border-radius:26px; padding:22px; box-shadow:0 40px 80px rgba(5,40,36,.4); }
.appt-h { display:flex; gap:12px; align-items:center; }
.appt-h small { display:block; color:#4b6b66; font-size:12.5px; }
.days, .slots { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; }
.slots { grid-template-columns:repeat(4,1fr); }
.days > *, .slots > * { display:flex; flex-direction:column; align-items:center; padding:9px 0; border-radius:12px; border:1.5px solid #dcece9; font-size:11.5px; color:#4b6b66; font-weight:600; background:#fff; }
.days b { font-size:17px; color:var(--g-d); }
.slots > * { font-size:13px; color:var(--g-d); font-weight:700; }
.days .on, .slots .on { background:var(--g); border-color:var(--g); color:#fff; } .days .on b { color:#fff; }
.days .on2 { background:var(--g-50); border-color:var(--g); }
.slots .off { opacity:.4; text-decoration:line-through; }
.lbl { font-size:12.5px; font-weight:700; color:#4b6b66; margin:16px 0 8px; text-transform:uppercase; letter-spacing:.06em; }
.vsec { padding:88px 56px; }
.vsec.alt { background:#f2f8f7; }
.vin { max-width:1180px; margin:0 auto; }
.vhead { text-align:center; max-width:680px; margin:0 auto 48px; }
.vhead .eyebrow2 { color:var(--g); font-weight:800; font-size:13px; letter-spacing:.14em; text-transform:uppercase; }
.vhead h2 { font-size:42px; margin:10px 0 12px; font-weight:800; line-height:1.1; }
.vhead p { color:#4b6b66; margin:0; font-size:17px; }
.svc { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.svc article { background:#fff; border:1px solid #e0eeeb; border-radius:24px; padding:28px; transition:.25s; }
.svc article:hover { transform:translateY(-4px); box-shadow:0 26px 50px -30px rgba(5,40,36,.4); }
.svc .ic { width:52px; height:52px; border-radius:16px; display:grid; place-items:center; background:var(--g-50); color:var(--g); margin-bottom:18px; }
.svc h3 { font-size:19px; margin:0 0 8px; font-weight:800; }
.svc p { color:#4b6b66; margin:0 0 14px; font-size:15px; }
.svc .more { color:var(--g); font-weight:700; font-size:14px; display:inline-flex; gap:6px; align-items:center; }
.how { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:s; }
.how div { position:relative; padding-top:62px; }
.how div::before { counter-increment:s; content:"0" counter(s); position:absolute; top:0; left:0; font:800 40px "Montserrat",sans-serif; color:transparent; -webkit-text-stroke:1.5px #9fd3cb; }
.how h3 { font-size:18px; margin:0 0 8px; font-weight:800; } .how p { margin:0; color:#4b6b66; font-size:15px; }
.book { display:grid; grid-template-columns:1fr 1.05fr; background:#fff; border:1px solid #e0eeeb; border-radius:32px; overflow:hidden; box-shadow:0 40px 80px -50px rgba(5,40,36,.4); }
.book-l { padding:36px; } .book-r { padding:36px; background:var(--g-d); color:#d2ece7; }
.book-r h3 { color:#fff; font-size:22px; margin:0 0 6px; font-weight:800; }
.field { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; font-weight:700; font-size:13.5px; color:#d2ece7; }
.field input, .field select { font:inherit; font-weight:500; padding:13px 15px; border-radius:13px; border:1.5px solid #1f5a54; background:#0f4a45; color:#fff; }
.field input::placeholder { color:#7fb1aa; }
.summary-box { background:#0f4a45; border-radius:16px; padding:14px 16px; margin:4px 0 16px; font-size:14px; display:flex; gap:12px; align-items:center; }
.team { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.member { background:#fff; border:1px solid #e0eeeb; border-radius:24px; overflow:hidden; }
.member .ph { aspect-ratio:1/1.05; display:grid; place-items:end center; position:relative; overflow:hidden; }
.member .ph svg { width:78%; }
.member div.tx { padding:16px 18px 20px; } .member b { display:block; font-size:16.5px; } .member small { color:#4b6b66; font-weight:600; }
.member .tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; } .member .tags span { font-size:11.5px; font-weight:700; background:var(--g-50); color:var(--g); border-radius:99px; padding:3px 9px; }
.quotes { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.quote { background:#fff; border:1px solid #e0eeeb; border-radius:24px; padding:26px; }
.quote p { color:#1f3d39; margin:14px 0 18px; }
.quote footer { display:flex; gap:10px; align-items:center; font-size:14px; } .quote footer small { display:block; color:#4b6b66; }
.faq { max-width:820px; margin:0 auto; }
.faq details { background:#fff; border:1px solid #e0eeeb; border-radius:18px; padding:20px 24px; margin-bottom:12px; }
.faq summary { font-weight:800; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:12px; }
.faq summary::after { content:"+"; color:var(--g); font-size:22px; line-height:1; }
.faq details[open] summary::after { content:"−"; }
.faq p { color:#4b6b66; margin:10px 0 0; }
.contact { display:grid; grid-template-columns:1fr 1.2fr; gap:20px; }
.map { border-radius:28px; overflow:hidden; min-height:320px; position:relative; background:#e6f1ef; }
.map svg { position:absolute; inset:0; width:100%; height:100%; }
.vfoot { background:var(--g-d); color:#9cc7c0; padding:48px 56px 28px; font-size:14px; }
.vfoot .cols { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:30px; }
.vfoot h4 { color:#fff; margin:0 0 10px; } .vfoot a { display:block; padding:3px 0; }
.vfoot .bottom { max-width:1180px; margin:30px auto 0; border-top:1px solid #1d5650; padding-top:18px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:13px; }

/* ========== RESPONSIVE ========== */
@media (max-width: 1100px) {
  .g4 { grid-template-columns:1fr 1fr; } .pos { grid-template-columns:150px 1fr; } .pos > :last-child { grid-column:1 / -1; } .kds { grid-template-columns:1fr 1fr; }
  .search { width:220px; }
}
@media (max-width: 760px) {
  body { font-size:14px; }
  .app { grid-template-columns:1fr; }
  .side { position:static; height:auto; flex-direction:row; overflow-x:auto; padding:10px 12px; gap:4px; border-right:0; border-bottom:1px solid #e7e9ee; scrollbar-width:none; }
  .side .grp, .side-card, .user, .brand small, .nav .cnt { display:none; }
  .brand { padding:0 8px 0 0; } .brand b { white-space:nowrap; }
  .nav { white-space:nowrap; padding:8px 10px; }
  .top { padding:10px 14px; } .crumb { display:none; } .search { width:auto; flex:1; margin-left:0; } .kbd { display:none; }
  .page { padding:16px 14px 30px; }
  .ph h1 { font-size:20px; }
  .g3, .g2, .g-main, .pos, .pos2 { grid-template-columns:1fr; }
  .g4 { grid-template-columns:1fr 1fr; gap:10px; }
  .kpi { padding:12px; } .kpi-val strong { font-size:20px; } .spark { display:none; }
  .items, .prods { grid-template-columns:1fr 1fr; }
  .cats { flex-direction:row; overflow-x:auto; } .cats button { white-space:nowrap; }
  .kds { grid-template-columns:1fr; }
  table.t th, table.t td { padding:10px 12px; } .hide-m { display:none; }
  .snav { grid-template-columns:auto 1fr; padding:12px 16px; } .slinks { display:none; } .slogo { font-size:19px; }
  .wrap { padding:0 16px; }
  .hero { grid-template-columns:1fr; padding:24px 0 36px; gap:24px; } .hero h1 { font-size:38px; } .hero p { font-size:16px; }
  .usp { grid-template-columns:1fr 1fr; } .usp div { border-right:0; border-bottom:1px solid #f0e6da; padding:14px; }
  .cats-row { grid-template-columns:1fr 1fr; gap:12px; } .cat b { font-size:17px; }
  .products, .products.p4 { grid-template-columns:1fr 1fr; gap:14px; } .product h3 { font-size:14.5px; } .p-img { border-radius:16px; }
  .sec-h h2 { font-size:26px; }
  .story, .news { grid-template-columns:1fr; padding:26px; } .reviews { grid-template-columns:1fr; }
  .sfoot .cols { grid-template-columns:1fr 1fr; }
  .catalog, .pdp, .cartp { grid-template-columns:1fr; gap:22px; } .filters { display:none; } .gal { position:static; grid-template-columns:1fr; } .thumbs { flex-direction:row; order:2; } .thumbs div { width:70px; }
  .pdp h1 { font-size:30px; } .summary { position:static; }
  .vnav { padding:12px 16px; } .vlinks { display:none; } .vnav .vbtn { height:40px; padding:0 14px; font-size:13px; }
  .vhero { grid-template-columns:1fr; padding:24px 16px 40px; gap:26px; } .vhero h1 { font-size:40px; } .vhero p { font-size:16.5px; }
  .trust { gap:18px; } .trust b { font-size:20px; }
  .vsec { padding:56px 16px; } .vhead h2 { font-size:30px; }
  .svc, .how, .team, .quotes, .contact, .book { grid-template-columns:1fr; } .team { grid-template-columns:1fr 1fr; }
  .vfoot { padding:36px 16px 24px; } .vfoot .cols { grid-template-columns:1fr 1fr; }
  .appt { width:84%; }
}
.book-l .opts button:not(.on) { background:#fff; color:var(--g-d); border:1.5px solid #cfe5e1; box-shadow:none; }

/* ========== SCENE DI RENDER (dispositivi) ========== */
.scene { margin:0; width:100vw; height:100vh; overflow:hidden; position:relative; background:radial-gradient(120% 120% at 20% 10%, var(--c1) 0%, var(--c2) 55%, var(--c3) 100%); font-family:"Montserrat",sans-serif; }
.scene::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 80% 85%, rgba(255,255,255,.18), transparent 40%), radial-gradient(circle at 10% 90%, rgba(0,0,0,.25), transparent 50%); }
.scene .cap { position:absolute; left:5vw; top:6vh; color:#fff; z-index:5; }
.scene .cap b { display:block; font-size:2.6vw; font-weight:800; letter-spacing:-.03em; line-height:1.05; }
.scene .cap span { display:inline-block; margin-top:.8vw; font-size:1vw; font-weight:700; letter-spacing:.14em; text-transform:uppercase; opacity:.8; }
.dev { position:absolute; z-index:2; }
.dev iframe { border:0; display:block; transform-origin:0 0; background:#fff; pointer-events:none; }
.laptop { left:var(--lx,18vw); top:var(--ly,17vh); width:58vw; filter:drop-shadow(0 40px 60px rgba(0,0,0,.45)); }
.laptop .scr { background:#0b0b0f; border-radius:1.4vw 1.4vw 0 0; padding:1.1vw 1.1vw 1.6vw; position:relative; }
.laptop .scr::before { content:""; position:absolute; top:.45vw; left:50%; width:.45vw; height:.45vw; margin-left:-.22vw; border-radius:50%; background:#2a2a33; }
.laptop .vp { width:55.8vw; height:34.875vw; overflow:hidden; border-radius:.3vw; background:#fff; }
.laptop .base { height:1.3vw; margin:0 -4vw; background:linear-gradient(180deg,#d9dbe0,#a7abb4); border-radius:0 0 1.4vw 1.4vw; position:relative; }
.laptop .base::before { content:""; position:absolute; left:50%; top:0; width:9vw; height:.55vw; margin-left:-4.5vw; background:#c2c5cc; border-radius:0 0 .6vw .6vw; }
.tablet { right:var(--tr,11vw); top:var(--tt,12vh); width:22vw; filter:drop-shadow(0 30px 50px rgba(0,0,0,.4)); z-index:1; }
.tablet .scr { background:#0b0b0f; border-radius:1.8vw; padding:1vw; }
.tablet .vp { width:20vw; height:28.78vw; overflow:hidden; border-radius:.9vw; background:#fff; }
.phone { right:var(--pr,6vw); top:var(--pt,36vh); width:12.6vw; filter:drop-shadow(0 30px 40px rgba(0,0,0,.5)); z-index:3; }
.phone .scr { background:#0b0b0f; border-radius:2.4vw; padding:.6vw; position:relative; }
.phone .scr::before { content:""; position:absolute; top:1.05vw; left:50%; width:3.6vw; height:1vw; margin-left:-1.8vw; border-radius:99px; background:#0b0b0f; z-index:2; }
.phone .vp { width:11.4vw; height:24.68vw; overflow:hidden; border-radius:1.9vw; background:#fff; }
html.shot { scrollbar-width:none; } html.shot::-webkit-scrollbar, html.shot body::-webkit-scrollbar { display:none; }
@media (min-width: 761px) and (max-width: 1000px) {
  .vlinks, .slinks { display:none; } .snav { grid-template-columns:auto 1fr; }
  .vhero { grid-template-columns:1fr; padding:36px 32px 56px; } .vhero h1 { font-size:46px; } .hero-vis { max-width:560px; }
  .svc, .quotes { grid-template-columns:1fr 1fr; } .team { grid-template-columns:1fr 1fr; } .how { grid-template-columns:1fr 1fr; }
  .book, .contact { grid-template-columns:1fr; } .vsec { padding:64px 32px; }
  .hero { grid-template-columns:1fr; } .catalog { grid-template-columns:1fr; } .filters { display:none; } .products.p4 { grid-template-columns:repeat(3,1fr); }
}
.book-l .opts button.on { background:var(--g); color:#fff; border:1.5px solid var(--g); }