/* Configuratore Cutlite (pagina autonoma). FILE GENERATO da tools/build-configuratore-web.mjs, versione a55fbfee1c: non modificare a mano. */
/* token del design system: src/styles/global.css */
:root {
  /* Palette ufficiale */
  --cp: #162125;      /* Ink: testo scuro e bordi (i FONDI scuri usano --dk) */
  --dk: rgb(15,21,24); /* Fondo scuro di tutto il sito: sezioni, header, top bar, menu mobile, footer, banner CTA, FAQ.
                          Dal 2026-08-27 (era lo scuro della sola home, --home-dk), al posto dell'ink --cp e del "deep" #0d1a1e */
  --acc: #D3171B;     /* Rosso accento — CTA, highlight */
  --acc-h: #9A1114;   /* Rosso hover — valore del design system 2026-07-28 */
  --acc-dk: #FF3B3B;  /* Il rosso dei TESTI su fondo scuro (P15): occhielli, etichette, link.
                         5.21:1 su --dk, 4.65:1 su ink. Dal 2026-09-09 (prova 2 di Alessio): era #FF6B6B,
                         che con verde e blu uguali virava al rosa; questo tiene il rosso pieno e alza solo
                         la luce. Su chiaro, sui bottoni e sui numeri grandi resta --acc */
  --w: #fff;
  --surf: #F5F5F7;    /* Grigio chiaro — SOLO filetti, bordi e scrollbar. Mai come sfondo di pagina, sezione, card o tabella (Gabriele, 2026-09-04): gli sfondi sono --w o --dk */
  --tint: rgba(211,23,27,.06); /* velo rosso per hover, selezione e riquadri evidenziati su chiaro: al posto del grigetto */
  --body: #5F6A72;    /* L'UNICO grigio del testo su chiaro (P02): paragrafi, descrizioni, didascalie, hint */
  --bdr: #E5E5E5;         /* filetti e bordi su chiaro */
  --bdr-dko: rgba(255,255,255,.12); /* filetti e bordi su scuro, uso normale (P08) */
  --bdr-dk: #2D3E45;      /* solo bordi che devono essere opachi su scuro: bordo sotto l'header sticky (P08) */
  --sh-1: 0 12px 40px rgba(22,33,37,.10);  /* ombra livello 1: hover dei contenitori cliccabili */
  --sh-2: 0 30px 50px rgba(10,16,18,.16);  /* ombra livello 2: livelli sopra la pagina (menu a tendina) */
  /* 'Inter Fallback' = Arial con le metriche di Inter (fonts.css): finche' Inter non e'
     arrivato il testo occupa lo stesso spazio, e allo scambio niente si sposta (2026-09-08) */
  --f: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  /* apertura del mega-menu: ease-out morbida, senza il rimbalzo lungo di --ease */
  --ease-menu: cubic-bezier(.33, 1, .68, 1);
  /* ALTEZZA DELLA BANDA HERO (regola di Alessio, 2026-09-11): la stessa per TUTTE
     le pagine e a ogni larghezza di schermo — un valore solo, senza breakpoint.
     La banda non cresce col testo: sono i testi a starci dentro. La usano .vhero
     (VideoHero), .phero (PageHero) e la hero della pagina Cutlive, cioe' ogni
     testata del sito tranne la home, che e' a tutto schermo per scelta.
     Prima l'altezza la faceva il contenuto: sullo stesso schermo andava da 560 a
     792 px, e Laser vs Plasma era la piu' alta di tutte.
     Dentro la banda il contenuto ha 24 px di aria di sicurezza sopra e sotto, cioe'
     572 px per titolo, sottotitolo e bottoni. Il testo piu' lungo del sito oggi
     (Laser vs Plasma a 1920, Teste in portoghese a 360) ne occupa 564: chi allunga
     un testo della hero controlla con `node tools/verifica-hero.mjs`, e se sfora
     accorcia il testo — alzare questo numero alza la hero di tutto il sito. */
  --hero-h: 620px;
}
/* font Inter: src/styles/fonts.css */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  ascent-override: 90.2%;
  descent-override: 22.48%;
  line-gap-override: 0%;
  size-adjust: 107.4%;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(fonts/inter-var-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(fonts/inter-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* configuratore del sito: src/components/pages/configuratore/stile.css */
.cfg-root *{box-sizing:border-box;margin:0;padding:0}

/* min-height 100svh (2026-09-08): le schede delle macchine le disegna logica.js, e prima che giri il configuratore era corto: le FAQ sotto (#cfgFaqWrap) stavano nella prima schermata e poi scendevano di 6000 px. Lighthouse contava un salto di layout di 0,34. Cosi' il blocco occupa almeno uno schermo anche vuoto. */
.cfg-root{font-family:var(--f);background:var(--w);color:var(--cp);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100svh}

.cfg-root img{max-width:100%}

.cfg-root button{font-family:var(--f)}
/* ── bottoni ufficiali (design system) ── */
.cfg-root .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--f);font-weight:600;font-size:15px;padding:17px 34px;
  border-radius:0;border:none;cursor:pointer;line-height:1;letter-spacing:.01em;
  transition:all .25s ease;text-decoration:none}

.cfg-root .btn--p{background:var(--acc);color:#fff}

.cfg-root .btn--p:hover{background:var(--acc-h);color:#fff}

.cfg-root .btn--p:disabled{background:#C6CCCF;cursor:not-allowed}

.cfg-root .btn--ow{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35)}

.cfg-root .btn--ow:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}

.cfg-root .btn--od{background:transparent;color:var(--cp);border:1px solid var(--cp)}

.cfg-root .btn--od:hover{background:var(--dk);color:#fff;border-color:var(--dk)}

.cfg-root .btn--sm{font-size:14px;padding:13px 24px}
/* ── testata ── */
.cfg-root .hero{background:var(--dk);padding:56px 24px 48px}

.cfg-root .hero-in{max-width:1280px;margin:0 auto;padding:0 16px}

.cfg-root .eyebrow{color:var(--acc-dk);font-size:11.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}

.cfg-root .hero h1{color:#fff;font-weight:800;font-size:clamp(28px,4vw,40px);letter-spacing:normal;line-height:1.12}

.cfg-root .hero p{color:#fff;font-size:17px;line-height:1.75;margin-top:14px;max-width:640px;font-weight:400}

.cfg-root .kerf{height:3px;background:var(--acc)}
/* ── banner prototipo ── */
.cfg-root .proto{background:var(--w);border-bottom:1px solid var(--bdr);padding:12px 24px}

.cfg-root .proto-in{max-width:1280px;margin:0 auto;padding:0 16px;display:flex;gap:14px;align-items:baseline;flex-wrap:wrap}

.cfg-root .proto-tag{background:var(--acc);color:#fff;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;flex-shrink:0}

.cfg-root .proto p{font-size:13px;color:var(--cp);font-weight:500}

.cfg-root .wrap{max-width:1280px;margin:0 auto;padding:44px 40px 90px}

@media (max-width:768px){
.cfg-root .wrap{padding:32px 20px 70px}
}
/* ── vista 1: serie e card (come pagina Macchine Laser del sito) ── */
.cfg-root .chips{display:flex;gap:10px;flex-wrap:wrap}

.cfg-root .chip{border:1px solid var(--bdr);background:var(--w);color:var(--cp);
  font-size:13.5px;font-weight:600;padding:9px 16px;cursor:pointer;transition:all .18s}

.cfg-root .chip:hover{border-color:var(--cp)}

.cfg-root .chip.on{background:var(--dk);border-color:var(--dk);color:#fff}

.cfg-root .series-nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:44px}

.cfg-root .series-nav a{font-size:13px;font-weight:600;padding:9px 20px;border:1px solid var(--bdr);color:var(--steel);transition:all .22s;background:var(--w);text-decoration:none}

.cfg-root .series-nav a:hover{border-color:var(--acc);color:var(--acc)}

.cfg-root .series-block{margin-bottom:56px;padding-bottom:56px;border-bottom:1px solid var(--bdr)}

.cfg-root .series-block:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}

.cfg-root .series-code{font-size:48px;font-weight:900;color:var(--cp);letter-spacing:-.05em;line-height:1}

.cfg-root .series-code span{color:var(--acc)}

.cfg-root .series-name{font-size:15px;font-weight:600;color:var(--steel);margin-top:4px}

.cfg-root .series-desc{font-size:15px;color:var(--steel);line-height:1.75;max-width:680px;margin-top:14px}

.cfg-root .machines-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}

@media (max-width:1024px){
.cfg-root .machines-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:768px){
.cfg-root .machines-grid{grid-template-columns:1fr}
}

.cfg-root .mc{background:var(--w);border:1px solid var(--bdr);display:flex;flex-direction:column;cursor:pointer;transition:box-shadow .3s var(--ease)}

.cfg-root .mc:hover{box-shadow:var(--sh-1)}

.cfg-root .mc__body{padding:20px 22px 22px;flex:1;display:flex;flex-direction:column}

.cfg-root .mc__name{font-size:20px;font-weight:900;color:var(--cp);letter-spacing:-.01em;margin:0 0 12px}

.cfg-root .mc__spec{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--bdr);padding:8px 0;gap:10px;flex-wrap:wrap}

.cfg-root .mc__spec:last-of-type{border-bottom:none;margin-bottom:16px}

.cfg-root .mc__spec-k{font-size:12px;color:var(--steel);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}

.cfg-root .mc__spec-v{font-size:15px;font-weight:700;color:var(--cp);text-align:right}

.cfg-root .mc__link{display:block;text-align:center;margin-top:auto;font-size:15px;font-weight:600;color:var(--cp);padding:13px;border:1px solid var(--cp);transition:all .2s;background:transparent;cursor:pointer;font-family:var(--f)}

.cfg-root .mc:hover .mc__link{background:var(--dk);color:#fff}
/* ── consigliami ── */
.cfg-root .wiz-cta{background:var(--dk);display:flex;justify-content:space-between;align-items:center;gap:24px;padding:30px 34px;margin-bottom:44px;flex-wrap:wrap}

.cfg-root .wiz-ey{display:block;font-size:11.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-dk);margin-bottom:8px}

.cfg-root .wiz-title{font-size:22px;font-weight:800;color:#fff;letter-spacing:-.01em}

.cfg-root .wiz-cta p{font-size:15px;color:rgba(255,255,255,.7);margin-top:8px;max-width:560px;line-height:1.6}

.cfg-root .wiz-cta .btn{flex-shrink:0}

.cfg-root .wiz-go{font-size:18px;font-weight:700;padding:22px 52px;letter-spacing:.01em}

.cfg-root .wizsub{font-size:15px;color:var(--body);margin-top:10px;max-width:560px}

.cfg-root .wizgrid{display:grid;grid-template-columns:1fr 380px;gap:28px;align-items:start;margin-top:26px}

@media (max-width:980px){
.cfg-root .wizgrid{grid-template-columns:1fr}
}

.cfg-root .wizsum{border:1px solid var(--bdr);background:var(--w)}

.cfg-root .wizsum-head{background:var(--dk);padding:16px 20px}

.cfg-root .wizsum-head .sum-ey{margin-bottom:2px}

.cfg-root .wizsum-title{font-size:19px;font-weight:800;color:#fff}

.cfg-root .rempty{padding:18px 20px;font-size:15px;color:var(--body);line-height:1.6;text-wrap:pretty}

.cfg-root .rrow{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid var(--surf);cursor:pointer;transition:background .15s}

.cfg-root .rrow:last-of-type{border-bottom:none}

.cfg-root .rrow:hover{background:var(--tint)}

.cfg-root .rname{font-size:18px;font-weight:900;color:var(--cp);letter-spacing:-.01em}

.cfg-root .rwhy{font-size:15px;color:var(--body);line-height:1.6;margin-top:4px;text-wrap:pretty}

.cfg-root .rgo{font-size:13.5px;font-weight:700;color:#fff;border:none;padding:11px 16px;white-space:nowrap;flex-shrink:0;background:var(--acc);cursor:pointer;font-family:var(--f);transition:background .15s}

.cfg-root .rrow:hover .rgo{background:var(--acc-h)}

.cfg-root .rnote{padding:12px 20px;font-size:11px;color:var(--body);line-height:1.6;border-top:1px solid var(--bdr);background:var(--w)}

.cfg-root .rlead{padding:14px 20px;font-size:14px;font-weight:600;color:var(--cp);line-height:1.6;border-bottom:1px solid var(--bdr);background:var(--w);text-wrap:pretty}

.cfg-root .rsend{padding:14px 20px;border-top:1px solid var(--bdr)}

.cfg-root .rsend .btn{width:100%}

.cfg-root .rsend-q{font-size:13.5px;color:var(--body);margin-bottom:9px}

.cfg-root .gsp{margin-top:16px}

.cfg-root .mm-table{max-width:560px}

.cfg-root .mm-head{display:grid;grid-template-columns:minmax(0,1fr) 92px 92px 20px;gap:8px;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);margin-bottom:6px}

.cfg-root .mm-head span:nth-child(n+2){text-align:center}

.cfg-root .mm-row{display:grid;grid-template-columns:minmax(0,1fr) 92px 92px 20px;gap:8px;align-items:center;margin-bottom:8px}

.cfg-root .mm-x{background:none;border:none;color:var(--acc);font-size:18px;line-height:1;cursor:pointer;padding:0;font-family:var(--f);transition:color .15s}

.cfg-root .mm-x:hover{color:var(--acc-h)}

.cfg-root .mm-name{font-size:14px;font-weight:600;color:var(--cp)}

.cfg-root .mm-row input{width:100%;min-width:0;height:40px;border:1px solid var(--bdr);border-radius:0;-webkit-appearance:none;appearance:none;padding:0 10px;font-family:var(--f);font-size:var(--cfg-fs-s,14px);font-weight:500;color:var(--cp);outline:none;text-align:center;transition:border-color .2s,box-shadow .2s}

.cfg-root .mm-row input:focus{border-color:var(--cp);box-shadow:0 0 0 2px rgba(211,23,27,.18)}

.cfg-root .mm-row input.filled{border-color:var(--cp)}

.cfg-root .mm-row input.err{border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}

.cfg-root .mm-warn{font-size:12.5px;font-weight:600;color:var(--acc);margin-top:6px;line-height:1.5}

.cfg-root .mm-warn.pulse, .cfg-root .add-hint.pulse{animation:warnpulse .9s ease}

@keyframes warnpulse{0%{background:rgba(211,23,27,.14)}100%{background:transparent}}

.cfg-root .mm-row input.mm-cname{text-align:left}

.cfg-root .mm-add{background:none;border:1px dashed var(--bdr);color:var(--steel);font-family:var(--f);font-size:12.5px;font-weight:700;padding:8px 14px;cursor:pointer;margin-top:2px;transition:all .15s}

.cfg-root .mm-add:hover{border-color:var(--cp);color:var(--cp)}

.cfg-root .mm-add.ready, .cfg-root .crow .btn.ready{background:var(--dk);color:#fff;border:1px solid var(--dk)}

.cfg-root .add-hint{display:none;font-size:12.5px;font-weight:600;color:var(--acc);margin-top:8px}

.cfg-root .add-hint.show{display:block}

.cfg-root .psec + .psec{margin-top:18px}

.cfg-root .ispecs{margin-top:14px}

.cfg-root .ispec{display:grid;grid-template-columns:210px 1fr;gap:12px;padding:9px 0;border-bottom:1px solid var(--surf);font-size:13.5px;line-height:1.5}

.cfg-root .ispec:last-child{border-bottom:none}

.cfg-root .ispec span:first-child{color:var(--body);font-weight:600}

.cfg-root .ispec span:last-child{color:var(--cp);font-weight:600}

@media (max-width:768px){
.cfg-root .ispec{grid-template-columns:1fr;gap:2px}
}

.cfg-root .wsec{font-size:11.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin-bottom:12px}

.cfg-root .wsec.gsp{margin-top:22px}

.cfg-root .formrow{display:grid;grid-template-columns:1fr 1fr;gap:18px}

@media (max-width:768px){
.cfg-root .formrow{grid-template-columns:1fr}
}

.cfg-root .mc__why{font-size:13.5px;color:var(--body);line-height:1.6;margin:2px 0 12px}

.cfg-root .wiz-note{font-size:13px;color:var(--body);margin-top:14px}
/* ── vista 2: configuratore ── */
.cfg-root .cfghead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px;flex-wrap:wrap}

.cfg-root .back{background:none;border:none;color:var(--steel);font-size:14px;font-weight:600;cursor:pointer;padding:0;margin-bottom:10px}

.cfg-root .back:hover{color:var(--cp)}

.cfg-root .cfghead h2{font-size:clamp(26px,3.5vw,34px);font-weight:800;letter-spacing:-.02em;line-height:1.05}

.cfg-root .mcard-cat{font-size:11.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}

.cfg-root .cfghead .mcard-cat{margin-bottom:6px}

.cfg-root .cfggrid{display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:start}

.cfg-root .panel{border:1px solid var(--bdr);background:var(--w);margin-bottom:14px}

.cfg-root .ph{display:flex;align-items:center;gap:12px;padding:13px 22px;border-bottom:1px solid var(--bdr)}

.cfg-root .pn{width:24px;height:24px;background:var(--acc);color:#fff;font-size:12px;font-weight:800;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}

.cfg-root .pt{font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}

.cfg-root .pb{padding:18px 22px}

.cfg-root .pmsg{display:none;background:var(--tint);border-left:3px solid var(--acc);
  font-size:13px;font-weight:500;padding:10px 14px;margin-bottom:16px}

.cfg-root .pmsg.show{display:block}
/* opzioni a scheda */
.cfg-root .ogrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.cfg-root .ogrid.one{grid-template-columns:1fr}

.cfg-root .ocard{border:1px solid var(--bdr);padding:12px 14px;cursor:pointer;transition:all .16s;
  display:flex;gap:12px;align-items:flex-start;background:var(--w);text-align:left;width:100%}

.cfg-root .ocard:hover:not(.dis){border-color:var(--cp)}

.cfg-root .ocard.on{border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}

.cfg-root .ocard.dis{opacity:.45;cursor:not-allowed}

.cfg-root .omark{width:18px;height:18px;flex-shrink:0;border:1.5px solid var(--bdr);margin-top:2px;
  display:flex;align-items:center;justify-content:center;transition:all .14s;font-size:11px;font-weight:800;color:#fff}

.cfg-root .omark.round{border-radius:50%}

.cfg-root .ocard.on .omark{background:var(--acc);border-color:var(--acc)}

.cfg-root .ocard.on .omark::after{content:'✓'}

.cfg-root .ocard.on .omark.round::after{content:'';width:6px;height:6px;background:#fff;border-radius:50%}

.cfg-root .oname{font-size:14.5px;font-weight:700}

.cfg-root .odesc{font-size:13px;color:var(--steel);font-weight:400;margin-top:3px;line-height:1.5}

.cfg-root .oreason{font-size:12px;color:var(--acc);font-weight:600;margin-top:4px;display:none}

.cfg-root .ocard.dis .oreason{display:block}
/* griglie desktop (formato, potenza) */
.cfg-root .fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}

.cfg-root .fgrid--wide{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}

.cfg-root .fcell{border:1px solid var(--bdr);padding:10px 12px;cursor:pointer;transition:all .16s;background:var(--w);text-align:left;font-family:var(--f)}

.cfg-root .fcell:hover{border-color:var(--cp)}

.cfg-root .fcell.on{border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}

.cfg-root .fcode{font-size:16px;font-weight:900;letter-spacing:-.01em;color:var(--cp)}

.cfg-root .flabel{font-size:12.5px;color:var(--body);font-weight:500;margin-top:2px}

.cfg-root .pwgrid{display:flex;flex-wrap:wrap;gap:8px}

.cfg-root .pw{border:1px solid var(--bdr);background:var(--w);min-width:74px;padding:13px 10px;cursor:pointer;text-align:center;font-weight:800;font-size:15px;transition:all .16s;font-family:var(--f);color:var(--cp)}

.cfg-root .pw span{display:block;font-size:10.5px;font-weight:600;color:var(--body);margin-top:2px;letter-spacing:.04em}

.cfg-root .pw:hover{border-color:var(--cp)}

.cfg-root .pw.on{background:var(--dk);border-color:var(--dk);color:#fff}

.cfg-root .pw.on span{color:rgba(255,255,255,.6)}

.cfg-root .pw-nd{border-style:dashed}
/* desktop: griglie e chips; mobile (<=768px): menu a tendina */
.cfg-root .m-only{display:none}

@media (max-width:768px){
.cfg-root .d-only{display:none}

.cfg-root .m-only{display:block}
}
/* menu a tendina (formato, potenza, spessore) */
.cfg-root .selwrap{position:relative;max-width:560px}

.cfg-root .selwrap::after{content:'\25BE';position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--acc);font-size:13px;pointer-events:none}

.cfg-root .sel{width:100%;height:48px;appearance:none;-webkit-appearance:none;border:1px solid var(--bdr);padding:0 40px 0 16px;font-family:var(--f);font-size:var(--cfg-fs,15px);font-weight:500;color:var(--cp);background:var(--w);cursor:pointer;outline:none;border-radius:0;min-width:0;max-width:100%}

.cfg-root .sel:focus{border-color:var(--cp);box-shadow:0 0 0 2px rgba(211,23,27,.18)}

.cfg-root .selhint{font-size:12.5px;color:var(--steel);margin-top:8px}
/* sorgente */
.cfg-root .sgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.cfg-root .scard{border:1px solid var(--bdr);padding:20px 18px;cursor:pointer;transition:all .16s;text-align:center;background:var(--w)}

.cfg-root .scard:hover:not(.dis){border-color:var(--cp)}

.cfg-root .scard.on{border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}

.cfg-root .scard.dis{opacity:.45;cursor:not-allowed}

.cfg-root .sname{font-size:19px;font-weight:900;letter-spacing:-.01em}

.cfg-root .ssub{font-size:12.5px;color:var(--steel);font-weight:500;margin-top:3px}

.cfg-root .scard .oreason{margin-top:6px}
/* richieste libere e misura personalizzata */
.cfg-root .grouplbl{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);margin-bottom:8px}

.cfg-root .mhint{font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--acc);margin-left:10px}

.cfg-root .cbox label{display:block;font-size:14px;font-weight:700;margin-bottom:7px;color:var(--cp)}

.cfg-root .cbox-gap{margin-top:18px;padding-top:18px;border-top:1px solid var(--surf)}

.cfg-root .cbox input, .cfg-root .cbox textarea{width:100%;min-width:0;border:1px solid var(--bdr);border-radius:0;-webkit-appearance:none;appearance:none;padding:12px 16px;font-family:var(--f);font-size:var(--cfg-fs,15px);font-weight:500;color:var(--cp);outline:none;transition:border-color .2s,box-shadow .2s;resize:vertical}

.cfg-root .cbox input{height:48px;padding:0 16px}

.cfg-root .cbox input:focus, .cfg-root .cbox textarea:focus{border-color:var(--cp);box-shadow:0 0 0 2px rgba(211,23,27,.18)}

.cfg-root .cbox input.filled{border-color:var(--cp)}

.cfg-root .cbox p{font-size:12px;color:var(--steel);margin-top:7px}

.cfg-root .crow{display:flex;gap:10px}

.cfg-root .crow input{flex:1;min-width:0}

.cfg-root .crow .btn{flex-shrink:0}

.cfg-root .ctags{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}

.cfg-root .ctag{display:inline-flex;align-items:center;gap:7px;background:var(--w);border:1px solid var(--bdr);padding:7px 8px 7px 12px;font-size:13px;font-weight:600}

.cfg-root .ctag button{background:none;border:none;cursor:pointer;color:var(--steel);font-size:16px;line-height:1;padding:0}

.cfg-root .ctag button:hover{color:var(--acc)}

.cfg-root .pw-nd{border-style:dashed}

.cfg-root .fld select{width:100%;min-width:0;height:48px;border:1px solid var(--bdr);border-radius:0;-webkit-appearance:none;appearance:none;padding:0 40px 0 16px;font-family:var(--f);font-size:var(--cfg-fs,15px);font-weight:500;color:var(--cp);outline:none;cursor:pointer;text-overflow:ellipsis;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23D3171B'/%3E%3C/svg%3E") no-repeat right 16px center;transition:border-color .2s,box-shadow .2s}

.cfg-root .fld select:focus{border-color:var(--cp);box-shadow:0 0 0 2px rgba(211,23,27,.18)}

.cfg-root .fld select.err{border-color:var(--acc)}
/* riepilogo: foto e modulo restano agganciati insieme durante lo scorrimento */
.cfg-root .sumcol{align-self:start;position:sticky;top:20px}

.cfg-root .sum-img{margin-bottom:14px}

.cfg-root .sum-img img{display:block;width:100%;height:auto}

.cfg-root .sum{border:1px solid var(--bdr);background:var(--w)}

.cfg-root .sum-head{background:var(--dk);padding:20px 22px}

.cfg-root .sum-ey{font-size:11.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-dk);margin-bottom:6px}

.cfg-root .sum-ti{font-size:22px;font-weight:800;color:#fff;letter-spacing:-.01em}

.cfg-root .sum-body{padding:8px 22px}

.cfg-root .srow{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--surf)}

.cfg-root .srow:last-child{border-bottom:none}

.cfg-root .skey{font-size:12px;font-weight:700;color:var(--steel);letter-spacing:.02em;flex-shrink:0;padding-top:2px}

.cfg-root .sval{font-size:13.5px;font-weight:700;text-align:right;line-height:1.45;flex:1 1 auto;min-width:0;overflow-wrap:anywhere}

.cfg-root .sval.em{color:#9AA4A9;font-weight:500;font-style:italic}

.cfg-root .stags{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}

.cfg-root .stag{background:var(--w);border:1px solid var(--bdr);padding:3px 8px;font-size:11px;font-weight:700;color:var(--cp);text-align:left}

.cfg-root .sprog{padding:14px 22px;background:var(--w);border-top:1px solid var(--bdr)}

.cfg-root .sprog-l{display:flex;justify-content:space-between;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);margin-bottom:8px}

.cfg-root .sprog-l span{color:var(--acc)}

.cfg-root .spt{height:3px;background:var(--bdr)}

.cfg-root .spf{height:3px;background:var(--acc);transition:width .35s ease;width:0}

.cfg-root .sacts{padding:18px 22px 20px;display:flex;flex-direction:column;gap:10px}

.cfg-root .sacts .btn{width:100%}

.cfg-root .sacts-row{display:flex;gap:10px}

.cfg-root .sacts-row .btn{flex:1;font-size:13px;padding:12px 10px}

.cfg-root .snote{padding:0 22px 18px;font-size:11.5px;color:var(--steel);line-height:1.6}
/* modal */
/* sopra la testata del sito (.hdr 1000, barra 1001, menu a tendina 1200): prima la testata copriva titolo e X della finestra */
.cfg-root .ov{display:none;position:fixed;inset:0;background:rgba(22,33,37,.6);z-index:1500;align-items:center;justify-content:center;padding:20px}

.cfg-root .ov.open{display:flex}

.cfg-root .modal{background:#fff;width:520px;max-width:100%;max-height:92vh;max-height:92dvh;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

.cfg-root .mh{background:var(--dk);padding:20px 26px;display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:0;z-index:2}

.cfg-root .mh-t{font-size:16px;font-weight:800;color:#fff}

.cfg-root .mh-x{background:none;border:none;color:rgba(255,255,255,.72);font-size:28px;cursor:pointer;line-height:1;width:44px;height:44px;margin:-12px -14px -12px 0;display:flex;align-items:center;justify-content:center;flex-shrink:0}

.cfg-root .mh-x:hover{color:#fff}

.cfg-root .mi{padding:26px}

.cfg-root .recap{background:var(--w);border:1px solid var(--bdr);padding:14px 18px;margin-bottom:20px;font-size:13px;line-height:2;color:var(--steel)}

.cfg-root .recap strong{color:var(--cp);font-weight:700}

.cfg-root .fg{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.cfg-root .fg .full{grid-column:1/-1}

/* provincia fuori dall'Italia (corpo.html, attributo hidden) */
.cfg-root .fld[hidden]{display:none}

/* Citta' | Provincia sulla stessa riga; senza provincia (fuori dall'Italia) la citta' prende la riga */
.cfg-root .fg:not(:has(.f-it:not([hidden]))) .fld:has(#f-citta){grid-column:1/-1}

/* le celle della griglia non si allargano sul testo delle tendine (sul telefono
   "Seleziona la provincia..." faceva uscire la finestra dallo schermo) */
.cfg-root .fg .fld{min-width:0}

.cfg-root .fld label{display:block;font-size:14px;font-weight:700;margin-bottom:7px;color:var(--cp)}

.cfg-root .fld input, .cfg-root .fld textarea{width:100%;min-width:0;border:1px solid var(--bdr);border-radius:0;-webkit-appearance:none;appearance:none;padding:12px 16px;font-family:var(--f);font-size:var(--cfg-fs,15px);font-weight:500;color:var(--cp);outline:none;transition:border-color .2s,box-shadow .2s}

.cfg-root .fld input{height:48px;padding:0 16px}

.cfg-root .fld input:focus, .cfg-root .fld textarea:focus{border-color:var(--cp);box-shadow:0 0 0 2px rgba(211,23,27,.18)}

.cfg-root .fld input.err{border-color:var(--acc)}

.cfg-root .fcheck{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:13px;color:var(--steel)}

.cfg-root .fcheck input{width:20px;height:20px;margin:0;flex-shrink:0;accent-color:var(--acc);cursor:pointer}

.cfg-root .fcheck label{cursor:pointer;line-height:20px;padding-top:0}
.cfg-root .fcheck.err{color:var(--acc)}
.cfg-root .fcheck.err input{outline:2px solid var(--acc);outline-offset:2px}
/* link all'informativa privacy accanto alla spunta del consenso */
.cfg-root .fcheck .f-pp{color:var(--acc);text-decoration:underline;white-space:nowrap}

.cfg-root .modal .btn{width:100%;margin-top:20px}

.cfg-root .mnote{font-size:11.5px;color:var(--steel);text-align:center;margin-top:12px;line-height:1.6}

.cfg-root .merr{font-size:13px;font-weight:600;color:var(--acc);text-align:center;margin-top:12px;line-height:1.5}

.cfg-root .mok{padding:44px 30px;text-align:center}

.cfg-root .mok-t{font-size:22px;font-weight:800;margin-bottom:10px}

.cfg-root .mok-d{font-size:14px;color:var(--steel);line-height:1.8}

.cfg-root .mok table{width:100%;margin-top:20px;border-collapse:collapse;text-align:left}

.cfg-root .mok td{border:1px solid var(--bdr);padding:8px 12px;font-size:12.5px}

.cfg-root .mok td:first-child{font-weight:700;width:38%}
/* stampa: #printArea e' fratello di .cfg-root (dentro <main>), a schermo
   non si vede mai, nemmeno dopo aver stampato */
main > #printArea{display:none}

@media (max-width:980px){
.cfg-root .cfggrid{grid-template-columns:1fr}

.cfg-root .sumcol{position:static}

.cfg-root .ogrid, .cfg-root .sgrid{grid-template-columns:1fr}
}
/* ── layout largo: contenitore dell'header del sito (1640 con padding 44).
   Sotto i 1200 px tutto torna al comportamento di prima. ── */
@media (min-width:1200px){
.cfg-root .hero{padding:64px 0 56px}

.cfg-root .proto{padding:12px 0}

.cfg-root .hero-in, .cfg-root .proto-in{max-width:1640px;padding:0 44px}

.cfg-root .wrap{max-width:1640px;padding:48px 44px 110px}

.cfg-root .hero h1{font-size:clamp(40px,3.2vw,52px)}

.cfg-root .hero p{font-size:18px;max-width:680px}

.cfg-root .series-desc{font-size:16.5px;max-width:720px}

.cfg-root .series-block{margin-bottom:72px;padding-bottom:72px}

.cfg-root .wizgrid{grid-template-columns:1fr minmax(430px,44%);gap:44px}

.cfg-root .cfggrid{grid-template-columns:1fr minmax(410px,36%);gap:44px}

.cfg-root .selwrap{max-width:720px}

.cfg-root .mm-table{max-width:720px}

.cfg-root .mm-head, .cfg-root .mm-row{grid-template-columns:minmax(0,1fr) 110px 110px 20px}

.cfg-root .wizsum-head{padding:20px 24px}

.cfg-root .rlead{padding:16px 24px}

.cfg-root .rrow{padding:18px 24px}

.cfg-root .rsend{padding:16px 24px}

.cfg-root .rname{font-size:20px}

.cfg-root .rwhy{font-size:15.5px}

.cfg-root .sum-head{padding:22px 26px}

.cfg-root .sum-body{padding:10px 26px}

.cfg-root .sacts{padding:20px 26px 22px}

.cfg-root .cfghead h2{font-size:clamp(34px,3vw,44px)}

.cfg-root .ph{padding:15px 28px}

.cfg-root .pb{padding:22px 28px}

.cfg-root .wiz-cta{padding:38px 44px}

.cfg-root .wiz-title{font-size:26px}

.cfg-root .wiz-cta p{font-size:16px;max-width:640px}
}

@media (min-width:1400px){
.cfg-root .machines-grid{grid-template-columns:repeat(4,1fr)}
}

/* --- adattamenti al contesto del sito (non stanno nel prototipo) --- */
/* --steel e' un alias che il prototipo usa e global.css non ha */
.cfg-root { --steel: #5F6A72; }
/* il riepilogo appiccicato (.sumcol nel prototipo) deve stare sotto l'header
   sticky del sito, non a 20px dal bordo finestra */
.cfg-root .sumcol { top: 112px; }
@media (max-width: 1024px) { .cfg-root .sumcol { top: 92px; } }
@media (max-width: 980px) { .cfg-root .sumcol { position: static; } }
/* La larghezza 1640 NON si tocca qui: il prototipo ha il suo blocco
   "layout largo" a min-width 1200 ed e' lui la fonte. */

/* Stampa: fogli A4 espliciti (.p-sheet) costruiti da printRecap() in
   logica.js, ognuno con testata (logo a sinistra, numero di pagina a destra)
   e corpo ad altezza fissa. Le misure dei fogli valgono anche a schermo:
   l'impaginazione li misura in un'area fuori schermo prima di stampare.
   #printArea sta dentro <main> (nel prototipo era figlio di body): in stampa
   si tiene in piedi solo la catena body > main > #printArea. @page margin 0
   toglie data, titolo e indirizzo che il browser stamperebbe nei margini.
   Niente position:fixed (Safari lo piazza dove stava lo scroll). */
#printArea { font-family: var(--f); color: #162125; }
#printArea .p-sheet { box-sizing: border-box; width: 210mm; height: 296.5mm; padding: 12mm 20mm 18mm; display: flex; flex-direction: column; background: #fff; }
#printArea .p-sheet + .p-sheet { break-before: page; page-break-before: always; }
#printArea .p-hd { flex: none; display: flex; align-items: center; justify-content: space-between; height: 11mm; margin-bottom: 9mm; }
#printArea .p-logo-img { width: 31mm; height: auto; display: block; }
#printArea .p-num { font-size: 8.5pt; font-weight: 700; color: #5C6C74; letter-spacing: .04em; white-space: nowrap; }
#printArea .p-body { flex: 1 1 auto; min-height: 0; overflow: hidden; }
#printArea .p-ey { color: #D3171B; font-size: 8.5pt; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; margin: 8mm 0 2mm; }
#printArea .p-body > div:first-child > .p-ey:first-child { margin-top: 0; }
#printArea h2 { font-size: 19pt; font-weight: 800; line-height: 1.15; margin: 0 0 4mm; }
#printArea .p-data { width: 100%; border-collapse: collapse; }
#printArea .p-data td { border: 1px solid #ccc; padding: 2.2mm 3.5mm; font-size: 9.5pt; line-height: 1.45; vertical-align: top; }
#printArea .p-data td:first-child { font-weight: 700; width: 34%; }
#printArea .p-note { margin-top: 8mm; font-size: 8pt; color: #5C6C74; line-height: 1.6; }
@media print {
  @page { size: A4; margin: 0; }
  html, body { margin: 0 !important; padding: 0 !important; background: #fff !important; }
  body > * { display: none !important; }
  body > main { display: block !important; }
  main > * { display: none !important; }
  main > #printArea { display: block !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ── Telefoni e tablet (2026-10-14, collaudo iPhone/Android/iPad) ──
   - le colonne delle griglie si stringono invece di allargare la pagina (le tendine
     con le voci lunghe e i campi di testo hanno una larghezza propria);
   - campi a 16 px sui dispositivi touch: sotto i 16 px iOS ingrandisce la pagina a
     ogni tocco (il totem ha i suoi 19 px in totem.css, che vincono);
   - modulo su una colonna sotto i 520 px, finestra a tutto schermo sui telefoni;
   - pagina sotto ferma mentre la finestra e' aperta. */
.cfg-root .cfggrid > *, .cfg-root .wizgrid > *, .cfg-root .fg > *, .cfg-root .ogrid > *, .cfg-root .sgrid > *, .cfg-root .formrow > *{min-width:0}

.cfg-root input, .cfg-root select, .cfg-root textarea{max-width:100%}

@media (hover:none) and (pointer:coarse){
.cfg-root{--cfg-fs:16px;--cfg-fs-s:16px}
}
@supports (-webkit-touch-callout:none){
.cfg-root{--cfg-fs:16px;--cfg-fs-s:16px}
}

.cfg-root .ferr{font-size:13px;font-weight:600;color:var(--acc);margin-top:6px;line-height:1.45}

.cfg-root .fcheck + .ferr{margin-top:8px;padding-left:30px}

@media (max-width:520px){
.cfg-root .fg{grid-template-columns:1fr;gap:16px}

.cfg-root .mm-head, .cfg-root .mm-row{grid-template-columns:minmax(0,1fr) 76px 76px 20px;gap:6px}

.cfg-root .mm-row input{padding:0 6px}
}

@media (max-width:600px), (max-height:500px){
.cfg-root .ov{padding:0;align-items:stretch}

.cfg-root .modal{width:100%;max-width:none;height:100%;max-height:none}

.cfg-root .mh{padding:12px 20px}

.cfg-root .mi{padding:20px 20px calc(32px + env(safe-area-inset-bottom))}
}

html:has(.cfg-root .ov.open){overflow:hidden}

/* strato web: tools/configuratore-web/web.css */
/* Strato "web" sopra al configuratore del sito.
   Vale SOLO nella pagina generata da tools/build-configuratore-web.mjs. Il
   configuratore in se' (src/components/pages/configuratore/stile.css) si
   eredita tal quale ed e' gia' pensato per computer, tablet e telefono; qui ci
   sono la base che nel sito arriva da global.css (reset, corpo, titoli), la
   barra con la sola C e le lingue (come il totem, Alessio 2026-10-01) e il piede
   con l'informativa. Niente header del sito, niente menu, niente link ai siti. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--w); }
body {
  font-family: var(--f);
  color: var(--cp);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
img { max-width: 100%; }
/* come global.css del sito */
.cfg-root h1, .cfg-root h2, .cfg-root h3 { text-wrap: balance; }
.cfg-root p { text-wrap: pretty; }
/* il <button> non eredita corpo, interlinea e colore (stile.css eredita solo la famiglia) */
.cfg-root button { color: inherit; font-size: inherit; line-height: inherit; letter-spacing: inherit; }

:root { --cw-bar: 60px; --cw-pad: 20px; }
@media (min-width: 768px) { :root { --cw-bar: 68px; --cw-pad: 40px; } }
@media (min-width: 1200px) { :root { --cw-bar: 76px; --cw-pad: 44px; } }

/* ══════════ BARRA ══════════ */
.cw-bar {
  position: sticky; top: 0; z-index: 50;
  background: var(--dk);
  border-bottom: 1px solid var(--bdr-dk);
}
/* stesso contenitore della testata e del corpo del configuratore: 1280, 1640 sopra i 1200 px */
.cw-in {
  max-width: 1280px; margin: 0 auto;
  height: var(--cw-bar); padding: 0 var(--cw-pad);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
@media (min-width: 1200px) { .cw-in { max-width: 1640px; } }
.cw-logo { display: flex; align-items: center; height: 100%; flex-shrink: 0; }
.cw-logo img { height: 34px; width: auto; display: block; }
@media (min-width: 768px) { .cw-logo img { height: 40px; } }
@media (min-width: 1200px) { .cw-logo img { height: 44px; } }
/* lingue come nel sito: solo testo, riga rossa sotto quella attuale; bersagli da 44 px per il touch */
.cw-lang { display: flex; gap: 0; }
.cw-lang button {
  font-family: var(--f); font-size: 13px; font-weight: 600; letter-spacing: .06em;
  min-width: 36px; height: 44px; padding: 0 5px;
  background: transparent; color: rgba(255,255,255,.72);
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  cursor: pointer; transition: color .15s;
}
.cw-lang button:hover { color: #fff; }
.cw-lang button[aria-pressed="true"] { color: #fff; font-weight: 900; border-bottom-color: var(--acc); }
@media (min-width: 768px) {
  .cw-lang { gap: 6px; }
  .cw-lang button { font-size: 14px; min-width: 44px; padding: 0 8px; }
}

/* il riepilogo appiccicato scende sotto la barra (nel sito sta sotto l'header) */
.cfg-root .sumcol { top: calc(var(--cw-bar) + 16px); }

/* ══════════ PIEDE ══════════ */
.cw-foot { background: var(--dk); color: rgba(255,255,255,.72); }
.cw-foot .cw-in { height: auto; padding-top: 22px; padding-bottom: 22px; font-size: 13px; line-height: 1.6; flex-wrap: wrap; justify-content: flex-start; }
.cw-foot a { color: #fff; }

/* in stampa (riepilogo A4 impaginato da logica.js) barra e piede non escono */
@media print {
  .cw-bar, .cw-foot { display: none !important; }
}