@font-face{font-family:'Jost';font-weight:300;font-style:normal;font-display:swap;src:url(font/jost-300.woff2) format('woff2')}@font-face{font-family:'Jost';font-weight:400;font-style:normal;font-display:swap;src:url(font/jost-400.woff2) format('woff2')}@font-face{font-family:'Jost';font-weight:500;font-style:normal;font-display:swap;src:url(font/jost-500.woff2) format('woff2')}@font-face{font-family:'Inter';font-weight:400;font-style:normal;font-display:swap;src:url(font/inter-400.woff2) format('woff2')}@font-face{font-family:'Inter';font-weight:600;font-style:normal;font-display:swap;src:url(font/inter-600.woff2) format('woff2')}
:root{
 /* sentinella: se questa variabile non arriva, il foglio di stile non e
    stato caricato e la pagina mostra l'avviso in cima (vedi fondo pagina). */
 --css-ok:1;
 --navy:#1B2733; --ink:#0E1720; --red:#B0192E; --red2:#D93B4E; --red3:#8E1425;
 --grey:#68727C; --grey2:#5E6A76; --line:#E4E8EB; --line2:#EFF2F4;
 --paper:#F6F8F9; --white:#fff;
 --fd:'Jost',system-ui,sans-serif; --fb:'Inter',system-ui,sans-serif;
 --tr:.28em; --rad:4px;
 /* Questi tre venivano dal vecchio stile-guide.css e nella fusione non sono
    stati portati: --w, --acc e --mut erano USATI in 13 regole ma non
    definiti da nessuna parte. Risultato: nel configuratore il bordo rosso
    della vetratura scelta e lo sfondo bianco dell'anta selezionata non
    comparivano — non si capiva cosa fosse selezionato. */
 --w:#fff; --acc:var(--red); --mut:var(--grey2);
 --sh1:0 1px 2px rgba(14,23,32,.05);
 --sh2:0 2px 4px rgba(14,23,32,.04),0 12px 32px -14px rgba(14,23,32,.22);
 --sh3:0 4px 8px rgba(14,23,32,.05),0 28px 60px -24px rgba(14,23,32,.4);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--fb);font-size:16px;line-height:1.62;color:var(--navy);
 background:var(--white);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img, svg{max-width:100%}
/* i controlli di modulo NON ereditano il font da soli (Arial 13,3 px di
   default): senza questa riga ogni bottone dimenticato esce in Arial */
button,input,select,textarea{font-family:inherit}
h1, h2, h3, h4{font-family:var(--fd);font-weight:400;margin:0;line-height:1.12;letter-spacing:-.01em}
h1{font-size:clamp(34px,5.6vw,62px);font-weight:300}
h2{font-size:clamp(26px,3.6vw,42px);font-weight:300}
h3{font-size:19px;font-weight:500;letter-spacing:.01em}
p{margin:0 0 15px}
a{color:inherit;text-decoration:none}
/* I link DENTRO il testo si vedono anche senza il colore: rosso su blu
   scuro fa 1,9:1, e chi non distingue i colori non li trovava (WCAG
   1.4.1, axe «link-in-text-block» su 43 pagine). I bottoni no. */
main p a:not(.btn), main li a:not(.btn), main td a:not(.btn), main dd a, main summary a,
main figcaption a, main .avv a, main small a{
 text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
main .cpass li a{text-decoration:none}   /* sono pastiglie, non link nel testo */
.wrap{max-width:1220px;margin:0 auto;padding:0 24px}
.eyebrow{font-family:var(--fd);font-size:11.5px;font-weight:500;letter-spacing:var(--tr);
 text-transform:uppercase;color:var(--red);display:flex;align-items:center;gap:14px}
.eyebrow::after{content:'';flex:1;height:1px;background:var(--line);max-width:120px}
.eyebrow.c{justify-content:center}.eyebrow.c::after{display:none}
.eyebrow.c::before{content:'';width:34px;height:1px;background:var(--red)}
.lead{font-size:17.5px;color:var(--grey2);max-width:38em}
.mut{color:var(--grey)} .sm{font-size:13.5px} .xs{font-size:11.5px;letter-spacing:.02em}
.cap{font-family:var(--fd);font-size:11px;font-weight:500;letter-spacing:var(--tr);
 text-transform:uppercase;color:var(--grey)}
[hidden]{display:none!important}

/* ---------- logo ---------- */
.logo{display:flex;align-items:center;gap:12px}
.logo .tx b{display:block;font-family:var(--fd);font-weight:400;font-size:17px;
 letter-spacing:.30em;line-height:1;color:var(--navy);text-transform:uppercase}
.logo .tx i{display:block;font-style:normal;font-family:var(--fd);font-weight:500;font-size:9.5px;
 letter-spacing:.34em;color:var(--red);text-transform:uppercase;margin-top:5px}

/* ---------- bottoni ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;cursor:pointer;
 font-family:var(--fd);font-weight:500;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
 padding:15px 26px;border-radius:var(--rad);transition:.18s;white-space:nowrap;line-height:1;max-width:100%}
@media(max-width:640px){.btn{white-space:normal;text-align:center;line-height:1.35}}
.btn.p{background:var(--red);color:#fff}
.btn.p:hover{background:var(--red3)}
.btn.o{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1px var(--line)}
.btn.o:hover{box-shadow:inset 0 0 0 1px var(--navy)}
.btn.oi{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.32)}
.btn.oi:hover{box-shadow:inset 0 0 0 1px #fff}
.btn.s{padding:11px 18px;font-size:11.5px}
.btn:disabled,.btn:disabled:hover{cursor:not-allowed;background:var(--line2);color:var(--grey2);
  box-shadow:inset 0 0 0 1px var(--line)}
/* Prima il bottone spento era il bottone acceso con opacity .4: sul rosso
   faceva testo bianco su rosa, 2,1:1, illeggibile. Finche stava dentro un
   passo nascosto non lo vedeva nessuno; da quando il calcolatore mostra
   subito il suo bottone e' la prima cosa che si vede. Adesso il grigio e'
   dichiarato, non ottenuto per trasparenza: 4,9:1. */

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.93);
 backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:22px;height:82px}
/* i link stanno dentro un <nav> per l'accessibilita: senza questa riga
   il gap:26px non li tocca piu (sono nipoti, non figli) e in home si
   incollavano l'uno all'altro come una parola sola. */
.nav > nav{display:flex;align-items:center;gap:inherit;flex:0 0 auto}
/* la scritta del logo arriva fino al bordo dell'immagine: senza questo
   respiro in piu si incolla alla prima voce del menu. */
.nav > .logo{margin-right:6px}
.nav .nl{font-family:var(--fd);font-size:13.5px;font-weight:400;letter-spacing:.09em;
 text-transform:uppercase;color:var(--grey2);white-space:nowrap;transition:.15s}
.nav .nl:hover{color:var(--red)}
/* Il logo e' cresciuto e il menu era rimasto a 11,5 px: sembrava la
   didascalia del logo, non un menu. Ora 13,5 px, ma le voci sono sei
   invece di otto — le altre stanno nel menu completo (hamburger) e nel
   fondo pagina, dove uno le cerca. La larghezza utile e' sempre 1172 px:
   piu voci vuol dire per forza lettere piu piccole. */
@media(max-width:1180px){.nav{gap:16px}.nav .nl{font-size:12.5px;letter-spacing:.06em}}
/* sotto i 1080 px le voci spariscono (c'e l'hamburger): qui resta vivo
   solo cio che riguarda la riga, non il testo delle voci. */
@media(max-width:1080px){.nav{gap:12px;height:78px}}
@media(max-width:640px){.nav .btn.p.s{padding:12px 14px;font-size:11px;letter-spacing:.08em;white-space:nowrap}
 .nav{gap:10px}}
.nav .sp{margin-left:auto}
.cartb{position:relative;display:flex;align-items:center;gap:9px;font-family:var(--fd);
 font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--navy);cursor:pointer;
 background:none;border:0;padding:12px 0 12px 4px;white-space:nowrap}
.cartb:hover{color:var(--red)}
.cartb .cbi{display:none}
/* Sotto i 640 px la riga non regge logo + scritta + hamburger: la scritta
   diventa un'icona (il nome resta nell'aria-label, quindi chi usa il
   lettore di schermo sente sempre "La tua richiesta") e il bottone tiene
   i suoi 44x44 di area toccabile. */
@media(max-width:640px){
 .cartb{padding:12px;margin-right:-6px}
 .cartb .cbi{display:block}
 .cartb .cbt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .cartb u{position:absolute;top:2px;right:0;min-width:17px;height:17px;font-size:10px}
}
.cartb u{background:var(--red);color:#fff;font-family:var(--fb);font-size:10.5px;font-weight:700;
 min-width:19px;height:19px;border-radius:10px;display:flex;align-items:center;justify-content:center;
 text-decoration:none;padding:0 5px;letter-spacing:0}
.burger{display:none;background:none;border:0;padding:10px;cursor:pointer;margin-left:4px;flex:0 0 auto}
.mnu{display:none;border-top:1px solid var(--line);padding:6px 24px 18px;background:#fff}
.mnu.on{display:block}
.mnu a{display:block;padding:14px 0;font-family:var(--fd);font-size:13px;letter-spacing:.13em;
 text-transform:uppercase;border-bottom:1px solid var(--line2)}

/* ---------- hero ---------- */
.hero{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;
 background:radial-gradient(900px 520px at 78% 12%,rgba(176,25,46,.24),transparent 62%)}
.hcopy{min-width:0}
.hero .in{position:relative;display:grid;grid-template-columns:1.06fr .94fr;gap:56px;
 align-items:center;padding:82px 0 78px}
.hero h1{color:#fff}
.hero h1 em{font-style:normal;color:var(--red2)}
.hero .eyebrow{color:#fff;opacity:.72}
.hero .eyebrow::after{background:rgba(255,255,255,.26)}
.hero .lead{color:rgba(255,255,255,.76);margin-top:20px}
.hcta{display:flex;gap:12px;flex-wrap:wrap;margin:32px 0 0}
.badge{position:absolute;left:20px;bottom:20px;background:rgba(255,255,255,.96);
 backdrop-filter:blur(6px);color:var(--navy);padding:15px 22px;box-shadow:var(--sh3);border-radius:2px}
.badge .cap{display:block;margin-bottom:5px}
.badge b{font-family:var(--fd);font-weight:400;font-size:27px;letter-spacing:-.01em;display:block}
/* Le didascalie sotto i prezzi erano scritte con <s> (barrato): per il
   browser e per chi usa uno screen reader <s> vuol dire «non piu valido»,
   e la nota su IVA e montaggio e la cosa meno barrabile che ci sia.
   11/09/2026: tutte convertite in <small>, con la stessa resa. */
.badge small{display:block;text-decoration:none;font-size:11px;color:var(--grey);margin-top:2px}

/* barra fiducia */
.tbar{background:var(--ink);color:rgba(255,255,255,.82);border-top:1px solid rgba(255,255,255,.08)}
.tbar .in{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.tb{display:flex;align-items:center;gap:16px;padding:26px 30px;position:relative}
.tb+.tb::before{content:'';position:absolute;left:0;top:22%;bottom:22%;width:1px;background:rgba(255,255,255,.13)}
.tb svg{width:34px;height:34px;flex:0 0 34px;color:var(--red2)}
.tb b{display:block;font-family:var(--fd);font-weight:500;font-size:13px;letter-spacing:.16em;
 text-transform:uppercase;color:#fff}
.tb span{display:block;font-size:12.5px;color:rgba(255,255,255,.55);margin-top:3px}

/* ---------- sezioni ---------- */
section{padding:96px 0}
/* la testata e' appiccicosa (82 px, 78 sotto i 1120, 66 sul telefono):
   senza questo un link #sezione fa finire l'occhiello sotto la testata */
section,[id]:target{scroll-margin-top:86px}
@media(max-width:640px){section,[id]:target{scroll-margin-top:68px}}
section.paper{background:var(--paper)}
section.tight{padding:70px 0}
.shead{max-width:660px;margin-bottom:44px}
.shead.c{margin-left:auto;margin-right:auto;text-align:center}
.shead h2{margin:16px 0 0}
.shead p{margin-top:18px;color:var(--grey2);font-size:16.5px}
/* I due sistemi elencati sotto il titolo. Dentro una .shead centrata un
   elenco puntato allineato a sinistra galleggerebbe: qui il blocco sta in
   mezzo e il testo delle righe resta a sinistra, come si legge. */
.prolist{list-style:none;margin:16px auto 0;padding:0;display:inline-block;text-align:left}
.prolist li{position:relative;padding-left:18px;margin:8px 0;color:var(--grey2);font-size:16.5px}
.prolist li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1.5px;background:var(--red)}
.prolist li b{color:var(--ink)}
/* Nelle sezioni dei profili la guarnizione e colorata: la didascalia usa
   lo stesso colore, cosi si capisce a colpo d occhio quale pezzo indica. */
.gz{color:#0D7C86}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.stp{padding:34px 30px 34px 0;border-right:1px solid var(--line)}
.stp:last-child{border-right:0}
.stp .n{font-family:var(--fd);font-weight:300;font-size:34px;color:var(--red);line-height:1;
 display:block;margin-bottom:16px}
.stp h3{margin-bottom:8px}
.stp p{font-size:14.5px;color:var(--grey2);margin:0}

.why{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
.why h3{margin-bottom:10px}
.why p{font-size:15px;color:var(--grey2);margin:0}
.why .ln{width:34px;height:2px;background:var(--red);margin-bottom:20px}

.cmp{width:100%;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums}
.cmp th{font-family:var(--fd);font-size:11px;font-weight:500;letter-spacing:var(--tr);
 text-transform:uppercase;color:var(--grey);padding:0 14px 14px;text-align:left}
.cmp th:nth-child(n+2), .cmp td:nth-child(n+2){text-align:right}
.cmp td{padding:17px 14px;border-top:1px solid var(--line)}
.cmp td.us{font-family:var(--fd);font-size:19px;color:var(--red);white-space:nowrap}
.cmp tr:hover td{background:var(--paper)}

/* ---------- CONFIGURATORE ---------- */
.cfgwrap{background:#fff;border:1px solid var(--line);box-shadow:var(--sh2);border-radius:2px;
 display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);align-items:start}
.cvis{background:var(--paper);padding:30px 30px 24px;display:flex;flex-direction:column;
 border-right:1px solid var(--line);position:sticky;top:102px;min-width:0;
 max-height:calc(100vh - 118px);overflow:auto;overscroll-behavior:contain}
.cvis .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.cvis svg.dis{width:100%;height:auto;max-height:min(52vh,460px);flex:0 0 auto}
.cvis .note{text-align:center;font-size:11.5px;color:var(--grey);margin-top:10px}
.cvis .note b{font-weight:500;color:var(--ink)}
/* il disegno risponde al tocco: quote e ante cambiano colore al passaggio */
#cSvg .quota:hover text,#cSvg .quota:focus text{fill:var(--red)}
#cSvg .quota text{text-decoration:underline dotted;text-underline-offset:3px}
#cSvg g.anta:hover > rect:first-child{fill:rgba(176,25,46,.05)}
.dtoast{position:absolute;left:50%;top:58px;transform:translate(-50%,-6px);z-index:3;
 background:var(--navy);color:#fff;font-size:12.5px;letter-spacing:.02em;padding:8px 14px;
 border-radius:99px;box-shadow:var(--sh3);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
.dtoast.on{opacity:1;transform:translate(-50%,0)}
@media(prefers-reduced-motion:reduce){.dtoast{transition:none}}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px;justify-content:center}
.tags span{font-size:11px;letter-spacing:.06em;color:var(--grey2);background:#fff;
 border:1px solid var(--line);padding:6px 11px;border-radius:99px}
.cpan{padding:30px 30px 0;display:flex;flex-direction:column;min-width:0}
.blk{padding-bottom:24px}
.blk+.blk{border-top:1px solid var(--line2);padding-top:24px}
.blk>.lb{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:13px}

/* --- barra di modifica articolo --- */
.editbar{display:flex;align-items:center;gap:9px;margin:0 0 10px;padding:10px 13px;
  border:1px solid #C9D8EA;background:#EFF5FB;border-radius:10px;font-size:12.5px;
  line-height:1.45;color:#2B4A6B}
.editbar svg{flex:0 0 auto}
.editbar span{flex:1 1 auto}
.editbar button{flex:0 0 auto;border:0;background:none;color:#2B4A6B;font-family:inherit;font-weight:600;
  text-decoration:underline;cursor:pointer;font-size:12.5px;padding:2px 4px}
.rowbt{display:flex;gap:10px}
/* --- riepilogo ordine --- */
#rvWrap{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200}
#rvWrap .rv-bg{position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(14,23,32,.55)}
#rvWrap .rv-md{position:relative;max-width:660px;margin:4vh auto;max-height:92vh;overflow:auto;
  background:#fff;border-radius:16px;padding:28px 28px 24px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
#rvWrap h3{margin:0 0 6px;font:300 26px/1.2 var(--fd)}
#rvWrap .rv-sub{margin:0 0 18px;font-size:13.5px;color:var(--grey2)}
.rv-it{display:grid;grid-template-columns:110px 1fr auto;gap:14px;align-items:start;
  border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px}
.rv-sv{min-width:0}
.rv-it svg{width:100%;height:110px}
.rv-tx b{display:block;font-size:14px;margin-bottom:6px}
.rv-r{display:flex;justify-content:space-between;gap:14px;font-size:12.5px;padding:2.5px 0}
.rv-r small{text-decoration:none;color:var(--grey2);font-size:inherit}
.rv-r b{font-weight:600;text-align:right}
.rv-pz{text-align:right;white-space:nowrap}
.rv-pz span{display:block;font-size:12px;color:var(--grey)}
.rv-pz b{font-size:16px}
.rv-tot{border-top:2px solid var(--navy);margin-top:14px;padding-top:10px}
.rv-big{font-size:16px}.rv-big b{font-size:19px}
.rv-ck{display:flex;gap:9px;align-items:flex-start;margin:16px 0 14px;font-size:13.5px;cursor:pointer}
.rv-ck input{width:18px;height:18px;margin-top:1px}
.rv-bt{display:flex;gap:10px;flex-wrap:wrap}
.rv-bt .btn{flex:1 1 auto}
.rv-x{position:absolute;top:10px;right:12px;width:34px;height:34px;border:0;background:none;
  font-size:20px;color:var(--grey);cursor:pointer;border-radius:8px}
.rv-x:hover{color:var(--navy)}
@media(max-width:560px){#rvWrap .rv-md{margin:0;max-height:100vh;border-radius:0}
 .rv-it{grid-template-columns:80px 1fr}.rv-it svg{height:88px}.rv-pz{grid-column:1/3;text-align:left;display:flex;gap:8px;align-items:baseline}
 /* su schermo stretto la colonna di destra si riduce a due parole per riga: meglio etichetta sopra e valore sotto, allineati a sinistra */
#rvWrap .rv-md h3{padding-right:46px}
 .rv-it .rv-r{display:block;padding:4px 0}
 .rv-it .rv-r b{text-align:left;margin-top:1px}
 .rv-tot .rv-r{display:flex}}
/* --- caso appartamento --- */
#appartamento{background:var(--paper,#F7F8F9);border-top:1px solid var(--line)}
.apwrap{display:grid;grid-template-columns:1.5fr 1fr;gap:34px;align-items:start;margin-top:8px}
.apitems{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.apit{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 12px 10px;text-align:center}
.apit svg{width:100%;height:110px;display:block}
.apit b{display:block;font-size:13.5px;margin-top:6px}
.apit small{display:block;text-decoration:none;font-size:11.5px;color:var(--grey)}
.apit em{display:block;font-style:normal;font-size:14px;font-weight:600;color:var(--red);margin-top:3px}
.apsum{background:var(--navy);color:#fff;border-radius:14px;padding:26px 26px 24px;position:sticky;top:94px}
.apmq{display:flex;gap:26px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.18)}
.apmq span{font-size:13px;color:rgba(255,255,255,.72);line-height:1.4}
.apmq i{display:block;font-family:var(--fd);font-style:normal;font-size:22px;color:#fff}
.apok{list-style:none;margin:16px 0 0;padding:0}
.apok li{font-size:13.5px;line-height:1.7;color:rgba(255,255,255,.82);padding-left:16px;position:relative}
.apok li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;
 border-radius:50%;background:rgba(255,255,255,.5)}
.apsum .cap{color:rgba(255,255,255,.65)}
.apsum>b{display:block;font-size:40px;font-weight:300;letter-spacing:-.01em;margin:8px 0 2px}
.apsum small{display:block;text-decoration:none;font-size:12.5px;color:rgba(255,255,255,.62);margin-top:5px}
.apbtn{display:flex;flex-direction:column;gap:9px;margin-top:18px}
.apbtn .btn.o{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.apbtn .btn.o:hover{box-shadow:inset 0 0 0 1px #fff}
@media(max-width:900px){.apwrap{grid-template-columns:1fr}.apitems{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.apitems{grid-template-columns:1fr 1fr}.apit svg{height:84px}}
/* --- passi del configuratore --- */
/* --- passaggi del configuratore --- */
/* La lista in alto e il titolo di ogni gruppo dicono la stessa cosa con lo
   stesso numero: chi arriva qui deve capire in un colpo d'occhio dove si
   trova e quanto manca. */
.cpass li a{display:flex;align-items:center;gap:8px;color:inherit;
 padding:5px 11px 5px 5px;border-radius:99px;transition:.15s;min-height:34px}

.cstep{display:flex;align-items:baseline;gap:10px;margin:34px 0 14px;padding-top:16px;
 border-top:1px solid var(--line);scroll-margin-top:100px}
.cstep:first-of-type{margin-top:0;padding-top:0;border-top:0}
.cstep b{flex:0 0 auto;font-family:var(--fd);font-size:12px;font-weight:600;letter-spacing:.08em;
 color:#fff;background:var(--red);border-radius:99px;padding:4px 9px;line-height:1}
.cstep .ct{font-family:var(--fd);font-size:16px;font-weight:500;color:var(--ink);letter-spacing:.02em}
.cstep .cd{font-size:13px;color:var(--grey);min-width:0}
@media(max-width:520px){.cstep{flex-wrap:wrap;gap:6px 10px}.cstep .cd{flex:1 0 100%}}
/* legenda del disegno: senza questa nessuno sa cosa vuol dire il triangolo */
.cleg{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.cleg li{display:flex;align-items:flex-start;gap:9px;font-size:12px;line-height:1.5;color:var(--grey2)}
.cleg b{color:var(--ink);font-weight:600}
.cleg .lg{flex:0 0 auto;width:14px;height:14px;margin-top:2px;position:relative}
.cleg .lgA::after,.cleg .lgB::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;
 border:1px solid var(--red);background:transparent}
.cleg .lgA::after{clip-path:polygon(0 0,100% 50%,0 100%)}
.cleg .lgB::after{clip-path:polygon(0 100%,50% 0,100% 100%)}
.cleg .lgC::after{content:'';position:absolute;left:0;right:0;top:6px;height:1px;
 background:var(--grey);box-shadow:0 -4px 0 -3px var(--grey),0 4px 0 -3px var(--grey)}
.cpass{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;margin:-26px 0 30px;padding:0;
  justify-content:center}
.cpass li{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--grey2)}
.cpass li b{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--red);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:600}
/* Il blocco sta su fondo chiaro: se il pallino fosse sempre pieno di rosso
   non si capirebbe QUALE passaggio e attivo. Fuori = contornato, dentro = pieno.
   Queste righe vanno DOPO «.cpass li b», altrimenti le vince lui. */
.cpass li b{background:#fff;color:var(--grey2);box-shadow:inset 0 0 0 1.4px var(--line)}
.cpass li a:hover{background:#fff;box-shadow:0 0 0 1px var(--line)}
.cpass li a:hover b{color:var(--navy);box-shadow:inset 0 0 0 1.4px var(--navy)}
.cpass li a.on{background:#fff;box-shadow:0 0 0 1px var(--line);color:var(--ink)}
.cpass li a.on b{background:var(--red);color:#fff;box-shadow:none}
/* Sotto i 1080 px il disegno non e piu sticky e la lista dei passaggi
   sparirebbe in alto dopo due dita di scorrimento: qui diventa una
   striscia appiccicata sotto la testata (78 px, 66 sotto i 640), su una
   riga sola che scorre di lato se non ci sta. Il pallino pieno dice a
   che punto si e — e' l'unica bussola su un telefono. */
@media(max-width:1080px){
 .cpass{position:sticky;top:79px;z-index:20;background:var(--paper);
  flex-wrap:nowrap;justify-content:flex-start;gap:4px;
  margin:-26px -24px 24px;padding:8px 24px;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch}
 .cpass::-webkit-scrollbar{display:none}
 .cpass li{flex:0 0 auto;font-size:13px}
 .cpass li a{padding:4px 9px 4px 4px;min-height:32px;gap:6px}
 .cpass li b{width:20px;height:20px;font-size:11px}
}
@media(max-width:640px){.cpass{top:67px;margin:-26px -18px 22px;padding:8px 18px}}
@media(max-width:400px){.cpass{gap:2px}.cpass li a{padding:4px 7px 4px 3px;gap:5px}}
/* i titoli dei passaggi devono fermarsi SOTTO la striscia, non dietro */
/* «.cpan .cstep»: deve vincere su [id]:target (riga ~135) */
.cpan .cstep{scroll-margin-top:100px}
@media(max-width:1080px){.cpan .cstep{scroll-margin-top:132px}}
/* --- guide contestuali («?») --- */
.blk{position:relative}
.hbt{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:1.4px solid var(--line);/* 26 e non 24: il minimo WCAG 2.5.8 e' 24 esatti, e misurato dal browser
   a volte torna 23,98 per l'arrotondamento sub-pixel. Due pixel in piu'
   costano niente e tolgono l'ambiguita'. (test 71, 13/09/2026) */
  background:#fff;color:var(--grey);font:600 11.5px/1 var(--fd);cursor:pointer;margin-left:8px;
  display:inline-flex;align-items:center;justify-content:center;padding:0;transition:.15s;
  align-self:center;position:relative}
.hbt::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;
  transform:translate(-50%,-50%)}
.hbt:hover, .hbt:focus-visible, .hbt[aria-expanded="true"]{border-color:var(--navy);color:var(--navy)}
.lb .lgrp{display:flex;align-items:center;min-width:0}
.hpop{position:absolute;z-index:90;top:32px;left:0;right:0;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:0 18px 44px rgba(14,23,32,.16);padding:16px 40px 15px 18px;
  font-size:13px;line-height:1.58;color:var(--navy)}
.hpop .hpt{display:block;font:500 11px/1.3 var(--fd);letter-spacing:var(--tr);text-transform:uppercase;
  color:var(--red);margin:0 0 9px}
.hpop p{margin:0 0 8px;color:var(--grey2)}
.hpop p:last-child{margin-bottom:0}
.hpop b{color:var(--navy)}
.hpop .hx{position:absolute;top:6px;right:6px;width:30px;height:30px;border:0;background:none;
  color:var(--grey);font-size:17px;line-height:1;cursor:pointer;border-radius:8px}
.hpop .hx:hover{color:var(--navy)}
@media(max-width:640px){.hpop{position:fixed;left:10px;right:10px;top:auto;bottom:12px;
  max-height:62vh;overflow:auto;box-shadow:0 -12px 44px rgba(14,23,32,.28)}}
/* nota informativa vetro (non bloccante) */
.inota{display:flex;gap:9px;align-items:flex-start;margin:11px 0 0;padding:10px 12px;
  border:1px solid #EAD9B0;background:#FCF7EA;border-radius:10px;font-size:12.5px;
  line-height:1.5;color:#6B5A2E}
.inota svg{flex:0 0 auto;margin-top:1px}

.blk>.lb .cap{color:var(--navy)}
.blk>.lb em{font-style:normal;font-size:12.5px;color:var(--grey)}

.seg{display:flex;border:1px solid var(--line);border-radius:2px;overflow:hidden;min-width:0}
.seg button{flex:1 1 0;min-width:0;border:0;background:#fff;padding:14px 6px;cursor:pointer;font-family:var(--fd);
 font-size:12.5px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--grey2);
 transition:.15s;border-right:1px solid var(--line);display:flex;flex-direction:column;
 align-items:center;gap:7px;min-height:48px;justify-content:center}
.seg button:last-child{border-right:0}
.seg button:hover{background:var(--paper)}
.seg button.on{background:var(--navy);color:#fff}
.seg button.on svg{color:#fff}
.seg svg{width:26px;height:22px;color:var(--grey)}
.seg.sm button{padding:12px 4px;font-size:11px;letter-spacing:.05em;line-height:1.2;text-align:center}
.seg svg{flex:0 0 auto}

.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.duo>*{min-width:0}
.inp{position:relative}
.inp label{position:absolute;top:-7px;left:11px;background:#fff;padding:0 6px;
 font-family:var(--fd);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey)}
.inp .box{display:flex;align-items:center;border:1px solid var(--line);border-radius:2px;height:52px}
.inp .box:focus-within{border-color:var(--navy)}
.inp input{flex:1;min-width:0;border:0;outline:0;padding:0 4px 0 14px;height:100%;
 font-family:var(--fd);font-size:19px;font-weight:400;color:var(--navy);background:none}
.inp .u{padding-right:14px;font-size:12px;color:var(--grey);letter-spacing:.08em}
.rgw{margin-top:11px}
.rgw input{width:100%;accent-color:var(--red);height:38px;margin:0}
.mmrow{display:flex;justify-content:space-between;font-size:10.5px;color:var(--grey);
 letter-spacing:.06em;margin-top:2px}
.warn{background:#FDF2F4;border-left:2px solid var(--red);padding:11px 14px;font-size:13px;
 color:var(--red3);margin-top:14px}

.mgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;align-items:stretch}
.mcard{border:1px solid var(--line);background:#fff;padding:8px 6px 10px;cursor:pointer;
 border-radius:2px;display:flex;flex-direction:column;align-items:center;gap:6px;transition:.15s;
 font:inherit;min-width:0}
.mcard:hover{border-color:var(--grey)}
.mcard.on{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.mcard .mv{width:100%;background:var(--paper);border-radius:2px;padding:2px}
.mcard .mv svg{width:100%;height:auto;display:block}
.mcard .mt{text-align:center;line-height:1.25;min-height:31px;display:flex;flex-direction:column;justify-content:center}
.mcard .mt b{display:block;font-family:var(--fd);font-size:12px;font-weight:500;letter-spacing:.04em}
.mcard .mt small{display:block;text-decoration:none;font-size:11.5px;color:var(--grey)}
.mcard.on .mt small{color:var(--red)}

.dots{display:flex;gap:11px;flex-wrap:wrap}
.libera{margin-top:15px;border-top:1px solid var(--line);padding-top:4px}
.libt{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;
  border:0;padding:9px 0;min-height:36px;cursor:pointer;font-weight:600;font-size:12.5px;line-height:1.3;font-family:inherit;color:var(--ink);letter-spacing:.01em}
.libt i{width:9px;height:9px;border-right:1.6px solid var(--grey);border-bottom:1.6px solid var(--grey);
  transform:rotate(45deg);transition:.2s;margin-right:3px}
.libt[aria-expanded="true"] i{transform:rotate(-135deg)}
.libt:hover{color:var(--red)}
.libc{margin-top:14px}
.antarow{display:flex;align-items:center;gap:9px;margin-bottom:9px;flex-wrap:wrap}
.antarow .ai{flex:0 0 68px;font-size:11px;color:var(--grey);letter-spacing:.03em;text-transform:uppercase}
.antarow .ab{display:flex;gap:4px;flex:1 1 auto;background:rgba(0,0,0,.05);padding:3px;border-radius:9px}
.antarow .ab button{flex:1;border:0;background:transparent;padding:7px 4px;border-radius:6px;
  cursor:pointer;font-weight:600;font-size:11.5px;line-height:1.2;font-family:inherit;color:var(--mut);transition:.15s;min-height:34px}
.antarow .ab button.on{background:var(--w);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.13)}
.antarow .ab button:disabled{opacity:.32;cursor:not-allowed}
/* riga puntata dal disegno: si tocca l'anta nel disegno e qui si accende */
.antarow.mira .ai{color:var(--red)}
.antarow.mira .ab{outline:2px solid var(--red);outline-offset:2px;
  animation:mira 1.5s ease-out 1}
@keyframes mira{0%{outline-color:var(--red)}70%{outline-color:var(--red)}
  100%{outline-color:transparent}}
@media(prefers-reduced-motion:reduce){.antarow.mira .ab{animation:none}}
@media(max-width:640px){.antarow .ai{flex:1 1 100%}}
.inp .box input.fuori{color:var(--red);font-weight:700}
.lnkm{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--red);
  cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.lnkm:hover{opacity:.75}
.rassic{list-style:none;margin:13px 0 0;padding:11px 13px;background:rgba(0,0,0,.035);border-radius:10px}
.rassic li{font-size:11.5px;color:#556069;line-height:1.5;padding-left:16px;position:relative}
.rassic li+li{margin-top:4px}
.rassic li:before{content:'\2713';position:absolute;left:0;color:#1a7a3e;font-weight:700}
.rassic a{color:var(--red);font-weight:600;text-decoration:none}
.dtl{margin-top:12px}
.dtl summary{font-size:11.5px;color:#556069;cursor:pointer;user-select:none;
 padding:6px 0;min-height:24px;display:flex;align-items:center}
.dtl summary:hover{color:var(--ink)}
.err{color:var(--red)!important;font-weight:600}
.fam{display:flex;gap:6px;margin:0 0 13px;background:rgba(0,0,0,.05);padding:4px;border-radius:11px}
.fbt{flex:1;border:0;background:transparent;padding:8px 6px;border-radius:8px;cursor:pointer;
  font-weight:600;font-size:12.5px;line-height:1.2;font-family:inherit;color:var(--mut);transition:.16s}
.fbt.on{background:var(--w);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.13)}
.fbt:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.dots.man .dot i{border-radius:50%}
.vetri{display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));gap:9px}
.vbt{display:block;text-align:left;background:var(--w);border:1.5px solid rgba(0,0,0,.13);
  border-radius:12px;padding:12px 13px;cursor:pointer;font:inherit;color:inherit;transition:.16s}
.vbt:hover{border-color:rgba(0,0,0,.28)}
.vbt.on{border-color:var(--acc);box-shadow:0 0 0 3px rgba(176,25,46,.10)}
.vbt:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.vh{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.vh b{font-size:14px;letter-spacing:-.01em}
.vp{font-size:11.5px;font-style:normal;color:var(--mut);white-space:nowrap}
.vbt.on .vp{color:var(--acc);font-weight:700}
.vs{display:block;font-size:11.5px;color:var(--ink);opacity:.72;margin:5px 0 0;
  font-variant-numeric:tabular-nums}
.vd{display:block;font-size:11.5px;color:var(--mut);margin:3px 0 0;line-height:1.42}
@media(max-width:640px){.vetri{grid-template-columns:1fr}}
.dot{width:52px;cursor:pointer;text-align:center;background:none;border:0;padding:0;font:inherit}
.dot i{display:block;width:44px;height:44px;border-radius:50%;margin:0 auto 7px;
 box-shadow:inset 0 0 0 1px rgba(14,23,32,.14);transition:.15s}
.dot.on i{box-shadow:inset 0 0 0 1px rgba(14,23,32,.14),0 0 0 2px #fff,0 0 0 4px var(--red)}
.dot small{display:block;text-decoration:none;font-size:11.5px;color:var(--grey2);letter-spacing:.02em;
 line-height:1.25}
.dot.on small{color:var(--navy)}

.chips{display:flex;flex-direction:column;gap:8px}
.chip{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:2px;
 padding:12px 14px;cursor:pointer;background:#fff;text-align:left;font:inherit;transition:.15s;
 min-height:48px}
.chip:hover{border-color:var(--grey)}
/* pastiglia «Premium» accanto al nome del sistema da 80 mm: dice che e la
   scelta alta senza scrivere di quanto costa di piu (il totale in fondo
   si aggiorna da solo). */
.chip .prem{display:inline-block;text-decoration:none;font-family:var(--fd);font-weight:500;
 font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:var(--navy);
 border-radius:2px;padding:3px 7px;margin-left:8px;vertical-align:2px}
.chip.on .prem{background:var(--red)}
.chip.on{border-color:var(--navy);background:#FBFCFC}
.chip .bx{width:18px;height:18px;border:1px solid var(--line);border-radius:2px;flex:0 0 18px;
 display:flex;align-items:center;justify-content:center}
.chip.on .bx{background:var(--red);border-color:var(--red)}
.chip.on .bx::after{content:'';width:9px;height:5px;border-left:2px solid #fff;
 border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.chip .tx{flex:1;min-width:0}
/* sezione del profilo dentro la scelta del telaio */
.chip .tsez{flex:0 0 auto;width:74px;height:74px;border:1px solid var(--line2);border-radius:3px;background:#fff;object-fit:contain}
@media(max-width:400px){.chip .tsez{width:60px;height:60px}}
.tsezd{margin:10px 0 0}
.tsezd summary{cursor:pointer;font-size:12.5px;color:var(--grey2);text-decoration:underline;text-underline-offset:2px;list-style:none;padding:4px 0}
.tsezd summary::-webkit-details-marker{display:none}
.tsezd summary:hover{color:var(--red)}
.tsez2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px}
.tsez2 figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:4px;padding:10px}
/* la sezione del profilo accanto alla scheda tecnica */
/* due sezioni affiancate: il telaio del 70 e il nodo del 80 */
.sezprof2{display:grid;grid-template-columns:1fr;gap:18px;align-content:start}
.sezprof{margin:0;border:1px solid var(--line);background:#fff;padding:18px 20px}
.sezprof img{width:100%;height:auto;display:block;max-width:420px;margin:0 auto}
.sezprof figcaption{margin-top:12px;font-size:14px;line-height:1.65;color:var(--grey)}
.sezprof figcaption b{color:var(--navy)}
/* le sezioni del profilo nella sezione prodotti: QUATTRO, due per due
   (10/09/2026). Prima riga il profilo da 70 (telaio a L e telaio a Z),
   seconda riga gli stessi due telai nel profilo da 80: cosi' si leggono in
   colonna (standard sopra standard, Z sopra Z) e in riga (70 contro 80). */
.prof2{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px}
.prof2 figure{margin:0;border:1px solid var(--line);background:#fff;padding:16px 18px}
.prof2 img{width:100%;height:auto;display:block;max-width:380px;margin:0 auto}
.prof2 figcaption{margin-top:12px;font-size:14px;line-height:1.65;color:var(--grey)}
.prof2 figcaption b{color:var(--navy)}
/* ---- LO SCHEMA DEI DUE PROFILI (13/09/2026) ----------------------------
   Prima era un elenco di sei voci in cui 70 e 80 stavano appiccicati alle
   loro caratteristiche e le tre voci COMUNI sembravano di uno solo.
   Emre: «meglio uno schema, sono due sistemi». Adesso e' un confronto a
   due colonne per cio' che cambia, e un elenco sotto per cio' che non
   cambia. Si legge in tre secondi e non lascia dubbi su cosa e' di chi. */
.dueprof{margin:28px 0 0}
.dpt{width:100%;border-collapse:collapse;font-size:15px}
.dpt th,.dpt td{padding:12px 14px;text-align:left;vertical-align:top;
 border-bottom:1px solid var(--line)}
.dpt thead th{border-bottom:2px solid var(--navy);font-family:var(--fd);
 font-weight:400;font-size:18px;color:var(--navy);white-space:nowrap}
.dpt thead th span{display:block;font-family:var(--fb);font-size:11.5px;
 letter-spacing:.1em;text-transform:uppercase;color:var(--grey);margin-top:3px}
.dpt tbody th{font-weight:400;font-size:13.5px;letter-spacing:.02em;
 color:var(--grey);white-space:nowrap;width:1%}
.dpt tbody td{color:var(--grey2);line-height:1.5}
.dpt tbody td b{color:var(--navy);font-weight:600}
.dpt tbody tr:last-child th,.dpt tbody tr:last-child td{border-bottom:0}
.dpu{list-style:none;margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--line);
 display:grid;grid-template-columns:repeat(3,1fr);gap:14px 26px}
.dpu li{font-size:13.5px;line-height:1.55;color:var(--grey)}
.dpu li b{display:block;font-family:var(--fd);font-weight:400;font-size:16px;
 color:var(--navy);margin-bottom:2px}
.dpn{margin:16px 0 0;font-size:13px;color:var(--grey)}
@media(max-width:700px){
 .dpt{font-size:14px}
 .dpt th,.dpt td{padding:10px 8px}
 .dpt thead th{font-size:16px}
 .dpu{grid-template-columns:1fr;gap:15px}
}
.pgrid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:38px}
.pcard3{border:1px solid var(--line);background:#fff;padding:22px 22px 18px;display:flex;flex-direction:column;min-width:0}
.pcard3 h3{font-family:var(--fd);font-size:20px;margin:0 0 8px;color:var(--navy)}
.pcard3 p{font-size:14.5px;line-height:1.65;color:var(--grey);margin:0 0 16px;flex:1}
@media(max-width:900px){
 .prof2{grid-template-columns:1fr}
 .pgrid3{grid-template-columns:1fr}
}
.tsez2 img{display:block;width:100%;height:auto}
.tsez2 figcaption{font-size:11.5px;line-height:1.5;color:var(--grey2);margin-top:8px}
.tsez2 figcaption b{color:var(--ink)}
@media(max-width:480px){.tsez2{grid-template-columns:1fr}}
.chip .tx b{display:block;font-family:var(--fd);font-size:13.5px;font-weight:500;letter-spacing:.02em}
.chip .tx span{display:block;font-size:11.5px;color:var(--grey);margin-top:1px}
.chip .pz{font-family:var(--fd);font-size:13px;color:var(--grey2);white-space:nowrap}
.chip.on .pz{color:var(--red)}
.subin{margin-top:10px;display:none}
/* ---------- telaio L / Z e coprifilo ---------- */
/* scelta esclusiva: il segno di spunta quadrato direbbe "puoi prenderli
   entrambi", che qui non e vero. Tondo = uno solo. */
.chips.rad .bx{border-radius:50%}
.chip.on .bx::after{transition:none}
.chips.rad .chip.on .bx::after{content:'';width:7px;height:7px;border:0;border-radius:50%;
 background:#fff;transform:none;margin:0}
.chip.on+.subin{display:block}
/* "Interno bianco" NON e un pannello che si apre sotto una chip: e la chip stessa. Con class="subin" restava display:none per sempre (il selettore .chip.on+.subin non poteva mai combaciare) e l'opzione era invendibile. Ora si mostra/nasconde con l'attributo hidden, come fa gia il JS. */
.subbic{margin-top:10px}

.cbar{background:#fff;border:1px solid var(--line);margin:22px -8px 0;padding:20px 22px 18px}
.cbar .r1{display:flex;align-items:flex-end;gap:12px;margin-bottom:13px;flex-wrap:wrap}
.cbar .r1>div:first-child{min-width:0;flex:1 1 auto}
.cbar .pz{font-family:var(--fd);font-weight:300;font-size:38px;line-height:.95;letter-spacing:-.02em}
.cbar .iv{font-size:11px;color:var(--grey);margin-top:6px;letter-spacing:.03em}
.qty{display:flex;border:1px solid var(--line);border-radius:2px;margin-left:auto;overflow:hidden}
.qty button{width:46px;min-width:46px;height:46px;flex:0 0 46px;border:0;background:#fff;cursor:pointer;font-size:17px;color:var(--navy)}
.qty button:hover{background:var(--paper)}
.qty input{width:44px;height:46px;border:0;border-inline:1px solid var(--line);text-align:center;
 font-family:var(--fd);font-size:16px;outline:0}
.qty input:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.cbar .btn{width:100%}
.cbar .fine{display:flex;justify-content:space-between;font-size:11.5px;color:var(--grey);
 margin-top:12px;gap:12px}
.cbar .fine button{background:none;border:0;color:var(--red);font:inherit;cursor:pointer;
 text-decoration:underline;padding:10px 0;min-height:40px}
.cbar .fine{align-items:center}

/* ---------- carrello ---------- */
.cart{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:none}
.cart.on{display:block}
.cart .ov{position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(14,23,32,.5)}
.cart .pn{position:absolute;right:0;top:0;bottom:0;width:min(490px,100%);background:#fff;
 display:flex;flex-direction:column;box-shadow:-20px 0 60px -30px rgba(0,0,0,.6)}
.cart .ph{display:flex;align-items:center;padding:24px 26px;border-bottom:1px solid var(--line)}
.cart .ph b{font-family:var(--fd);font-weight:400;font-size:15px;letter-spacing:var(--tr);
 text-transform:uppercase}
.cart .pb{flex:none;overflow:visible;padding:8px 26px 4px}
.cart .pf{position:relative;border-top:1px solid var(--line);padding:22px 26px;background:var(--paper)}
/* Il pannello scorre TUTTO INSIEME, a ogni larghezza. Prima solo la lista
   scorreva e il piede (consegna, CAP, totali, garanzie, bottoni) restava
   fisso: con la scelta spedizione/ritiro il piede supera i 700 px e su un
   portatile a 720 px di altezza la lista spariva del tutto e «Vai al
   pagamento» finiva sotto il bordo dello schermo, irraggiungibile
   (06/09/2026). L'intestazione resta appiccicata in alto. */
.cart .pn{overflow-y:auto;-webkit-overflow-scrolling:touch}
.cart .ph{position:sticky;top:0;background:#fff;z-index:3}
.close{margin-left:auto;background:none;border:0;font-size:26px;cursor:pointer;color:var(--grey);
 line-height:1;padding:4px 8px}
.ci{display:flex;gap:15px;padding:20px 0;border-bottom:1px solid var(--line2)}
.ci .th{width:74px;flex:0 0 74px;background:var(--paper);border:1px solid var(--line);padding:5px}
.ci .nm{font-family:var(--fd);font-weight:500;font-size:14px;letter-spacing:.02em}
.ci .ds{font-size:11.5px;color:var(--grey);margin-top:4px;line-height:1.55}
.ci .pr{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:3px;font-family:var(--fd);font-size:14.5px;white-space:nowrap}
.ci .pr .rt{font-size:15.5px;font-weight:500}
.cq{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:9px;
  overflow:hidden;background:#fff}
.cq button{width:30px;height:30px;border:0;background:none;cursor:pointer;font-size:15px;
  line-height:1;color:var(--navy);font-family:var(--fb)}
.cq button:hover:not(:disabled){background:var(--line2)}
.cq button:disabled{opacity:.3;cursor:not-allowed}
.cq b{min-width:24px;text-align:center;font-size:14px;font-weight:600}
.ci .rm{background:none;border:0;color:#556069;font-size:11px;cursor:pointer;padding:8px 6px 6px 0;
 text-decoration:underline;letter-spacing:.04em;min-height:24px}
.rowbt{margin-top:2px}
.tot{display:flex;justify-content:space-between;font-size:14px;padding:5px 0;color:var(--grey2)}
.tot b{color:var(--navy);font-family:var(--fd)}
.tot.big{font-family:var(--fd);font-size:23px;font-weight:400;color:var(--navy);
 padding-top:13px;margin-top:9px;border-top:1px solid var(--line)}
.tot.big b{font-size:23px}

/* ---------- faq ---------- */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{font-family:var(--fd);font-weight:400;font-size:17.5px;cursor:pointer;list-style:none;
 display:flex;gap:20px;padding:24px 0;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';margin-left:auto;width:11px;height:11px;flex:0 0 11px;
 border-right:1px solid var(--grey);border-bottom:1px solid var(--grey);
 transform:rotate(45deg);transition:.2s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq p{margin:0 0 24px;color:var(--grey2);font-size:15.5px;max-width:60em}

/* ---------- guida ---------- */

/* ---------- footer ---------- */
footer{background:var(--ink);color:rgba(255,255,255,.6);padding:70px 0 30px;font-size:14px}
.fg{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr .9fr;gap:34px;padding-bottom:44px}
footer .fh{font-family:var(--fd);font-weight:500;font-size:11px;letter-spacing:var(--tr);
 text-transform:uppercase;color:#fff;margin:0 0 18px}
footer a{display:block;padding:10px 0;min-height:40px;color:rgba(255,255,255,.6)}
/* nel blocco dati aziendali i link stanno nella riga: altrimenti «Tel.» e il separatore restano orfani su righe proprie */
.fdati a{display:inline-block;padding:2px 0;min-height:0;vertical-align:baseline}
footer a:hover{color:#fff}
.fb{border-top:1px solid rgba(255,255,255,.1);padding-top:24px;display:flex;
 justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;color:rgba(255,255,255,.52)}

@media(max-width:1080px){
 .cfgwrap{grid-template-columns:1fr}
 .cvis{border-right:0;border-bottom:1px solid var(--line);position:relative;top:0;
  max-height:none;overflow:visible}
 .hero .in{grid-template-columns:1fr;gap:44px;padding:60px 0}
 .why{grid-template-columns:1fr;gap:32px}
 .steps{grid-template-columns:1fr 1fr}
 .stp{padding:28px 24px 28px 0}
 .stp:nth-child(2){border-right:0}
 .stp:nth-child(-n+2){border-bottom:1px solid var(--line)}
 .fg{grid-template-columns:1fr 1fr}
 .nav .nl{display:none}.nav > nav{display:none}.burger{display:block}
 .tbar .in{grid-template-columns:1fr}
 .tb+.tb::before{left:30px;right:30px;top:0;bottom:auto;width:auto;height:1px}
 .tb{padding:20px 24px}
}
@media(max-width:640px){
 section{padding:60px 0}
 .nav{height:66px;gap:14px}
 .wrap{padding:0 18px}
 .hero .in{padding:46px 18px 52px}
 .badge{left:12px;bottom:12px;padding:12px 16px}
 .steps{grid-template-columns:1fr}
 .stp{border-right:0;border-bottom:1px solid var(--line);padding:24px 0}
 .stp:last-child{border-bottom:0}
 .cvis, .cpan{padding:20px 18px}
 .cbar{margin:18px -6px 0;padding:16px 16px 14px}
 .cbar .pz{font-size:31px}
 .fg{grid-template-columns:1fr;gap:26px}
 .cmp td.us{font-size:16px}
 .cmp th, .cmp td{padding-inline:6px}
 .cmp td:first-child{font-size:13.5px}
 .dot{width:46px}.dot i{width:40px;height:40px}
 .mgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- logo immagine ---------- */
/* Le altezze vere stanno nell'attributo style di ogni <img> (54 px il
   marchio, 42 px la scritta): cosi il logo resta della misura giusta
   anche se il foglio di stile non arriva. Qui si regola solo lo spazio
   fra i due pezzi e la riduzione sui formati piccoli. */
/* flex:0 0 auto su TUTTI e tre i pezzi. Senza, il logo e un elemento
   flessibile come gli altri: quando le voci di menu non ci stavano nella
   riga, il browser stringeva l'immagine della scritta invece di stringere
   il menu, e "INFISSI ECONOMICI" usciva schiacciato in orizzontale
   (69 px invece di 186 a 1440). Succedeva anche prima, con il logo piccolo. */
.logo{display:flex;align-items:center;gap:15px;flex:0 0 auto}
/* width:auto e' obbligatorio: gli attributi width/height dell'<img>
   valgono come suggerimento di stile e batterebbero il rapporto
   d'aspetto, schiacciando il logo in orizzontale. Con width:auto
   comanda l'altezza e la larghezza segue il rapporto vero. */
.logo img{display:block;flex:0 0 auto;width:auto}
.logo .lw{margin-bottom:2px}
@media(max-width:1180px){.logo{gap:12px}
 .logo .lm{height:48px!important}.logo .lw{height:37px!important}}

/* ---------- hero scena ---------- */
.hscena{position:relative;aspect-ratio:860/600;border-radius:3px;overflow:hidden;
 box-shadow:0 30px 70px -30px rgba(0,0,0,.7)}
.hscena > svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%!important;height:100%!important;display:block;
 transition:opacity .8s ease}
/* il serramento in scena in questo momento: la riga si schiarisce e un
   trattino rosso la segna. Il prezzo resta bianco: rosso su blu non
   raggiunge il contrasto minimo (test 37). */
.hmini span{position:relative;transition:color .4s;padding-bottom:8px}
.hmini span.on{color:rgba(255,255,255,.92)}
.hmini span.on::after{content:'';position:absolute;left:0;bottom:0;width:30px;height:2px;background:var(--red2)}
@media(prefers-reduced-motion:reduce){.hscena > svg,.hmini span{transition:none}}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 6px}
.cta-row.c{justify-content:center}
.cta-row .btn{margin:0}
.htrust{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
.htrust span{display:inline-flex;align-items:center;gap:7px;font-size:12px;
 letter-spacing:.02em;color:rgba(255,255,255,.82);background:rgba(255,255,255,.07);
 border:1px solid rgba(255,255,255,.16);border-radius:2px;padding:7px 12px}
.htrust span::before{content:'';width:9px;height:5px;flex:0 0 auto;
 border-left:1.6px solid var(--red2);border-bottom:1.6px solid var(--red2);
 transform:rotate(-45deg);margin-top:-3px}
/* «Montaggio e trasporto non inclusi» stava fra le spunte verdi: con il
   segno di spunta davanti si leggeva «incluso: montaggio non incluso».
   E' una condizione, non un vantaggio: riga a parte, senza spunta. */
.hcond{margin:12px 0 0;font-size:12px;color:rgba(255,255,255,.62);letter-spacing:.02em}
.hmini{display:flex;gap:26px;margin-top:34px;flex-wrap:wrap;
 border-top:1px solid rgba(255,255,255,.14);padding-top:22px}
.hmini span{font-size:11.5px;color:rgba(255,255,255,.5);letter-spacing:.04em;line-height:1.4}
.hmini b{display:block;font-family:var(--fd);font-weight:300;font-size:23px;color:#fff;
 letter-spacing:-.01em;margin-bottom:3px}

/* ---------- prodotti ---------- */
.pcard{background:#fff;border:1px solid var(--line);padding:0 0 22px;display:flex;
 flex-direction:column;transition:.2s;min-width:0}
.pcard:hover{box-shadow:var(--sh2);transform:translateY(-3px)}
.pcard .pv{background:var(--paper);border-bottom:1px solid var(--line);padding:18px}
.pcard .pv{position:relative}
.pcard .pv .sc{display:block;position:relative;aspect-ratio:470/300;overflow:hidden}
.pcard .pv .sc > svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%!important;height:100%!important;display:block}
.pcard h3{margin:22px 24px 8px}
.pcard p{margin:0 24px 14px;font-size:14.5px;color:var(--grey2)}
/* elenco discorsivo nelle pagine-guida (fuori dalle schede: niente rientro) */
/* i link dentro le tabelle delle misure e nella scheda dell'azienda
   erano alti 17 px: sotto il minimo di 24x24 (WCAG 2.5.8) */
main table td a{display:inline-block;padding:4px 0;min-height:24px}
.dati .r b a{display:inline-block;padding:3px 0;min-height:24px}
.gl{list-style:none;margin:0 0 18px;padding:0}
.gl li{font-size:14.5px;line-height:1.65;color:var(--grey2);
 padding:7px 0 7px 20px;position:relative}
.gl li+li{border-top:1px solid var(--line)}
.gl li::before{content:'';position:absolute;left:2px;top:16px;width:6px;height:6px;
 border-radius:50%;background:var(--red);opacity:.55}
.pfoot{margin-top:auto;padding:18px 24px 0;border-top:1px solid var(--line2);
 display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* --- preventivo via email (cattura contatto, mai obbligatoria) --- */
.pm{margin-top:12px;padding:17px 16px 16px;border:1px solid var(--line);background:var(--paper)}
.pm .rv-ck{margin:12px 0 13px;font-size:12.5px;line-height:1.5}
.pm .rv-ck input{width:17px;height:17px;flex:0 0 17px}
.pm .box{height:46px;background:#fff}
/* il riquadro del messaggio: stessa cornice degli altri campi, ma l'altezza
   la decide il testo. Senza height:auto la textarea resta schiacciata a 46px
   dentro .pm .box e si vede una riga sola. */
.pm .box.ta{height:auto;align-items:stretch}

.pm .box textarea{flex:1;min-width:0;border:0;outline:0;resize:vertical;
 padding:12px 14px;font:inherit;font-size:15px;line-height:1.5;color:var(--grey2);
 background:transparent}
.pm .box textarea::placeholder{color:#6C757D;opacity:1}
.pm small.pm-h{display:block;margin:7px 2px 0;font-size:12.5px;line-height:1.5;color:var(--grey)}
.pm .inp label{background:var(--paper)}
#pmMsg.ok{color:#1a7a3e}
#pmMsg.err{color:var(--red)}
.pfoot .pfz{display:flex;flex-direction:column;gap:1px;min-width:0}
.pfoot .pfz i{font-style:normal;font-size:10.5px;letter-spacing:.02em;color:var(--grey)}
.pfoot .cap{flex:0 0 auto}
.pfoot b{font-family:var(--fd);font-weight:400;font-size:21px;color:var(--red);white-space:nowrap}
.pfoot .btn{margin-left:auto;flex:0 0 auto;padding:14px 16px}

/* ---------- garanzie ---------- */
.ggrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.gcard{background:#fff;border:1px solid var(--line);padding:26px 22px}
.gn{display:block;font-family:var(--fd);font-weight:300;font-size:38px;color:var(--red);
 line-height:1;margin-bottom:14px}
.gcard b{display:block;font-family:var(--fd);font-weight:500;font-size:14px;letter-spacing:.08em;
 text-transform:uppercase;margin-bottom:8px}
.gcard p{margin:0;font-size:13.5px;color:var(--grey2)}

/* ---------- filiera ---------- */
.fil{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;margin-top:52px}
.fr{border:1px solid var(--line);padding:24px 26px 22px;background:#fff}
.fr.on{border-color:var(--red);background:#FCF7F8}
.fsteps{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin:16px 0 14px}
.fsteps i{font-style:normal;font-family:var(--fd);font-size:10.5px;letter-spacing:.07em;
 text-transform:uppercase;border:1px solid var(--line);padding:8px 9px;color:var(--grey2);
 background:#fff;white-space:nowrap}
.fsteps i.you{border-color:var(--navy);color:var(--navy);font-weight:500}
.fr.on .fsteps i{border-color:var(--red);color:var(--red)}
.fr.on .fsteps i.you{background:var(--red);color:#fff}
.fsteps small{width:11px;height:1px;background:var(--line);text-decoration:none;flex:0 0 11px;font-size:0}
.fr.on .fsteps small{background:var(--red)}
.fr p{margin:0}

/* ---------- cta band ---------- */
.ctaband{background:var(--navy);color:#fff;padding:70px 0}
.ctaband .wrap{display:flex;align-items:center;gap:36px;justify-content:space-between;flex-wrap:wrap}
.ctaband h2{color:#fff;margin-top:14px}
.ctaband .eyebrow{color:rgba(255,255,255,.7)}
.ctaband .eyebrow::after{background:rgba(255,255,255,.25)}

/* --- «sola fornitura»: la banda che spiega perche costa meno --- */
/* Tutte le trasparenze qui stanno sopra .52: sotto quella soglia il testo
   bianco sul blu notte scende sotto il 4,5:1 (lo misura il test 37). */
.forn{background:var(--navy);color:#fff;padding:64px 0}
.forn .eyebrow{color:rgba(255,255,255,.72)}
.forn .eyebrow::after{background:rgba(255,255,255,.25)}
.forn h2{color:#fff;margin:14px 0 0;max-width:17em}
.forn .sub{font-size:17px;line-height:1.6;color:rgba(255,255,255,.78);
 margin:15px 0 0;max-width:44em}
.forn .sub b{color:#fff;font-weight:600}
.forn .fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin:44px 0 0}
.forn .fgrid>div{border-top:2px solid var(--red2);padding-top:15px}
.forn .fgrid>div>b{display:block;font-family:var(--fd);font-size:17px;font-weight:500;
 margin-bottom:8px}
.forn .fgrid p{margin:0;font-size:14px;line-height:1.66;color:rgba(255,255,255,.76)}
.forn .fgrid p b{color:#fff;font-weight:600}
.forn .cl{margin:40px 0 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.16);
 font-size:14px;line-height:1.7;color:rgba(255,255,255,.76);max-width:58em}
.forn .cl b{color:#fff;font-weight:600}
.forn .cl a{color:#fff;border-bottom:1px solid rgba(255,255,255,.5);white-space:nowrap}
.forn .cl a:hover{border-bottom-color:#fff}
@media(max-width:1080px){.forn .fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.forn{padding:46px 0}
 .forn .fgrid{grid-template-columns:1fr;gap:26px;margin-top:32px}
 .forn .sub{font-size:16px}}

@media(max-width:1080px){
 .ggrid{grid-template-columns:1fr 1fr}
 .fil{grid-template-columns:1fr}
}
@media(max-width:640px){
 .ggrid{grid-template-columns:1fr}
 .pfoot{flex-wrap:wrap}
 .pfoot .btn{margin-left:0;width:100%;justify-content:center;margin-top:10px}
 .hmini{gap:14px;margin-top:26px;padding-top:18px}
 .hmini span{font-size:11.5px}.hmini b{font-size:19px}
 .logo{gap:11px}
 .logo .lm{height:44px!important}.logo .lw{height:34px!important}
 .nav > .logo{margin-right:0}
 .ctaband{padding:52px 0}
}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.rv.rvon{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---------- accessibilita ---------- */
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.btn:focus-visible, .mcard:focus-visible, .dot:focus-visible, .chip:focus-visible{outline-offset:2px}
/* .seg e .qty hanno overflow:hidden per arrotondare gli angoli dei bottoni
   interni. Quel taglio mangiava per intero l'anello di fuoco, che sta
   FUORI dal bordo (offset:3px): chi naviga da tastiera arrivava su
   «Finestra», «Portafinestra», «+» e «-» senza vedere niente (WCAG 2.4.7,
   verificato a pixel: 0 pixel cambiati sul fuoco). Qui l'anello va
   all'interno, dove non viene tagliato. */
.seg button:focus-visible, .qty button:focus-visible, .qty input:focus-visible,
.cq button:focus-visible{
 outline:2px solid var(--red);outline-offset:-3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:20px;top:12px;z-index:200;background:var(--red);color:#fff;padding:12px 18px;
 border-radius:2px;font-family:var(--fd);letter-spacing:.12em;text-transform:uppercase;font-size:12px}

/* ---------- whatsapp ---------- */
.wa{position:fixed;right:20px;bottom:22px;z-index:75;display:flex;align-items:center;gap:10px;
 background:#0E7C4A;color:#fff;padding:13px 18px 13px 15px;border-radius:99px;
 box-shadow:0 10px 30px -10px rgba(0,0,0,.45);font-family:var(--fd);font-size:12.5px;
 letter-spacing:.1em;text-transform:uppercase;transition:.2s}
.wa:hover{background:#0A6B3E;transform:translateY(-2px)}
.wa svg{width:22px;height:22px;flex:0 0 22px}
.wa{bottom:22px}
/* Sul telefono il bottone stava ANCORATO IN ALTO (top:120px): una pastiglia
   verde appiccicata sotto la barra di navigazione, sopra il titolo della
   home e sopra i modelli del configuratore. Torna in basso a destra, dove
   la gente lo cerca. La barra del prezzo lo spinge su cambiando SOLO
   `bottom`: `top` resta auto, quindi il bottone si sposta e non si stira
   (con top e bottom entrambi fissati diventava una striscia da 645 px). */
@media(max-width:640px){
 .wa{right:14px;top:auto;bottom:16px;padding:12px;gap:0}
 .wa span{display:none}
 body.pzfix-on .wa{bottom:calc(16px + var(--pzfix-h,64px))}
}

/* ---------- bonus ---------- */
.bonus{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
.bnum{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bn{background:#fff;border:1px solid var(--line);padding:22px}
.bn b{display:block;font-family:var(--fd);font-weight:300;font-size:40px;color:var(--red);line-height:1}
.bn span{display:block;font-size:13px;color:var(--grey2);margin-top:8px}
@media(max-width:1080px){.bonus{grid-template-columns:1fr;gap:28px}}

/* ---------- showcase a tutta larghezza ---------- */
.show{position:relative;padding:0;min-height:520px;display:flex;align-items:center;overflow:hidden}
.show > svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%!important;height:100%!important;display:block}
.show .sc{position:relative;width:100%}
.show .sc > div{max-width:470px;background:rgba(255,255,255,.93);backdrop-filter:blur(6px);
 padding:38px 36px;box-shadow:var(--sh3)}
.show h2{margin:16px 0 14px}
.show .lead{font-size:16px;margin-bottom:24px}
@media(max-width:1080px){.show{min-height:0;padding:0;display:block}
 .show > svg{position:relative;height:300px}
 .show .sc > div{max-width:none;padding:30px 24px;box-shadow:none;background:var(--paper)}
 .show .sc{padding:0}
 .show .wrap{padding:0}}

/* ---- IL GANCIO IN APERTURA (13/09/2026) --------------------------------
   Emre voleva un «-25%» in cima. Non si poteva: l'art. 17-bis del Codice
   del Consumo pretende che ogni sconto annunciato citi il prezzo piu'
   basso praticato nei 30 giorni prima, e un sito nuovo quei 30 giorni non
   ce li ha. Ma il gancio serviva davvero, e la frase VERA e' piu' forte
   di quella finta: in questo mestiere si aspetta sempre lo sconto, e noi
   diciamo che non c'e' niente da aspettare. Un clic va al configuratore.
   Sta in cima a tutte le pagine, si chiude e non torna piu'. */
.gancio{background:var(--red);color:#fff;position:relative;z-index:90}
.gancio .in{max-width:1180px;margin:0 auto;padding:11px 52px 11px 22px;
 display:flex;align-items:center;justify-content:center}
.gancio a.cl{color:#fff;text-decoration:none;display:flex;align-items:center;
 justify-content:center;gap:6px 14px;flex-wrap:wrap;min-height:24px;text-align:center}
.gancio a.cl:hover .go{background:rgba(255,255,255,.14)}
.gancio b{font-family:var(--fd);font-weight:400;font-size:16px;letter-spacing:.01em}
.gancio .sub{font-size:13.5px;color:rgba(255,255,255,.82)}
.gancio .go{font-size:12px;letter-spacing:.13em;text-transform:uppercase;
 border:1px solid rgba(255,255,255,.5);padding:6px 13px;white-space:nowrap}
.gancio .x{position:absolute;top:50%;right:10px;transform:translateY(-50%);
 width:32px;height:32px;display:flex;align-items:center;justify-content:center;
 background:none;border:0;color:rgba(255,255,255,.78);font-size:19px;line-height:1;
 cursor:pointer;font-family:var(--fb)}
.gancio .x:hover{color:#fff}
.gancio a.cl:focus-visible,.gancio .x:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(max-width:620px){
  /* sul telefono il gancio va stretto: sopra c'e' solo lui e il logo deve
     restare a vista. La x sale in alto a destra, altrimenti al centro
     finisce a un dito dal bottone e si chiude per sbaglio. */
  .gancio .in{padding:9px 40px 10px 13px}
  .gancio a.cl{gap:3px 10px;line-height:1.35}
  .gancio b{font-size:14.5px}
  .gancio .sub{font-size:12.5px}
  .gancio .go{font-size:12px;padding:6px 12px;margin-top:3px}
  .gancio .x{top:4px;right:4px;transform:none;width:34px;height:34px;align-items:flex-start;padding-top:3px}
}
/* ---- IL CONFIGURATORE VIENE PRIMA (13/09/2026) --------------------------
   Emre, prima sul telefono e poi anche su desktop: il configuratore deve
   stare sopra «Il prodotto». Ha ragione e il motivo e' semplice: la scheda
   tecnica dei profili mette fra il visitatore e il prezzo quattro schermate
   di lettura. Chi arriva qui vuole sapere quanto costa la SUA finestra: il
   prodotto lo guarda dopo, quando il numero ce l'ha gia'.
   PRIMA lo facevo con l'ordine del flex solo sotto i 900 px. Era sbagliato
   per due motivi: su desktop non cambiava niente (e lui lo voleva anche
   li'), e l'ordine visivo diverso da quello del sorgente sposta il testo
   ma NON il tabulatore — chi naviga da tastiera arrivava al prodotto
   prima che al configuratore. Adesso il configuratore e' spostato
   davvero nell'HTML: un ordine solo, uguale per occhi e tastiera, e
   niente flex sul <main> (era quello a spingere fuori le tabelle larghe
   di 244 px). */
@media(max-width:900px){
 /* Sul telefono, prima del titolo c'erano tre fasce sovrapposte: il
    gancio, la striscia dei contatti e il logo — circa 300 px su uno
    schermo alto 844, cioe' un terzo della prima schermata speso prima
    di dire una parola. La striscia dei contatti e' l'unica che si puo'
    togliere senza perdere niente: il numero e la mail stanno nel menu,
    nel piede e nel bottone verde di WhatsApp che resta sempre a
    schermo. Su desktop resta dov'e'. */
 .topbar{display:none}
 /* le tre spunte andavano a capo una per riga, tre righe ragged. Piu'
    strette entrano in due righe e la prima schermata respira. */
 .htrust{gap:6px;margin-top:20px}
 .htrust span{font-size:11.5px;padding:6px 10px}
 .hcond{font-size:11.5px;margin-top:10px}
 /* Sopra il configuratore c'erano due paragrafi centrati: su una colonna
    da 390 px il testo centrato si legge peggio, e chi e' arrivato fin
    qui vuole lo strumento, non l'introduzione. Il secondo (quello del
    cerchietto «?») resta ma si stringe: l'aiuto lo scopre toccandolo. */
 #configuratore .shead p{text-align:left;font-size:15px}
 #configuratore .shead p.xs{font-size:12.5px;line-height:1.5;margin-top:7px}
}
/* ---------- barra contatti ---------- */
.topbar{background:var(--ink);color:rgba(255,255,255,.72);font-size:12.5px}
.topbar .wrap{display:flex;align-items:center;gap:26px;height:42px;flex-wrap:nowrap;overflow:hidden}
/* WCAG 2.5.8: il numero e la mail in cima erano alti 18,6 px. Il testo
   resta della stessa misura, e' la zona toccabile che si allarga. */
.topbar .tl{display:flex;align-items:center;gap:8px;white-space:nowrap}
.topbar .tl a{display:inline-flex;align-items:center;min-height:24px}
/* stessa regola per i numeri e le mail scritti nel corpo della pagina:
   il testo non cambia, cambia la zona che si riesce a toccare. */
main a[href^="tel:"],main a[href^="mailto:"]{display:inline-flex;align-items:center;min-height:24px}
.topbar svg{width:15px;height:15px;flex:0 0 15px;color:var(--red2)}
.topbar a{color:#fff;font-weight:500}
.topbar a:hover{color:var(--red2)}
.topbar .right{margin-left:auto;color:rgba(255,255,255,.52)}
@media(max-width:900px){.topbar .sep, .topbar .right{display:none}
 .topbar .wrap{gap:18px;justify-content:center}}
@media(max-width:480px){.topbar{font-size:11.5px}
 /* 320px: telefono ed email non ci stanno su una riga sola: vanno a capo
    invece di essere tagliate da overflow:hidden */
 .topbar .wrap{gap:4px 14px;height:auto;min-height:42px;padding-block:7px;
  flex-wrap:wrap;overflow:visible;justify-content:center;text-align:center}
 .topbar .tl{min-width:0}
 .topbar a{overflow-wrap:anywhere}}

/* ---------- fiducia ---------- */
.fid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);
 border:1px solid var(--line)}
.fitem{background:#fff;padding:30px 28px}
.fitem .ic{width:38px;height:38px;color:var(--red);margin-bottom:16px}
.fitem h3{font-size:16px;margin-bottom:9px}
.fitem p{margin:0;font-size:14px;color:var(--grey2)}
.fitem b{color:var(--navy);font-weight:600}
@media(max-width:1080px){.fid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.fid{grid-template-columns:1fr}.fitem{padding:24px 22px}}

/* ---------- chi siamo ---------- */
.chi{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.dati{border:1px solid var(--line);background:#fff}
.dati .r{display:flex;justify-content:space-between;gap:18px;padding:14px 22px;
 border-bottom:1px solid var(--line2);font-size:14px}
.dati .r:last-child{border-bottom:0}
.dati .r span{color:var(--grey)}
.dati .r b{font-weight:600;text-align:right}
.dati .hd{background:var(--navy);color:#fff;padding:15px 22px;font-family:var(--fd);
 font-size:11.5px;letter-spacing:var(--tr);text-transform:uppercase}
@media(max-width:1080px){.chi{grid-template-columns:1fr;gap:32px}}

/* ---------- pagamenti ---------- */

/* ---------- footer esteso ---------- */
.fdati{font-size:12.5px;line-height:1.85;color:rgba(255,255,255,.5);margin-top:18px}
.fdati b{color:rgba(255,255,255,.8);font-weight:500}
.fb a{display:inline;padding:0;min-height:0;text-decoration:underline}

.sk2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.zona{display:grid;grid-template-columns:1.25fr 1fr;gap:38px;align-items:start;margin-top:44px;
 padding-top:38px;border-top:1px solid var(--line)}
.zona h3{font-family:var(--fd);font-weight:400;font-size:24px;line-height:1.25;margin:0 0 12px}
.ztab{border:1px solid var(--line);background:#fff}
.ztab .zh{display:flex;justify-content:space-between;padding:13px 20px;background:var(--navy);
 color:#fff;font-family:var(--fd);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.ztab .zr{display:flex;justify-content:space-between;padding:13px 20px;
 border-bottom:1px solid var(--line);font-size:14.5px}
.ztab .zr b{font-weight:600}
.ztab .zr.ok{background:#FBF7E8}
.ztab .zr.no{background:#FBEEF0}
.ztab .zn{padding:11px 20px;font-size:11px;color:var(--grey);letter-spacing:.04em}
@media(max-width:860px){.sk2{grid-template-columns:1fr}.zona{grid-template-columns:1fr;gap:26px}}

/* ---------- guida alla misurazione ---------- */

.mcasi{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
/* la guida sul telaio usa lo stesso blocco con due o tre colonne */
.mcasi.due{grid-template-columns:repeat(2,1fr)}
.mcasi.tre{grid-template-columns:repeat(3,1fr)}
.mcasi.quattro{grid-template-columns:repeat(2,1fr)}
/* riquadro di avvertimento dentro le guide: la regola sta piu in basso
   (riga ~1020, dopo la stampa); qui solo il grassetto */
.avv b{color:var(--ink)}
/* passaggi numerati dentro le guide */
.gsteps{display:grid;gap:0;margin:26px 0 34px;border-top:1px solid var(--line)}
.gstep{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.gstep>b{flex:0 0 auto;font-family:var(--fd);font-size:12px;font-weight:600;letter-spacing:.08em;
 color:#fff;background:var(--red);border-radius:99px;padding:5px 10px;line-height:1;height:fit-content}
.gstep h3{margin:0 0 5px;font-family:var(--fd);font-size:17px;font-weight:500;color:var(--ink)}
.gstep p{margin:0}
.qq{display:inline-flex;width:17px;height:17px;border:1.4px solid var(--grey);border-radius:50%;
 align-items:center;justify-content:center;font-size:10px;vertical-align:-3px;color:var(--grey2)}
@media(max-width:520px){.gstep{gap:12px}}
.mcaso{background:#fff;border:1px solid var(--line);padding:16px}
.mfig{background:var(--paper);margin:-16px -16px 14px}
.mfig svg{width:100%;height:auto;display:block}
.mcaso .cap{display:block;color:var(--red);margin-bottom:8px}
.mcaso p{font-size:13.5px;line-height:1.65;color:var(--grey);margin:0}
.mcaso p b{color:var(--ink);font-weight:600}
@media(max-width:980px){
 /* .mcasi.due e .mcasi.tre hanno specificita piu alta di .mcasi: se qui non
    li nomino restano a due o tre colonne sul telefono. */
 .mcasi,.mcasi.due,.mcasi.tre,.mcasi.quattro{grid-template-columns:1fr}
 .mcasi .mcaso[style*="span"]{grid-column:auto!important}
 .mcasi .mcaso[style*="span"]{grid-column:auto!important}}

/* ---------- accessibilita ---------- */
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;
  scroll-behavior:auto!important}
 .rv{opacity:1!important;transform:none!important}
}
.btn.g{background:#fff;color:var(--ink);border:1px solid var(--navy)}
.btn.g:hover:not(:disabled){background:var(--navy);color:#fff}
.btn.g:disabled{opacity:.4;cursor:not-allowed}

/* il placeholder e testo: deve restare leggibile (WCAG AA 4.5:1) */
.box input::placeholder{color:#6C757D;opacity:1}

/* ---------- preventivo stampabile ---------- */
#prevDoc{display:none}
.pv-head{display:flex;justify-content:space-between;align-items:flex-start;
 border-bottom:2px solid #1B2733;padding-bottom:14px;margin-bottom:18px}
.pv-brand{display:flex;gap:12px;align-items:center}
.pv-brand img{height:42px;width:auto}
.pv-brand b{display:block;font-family:var(--fd);font-size:17px;letter-spacing:.16em;color:#1B2733}
.pv-brand span{display:block;font-size:11px;color:#6C757D;letter-spacing:.05em}
.pv-meta{text-align:right}
.pv-t{font-family:var(--fd);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#B0192E}
.pv-n{font-family:var(--fd);font-size:21px;color:#1B2733;margin:2px 0 3px}
.pv-d{font-size:11px;color:#6C757D}
.pv-dati{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-bottom:20px;font-size:11.5px;line-height:1.65}
.pv-dati span{display:block;font-family:var(--fd);font-size:10px;letter-spacing:.18em;
 text-transform:uppercase;color:#B0192E;margin-bottom:5px}
.pv-dati b{display:block;color:#1B2733;font-weight:600}
.pv-fill{border-bottom:1px dotted #B9C0C6;height:17px;margin-bottom:7px;color:#B9C0C6;font-size:9.5px}
.pv-sec{font-family:var(--fd);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
 color:#1B2733;border-bottom:1px solid #D9DEE2;padding-bottom:5px;margin:16px 0 10px}
.pv-item{display:grid;grid-template-columns:18px 122px 1fr 104px;gap:10px;
 border:1px solid #D9DEE2;padding:9px 10px;margin-bottom:7px;break-inside:avoid;page-break-inside:avoid}
.pv-num{font-family:var(--fd);font-size:15px;color:#B0192E}
.pv-dis svg{width:100%;height:auto;display:block}
/* colonna 3 della griglia .pv-item: senza min-width:0 un nome lungo
   allarga la colonna e sballa il PDF */
.pv-body{min-width:0}
.pv-nome{font-family:var(--fd);font-size:13px;color:#1B2733;margin-bottom:5px;letter-spacing:.02em}
.pv-r{display:flex;justify-content:space-between;gap:12px;font-size:10px;line-height:1.5;
 border-bottom:1px dotted #E4E8EB;padding:1.5px 0}
.pv-r span{color:#6C757D;white-space:nowrap}
.pv-r b{font-weight:600;color:#1B2733;text-align:right}
.pv-pz{text-align:right;border-left:1px solid #E4E8EB;padding-left:10px}
.pv-pz span{display:block;font-size:10px;color:#6C757D}
.pv-pz b{display:block;font-family:var(--fd);font-size:16px;color:#1B2733;margin-top:3px}
.pv-tot{margin-top:14px;border-top:2px solid #1B2733;padding-top:9px;break-inside:avoid}
.pv-tr{display:flex;justify-content:space-between;padding:4px 0;font-size:12px}
.pv-tr b{font-weight:600}
.pv-tr.big{font-family:var(--fd);font-size:18px;border-top:1px solid #D9DEE2;margin-top:5px;padding-top:8px}
.pv-note{margin-top:16px;break-inside:avoid}
.pv-note ul{margin:0;padding-left:16px}
.pv-note li{font-size:10.5px;line-height:1.65;color:#3D474F;margin-bottom:4px}
/* quello che vale per tutti i serramenti: due colonne, una riga per voce */
.pv-com{display:grid;grid-template-columns:1fr 1fr;gap:2px 22px}
.pv-com div{display:flex;justify-content:space-between;gap:10px;font-size:10.5px;
 line-height:1.6;border-bottom:1px dotted #E3E7EA;padding:2px 0}
.pv-com span{color:#6C757D;white-space:nowrap}
.pv-com b{font-weight:600;color:#1B2733;text-align:right}
/* come confermare + firme */
.pv-conf{margin-top:16px;break-inside:avoid;border:1px solid #D9DEE2;padding:11px 13px}
.pv-conf p{margin:0;font-size:11px;line-height:1.65;color:#3D474F}
.pv-firme{display:flex;gap:26px;margin-top:16px}
.pv-firme div{flex:1}
.pv-firme span{display:block;font-size:9.5px;color:#6C757D;letter-spacing:.06em;text-transform:uppercase}
.pv-firme i{display:block;border-bottom:1px solid #9AA4AC;height:26px}
/* la nota dell'asterisco: piccola, in fondo, ma leggibile */
.pv-ast{margin:9px 0 0;font-size:9px;line-height:1.6;color:#68727C}
.pv-foot{margin-top:18px;border-top:1px solid #D9DEE2;padding-top:8px;
 font-size:9.5px;color:#68727C;display:flex;justify-content:space-between;gap:12px;
 /* non deve mai aprire una pagina da sola */
 break-before:avoid;page-break-before:avoid;break-inside:avoid}
/* il numero di pagina non deve essere schiacciato dalla riga dei dati */
.pv-pn{flex:0 0 auto;white-space:nowrap}

@media print{
 @page{size:A4;margin:12mm}
 html, body{background:#fff!important}
 body.stampa>*{display:none!important}
 body.stampa #prevDoc{display:block!important;position:static!important;
   font-family:Inter,system-ui,sans-serif;color:#1B2733}
 body.stampa .cart, body.stampa .wa, body.stampa header, body.stampa .topbar{display:none!important}
 a[href]:after{content:none!important}
}

.avv{background:var(--paper);border-left:2px solid var(--red);padding:14px 18px;margin:22px 0}
.avv p{margin:0;color:var(--navy);font-weight:600;font-size:14.5px}

/* ===================================================================== PAGINE INTERNE — un solo sistema per tutto il sito Prima esistevano due fogli di stile (stile.css e stile-guide.css) con cinque margini diversi e tre misure di titolo. Ora c'e un solo foglio: quello che cambi qui cambia in tutte le pagine. ===================================================================== */

.bc{font-size:12px;color:var(--grey);margin-bottom:22px;letter-spacing:.03em}
.bc a{color:var(--grey);text-decoration:none;border-bottom:1px solid var(--line);
 /* WCAG 2.2 SC 2.5.8: un bersaglio tattile vuole almeno 24 px di lato.
    Le briciole di pane erano alte 16 px sul telefono: si sbagliava mira.
    inline-block + padding verticale le porta a 26 px senza spostare nulla,
    perche il margine negativo restituisce lo spazio alla riga. */
 display:inline-block;padding:5px 0;margin:-5px 0}
.bc a:hover{color:var(--red)}
.gd h1{font-size:clamp(30px,5vw,46px);font-weight:300;line-height:1.12;margin:0 0 14px}
.gd .sub{font-size:18px;color:var(--grey2);line-height:1.6;margin:0 0 8px}
.gd .up{font-size:12px;color:var(--grey);margin:22px 0 34px;padding-bottom:22px;
 border-bottom:1px solid var(--line);letter-spacing:.02em}
.gd h2{font-family:var(--fd);font-size:26px;font-weight:400;margin:44px 0 12px;line-height:1.25}
.gd h3{font-family:var(--fd);font-size:18px;font-weight:500;margin:30px 0 8px;letter-spacing:.02em}
.gd p, .gd li{font-size:16px;color:var(--grey2);line-height:1.72}
.gd li{margin-bottom:7px}
.gd ul, .gd ol{padding-left:20px}
.gd b, .gd strong{color:var(--ink);font-weight:600}
/* ...ma NON dentro le zone invertite. «.gd b» ha la stessa forza di
   «.gstep>b» e di «.cta2 b» e, arrivando dopo, le vinceva entrambe:
   i numerini 01-04 erano inchiostro scuro su rosso (2,6:1) e il titolo
   della banda scura in fondo alle guide era scuro su blu notte (1,2:1),
   cioe' praticamente invisibile, su dieci pagine. */
.gd .gstep>b, .gd .cta2 b, .gd .cta2 strong,
.gd .pstrip b, .gd .pstrip strong, .gd .gt th b, .gd .gt th strong{color:#fff}
.gd a{color:var(--red)}
.gt{width:100%;border-collapse:collapse;margin:22px 0;font-size:14.5px}
.gt th{background:var(--navy);color:#fff;text-align:left;padding:11px 14px;
 font-family:var(--fd);font-weight:400;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.gt td{padding:11px 14px;border-bottom:1px solid var(--line);color:var(--grey2);vertical-align:top}
.gt tr:nth-child(even) td{background:var(--paper)}
.gt td b{color:var(--ink)}
.gwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tcap{margin:10px 0 0;font-size:12.5px;line-height:1.7;color:var(--grey2)}
/* --------------------------------------------------------------------
   .cal .gintro .nota .fig — quattro classi che l'HTML usava da settimane
   SENZA che esistesse una riga di CSS: 47 + 25 + 3 + 2 usi in pagina, e
   tutti rendevano come testo normale. Trovate il 13/09/2026 confrontando
   le classi scritte nell'HTML con i selettori del foglio di stile.
   -------------------------------------------------------------------- */

/* .cal — il riquadro «una cosa che vale la pena sapere» dentro le guide.
   Sta in mezzo al testo, quindi si distingue dal corpo ma non urla come
   .nb, che apre invece un blocco a se'. */
.gd .cal{background:#FBFAF7;border:1px solid var(--line);border-left:3px solid var(--navy);
 padding:15px 18px;margin:24px 0;font-size:15px;line-height:1.68;color:var(--grey2)}
.gd .cal b:first-child{color:var(--ink)}
.gd .cal p{margin:0}
.gd .cal p + p{margin-top:9px}

/* .gintro — il paragrafo d'apertura: primo blocco di testo dopo il titolo.
   Un filo piu' grande del corpo, come il sommario, cosi' l'occhio parte
   da li'. */
.gd .gintro{font-size:17.5px;line-height:1.68;color:var(--grey2);margin:0 0 22px}
.gd .gintro b{color:var(--ink)}

/* .nota — la riga di servizio in mezzo al testo, piu' piccola e rientrata */
.gd .nota{font-size:14.5px;line-height:1.65;color:var(--grey);
 border-left:2px solid var(--line);padding-left:14px;margin:20px 0}
.gd .nota b{color:var(--ink)}


.nb{background:var(--paper);border-left:2px solid var(--red);padding:16px 20px;margin:26px 0}
.nb p{margin:0;font-size:15px}
.nb b:first-child{display:block;font-family:var(--fd);font-size:12px;letter-spacing:.14em;
 text-transform:uppercase;color:var(--red);margin-bottom:6px;font-weight:400}
.cta2{background:var(--navy);color:#fff;padding:28px 30px;margin:44px 0 0;
 display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.cta2 b{font-family:var(--fd);font-size:21px;font-weight:400;display:block;margin-bottom:4px}
.cta2 span{font-size:14px;color:rgba(255,255,255,.62)}
.fonti{margin-top:44px;padding-top:22px;border-top:1px solid var(--line)}
.fonti p{font-size:12.5px;color:var(--grey);line-height:1.7}
.gnext{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:34px}
.gnext a{border:1px solid var(--line);padding:16px 18px;text-decoration:none;display:block;
 background:#fff;transition:.15s}
.gnext a:hover{border-color:var(--navy)}
.gnext small{display:block;text-decoration:none;font-size:11px;letter-spacing:.14em;
 text-transform:uppercase;color:var(--red);margin-bottom:5px}
.gnext b{display:block;font-family:var(--fd);font-size:16px;font-weight:400;color:var(--ink)}
.gidx{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:34px}
.gidx a{border:1px solid var(--line);padding:22px;text-decoration:none;background:#fff;transition:.15s}
.gidx a:hover{border-color:var(--navy)}
.gidx b{display:block;font-family:var(--fd);font-size:19px;font-weight:400;color:var(--ink);
 margin-bottom:6px;line-height:1.3}
.gidx span{font-size:13.5px;color:var(--grey);line-height:1.55;display:block}
.gcta{background:#fff;border:1px solid var(--line);border-left:3px solid var(--red);border-radius:12px;padding:20px 22px;margin:34px 0 8px}
.gcta p{margin:0 0 14px}
.gd .gt td b{white-space:nowrap}
.pstrip{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
 background:var(--navy);color:#fff;border-radius:10px;padding:16px 20px;margin:0 0 30px}
.pstrip .pl{flex:1 1 260px;min-width:0}
.pstrip .k{display:block;font-family:var(--fd);font-size:11.5px;letter-spacing:.2em;
 text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:4px}
.pstrip .v{font-family:var(--fd);font-size:19px;font-weight:400;line-height:1.28}
.pstrip .v b{color:#fff;font-weight:500}
.pstrip .v em{font-style:normal;color:#F2929E;font-weight:500;white-space:nowrap}
.pstrip .s{display:block;font-size:12.5px;color:rgba(255,255,255,.55);margin-top:5px}
.pstrip .btn{flex:0 0 auto;background:#fff;color:var(--navy);border-color:#fff}
.pstrip .btn:hover{background:var(--red);color:#fff;border-color:var(--red)}

/* --- larghezza unica per le pagine interne --- */
.gd{max-width:860px;margin:0 auto;padding:0 24px 84px}
.gd > .bc:first-child{margin-top:30px}

/* --- fascia scura di testata: la sorella minore dell'hero --- */
.phero{background:linear-gradient(160deg,#1B2733 0%,#141D26 62%,#0E1720 100%);
 color:#fff;padding:52px 0 54px;margin-bottom:44px;position:relative;overflow:hidden}
.phero::after{content:'';position:absolute;right:-90px;top:-90px;width:340px;height:340px;
 border:1px solid rgba(255,255,255,.055);border-radius:50%;pointer-events:none}
.phero::before{content:'';position:absolute;right:10px;bottom:-140px;width:260px;height:260px;
 border:1px solid rgba(255,255,255,.04);border-radius:50%;pointer-events:none}
.phero .in{max-width:860px;margin:0 auto;padding:0 24px;position:relative;z-index:1}
.phero .bc{color:rgba(255,255,255,.5);margin-bottom:18px}
.phero .bc a{color:rgba(255,255,255,.62);border-bottom-color:rgba(255,255,255,.22)}
.phero .bc a:hover{color:#fff}
.phero .eyebrow{color:#fff;opacity:.72;display:inline-block;margin-bottom:14px}
.phero .eyebrow::after{background:rgba(255,255,255,.26)}
.phero h1{font-family:var(--fd);font-size:clamp(29px,4.4vw,46px);font-weight:300;line-height:1.13;
 color:#fff;margin:0 0 16px;letter-spacing:-.012em;max-width:19em}
.phero .sub{font-size:17.5px;line-height:1.62;color:rgba(255,255,255,.76);margin:0;max-width:40em}
.phero .up{font-size:12px;color:rgba(255,255,255,.52);margin:22px 0 0;padding:0;border:0;
 letter-spacing:.02em;line-height:1.6}
.phero .up a{color:rgba(255,255,255,.62)}
@media(max-width:640px){.phero{padding:34px 0 36px;margin-bottom:30px}
 .phero .sub{font-size:16px} .phero .up{margin-top:16px}}

/* dentro la fascia i vecchi stili chiari non devono piu applicarsi */
.gd > h1:first-of-type{margin-top:0}

/* --- riga di rassicurazione sotto la testata --- */
.trust{display:flex;flex-wrap:wrap;gap:10px 26px;margin:0 auto 34px;max-width:860px;
 padding:0 24px;font-size:12.5px;color:var(--grey2)}
.trust span{display:inline-flex;align-items:center;gap:7px}
.trust span::before{content:'';width:9px;height:5px;flex:0 0 auto;margin-top:-3px;
 border-left:1.6px solid var(--red);border-bottom:1.6px solid var(--red);transform:rotate(-45deg)}

/* ===================================================================== SCHEDA PRODOTTO — le 28 pagine di misura Chi arriva da Google cercando "finestra pvc 120x140 prezzo" deve vedere il serramento e il prezzo, non una tabella. ===================================================================== */
.spd{display:grid;grid-template-columns:1.02fr .98fr;gap:0;max-width:860px;margin:0 auto 40px;
 border:1px solid var(--line);background:#fff}
.spd .dis{background:var(--paper);border-right:1px solid var(--line);padding:22px;
 display:flex;align-items:center;justify-content:center;min-width:0}
.spd .dis svg{width:100%;height:auto;display:block}
.spd .box{padding:26px 26px 24px;display:flex;flex-direction:column;min-width:0}
.spd .box .eyebrow{margin-bottom:9px}
.spd .box h2{font-family:var(--fd);font-size:22px;font-weight:400;margin:0 0 3px;line-height:1.25}
.spd .box .mis{font-size:13.5px;color:var(--grey);margin:0 0 18px}
.spd .pz{font-family:var(--fd);font-weight:300;font-size:40px;line-height:1;color:var(--red);
 letter-spacing:-.02em;margin:0}
.spd .pz small{display:block;text-decoration:none;font-family:var(--fb);font-size:12px;
 letter-spacing:.03em;color:var(--grey);margin-top:8px;line-height:1.55}
.spd ul{list-style:none;margin:18px 0 20px;padding:0}
.spd ul li{font-size:13.5px;color:var(--grey2);padding:4px 0 4px 21px;position:relative;line-height:1.5}
.spd ul li::before{content:'';position:absolute;left:0;top:11px;width:9px;height:5px;
 border-left:1.6px solid var(--red);border-bottom:1.6px solid var(--red);transform:rotate(-45deg)}
.spd .btn{width:100%;justify-content:center;margin-top:auto}
.spd .alt{font-size:12px;color:var(--grey);margin:11px 0 0;text-align:center;line-height:1.6}
@media(max-width:760px){.spd{grid-template-columns:1fr}
 .spd .dis{border-right:0;border-bottom:1px solid var(--line);padding:16px}
 .spd .box{padding:20px} .spd .pz{font-size:34px}}

@media(max-width:640px){.gnext, .gidx{grid-template-columns:1fr}}
@media(max-width:620px){.pstrip{padding:14px 16px;gap:12px}.pstrip .btn{width:100%}}

/* Avviso ordine minimo nel carrello. Sta sopra il tasto di pagamento
   disattivato, quindi deve spiegare il perche', non solo vietare. */

/* ---- "Non sei sicuro della misura?" — riquadro di aiuto nella sezione misure.
   E' il punto in cui si perde piu gente: il metro in mano e il dubbio.
   Deve pesare visivamente, ma non quanto il configuratore. ---- */
.aiuto{margin:26px 0 0;padding:22px 24px;border:1px solid var(--line);
 border-left:3px solid #0E7C4A;border-radius:12px;background:#F7FAF8}
.aiuto h3{margin:0 0 8px;font-size:19px;line-height:1.3;color:var(--navy)}
.aiuto p{margin:0;font-size:14.5px;line-height:1.65;color:var(--ink)}
.aiuto-b{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0}
.aiuto-b .btn{flex:1 1 auto;justify-content:center}
.btn.wa-b{background:#0E7C4A;color:#fff;display:inline-flex;align-items:center;gap:9px}
.btn.wa-b:hover{background:#0B6B3F}
.btn.wa-b svg{flex:0 0 auto}
@media(max-width:640px){
 .aiuto{padding:18px 16px;margin-top:20px}
 .aiuto h3{font-size:17px}
 .aiuto-b .btn{flex:1 1 100%}
}

/* ============ SCELTA DEL METODO DI PAGAMENTO (riepilogo) ============ */
/* .pmet, non .pm: .pm e' il riquadro «preventivo via email» (riga 687) e
   con lo stesso nome le due regole si pestavano i piedi */
.pmet{margin:18px 0 4px}
.pmet>h4{margin:0 0 4px;font-size:15px}
.pmet>p.pm-h{margin:0 0 10px;font-size:13px;color:var(--grey2)}
.pm-o{display:block;border:1px solid var(--line);border-radius:10px;padding:12px 14px;
 margin-bottom:9px;cursor:pointer;transition:border-color .15s,background .15s}
.pm-o:hover{border-color:var(--grey)}
.pm-o.on{border-color:var(--navy);background:#F7F9FA;box-shadow:inset 0 0 0 1px var(--navy)}
.pm-o input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
 clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap}
/* La radio e nascosta alla vista ma NON alla tastiera: senza queste due
   regole chi naviga con Tab arrivava sulle opzioni di pagamento senza
   vedere NIENTE muoversi — nessun anello di focus, nessun bordo. Con
   :has() si illumina la scheda intera; :focus-within e la stessa cosa
   per i browser che :has() non ce l'hanno. */
.pm-o:has(input:focus-visible),
.pm-o:focus-within{outline:2px solid var(--navy);outline-offset:2px;border-color:var(--navy)}
.pm-t{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.pm-t b{font-size:14.5px}
.pm-t small{text-decoration:none;font-size:12px;color:var(--grey);white-space:nowrap}
.pm-d{margin:4px 0 0;font-size:12.5px;line-height:1.55;color:var(--grey2)}
.pm-sp{margin:7px 0 0;font-size:12.5px;font-weight:600;color:var(--navy)}
.pm-f{margin:12px 0 0;display:grid;gap:9px}
.pm-f label{display:block;font-size:12.5px;color:var(--grey2);margin-bottom:3px}
.pm-f input{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;
 font:inherit;font-size:14px;background:#fff;color:var(--navy)}
.pm-f input:focus{outline:2px solid var(--navy);outline-offset:1px}
.pm-f input.err{border-color:var(--red);background:#FDF7F8}
.pm-e{margin:8px 0 0;font-size:13px;color:var(--red);font-weight:600}
.pm-e:empty{display:none}
@media(max-width:640px){ .pm-t{flex-direction:column;gap:2px} .pm-t small{white-space:normal} }

/* ============ PAGINA bonifico-ok ============ */
.bo-tot{border:1px solid var(--line);border-radius:11px;padding:14px 16px;margin:16px 0 26px}
.bo-r{display:flex;justify-content:space-between;gap:14px;padding:4px 0;font-size:14px}
.bo-r small{text-decoration:none;color:var(--grey2);font-size:inherit}
.bo-r b{font-weight:600;text-align:right;white-space:nowrap}
.bo-big{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
 margin:6px 0;padding:9px 0;font-size:16px}
.bo-big b{font-size:21px}
.bo-card{border:1px solid var(--line);border-left:3px solid var(--navy);border-radius:11px;
 padding:16px 18px;margin:12px 0 26px;background:#F7F9FA}
.bo-f{margin-bottom:13px}
.bo-f:last-child{margin-bottom:0}
.bo-f small{display:block;text-decoration:none;font-size:12.5px;color:var(--grey2);margin-bottom:3px}
.bo-f b{display:block;font-size:16px;word-break:break-word}
.bo-f .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14.5px;
 line-height:1.6;background:#fff;border:1px solid var(--line);border-radius:7px;padding:9px 11px}
.bo-cau b{font-size:13.5px}
.bo-cp{margin-top:8px;font-size:13px;padding:7px 14px}
@media(max-width:640px){ .bo-r{flex-direction:column;gap:0} .bo-r b{text-align:left} }

/* `.inp input{outline:0}` (riga 325) ha una specificita piu alta della
   regola globale `:focus-visible` (riga 706) e la annullava: chi arriva
   con il Tab sui campi della MISURA — i controlli piu usati del sito —
   non vedeva assolutamente niente. Qui la si rimette con specificita
   sufficiente. */
.inp input:focus-visible,
.rgw input:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* ---------- PREZZO SEMPRE VISIBILE (barra in basso) ----------
   La colonna del disegno e' sticky ma piu' alta dello schermo: il prezzo,
   che sta in fondo, finisce sotto il bordo proprio mentre il cliente
   sceglie. Questa barra compare solo quando il prezzo vero e' fuori
   schermo e il configuratore e' davanti agli occhi. */
.pzfix{position:fixed;left:0;right:0;bottom:0;z-index:74;
 background:rgba(255,255,255,.97);backdrop-filter:saturate(1.4) blur(8px);
 border-top:1px solid var(--line);box-shadow:0 -14px 34px -20px rgba(0,0,0,.45);
 transform:translateY(100%);transition:transform .18s ease}
.pzfix.on{transform:none}
.pzfix-in{max-width:1240px;margin:0 auto;padding:9px 20px;
 display:flex;align-items:center;gap:16px}
.pzfix-tx{min-width:0;flex:1 1 auto;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pzfix-p{font-family:var(--fd);font-weight:300;font-size:27px;line-height:1;
 letter-spacing:-.02em;color:var(--navy);white-space:nowrap}
.pzfix-i{font-size:11px;color:var(--grey);letter-spacing:.03em}
.pzfix .btn{flex:0 0 auto;padding:12px 26px}
/* anteprima del disegno nella barra: solo sotto i 1080 px, dove .cvis
   smette di essere sticky (riga 565). Sopra, il disegno grande e gia
   sempre in vista e l'anteprima sarebbe un doppione. */
.pzfix-ant{display:none;flex:0 0 auto;width:58px;height:44px;padding:2px 4px;margin:0;
 background:var(--paper);border:1px solid var(--line);border-radius:6px;cursor:pointer}
.pzfix-ant svg{width:100%;height:100%;display:block;pointer-events:none}
@media(max-width:1080px){.pzfix-ant{display:block}}
@media(max-width:400px){.pzfix-i{display:none}}
/* Il bottone WhatsApp galleggia in basso a destra: senza questo la barra
   del prezzo ci finisce sopra e uno dei due diventa incliccabile.
   Si tocca SOLO `bottom` e mai `top`: con tutti e due fissati l'elemento
   non si sposta, si ALLUNGA (46 px diventavano 645, una striscia verde su
   mezzo schermo). Sotto i 641 px lo stesso spostamento sta nel blocco
   telefono, con il suo margine piu piccolo. */
@media(min-width:641px){
 body.pzfix-on .wa{bottom:calc(22px + var(--pzfix-h,64px))}
 /* La barra del prezzo e' accesa solo quando il configuratore e' sotto gli
    occhi, ed e' proprio li che la pastiglia verde copriva l'ultimo modello
    della griglia. Finche' si configura resta la sola icona: si vede, non
    ruba il posto a una scelta. */
 body.pzfix-on .wa{padding:12px;gap:0}
 body.pzfix-on .wa span{display:none}
}
/* lo spazio in fondo alla pagina serve perche' la barra non copra
   l'ultima riga di contenuto */
body.pzfix-on{padding-bottom:var(--pzfix-h,64px)}
@media(max-width:640px){
 .pzfix-in{padding:8px 14px;gap:10px}
 .pzfix-p{font-size:23px}
 .pzfix-i{display:none}
 .pzfix .btn{padding:11px 18px;font-size:13px}
}
@media(prefers-reduced-motion:reduce){ .pzfix{transition:none} }

/* la domanda sull'unita ha dentro un bottone: serve un po' d'aria e il
   bottone non deve sembrare parte del testo di errore */
.warn.uni{background:#FFF8E8;border-left-color:#B8791B;color:#6B4E12;line-height:1.6}
.warn.uni .lnkm{display:inline-block;margin:2px 0;color:#8A3B12;font-weight:700}
.warn.uni .xs{display:inline-block;margin-top:6px;color:#7A6A4A}

/* --- indirizzo di consegna nel riepilogo (bonifico) --- */
.pgo2{display:flex;gap:10px;flex-wrap:wrap}
.pm-f textarea{width:100%;font:inherit;font-size:14px;padding:10px 12px;
 border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);
 resize:vertical;min-height:56px}
.pm-f textarea:focus-visible{outline:2px solid var(--red);outline-offset:1px;border-color:var(--red)}
.pm-f textarea.err{border-color:var(--red)}
.pm-f label i{font-style:normal;color:var(--grey);font-weight:400}
.pgo-h{display:block;margin-top:5px;font-size:12px;color:var(--grey);text-decoration:none;line-height:1.5}
@media(max-width:520px){.pgo2>div{flex:1 1 100%!important}}

/* ============ DOVE E' IL MIO ORDINE ============ */
.trk{display:grid;grid-template-columns:1fr 1.4fr auto;gap:12px;align-items:end;margin:6px 0 10px;
 background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:16px}
.trk-f label{display:block;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey2);margin-bottom:6px}
.trk-f input{width:100%;height:46px;border:1px solid var(--line);border-radius:4px;padding:0 12px;font:inherit;font-size:15px;background:#fff;color:var(--navy)}
.trk-f input:focus{outline:2px solid var(--navy);outline-offset:1px;border-color:var(--navy)}
.trk .btn{height:46px;white-space:nowrap}
@media(max-width:640px){.trk{grid-template-columns:1fr}.trk .btn{width:100%}}
.trk-msg{font-size:14px;color:var(--grey2);margin:0 0 14px}
.trk-msg.err{color:var(--red);font-weight:600}
.trk-res{margin:20px 0 30px;border:1px solid var(--line);border-radius:6px;padding:20px 22px;background:#fff}
.trk-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:18px}
.trk-head b{font-family:var(--fd);font-size:24px;font-weight:400;letter-spacing:.01em}
.trk-dt{font-size:12.5px;color:var(--grey)}
.trk-line{list-style:none;margin:0;padding:0;position:relative}
.trk-line li{position:relative;padding:0 0 18px 34px;font-size:14.5px;color:var(--grey)}
.trk-line li::before{content:'';position:absolute;left:8px;top:6px;width:12px;height:12px;border-radius:50%;
 background:#fff;border:2px solid var(--line)}
.trk-line li::after{content:'';position:absolute;left:13px;top:20px;bottom:-2px;width:2px;background:var(--line)}
.trk-line li:last-child::after{display:none}
.trk-line li.fatto{color:var(--grey2)}
.trk-line li.fatto::before{background:var(--navy);border-color:var(--navy)}
.trk-line li.fatto::after{background:var(--navy)}
.trk-line li.ora{color:var(--ink)}
.trk-line li.ora b{color:var(--red);font-weight:600}
.trk-line li.ora::before{background:var(--red);border-color:var(--red);box-shadow:0 0 0 4px rgba(176,25,46,.15)}
.trk-line li span{display:block;font-size:13.5px;line-height:1.55;color:var(--grey2);margin-top:4px;max-width:560px}
.trk-note{font-size:13px;color:var(--grey);margin:6px 0 0}

/* Safari fino alla 14 non conosce aspect-ratio: senza questo la scena in
   testa e le anteprime dei prodotti collassano a zero. Il vecchio trucco
   del padding tiene la stessa proporzione (600/860 e 300/470). */
@supports not (aspect-ratio:1/1){
 .hscena{height:0;padding-top:69.77%}
 .pcard .pv .sc{height:0;padding-top:63.83%}
}

.nojs{background:#FBF0F1;border-bottom:1px solid #EBC6CB;color:var(--ink);font-size:14px;line-height:1.55;padding:12px 24px;text-align:center}
.nojs a{color:var(--red);text-decoration:underline}

/* scelta consegna nel carrello (spedizione / ritiro in sede) */
/* glossario (infissi-cosa-sono): definizione per riga, senza tabella */
.gd .glos{margin:0 0 24px;padding:0;border-top:1px solid var(--line)}
.gd .glos dt{font-weight:700;padding-top:14px;color:var(--ink)}
.gd .glos dd{margin:4px 0 0;padding:0 0 14px;font-size:15px;line-height:1.65;color:var(--grey2);border-bottom:1px solid var(--line)}
/* guida completa: la riga dei link sotto ogni passo */
/* indice delle guide a sezioni */
.gd .gsec{margin:40px 0 0;font-family:var(--fd);font-weight:400;font-size:22px;letter-spacing:.01em}
.gd .gsec+.gidx{margin-top:16px}

/* ===================================================================
   LAVORI — le foto vere dei serramenti montati (09/09/2026)

   Regole che questa griglia rispetta, e che non vanno perse alla
   prossima riscrittura:
   · ogni foto ha un rapporto FISSO (4:5 in verticale, 4:3 in fascia):
     senza questo la pagina salta mentre le immagini arrivano, ed e'
     il difetto che si nota di piu su una connessione lenta;
   · la didascalia sta SOTTO, non sopra la foto: sovrapporre testo a
     una fotografia scattata in cantiere e' illeggibile meta delle
     volte, e nessun filtro lo sistema;
   · niente lightbox, niente carosello: sono foto, non un'attrazione.
   =================================================================== */
.lavgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.lavgrid.q4{grid-template-columns:repeat(4,1fr)}
.lavf{margin:0}
.lavf img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  background:var(--line2);border:1px solid var(--line)}
.lavf figcaption{margin-top:10px;font-size:13px;line-height:1.55;color:var(--grey2)}
.lavf figcaption b{color:var(--ink);font-weight:600;display:block;font-size:13.5px}
.lavnota{margin:38px 0 0;padding:20px 22px;background:var(--paper);border:1px solid var(--line);
  font-size:14.5px;line-height:1.7;color:var(--grey2)}
.lavnota b{color:var(--ink)}
.lavsub{margin:56px 0 22px;padding-top:26px;border-top:1px solid var(--line)}
.lavsub h3{font-family:var(--fd);font-weight:400;font-size:24px;line-height:1.25;margin:10px 0 8px;
  color:var(--navy)}
.lavsub p{margin:0;max-width:60em;font-size:15px;line-height:1.7;color:var(--grey2)}
/* fascia larga: una sola foto a tutta colonna, dentro una pagina di testo */
.fascia{margin:34px 0}
.fascia.ritratto{max-width:420px}
.fascia.ritratto img{aspect-ratio:4/5}
.fascia img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  background:var(--line2);border:1px solid var(--line)}
.fascia figcaption{margin-top:10px;font-size:13px;line-height:1.55;color:var(--grey2)}
.fascia figcaption b{color:var(--ink);font-weight:600}
@media(max-width:900px){
  .lavgrid,.lavgrid.q4{grid-template-columns:repeat(2,1fr);gap:16px}
  .lavf figcaption{font-size:12.5px}
}
@media(max-width:520px){
  .lavgrid,.lavgrid.q4{grid-template-columns:1fr 1fr;gap:12px}
  .lavsub{margin-top:40px}
}

/* ---------- riga in cima: gradini sotto i 430 px ---------- */
@media(max-width:430px){
 .nav.wrap{padding:0 16px}
 .logo{gap:9px}
 .logo .lm{height:38px!important}.logo .lw{height:29px!important}
 .nav{gap:9px}
 .nav .btn.p.s{padding:11px 12px;font-size:10.5px;letter-spacing:.06em}
}
@media(max-width:380px){
 .logo .lm{display:none}
 .logo .lw{height:28px!important}
 .nav.wrap{padding:0 12px}
 .nav{gap:7px}
 .nav .btn.p.s{padding:11px 10px}
 .burger{padding:10px 6px}
}

/* Ricerca nella tabella dei 273 comuni toscani. Deve funzionare col
   pollice su un telefono: campo grande, esito sempre visibile. */
.cfind{margin:22px 0 14px}
.cfind label{display:block;font-size:13px;letter-spacing:.04em;text-transform:uppercase;
 color:#5D6873;margin:0 0 6px}
.cfind input{width:100%;max-width:340px;padding:11px 13px;font:inherit;font-size:16px;
 border:1px solid #ccd2d8;border-radius:8px;background:#fff;color:#1B2733}
.cfind input:focus-visible{outline:2px solid #B0192E;outline-offset:2px;border-color:#B0192E}
.cfind p{margin:8px 0 0}
table.ctab td,table.ctab th{padding:7px 10px}
table.ctab .num{text-align:right;white-space:nowrap}
table.ctab tbody tr:nth-child(even){background:#faf9f6}

/* ---------- banner del consenso (mk.js) ----------
   Esiste solo quando mk.js e' acceso: finche' la pubblicita' non parte,
   queste regole non le usa nessuno ed e' giusto cosi' (il test delle
   classi orfane lo sa, vedi 68-classi-orfane.js).
   «Rifiuta» ha la stessa misura e lo stesso posto di «Accetta»: la
   differenza e' solo di colore, come fra due bottoni qualsiasi. */
.ckb{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--ink);
 color:rgba(255,255,255,.86);border-top:3px solid var(--red);
 box-shadow:0 -10px 30px rgba(0,0,0,.22)}
.ckb-in{max-width:1180px;margin:0 auto;padding:18px 20px;display:flex;gap:22px;
 align-items:center;flex-wrap:wrap}
.ckb-t{margin:0;font:600 13px/1.4 var(--fd);letter-spacing:.03em;color:#fff;flex:0 0 100%}
.ckb-p{margin:0;font-size:13px;line-height:1.6;flex:1 1 420px;min-width:0}
.ckb-p a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.ckb-bt{display:flex;gap:10px;flex:0 0 auto}
.ckb-bt .btn{min-width:150px;min-height:44px}
.ckb-bt .btn.o{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.ckb-bt .btn.o:hover{border-color:#fff;background:rgba(255,255,255,.08)}
/* IL BOTTONE VERDE DI WHATSAPP STA NELLO STESSO ANGOLO.
   Trovato provando il banner: il cerchio verde e' fisso in basso a destra,
   con z-index 75, e copriva proprio il bottone «Rifiuta». Cioe' il banner
   nasceva con la scelta negativa piu' difficile da premere di quella
   positiva — esattamente quello che la norma vieta, e per sbaglio.
   Finche' il banner e' aperto, WhatsApp sale sopra. */
body.ckb-on .wa{bottom:calc(22px + var(--ckb-h, 150px))}
.ckb{--ckb-h:auto}
@media(max-width:700px){
 .ckb-in{padding:16px;gap:14px}
 .ckb-bt{width:100%}
 .ckb-bt .btn{flex:1 1 0;min-width:0}
}