/* ══════════════════════════════════════════════════════════════
   FERGOLA SERRAMENTI — foglio di stile  (v8, col copy THK)
   Grafica: il mockup approvato (Resources/Design/…/reference), invariata nei
   componenti (colori campionati dai pixel, misure verificate a 1440 px).
   v8: testi di Copy/copy.md; sezioni nuove nello stesso linguaggio
   (materiali, colore, modulo, chi siamo); tolti valori, recensioni e banner cookie.
   Ordine delle media query: base → 1279 → 1180 → 1023 → 767 → 479 → reduced-motion.
   ══════════════════════════════════════════════════════════════ */

@font-face{font-family:"Manrope";src:url("../fonts/Manrope-Variable.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Caveat";src:url("../fonts/Caveat-sub.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --arancio:#f7661c;
  --arancio-hover:#ea5a12;
  --arancio-fascia:#fc8036;
  --arancio-testo:#e0590f;
  --pesca:#fdc9a9;
  --pesca-chiaro:#fcdbc0;
  --inchiostro:#171717;
  --grigio:#5b5b5b;
  --grigio-chiaro:#8a8a8a;
  --scuro:#1c1c1c;
  --scuro-faq:#181818;
  --scuro-piede:#1a1a1a;
  --fascia:#f1f1f1;
  --chiaro:#fafafa;
  --bianco:#fff;
  --bordo:#e4e4e4;
  --errore:#c62828;
  --ombra:0 6px 22px rgb(0 0 0 / .06);
  --r:5px;
  --font:"Manrope",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mano:"Caveat","Segoe Print",cursive;
  --gutter:clamp(20px,5.1vw,74px);
  --max:1292px;
  --testata:118px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--testata) - 10px);-webkit-text-size-adjust:100%}
body{margin:0;font:400 16px/1.55 var(--font);color:var(--inchiostro);background:var(--bianco);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select{font:inherit;color:inherit}
fieldset{margin:0;padding:0;border:0;min-width:0}
legend{padding:0}
em{font-style:normal}
[hidden]{display:none!important}
.wrap{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto}
.centro{text-align:center}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:#000;color:#fff;padding:10px 14px;border-radius:var(--r)}
.skip:focus{left:8px}
:where(a,button,summary,[tabindex]):focus-visible{outline:3px solid var(--arancio);outline-offset:3px;border-radius:3px}
.fascia-cta :focus-visible{outline-color:var(--inchiostro)}

/* ── icone (sprite del kit; lo spessore è in unità del viewBox 48) ── */
.ico{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;vertical-align:middle}
.ico--xs{width:16px;height:16px;stroke-width:5}
.ico--wa{width:24px;height:24px;stroke-width:3.2}
.ico--testata{width:26px;height:26px;stroke-width:3}
.ico--tel{width:22px;height:22px;stroke-width:3.2}

/* ── tipografia comune ── */
.occhiello{font-size:14px;font-weight:800;letter-spacing:.24em;line-height:1.2;text-transform:uppercase;color:var(--arancio);margin-bottom:8px}
.titolo{font-size:clamp(30px,3.5vw,51px);font-weight:800;line-height:1.1;letter-spacing:-.035em;color:var(--inchiostro)}
.titolo--bianco{color:#fff}
.accento{color:var(--arancio)}
.sezione{padding-block:clamp(48px,5.6vw,80px)}

/* ── pulsanti ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:12px 26px;border-radius:4px;border:1.5px solid transparent;font:700 15.5px/1.25 var(--font);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .18s,border-color .18s,color .18s,transform .18s}
.btn:active{transform:translateY(1px)}
.btn--arancio{background:var(--arancio);color:#fff}
.btn--arancio:hover{background:var(--arancio-hover)}
.btn--vetro{border-color:rgb(255 255 255 / .75);color:#fff;background:rgb(0 0 0 / .25);min-width:150px}
.btn--vetro:hover{background:rgb(255 255 255 / .12)}
.btn--bordo{border:2px solid var(--arancio);color:var(--arancio-testo);background:#fff;min-height:48px;padding-inline:18px}
.btn--bordo:hover{background:#fff3ec}
.btn--bianco{background:#fff;color:var(--arancio-testo);min-height:60px;padding-inline:32px;font-size:16px}
.btn--bianco .ico--wa{width:30px;height:30px;color:var(--arancio)}
.btn--bianco:hover{background:#fff6f0}
.btn--scuro{background:var(--inchiostro);color:#fff;min-height:60px;padding-inline:32px;font-size:16px}
.btn--scuro:hover{background:#000}

/* ══ TESTATA ══ */
.testata{position:sticky;top:0;z-index:50;background:#fcfcfc;box-shadow:0 2px 6px rgb(0 0 0 / .04);transition:box-shadow .25s}
.testata.is-scorsa{box-shadow:0 6px 24px rgb(0 0 0 / .08)}
.testata__in{display:flex;align-items:center;gap:32px;height:var(--testata)}
.testata__logo{flex-shrink:0;display:block}
.testata__logo img{width:132px;height:auto}
.menu{margin-left:auto;margin-right:auto;margin-top:-14px}
.menu__lista{display:flex;align-items:center;gap:32px}
.menu__voce{position:relative;display:inline-flex;align-items:center;gap:6px;padding:10px 0;border:0;background:none;font:600 14.5px/1 var(--font);color:var(--inchiostro);text-decoration:none;white-space:nowrap;cursor:pointer;transition:color .18s}
.menu__voce::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--arancio);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.menu__voce:hover{color:var(--arancio)}
.menu__voce:hover::after,.menu__voce.is-attiva::after{transform:scaleX(1)}
.menu__voce.is-attiva{color:var(--arancio)}
.menu__voce.is-attiva::after{left:-8px;right:-8px}
.menu__tendina{position:relative}
.menu__apri .ico{transition:transform .2s}
.menu__apri[aria-expanded="true"] .ico{transform:rotate(180deg)}
.sottomenu{position:absolute;top:calc(100% + 14px);left:-18px;min-width:250px;padding:10px;background:#fff;border-radius:6px;box-shadow:0 18px 40px rgb(0 0 0 / .12);border:1px solid #eee}
.sottomenu a{display:block;padding:10px 12px;border-radius:4px;font-size:15px;font-weight:500;text-decoration:none}
.sottomenu a:hover{background:#fff3ec;color:var(--arancio-testo)}
.sottomenu__riga{margin-top:6px;padding-top:6px;border-top:1px solid #eee}
.btn--testata{min-height:58px;padding:9px 20px;gap:12px;font-size:13.5px;line-height:1.3;text-align:left;white-space:normal}
.hamburger{display:none;margin-left:auto;width:48px;height:48px;border:0;border-radius:6px;background:none;cursor:pointer;align-items:center;justify-content:center}
.hamburger .ico{width:30px;height:30px}

/* menu a tutto schermo */
.menu-mobile{position:fixed;inset:0;z-index:80;background:var(--scuro);color:#fff;overflow-y:auto}
.menu-mobile__in{min-height:100%;display:flex;flex-direction:column;gap:28px;padding:22px var(--gutter) 40px}
.menu-mobile__chiudi{align-self:flex-end;width:48px;height:48px;border:0;background:none;color:#fff;cursor:pointer}
.menu-mobile__chiudi .ico{width:30px;height:30px}
.menu-mobile nav{display:flex;flex-direction:column}
.menu-mobile nav a{padding:14px 0;font-size:26px;font-weight:700;letter-spacing:-.02em;text-decoration:none;border-bottom:1px solid rgb(255 255 255 / .1)}
.menu-mobile .btn{white-space:normal}

/* ══ 1 · APERTURA ══ */
.hero{position:relative;min-height:600px;display:flex;align-items:flex-end;background:#0b0b0a;color:#fff;overflow:hidden;isolation:isolate}
.hero__foto{position:absolute;inset:0;z-index:-2}
.hero__foto img{position:absolute;left:0;top:-6%;width:100%;height:112%;margin:0;object-fit:cover;object-position:50% 50%;animation:respiro 2.6s cubic-bezier(.2,.7,.2,1) both}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgb(5 5 4 / .78) 0%,rgb(5 5 4 / .64) 34%,rgb(5 5 4 / .3) 52%,rgb(5 5 4 / .08) 66%,transparent 78%)}
.hero__in{position:relative;padding-block:54px 30px}
.hero__testo{max-width:780px}
.occhiello--scuro{font-size:15px;letter-spacing:.21em;margin-bottom:14px}
.hero__titolo{font-size:clamp(34px,4.1vw,59px);font-weight:800;line-height:.98;letter-spacing:-.03em}
.hero__titolo .riga{display:block}
.hero__sotto{margin-top:22px;max-width:560px;font-size:clamp(16px,1.4vw,20px);font-weight:500;line-height:1.38;color:#f4f4f4}
.hero__whatsapp{display:flex;align-items:flex-start;gap:10px;margin-top:12px;max-width:560px;font-size:clamp(15px,1.25vw,18px);line-height:1.42;color:#fff}
.hero__whatsapp strong{font-weight:800}
.hero__whatsapp .ico{width:22px;height:22px;margin-top:1px;color:var(--arancio);stroke-width:3.4}
.hero__azioni{display:flex;flex-wrap:wrap;gap:18px;margin-top:28px}
.hero__azioni .btn--arancio{padding-inline:24px;gap:10px}
.hero__tempi{margin-top:34px}
.hero__tempi-testa{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#d0d0d0}
.hero__fatti{display:flex;flex-wrap:wrap;gap:14px 44px;margin-top:12px}
.hero__fatti li{display:flex;align-items:center;gap:14px;font-size:14.5px;line-height:1.35;color:#d4d4d4}
.hero__fatti strong{display:block;font-size:20px;font-weight:800;letter-spacing:-.01em;color:#fff}
.ico--fatto{width:50px;height:50px;color:var(--arancio);stroke-width:2.4}

/* appunti scritti a mano (la firma) */
.mano{position:absolute;width:min-content;font:600 clamp(27px,2.7vw,39px)/1.02 var(--mano);color:#2a2724;transform:rotate(-13deg);pointer-events:none;white-space:nowrap}
.mano span{display:block}
.sottolinea{display:block;width:78%;height:auto;margin-top:6px;overflow:visible}
.sottolinea path{fill:none;stroke:var(--arancio);stroke-width:6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.mano--hero{right:calc(-1*var(--gutter) + 14px);top:clamp(60px,9vw,128px);font-size:clamp(26px,2.4vw,35px)}
.mano--hero .sottolinea{margin-left:0;width:74%}
.mano--consulenza{right:clamp(14px,1.6vw,26px);top:clamp(14px,1.6vw,24px);font-size:clamp(24px,2.2vw,32px)}
.mano--consulenza .sottolinea{margin-left:14%;width:76%}
.mano--metodo{position:relative;align-self:flex-start;margin-right:0;font-size:clamp(26px,2.1vw,30px)}
.mano--metodo .sottolinea{margin-left:8%;width:82%}

/* ══ 2 · COME FUNZIONA ══ */
.metodo{background:var(--chiaro);padding-block:40px 46px}
#titolo-metodo{font-size:clamp(28px,2.85vw,41px);line-height:1}
.metodo__testa{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;margin-bottom:28px}
.passi{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.passo{display:flex;flex-direction:column;gap:14px;padding:2px clamp(14px,1.6vw,26px) 4px;border-left:1px solid #cfcfcf}
.passo:first-child{border-left:0;padding-left:0}
.passo__num{display:grid;place-items:center;width:46px;height:46px;flex-shrink:0;border-radius:50%;background:var(--arancio);color:#fff;font-size:21px;font-weight:700}
.passo h3{font-size:17px;font-weight:800;letter-spacing:-.01em;line-height:1.3}
.passo h3 a{text-decoration:none}
.passo h3 a:hover{color:var(--arancio-testo)}
.passo p{margin-top:6px;font-size:14.5px;line-height:1.5;color:var(--grigio)}
.passo p a{color:var(--arancio-testo);font-weight:700;text-underline-offset:3px}

/* ══ 3 · SOPRALLUOGO (blocco «consulenza» del mockup) ══ */
.consulenza{display:grid;grid-template-columns:37.4% 1fr;min-height:474px;background:var(--scuro);color:#fff;container-type:inline-size}
.consulenza__testo{display:flex;align-items:center;padding-left:max(var(--gutter),calc((100cqw - var(--max))/2));padding-right:clamp(24px,3vw,48px);padding-block:40px}
.consulenza__in{max-width:470px}
#titolo-consulenza{font-size:clamp(30px,2.95vw,42px);line-height:1.06}
.spunte{display:grid;gap:14px;margin:24px 0 28px}
.spunte li{display:flex;align-items:flex-start;gap:16px;font-size:17.5px;font-weight:500;line-height:1.45;color:#f2f2f2}
.ico--spunta{width:28px;height:28px;padding:6px;border-radius:50%;background:var(--arancio);color:#fff;stroke-width:3.4;margin-top:-1px}
.consulenza__foto{position:relative;overflow:hidden;min-height:340px}
.consulenza__foto img{position:absolute;inset:-3% 0;width:100%;height:106%;object-fit:cover;object-position:50% 20%}

/* ══ 4 · SCEGLI COSA CAMBIARE ══ */
.prodotti{padding-block:48px 52px}
#titolo-prodotti{font-size:clamp(30px,3.45vw,50px);line-height:1}
.prodotti__testa{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px}
.link-freccia{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:15px;font-weight:700;color:var(--arancio-testo);text-decoration:none}
.link-freccia .ico{transition:transform .2s}
.link-freccia:hover .ico{transform:translateX(4px)}
.griglia-prodotti{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 30px}
.scheda{display:flex;flex-direction:column;height:100%;background:#fff;border-radius:4px;box-shadow:0 8px 24px rgb(0 0 0 / .08);overflow:hidden;text-decoration:none;transition:box-shadow .25s,transform .25s}
.scheda:hover{box-shadow:0 14px 34px rgb(0 0 0 / .12);transform:translateY(-3px)}
.scheda__foto{display:block;aspect-ratio:2.2/1;overflow:hidden;background:#eee}
.scheda__foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.scheda:hover .scheda__foto img{transform:scale(1.06)}
.scheda__corpo{position:relative;display:flex;align-items:center;min-height:62px;padding:14px 52px 14px 18px;flex:1}
.scheda__titolo{display:block;font-size:19px;font-weight:800;line-height:1.28;letter-spacing:-.01em}
.scheda__freccia{position:absolute;right:14px;top:50%;margin-top:-14px;width:28px;height:28px;color:var(--arancio);stroke-width:4;transition:transform .2s}
.scheda:hover .scheda__freccia{transform:translateX(4px)}

/* ══ 5 · MATERIALI (la fascia grigia del mockup, ora con le schede da scegliere) ══ */
.materiali{background:var(--fascia);padding-block:clamp(46px,5vw,72px)}
.materiali__testa{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:30px}
#titolo-materiali{font-size:clamp(28px,3vw,44px);line-height:1.04}
.materiali__sotto{max-width:330px;font-size:17px;line-height:1.5;color:#3a3a3a}
.materiali__lista{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.materiale{position:relative;display:flex;flex-direction:column;align-items:flex-start;width:100%;height:100%;padding:0 0 20px;border:2px solid transparent;border-radius:6px;background:#fff;box-shadow:0 8px 24px rgb(0 0 0 / .07);text-align:left;cursor:pointer;overflow:hidden;transition:border-color .2s,box-shadow .25s,transform .25s}
.materiale:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgb(0 0 0 / .11)}
.materiale[aria-pressed="true"]{border-color:var(--arancio)}
.materiale__figura{display:grid;place-items:center;width:100%;aspect-ratio:16/10;background:#fdeee3}
.materiale__disegno{width:72%;height:auto;overflow:visible;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.materiale:hover .materiale__disegno{transform:scale(1.05)}
.materiale__disegno *{vector-effect:non-scaling-stroke}
.materiale__nome{margin:16px 18px 0;font-size:19px;font-weight:800;line-height:1.25;letter-spacing:-.01em}
.materiale__nota{margin:3px 18px 0;font-size:14.5px;line-height:1.45;color:var(--grigio)}
.materiale__spunta{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px solid #c9c9c9;background:#fff;color:#fff;transition:background-color .2s,border-color .2s}
.materiale__spunta .ico{width:16px;height:16px;stroke-width:6;opacity:0;transition:opacity .2s}
.materiale[aria-pressed="true"] .materiale__spunta{background:var(--arancio);border-color:var(--arancio)}
.materiale[aria-pressed="true"] .materiale__spunta .ico{opacity:1}
.d-vetro{fill:none;stroke:#8fb3c4;stroke-width:3;stroke-linecap:round}
.d-pvc{fill:#fff;stroke:#231f20;stroke-width:1.6}
.d-camere{fill:none;stroke:#231f20;stroke-width:1.1;opacity:.5}
.d-alu{fill:#e2e4e6;stroke:#231f20;stroke-width:1.6}
.d-sottile{fill:none;stroke:#231f20;stroke-width:1;opacity:.4}
.d-taglio{fill:none;stroke:var(--arancio);stroke-width:3;stroke-linecap:round}
.d-legno{fill:#fab98a;stroke:#231f20;stroke-width:1.6}
.d-venature{fill:none;stroke:#c8662b;stroke-width:1.1;opacity:.75}
.d-fibrabase{fill:var(--pesca-chiaro)}
.d-fibra{stroke:#f36118;stroke-width:.8;opacity:.75}
.d-contorno{fill:none;stroke:#231f20;stroke-width:1.6}

/* ══ 6 · COLORE — la finestra che si colora ══ */
.colore{background:#fff}
.colore__griglia{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,5vw,80px);align-items:center}
#titolo-colore{font-size:clamp(28px,3vw,44px);line-height:1.04}
.colore__testo p:not(.occhiello){max-width:430px;margin-top:14px;font-size:17px;line-height:1.55;color:#333}
.colore__testo .titolo+p{margin-top:20px}
.prova{padding:clamp(16px,2vw,26px);border-radius:6px;background:var(--chiaro);box-shadow:var(--ombra)}
.prova__viste{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,18px)}
.vista{padding:clamp(12px,1.6vw,20px) clamp(12px,1.6vw,20px) 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:border-color .2s}
.vista--dentro{background:#f3eee8}
.vista--fuori{background:#e5e0d7}
.vista.is-attiva{border-color:var(--arancio)}
.finestrina{display:block;width:100%;max-width:190px;height:auto;margin-inline:auto}
.f-telaio{fill:var(--telaio,#f4f4f2);stroke:rgb(0 0 0 / .3);stroke-width:1;transition:fill .35s}
.f-vetro{fill:#d7e5ec;stroke:rgb(0 0 0 / .25);stroke-width:1}
.f-riflesso{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;opacity:.75}
.f-maniglia{fill:#bdbdbd;stroke:rgb(0 0 0 / .35);stroke-width:1}
.f-davanzale{fill:#d6cfc4;stroke:rgb(0 0 0 / .18);stroke-width:1}
.vista figcaption{margin-top:10px;font-size:14px;font-weight:800;text-align:center}
.vista figcaption span{font-weight:500;color:var(--grigio)}
.prova__lati{display:inline-flex;margin-top:18px;padding:4px;border-radius:999px;background:#e9e9e9}
.lato{position:relative;cursor:pointer}
.lato span{display:block;min-width:92px;padding:10px 20px;border-radius:999px;font-size:15px;font-weight:700;text-align:center;transition:background-color .2s,color .2s}
.lato input:checked+span{background:var(--inchiostro);color:#fff}
.lato input:focus-visible+span{outline:3px solid var(--arancio);outline-offset:2px}
.tinte{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.tinta{position:relative;display:block;cursor:pointer}
.tinta__pallino{display:block;width:44px;height:44px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgb(0 0 0 / .2);transition:transform .2s}
.tinta:hover .tinta__pallino{transform:scale(1.08)}
.tinta input:checked+.tinta__pallino{box-shadow:inset 0 0 0 1px rgb(0 0 0 / .2),0 0 0 3px #fff,0 0 0 5px var(--arancio)}
.tinta input:focus-visible+.tinta__pallino{outline:3px solid var(--arancio);outline-offset:6px}
.prova__nota{margin-top:14px;font-size:13px;color:var(--grigio-chiaro)}

/* ══ 7 · RICHIEDI IL PREVENTIVO — il modulo ══ */
.preventivo{background:var(--scuro);color:#fff;padding-block:clamp(52px,6vw,92px)}
.preventivo__griglia{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(30px,5vw,80px);align-items:start}
.preventivo__testo{position:sticky;top:calc(var(--testata) + 32px)}
#titolo-preventivo{font-size:clamp(30px,3.3vw,48px);line-height:1.04}
.preventivo__testo p:not(.occhiello){max-width:400px;margin-top:14px;font-size:17px;line-height:1.55;color:#c9c9c9}
.preventivo__testo .titolo+p{margin-top:20px}
.richiesta{border-radius:6px;background:#fff;color:var(--inchiostro);box-shadow:0 22px 60px rgb(0 0 0 / .35);overflow:hidden}
.modi{display:grid;grid-template-columns:1fr 1fr;background:#ececec}
.modo{display:flex;align-items:center;justify-content:center;gap:10px;min-height:62px;padding:12px 14px;border:0;border-bottom:3px solid transparent;background:none;font-size:15.5px;font-weight:800;color:#555;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.modo:hover{color:var(--inchiostro)}
.modo[aria-selected="true"]{background:#fff;color:var(--inchiostro);border-bottom-color:var(--arancio)}
.modo:focus-visible{outline-offset:-4px}
.modo__num{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#c9c9c9;color:#fff;font-size:13.5px;transition:background-color .2s}
.modo[aria-selected="true"] .modo__num{background:var(--arancio)}
.pannello{padding:clamp(20px,2.6vw,36px)}
.modulo__intro{display:grid;gap:4px;margin-bottom:14px;padding-bottom:16px;border-bottom:1px solid var(--bordo);font-size:15.5px;line-height:1.5;color:#3a3a3a}
.messaggio__testo{font-size:18px;font-weight:600;line-height:1.45}
.messaggio__scelte{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.scelta{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-height:150px;padding:20px 20px 18px;border:2px solid var(--bordo);border-radius:6px;text-decoration:none;transition:border-color .2s,transform .2s,box-shadow .2s}
.scelta:hover{border-color:var(--arancio);transform:translateY(-2px);box-shadow:0 10px 24px rgb(0 0 0 / .08)}
.scelta__ico{width:40px;height:40px;padding:8px;border-radius:50%;background:#fff1e7;color:var(--arancio);stroke-width:3.2}
.scelta__testo{font-size:18px;font-weight:800;line-height:1.25;letter-spacing:-.01em}
.scelta__wa{position:absolute;right:16px;bottom:16px;color:var(--arancio)}
.modulo__legenda{margin-bottom:6px;font-size:13px;color:var(--grigio);text-align:right}
.obbl{color:var(--arancio-testo)}
.gruppo{position:relative;margin-bottom:18px;padding-top:20px;border-top:1px solid var(--bordo)}
.gruppo:first-child{padding-top:0;border-top:0}
.gruppo::after{content:"";position:absolute;inset:-8px -10px;border:2px solid var(--arancio);border-radius:8px;opacity:0;pointer-events:none;transition:opacity .4s}
.gruppo.is-scelto::after{opacity:1}
.gruppo__titolo{display:flex;align-items:center;gap:10px;float:left;width:100%;margin-bottom:16px;font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--arancio-testo)}
.gruppo__num{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--arancio);color:#fff;font-size:14px;letter-spacing:0}
.gruppo__togli{position:absolute;top:14px;right:-8px;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;border:0;border-radius:4px;background:none;font-size:14px;font-weight:700;color:var(--grigio);cursor:pointer}
.gruppo__togli:hover{color:var(--errore)}
.campi{clear:both;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px 14px}
.campo{grid-column:span 6;display:flex;flex-direction:column;gap:6px;min-width:0}
.campo--4{grid-column:span 4}
.campo--2{grid-column:span 2}
.campo--coppia{grid-column:span 4}
.coppia{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sotto-campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.campo label,.sotto-campo label{font-size:14px;font-weight:700;line-height:1.3}
.campo input,.campo select{width:100%;min-height:50px;padding:12px 14px;border:1.5px solid #d2d2d2;border-radius:4px;background:#fff;font-size:16px;font-weight:500;line-height:1.2;color:var(--inchiostro);transition:border-color .18s,box-shadow .18s}
.campo select{appearance:none;padding-right:40px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='m12 18 12 12 12-12' fill='none' stroke='%23f7661c' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center/16px;cursor:pointer}
.campo input::placeholder{color:#9a9a9a}
.campo input:hover,.campo select:hover{border-color:#b5b5b5}
.campo input:focus,.campo select:focus{outline:0;border-color:var(--arancio);box-shadow:0 0 0 3px rgb(247 102 28 / .2)}
.campo [aria-invalid="true"]{border-color:var(--errore)}
.campo__aiuto{font-size:13px;line-height:1.4;color:var(--grigio)}
.campo__errore{font-size:13.5px;font-weight:700;line-height:1.4;color:var(--errore)}
.campo__errore.is-avviso{color:#9a4a00}
.modulo__aggiungi{margin-top:2px;gap:8px}
.modulo__chi{margin-top:26px;padding-top:22px;border-top:1px solid var(--bordo)}
.modulo__caselle{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:24px;padding-top:22px;border-top:1px solid var(--bordo)}
.modulo__foto{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;line-height:1.45;color:#3a3a3a}
.modulo__foto .ico{width:22px;height:22px;color:var(--arancio);stroke-width:3}
.casella{display:flex;align-items:flex-start;gap:12px;font-size:15px;line-height:1.45;cursor:pointer}
.casella input{appearance:none;flex-shrink:0;width:24px;height:24px;margin:0;border:1.5px solid #bdbdbd;border-radius:4px;background:#fff no-repeat center/16px;cursor:pointer;transition:background-color .15s,border-color .15s}
.casella input:checked{border-color:var(--arancio);background-color:var(--arancio);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='m10 25 9 9 20-22' fill='none' stroke='%23fff' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.casella input:focus-visible{outline:3px solid var(--arancio);outline-offset:2px}
.casella input[aria-invalid="true"]{border-color:var(--errore)}
.casella a{color:var(--arancio-testo);font-weight:700;text-underline-offset:3px}
.campo--casella{grid-column:auto;gap:4px}
.campo .casella input{width:24px;height:24px;min-height:0;padding:0}
.modulo__invia{width:100%;margin-top:24px;min-height:58px;font-size:16.5px}
.modulo__invia .ico--wa{width:26px;height:26px}
.modulo__nota{margin-top:12px;font-size:14px;line-height:1.45;color:var(--grigio);text-align:center}
.modulo__stato:not(:empty){margin-top:14px;padding:12px 14px;border-radius:4px;background:#fff3ec;font-size:15px;line-height:1.45;text-align:center}
.modulo__stato a{color:var(--arancio-testo);font-weight:800}

/* ══ 8 · DOMANDE FREQUENTI ══ */
.faq{display:grid;grid-template-columns:48% 1fr;background:#fbfbfb;container-type:inline-size}
.faq__sinistra{display:grid;grid-template-columns:37% 1fr;background:var(--scuro-faq);color:#fff;min-height:320px}
.faq__foto{overflow:hidden}
.faq__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.faq__pannello{align-self:center;padding:34px clamp(22px,2.6vw,38px)}
.titolo--faq{font-size:clamp(28px,2.6vw,38px);line-height:1.05;margin-bottom:26px}
.faq__pannello .btn{padding-inline:24px;white-space:normal}
.faq__destra{display:flex;align-items:center;padding:26px max(var(--gutter),calc((100cqw - var(--max))/2)) 26px clamp(20px,2.4vw,36px)}
.faq__lista{width:100%;background:#fff;border-radius:4px;box-shadow:var(--ombra)}
.domanda{border-bottom:1px solid var(--bordo)}
.domanda:last-child{border-bottom:0}
.domanda summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:50px;padding:10px 16px 10px 21px;font-size:15.5px;font-weight:600;cursor:pointer;list-style:none}
.domanda summary::-webkit-details-marker{display:none}
.domanda summary:hover{color:var(--arancio-testo)}
.ico--piu{width:14px;height:14px;stroke-width:8;color:#111;transition:transform .25s}
.domanda[open] .ico--piu{transform:rotate(45deg);color:var(--arancio)}
.domanda__risposta{padding:0 21px 16px;font-size:15px;line-height:1.55;color:var(--grigio)}
.domanda__risposta a{color:var(--arancio-testo);font-weight:700;text-underline-offset:3px}

/* ══ 9 · CHI SIAMO ══ */
.chi{background:#fff}
.chi__griglia{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,5vw,80px);align-items:center}
.chi__marchio{display:grid;place-items:center;aspect-ratio:16/11;border-radius:6px;background:var(--pesca-chiaro)}
.chi__marchio img{width:min(50%,260px);height:auto}
#titolo-chi{font-size:clamp(28px,3vw,44px);line-height:1.04}
.chi__fatti{display:grid;gap:18px;margin-top:24px}
.chi__fatti li{display:flex;align-items:flex-start;gap:16px}
.chi__fatti p{padding-top:8px;font-size:17.5px;line-height:1.5;color:#2b2b2b}
.chi__fatti a{color:var(--arancio-testo);font-weight:700;text-underline-offset:3px;white-space:nowrap}
.chi__fatti .ico{width:42px;height:42px;padding:9px;border-radius:50%;background:#fff1e7;color:var(--arancio);stroke-width:3.2}

/* ══ LAVORI ══ */
.lavori{background:#f6f6f6;padding-block:34px 30px}
#titolo-lavori{font-size:clamp(26px,2.35vw,34px)}
.lavori__testa{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:14px}
.bozza{display:inline-block;margin-left:10px;padding:3px 8px;border-radius:3px;background:#1c1c1c;color:#fff;font-size:10px;letter-spacing:.12em;vertical-align:2px}
.lavori__frecce{display:flex;gap:14px}
.tondo{display:grid;place-items:center;width:43px;height:43px;border-radius:50%;border:1.5px solid #c9c9c9;background:#fff;color:#777;box-shadow:0 2px 8px rgb(0 0 0 / .08);cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.tondo--scuro{border-width:2px;border-color:#555;color:#111}
.tondo:hover:not(:disabled){border-color:var(--arancio);color:var(--arancio)}
.tondo:disabled{opacity:.75;cursor:default}
.galleria{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 4*20px)/5);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 4px 14px;margin:-4px -4px -10px}
.galleria::-webkit-scrollbar{display:none}
.galleria li{scroll-snap-align:start;aspect-ratio:1.1/1;border-radius:4px;overflow:hidden;background:#eee;box-shadow:0 6px 16px rgb(0 0 0 / .1)}
.galleria img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.galleria li:hover img{transform:scale(1.06)}
.lavori .centro{margin-top:18px}

/* ══ 10 · CONTATTI (la fascia arancione) ══ */
.fascia-cta{background:var(--arancio-fascia)}
.fascia-cta__in{display:flex;align-items:center;justify-content:space-between;gap:30px;min-height:150px;padding-block:32px}
.fascia-cta__titolo{font-size:clamp(28px,2.8vw,40px);font-weight:800;letter-spacing:-.03em;line-height:1.1;color:var(--inchiostro)}
.fascia-cta p{margin-top:8px;font-size:clamp(16px,1.4vw,20px);font-weight:500;color:#2a1a10}
.fascia-cta p a{font-weight:800;text-underline-offset:3px;white-space:nowrap}
.fascia-cta .fascia-cta__dove{margin-top:2px;font-size:15px;color:#3a2416}
.fascia-cta__azione{display:flex;align-items:center;gap:14px}

/* ══ PIÈ DI PAGINA ══ */
.piede{position:relative;background:var(--scuro-piede);color:#cfcfcf;overflow:hidden}
.piede__strade{position:absolute;right:0;top:0;width:32%;height:calc(100% - 84px);background:url("../img/deco/strade.svg") 0 0/240px auto repeat;opacity:1;-webkit-mask-image:linear-gradient(90deg,transparent,#000 40%);mask-image:linear-gradient(90deg,transparent,#000 40%)}
.piede__griglia{position:relative;display:grid;grid-template-columns:24% 29% 1fr auto;gap:0;padding-block:34px 24px}
.piede__marchio img{width:120px;height:auto}
.piede__marchio p{margin-top:12px;font-size:14.5px;line-height:1.6;color:#d8d8d8;white-space:nowrap}
.piede__titolo{margin-bottom:14px;font-size:16px;font-weight:800;color:#fff}
.piede__link ul{display:grid;grid-template-columns:repeat(2,max-content);column-gap:56px;row-gap:0;justify-content:start;font-size:15px}
.piede__link a{display:inline-block;padding-block:5px;white-space:nowrap}
.piede__link a,.piede__contatti a{text-decoration:none;transition:color .18s}
.piede__link a:hover,.piede__contatti a:hover{color:var(--arancio)}
.piede__contatti ul{display:grid;gap:14px;font-size:15px}
.piede__contatti li{display:flex;align-items:center;gap:14px}
.piede__contatti span a{color:#fff;font-weight:700}
.ico--piede{width:28px;height:28px;color:var(--arancio);stroke-width:2.4}
.mano--piede{position:relative;align-self:start;margin-top:30px;color:#fff;font-size:clamp(24px,1.95vw,28px);padding-left:52px;justify-self:end}
.mano--piede .sottolinea{margin-left:18%;width:74%}
.piede__pin{position:absolute;left:0;top:-6px;width:40px;height:40px;fill:var(--arancio);stroke:var(--arancio);transform:rotate(13deg)}
.piede__legale{position:relative;padding-block:4px 20px;font-size:13px;line-height:1.7;color:#a3a3a3}
.piede__legale strong{font-weight:700;color:#d6d6d6}
.piede__base{position:relative;display:flex;justify-content:space-between;align-items:center;gap:8px 20px;flex-wrap:wrap;padding-block:14px 30px;border-top:1px solid #3a3a3a;font-size:13.5px;color:#bdbdbd}
.piede__base a{text-decoration:none}
.piede__base a:hover{color:var(--arancio)}
.piede__base>p:first-child a{display:inline-block;padding-block:10px;color:#fff;font-weight:600}
.piede__firma a{color:#fff;font-weight:600}
.piede__legali{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.piede__socials{display:flex;gap:6px}
.piede__social{display:grid!important;place-items:center;flex-shrink:0;width:44px;height:44px;color:#fff}
.piede__social .ico{width:26px;height:26px;stroke-width:2}

/* WhatsApp sempre visibile */
.wa-fisso{position:fixed;right:22px;bottom:22px;z-index:40;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--arancio);color:#fff;box-shadow:0 10px 26px rgb(247 102 28 / .38);transition:transform .2s,background .2s}
.wa-fisso:hover{transform:scale(1.06);background:var(--arancio-hover)}
.wa-fisso .ico{width:32px;height:32px;stroke-width:3}

/* ══ MOVIMENTO ══ */
@keyframes respiro{from{scale:1.09}to{scale:1}}
.js [data-entra]{opacity:0;transform:translateY(26px)}
.js [data-rivela]{opacity:0;transform:translateY(28px)}
.js .mano span{opacity:0;transform:translateY(10px) rotate(2deg)}
.js .sottolinea path{stroke-dasharray:330;stroke-dashoffset:330}
[data-entra].is-visibile,.js [data-rivela].is-visibile{opacity:1!important;transform:none!important;transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1)}
.js .mano.is-visibile span{opacity:1;transform:none;transition:opacity .6s .1s,transform .7s .1s cubic-bezier(.2,.7,.2,1)}
.js .mano.is-visibile .sottolinea path{stroke-dashoffset:0;transition:stroke-dashoffset 1s .45s cubic-bezier(.65,0,.35,1)}

/* ══ RESPONSIVE ══ */
/* sotto 1280: il menu completo non entra più → menu a tutto schermo */
@media (max-width:1279px){
  .menu,.btn--testata{display:none}
  .hamburger{display:inline-flex}
  .consulenza .btn{white-space:normal;text-align:left}
  .piede__marchio p{white-space:normal}
  .passo{padding-inline:12px}
  .passo:first-child{padding-left:0}
}
@media (max-width:1180px){
  :root{--testata:96px}
  .testata__logo img{width:104px}
  .piede__griglia{grid-template-columns:1fr 1.3fr 1.3fr;gap:40px}
  .mano--piede{grid-column:1/-1;justify-self:start;margin-top:10px}
  .materiali__lista{gap:18px}
}
@media (max-width:1023px){
  :root{--testata:78px}
  .testata__logo img{width:80px}
  .hero::before{background:linear-gradient(90deg,rgb(5 5 4 / .8) 0%,rgb(5 5 4 / .62) 55%,rgb(5 5 4 / .38) 100%)}
  .mano--hero{color:#fff;text-shadow:0 1px 10px rgb(0 0 0 / .45)}
  .metodo__testa{margin-bottom:24px}
  /* i cinque passi diventano una linea verticale */
  .passi{grid-template-columns:1fr;max-width:620px}
  .passo{position:relative;flex-direction:row;gap:18px;padding:0 0 26px;border-left:0}
  .passo::before{content:"";position:absolute;left:22px;top:50px;bottom:4px;width:2px;background:#e1e1e1}
  .passo:last-child{padding-bottom:0}
  .passo:last-child::before{display:none}
  .passo h3{margin-top:10px}
  .consulenza{grid-template-columns:1fr;min-height:0}
  .consulenza__testo{padding-inline:var(--gutter);padding-block:44px}
  .consulenza__foto{aspect-ratio:16/10;min-height:0}
  .materiali__testa{flex-direction:column;align-items:flex-start;gap:12px}
  .materiali__lista{grid-template-columns:repeat(2,minmax(0,1fr))}
  .materiale__figura{aspect-ratio:2/1}
  .materiale__disegno{width:52%}
  .colore__griglia{grid-template-columns:1fr}
  .prova{max-width:620px}
  .preventivo__griglia{grid-template-columns:1fr}
  .preventivo__testo{position:static}
  .richiesta{max-width:720px}
  .galleria{grid-auto-columns:calc((100% - 2*16px)/3);gap:16px}
  .faq{grid-template-columns:1fr}
  .faq__destra{padding:26px var(--gutter)}
  .fascia-cta__in{flex-direction:column;align-items:flex-start;gap:20px}
  .piede__griglia{grid-template-columns:1fr 1fr;gap:34px 40px}
  .piede__marchio{grid-column:1/-1}
  .piede__link ul{column-gap:40px}
}
@media (max-width:767px){
  .occhiello{font-size:12.5px;letter-spacing:.2em}
  .hero{min-height:0;align-items:flex-end}
  .hero__foto img{object-position:72% 50%}
  .hero::before{background:linear-gradient(180deg,rgb(8 8 7 / .45) 0%,rgb(8 8 7 / .7) 24%,rgb(8 8 7 / .9) 48%,#080807 100%)}
  .hero__in{padding-block:150px 34px}
  .occhiello--scuro{font-size:11.5px;letter-spacing:.15em;color:#ff8a4c}
  .hero__titolo{font-size:clamp(31px,8.6vw,40px);line-height:1.02}
  .hero__titolo .riga{display:inline}
  .hero__sotto{margin-top:16px}
  .hero__azioni{flex-direction:column;align-items:stretch;margin-top:24px}
  .hero__azioni .btn,.consulenza .btn,.fascia-cta__azione .btn{font-size:15px;padding-inline:16px;gap:8px;white-space:normal}
  .hero__tempi{margin-top:28px}
  .hero__fatti{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .hero__fatti li{align-items:flex-start;gap:10px;font-size:13.5px}
  .hero__fatti strong{font-size:17px}
  .ico--fatto{width:34px;height:34px}
  .mano--hero{top:22px;right:12px;font-size:25px}
  .titolo br{display:none}
  #titolo-consulenza br,#titolo-preventivo br,#titolo-faq br{display:inline}
  .metodo__testa{flex-direction:column;gap:14px}
  .mano--metodo{align-self:flex-end}
  .spunte li{font-size:16.5px}
  .mano--consulenza{top:auto;right:auto;left:16px;bottom:14px;font-size:23px;color:#fff;text-shadow:0 1px 10px rgb(0 0 0 / .45)}
  .prodotti{padding-block:40px 44px}
  .prodotti__testa{margin-bottom:22px}
  .prodotti__testa .link-freccia{display:none}
  .griglia-prodotti{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .scheda__foto{aspect-ratio:1.6/1}
  .scheda__corpo{min-height:0;padding:12px 32px 14px 12px}
  .scheda__titolo{font-size:15px}
  .scheda__freccia{right:8px;width:22px;height:22px;margin-top:-11px}
  .materiali__lista{gap:14px}
  .materiale{padding-bottom:16px}
  .materiale__figura{aspect-ratio:16/11}
  .materiale__disegno{width:74%}
  .materiale__nome{margin:12px 12px 0;font-size:15.5px}
  .materiale__nota{margin:2px 12px 0;font-size:13px}
  .materiale__spunta{top:8px;right:8px;width:26px;height:26px}
  .colore__testo p:not(.occhiello){font-size:16px}
  .lato span{min-width:0;padding:10px 18px}
  .tinte{gap:8px}
  .tinta__pallino{width:42px;height:42px}
  .pannello{padding:20px 16px}
  .modo{flex-direction:column;gap:6px;min-height:70px;font-size:14px;text-align:center}
  .messaggio__scelte{grid-template-columns:1fr}
  .scelta{flex-direction:row;align-items:center;min-height:72px;padding:14px 52px 14px 14px}
  .scelta__testo{font-size:16.5px}
  .gruppo::after{inset:-6px -8px}
  .campo--2,.campo--coppia{grid-column:span 6}
  .campo--quantita{grid-column:span 3}
  .campo[data-solo="altro"]{grid-column:span 6}
  .campo--4[data-solo="finestra"]{grid-column:span 4}
  .campo--2[data-solo="finestra"]{grid-column:span 2}
  .modulo__chi .campo--2{grid-column:span 6}
  .lavori{padding-block:34px 36px}
  .lavori__testa{align-items:flex-start}
  .lavori__frecce{display:none}
  .galleria{grid-auto-columns:74%;gap:14px;margin-right:calc(-1*var(--gutter));padding-right:var(--gutter)}
  .faq__sinistra{grid-template-columns:30% 1fr;min-height:0}
  .faq__pannello{padding:28px 20px}
  .titolo--faq{margin-bottom:20px}
  .chi__griglia{grid-template-columns:1fr;gap:26px}
  .chi__marchio{aspect-ratio:2/1}
  .chi__marchio img{width:min(40%,200px)}
  .chi__fatti p{font-size:16.5px}
  .fascia-cta__in{align-items:stretch;padding-block:36px}
  .fascia-cta__azione{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .fascia-cta__azione .btn{min-height:56px;padding-inline:12px}
  .piede__griglia{grid-template-columns:1fr;gap:34px;padding-block:44px 30px}
  .piede__strade{width:100%;height:40%;opacity:.6}
  .mano--piede{justify-self:start}
  .piede__base{flex-direction:column;align-items:flex-start;padding-bottom:84px}
  .wa-fisso{right:16px;bottom:16px;width:56px;height:56px}
}
@media (max-width:479px){
  .hero__fatti{grid-template-columns:1fr}
  .fascia-cta__azione .btn{font-size:14.5px}
  .fascia-cta__azione .btn--bianco .ico--wa{width:24px;height:24px}
}
@media (min-width:768px){
  .piede__base{padding-right:max(0px,calc(94px - var(--gutter)))}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-entra],.js [data-rivela],.js .mano span{opacity:1!important;transform:none!important}
  .js .sottolinea path{stroke-dashoffset:0!important}
}