/* =====================================================================
   CoverKitchen · stile
   Layout: pagina chiara stile Apple; il configuratore è il prodotto.
   Vista 3D fissa a sinistra, opzioni che scorrono a destra.
   Un solo font: Montserrat.
   ===================================================================== */
:root {
  --bg: #ffffff;
  --band: #f5f5f7;
  --card: #ffffff;
  --fg: #1d1d1f;
  --muted: #6e6e73;
  --line: #d2d2d7;
  --line-soft: #e8e8ed;
  --accent: #0071e3;
  --accent-hover: #0077ed;
  --accent-soft: #e8f2fd;
  --ok: #1a7f45;
  --ok-soft: #e9f6ee;
  --warn: #9a5b00;
  --warn-soft: #fdf4e3;
  --font: "Montserrat", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --r: 18px;
  --gut: clamp(16px, 4vw, 40px);
  --nav: 52px;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav) + 12px); }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
img { max-width: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--font); margin: 0; text-wrap: balance; letter-spacing: -.025em; color: var(--fg); }
p { margin: 0; }
button, input, select, textarea { font-family: var(--font); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wrap { max-width: 1280px; margin: 0 auto; padding-inline: var(--gut); }
.narrow { max-width: 980px; margin: 0 auto; padding-inline: var(--gut); }
.eyebrow { font-size: .82rem; font-weight: 600; color: var(--muted); letter-spacing: .01em; }

/* Bottoni */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; font: 500 1rem var(--font); padding: .78em 1.4em; border-radius: 980px; border: 0; cursor: pointer; text-decoration: none !important; transition: background .2s, transform .2s; white-space: nowrap; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:disabled { background: var(--line); color: var(--muted); cursor: not-allowed; }
.btn-dark { background: var(--fg); color: #fff; }
.btn-light { background: var(--band); color: var(--fg); }
.btn-sm { font-size: .8rem; padding: .5em 1em; }
.btn-block { width: 100%; }
.link { font-size: 1.05rem; font-weight: 500; }
.link::after { content: " ›"; }

/* Barra di navigazione */
header.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 60; background: rgba(255, 255, 255, .78); backdrop-filter: saturate(1.8) blur(20px); -webkit-backdrop-filter: saturate(1.8) blur(20px); border-bottom: 1px solid rgba(0, 0, 0, .08); }
.top .wrap { display: flex; align-items: center; gap: 28px; height: var(--nav); }
.logo { font-size: 1.15rem; letter-spacing: -.035em; color: var(--fg) !important; text-decoration: none !important; white-space: nowrap; }
.logo { display: inline-flex; align-items: center; }
.logo img { display: block; height: 34px; width: auto; }
footer .logo img { height: 44px; }
nav.main { display: flex; gap: 26px; margin-left: auto; font-size: .78rem; }
nav.main a { color: var(--fg); opacity: .82; }
nav.main a:hover { opacity: 1; text-decoration: none; }
@media (max-width: 860px) { nav.main { display: none; } .top .btn { margin-left: auto; } }

/* Hero */
.hero { text-align: center; padding-block: clamp(44px, 7vw, 88px) clamp(24px, 3vw, 36px); }
.hero .eyebrow { font-size: 1.05rem; color: var(--fg); font-weight: 600; }
.hero h1 { font-size: clamp(2.6rem, 7.4vw, 5.4rem); font-weight: 700; line-height: 1.02; margin-top: 10px; }
.hero .lead { font-size: clamp(1.1rem, 2vw, 1.45rem); color: var(--muted); max-width: 40ch; margin: 18px auto 0; font-weight: 500; line-height: 1.4; }
.hero .ctas { display: flex; gap: 14px 30px; justify-content: center; flex-wrap: wrap; margin-top: 26px; align-items: center; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 40px auto 0; max-width: 900px; }
.facts div { display: flex; flex-direction: column; align-items: center; }
.facts strong { font-size: clamp(1.3rem, 2.6vw, 1.8rem); font-weight: 700; letter-spacing: -.03em; }
.facts span { font-size: .78rem; color: var(--muted); text-align: center; }
@media (max-width: 640px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; } }

/* ---------------- Configuratore ---------------- */
.cfg { padding-block: 10px 80px; }
.cfg-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(340px, 1fr); gap: 36px; align-items: start; }
.stage-wrap { position: sticky; top: calc(var(--nav) + 14px); }
.stage { position: relative; height: calc(100vh - var(--nav) - 110px); min-height: 460px; max-height: 820px; border-radius: 28px; overflow: hidden; background: var(--band); }
.stage canvas { display: block; width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; touch-action: none; cursor: grab; }
.stage canvas:active { cursor: grabbing; }
.nogl { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-items: center; text-align: center; padding: 24px; color: var(--muted); }
@media (max-width: 980px) {
  .cfg-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .stage-wrap { top: var(--nav); z-index: 20; margin-inline: calc(var(--gut) * -1); }
  .stage { height: 44vh; min-height: 300px; border-radius: 0; }
}
.overlay { position: absolute; left: 14px; right: 14px; display: flex; gap: 8px; pointer-events: none; flex-wrap: wrap; align-items: center; }
.overlay > * { pointer-events: auto; }
.overlay.top { top: 14px; justify-content: space-between; }
.overlay.bottom { bottom: 14px; justify-content: space-between; align-items: flex-end; }
.pill-group { display: inline-flex; background: rgba(255, 255, 255, .82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 980px; padding: 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 18px rgba(0, 0, 0, .06); }
.pill-group button { font: 600 .74rem var(--font); color: var(--fg); background: none; border: 0; padding: .55em 1em; border-radius: 980px; cursor: pointer; white-space: nowrap; }
.pill-group button[aria-pressed="true"] { background: var(--fg); color: #fff; }
.tag { font-size: .74rem; font-weight: 600; background: rgba(255, 255, 255, .86); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: .5em .9em; border-radius: 980px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.hint { font-size: .74rem; color: var(--muted); }
@media (max-width: 560px) { .hint { display: none; } .pill-group button { padding: .5em .75em; font-size: .7rem; } }
.split { position: absolute; top: 0; bottom: 0; width: 44px; margin-left: -22px; cursor: ew-resize; touch-action: none; z-index: 5; }
.split::before { content: ""; position: absolute; left: 21px; top: 0; bottom: 0; width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.split span { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); display: grid; place-items: center; font-size: .8rem; font-weight: 700; color: var(--fg); }
.split-label { position: absolute; top: 60px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: rgba(29, 29, 31, .72); color: #fff; padding: .35em .8em; border-radius: 980px; pointer-events: none; }
.split-label.l { left: 14px; } .split-label.r { right: 14px; }
.prima-pick { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; background: rgba(255, 255, 255, .88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 16px; padding: 8px 10px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 18px rgba(0, 0, 0, .06); max-width: 100%; }
.prima-pick b { font-size: .72rem; margin-right: 4px; }
.prima-pick button { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); cursor: pointer; background-size: cover; }
.prima-pick button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent); }

/* Colonna opzioni */
.opts { display: flex; flex-direction: column; min-width: 0; }
@media (max-width: 980px) { .opts { padding-top: 22px; } }
.opts-head h2 { font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 700; line-height: 1.08; }
.opts-head p { color: var(--muted); margin-top: 8px; font-size: .95rem; }
.step { padding-block: 30px; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 14px; }
.opts-head + .step { border-top: 0; }
.step h3 { font-size: 1.32rem; font-weight: 600; line-height: 1.25; }
.step h3 b { font-weight: 700; }
.step h3 span { color: var(--muted); font-weight: 600; }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.choices.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choice { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; cursor: pointer; text-align: left; color: var(--fg); display: flex; flex-direction: column; gap: 10px; transition: border-color .15s, box-shadow .15s; min-width: 0; }
.choice:hover { border-color: #86868b; }
.choice[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.choice:disabled { opacity: .4; cursor: not-allowed; }
.choice svg { width: 100%; height: 54px; }
.choice b { font-size: .95rem; font-weight: 600; display: block; }
.choice small { color: var(--muted); font-size: .76rem; line-height: 1.35; display: block; }
.choice .ico { stroke: var(--fg); fill: none; stroke-width: 1.6; }
.choice .ico .f { fill: var(--line-soft); }
.choice[aria-pressed="true"] .ico .f { fill: var(--accent-soft); }
.choice[aria-pressed="true"] .ico { stroke: var(--accent); }
.plan .wall { fill: #c7c7cc; } .plan .cab { fill: #1d1d1f; } .plan .tall { fill: #86868b; } .plan .isl { fill: #6e6e73; }
.choice[aria-pressed="true"] .plan .cab { fill: var(--accent); }
@media (max-width: 420px) { .choices.three { grid-template-columns: minmax(0, 1fr); } .choices.three .choice { flex-direction: row; align-items: center; } .choices.three .choice svg { width: 64px; flex: none; } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: 500 .88rem var(--font); background: var(--card); color: var(--fg); border: 1px solid var(--line); border-radius: 980px; padding: .55em 1.1em; cursor: pointer; }
.chip:hover { border-color: #86868b; }
.chip[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); color: var(--accent); font-weight: 600; }
.chip:disabled { opacity: .4; cursor: not-allowed; }
.measure { display: flex; align-items: center; gap: 12px; background: var(--band); border-radius: 14px; padding: 12px 14px; }
.measure input[type=range] { flex: 1; accent-color: var(--accent); min-width: 0; }
.measure output { font-weight: 700; font-size: 1.05rem; min-width: 72px; text-align: right; }
.measure .lbl { font-size: .78rem; color: var(--muted); font-weight: 600; min-width: 74px; }
.toggles { display: grid; gap: 8px; }
.tog { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; font-size: .92rem; font-weight: 500; cursor: pointer; }
.tog small { display: block; color: var(--muted); font-size: .76rem; font-weight: 500; }
.tog input { appearance: none; width: 46px; height: 28px; border-radius: 980px; background: #e9e9ea; position: relative; cursor: pointer; flex: none; transition: background .2s; margin: 0; }
.tog input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); transition: transform .2s; }
.tog input:checked { background: #34c759; }
.tog input:checked::after { transform: translateX(18px); }
.note { font-size: .82rem; color: var(--muted); line-height: 1.45; }
.notice { border-radius: 14px; padding: 14px 16px; font-size: .86rem; line-height: 1.45; display: flex; gap: 10px; }
.notice b { display: block; margin-bottom: 2px; }
.notice.warn { background: var(--warn-soft); color: #5c3a00; }
.notice.ok { background: var(--ok-soft); color: #0f4d2a; }
.notice.info { background: var(--accent-soft); color: #00396f; }
.notice .ic { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 800; color: #fff; margin-top: 1px; }
.notice.warn .ic { background: #c27c0e; } .notice.ok .ic { background: var(--ok); } .notice.info .ic { background: var(--accent); }

/* Finiture */
.zones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.zone { display: flex; gap: 10px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 8px; cursor: pointer; text-align: left; color: var(--fg); min-width: 0; }
.zone img { width: 36px; height: 36px; border-radius: 9px; flex: none; object-fit: cover; }
.zone span { display: block; min-width: 0; }
.zone b { display: block; font-size: .8rem; font-weight: 600; }
.zone em { display: block; font-style: normal; font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zone[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.fin-sub { font-weight: 700; font-size: .86rem; margin: 6px 0 -2px; }
.fin-sub small { display: block; font-weight: 500; font-size: .76rem; color: var(--muted); margin-top: 2px; }
.presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.preset { display: flex; flex-direction: column; gap: 8px; align-items: stretch; background: var(--band); border: 2px solid transparent; border-radius: 16px; padding: 8px 8px 10px; color: var(--fg); font: 600 .78rem var(--font); cursor: pointer; text-align: left; transition: border-color .2s, transform .2s; }
.preset:hover { transform: translateY(-2px); }
.preset[aria-pressed="true"] { border-color: var(--accent); background: #fff; }
.preset .pv { display: grid; grid-template-rows: 14px 30px 10px; gap: 3px; border-radius: 10px; overflow: hidden; }
.preset .pv i { display: block; }
.preset b { font-weight: 700; padding: 0 2px; }
.current { display: flex; gap: 14px; align-items: center; background: var(--band); border-radius: 16px; padding: 12px; }
.current img { width: 64px; height: 64px; border-radius: 12px; flex: none; }
.current b { display: block; font-size: 1rem; }
.current span { font-size: .78rem; color: var(--muted); }
.fams { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.fams button { flex: none; font: 600 .76rem var(--font); background: none; border: 1px solid var(--line); color: var(--fg); border-radius: 980px; padding: .45em .9em; cursor: pointer; }
.fams button[aria-pressed="true"] { background: var(--fg); color: #fff; border-color: var(--fg); }
.fams button span { font-weight: 500; margin-left: 4px; opacity: .6; }
.search { width: 100%; font: 500 .9rem var(--font); background: var(--band); color: var(--fg); border: 1px solid transparent; border-radius: 12px; padding: .75em 1em; }
.search:focus { border-color: var(--accent); outline: none; background: #fff; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 12px 10px; max-height: 520px; overflow: auto; padding: 4px; margin: -4px; }
.sw { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; color: var(--fg); min-width: 0; }
.sw img { width: 100%; aspect-ratio: 1; border-radius: 12px; display: block; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); transition: transform .2s; }
.sw:hover img { transform: scale(1.04); }
.sw[aria-pressed="true"] img { outline: 2px solid var(--accent); outline-offset: 2px; }
.sw b { display: block; font-size: .72rem; font-weight: 600; line-height: 1.25; margin-top: 6px; }
.sw small { display: block; font-size: .64rem; color: var(--muted); }

/* Riepilogo nel configuratore */
.sum { background: var(--band); border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.sum .price { font-size: 2.3rem; font-weight: 700; letter-spacing: -.04em; line-height: 1.05; }
.sum .price small { font-size: .95rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.sum dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.sum dt { font-size: .72rem; color: var(--muted); font-weight: 600; }
.sum dd { margin: 0; font-weight: 600; }
.sum ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: .86rem; }
.sum li::before { content: "✓"; color: var(--ok); font-weight: 800; margin-right: 8px; }
.sum-rows { display: grid; gap: 0; border-top: 1px solid var(--line); }
.sum-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .82rem; }
.sum-row img { width: 30px; height: 30px; border-radius: 8px; }
.sum-row b { font-weight: 600; }
.sum-row span { color: var(--muted); }

/* Barra fissa in basso */
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: rgba(255, 255, 255, .86); backdrop-filter: saturate(1.8) blur(20px); -webkit-backdrop-filter: saturate(1.8) blur(20px); border-top: 1px solid rgba(0, 0, 0, .08); padding-bottom: env(safe-area-inset-bottom, 0px); transform: translateY(110%); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.buybar.on { transform: none; }
.buybar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 70px; padding-block: 10px; }
.buybar .what { min-width: 0; }
.buybar .what span { display: block; font-size: .76rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buybar .what strong { font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; }
.buybar .what em { font-style: normal; font-size: .78rem; color: var(--muted); margin-left: 6px; }

/* Sezioni */
section.band { background: var(--band); }
section.block { padding-block: clamp(70px, 10vw, 130px); }
.sec-title { text-align: center; max-width: 820px; margin: 0 auto 48px; }
.sec-title h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); font-weight: 700; line-height: 1.06; }
.sec-title p { color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.2rem); margin-top: 14px; font-weight: 500; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 960px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tiles { grid-template-columns: minmax(0, 1fr); } }
.tile { background: var(--card); border-radius: 24px; padding: 28px 24px; display: flex; flex-direction: column; gap: 10px; }
.band .tile { background: #fff; }
.tile .n { font-size: 2.6rem; font-weight: 700; letter-spacing: -.05em; color: var(--accent); line-height: 1; }
.tile h3 { font-size: 1.18rem; font-weight: 700; }
.tile p { font-size: .9rem; color: var(--muted); }
.compo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 960px) { .compo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .compo { grid-template-columns: minmax(0, 1fr); } }
.compo .tile svg { width: 100%; height: auto; background: var(--band); border-radius: 14px; }
.compo .chips .chip { font-size: .78rem; padding: .4em .85em; }
.compare-t { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tbl { overflow-x: auto; background: #fff; border-radius: 24px; }
.compare-t th, .compare-t td { padding: 18px 22px; text-align: left; border-top: 1px solid var(--line-soft); vertical-align: top; }
.compare-t thead th { border-top: 0; font-size: .8rem; color: var(--muted); font-weight: 600; }
.compare-t td:nth-child(2) { font-weight: 600; }
.compare-t td:nth-child(3) { color: var(--muted); }
.compare-t th[scope=row] { font-weight: 600; white-space: nowrap; }

/* ---------------- Prenotazione ---------------- */
.co-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); gap: 40px; align-items: start; }
@media (max-width: 960px) { .co-grid { grid-template-columns: minmax(0, 1fr); } }
.co-step { border-top: 1px solid var(--line-soft); padding-block: 28px; display: flex; flex-direction: column; gap: 14px; }
.co-step:first-child { border-top: 0; padding-top: 0; }
.co-step h3 { font-size: 1.4rem; font-weight: 700; display: flex; gap: 12px; align-items: baseline; }
.co-step h3 i { font-style: normal; font-size: .85rem; color: var(--muted); font-weight: 600; }
.co-step > p { color: var(--muted); font-size: .92rem; }
.cap-row { display: flex; gap: 10px; flex-wrap: wrap; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: .78rem; font-weight: 600; color: var(--muted); }
.field input, .field textarea, .field select { width: 100%; font: 500 1rem var(--font); background: #fff; color: var(--fg); border: 1px solid var(--line); border-radius: 12px; padding: .85em 1em; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field textarea { min-height: 96px; resize: vertical; }
.field.bad input { border-color: #d70015; }
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fgrid .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .fgrid { grid-template-columns: minmax(0, 1fr); } }
.cap-row .field { flex: 1; min-width: 160px; max-width: 220px; }
.drop { border: 2px dashed var(--line); border-radius: 18px; padding: 26px; text-align: center; cursor: pointer; transition: border-color .2s, background .2s; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-soft); }
.drop b { font-size: 1rem; }
.drop span { font-size: .82rem; color: var(--muted); }
.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.shots .need { font-size: .78rem; color: var(--muted); background: var(--band); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.shots .need b { color: var(--fg); font-size: .82rem; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.thumbs figure { margin: 0; position: relative; }
.thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; display: block; }
.thumbs button { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(29, 29, 31, .7); color: #fff; cursor: pointer; font-size: .9rem; line-height: 1; }
.weeks { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.week { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: #fff; cursor: pointer; text-align: left; color: var(--fg); }
.week b { display: block; font-size: .9rem; }
.week span { font-size: .74rem; color: var(--muted); }
.week[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.checks { display: grid; gap: 10px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .85rem; color: var(--fg); }
.check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.order { position: sticky; top: calc(var(--nav) + 20px); background: var(--band); border-radius: 26px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.order .shot { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 16px; background: #e8e8ed; display: block; }
.order h4 { font-size: 1.15rem; font-weight: 700; }
.order .lines { display: grid; gap: 8px; font-size: .88rem; }
.order .line { display: flex; justify-content: space-between; gap: 12px; }
.order .line span:first-child { color: var(--muted); }
.order .line.total { font-size: 1.05rem; font-weight: 700; border-top: 1px solid var(--line); padding-top: 10px; }
.order .line.total span:first-child { color: var(--fg); }
.order .line.dep { color: var(--accent); font-weight: 700; }
.order .line.dep span:first-child { color: var(--accent); }
.pay { display: flex; flex-direction: column; gap: 10px; }
#paypal-box { min-height: 0; }
.status { font-size: .88rem; }
.done { text-align: center; padding: 40px 20px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.done .big { width: 64px; height: 64px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; font-size: 1.8rem; }
.done h3 { font-size: 1.8rem; }

/* Footer */
footer.foot { background: var(--band); padding-block: 40px 30px; font-size: .78rem; color: var(--muted); padding-bottom: 110px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
@media (max-width: 860px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } }
.foot h4 { font-size: .78rem; font-weight: 600; color: var(--fg); margin: 0 0 10px; letter-spacing: 0; }
.foot a { display: block; color: var(--muted); margin: 6px 0; }
.foot a:hover { color: var(--fg); text-decoration: underline; }
.foot .mf { display: inline-block; color: var(--fg); font-weight: 600; margin-top: 12px; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 16px; }
.foot-bottom nav { display: flex; gap: 16px; flex-wrap: wrap; }
.foot-bottom a { display: inline; margin: 0; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ---------------- Icone e fotografie ---------------- */
.ic { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -.22em; }
.ib { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.ib .ic { width: 24px; height: 24px; }
.ib.dark { background: var(--fg); color: #fff; }
.ph { background: linear-gradient(135deg, #ecebe7, #dcd8d0); position: relative; overflow: hidden; }
.ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.facts .ic { width: 22px; height: 22px; color: var(--accent); margin-bottom: 8px; }

/* galleria ispirazioni */
.gallery { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 34%); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: none; }
.gallery::-webkit-scrollbar { display: none; }
@media (max-width: 700px) { .gallery { grid-auto-columns: 82%; } }
.gal { scroll-snap-align: start; border-radius: 26px; aspect-ratio: 4 / 5; color: #fff; }
.gal figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 22px 22px; background: linear-gradient(to top, rgba(0, 0, 0, .62), transparent); }
.gal figcaption b { display: block; font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; }
.gal figcaption span { font-size: .82rem; opacity: .9; }
.gal-nav { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.gal-nav button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--band); cursor: pointer; display: grid; place-items: center; color: var(--fg); }
.gal-nav button:hover { background: var(--line-soft); }
.note-foto { font-size: .74rem; color: var(--muted); margin-top: 10px; }

/* tile con foto */
.tile.photo { padding: 0; overflow: hidden; }
.tile.photo .ph { aspect-ratio: 4 / 3; }
.tile.photo .tb { padding: 22px 22px 26px; display: flex; flex-direction: column; gap: 8px; }
.tile .head { display: flex; align-items: center; gap: 12px; }

/* materie */
.mats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 960px) { .mats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mat { border-radius: 26px; aspect-ratio: 3 / 4; color: #fff; cursor: pointer; border: 0; padding: 0; text-align: left; font-family: var(--font); }
.mat .ov { position: absolute; top: auto; right: 0; bottom: 0; left: 0; padding: 70px 20px 20px; background: linear-gradient(to top, rgba(0, 0, 0, .6), transparent); display: flex; flex-direction: column; gap: 2px; }
.mat .ov b { font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; }
.mat .ov span { font-size: .8rem; opacity: .9; }
.mat .ov em { font-style: normal; font-size: .8rem; font-weight: 600; margin-top: 8px; display: inline-flex; gap: 4px; align-items: center; }
.mat:hover img { transform: scale(1.04); }
.mat img { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }

/* due colonne foto + testo */
.split2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
@media (max-width: 900px) { .split2 { grid-template-columns: minmax(0, 1fr); } }
.split2 > .ph { border-radius: 28px; min-height: 360px; }
.glist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 520px) { .glist { grid-template-columns: minmax(0, 1fr); } }
.glist .tile { gap: 12px; }
.compare-t th[scope=row] .ic { color: var(--accent); margin-right: 8px; }
.co-step h3 .ic { color: var(--accent); }

/* ---------------- Superfici e finiture ---------------- */
.surfaces { display: flex; flex-direction: column; gap: 12px; }
.sgroup { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line); border-radius: 18px; padding: 8px; }
.sgl { font-size: .8rem; font-weight: 700; padding: 6px 8px 0; }
.sgroup > .chips { padding: 0 6px 4px; }
.srow { border-radius: 22px; border: 1px solid var(--line); background: #fff; overflow: hidden; }
.srow.open { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.shead { width: 100%; display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 16px; align-items: center; background: none; border: 0; padding: 12px; text-align: left; cursor: pointer; color: var(--fg); font-family: var(--font); }
.shead img { width: 84px; height: 84px; border-radius: 16px; object-fit: cover; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.shead .st { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.shead .st small:first-child { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.shead b { font-size: 1.12rem; font-weight: 800; line-height: 1.15; }
.shead em { font-style: normal; font-size: .78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shead small { font-size: .72rem; color: var(--muted); }
.shead .chev { font-size: .82rem; font-weight: 700; color: #fff; background: var(--accent); padding: 10px 16px; border-radius: 999px; white-space: nowrap; }
.srow.open .shead .chev { background: var(--fg); }
@media (max-width: 480px) { .shead { grid-template-columns: 64px minmax(0, 1fr); } .shead img { width: 64px; height: 64px; } .shead .chev { grid-column: 1 / -1; text-align: center; padding: 11px; } }
.picker { padding: 4px 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.picker .swatches { max-height: 380px; }
.tog.small { padding: 8px 12px; font-size: .84rem; border: 0; background: transparent; }
.tog.small input { width: 40px; height: 24px; }
.tog.small input::after { width: 20px; height: 20px; }
.tog.small input:checked::after { transform: translateX(16px); }
.sum-row.tot { grid-template-columns: 0 minmax(0, 1fr) auto; font-size: .86rem; }
.sum-row.tot b { font-weight: 600; }

/* ---------------- Titoli in stampatello ---------------- */
h1, h2, h3, .opts-head h2, .sec-title h2 { text-transform: uppercase; letter-spacing: -.01em; }
.hero h1 { font-size: clamp(2.2rem, 6.2vw, 4.6rem); line-height: 1.04; }
.sec-title h2, .why h2, .opts-head h2 { line-height: 1.1; }
.step h3, .co-step h3, .tile h3, .card h3, .level h3, .signup h3 { font-size: 1.05rem; letter-spacing: .01em; }
.step h3 span { text-transform: none; letter-spacing: 0; }

/* ---------------- Su misura: distinta dei pezzi ---------------- */
#distinta { display: flex; flex-direction: column; gap: 12px; }
.dist-intro { background: var(--accent-soft); border-radius: 14px; padding: 12px 14px; font-size: .82rem; line-height: 1.45; display: flex; flex-direction: column; gap: 3px; }
.dist-intro b { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.dist-intro em { font-style: normal; font-weight: 700; }
.dsec { border: 1px solid var(--line); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.dsec-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.dsec-h b { font-size: .84rem; text-transform: uppercase; letter-spacing: .04em; }
.dsec-h span { font-size: .76rem; font-weight: 700; color: var(--accent); white-space: nowrap; }
.dhint { font-size: .74rem; color: var(--muted); line-height: 1.4; margin-bottom: 4px; }
.drow { display: grid; grid-template-columns: minmax(0, 1.25fr) 46px auto minmax(0, 1fr) auto minmax(0, 1fr) 26px; gap: 5px; align-items: center; }
.drow .dx { font-size: .78rem; color: var(--muted); font-weight: 500; }
.drow.dhead span { font-size: .66rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.drow select, .drow input { width: 100%; min-width: 0; font: 500 .86rem var(--font); color: var(--fg); background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: .5em .55em; }
.drow select { padding-right: 1.6em; appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236e6e73' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right .55em center; }
.drow input { text-align: center; -moz-appearance: textfield; }
.drow input::-webkit-inner-spin-button, .drow input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.drow select:focus, .drow input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.drow.lat select { background-color: var(--warn-soft); border-color: #ecd3a6; }
.ddel { width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--band); color: var(--muted); font-size: 1rem; cursor: pointer; line-height: 1; }
.ddel:hover { background: var(--line-soft); color: var(--fg); }
.dadd { align-self: flex-start; background: none; border: 0; padding: 6px 0 0; font: 600 .82rem var(--font); color: var(--accent); cursor: pointer; }
.btn-pdf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-pdf svg { width: 18px; height: 18px; }

/* ---------------- Sfumature ----------------
   Tre luci morbide: blu (accento), sabbia (legno) e salvia (materia).
   Toni molto bassi per restare chiari, stile Apple. */
:root {
  --glow-blu: rgba(0, 113, 227, .14);
  --glow-sabbia: rgba(214, 168, 116, .22);
  --glow-salvia: rgba(122, 160, 136, .16);
  --grad-band: linear-gradient(180deg, #f5f5f7 0%, #f1f2f5 100%);
  --grad-line: linear-gradient(90deg, transparent, rgba(0, 113, 227, .35) 30%, rgba(214, 168, 116, .45) 70%, transparent);
}
.hero {
  background:
    radial-gradient(42% 60% at 14% 6%, var(--glow-blu), transparent 72%),
    radial-gradient(40% 55% at 88% 12%, var(--glow-sabbia), transparent 72%),
    radial-gradient(36% 50% at 55% 70%, var(--glow-salvia), transparent 75%);
}
section.band {
  background:
    radial-gradient(50% 40% at 100% 0%, var(--glow-sabbia), transparent 70%),
    radial-gradient(45% 40% at 0% 100%, var(--glow-blu), transparent 70%),
    var(--grad-band);
}
.btn-primary { background: linear-gradient(180deg, #1a86f2 0%, #0071e3 100%); box-shadow: 0 6px 16px -8px rgba(0, 113, 227, .7); }
.btn-primary:hover { background: linear-gradient(180deg, #2a90f5 0%, #0077ed 100%); }
.btn-primary:disabled { background: var(--line); box-shadow: none; }
.sum, .order {
  background:
    radial-gradient(70% 50% at 100% 0%, rgba(0, 113, 227, .08), transparent 70%),
    radial-gradient(60% 45% at 0% 100%, rgba(214, 168, 116, .12), transparent 70%),
    var(--grad-band);
}
.sum .price { background: linear-gradient(100deg, #1d1d1f 40%, #0058b8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sum .price small { -webkit-text-fill-color: var(--muted); }
.dist-intro { background: linear-gradient(120deg, #e8f2fd 0%, #f3ede4 100%); }
.buybar::before, footer.foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--grad-line); }
footer.foot {
  position: relative;
  background:
    radial-gradient(60% 110% at 0% 100%, rgba(214, 168, 116, .34), transparent 70%),
    radial-gradient(55% 110% at 100% 100%, rgba(0, 113, 227, .22), transparent 70%),
    radial-gradient(45% 90% at 55% 115%, rgba(122, 160, 136, .26), transparent 72%),
    linear-gradient(180deg, #f7f7f9 0%, #edeff3 100%);
}
.stage { background: radial-gradient(80% 70% at 50% 35%, #fbfbfd 0%, #eceef2 100%); }

/* ---------------- Slide della home: a tutta larghezza, con il titolo dentro ---------------- */
.hero { padding: 0; background: none; text-align: left; }
.hero .facts { margin-top: clamp(28px, 4vw, 44px); }
.hero-slider { position: relative; height: min(calc(100vh - var(--nav)), 900px); height: min(calc(100svh - var(--nav)), 900px); min-height: 580px; overflow: hidden; isolation: isolate; background: linear-gradient(135deg, #3a3f48, #8c8478); touch-action: pan-y; }
.hs-track { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.hs-slide { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0; opacity: 0; transition: opacity 1.2s cubic-bezier(.4, 0, .2, 1); background: transparent; }
.hs-slide.is-on { opacity: 1; z-index: 1; }
.hs-slide img { transform: scale(1.08); transition: transform 8s cubic-bezier(.2, .6, .3, 1); will-change: transform; }
.hs-slide.is-on img { transform: scale(1); }
.hs-slide::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(8, 10, 16, .66) 0%, rgba(8, 10, 16, .34) 42%, rgba(8, 10, 16, 0) 72%), linear-gradient(0deg, rgba(8, 10, 16, .5) 0%, rgba(8, 10, 16, 0) 38%), linear-gradient(180deg, rgba(8, 10, 16, .25) 0%, rgba(8, 10, 16, 0) 22%); }
.hero-in { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; display: flex; align-items: center; pointer-events: none; color: #fff; }
.hero-in .wrap { width: 100%; }
.hero-in .wrap > * { pointer-events: auto; }
.hero-in .eyebrow { color: rgba(255, 255, 255, .86); font-size: 1rem; font-weight: 600; }
.hero .hero-in h1 { background: none; -webkit-text-fill-color: #fff; color: #fff; text-align: left; max-width: none; font-size: clamp(2.6rem, 5.2vw, 5rem); line-height: 1.02; margin-top: 12px; text-shadow: 0 2px 30px rgba(0, 0, 0, .22); }
.hero-in .lead { color: rgba(255, 255, 255, .9); margin: 20px 0 0; max-width: 34ch; text-align: left; }
.hero-in .ctas { justify-content: flex-start; margin-top: 30px; }
.btn-glass { background: rgba(255, 255, 255, .16); color: #fff !important; border: 1px solid rgba(255, 255, 255, .38); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.btn-glass:hover { background: rgba(255, 255, 255, .26); }
.hs-cap { position: absolute; right: clamp(18px, 4vw, 56px); bottom: 92px; z-index: 3; width: min(340px, calc(100% - 36px)); color: #fff; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 18px; border-radius: 22px; background: rgba(14, 17, 24, .34); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); }
.hs-cap > * { opacity: 0; transform: translateY(10px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.hs-slide.is-on .hs-cap > * { opacity: 1; transform: none; }
.hs-slide.is-on .hs-cap > :nth-child(2) { transition-delay: .1s; } .hs-slide.is-on .hs-cap > :nth-child(3) { transition-delay: .18s; } .hs-slide.is-on .hs-cap > :nth-child(4) { transition-delay: .26s; }
.hs-eye { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.hs-cap b { font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; }
.hs-txt { font-size: .86rem; font-weight: 500; color: rgba(255, 255, 255, .88); line-height: 1.4; }
.hs-try { margin-top: 8px; display: inline-flex; align-items: center; gap: 4px; font: 600 .84rem var(--font); color: var(--fg); background: rgba(255, 255, 255, .92); border: 0; border-radius: 980px; padding: .6em 1em .6em 1.15em; cursor: pointer; transition: background .2s, transform .2s; }
.hs-try:hover { background: #fff; transform: translateY(-1px); }
.hs-try .ic { width: 16px; height: 16px; }
.hs-nav { position: absolute; top: 50%; z-index: 3; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .16); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: #fff; display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .25s, background .2s; }
.hs-nav .ic { width: 22px; height: 22px; }
.hs-prev { left: 14px; } .hs-prev .ic { transform: rotate(180deg); }
.hs-next { right: 14px; }
.hero-slider:hover .hs-nav, .hs-nav:focus-visible { opacity: 1; }
.hs-nav:hover { background: rgba(255, 255, 255, .3); }
.hs-bar { position: absolute; z-index: 3; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 14px; border-radius: 980px; background: rgba(14, 17, 24, .32); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); }
.hs-dots { display: flex; gap: 6px; }
.hs-dot { position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 980px; background: rgba(255, 255, 255, .45); cursor: pointer; overflow: hidden; transition: width .4s cubic-bezier(.2, .8, .2, 1), background .3s; }
.hs-dot[aria-current="true"] { width: 34px; background: rgba(255, 255, 255, .35); }
.hs-dot i { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 0; background: #fff; border-radius: inherit; }
.hs-dot[aria-current="true"] i { animation: hs-fill var(--hs-durata, 6s) linear forwards; }
.hero-slider.paused .hs-dot[aria-current="true"] i { animation-play-state: paused; }
.hero-slider.stopped .hs-dot[aria-current="true"] i { animation: none; width: 100%; }
@keyframes hs-fill { to { width: 100%; } }
.hs-pause { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff; display: grid; place-items: center; cursor: pointer; }
.hs-pause svg { width: 12px; height: 12px; fill: currentColor; }
.hs-pause .i-pl, .hero-slider.stopped .hs-pause .i-pa { display: none; }
.hero-slider.stopped .hs-pause .i-pl { display: inline; }
@media (max-width: 760px) {
  .hero-slider { height: min(calc(100vh - var(--nav)), 760px); height: min(calc(100svh - var(--nav)), 760px); min-height: 600px; }
  .hero-in { align-items: flex-start; padding-top: clamp(36px, 9vh, 72px); }
  .hs-slide::after { background: linear-gradient(180deg, rgba(8, 10, 16, .62) 0%, rgba(8, 10, 16, .25) 45%, rgba(8, 10, 16, .55) 100%); }
  .hero .hero-in h1 { font-size: clamp(1.9rem, 9vw, 3rem); }
  .hero-in .lead { font-size: 1.02rem; }
  .hero-in .ctas { gap: 10px; }
  .hero-in .ctas .btn { padding-inline: 1.1em; }
  .hs-cap { left: 16px; right: 16px; width: auto; bottom: 74px; padding: 12px 14px; flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 10px; }
  .hs-cap b { font-size: 1rem; flex: 1 1 auto; }
  .hs-eye { width: 100%; }
  .hs-txt { display: none; }
  .hs-try { margin-top: 0; }
  .hs-nav { display: none; }
  .hs-bar { bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-slide, .hs-slide img, .hs-cap > * { transition: none !important; }
  .hs-slide img { transform: none !important; }
}

/* ---------------- Configuratore a passi ---------------- */
.wiz { list-style: none; margin: 18px 0 4px; padding: 4px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; background: var(--band); border-radius: 16px; position: sticky; top: calc(var(--nav) + 8px); z-index: 5; box-shadow: 0 8px 20px -16px rgba(0, 0, 0, .4); }
@media (max-width: 980px) { .wiz { position: static; } }
.wiz button { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 4px; border: 0; border-radius: 12px; background: none; font: 600 .74rem var(--font); color: var(--muted); cursor: pointer; transition: background .2s, color .2s; }
.wiz button i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .76rem; background: #fff; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.wiz button.done i { background: var(--ok-soft); color: var(--ok); box-shadow: none; }
.wiz button[aria-current="step"] { background: #fff; color: var(--fg); box-shadow: 0 2px 8px -4px rgba(0, 0, 0, .25); }
.wiz button[aria-current="step"] i { background: var(--accent); color: #fff; box-shadow: none; }
.pane { display: flex; flex-direction: column; }
.pane > .step:first-child { border-top: 0; }
.pane-nav { display: flex; justify-content: space-between; gap: 10px; padding: 18px 0 8px; border-top: 1px solid var(--line-soft); }
.pane-nav .btn-primary { flex: 1 1 auto; max-width: 280px; margin-left: auto; }
.pane-nav .ic { width: 18px; height: 18px; }
.pg-cfg .cfg { padding-top: 24px; }

/* ---------------- Home ---------------- */
.kicker { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.sec-cta { margin-top: 14px; }
.ctas.center { justify-content: center; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pillar { position: relative; border-radius: 28px; padding: 32px 28px 30px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; border: 1px solid var(--line-soft);
  background: radial-gradient(90% 70% at 100% 0%, var(--pg, rgba(0, 113, 227, .10)), transparent 70%), linear-gradient(180deg, #fff, #f7f7f9); }
.pillar.p-materia { --pg: rgba(214, 168, 116, .26); }
.pillar.p-metodo { --pg: rgba(0, 113, 227, .16); }
.pillar.p-mani { --pg: rgba(122, 160, 136, .24); }
.pillar .pk { font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.pillar h3 { font-size: 1.35rem; font-weight: 700; line-height: 1.15; }
.pillar p:last-child { color: var(--muted); font-size: .95rem; }
.forme-alt { text-align: center; margin-top: 28px; font-weight: 500; color: var(--muted); }
.forme-alt a { font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.forme-alt .ic { width: 16px; height: 16px; }
a.chip { display: inline-block; text-decoration: none !important; }
a.chip:hover { border-color: var(--accent); color: var(--accent); }
a.mat { display: block; position: relative; text-decoration: none !important; }
.dark-band { color: #fff; background:
  radial-gradient(50% 80% at 0% 0%, rgba(0, 113, 227, .35), transparent 70%),
  radial-gradient(45% 80% at 100% 100%, rgba(214, 168, 116, .30), transparent 70%),
  linear-gradient(160deg, #15171c 0%, #23262d 100%); }
.dark-band h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); font-weight: 700; line-height: 1.06; }
.dark-band p { color: rgba(255, 255, 255, .78); font-size: 1.08rem; margin-top: 16px; max-width: 46ch; }
.dark-band .kicker { color: #8fc2ff; }
.dark-band .ctas { display: flex; margin-top: 30px; }
.pd-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 80px); align-items: center; }
.pd-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pd-steps li { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; border-radius: 22px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(8px); }
.pd-steps span { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: #fff; color: var(--fg); }
.pd-steps b { display: block; font-size: 1.02rem; margin-bottom: 2px; }
.pd-steps div { color: rgba(255, 255, 255, .72); font-size: .92rem; }
.price-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.pcard { border-radius: 26px; padding: 30px 26px; background: var(--grad-band); display: flex; flex-direction: column; gap: 10px; }
.pcard h3 { font-size: 1.2rem; font-weight: 700; }
.pcard p { color: var(--muted); font-size: .94rem; }
.pcard .big { color: var(--fg); font-size: 1.6rem; letter-spacing: -.02em; }
.band .pcard { background: #fff; }
.band .pcard.alt { background: linear-gradient(150deg, #fff 0%, #f3ede4 100%); border: 1px solid #ece3d6; }
.pcard .link { margin-top: auto; font-size: .95rem; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.pcard .link::after, .forme-alt a::after, .sec-cta .link::after { content: none; }
.pcard .link .ic, .sec-cta .ic { width: 16px; height: 16px; }
.sec-cta .link { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.pplus { align-self: center; font-size: 2rem; font-weight: 300; color: var(--muted); }
.rete-card { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: clamp(28px, 5vw, 56px); border-radius: 32px; color: #fff;
  background: radial-gradient(60% 120% at 100% 0%, rgba(122, 160, 136, .45), transparent 70%), radial-gradient(60% 120% at 0% 100%, rgba(0, 113, 227, .35), transparent 70%), linear-gradient(140deg, #1d2128, #2b2f36); }
.rete-card h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 700; line-height: 1.1; max-width: 22ch; }
.rete-card p { color: rgba(255, 255, 255, .78); margin-top: 12px; max-width: 56ch; }
.rete-card .kicker { color: #b9e0c6; }
.rete-card .btn { flex: none; }
.rete-card .btn .ic { width: 18px; height: 18px; }
.final-cta { text-align: center; padding-block: clamp(80px, 12vw, 150px); background:
  radial-gradient(40% 70% at 20% 30%, var(--glow-blu), transparent 70%),
  radial-gradient(40% 70% at 80% 40%, var(--glow-sabbia), transparent 70%),
  radial-gradient(40% 60% at 50% 100%, var(--glow-salvia), transparent 70%); }
.final-cta h2 { font-size: clamp(2.2rem, 5.6vw, 4.4rem); font-weight: 700; line-height: 1.04; max-width: 16ch; margin: 0 auto; }
.final-cta p { color: var(--muted); font-size: 1.15rem; margin-top: 16px; }
.btn-glass.dark { color: var(--fg) !important; background: rgba(255, 255, 255, .7); border-color: var(--line); }
.btn-glass.dark:hover { background: #fff; }
#garanzie { padding-top: 0; }
@media (max-width: 960px) {
  .pillars { grid-template-columns: minmax(0, 1fr); }
  .pd-grid { grid-template-columns: minmax(0, 1fr); }
  .price-grid { grid-template-columns: minmax(0, 1fr); }
  .pplus { justify-self: center; line-height: 1; margin: -6px 0; }
  .rete-card { flex-direction: column; align-items: flex-start; }
}
.dark-band h2, .rete-card h2, .hero-in h1 { color: #fff; }

/* ---------------- Su misura semplice ---------------- */
ol.dist-intro { list-style: none; margin: 0; padding: 14px; display: grid; gap: 8px; border-radius: 16px; background: linear-gradient(120deg, #e8f2fd 0%, #f3ede4 100%); }
ol.dist-intro li { display: flex; gap: 10px; align-items: center; font-size: .86rem; line-height: 1.35; }
ol.dist-intro i { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 .72rem var(--font); background: var(--accent); color: #fff; }
.dist-unit { font-size: .76rem; color: var(--muted); margin: -2px 0 2px; }
.dsec { transition: border-color .25s, box-shadow .25s; }
.dsec.ok { border-color: #b9dcc6; box-shadow: 0 0 0 3px rgba(26, 127, 69, .06); }
.dok { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 8px; border-radius: 50%; font-style: normal; font-size: .62rem; background: var(--line-soft); color: transparent; vertical-align: 1px; transition: background .25s, color .25s; }
.dsec.ok .dok { background: var(--ok); color: #fff; }
.drow input::placeholder { color: #b0b0b5; font-weight: 500; }
.empty-hint { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(340px, calc(100% - 40px)); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 20px; border-radius: 22px; background: rgba(255, 255, 255, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .35); pointer-events: none; }
.empty-hint b { font-size: 1rem; text-transform: uppercase; letter-spacing: .02em; }
.empty-hint > span:last-child { font-size: .84rem; color: var(--muted); line-height: 1.4; }

/* ---------------- Home: box "Costruisci la tua cucina" ---------------- */
.build-sec { padding-top: clamp(40px, 6vw, 70px); }
.build-box { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(28px, 5vw, 60px); border-radius: 34px; color: #fff;
  background: radial-gradient(60% 90% at 100% 100%, rgba(226, 178, 122, .85), transparent 65%), radial-gradient(55% 80% at 0% 0%, rgba(30, 140, 255, .9), transparent 70%), linear-gradient(125deg, #0a4fc2 0%, #2a66d9 45%, #6f86c9 75%, #c79a6c 100%);
  box-shadow: 0 40px 80px -40px rgba(10, 60, 160, .55); }
.build-box::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: radial-gradient(40% 50% at 60% 0%, rgba(255, 255, 255, .18), transparent 70%); pointer-events: none; }
.build-txt { position: relative; z-index: 1; }
.build-box .kicker { color: #cfe4ff; }
.build-box h2 { color: #fff; font-size: clamp(2rem, 4.2vw, 3.4rem); font-weight: 700; line-height: 1.04; }
.build-box p { color: rgba(255, 255, 255, .88); font-size: 1.06rem; margin-top: 16px; max-width: 48ch; }
.build-pts { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.build-pts li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .95rem; }
.build-pts .ic { width: 20px; height: 20px; flex: none; padding: 6px; box-sizing: content-box; border-radius: 10px; background: rgba(255, 255, 255, .16); }
.build-box .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn-white { background: #fff; color: var(--fg) !important; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .45); }
.btn-white:hover { background: #f5f5f7; transform: translateY(-1px); }
.btn-white .ic { width: 18px; height: 18px; }
.build-art { position: relative; z-index: 1; border-radius: 26px; padding: 18px; background: rgba(255, 255, 255, .9); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .45); }
.kb { display: block; width: 100%; height: auto; }
.kb-floor { stroke: #d2d2d7; stroke-width: 2; }
.kb-d { fill: #fff; stroke: #c7c7cc; stroke-width: 1.5; }
.kb line { stroke: #8e8e93; stroke-width: 2; stroke-linecap: round; }
.kb-top { fill: #e5e2dc; stroke: #c7c7cc; stroke-width: 1.2; }
.kb-m, .kb-p, .kb-top, .kb-dim, .kb-tag { transform-box: fill-box; transform-origin: 50% 100%; animation-duration: 10s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
.kb-m { animation-name: kb-in; animation-delay: calc(var(--i) * .32s); }
.kb-top { animation-name: kb-top; animation-delay: 1.7s; transform-origin: 0 50%; }
.kb-p { animation-name: kb-drop; animation-delay: calc(2.2s + var(--i) * .25s); transform-origin: 50% 0; }
.kb-dim { animation-name: kb-fade; animation-delay: 2.1s; }
.kb-dim line { stroke: var(--accent); stroke-width: 1.5; }
.kb-dim rect, .kb-tag rect { fill: var(--accent); }
.kb text { fill: #fff; font: 700 11px var(--font); text-anchor: middle; }
.kb-tag { animation-name: kb-tag; animation-delay: .2s; }
.kb-m .kb-d { animation: kb-fin 10s infinite; animation-delay: calc(var(--i) * .32s); }
.kb-p .kb-d { animation: kb-fin2 10s infinite; animation-delay: calc(2.2s + var(--i) * .25s); }
@keyframes kb-in { 0% { opacity: 0; transform: translateY(14px) scaleY(.6); } 6%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes kb-top { 0% { opacity: 0; transform: scaleX(0); } 7%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
@keyframes kb-drop { 0% { opacity: 0; transform: translateY(-14px); } 6%, 86% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; } }
@keyframes kb-fade { 0%, 2% { opacity: 0; } 8%, 40% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes kb-tag { 0%, 3% { opacity: 0; transform: scale(.7); } 8%, 22% { opacity: 1; transform: none; } 27%, 100% { opacity: 0; } }
@keyframes kb-fin { 0%, 42% { fill: #fff; } 50%, 66% { fill: #c79d70; } 72%, 100% { fill: #9fb4a5; } }
@keyframes kb-fin2 { 0%, 40% { fill: #fff; } 48%, 64% { fill: #ece7df; } 70%, 100% { fill: #f4f1ec; } }
@media (max-width: 900px) { .build-box { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .kb * { animation: none !important; opacity: 1 !important; transform: none !important; } .kb-tag { display: none; } }

/* ---------------- Home: forme in schede stile Apple ---------------- */
.fcards-wrap { --pad: max(var(--gut), calc((100vw - 1280px) / 2 + var(--gut))); }
.fcards { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(270px, 26vw, 340px); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); padding: 6px var(--pad) 30px; scrollbar-width: none; outline: none; }
.fcards::-webkit-scrollbar { display: none; }
.fcard { position: relative; scroll-snap-align: start; display: flex; flex-direction: column; min-height: 520px; border-radius: 30px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .03), 0 18px 40px -26px rgba(0, 0, 0, .35); transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
.fcard:hover { transform: translateY(-4px) scale(1.01); box-shadow: 0 2px 4px rgba(0, 0, 0, .03), 0 30px 60px -30px rgba(0, 0, 0, .45); }
.fcard-link { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; }
.fc-top { padding: 28px 26px 18px; display: flex; flex-direction: column; gap: 6px; }
.fc-eye { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fcard h3 { font-size: 1.75rem; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
.fc-txt { font-size: .95rem; color: var(--muted); line-height: 1.4; }
.fc-lens { position: relative; z-index: 2; display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.fc-lens a { font: 600 .8rem var(--font); color: var(--fg); background: var(--band); border-radius: 980px; padding: .45em .95em; text-decoration: none !important; transition: background .2s, color .2s; }
.fc-lens a:hover { background: var(--fg); color: #fff; }
.fc-img { position: relative; flex: 1 1 auto; min-height: 250px; margin-top: auto; }
.fc-img img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.fcard:hover .fc-img img { transform: scale(1.05); }
.fc-img .plan { position: absolute; z-index: 1; right: 14px; bottom: 14px; width: 92px; height: auto; padding: 8px; border-radius: 14px; background: rgba(255, 255, 255, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .3); }
.fnav { display: flex; gap: 10px; justify-content: flex-end; margin: 0 0 clamp(40px, 6vw, 70px); }
.fnav button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .3); cursor: pointer; display: grid; place-items: center; color: var(--fg); }
.fnav button:hover { background: var(--fg); color: #fff; }
.fnav .ic { width: 20px; height: 20px; }

/* ---------------- Home: "questa cucina non esiste ancora" ---------------- */
.bp-box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(28px, 5vw, 56px); border-radius: 34px; color: #fff; overflow: hidden;
  background: radial-gradient(60% 80% at 100% 0%, rgba(79, 140, 255, .35), transparent 70%), linear-gradient(150deg, #0c2347 0%, #10305f 55%, #173a6e 100%); box-shadow: 0 40px 80px -40px rgba(8, 30, 70, .7); }
.bp-box h2 { color: #fff; font-size: clamp(1.9rem, 3.8vw, 3rem); font-weight: 700; line-height: 1.05; }
.bp-box p { color: rgba(255, 255, 255, .82); font-size: 1.04rem; margin-top: 14px; max-width: 46ch; }
.bp-box .kicker { color: #9cc4ff; }
.bp-box .ctas { display: flex; margin-top: 26px; }
.bp-art { border-radius: 24px; overflow: hidden; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12); }
.bp { display: block; width: 100%; height: auto; }
.bp-floor { stroke: rgba(255, 255, 255, .5); stroke-width: 1.5; }
.bp-m, .bp-p, .bp-col, .bp-top { fill: transparent; stroke: rgba(255, 255, 255, .85); stroke-width: 1.6; stroke-dasharray: 6 5; animation: bp-dash 1.6s linear infinite; }
.bp-dim line { stroke: #9cc4ff; stroke-width: 1.4; }
.bp-tag rect { fill: #fff; }
.bp-tag text { font: 700 11px var(--font); text-anchor: middle; }
.bp-tag .q { fill: #0c2347; animation: bp-q 9s infinite; animation-delay: calc(var(--i) * .5s); }
.bp-tag .v { fill: #0a5bd3; opacity: 0; animation: bp-v 9s infinite; animation-delay: calc(var(--i) * .5s); }
.bp-tag rect { animation: bp-r 9s infinite; animation-delay: calc(var(--i) * .5s); }
.bp-m { animation: bp-dash 1.6s linear infinite, bp-fill 9s infinite; animation-delay: 0s, calc((var(--i) + 1) * .5s); }
.bp-top { animation: bp-dash 1.6s linear infinite, bp-fill-top 9s infinite; }
.bp-col { animation: bp-dash 1.6s linear infinite, bp-fill 9s infinite; animation-delay: 0s, 2.5s; }
.bp-p { animation: bp-dash 1.6s linear infinite, bp-fill-p 9s infinite; animation-delay: 0s, calc(3s + var(--i) * .3s); }
@keyframes bp-dash { to { stroke-dashoffset: -22; } }
@keyframes bp-q { 0%, 10% { opacity: 1; } 14%, 86% { opacity: 0; } 92%, 100% { opacity: 1; } }
@keyframes bp-v { 0%, 12% { opacity: 0; } 16%, 84% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes bp-r { 0%, 10% { fill: #fff; } 16%, 84% { fill: #e8f2fd; } 92%, 100% { fill: #fff; } }
@keyframes bp-fill { 0%, 14% { fill: rgba(255, 255, 255, 0); stroke-dasharray: 6 5; } 22%, 80% { fill: #c9a27a; stroke: #c9a27a; stroke-dasharray: none; } 90%, 100% { fill: rgba(255, 255, 255, 0); stroke: rgba(255, 255, 255, .85); } }
@keyframes bp-fill-top { 0%, 12% { fill: rgba(255, 255, 255, 0); } 20%, 82% { fill: #ece9e3; stroke: #ece9e3; stroke-dasharray: none; } 90%, 100% { fill: rgba(255, 255, 255, 0); } }
@keyframes bp-fill-p { 0%, 14% { fill: rgba(255, 255, 255, 0); } 22%, 78% { fill: #f2efe9; stroke: #f2efe9; stroke-dasharray: none; } 88%, 100% { fill: rgba(255, 255, 255, 0); } }
@media (max-width: 900px) { .bp-box { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .bp * { animation: none !important; } }

/* =====================================================================
   Home minimal: "La cucina nuova ce l'hai già."
   ===================================================================== */
nav.main a[aria-current="page"] { color: var(--fg); font-weight: 600; }
.btn-lg { font-size: 1.05rem; padding: .9em 1.8em; }
.btn-xl { font-size: 1.15rem; padding: 1em 2.1em; font-weight: 600; }
.btn-xl .ic { width: 20px; height: 20px; transition: transform .25s; }
.btn-xl:hover .ic { transform: translateX(3px); }
.pg-home .intro { position: relative; min-height: calc(100vh - var(--nav)); min-height: calc(100svh - var(--nav)); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
  background: radial-gradient(40% 40% at 18% 12%, var(--glow-blu), transparent 70%), radial-gradient(38% 40% at 85% 18%, var(--glow-sabbia), transparent 70%); }
.intro-in { text-align: center; padding-top: clamp(56px, 11vh, 120px); }
.intro-in h1 { font-size: clamp(2.8rem, 8.4vw, 7.2rem); font-weight: 800; line-height: .98; letter-spacing: -.035em; text-transform: none;
  background: linear-gradient(100deg, #1d1d1f 30%, #3d4d63 65%, #8a6a48 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.intro-sub { font-size: clamp(1.3rem, 2.6vw, 2rem); font-weight: 600; color: var(--muted); margin-top: 18px; letter-spacing: -.01em; }
.intro-in .btn-xl { margin-top: 38px; }
.intro-trust { margin-top: 18px; font-size: .86rem; color: var(--muted); font-weight: 500; }
.intro-img { margin: clamp(40px, 7vh, 70px) auto 0; width: min(1280px, calc(100% - 2 * var(--gut))); height: clamp(200px, 34vh, 420px); border-radius: 32px 32px 0 0; flex: none; }
.intro-img img { object-position: 50% 62%; }
.intro-in > * { animation: intro-up .9s cubic-bezier(.2, .8, .2, 1) both; }
.intro-in > :nth-child(2) { animation-delay: .12s; } .intro-in > :nth-child(3) { animation-delay: .24s; } .intro-in > :nth-child(4) { animation-delay: .34s; }
.intro-img { animation: intro-up 1.1s .3s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes intro-up { from { opacity: 0; transform: translateY(24px); } }
.pg-home footer.foot { padding-bottom: 40px; }

/* ---------- sequenza a tutto schermo ---------- */
html.flow-open, html.flow-open body { overflow: hidden; }
.flow { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 200; background: #fff; display: grid; grid-template-rows: auto 1fr; opacity: 0; transition: opacity .35s ease; }
.flow.in { opacity: 1; }
.flow-bar { display: flex; align-items: center; justify-content: space-between; padding: 14px clamp(14px, 3vw, 28px); position: relative; z-index: 5; }
.flow-back, .flow-x { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--band); color: var(--fg); display: grid; place-items: center; cursor: pointer; font-size: 1.5rem; line-height: 1; }
.flow-back .ic { width: 20px; height: 20px; }
.flow-back:hover, .flow-x:hover { background: var(--line-soft); }
.flow-dots { display: flex; gap: 6px; }
.flow-dots i { width: 28px; height: 4px; border-radius: 4px; background: var(--line-soft); transition: background .4s; }
.flow-dots i.on { background: var(--fg); }
.fstep { grid-row: 2; grid-column: 1; overflow-y: auto; display: flex; flex-direction: column; align-items: center; padding: clamp(10px, 4vh, 40px) clamp(16px, 4vw, 40px) 40px; text-align: center; opacity: 0; visibility: hidden; transform: translateY(26px); transition: opacity .45s ease, transform .55s cubic-bezier(.2, .8, .2, 1), visibility 0s .45s; }
.fstep.on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease .05s, transform .55s cubic-bezier(.2, .8, .2, 1) .05s, visibility 0s; }
.fk { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.fstep h2 { font-size: clamp(2rem, 5.2vw, 3.8rem); font-weight: 700; line-height: 1.04; margin-top: 10px; text-transform: none; letter-spacing: -.03em; }
.fsub { color: var(--muted); font-size: 1.05rem; margin-top: 12px; }
.fforme { margin-top: clamp(24px, 5vh, 48px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; width: min(1000px, 100%); }
.fforma { display: flex; flex-direction: column; gap: 12px; align-items: center; padding: 22px 14px 18px; border-radius: 24px; border: 1px solid var(--line-soft); background: var(--band); cursor: pointer; font: 600 .95rem var(--font); color: var(--fg); transition: transform .25s, background .25s, border-color .25s, box-shadow .25s; }
.fforma .plan { width: 100%; height: auto; max-width: 150px; }
.fforma:hover, .fforma[aria-pressed="true"] { transform: translateY(-3px); background: #fff; border-color: var(--accent); box-shadow: 0 16px 34px -20px rgba(0, 113, 227, .55); }
.fforma:hover .plan .cab, .fforma[aria-pressed="true"] .plan .cab { fill: var(--accent); }
.fmeter { margin-top: clamp(28px, 6vh, 56px); display: flex; align-items: baseline; gap: 12px; }
.fmeter output { font-size: clamp(5rem, 14vw, 9rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.fmeter span { font-size: 1.4rem; font-weight: 600; color: var(--muted); }
#fRange { width: min(640px, 100%); margin-top: 26px; accent-color: var(--accent); height: 28px; }
.fchips { display: flex; gap: 8px; margin: 18px 0 30px; }
.fchips button { font: 600 .95rem var(--font); padding: .6em 1.2em; border-radius: 980px; border: 1px solid var(--line); background: #fff; cursor: pointer; color: var(--fg); }
.fchips button[aria-pressed="true"] { background: var(--fg); color: #fff; border-color: var(--fg); }
.fstili { margin-top: clamp(24px, 5vh, 44px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: min(1080px, 100%); }
.fstile { display: flex; flex-direction: column; text-align: left; padding: 0; border: 0; border-radius: 24px; overflow: hidden; background: var(--band); cursor: pointer; font-family: var(--font); color: var(--fg); transition: transform .3s, box-shadow .3s; }
.fstile:hover, .fstile[aria-pressed="true"] { transform: translateY(-4px); box-shadow: 0 24px 44px -26px rgba(0, 0, 0, .5); }
.fstile[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: 2px; }
.fs-img { position: relative; display: block; aspect-ratio: 16 / 10; }
.fs-img img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.fstile:hover .fs-img img { transform: scale(1.05); }
.fs-white { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(145deg, #ffffff, #ecebe8); }
.fs-tx { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; padding: 14px 16px 16px; }
.fs-tx b { font-size: 1.05rem; }
.fs-tx small { grid-column: 1; color: var(--muted); font-size: .82rem; }
.fs-dots { grid-column: 2; grid-row: 1 / 3; display: flex; }
.fs-dots i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff; margin-left: -6px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); }
/* rivelazione */
.freveal { padding: 0; display: block; position: relative; text-align: left; overflow: hidden; }
.frame-wrap { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #e9e7e3; }
.frame-wrap iframe { width: 100%; height: 100%; border: 0; display: block; opacity: 0; transform: scale(1.04); transition: opacity 1s ease .2s, transform 1.4s cubic-bezier(.2, .8, .2, 1) .2s; }
.fstep.on .frame-wrap iframe { opacity: 1; transform: none; }
.frame-load { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--muted); font-weight: 600; background: #e9e7e3; transition: opacity .6s; }
.frame-load span { width: 36px; height: 36px; border-radius: 50%; border: 3px solid rgba(0, 0, 0, .1); border-top-color: var(--accent); animation: spin 1s linear infinite; }
.frame-load.via { opacity: 0; pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.fres { position: absolute; left: clamp(14px, 3vw, 36px); bottom: clamp(14px, 3vw, 36px); width: min(420px, calc(100% - 28px)); padding: 22px 24px; border-radius: 26px; background: rgba(255, 255, 255, .86); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .45); transform: translateY(30px); opacity: 0; transition: opacity .7s ease 1.6s, transform .8s cubic-bezier(.2, .8, .2, 1) 1.6s; }
.fstep.on .fres { opacity: 1; transform: none; }
.fres h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-top: 6px; }
.fprice { font-size: 2.2rem; font-weight: 800; letter-spacing: -.03em; margin-top: 10px; }
.fprice small { font-size: .95rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.fdet { color: var(--muted); font-size: .88rem; margin-top: 2px; }
.fbtns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.fbtns .btn { flex: 1 1 auto; }
.fnote { font-size: .74rem; color: var(--muted); margin-top: 12px; }
.flow[data-step="4"] .flow-bar { position: absolute; left: 0; right: 0; top: 0; }
.flow[data-step="4"] .flow-dots { opacity: 0; }
@media (max-width: 760px) {
  .fforme { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .fforma { padding: 16px 10px 14px; border-radius: 20px; font-size: .86rem; }
  .fstili { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .fs-tx { grid-template-columns: 1fr; padding: 10px 12px 12px; }
  .fs-dots { grid-column: 1; grid-row: auto; margin: 6px 0 0 6px; }
  .fs-tx small { display: none; }
  .frame-wrap { bottom: 46%; }
  .fres { left: 0; right: 0; bottom: 0; width: auto; border-radius: 26px 26px 0 0; top: 52%; overflow-y: auto; padding: 18px 18px 24px; background: #fff; }
  .fprice { font-size: 1.9rem; }
  .intro-img { height: 30vh; border-radius: 24px 24px 0 0; }
}
@media (prefers-reduced-motion: reduce) { .fstep, .fres, .frame-wrap iframe, .intro-in > *, .intro-img { transition: none !important; animation: none !important; } }

/* ---------- configuratore dentro la home ---------- */
body.embed { background: #e9e7e3; overflow: hidden; }
body.embed header.top, body.embed footer, body.embed .opts, body.embed #prenota, body.embed .buybar, body.embed .overlay.top, body.embed #hint, body.embed #dimTag, body.embed .prima-pick, body.embed #emptyHint { display: none !important; }
body.embed main, body.embed .cfg { padding: 0 !important; margin: 0 !important; }
body.embed .cfg-grid { display: block !important; max-width: none !important; padding: 0 !important; }
body.embed .stage-wrap { position: static !important; margin: 0 !important; }
body.embed .stage { height: 100vh !important; max-height: none !important; min-height: 0 !important; border-radius: 0 !important; }
body.embed .split-label { top: 70px; }

/* ---------- pagine di contenuto ---------- */
.page-head { text-align: center; padding-block: clamp(56px, 9vw, 110px) clamp(40px, 6vw, 70px);
  background: radial-gradient(40% 70% at 15% 0%, var(--glow-blu), transparent 70%), radial-gradient(40% 70% at 85% 10%, var(--glow-sabbia), transparent 70%); }
.page-head h1 { font-size: clamp(2.4rem, 6vw, 4.8rem); font-weight: 800; line-height: 1.02; max-width: 16ch; margin: 0 auto; }
.page-head p:not(.kicker) { color: var(--muted); font-size: clamp(1.05rem, 1.8vw, 1.3rem); max-width: 54ch; margin: 18px auto 0; font-weight: 500; }
.days-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 900px; margin: 0 auto; }
.day { background: #fff; border-radius: 26px; padding: 30px 24px; text-align: center; }
.day strong { font-size: 4rem; font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--accent); }
.day span { display: block; font-weight: 700; margin-top: 4px; }
.day p { color: var(--muted); font-size: .92rem; margin-top: 6px; }
.days-note { text-align: center; color: var(--muted); max-width: 60ch; margin: 26px auto 0; font-size: .95rem; }
@media (max-width: 640px) { .days-grid { grid-template-columns: minmax(0, 1fr); } }
.intro-links { display: none; }
@media (max-width: 760px) {
  .pg-home .intro { justify-content: flex-start; }
  .intro-links { display: flex; justify-content: center; gap: 18px; margin-top: 14px; font-size: .9rem; font-weight: 600; }
  .intro-img { margin-top: 36px; }
}

/* ---------------- Compatibilità telefoni ----------------
   Safari iOS < 15 non conosce aspect-ratio: altezze di riserva.
   iOS ingrandisce la pagina sui campi con testo sotto i 16 px: sui telefoni i campi stanno a 16 px. */
@supports not (aspect-ratio: 1 / 1) {
  .sw img, .thumbs img { height: 0; padding-top: 100%; }
  .order .shot { height: 220px; }
  .gal { height: 0; padding-top: 125%; position: relative; }
  .tile.photo .ph { height: 0; padding-top: 75%; position: relative; }
  .mat { height: 0; padding-top: 133%; }
  .fs-img { height: 0; padding-top: 62.5%; }
  .ph img { position: absolute; top: 0; left: 0; }
}
@media (max-width: 760px), (pointer: coarse) {
  .drow select, .drow input, .search, .field input, .field select, .field textarea, .cap-row input { font-size: 16px; }
  header.top, .buybar, .hs-cap, .fres, .empty-hint { -webkit-backdrop-filter: none; backdrop-filter: none; }
  header.top { background: rgba(255, 255, 255, .96); }
  .buybar { background: rgba(255, 255, 255, .97); }
  .fres { background: #fff; }
  .hs-cap { background: rgba(14, 17, 24, .55); }
}
.frame-wrap.no3d iframe { display: none; }
.frame-wrap.no3d .frame-load { place-content: stretch; padding: 0; }
.frame-wrap.no3d .frame-load img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.frame-wrap.no3d .frame-load em { position: absolute; top: 74px; left: 50%; transform: translateX(-50%); width: min(420px, calc(100% - 32px)); font-style: normal; font-size: .82rem; text-align: center; background: rgba(255, 255, 255, .92); color: var(--fg); padding: 10px 14px; border-radius: 14px; }
@media (max-width: 980px) { body.scrive .stage { height: 26vh; min-height: 170px; transition: height .25s; } }

/* ---------- su misura: valori completati in automatico ---------- */
.drow input.auto { color: var(--muted); background: #f6f6f8; }
.stage .nogl { z-index: 6; background: rgba(233, 231, 227, .94); cursor: pointer; font-weight: 600; }

/* ---------- home: scheda "Scegli tu" e finiture sulla cucina ---------- */
.fs-grid { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
.fs-grid i { display: block; background-size: cover; background-position: center; }
.fstile.mie .fs-tx b::after { content: "CoverArk"; margin-left: 8px; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--accent); padding: 3px 8px; border-radius: 99px; vertical-align: 2px; }
.fsl { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.flink { border: 0; background: none; padding: 0; font: 700 .82rem var(--font); letter-spacing: 0; text-transform: none; color: var(--accent); cursor: pointer; }
.fsurf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.fsb { display: flex; flex-direction: column; gap: 6px; text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 14px; padding: 6px; cursor: pointer; font-family: var(--font); color: var(--fg); min-width: 0; }
.fsb:hover { border-color: var(--accent); }
.fsb i { display: block; height: 34px; border-radius: 9px; background-size: cover; background-position: center; }
.fsb span { padding: 0 2px 2px; min-width: 0; }
.fsb small { display: block; font-size: .62rem; color: var(--muted); font-weight: 600; }
.fsb b { display: block; font-size: .72rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fres.pick .fmain { display: none; }
.fres.pick { max-height: calc(100% - 90px); display: flex; flex-direction: column; }
.fpick { display: flex; flex-direction: column; min-height: 0; }
.fpick[hidden] { display: none; }
.fpick-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.fpick-h b { font-size: 1.05rem; font-weight: 800; }
.ftabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.ftabs button { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 6px; font: 600 .7rem var(--font); color: var(--fg); cursor: pointer; text-align: left; line-height: 1.15; }
.ftabs button[aria-selected="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.ftabs i { flex: none; width: 24px; height: 24px; border-radius: 7px; background-size: cover; background-position: center; }
.ffams { display: flex; gap: 6px; overflow-x: auto; margin: 10px -2px 0; padding: 2px; scrollbar-width: none; }
.ffams::-webkit-scrollbar { display: none; }
.ffams button { flex: none; border: 0; background: var(--band); border-radius: 99px; padding: 7px 12px; font: 600 .74rem var(--font); color: var(--fg); cursor: pointer; }
.ffams button[aria-pressed="true"] { background: var(--fg); color: #fff; }
.fsw { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; margin-top: 10px; overflow-y: auto; min-height: 120px; max-height: 330px; padding: 2px; -webkit-overflow-scrolling: touch; }
.fs1 { display: flex; flex-direction: column; gap: 4px; border: 0; background: none; padding: 0; cursor: pointer; text-align: left; font-family: var(--font); color: var(--fg); min-width: 0; }
.fs1 i { display: block; aspect-ratio: 1; border-radius: 12px; background-size: cover; background-position: center; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
@supports not (aspect-ratio: 1) { .fs1 i { height: 0; padding-top: 100%; } }
.fs1[aria-pressed="true"] i { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.fs1 b { font-size: .68rem; font-weight: 600; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fs1 small { font-size: .6rem; color: var(--muted); }
.fpick-h, .ftabs, .ffams { flex: none; }
.fpick .fnote { flex: none; }
@media (max-width: 760px) {
  .fres.pick { max-height: none; top: 38%; overflow: hidden; padding-bottom: 12px; }
  .fres.pick .fpick { flex: 1; }
  .fsw { max-height: none; flex: 1 1 auto; min-height: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .flow[data-step="4"] .frame-wrap { transition: bottom .35s; }
  .flow[data-step="4"]:has(.fres.pick) .frame-wrap { bottom: 60%; }
  .presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- configuratore aperto dalla home: passo 3 di 3 ---------- */
.opts-head .fk-cfg { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.fpost { margin-top: 14px; max-width: 34ch; }

/* ---------- finiture: tre scelte principali, ante di un altro colore, stili pronti ---------- */
.scelte-hint { font-size: .78rem; color: var(--muted); margin: 6px 2px 8px; line-height: 1.4; }
.scelte-hint b { color: var(--accent); }
details.altre, details.stili { border: 1px solid var(--line-soft); border-radius: 16px; padding: 10px 14px; margin-top: 10px; }
details.altre summary, details.stili summary { cursor: pointer; font-weight: 700; font-size: .86rem; }
details.altre summary small { display: block; font-weight: 500; color: var(--muted); font-size: .74rem; }
details.altre[open] summary, details.stili[open] summary { margin-bottom: 10px; }
.door-pop { position: absolute; z-index: 8; left: 50%; bottom: 64px; transform: translateX(-50%); width: min(420px, calc(100% - 24px)); background: rgba(255, 255, 255, .97); border-radius: 18px; padding: 12px 14px; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .45); text-align: center; }
.door-pop[hidden] { display: none; }
.door-pop b { display: block; font-size: .84rem; margin-bottom: 8px; }
.door-pop div { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
details.why { margin: 12px 0 4px; background: #fff; border-radius: 14px; padding: 10px 12px; }
details.why:empty { display: none; }
details.why summary { cursor: pointer; font-weight: 700; font-size: .82rem; color: var(--accent); }
details.why p { font-size: .78rem; color: var(--muted); line-height: 1.5; margin-top: 10px; }
.why-bars { display: grid; gap: 8px; margin-top: 10px; }
.why-bars div { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; font-size: .74rem; }
.why-bars span { color: var(--muted); }
.why-bars i { grid-column: 1 / -1; height: 8px; border-radius: 8px; background: linear-gradient(90deg, var(--accent), #6aa6ff); }
.preset small { font-weight: 500; font-size: .68rem; color: var(--muted); padding: 0 2px; line-height: 1.25; margin-top: -4px; }
.choice .ico .film { fill: rgba(10, 91, 211, .14); stroke: var(--accent); }
.choice .ico .tool { fill: var(--fg); stroke: var(--fg); stroke-linejoin: round; }
.choice .ico .acc { stroke: var(--accent); stroke-width: 2; }
.choice[aria-pressed="true"] .ico .film { fill: rgba(10, 91, 211, .22); }

/* home: avanti dopo la forma, passo composizione */
.fnext { margin-top: clamp(18px, 3vh, 28px); }
.fnext:disabled { opacity: .35; cursor: not-allowed; }
.fforma[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: 2px; }
.fcomp { margin: clamp(22px, 4vh, 36px) 0 clamp(18px, 3vh, 28px); display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 14px; justify-content: center; }
.fcb { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 16px 18px; border-radius: 24px; border: 2px solid var(--line); background: #fff; cursor: pointer; font-family: var(--font); color: var(--fg); transition: border-color .2s, transform .2s; }
.fcb svg { width: 96px; height: 68px; }
.fcb svg rect { fill: var(--band); stroke: #c7c7cc; stroke-width: 1.5; }
.fcb[aria-pressed="true"] svg rect.on { fill: var(--accent-soft); stroke: var(--accent); }
.fcb b { font-size: 1.05rem; font-weight: 800; }
.fcb small { font-size: .78rem; color: var(--muted); text-align: center; }
.fcb i { position: absolute; top: 12px; right: 12px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); }
.fcb[aria-pressed="true"] { border-color: var(--accent); }
.fcb[aria-pressed="true"] i { background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12l4 4 8-8' fill='none' stroke='%23fff' stroke-width='3'/%3E%3C/svg%3E") center/16px no-repeat; border-color: var(--accent); }

/* ---------- pagine legali e qualità ---------- */
.legal { max-width: 820px; }
.legal.wide { max-width: 1040px; }
.legal .upd { color: var(--muted); font-size: .85rem; }
.legal h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 800; margin: 34px 0 10px; }
.legal p, .legal li { line-height: 1.65; color: #3a3a3c; }
.legal ul { padding-left: 20px; display: grid; gap: 8px; }
.legal a { color: var(--accent); }
.qgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.qgrid article { border-radius: 26px; padding: 28px 24px; background: linear-gradient(160deg, #f5f8ff, #fff); border: 1px solid var(--line-soft); }
.qgrid b { display: block; font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: -.03em; color: var(--accent); }
.qgrid span { color: var(--muted); font-size: .92rem; line-height: 1.45; }
.certs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.certs div { background: #fff; border-radius: 20px; padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.certs span { color: var(--muted); font-size: .9rem; line-height: 1.45; }
table.cmp { width: 100%; border-collapse: collapse; min-width: 560px; }
table.cmp th, table.cmp td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line-soft); font-size: .92rem; vertical-align: top; }
table.cmp th { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
table.cmp th:nth-child(2), table.cmp td:nth-child(2) { background: rgba(10, 91, 211, .06); font-weight: 600; }
table.cmp td:first-child { font-weight: 700; }
@media (max-width: 820px) { .qgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .certs { grid-template-columns: minmax(0, 1fr); } }
.qual-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.qual-strip span { font-size: .72rem; font-weight: 700; border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; color: var(--fg); background: #fff; }
.qual-strip a { font-size: .74rem; font-weight: 700; color: var(--accent); padding: 6px 4px; }

/* ---------- percorso guidato ---------- */
.gbar { margin: 4px 0 6px; }
.gtop { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.gtop #gNum { font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.gtop #gTit { font-size: .82rem; font-weight: 700; color: var(--muted); }
.gprog { height: 6px; border-radius: 6px; background: var(--line-soft); margin-top: 8px; overflow: hidden; }
.gprog i { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, #0a5bd3, #6aa6ff); transition: width .45s cubic-bezier(.2, .8, .2, 1); }
.opts [data-g] { animation: gIn .4s cubic-bezier(.2, .8, .2, 1); }
.opts [data-g][hidden] { display: none !important; }
.opts [data-g] h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.2; }
.opts [data-g] h3 span { display: block; font-size: .95rem; font-weight: 500; margin-top: 6px; }
@keyframes gIn { from { opacity: 0; transform: translateY(14px); } }
.gnav { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.gnav .btn { justify-content: center; }
.gnav #gNext[hidden] { display: none; }
.dsec[hidden], .dist-intro[hidden], .dist-unit[hidden], #distinta [data-reset][hidden] { display: none !important; }
#modo .choice b { font-size: 1rem; }
@media (prefers-reduced-motion: reduce) { .opts [data-g] { animation: none; } }
.opts .step[data-g] { border-top: 0; padding-top: 18px; padding-bottom: 6px; }

.gback { display: none; border: 0; background: none; padding: 0; font: 700 .82rem var(--font); color: var(--accent); cursor: pointer; }
@media (max-width: 980px) {
  .gnav { display: none; }
  .gback:not([hidden]) { display: inline; }
  .gtop { justify-content: flex-start; }
  .gtop #gTit { margin-left: auto; }
  .opts { padding-bottom: 90px; }
}

/* avvisi del percorso guidato */
#gAvviso { position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); z-index: 120; width: min(520px, calc(100% - 24px)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 18px; background: #fff; box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .45); border: 1px solid var(--line); font-size: .9rem; line-height: 1.4; transition: opacity .25s, transform .3s cubic-bezier(.2, .8, .2, 1); }
#gAvviso.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#gAvviso .ic { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--accent); }
#gAvviso.errore { border-color: #ff9f97; }
#gAvviso.errore .ic { background: #e5484d; }
#gAvviso div { flex: 1; }
#gAvviso button { border: 0; background: none; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--muted); }
.shake { animation: shake .4s; }
@keyframes shake { 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
@media (min-width: 981px) { .gnav { position: sticky; bottom: 84px; background: rgba(255, 255, 255, .94); z-index: 5; border-radius: 16px; padding: 12px 0; } }
.fwarn { margin-top: 12px; color: #c8372d; font-weight: 700; font-size: .92rem; }
@media (min-width: 981px) { #gAvviso { bottom: 160px; } }

/* ---- Roma e provincia in primo piano ---- */
.zbar{background:#1d1d1f;color:#fff;font-size:.8rem;font-weight:500;text-align:center;padding:8px 16px;display:flex;justify-content:center;flex-wrap:wrap;gap:4px 8px;line-height:1.35}
.zbar b{font-weight:700}.zbar .zsep{opacity:.5}
@media (max-width:560px){.zbar .zsep{display:none}.zbar span:last-child{opacity:.75}}
.intro-zona{margin:0 0 18px}.intro-zona span{display:inline-block;font-weight:700;font-size:.9rem;letter-spacing:.04em;padding:8px 16px;border-radius:999px;background:#f5f5f7;color:#1d1d1f}
.intro-q{margin-top:34px;font-weight:700;font-size:1.05rem;color:#1d1d1f}
.intro-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:14px}
.intro-in .intro-cta .btn-xl{margin-top:0}
.intro-cta .btn-light{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.intro-cta .btn-light small{font-size:.72rem;font-weight:600;color:var(--muted);margin-top:3px;letter-spacing:.02em}
@media (max-width:560px){.intro-cta{flex-direction:column;align-items:stretch;padding:0 8px}.intro-cta .btn{width:100%}}
.intro-in > :nth-child(5){animation-delay:.42s}.intro-in > :nth-child(6){animation-delay:.5s}
.fzona{max-width:560px;margin:0 auto 14px;padding:14px 18px;border-radius:18px;background:#f5f5f7;font-size:.92rem;line-height:1.45;text-align:left}
.zona-sw{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 10px}
.zona-sw span{font-weight:600;font-size:.9rem;color:var(--muted);margin-right:4px}
.zona-sw button{font:inherit;font-weight:700;font-size:.9rem;padding:9px 16px;border-radius:999px;border:1px solid #d2d2d7;background:#fff;color:#1d1d1f;cursor:pointer}
.zona-sw button[aria-pressed="true"]{background:#1d1d1f;color:#fff;border-color:#1d1d1f}
.choice.off{opacity:.45}

/* finiture a passi: stile, ante superiori, ante inferiori, top */
#stepFiniture[data-sub="pensili"] .sgroup:not([data-fz="pensili"]),#stepFiniture[data-sub="basi"] .sgroup:not([data-fz="basi"]),#stepFiniture[data-sub="top"] .sgroup:not([data-fz="top"]){display:none}
.stili-t{font-weight:700;font-size:.95rem;margin:4px 0 10px}

.choice .ico .f2{fill:var(--line);}
.choice .ico .badge{fill:var(--fg);stroke:var(--fg)}
.choice .ico .badge-k{stroke:#fff}
.choice[aria-pressed="true"] .ico .badge{fill:var(--accent);stroke:var(--accent)}
.choice[aria-pressed="true"] .ico .f2{fill:rgba(10,91,211,.28)}

.why-list{margin:10px 0 0;padding-left:18px;font-size:.85rem;line-height:1.55;color:var(--muted)}.why-list b{color:var(--fg);font-weight:600}

.sum-row.sconto b,.sum-row.sconto span{color:#1a7f37}

/* finiture: prima la scelta, poi stili e certificazioni (solo al primo passo) */
#stepFiniture:not([data-first]) .stili-box,#stepFiniture:not([data-first]) .qual-strip{display:none}
#stepFiniture .stili-box{margin-top:14px}
/* pagina dedicata a prezzo e prenotazione */
body:not(.ordine) #prenota{display:none}
body.ordine #configuratore{position:fixed;left:-300vw;top:0;width:100vw;visibility:hidden;pointer-events:none}
body.ordine .buybar{display:none}
.ord-top{max-width:720px;margin:0 auto 56px}
.ord-top .sec-title{text-align:left;margin:18px 0 18px}
.ord-back{display:inline-flex;align-items:center;gap:8px;font:inherit;font-weight:700;font-size:.92rem;color:var(--accent);background:none;border:0;padding:6px 0;cursor:pointer}
.ord-back .ic{width:16px;height:16px}
#ordSum .sum{max-width:none}
body.ordine #prenota{padding-top:28px}
/* misure su misura semplici */
#misSemplici{display:grid;gap:12px}
.mcard{border:1px solid var(--line-soft);border-radius:18px;padding:14px 16px;background:#fff}
.mcard h4{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 8px;font-size:.95rem;font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.mf{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line-soft)}
.mcard h4 + .mf{border-top:0}
.mf > span:first-child{font-weight:600;font-size:.92rem;line-height:1.3}
.mf small{display:block;font-weight:500;font-size:.78rem;color:var(--muted)}
.mf-in{display:inline-flex;align-items:center;gap:6px;flex:none}
.mf-in input{width:92px;font:inherit;font-weight:700;font-size:1rem;text-align:right;padding:9px 10px;border:1px solid var(--line);border-radius:12px;background:#fff}
.mf-in input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.mf-in i{font-style:normal;font-size:.85rem;color:var(--muted);width:22px}
.mf-step{display:inline-flex;align-items:center;gap:4px;flex:none;border:1px solid var(--line);border-radius:999px;padding:3px}
.mf-step button{width:36px;height:36px;border-radius:50%;border:0;background:#f5f5f7;font:inherit;font-size:1.2rem;font-weight:700;cursor:pointer;color:var(--fg)}
.mf-step output{min-width:34px;text-align:center;font-weight:800;font-size:1.05rem}
.mtog{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:600;text-transform:none;letter-spacing:0;color:var(--muted)}
.mtog.wide{margin-top:8px;font-size:.88rem;color:var(--fg)}
/* banner cookie */
#ckCookie{position:fixed;z-index:200;left:16px;right:16px;bottom:16px;max-width:620px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:20px;background:rgba(29,29,31,.96);color:#fff;box-shadow:0 20px 60px rgba(0,0,0,.35);font-size:.86rem;line-height:1.45}
#ckCookie p{margin:0}#ckCookie a{color:#fff;text-decoration:underline}
#ckCookie div{display:flex;gap:8px;flex:none}
#ckCookie button{font:inherit;font-weight:700;padding:10px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;cursor:pointer}
#ckCookie button[data-c="si"]{background:#fff;color:#1d1d1f;border-color:#fff}
@media (max-width:560px){#ckCookie{flex-direction:column;align-items:stretch}#ckCookie div button{flex:1}}

/* logo testuale: COVERKITCHEN + powered by */
.logo .wm{display:flex;flex-direction:column;line-height:1}
.logo .wm b{font-weight:700;font-size:1.28rem;letter-spacing:.01em;color:var(--fg)}
.logo .wm small{font-weight:600;font-size:.6rem;letter-spacing:.03em;color:var(--muted);margin-top:4px}
footer .logo .wm b{font-size:1.6rem}
footer .logo .wm small{font-size:.72rem}