/* Layout: griglia a 12 colonne con foto a tutto campo; le sezioni alternano bianco e grigio chiaro
   come il sito originale, barra superiore verde scuro e footer grafite. I colori sono quelli di systemglass.it. */
:root {
  --green: #008C4A;        /* colore principale del sito originale */
  --green-dark: #156547;   /* barra superiore / banner cookie originale */
  --ink: #373636;          /* titoli */
  --text: #4C4C4C;         /* testo corrente */
  --muted: #777777;
  --line: #E9E9E9;
  --paper: #FFFFFF;
  --mist: #F5F5F5;
  --mist-2: #F2F2F2;
  --footer: #2F2F2F;
  --footer-deep: #282728;
  --footer-text: #AFAFAF;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1320px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --header-h: 76px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--text);
  font: 400 17px/1.65 var(--body); font-stretch: 100%;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
::selection { background: var(--green); color: #fff; }
h1, h2, h3, h4 { color: var(--ink); font-family: var(--display); font-weight: 700; margin: 0; text-wrap: balance; letter-spacing: -.01em; }
h1 { font-size: clamp(40px, 6.4vw, 96px); line-height: .98; font-stretch: 112%; font-weight: 800; }
h2 { font-size: clamp(32px, 4.2vw, 60px); line-height: 1.02; font-stretch: 110%; }
h3 { font-size: clamp(21px, 1.8vw, 26px); line-height: 1.2; font-stretch: 105%; }
p { margin: 0; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 12px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--green);
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.lede { font-size: clamp(18px, 1.4vw, 21px); line-height: 1.6; max-width: 60ch; }
.prose p + p { margin-top: 1em; }
.prose { max-width: 66ch; }
.section { padding-block: clamp(72px, 10vw, 140px); }
.section.mist { background: var(--mist); }
.section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 64px; align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head > * { min-width: 0; }
.section-head .eyebrow { margin-bottom: 18px; }
@media (max-width: 860px) { .section-head { grid-template-columns: 1fr; } }

/* Bottoni */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: 12px; padding: 16px 26px;
  border: 0; border-radius: 2px; background: var(--green); color: #fff; text-decoration: none; cursor: pointer;
  font: 600 14px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; font-stretch: 105%;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--green-dark);
  transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease);
}
.btn:hover::before { transform: scaleX(1); transform-origin: left; }
.btn svg { width: 16px; height: 16px; transition: transform .4s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn.ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
.btn.ghost::before { background: #fff; }
.btn.ghost:hover { color: var(--green-dark); }
.btn.line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn.line::before { background: var(--ink); }
.btn.line:hover { color: #fff; }
.link-arrow { display: inline-flex; align-items: center; gap: 10px; color: var(--green); font-weight: 600; text-decoration: none; letter-spacing: .02em; }
.link-arrow svg { width: 16px; height: 16px; transition: transform .4s var(--ease); }
.link-arrow:hover svg { transform: translateX(5px); }

/* Barra superiore + header */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; padding-top: env(safe-area-inset-top, 0px); transition: transform .5s var(--ease); }
/* scorrendo: si ripiega solo la barra verde in alto, con un movimento lungo e morbido (niente scomparse improvvise) */
.site-header { transition: transform .75s cubic-bezier(.22, 1, .36, 1); will-change: transform; }
.site-header.is-compact { transform: translateY(calc(-1 * var(--tb, 40px))); }
.site-header .topbar { transition: opacity .5s ease; }
.site-header.is-compact .topbar { opacity: 0; }
.topbar { background: var(--green-dark); color: rgba(255,255,255,.88); font-size: 13px; transition: margin .4s var(--ease); }
.topbar .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding-block: 8px; }
.topbar a { text-decoration: none; }
.topbar a:hover { color: #fff; }
.topbar .group { display: flex; flex-wrap: wrap; gap: 6px 22px; }
/* niente sfocatura dietro l'header: andrebbe ricalcolata a ogni fotogramma di scorrimento (costosa a 120 Hz) */
.navbar { background: #fff; border-bottom: 1px solid var(--line); }
.navbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--header-h); }
.brand img { height: 46px; width: auto; }
.menu { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 38px); list-style: none; margin: 0; padding: 0; }
.menu > li > a {
  position: relative; display: inline-block; padding-block: 8px; text-decoration: none;
  color: var(--ink); font-weight: 600; font-size: 15px; letter-spacing: .02em;
}
.menu > li > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--green);
  transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease);
}
.menu > li > a:hover::after, .menu > li > a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.menu .has-mega { position: static; }
.mega {
  position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.25);
  opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s ease .12s, transform .35s var(--ease) .12s, visibility 0s linear .37s;
}
@media (hover: hover) { .has-mega:hover .mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } }
.has-mega:focus-within .mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mega .wrap { display: grid; grid-template-columns: repeat(4, 1fr) 1.3fr; gap: 32px; padding-block: 36px 40px; }
.mega h4 { font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--green); margin-bottom: 14px; }
.mega ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mega ul a { text-decoration: none; color: var(--ink); font-weight: 500; display: inline-block; padding: 3px 0; transition: color .2s, transform .3s var(--ease); }
.mega ul a:hover { color: var(--green); transform: translateX(4px); }
.mega .feature { position: relative; border-radius: 2px; overflow: hidden; min-height: 180px; color: #fff; text-decoration: none; display: flex; align-items: end; padding: 18px; }
.mega .feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.mega .feature:hover img { transform: scale(1.035); }
.mega .feature::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(21,101,71,.92), rgba(21,101,71,0) 70%); }
.mega .feature span { position: relative; z-index: 2; font-weight: 700; font-stretch: 110%; font-size: 20px; line-height: 1.15; }
.nav-cta { display: flex; align-items: center; gap: 16px; }
.burger { display: none; width: 46px; height: 46px; border: 0; background: transparent; cursor: pointer; position: relative; }
.burger span { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--ink); transition: transform .4s var(--ease), opacity .3s; }
.burger span:nth-child(1) { top: 16px; } .burger span:nth-child(2) { top: 22px; } .burger span:nth-child(3) { top: 28px; }
.nav-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-open .burger span:nth-child(2) { opacity: 0; }
.nav-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 1080px) {
  .menu, .nav-cta .btn { display: none; }
  .burger { display: block; }
  .topbar .hours { display: none; }
}
@media (max-width: 560px) { .topbar .mail { display: none; } .brand img { height: 38px; } }

/* Menu mobile */
.drawer {
  position: fixed; inset: 0; z-index: 45; background: var(--paper); overflow-y: auto;
  padding: calc(var(--header-h) + 60px + env(safe-area-inset-top, 0px)) var(--gutter) calc(40px + env(safe-area-inset-bottom, 0px));
  visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--ease), visibility .7s;
}
.nav-open .drawer { visibility: visible; clip-path: inset(0 0 0 0); }
.drawer > ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.drawer > ul > li > a { display: block; text-decoration: none; color: var(--ink); font: 700 clamp(30px, 8vw, 44px)/1.2 var(--display); font-stretch: 112%; padding-block: 6px; }
.drawer details summary { list-style: none; cursor: pointer; color: var(--ink); font: 700 clamp(30px, 8vw, 44px)/1.2 var(--display); font-stretch: 112%; padding-block: 6px; display: flex; justify-content: space-between; align-items: center; }
.drawer details summary::-webkit-details-marker { display: none; }
.drawer details summary::after { content: "+"; color: var(--green); font-weight: 400; transition: transform .3s; }
.drawer details[open] summary::after { transform: rotate(45deg); }
.drawer details ul { list-style: none; margin: 4px 0 14px; padding: 0 0 0 4px; display: grid; gap: 2px; }
.drawer details ul a { text-decoration: none; color: var(--text); font-size: 18px; display: block; padding: 4px 0; }
.drawer .contact { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 6px; }

/* Hero home */
.hero { position: relative; min-height: min(92vh, 900px); min-height: min(92svh, 900px); display: grid; align-items: end; color: #fff; overflow: hidden; background: var(--footer-deep); }
.hero-slides, .hero-slides figure { position: absolute; inset: 0; margin: 0; }
.hero-slides figure { opacity: 0; }
.hero-slides figure:first-child { opacity: 1; }
.hero-slides img { width: 100%; height: 100%; object-fit: cover; transform-origin: 60% 50%; }
.hero::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(20,24,22,.7) 0%, rgba(20,24,22,.46) 40%, rgba(20,24,22,0) 70%),
  linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.12) 55%, rgba(21,101,71,.9) 100%); }
@media (max-width: 760px) { .hero::after { background: linear-gradient(180deg, rgba(20,24,22,.45) 0%, rgba(20,24,22,.42) 45%, rgba(21,101,71,.92) 100%); } }
.hero h1, .hero .lede { text-shadow: 0 2px 24px rgba(0,0,0,.25); }
.hero .wrap { position: relative; z-index: 2; width: 100%; padding-block: calc(var(--header-h) + clamp(80px, 12vh, 140px)) clamp(40px, 7vw, 90px); }
.hero h1 { color: #fff; max-width: 13ch; }
.hero .eyebrow { color: #fff; margin-bottom: 22px; }
.hero .lede { color: rgba(255,255,255,.9); margin-top: 26px; max-width: 52ch; }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; margin-top: clamp(40px, 6vw, 80px); padding-top: 20px; border-top: 1px solid rgba(255,255,255,.3); }
.hero-dots { display: flex; gap: 10px; }
.hero-dots button { width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; position: relative; }
.hero-dots button::before { content: ""; position: absolute; left: 0; right: 0; top: 21px; height: 2px; background: rgba(255,255,255,.35); transition: background .3s; }
.hero-dots button i { position: absolute; left: 0; top: 21px; height: 2px; width: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }
.hero-caption { font: 500 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.85); text-decoration: none; padding-block: 12px; }
.hero-caption::after { content: "  →"; }
@media (hover: hover) { .hero-caption:hover { color: #fff; } .hero-dots button:hover::before { background: rgba(255,255,255,.6); } }
.split-line { display: block; overflow: hidden; padding-bottom: .04em; }

/* Hero pagine interne */
.page-hero { position: relative; color: #fff; background: var(--green-dark); overflow: hidden; }
.page-hero .bg { position: absolute; inset: -6% 0; }
.page-hero .bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(21,101,71,.94) 0%, rgba(21,101,71,.75) 45%, rgba(21,101,71,.25) 100%); }
.page-hero .wrap { position: relative; z-index: 2; padding-block: calc(var(--header-h) + clamp(84px, 11vh, 130px)) clamp(48px, 7vw, 96px); }
.page-hero h1 { color: #fff; font-size: clamp(38px, 5.6vw, 84px); max-width: 16ch; }
.page-hero .eyebrow { color: #fff; margin-bottom: 20px; }
.page-hero .lede { color: rgba(255,255,255,.9); margin-top: 22px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.crumbs a { text-decoration: none; } .crumbs a:hover { color: #fff; }
.crumbs span[aria-hidden] { opacity: .5; }

/* Intro + numeri */
.intro { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.intro > * { min-width: 0; }
.intro .media { position: relative; }
.intro .media .a { aspect-ratio: 4 / 5; }
.intro .media .b { position: absolute; width: 52%; aspect-ratio: 1; right: -8%; bottom: -12%; border: 8px solid var(--paper); }
.frame { overflow: hidden; border-radius: 2px; max-width: 100%; }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.intro .prose { margin-top: 28px; }
.intro .ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; }
@media (max-width: 900px) { .intro { grid-template-columns: 1fr; } .intro .media { margin-bottom: 40px; max-width: 520px; } .intro .media .b { right: 0; } }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); margin-top: clamp(64px, 8vw, 110px); }
.stat { padding: 26px 24px 0 0; display: grid; gap: 8px; align-content: start; border-right: 1px solid var(--line); padding-left: 24px; }
.stat:first-child { padding-left: 0; }
.stat:last-child { border-right: 0; }
.stat b { font: 800 clamp(44px, 5vw, 76px)/1 var(--display); font-stretch: 112%; color: var(--green); font-variant-numeric: tabular-nums; }
.stat span { font-size: 15px; color: var(--muted); max-width: 22ch; }
@media (max-width: 860px) { .stats { grid-template-columns: 1fr 1fr; } .stat:nth-child(2) { border-right: 0; } .stat:nth-child(3) { padding-left: 0; } .stat { padding-bottom: 26px; } }
@media (max-width: 420px) { .stats { grid-template-columns: 1fr; } .stat { border-right: 0; padding-left: 0; } }

/* Tre categorie in evidenza */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
.feature-card { position: relative; display: grid; grid-template-rows: auto 1fr; background: var(--paper); text-decoration: none; color: inherit; }
.feature-card .frame { aspect-ratio: 4 / 3; }
.feature-card .frame img { transition: transform 1.4s var(--ease); }
.feature-card:hover .frame img { transform: scale(1.035); }
.feature-card .body { padding: 26px 26px 30px; display: grid; gap: 14px; align-content: start; }
.feature-card .body p { font-size: 15.5px; color: var(--muted); }
.feature-card .num { font: 500 12px/1 var(--mono); color: var(--green); letter-spacing: .12em; }
@media (max-width: 900px) { .features { grid-template-columns: 1fr; } }

/* Riflesso "vetro" sulle immagini */
.sheen { position: relative; }
.sheen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.38) 45%, rgba(255,255,255,0) 60%);
  transform: translateX(-120%); transition: transform 1.1s var(--ease);
}
.sheen:hover::after, a:hover .sheen::after { transform: translateX(120%); }

/* Rotaia prodotti */
.rail-section { background: var(--footer); color: var(--footer-text); overflow: hidden; }
.rail-section h2, .rail-section h3 { color: #fff; }
.rail-section .eyebrow { color: #7fd1a8; }
.rail-head { padding-top: clamp(72px, 10vw, 130px); }
.rail { display: flex; gap: clamp(16px, 2vw, 26px); padding-inline: var(--gutter); padding-bottom: clamp(72px, 10vw, 130px); width: max-content; }
.rail .p-card { width: clamp(270px, 26vw, 380px); }
.p-card { display: grid; gap: 16px; text-decoration: none; color: inherit; align-content: start; }
.p-card .frame { aspect-ratio: 4 / 3; background: var(--mist); }
.p-card .frame img { transition: transform 1.4s var(--ease); }
.p-card:hover .frame img { transform: scale(1.035); }
.p-card .row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.p-card .cat { font: 500 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--green); white-space: nowrap; }
.rail-section .p-card .cat { color: #7fd1a8; }
.p-card p { font-size: 15px; color: var(--muted); }
.rail-section .p-card p { color: var(--footer-text); }
.rail-progress { height: 2px; background: rgba(255,255,255,.12); margin-top: 32px; }
.rail-progress i { display: block; height: 100%; width: 100%; background: var(--green); transform: scaleX(0); transform-origin: left; }
@media (max-width: 899px), (pointer: coarse) {
  .rail { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 72px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .rail::-webkit-scrollbar { display: none; }
  .rail { scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; }
  .rail .p-card { width: min(78vw, 340px); flex: 0 0 auto; scroll-snap-align: start; }
  .rail-progress { margin-top: 22px; }
}

/* Servizi */
.services { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); }
.service { padding: 30px 28px 34px 0; display: grid; gap: 14px; align-content: start; border-right: 1px solid var(--line); padding-left: 28px; }
.service:first-child { padding-left: 0; }
.service:last-child { border-right: 0; }
.service svg { width: 44px; height: 44px; color: var(--green); }
.service p { font-size: 15.5px; color: var(--muted); }
.service .k { font: 500 12px/1 var(--mono); color: var(--green); letter-spacing: .12em; }
@media (max-width: 960px) { .services { grid-template-columns: 1fr 1fr; } .service:nth-child(2) { border-right: 0; } .service:nth-child(3) { padding-left: 0; } }
@media (max-width: 560px) { .services { grid-template-columns: 1fr; } .service { border-right: 0; padding-left: 0; border-bottom: 1px solid var(--line); } }

/* Realizzazioni (mosaico) */
.mosaic { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-flow: dense; gap: clamp(10px, 1.4vw, 18px); }
.mosaic .tile { position: relative; overflow: hidden; border-radius: 2px; grid-column: span 4; aspect-ratio: 4 / 3; cursor: zoom-in; border: 0; padding: 0; background: var(--mist); }
.mosaic .tile.w8 { grid-column: span 8; aspect-ratio: 8 / 3.05; }
.mosaic .tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.mosaic .tile:hover img { transform: scale(1.03); }
.mosaic .tile figcaption, .mosaic .tile .cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; text-align: left;
  background: linear-gradient(to top, rgba(0,0,0,.6), transparent); color: #fff; font-size: 14px; font-weight: 600;
  transform: translateY(8px); opacity: 0; transition: opacity .4s, transform .5s var(--ease);
}
.mosaic .tile:hover .cap, .mosaic .tile:focus-visible .cap { opacity: 1; transform: none; }
@media (max-width: 760px) { .mosaic .tile { grid-column: span 6; aspect-ratio: 1; } .mosaic .tile.w8 { grid-column: span 12; aspect-ratio: 16 / 9; } }
@media (max-width: 460px) { .mosaic .tile { grid-column: span 6; aspect-ratio: 1; } .mosaic .tile.w8 { grid-column: span 12; aspect-ratio: 4 / 3; } }

/* Partner */
.partners { border-block: 1px solid var(--line); padding-block: 34px; overflow: hidden; background: var(--paper); }
.partners .label-row { margin-bottom: 20px; }
.marquee { display: flex; width: max-content; gap: 0; }
.marquee img { height: 42px; width: auto; margin-right: clamp(48px, 7vw, 110px); filter: grayscale(1); opacity: .7; transition: filter .3s, opacity .3s; mix-blend-mode: multiply; }
.marquee img:hover { filter: none; opacity: 1; }

/* CTA */
.cta { position: relative; overflow: hidden; background: var(--green); color: #fff; }
.cta .bg { position: absolute; inset: -15% 0; opacity: .18; mix-blend-mode: luminosity; }
.cta .bg img { width: 100%; height: 100%; object-fit: cover; }
.cta .wrap { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: end; padding-block: clamp(72px, 10vw, 130px); }
.cta h2 { color: #fff; max-width: 16ch; }
.cta .side { display: grid; gap: 22px; justify-items: start; }
.cta .side p { color: rgba(255,255,255,.9); }
.cta .phone { font: 700 clamp(28px, 3vw, 40px)/1 var(--display); font-stretch: 110%; color: #fff; text-decoration: none; }
.cta .btn { background: #fff; color: var(--green-dark); }
.cta .btn::before { background: var(--ink); }
.cta .btn:hover { color: #fff; }
@media (max-width: 860px) { .cta .wrap { grid-template-columns: 1fr; } }

/* Prodotti: filtri + griglia */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.chip {
  border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 999px;
  padding: 10px 18px; cursor: pointer; font-weight: 600; font-size: 14px; transition: background .3s, color .3s, border-color .3s;
}
.chip:hover { border-color: var(--green); color: var(--green); }
.chip[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; }
.chip small { font: 500 11px/1 var(--mono); opacity: .7; margin-left: 6px; }
.grid-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3vw, 44px) clamp(16px, 2vw, 28px); }
.grid-products .p-card.is-hidden { display: none; }
@media (max-width: 960px) { .grid-products { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .grid-products { grid-template-columns: 1fr; } }

/* Pagina prodotto */
.product-top { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.product-top > * { min-width: 0; }
/* caratteristiche del prodotto: elenco con spunta (non sono pulsanti, quindi niente aspetto «cliccabile») */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin-top: 28px; padding: 22px 0 0; border-top: 1px solid var(--line); }
.facts li { list-style: none; display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.4; color: var(--ink); font-weight: 500; cursor: default; }
.facts li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
@media (max-width: 380px) { .facts { grid-template-columns: 1fr; } }
.spec { border-top: 1px solid var(--ink); }
.spec-row { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.spec-row dt { font: 500 12px/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--green); }
.spec-row dd { margin: 0; display: grid; gap: 6px; color: var(--ink); font-variant-numeric: tabular-nums; }
.spec-row dd span { font-size: 15.5px; }
.profile-card { margin-top: 32px; background: var(--mist); padding: 26px; border-radius: 2px; }
.profile-card svg { width: 100%; height: auto; display: block; overflow: visible; }
.profile-card .k { font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--green); margin-bottom: 14px; display: block; }
.profile-card p { margin-top: 12px; font-size: 14px; color: var(--muted); }
@media (max-width: 960px) { .product-top { grid-template-columns: 1fr; } }
@media (max-width: 460px) { .spec-row { grid-template-columns: 1fr; gap: 6px; } }

.gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(10px, 1.2vw, 16px); }
.gallery .tile { position: relative; grid-column: span 2; aspect-ratio: 4 / 3; overflow: hidden; border: 0; padding: 0; cursor: zoom-in; background: var(--mist); border-radius: 2px; }
.gallery .tile.big { grid-column: span 4; grid-row: span 2; aspect-ratio: auto; }
.gallery .tile.half { grid-column: span 3; aspect-ratio: 16 / 10; }
.gallery .tile.full { grid-column: span 6; aspect-ratio: 21 / 9; }
.gallery .tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease); }
@media (hover: hover) { .gallery .tile:hover img { transform: scale(1.03); } }
@media (max-width: 760px) {
  .gallery { grid-template-columns: 1fr 1fr; }
  .gallery .tile, .gallery .tile.half { grid-column: span 1; grid-row: auto; aspect-ratio: 4 / 3; }
  .gallery .tile.big, .gallery .tile.full, .gallery .tile.m-full { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 10; }
}

.swatches { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.swatches h3 { margin-bottom: 20px; }
.swatch-list { display: flex; flex-wrap: wrap; gap: 18px 14px; list-style: none; margin: 0; padding: 0; }
.swatch-list li { width: 92px; display: grid; gap: 8px; font-size: 13px; line-height: 1.3; color: var(--ink); }
.swatch-list img { width: 92px; height: 92px; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 1px var(--line), 0 6px 14px -8px rgba(0,0,0,.35); transition: transform .5s var(--ease); }
.swatch-list li:hover img { transform: scale(1.08) rotate(-6deg); }
@media (max-width: 760px) { .swatches { grid-template-columns: 1fr; } }

/* Chi siamo */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.about-grid > * { min-width: 0; }
.checklist { list-style: none; padding: 0; margin: 24px 0 0; display: grid; }
.checklist li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 16px 0; border-top: 1px solid var(--line); color: var(--ink); }
.checklist li svg { width: 20px; height: 20px; color: var(--green); margin-top: 3px; }
.photo-pair { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; }
.photo-pair .frame:first-child { aspect-ratio: 4 / 5; }
.photo-pair .frame:last-child { aspect-ratio: 4 / 5; margin-top: 70px; }
.timeline-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.timeline-strip .item { border-top: 2px solid var(--green); padding-top: 18px; display: grid; gap: 8px; align-content: start; }
.timeline-strip .item b { font: 800 clamp(36px, 4vw, 56px)/1 var(--display); font-stretch: 112%; color: var(--ink); }
@media (max-width: 860px) { .about-grid, .timeline-strip { grid-template-columns: 1fr; } }

/* Contatti */
.contact-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.contact-grid > * { min-width: 0; }
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; }
.contact-list li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.contact-list svg { width: 22px; height: 22px; color: var(--green); margin-top: 3px; }
.contact-list .k { display: block; font: 500 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.contact-list a, .contact-list strong { color: var(--ink); font-weight: 600; font-size: 18px; text-decoration: none; }
.contact-list a:hover { color: var(--green); }
.form { display: grid; gap: 22px; background: var(--mist); padding: clamp(24px, 4vw, 48px); border-radius: 2px; }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.field { display: grid; gap: 8px; position: relative; }
.field label { font: 500 12px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; border: 0; border-bottom: 1px solid #cfcfcf; background: transparent; padding: 10px 0 12px;
  font: 400 17px/1.4 var(--body); color: var(--ink); border-radius: 0; transition: border-color .3s;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--green); box-shadow: 0 1px 0 0 var(--green); }
.consent { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 13.5px; color: var(--muted); }
.consent input { width: 18px; height: 18px; accent-color: var(--green); margin-top: 2px; }
.form-status { font-size: 15px; padding: 14px 16px; border-left: 3px solid var(--green); background: var(--paper); }
.form-status.err { border-left-color: #a94442; }
.map { position: relative; aspect-ratio: 16 / 7; min-height: 280px; background: var(--mist-2); display: grid; place-items: center; text-align: center; overflow: hidden; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map .inner { display: grid; gap: 16px; justify-items: center; padding: 24px; max-width: 46ch; }
.map p { font-size: 14px; color: var(--muted); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .form .two { grid-template-columns: 1fr; } }

/* Footer */
.site-footer { background: var(--footer); color: var(--footer-text); font-size: 15px; }
.site-footer a { text-decoration: none; } .site-footer a:hover { color: #fff; }
.site-footer .top { display: grid; grid-template-columns: 1.4fr 2fr 1.1fr; gap: 40px; padding-block: clamp(64px, 8vw, 100px) 56px; }
.site-footer h4 { color: #fff; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 18px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer .about p { margin-top: 20px; max-width: 44ch; line-height: 1.7; }
.site-footer .big { font: 800 clamp(48px, 11vw, 168px)/.85 var(--display); font-stretch: 125%; color: rgba(255,255,255,.06); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; padding-inline: var(--gutter); max-width: var(--max); margin-inline: auto; }
.site-footer .bottom { background: var(--footer-deep); font-size: 13px; }
.site-footer .bottom .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-block: 22px calc(22px + env(safe-area-inset-bottom, 0px)); }
.footer-logo { background: #fff; display: inline-block; padding: 10px 14px; border-radius: 2px; }
.footer-logo img { height: 34px; width: auto; }
@media (max-width: 960px) { .site-footer .top { grid-template-columns: 1fr 1fr; } .site-footer .f-prod { grid-column: 1 / -1; } }
@media (max-width: 560px) { .site-footer .top { grid-template-columns: 1fr; } }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 80; background: rgba(20,20,20,.95); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; visibility: hidden; opacity: 0; overscroll-behavior: contain; }
.lightbox.open { visibility: visible; opacity: 1; }
.lightbox .stage { position: relative; display: grid; place-items: center; padding: clamp(64px, 6vw, 80px) clamp(12px, 6vw, 96px) 12px; min-height: 0; touch-action: pinch-zoom; user-select: none; -webkit-user-select: none; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 2px; will-change: transform, opacity; -webkit-user-drag: none; }
.lightbox .bar { min-width: 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; color: #ddd; padding: 14px var(--gutter) calc(18px + env(safe-area-inset-bottom, 0px)); font: 500 13px/1.3 var(--mono); letter-spacing: .08em; }
.lightbox button { background: transparent; border: 1px solid rgba(255,255,255,.3); color: #fff; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; transition: background .3s, border-color .3s; }
@media (hover: hover) { .lightbox button:hover { background: var(--green); border-color: var(--green); } }
.lightbox button:active { background: var(--green); border-color: var(--green); transform: scale(.94); }
.lightbox .title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lightbox .close { position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); right: 14px; }
.lightbox .nav { display: flex; align-items: center; gap: 10px; flex: none; }
.lightbox svg { width: 18px; height: 18px; }


/* Cookie */
.cookie { transform: translateY(24px); opacity: 0; transition: transform .45s var(--ease), opacity .35s ease; position: fixed; z-index: 70; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); max-width: 520px; background: var(--green-dark); color: #fff; padding: 18px 20px; border-radius: 2px; display: grid; gap: 14px; font-size: 14px; box-shadow: 0 20px 50px -20px rgba(0,0,0,.5); }
.cookie .row { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie .btn { padding: 12px 18px; background: #fff; color: var(--green-dark); }
.cookie .btn::before { background: var(--ink); }
.cookie.is-in { transform: none; opacity: 1; }
@media (hover: hover) { .cookie .btn:hover { color: #fff; } }

.reveal-up { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Immagini: niente ingrandimenti oltre la risoluzione, resa più nitida su schermi densi */
img { image-rendering: auto; }
.frame img, .hero-slides img, .page-hero .bg img { backface-visibility: hidden; }

/* Schermi grandi (iMac, monitor 2K/4K) */
@media (min-width: 1680px) {
  :root { --max: 1480px; }
  body { font-size: 18px; }
}
@media (min-width: 2200px) {
  :root { --max: 1680px; }
  body { font-size: 19px; }
  .hero { min-height: min(86vh, 1100px); }
}

/* Tablet in verticale */
@media (min-width: 600px) and (max-width: 1080px) {
  .features { grid-template-columns: 1fr 1fr; }
  .features .feature-card:last-child { grid-column: 1 / -1; }
  .features .feature-card:last-child .frame { aspect-ratio: 16 / 7; }
}

/* Schermi bassi in orizzontale (telefoni ruotati) */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: auto; }
  .hero .wrap { padding-block: calc(var(--header-h) + 60px) 32px; }
  .hero h1 { font-size: clamp(34px, 6vw, 56px); }
  .hero-meta { margin-top: 24px; }
  .drawer { padding-top: calc(var(--header-h) + 50px); }
}

/* Dispositivi touch: niente effetti che richiedono il passaggio del mouse */
@media (hover: none) {
  .sheen::after { display: none; }
  .mosaic .tile .cap { opacity: 1; transform: none; }
}

/* ---------- Transizioni fluide tra le pagine (View Transitions, senza bloccare il click) ---------- */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
/* la nuova pagina sale come un foglio sopra la vecchia, che arretra e si scurisce */
/* durate brevi e solo trasformazioni/opacità + un ritaglio: fluido anche su telefoni meno potenti */
::view-transition-old(root) { animation: vt-out .5s cubic-bezier(.7, 0, .3, 1) both; }
::view-transition-new(root) { animation: vt-in .55s cubic-bezier(.65, 0, .25, 1) both; }
::view-transition-group(site-header) { animation-duration: 0s; }
::view-transition-image-pair(root) { isolation: isolate; background: #1f2421; }
@keyframes vt-out { to { transform: translateY(-3%); opacity: .3; } }
@keyframes vt-in { from { clip-path: inset(100% 0 0 0); transform: translateY(6%); } to { clip-path: inset(0 0 0 0); transform: none; } }
@media (max-width: 760px) {
  ::view-transition-old(root) { animation-duration: .4s; }
  ::view-transition-new(root) { animation-duration: .45s; }
}
/* Browser senza View Transitions: dissolvenza leggera all'apertura */
.no-vt main, .no-vt .site-footer { animation: page-in .55s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* Scorrimento morbido per le ancore quando ScrollSmoother non è attivo */
/* lo scorrimento morbido è gestito da GSAP (ScrollToPlugin): niente scroll-behavior nativo, che lo farebbe scattare */

/* Foto: dissolvenza al caricamento */
.fade-img { opacity: 0; transition: opacity .7s cubic-bezier(.16, 1, .3, 1); }
.fade-img.is-loaded { opacity: 1; }

/* Tocco: risposta immediata e aree cliccabili ampie */
a, button, summary, label { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.btn, .chip, .p-card, .feature-card, .tile, .link-arrow { transition-property: transform, background, color, box-shadow, border-color, opacity; transition-duration: .35s; transition-timing-function: cubic-bezier(.16, 1, .3, 1); }
.btn:active, .chip:active { transform: scale(.97); }
.p-card:active, .feature-card:active, .tile:active { transform: scale(.985); }
.site-footer ul a, .drawer details ul a, .mega ul a { display: inline-block; padding-block: 6px; }
.site-footer ul { gap: 2px; }
.site-footer .f-prod ul { columns: 2; column-gap: 32px; display: block; }
.site-footer .f-prod li { break-inside: avoid; }
@media (max-width: 420px) { .site-footer .f-prod ul { columns: 1; } }
.site-footer a:active, .drawer a:active, .topbar a:active { color: #fff; opacity: .7; }
.drawer a:active { color: var(--green); }
.drawer details summary { min-height: 48px; }
@media (hover: none) {
  .feature-card:hover .frame img, .p-card:hover .frame img, .mosaic .tile:hover img, .gallery .tile:hover img { transform: none; }
}

/* ---------- Nessun lampeggio prima delle animazioni ---------- */
[hidden] { display: none !important; }
.js:not(.anim-ready) [data-split], .js:not(.anim-ready) [data-reveal], .js:not(.anim-ready) [data-unveil],
.js:not(.anim-ready) .hero .eyebrow, .js:not(.anim-ready) .hero .lede, .js:not(.anim-ready) .hero .ctas, .js:not(.anim-ready) .hero-meta,
.js:not(.anim-ready) .page-hero .crumbs, .js:not(.anim-ready) .page-hero .eyebrow, .js:not(.anim-ready) .page-hero .lede { visibility: hidden; }
.hero-slides figure:first-child img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .hero-slides figure:first-child img { transform: none; } }

/* Scorrimento bloccato sotto menu e galleria */
html.is-locked, html.is-locked body { overflow: hidden; }
.drawer { overscroll-behavior: contain; }

/* Filtri: gli elementi esclusi spariscono davvero */
[data-cat].is-hidden { display: none !important; }

/* Realizzazioni: griglia regolare, nessun buco con qualsiasi filtro */
.works { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.4vw, 18px); }
.works .tile { position: relative; overflow: hidden; border-radius: 2px; aspect-ratio: 4 / 3; cursor: zoom-in; border: 0; padding: 0; background: var(--mist); }
.works .tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.works .tile .cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; text-align: left;
  background: linear-gradient(to top, rgba(0,0,0,.6), transparent); color: #fff; font-size: 14px; font-weight: 600;
  transform: translateY(8px); opacity: 0; transition: opacity .4s, transform .5s var(--ease);
}
@media (hover: hover) { .works .tile:hover img { transform: scale(1.03); } .works .tile:hover .cap { opacity: 1; transform: none; } }
.works .tile:focus-visible .cap { opacity: 1; transform: none; }
@media (max-width: 900px) { .works { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .works { grid-template-columns: 1fr; } }

/* Torna su */
.to-top {
  position: fixed; z-index: 40; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: 50px; height: 50px; border-radius: 50%; border: 0; background: var(--green); color: #fff; cursor: pointer;
  display: grid; place-items: center; box-shadow: 0 12px 30px -12px rgba(0,0,0,.45);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .35s ease, transform .45s var(--ease), visibility 0s linear .35s, background .3s;
}
.to-top svg { width: 18px; height: 18px; transform: rotate(-90deg); }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.to-top:active { transform: scale(.92); }
@media (hover: hover) { .to-top:hover { background: var(--green-dark); } }
.nav-open .to-top { opacity: 0; visibility: hidden; }
@media (max-width: 600px) { .cookie-open .to-top { opacity: 0; visibility: hidden; } }

/* Vai al contenuto (tastiera) */
.skip { position: fixed; left: 16px; top: calc(12px + env(safe-area-inset-top, 0px)); z-index: 100; padding: 12px 18px; background: var(--ink); color: #fff; text-decoration: none; border-radius: 2px; transform: translateY(-180%); transition: transform .3s var(--ease); }
.skip:focus { transform: none; }
main:focus { outline: none; }

/* Modulo: campi da correggere ben visibili */
.field [aria-invalid="true"] { border-bottom-color: #a94442; box-shadow: 0 1px 0 0 #a94442; }
.consent input[aria-invalid="true"] { outline: 2px solid #a94442; outline-offset: 2px; }
.form-status { animation: status-in .4s var(--ease); }
@keyframes status-in { from { opacity: 0; transform: translateY(-6px); } }

/* Mappa */
.map iframe { opacity: 0; transition: opacity .6s var(--ease); }
.map.is-loaded iframe { opacity: 1; }
.map-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* Dispositivi touch: nessun effetto «passaggio del mouse» che resta attaccato dopo il tocco */
@media (hover: none) {
  .btn:hover::before { transform: scaleX(0); }
  .btn:active::before { transform: scaleX(1); transform-origin: left; transition-duration: .2s; }
  .btn.ghost:hover { color: #fff; } .btn.ghost:active { color: var(--green-dark); }
  .btn.line:hover { color: var(--ink); } .btn.line:active { color: #fff; }
  .cta .btn:hover { color: var(--green-dark); } .cta .btn:active { color: #fff; }
  .cookie .btn:hover { color: var(--green-dark); } .cookie .btn:active { color: #fff; }
  .chip:hover { border-color: var(--line); color: var(--ink); }
  .chip[aria-pressed="true"], .chip[aria-pressed="true"]:hover { border-color: var(--green); color: #fff; }
  .swatch-list li:hover img { transform: none; }
  .mosaic .tile:hover img, .works .tile:hover img { transform: none; }
}

/* Loghi partner cliccabili */
.marquee .partner-link { display: block; margin-right: clamp(48px, 7vw, 110px); border-radius: 4px; }
.marquee .partner-link img { margin-right: 0; }
@media (hover: hover) { .marquee .partner-link:hover img { filter: none; opacity: 1; } }
.marquee .partner-link:focus-visible img { filter: none; opacity: 1; }
.marquee .partner-link:active img { transform: scale(.96); }

/* ---------- Configuratore preventivo ---------- */
.conf { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: clamp(28px, 4vw, 56px); align-items: start; }
.conf-form { display: grid; gap: 28px; }
.step { border: 1px solid var(--line); border-radius: 4px; padding: clamp(18px, 3vw, 30px); margin: 0; display: grid; gap: 22px; min-width: 0; }
.step legend { display: flex; align-items: center; gap: 12px; padding: 0 8px; font: 700 20px/1 var(--display); font-stretch: 108%; color: var(--ink); }
.step legend .n { width: 30px; height: 30px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font: 600 14px/1 var(--mono); }
.model-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.model-card { position: relative; display: grid; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; transition: border-color .25s, box-shadow .25s, transform .2s; }
.model-card input { position: absolute; opacity: 0; pointer-events: none; }
.model-card .frame { aspect-ratio: 4 / 3; border-radius: 2px; }
.model-card .mc-name { font-weight: 700; color: var(--ink); }
.model-card .mc-sum { font-size: 13px; line-height: 1.4; color: var(--muted); }
.model-card:has(input:checked) { border-color: var(--green); box-shadow: 0 0 0 2px var(--green) inset; }
.model-card:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: 3px; }
@media (hover: hover) { .model-card:hover { border-color: var(--green); } }
.model-card:active { transform: scale(.98); }
.flabel { font: 500 12px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.range-field label output { color: var(--green); font-weight: 600; margin-left: 6px; letter-spacing: 0; }
input[type=range] { width: 100%; accent-color: var(--green); height: 28px; }
.range-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.range-row input { width: 110px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill input { position: absolute; opacity: 0; pointer-events: none; }
.pill span { display: inline-block; padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--ink); cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.pill input:checked + span { background: var(--green); border-color: var(--green); color: #fff; }
.pill input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }
.sw-grid { display: flex; flex-wrap: wrap; gap: 12px 10px; }
.sw-opt { width: 76px; display: grid; justify-items: center; gap: 6px; font-size: 12px; line-height: 1.25; text-align: center; color: var(--ink); cursor: pointer; }
.sw-opt input { position: absolute; opacity: 0; pointer-events: none; }
.sw-opt img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--line); transition: box-shadow .25s, transform .25s; }
.sw-opt input:checked + img { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--green); transform: scale(1.05); }
.sw-opt input:focus-visible + img { outline: 2px solid var(--green); outline-offset: 4px; }
.hint { font-size: 13px; color: var(--muted); }
.conf-summary { position: sticky; top: calc(var(--header-h) + 64px); }
.sum-card { border-radius: 4px; background: var(--mist); padding: 26px; display: grid; gap: 16px; }
.sum-title { font-size: 26px; }
.sum-svg { width: 100%; height: auto; display: block; background: var(--paper); border-radius: 2px; }
.sum-list { margin: 0; display: grid; }
.sum-list > div { display: grid; grid-template-columns: 120px 1fr; gap: 10px; padding: 9px 6px; border-bottom: 1px solid var(--line); border-radius: 2px; }
.sum-list dt { font: 500 11px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sum-list dd { margin: 0; color: var(--ink); font-size: 15px; font-variant-numeric: tabular-nums; }
.sum-actions { display: grid; gap: 10px; }
.sum-actions .btn { justify-content: center; }
@media (max-width: 1080px) { .conf { grid-template-columns: 1fr; } .conf-summary { position: static; } }
@media (max-width: 560px) { .model-grid { grid-template-columns: 1fr 1fr; } .sum-list > div { grid-template-columns: 1fr; gap: 2px; } }

/* Menu animato con GSAP: niente transizioni CSS in conflitto */
.gsap-ui .burger span, .gsap-ui .drawer { transition: none; }
.burger span { transform-origin: 50% 50%; will-change: transform; }
.drawer details ul { overflow: hidden; }
.drawer details.is-closing summary::after { transform: none; }
.drawer details summary::after { transition: transform .35s var(--ease); }
.to-top svg { transition: transform .35s var(--ease); }
@media (hover: hover) { .to-top:hover svg { transform: rotate(-90deg) translateX(3px); } }
/* Con GSAP le linee del burger e la tendina sono animate solo da JS (niente stato CSS che falsi il punto di partenza) */
.gsap-ui .burger span, .gsap-ui.nav-open .burger span:nth-child(n) { transform: none; opacity: 1; }
.drawer > ul > li, .drawer .contact { will-change: transform, opacity; }

/* ---------- Configuratore su telefono e tablet ---------- */
.conf-form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.pill, .sw-opt { position: relative; }
.model-card input, .pill input, .sw-opt input { inset: 0; width: 100%; height: 100%; margin: 0; }
.conf-bar { display: none; }
@media (max-width: 1080px) {
  .conf-bar {
    position: fixed; z-index: 41; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 10px 10px 18px; border-radius: 999px; background: rgba(255,255,255,.97); color: var(--ink);
    box-shadow: 0 14px 34px -14px rgba(0,0,0,.35), 0 0 0 1px var(--line);
    opacity: 0; visibility: hidden; transform: translateY(calc(100% + 24px));
    transition: transform .55s var(--ease), opacity .35s ease, visibility 0s linear .55s;
  }
  .conf-bar.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .conf-bar .cb-txt { display: grid; min-width: 0; line-height: 1.2; }
  .conf-bar .cb-name { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .conf-bar .cb-dim { font: 500 12px/1.4 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
  .conf-bar .btn { padding: 12px 18px; flex: none; min-height: 44px; border-radius: 999px; }
  .conf-bar-on .to-top { opacity: 0; visibility: hidden; }
  .conf-bar-on .cookie { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
  .conf-summary { scroll-margin-top: 90px; }
}
@media (max-width: 760px) {
  .conf { gap: 28px; }
  .conf-form { gap: 18px; }
  .step { padding: 16px 14px 20px; gap: 18px; }
  .step legend { font-size: 18px; padding: 0 6px; }
  .step legend .n { width: 26px; height: 26px; font-size: 13px; }
  .model-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .model-card { padding: 8px; gap: 8px; }
  .model-card .mc-name { font-size: 15px; line-height: 1.2; }
  .model-card .mc-sum { display: none; }
  input[type=range] { height: 40px; }
  .range-row { gap: 6px 10px; font-size: 12.5px; line-height: 1.4; }
  .range-row input { width: 96px; }
  .range-row span { flex: 1 1 160px; }
  .pill span { padding: 11px 16px; min-height: 44px; display: inline-flex; align-items: center; }
  .sw-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 8px; }
  .sw-opt { width: auto; font-size: 11.5px; }
  .sw-opt img { width: 52px; height: 52px; }
  .conf-form .two { grid-template-columns: 1fr; gap: 18px; }
  .sum-card { padding: 20px 16px; }
  .sum-title { font-size: 22px; }
  .sum-actions .btn { min-height: 52px; }
}
@media (max-width: 430px) { .sw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sw-opt span { max-width: 100%; overflow-wrap: break-word; }
.field .sw-opt, .field .pill { font-family: var(--body); text-transform: none; letter-spacing: 0; }
.field .sw-opt { font-size: 12.5px; line-height: 1.3; color: var(--ink); }
.field .pill { font-size: 14px; }

/* ---------- Recensioni ---------- */
.stars { display: inline-flex; gap: 3px; color: var(--green); line-height: 0; }
.stars svg { width: 18px; height: 18px; fill: currentColor; }
.stars.lg svg { width: 26px; height: 26px; }
.reviews { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.rev-score { display: grid; gap: 18px; justify-items: start; }
.rev-score .score { display: flex; align-items: center; gap: 16px; }
.rev-score .big { font: 800 clamp(56px, 8vw, 88px)/.9 var(--display); font-stretch: 112%; color: var(--ink); letter-spacing: -.02em; }
.rev-score .muted { color: var(--muted); margin: 0; }
.rev-list { display: grid; gap: 18px; }
.review { margin: 0; position: relative; background: var(--mist); border-radius: 4px; padding: clamp(22px, 3vw, 34px); display: grid; gap: 16px;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.review::before { content: "\201C"; position: absolute; right: 22px; top: 6px; font: 800 96px/1 var(--display); color: var(--green); opacity: .14; pointer-events: none; }
.review blockquote { margin: 0; }
.review blockquote p { margin: 0; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; color: var(--ink); }
.review figcaption { display: flex; align-items: center; gap: 12px; }
.review figcaption span:last-child { display: grid; line-height: 1.3; }
.review figcaption strong { color: var(--ink); font-size: 15px; }
.review figcaption small { color: var(--muted); font-size: 13px; }
.review .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--green-dark); color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
@media (hover: hover) { .review:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -28px rgba(0,0,0,.35); } }
@media (max-width: 900px) { .reviews { grid-template-columns: 1fr; } }
.trust { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; color: var(--text); text-decoration: none; padding: 12px 14px; background: var(--paper); border-radius: 4px; transition: box-shadow .3s; }
.trust .stars svg { width: 15px; height: 15px; }
.trust strong { color: var(--ink); }
@media (hover: hover) { .trust:hover { box-shadow: 0 0 0 1px var(--green) inset; } }
.trust:active { transform: scale(.98); }

/* Touch: area di tocco più ampia per i link piccoli, senza cambiare l'impaginazione */
@media (pointer: coarse) {
  .topbar a, .crumbs a, .cta a.phone, .contact-list a, .info-list a, .site-footer ul a, .site-footer .bottom a { position: relative; }
  .topbar a::after, .crumbs a::after, .cta a.phone::after, .contact-list a::after, .info-list a::after, .site-footer .bottom a::after {
    content: ""; position: absolute; inset: -12px -8px;
  }
  .site-footer ul a::after { content: ""; position: absolute; inset: -4px -6px; }
}

/* Risposta al tocco anche su opzioni, colori e burger */
.pill span { transition: background .25s, color .25s, border-color .25s, transform .2s var(--ease); }
.pill:active span { transform: scale(.95); }
.sw-opt:active img { transform: scale(.9); }
.burger { transition: transform .2s var(--ease); border-radius: 50%; }
.burger:active { transform: scale(.9); }
.hero-dots button:active i { opacity: .7; }

/* ---------- Contatti su telefono ---------- */
.map { width: 100%; min-width: 0; }
.map .inner { width: 100%; max-width: min(46ch, 100%); box-sizing: border-box; }
@media (max-width: 760px) {
  .map { aspect-ratio: auto; min-height: 0; height: clamp(380px, 62vh, 520px); }
  .map .inner { padding: 28px var(--gutter); }
  .map-actions { display: grid; width: 100%; max-width: 360px; }
  .map-actions .btn { justify-content: center; width: 100%; }
}
.quick { display: none; }
.contact-list a { color: var(--green-dark); text-decoration: underline; text-decoration-color: rgba(0,140,74,.35); text-underline-offset: 4px; text-decoration-thickness: 1px; transition: color .25s, text-decoration-color .25s; }
.contact-list a:active { color: var(--green); }
@media (max-width: 760px) {
  .quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
  .quick a { display: grid; justify-items: center; gap: 8px; padding: 16px 6px 14px; border-radius: 4px; background: var(--mist); color: var(--ink);
    text-decoration: none; font-weight: 600; font-size: 14px; transition: transform .2s var(--ease), background .25s; }
  .quick a:first-child { background: var(--green); color: #fff; }
  .quick svg { width: 24px; height: 24px; color: var(--green); }
  .quick a:first-child svg { color: #fff; }
  .quick a:active { transform: scale(.95); }
  .contact-list li { grid-template-columns: 34px 1fr; padding: 16px 0; }
  .contact-list a, .contact-list strong { font-size: 17px; }
  .form { padding: 22px 16px 26px; gap: 20px; }
  .submit-row .btn { width: 100%; justify-content: center; min-height: 54px; }
  .site-footer .big { font-size: 11.6vw; font-stretch: 100%; padding-inline: 12px; }
}
@media (max-width: 560px) {
  .site-footer .f-prod ul { columns: 2; column-gap: 18px; }
  .site-footer .f-prod li { break-inside: avoid; }
  .site-footer .f-prod a { font-size: 14.5px; line-height: 1.35; }
}

/* ---------- Movimento in più ---------- */
.eyebrow::before { transform: scaleX(var(--ln, 1)); transform-origin: left center; }
.scroll-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; z-index: 3; }
.scroll-progress i { display: block; height: 100%; background: var(--green); transform: scaleX(0); transform-origin: left center; }
.nav-open .scroll-progress { opacity: 0; }
.site-header .navbar { transition: box-shadow .4s var(--ease), background .4s var(--ease); }
.site-header.is-scrolled .navbar { box-shadow: 0 10px 30px -18px rgba(0,0,0,.35); }
img.par { scale: 1.1; translate: 0 var(--py, 0); }
.site-footer .big .bc { display: inline-block; will-change: transform; }
.site-footer .big { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { img.par { scale: none; translate: none; } }

/* ---------- Schermi grandi (monitor Full HD, 2K, 4K) ---------- */
@media (min-width: 1880px) {
  :root { --max: 1560px; --gutter: 64px; }
  body { font-size: 18px; }
  .lede { font-size: 22px; }
}
@media (min-width: 2400px) {
  :root { --max: 1880px; --gutter: 80px; }
  body { font-size: 19.5px; }
  .lede { font-size: 24px; }
  .eyebrow { font-size: 13.5px; }
  .btn { font-size: 15.5px; padding: 18px 30px; }
}

/* ---------- Hero: taglio per foto, numeri sulle barre, versione telefono ---------- */
.hero-slides img { object-position: var(--op, 50%) 50%; }
.hero-dots button .n { position: absolute; left: 0; top: 2px; font: 500 10px/1 var(--mono); letter-spacing: .1em; color: rgba(255,255,255,.5); transition: color .4s, transform .4s var(--ease); }
.hero-dots button[aria-current="true"] .n { color: #fff; transform: translateY(-2px); }
@media (max-width: 760px) {
  .hero { min-height: 100vh; min-height: 100svh; }
  /* foto libera in alto, testo su un fondo verde scuro che sale dal basso: sempre leggibile */
  .hero::after { background:
    linear-gradient(180deg, rgba(16,22,19,.38) 0%, rgba(16,22,19,.06) 22%, rgba(16,22,19,.10) 36%, rgba(18,52,38,.78) 58%, rgba(21,101,71,.97) 100%); }
  .hero .wrap { padding-block: calc(var(--header-h) + 40px) calc(22px + env(safe-area-inset-bottom, 0px)); }
  .hero h1 { font-size: clamp(36px, 10.6vw, 48px); line-height: 1; }
  .hero .eyebrow { margin-bottom: 14px; }
  .hero .lede { font-size: 16px; line-height: 1.5; margin-top: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .hero .ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
  .hero .ctas .btn { justify-content: center; padding: 15px 12px; font-size: 13px; gap: 8px; }
  .hero-meta { margin-top: 22px; padding-top: 12px; gap: 8px; }
  .hero-dots { gap: 6px; }
  .hero-dots button { width: 38px; }
  .hero-dots button .n { display: none; }
  .hero h1, .hero .lede { text-shadow: 0 2px 18px rgba(0,0,0,.35); }
}
@media (max-width: 360px) { .hero .ctas { grid-template-columns: 1fr; } }
/* le diapositive restano sempre sotto la sfumatura e sotto i testi */
.hero-slides { z-index: 0; isolation: isolate; }
.hero::after { z-index: 1; pointer-events: none; }
@media (max-width: 760px) {
  .hero .ctas .btn { white-space: nowrap; letter-spacing: .03em; font-size: 12.5px; }
}
.hero .ctas .btn svg { flex: none; width: 16px; height: 16px; }

/* ---------- Intro (solo prima pagina della visita) ---------- */
html.intro::after {
  content: ""; position: fixed; inset: 0; z-index: 300; pointer-events: none;
  background: #fff url("../img/logo-header-640.webp") center calc(50% - 14px) / min(58vw, 280px) auto no-repeat;
  clip-path: inset(0 0 0 0); transition: clip-path 1s cubic-bezier(.76, 0, .24, 1);
  animation: intro-safety 0s linear 4.5s forwards; /* se lo script non arriva, la tendina sparisce comunque */
}
html.intro::before {
  content: ""; position: fixed; z-index: 301; left: 50%; top: calc(50% + 46px); width: min(40vw, 190px); height: 2px; pointer-events: none;
  background: var(--green); transform: translateX(-50%) scaleX(0); transform-origin: left center;
  animation: intro-bar .95s cubic-bezier(.65, 0, .35, 1) .05s forwards, intro-safety 0s linear 4.5s forwards;
  transition: opacity .3s ease;
}
html.intro.intro-out::after { clip-path: inset(0 0 100% 0); }
html.intro.intro-out::before { opacity: 0; }
html.intro .site-header { transition: none; }
@keyframes intro-bar { to { transform: translateX(-50%) scaleX(1); } }
@keyframes intro-safety { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { html.intro::after, html.intro::before { display: none; } }

/* ---------- Testo che rotola (pulsanti e menu, solo mouse) ---------- */
.roll { position: relative; display: inline-block; overflow: hidden; vertical-align: top; line-height: inherit; padding-block: .08em; margin-block: -.08em; }
.roll > span { display: block; transition: transform .55s cubic-bezier(.76, 0, .24, 1); }
.roll > .r2 { position: absolute; left: 0; top: 100%; width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover .roll > span, .menu > li > a:hover .roll > span { transform: translateY(-100%); }
  .btn .roll > .r2 { transition-delay: .03s; }
}

.marquee { will-change: transform; }
@media (max-width: 760px) {
  /* due pulsanti affiancati se c'è spazio, altrimenti uno sotto l'altro: il testo non viene mai tagliato */
  .hero .ctas { display: flex; flex-wrap: wrap; }
  .hero .ctas .btn { flex: 1 1 auto; letter-spacing: .02em; gap: 6px; padding-inline: 14px; }
}

/* ---------- Selettore lingua IT / EN (interruttore a scorrimento) ---------- */
.lang-switch {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; align-items: center;
  width: 74px; height: 34px; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--mist);
  font: 600 11.5px/1 var(--mono); letter-spacing: .08em; color: var(--muted); text-decoration: none; isolation: isolate;
  -webkit-tap-highlight-color: transparent; flex: none;
}
.lang-switch span { position: relative; z-index: 1; text-align: center; transition: color .45s cubic-bezier(.65, 0, .35, 1); }
.lang-switch i {
  position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px;
  background: var(--green); box-shadow: 0 4px 10px -4px rgba(0,140,74,.6);
  transition: transform .45s cubic-bezier(.65, 0, .35, 1), width .2s ease;
}
.lang-switch[data-lang="it"] .l-it, .lang-switch[data-lang="en"] .l-en { color: #fff; }
.lang-switch[data-lang="en"] i { transform: translateX(100%); }
/* al clic la levetta scorre verso l'altra lingua prima che la pagina cambi */
.lang-switch.is-going[data-lang="it"] i { transform: translateX(100%); }
.lang-switch.is-going[data-lang="en"] i { transform: translateX(0); }
.lang-switch.is-going[data-lang="it"] .l-it, .lang-switch.is-going[data-lang="en"] .l-en { color: var(--muted); }
.lang-switch.is-going[data-lang="it"] .l-en, .lang-switch.is-going[data-lang="en"] .l-it { color: #fff; }
@media (hover: hover) { .lang-switch:hover { border-color: var(--green); } .lang-switch:hover i { width: calc(50% + 2px); } }
.lang-switch:active i { width: calc(50% + 4px); }
.lang-switch:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.nav-cta { display: flex; align-items: center; gap: 14px; }
@media (max-width: 1080px) { .nav-cta { gap: 8px; } }
@media (max-width: 360px) { .lang-switch { width: 66px; height: 32px; font-size: 10.5px; } }

/* ---------- Barra rapida su telefono: Chiama · (WhatsApp) · Preventivo ---------- */
.quick-bar { display: none; }
@media (max-width: 760px) {
  .quick-bar {
    position: fixed; z-index: 41; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(255,255,255,.97);
    box-shadow: 0 14px 34px -14px rgba(0,0,0,.35), 0 0 0 1px var(--line);
    transform: translateY(calc(100% + 24px)); opacity: 0; visibility: hidden;
    transition: transform .6s cubic-bezier(.22, 1, .36, 1), opacity .35s ease, visibility 0s linear .6s;
  }
  .quick-bar.is-on { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
  .quick-bar a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px;
    color: var(--ink); text-decoration: none; font: 600 13px/1 var(--body); letter-spacing: .03em; text-transform: uppercase;
    transition: transform .2s var(--ease), background .25s; }
  .quick-bar svg { width: 18px; height: 18px; flex: none; }
  .quick-bar .qb-call svg { color: var(--green); }
  .quick-bar .qb-wa { padding: 0 12px; color: var(--green-dark); background: var(--mist); }
  .quick-bar .qb-quote { background: var(--green); }
  .quick-bar a:active { transform: scale(.94); }
  .nav-open .quick-bar, .is-locked .quick-bar { transform: translateY(calc(100% + 24px)); opacity: 0; visibility: hidden; }
  /* il pulsante «torna su» resta a destra, la barra a sinistra: non si sovrappongono */
  .quick-bar.is-on ~ .cookie { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 340px) { .quick-bar a { padding: 0 12px; font-size: 12px; } }

/* ---------- Domande frequenti ---------- */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq-head { position: sticky; top: calc(var(--header-h) + 40px); }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0; font: 600 clamp(17px, 1.5vw, 20px)/1.35 var(--display); color: var(--ink); -webkit-tap-highlight-color: transparent; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); transition: background .35s var(--ease), border-color .35s var(--ease), transform .45s var(--ease); }
.faq-item summary i::before, .faq-item summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--green); transform: translate(-50%, -50%); transition: transform .45s var(--ease), background .35s; }
.faq-item summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open]:not(.is-closing) summary i { background: var(--green); border-color: var(--green); transform: rotate(180deg); }
.faq-item[open]:not(.is-closing) summary i::before, .faq-item[open]:not(.is-closing) summary i::after { background: #fff; }
.faq-item[open]:not(.is-closing) summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-a { overflow: hidden; }
.faq-a p { margin: 0; padding: 0 56px 24px 0; color: var(--text); line-height: 1.65; }
@media (hover: hover) { .faq-item summary:hover { color: var(--green-dark); } .faq-item summary:hover i { border-color: var(--green); } }
.faq-item summary:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
@media (max-width: 900px) { .faq-wrap { grid-template-columns: 1fr; } .faq-head { position: static; } .faq-a p { padding-right: 0; } }

/* ---------- Invito a cambiare lingua ---------- */
.lang-tip {
  position: fixed; z-index: 60; right: 16px; top: calc(var(--header-h) + 52px + env(safe-area-inset-top, 0px)); width: min(340px, calc(100vw - 32px));
  background: #fff; color: var(--ink); border-radius: 6px; padding: 16px 16px 14px; box-shadow: 0 24px 50px -22px rgba(0,0,0,.45), 0 0 0 1px var(--line);
  display: grid; gap: 12px; font-size: 14px; line-height: 1.45;
  opacity: 0; transform: translateY(-12px) scale(.98); visibility: hidden; transform-origin: top right;
  transition: opacity .4s ease, transform .6s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .6s;
}
.lang-tip.is-on { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.lang-tip p { margin: 0; color: var(--text); }
.lang-tip strong { color: var(--ink); }
.lang-tip .lt-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lang-tip .btn { padding: 11px 18px; font-size: 12.5px; border-radius: 999px; }
.lang-tip .lt-x { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--mist); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
.lang-tip .lt-x:active { transform: scale(.92); }
.site-header.is-compact ~ .lang-tip, .is-compact + .lang-tip { top: calc(var(--header-h) + 14px); }
.nav-open .lang-tip { opacity: 0; visibility: hidden; }

/* Barre in basso (rapida e configuratore): chiare, come il resto del sito, invece del grigio scuro */
@media (max-width: 760px) {
  .quick-bar { background: rgba(255,255,255,.97); box-shadow: 0 14px 34px -14px rgba(0,0,0,.35), 0 0 0 1px var(--line); }
  .quick-bar a { color: var(--ink); }
  .quick-bar .qb-call svg { color: var(--green); }
  .quick-bar .qb-wa { background: var(--mist); color: var(--green-dark); }
  .quick-bar .qb-quote { color: #fff; }
}
@media (max-width: 1080px) {
  .conf-bar { background: rgba(255,255,255,.97); color: var(--ink); box-shadow: 0 14px 34px -14px rgba(0,0,0,.35), 0 0 0 1px var(--line); }
  .conf-bar .cb-name { color: var(--ink); }
  .conf-bar .cb-dim { color: var(--muted); }
}
.site-footer .bottom .credit { opacity: .75; }
.site-footer .bottom .credit strong { font-weight: 600; color: #fff; letter-spacing: .01em; }

/* Menu «Prodotti» (desktop): il contenitore interno non deve ereditare altezza e centratura della barra dell'header */
.navbar .mega .wrap { display: grid; height: auto; align-items: start; justify-content: stretch; }
.mega { background: #fff; }

/* ---------- Rotaia prodotti libera (tutti i dispositivi): niente pagina «bloccata» ---------- */
.rail { width: auto; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter);
  scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; cursor: grab; }
.rail::-webkit-scrollbar { display: none; }
.rail .p-card { flex: 0 0 auto; scroll-snap-align: start; }
.rail.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.rail.is-dragging .p-card { pointer-events: none; }
.rail.is-gliding { scroll-snap-type: none; }
.rail-ctrl { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
.rail-ctrl .rail-progress { flex: 1; margin-top: 0; }
.rail-btn { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: transparent; color: #fff;
  display: grid; place-items: center; cursor: pointer; transition: background .3s var(--ease), border-color .3s, opacity .3s, transform .2s var(--ease); }
.rail-btn svg { width: 18px; height: 18px; }
.rail-btn:disabled { opacity: .3; cursor: default; }
@media (hover: hover) { .rail-btn:not(:disabled):hover { background: var(--green); border-color: var(--green); } }
.rail-btn:not(:disabled):active { transform: scale(.92); }
.rail-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
@media (max-width: 760px) { .rail-btn { width: 44px; height: 44px; } .rail { cursor: auto; } }

/* ---------- Selettore lingua a tre posizioni IT · EN · DE ---------- */
.lang-switch { grid-template-columns: repeat(3, 1fr); width: 108px; --i: 0; }
.lang-switch[data-idx="1"] { --i: 1; }
.lang-switch[data-idx="2"] { --i: 2; }
.lang-switch .l-opt { position: relative; z-index: 1; display: grid; place-items: center; height: 100%; color: var(--muted); text-decoration: none;
  border-radius: 999px; transition: color .45s cubic-bezier(.65, 0, .35, 1); }
.lang-switch .l-opt.is-cur { color: #fff; }
.lang-switch i, .lang-switch[data-lang="en"] i { width: calc((100% - 6px) / 3); transform: translateX(calc(var(--i) * 100%)); }
.lang-switch.is-going i, .lang-switch.is-going[data-lang] i { transform: translateX(calc(var(--go, var(--i)) * 100%)); }
.lang-switch.is-going .l-opt.is-cur { color: var(--muted); }
.lang-switch.is-going[style*="--go: 0"] .l-opt:nth-child(1), .lang-switch.is-going[style*="--go: 1"] .l-opt:nth-child(2),
.lang-switch.is-going[style*="--go: 2"] .l-opt:nth-child(3) { color: #fff; }
@media (hover: hover) { .lang-switch a.l-opt:hover { color: var(--green-dark); } .lang-switch:hover i { width: calc((100% - 6px) / 3); } }
.lang-switch a.l-opt:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
@media (max-width: 360px) { .lang-switch { width: 96px; } }

/* Lingue con parole lunghe (tedesco): titolo e categoria delle schede vanno a capo invece di allargare la griglia */
.p-card { min-width: 0; }
.p-card .row { flex-wrap: wrap; row-gap: 4px; min-width: 0; }
.p-card .row h3 { min-width: 0; overflow-wrap: break-word; }
.p-card .cat { white-space: normal; min-width: 0; }
html[lang="de"] h1, html[lang="de"] h2, html[lang="de"] h3, html[lang="de"] .cat, html[lang="de"] .eyebrow { hyphens: auto; overflow-wrap: break-word; }
html[lang="de"] p, html[lang="de"] li, html[lang="de"] dd, html[lang="de"] summary { overflow-wrap: break-word; }
.facts li { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 430px) { html[lang="de"] .facts { grid-template-columns: 1fr; } }
/* titolo della home in tedesco: parole lunghe («Überdachungen») su schermi molto stretti */
@media (max-width: 380px) { html[lang="de"] .hero h1 { font-size: clamp(30px, 9.4vw, 40px); } }
html[lang="de"] .page-hero h1 { font-size: clamp(32px, 8.6vw, 84px); }
.site-footer .f-prod a { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 360px) { html[lang="de"] .site-footer .f-prod ul { columns: 1; } }

/* firma in fondo: cliccabile, apre l'email dell'autore */
.site-footer .bottom a.credit { color: inherit; text-decoration: none; transition: opacity .3s ease; display: inline-block; padding: 12px 0; margin: -12px 0; }
.site-footer .bottom a.credit strong { text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 3px; transition: text-decoration-color .3s ease; }
.site-footer .bottom a.credit:hover, .site-footer .bottom a.credit:focus-visible { opacity: 1; }
.site-footer .bottom a.credit:hover strong, .site-footer .bottom a.credit:focus-visible strong { text-decoration-color: #fff; }

/* configuratore: schede modello con disegno chiaro + foto reale piccola */
.model-card .mc-visual { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 3px; background: var(--mist); overflow: hidden; }
.mc-art { display: block; width: 100%; height: 100%; }
.mc-art .w { fill: #e4e4e4; stroke: var(--ink); stroke-width: 1.2; }
.mc-art .gr { stroke: var(--muted); stroke-width: 1.2; }
.mc-art .p { fill: var(--muted); opacity: .28; }
.mc-art .g { fill: none; stroke: var(--green); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.mc-art .s { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.mc-art .t { stroke-width: 1.4; }
.model-card .mc-photo { position: absolute; right: 6px; bottom: 6px; width: 27%; aspect-ratio: 1; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 2px #fff, 0 4px 12px -4px rgba(0,0,0,.35); }
.model-card .mc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.model-card .mc-cap { font-size: 13px; line-height: 1.35; color: var(--green-dark); font-weight: 600; }
.model-card:has(input:checked) .mc-visual { background: #eaf4ee; }

/* barra rapida su telefono: più compatta, e il «torna su» sale sopra la barra invece di coprirla */
@media (max-width: 760px) {
  .quick-bar { gap: 4px; }
  .quick-bar a { padding: 0 14px; }
  .quick-bar .qb-wa { padding: 0; width: 44px; justify-content: center; }
  body:has(.quick-bar.is-on) .to-top { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 400px) {
  .quick-bar a { padding: 0 12px; gap: 6px; letter-spacing: .02em; }
  .quick-bar .qb-quote svg { display: none; }
}

/* configuratore: al tocco la foto si sposta nell'angolo e il disegno si costruisce (muro, terra, struttura, lastra, persona) */
.js .model-card .mc-photo { inset: 0; right: 0; bottom: 0; width: auto; aspect-ratio: auto; border-radius: 3px; z-index: 1;
  transform-origin: calc(100% - 6px) calc(100% - 6px); box-shadow: 0 0 0 0 #fff;
  transition: transform .8s cubic-bezier(.34, 1.3, .64, 1), border-radius .75s, box-shadow .75s; }
.js .model-card.is-on .mc-photo { transform: scale(.27) rotate(-4deg); border-radius: 10px; box-shadow: 0 0 0 7px #fff, 0 16px 40px -12px rgba(0,0,0,.5); }
.js .mc-art .w { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.js .mc-art .gr { transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(0); transition: transform .5s ease; }
.js .mc-art path.s, .js .mc-art path.g { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s ease-in-out; }
.js .mc-art circle.s { opacity: 0; transition: opacity .3s; }
.js .model-card.is-on .mc-art .w { transform: none; transition-delay: .25s; }
.js .model-card.is-on .mc-art .gr { transform: none; transition-delay: .3s; }
.js .model-card.is-on .mc-art circle.s { opacity: 1; transition-delay: .6s; }
.js .model-card.is-on .mc-art path.s { stroke-dashoffset: 0; transition-delay: .6s; }
.js .model-card.is-on .mc-art path.g { stroke-dashoffset: 0; transition-delay: 1s; transition-duration: .8s; }
@media (prefers-reduced-motion: reduce) {
  .js .model-card .mc-photo, .js .mc-art * { transition: none !important; }
}

/* configuratore, riepilogo: schema che si costruisce (lastra, trave, travetti, supporti, quote) */
.sum-svg.is-anim .cv-roof, .sum-svg.is-anim .cv-beam { transform-box: fill-box; transform-origin: 0 50%; animation: cv-grow-x .7s cubic-bezier(.22, 1, .36, 1) backwards; }
.sum-svg.is-anim .cv-beam { animation-delay: .12s; }
.sum-svg.is-anim .cv-raf { animation: cv-drop .45s cubic-bezier(.34, 1.56, .64, 1) backwards; animation-delay: calc(.55s + var(--i) * .07s); }
.sum-svg.is-anim .cv-sup { stroke-dasharray: 1; animation: cv-draw .6s ease-in-out backwards; animation-delay: calc(.9s + var(--i) * .1s); }
.sum-svg.is-anim .cv-pin { animation: cv-fade .3s ease backwards; animation-delay: calc(.9s + var(--i) * .1s); }
.sum-svg.is-anim .cv-col { transform-box: fill-box; transform-origin: 50% 0; animation: cv-grow-y .6s cubic-bezier(.22, 1, .36, 1) backwards; animation-delay: calc(.9s + var(--i) * .1s); }
.sum-svg.is-anim .cv-led { animation: cv-fade .6s ease backwards 1.4s; }
.sum-svg.is-anim .cv-dim { transform-box: fill-box; transform-origin: 50% 50%; animation: cv-grow-x .6s cubic-bezier(.22, 1, .36, 1) backwards 1.25s; }
.sum-svg.is-anim .cv-txt { animation: cv-fade .5s ease backwards 1.55s; }
@keyframes cv-grow-x { from { transform: scaleX(0); } }
@keyframes cv-grow-y { from { transform: scaleY(0); } }
@keyframes cv-drop { from { opacity: 0; transform: translateY(-14px); } }
@keyframes cv-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes cv-fade { from { opacity: 0; } }

/* campioni colore: contorno più deciso, così anche i bianchi si vedono su fondo bianco */
.swatch-list img, .sw-opt img { box-shadow: 0 0 0 1px rgba(0,0,0,.16), inset 0 0 0 1px rgba(0,0,0,.06), 0 6px 14px -8px rgba(0,0,0,.35); }

/* link all'informativa sotto il consenso, fuori dall'etichetta: toccare il testo spunta la casella, non apre la pagina */
.consent-link { margin: -4px 0 0 34px; font-size: 13.5px; }
.consent-link a { color: var(--green-dark); text-underline-offset: 3px; display: inline-block; padding: 6px 0; }

/* schede modello, versione più curata: scheda scelta sollevata con spunta, fondo a quadretti da disegno tecnico,
   la persona entra camminando sotto la pensilina */
.model-card { transition: border-color .25s, box-shadow .35s, transform .35s cubic-bezier(.22, 1, .36, 1); }
.model-card.is-on { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--green) inset, 0 16px 34px -18px rgba(0, 80, 40, .45); }
.model-card .mc-visual::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s ease .15s;
  background-image: linear-gradient(rgba(0,140,74,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(0,140,74,.09) 1px, transparent 1px);
  background-size: 14px 14px; }
.model-card.is-on .mc-visual::before { opacity: 1; }
.js .mc-art .pg { opacity: 0; transform: translateX(-34px); transition: opacity .35s ease, transform .9s cubic-bezier(.22, 1, .36, 1); }
.js .model-card.is-on .mc-art .pg { opacity: 1; transform: none; transition-delay: 1.45s; }
.js .model-card.is-on .mc-art .pg .p { animation: mc-walk .3s ease-in-out 1.45s 3 alternate; }
@keyframes mc-walk { to { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .model-card, .model-card.is-on, .js .mc-art .pg { transition: none !important; animation: none !important; } }

/* riepilogo: pallini colore accanto ai colori scelti */
.sum-list .chip { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-right: 8px; vertical-align: -2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.4); transition: background-color .4s ease; }
.sum-list dd:has(.chip) { display: flex; align-items: center; gap: 10px; }
.sum-list .chip { flex: 0 0 16px; width: 16px; height: 16px; margin: 0; padding: 0; }


/* schede modello, disegno più curato: muro tratteggiato come nelle sezioni tecniche, lastra «di vetro» (fascia chiara + filo),
   ombra a terra sotto la pensilina, sagoma della persona; quando si cambia modello il disegno svanisce in fretta */
.mc-art .w rect { fill: #ececec; stroke: var(--ink); stroke-width: 1.2; }
.mc-art .w .hx line { stroke: var(--muted); stroke-width: .7; opacity: .7; }
.mc-art .gb { fill: none; stroke: var(--green); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; opacity: .16; }
.mc-art .g { stroke-width: 3.2; }
.mc-art .sh { fill: #1d3b2c; opacity: .16; }
.mc-art .p { fill: var(--muted); opacity: .32; }
.js .mc-art .w { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform .3s ease; }
.js .model-card.is-on .mc-art .w { transform: none; transition: transform .55s cubic-bezier(.22, 1, .36, 1) .25s; }
.js .mc-art path.gb { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .3s ease; }
.js .model-card.is-on .mc-art path.gb { stroke-dashoffset: 0; transition: stroke-dashoffset .9s ease-in-out 1.05s; }
.js .mc-art path.s, .js .mc-art path.g { transition-duration: .3s; }
.js .model-card.is-on .mc-art path.s { transition-duration: .7s; }
.js .model-card.is-on .mc-art path.g { transition-duration: .85s; }
.js .mc-art .sh { transform-box: fill-box; transform-origin: 50% 50%; transform: scaleX(0); opacity: 0; transition: transform .3s ease, opacity .3s ease; }
.js .model-card.is-on .mc-art .sh { transform: none; opacity: .16; transition: transform .9s cubic-bezier(.22, 1, .36, 1) 1.7s, opacity .9s ease 1.7s; }
.js .mc-art .pg { transition: opacity .25s ease, transform .3s ease; }
.js .model-card.is-on .mc-art .pg { transition: opacity .4s ease 1.5s, transform 1s cubic-bezier(.22, 1, .36, 1) 1.5s; }
@media (prefers-reduced-motion: reduce) { .js .mc-art .w, .js .mc-art path.gb, .js .mc-art .sh { transition: none !important; } }

/* riepilogo: WhatsApp, condividi, PDF */
.sum-actions .btn.wa { background: #fff; color: var(--green-dark); border: 1.5px solid var(--green); }
.sum-actions .btn.wa svg { width: 20px; height: 20px; color: #1fa855; }
@media (hover: hover) { .sum-actions .btn.wa:hover { background: #eaf6ef; } }
.sum-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sum-mini .btn { padding-inline: 10px; gap: 8px; font-size: 12px; }
.sum-mini .btn svg { width: 17px; height: 17px; flex: none; }
.print-head, .print-foot { display: none; }

/* stampa / «Scarica PDF»: solo il riepilogo, con logo e contatti */
@media print {
  @page { size: A4; margin: 14mm; }
  html, body { background: #fff !important; }
  #smooth-wrapper, #smooth-content { position: static !important; transform: none !important; height: auto !important; overflow: visible !important; }
  .site-header, .site-footer, .page-hero, .faq, .faq-section, .quick-bar, .to-top, .cookie, .conf-bar, .lang-tip, .lightbox, .drawer, .skip,
  .conf-form, .sum-actions, .trust, .form-status, .sum-card .hint { display: none !important; }
  main > *:not(:has(.conf)) { display: none !important; }
  .conf > :not(.conf-summary) { display: none !important; }
  main > :has(.conf) { padding: 0 !important; margin: 0 !important; }
  .conf { display: block !important; }
  .conf-summary { position: static !important; width: 100% !important; max-width: none !important; }
  .sum-card { background: #fff !important; padding: 0 !important; box-shadow: none !important; }
  [data-reveal], .sum-card * { opacity: 1 !important; transform: none !important; visibility: visible !important; }
  .print-head { display: flex !important; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 12px; margin-bottom: 8px; border-bottom: 2px solid #008C4A; }
  .print-head img { width: 190px; height: auto; }
  .print-head .ph-co { display: grid; text-align: right; font-size: 10.5px; line-height: 1.45; color: #2F2F2F; }
  .print-foot { display: block !important; font-size: 10px; color: #4C4C4C; border-top: 1px solid #ddd; padding-top: 8px; word-break: break-all; }
  .sum-svg { border: 1px solid #e3e3e3; }
  .sum-list > div { break-inside: avoid; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.sum-mini .btn { white-space: normal; line-height: 1.2; text-align: center; min-height: 52px; }

/* colori RAL senza foto del campione: pallino pieno, stesso aspetto degli altri */
.sw-dot { display: block; width: 56px; height: 56px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.16), inset 0 0 0 1px rgba(255,255,255,.25), 0 6px 14px -8px rgba(0,0,0,.35); transition: box-shadow .25s, transform .25s; }
.sw-any { background: conic-gradient(#af2b1e, #e6d690, #2f4538, #0e294b, #5e2129, #af2b1e); }
.sw-opt input:checked + .sw-dot { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--green); transform: scale(1.05); }
@media (max-width: 760px) { .sw-dot { width: 52px; height: 52px; } }

/* tavolozza «Altro RAL»: pallini da toccare con nome e codice */
.ral-pal { margin-top: 14px; padding: 14px; border-radius: 4px; background: var(--mist); overflow: hidden; }
.ral-pal .hint { margin: 0 0 10px; }
.ral-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 12px 8px; }
.ral-opt { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; cursor: pointer; }
.ral-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ral-dot { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.16), inset 0 0 0 1px rgba(255,255,255,.25); transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s; }
.ral-n { font-size: 12px; line-height: 1.25; color: var(--ink); }
.ral-n small { display: block; font: 500 10px/1.4 var(--mono); letter-spacing: .06em; color: var(--muted); }
.ral-opt input:checked + .ral-dot { box-shadow: 0 0 0 3px var(--mist), 0 0 0 5px var(--green); transform: scale(1.1); }
.ral-opt input:focus-visible + .ral-dot { outline: 2px solid var(--green); outline-offset: 4px; }
@media (hover: hover) { .ral-opt:hover .ral-dot { transform: scale(1.08); } }
.ral-opt, .ral-opt .ral-n { font: 400 12.5px/1.25 var(--body); text-transform: none; letter-spacing: 0; color: var(--ink); }
.ral-opt .ral-n small { font: 500 10.5px/1.5 var(--mono); letter-spacing: .04em; text-transform: none; color: var(--muted); }

/* selettore lingua: levetta che scorre morbida, senza «gonfiarsi» al tocco (regola rimasta dalla versione a due lingue) */
.lang-switch i, .lang-switch[data-lang] i { transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease; will-change: transform; }
.lang-switch:active i, .lang-switch:hover i { width: calc((100% - 6px) / 3); }
.lang-switch .l-opt { transition: color .35s ease; }
.lang-switch.is-going i { box-shadow: 0 6px 16px -6px rgba(0,140,74,.7); }
@media (prefers-reduced-motion: reduce) { .lang-switch i, .lang-switch .l-opt { transition: none !important; } }

/* riepilogo: vista laterale del modello scelto, sotto la vista frontale */
.sum-side { margin-top: -6px; }
.sum-svg.is-anim .sd-w { transform-box: fill-box; transform-origin: 50% 100%; animation: cv-grow-y .5s cubic-bezier(.22, 1, .36, 1) backwards .1s; }
.sum-svg.is-anim .sd-s { stroke-dasharray: 1; animation: cv-draw .6s ease-in-out backwards .45s; }
.sum-svg.is-anim .sd-g { stroke-dasharray: 1; animation: cv-draw .8s ease-in-out backwards .8s; }
.sum-svg.is-anim .sd-pin, .sum-svg.is-anim .sd-col { animation: cv-fade .4s ease backwards 1s; }
.sum-svg.is-anim .sd-p { animation: cv-fade .5s ease backwards 1.4s; }
.sum-svg.is-anim .sd-dim { transform-box: fill-box; transform-origin: 0 50%; animation: cv-grow-x .6s cubic-bezier(.22, 1, .36, 1) backwards 1.3s; }
.sum-svg.is-anim .sd-txt { animation: cv-fade .5s ease backwards 1.6s; }

/* schema più realistico: porta, ombra, profili, piastre, bulloni e riflesso di luce sul vetro */
.sum-svg.is-anim .cv-door { animation: cv-fade .5s ease backwards .05s; }
.sum-svg.is-anim .cv-sh, .sum-svg.is-anim .sd-sh { transform-box: fill-box; transform-origin: 50% 50%; animation: cv-grow-x .8s cubic-bezier(.22, 1, .36, 1) backwards 1.2s; }
.sum-svg.is-anim .cv-sweep { animation: cv-sweep 1.1s cubic-bezier(.45, 0, .2, 1) 1.75s; }
@keyframes cv-sweep { 0% { opacity: 0; transform: none; } 15% { opacity: .75; } 85% { opacity: .75; } 100% { opacity: 0; transform: translateX(var(--w)); } }
.sum-svg.is-anim .sd-r { stroke-dasharray: 1; animation: cv-draw .7s ease-in-out backwards .6s; }
.sum-svg.is-anim .sd-f { transform-box: fill-box; transform-origin: 50% 50%; animation: sd-pop .45s cubic-bezier(.34, 1.56, .64, 1) backwards 1.15s; }
.sum-svg.is-anim .sd-gl { stroke-dasharray: .14 1.3; animation: sd-glint 1.1s ease-in-out 1.9s; }
@keyframes sd-pop { from { opacity: 0; transform: scale(.3); } }
@keyframes sd-glint { 0% { opacity: 0; stroke-dashoffset: .14; } 15% { opacity: .9; } 85% { opacity: .9; } 100% { opacity: 0; stroke-dashoffset: -1.16; } }
/* schede: piastre, bulloni e tenditori compaiono dopo le linee, poi un riflesso corre sul vetro */
.mc-art .f { fill: var(--ink); }
.mc-art .fw { fill: #fff; }
.mc-art .gl { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; opacity: 0; }
.js .mc-art .f, .js .mc-art .fw { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; transform: scale(.3); transition: opacity .2s ease, transform .2s ease; }
.js .model-card.is-on .mc-art .f, .js .model-card.is-on .mc-art .fw { opacity: 1; transform: none; transition: opacity .3s ease 1.3s, transform .45s cubic-bezier(.34, 1.56, .64, 1) 1.3s; }
.js .model-card.is-on .mc-art .gl { stroke-dasharray: .14 1.3; animation: sd-glint 1.1s ease-in-out 2.1s; }
@media (prefers-reduced-motion: reduce) {
  .js .mc-art .f, .js .mc-art .fw { transition: none !important; }
  .js .model-card.is-on .mc-art .gl, .sum-svg.is-anim .cv-sweep, .sum-svg.is-anim .sd-gl { animation: none !important; }
}

/* vista 3D (riepilogo e schede): muro, porta, travetti che si disegnano, lastra che si posa, supporti, riflesso */
.sum-svg.is-anim .d3-w, .model-card.is-on .d3-w { animation: cv-fade .45s ease backwards; }
.sum-svg.is-anim .d3-door, .model-card.is-on .d3-door { animation: cv-fade .45s ease backwards .15s; }
.sum-svg.is-anim .d3-e, .model-card.is-on .d3-e { stroke-dasharray: 1; animation: cv-draw .55s ease-in-out backwards .3s; }
.sum-svg.is-anim .d3-r, .model-card.is-on .d3-r { stroke-dasharray: 1; animation: cv-draw .6s cubic-bezier(.65, 0, .35, 1) backwards; animation-delay: calc(.45s + var(--i) * .07s); }
.sum-svg.is-anim .d3-s, .model-card.is-on .d3-s { stroke-dasharray: 1; animation: cv-draw .55s ease-in-out backwards; animation-delay: calc(.75s + var(--i) * .1s); }
.sum-svg.is-anim .d3-g, .model-card.is-on .d3-g { animation: d3-lay .7s cubic-bezier(.22, 1, .36, 1) backwards 1.05s; }
.sum-svg.is-anim .d3-f, .model-card.is-on .d3-f { animation: cv-fade .35s ease backwards 1.35s; }
.sum-svg.is-anim .d3-sh, .model-card.is-on .d3-sh { animation: cv-fade .8s ease backwards 1.4s; }
.sum-svg.is-anim .d3-led, .model-card.is-on .d3-led { animation: cv-fade .6s ease backwards 1.6s; }
.sum-svg.is-anim .d3-gl, .model-card.is-on .d3-gl { stroke-dasharray: .16 1.3; animation: sd-glint 1.1s ease-in-out 1.9s; }
@keyframes d3-lay { from { opacity: 0; transform: translateY(-10px); } }
.mc-art.mc-3d { background: transparent; }
@media (prefers-reduced-motion: reduce) { .sum-svg [class^="d3-"], .model-card [class^="d3-"] { animation: none !important; } }

/* vista 3D più veloce; la porta si apre, una persona esce e si ferma sotto la pensilina, poi la porta si richiude */
.sum-svg.is-anim .d3-w, .model-card.is-on .d3-w { animation-duration: .3s; }
.sum-svg.is-anim .d3-door, .model-card.is-on .d3-door { animation: cv-fade .3s ease backwards .08s; }
.sum-svg.is-anim .d3-e, .model-card.is-on .d3-e { animation-duration: .4s; animation-delay: .18s; }
.sum-svg.is-anim .d3-r, .model-card.is-on .d3-r { animation-duration: .42s; animation-delay: calc(.26s + var(--i) * .045s); }
.sum-svg.is-anim .d3-s, .model-card.is-on .d3-s { animation-duration: .4s; animation-delay: calc(.45s + var(--i) * .06s); }
.sum-svg.is-anim .d3-g, .model-card.is-on .d3-g { animation-duration: .5s; animation-delay: .62s; }
.sum-svg.is-anim .d3-f, .model-card.is-on .d3-f { animation-delay: .8s; }
.sum-svg.is-anim .d3-sh, .model-card.is-on .d3-sh { animation-duration: .5s; animation-delay: .85s; }
.sum-svg.is-anim .d3-led, .model-card.is-on .d3-led { animation-delay: .95s; }
.sum-svg.is-anim .d3-gl, .model-card.is-on .d3-gl { animation-duration: .9s; animation-delay: 1.05s; }
.d3-leaf { transform-box: fill-box; transform-origin: 0 50%; }
.sum-svg.is-anim .d3-leaf, .model-card.is-on .d3-leaf { animation: d3-open 1.9s cubic-bezier(.4, 0, .2, 1) .7s; }
.sum-svg.is-anim .d3-man, .model-card.is-on .d3-man { animation: d3-walk 1.3s cubic-bezier(.35, .05, .3, 1) backwards .85s; }
.sum-svg.is-anim .d3-leg, .model-card.is-on .d3-leg { animation: d3-step .24s ease-in-out 1.1s 4 alternate; }
.sum-svg.is-anim .d3-leg2, .model-card.is-on .d3-leg2, .sum-svg.is-anim .d3-arm, .model-card.is-on .d3-arm { animation-direction: alternate-reverse; }
.sum-svg.is-anim .d3-arm, .model-card.is-on .d3-arm { animation: d3-swing .24s ease-in-out 1.1s 4 alternate-reverse; }
.sum-svg.is-anim .d3-arm2, .model-card.is-on .d3-arm2 { animation-direction: alternate; }
.d3-plant { transform-box: fill-box; transform-origin: 50% 100%; }
.sum-svg.is-anim .d3-plant, .model-card.is-on .d3-plant { animation: d3-grow .5s cubic-bezier(.34, 1.56, .64, 1) backwards .35s; }
@keyframes d3-open { 0% { transform: none; } 16% { transform: scaleX(.08); } 72% { transform: scaleX(.08); } 100% { transform: none; } }
@keyframes d3-walk { 0% { opacity: 0; transform: translate(var(--wx), var(--wy)); } 16% { opacity: 1; transform: translate(var(--wx), var(--wy)); } 100% { opacity: 1; transform: none; } }
@keyframes d3-step { from { transform: rotate(14deg); } to { transform: rotate(-14deg); } }
@keyframes d3-swing { from { transform: rotate(12deg); } to { transform: rotate(-12deg); } }
@keyframes d3-grow { from { transform: scale(0); } }
@media (prefers-reduced-motion: reduce) { .sum-svg .d3-leaf, .sum-svg .d3-man, .sum-svg .d3-leg, .sum-svg .d3-arm, .sum-svg .d3-plant, .model-card .d3-leaf, .model-card .d3-man, .model-card .d3-leg, .model-card .d3-arm, .model-card .d3-plant { animation: none !important; } }