/* GDOLens · pagine prodotto (Fold, Shelf, Console, Console Light). Si carica dopo home.css e ne usa tavolozza, caratteri, testata, pulsanti, modulo e piede.
   Fasce scure: apertura, caso simulato, demo. Le altre sezioni stanno su carta chiara, come i disegni della home. */
:root{--bianco:#FFFFFF;--tinta:#E1E7EE;--ok:#14683F;--no:#B3261E;--esce:#E3F3F7;--esce-b:#B5DDE6;--esce-t:#0B5C6E}
html{scroll-padding-top:132px}
.prodotto h1,.prodotto h2,.prodotto h3{line-height:1.15}

/* testata: quella della home, più la riga dei quattro strumenti */
.testa{position:sticky;top:0;z-index:9;border-bottom:1px solid var(--dark-line)}
.prodotti{display:flex;gap:6px;overflow-x:auto;padding:10px 2px}
.prodotti a{flex:none;font:600 14px/1 var(--ft);color:var(--text);text-decoration:none;padding:9px 14px;border:1px solid var(--line);border-radius:4px}
.prodotti a:hover{color:var(--ink);border-color:#3B5570}
.prodotti a[aria-current]{background:var(--acc);color:var(--on-acc);border-color:var(--acc)}
.prodotti a:focus-visible{outline-offset:-3px}

/* fasce */
.fascia{padding:56px 0}
.chiara{background:var(--paper);color:var(--paper-ink)}
.bianca{background:var(--bianco);color:var(--paper-ink)}
.scura{background:var(--dark);color:var(--on-dark)}
.chiara :focus-visible,.bianca :focus-visible,.pd :focus-visible{outline-color:var(--paper-ink)}
summary:focus-visible,textarea:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.fascia .kick{line-height:1.4;margin-bottom:12px}
.chiara .kick,.bianca .kick{color:var(--paper-acc)}
.fascia h2{max-width:24ch}
.sotto{margin-top:14px;max-width:62ch;color:var(--paper-text)}
.scura .sotto{color:var(--dark-text)}
.cta{margin-top:32px}
.fascia .wrap>div{min-width:0}

/* apertura */
.apertura{padding:44px 0 64px;overflow:hidden}
.apertura h1{font-weight:800;font-size:clamp(32px,7.4vw,54px);line-height:1.08;max-width:17ch;text-wrap:balance}
.apertura h1 em{font-style:normal;color:var(--hi)}
.apertura .sotto{font-size:clamp(17px,1.5vw,19px)}
.nota{margin-top:12px;font-size:14px;color:var(--muted);max-width:44ch}
.griglia-ap{display:grid;gap:44px}
.foglio{background:var(--bianco);color:var(--paper-ink);padding:20px 20px 58px;transform:rotate(2.2deg);box-shadow:0 30px 60px -20px rgba(0,0,0,.6);max-width:460px;margin:0 auto;position:relative}
.foglio .cima{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.foglio .cima b{font:500 11px/1.4 var(--fm);letter-spacing:.1em;color:var(--paper-acc)}
.foglio .es{flex:none;font:400 11px/1.4 var(--fm);border:1px solid var(--paper-line);border-radius:99px;padding:2px 9px;color:var(--paper-text)}
.fascia .foglio-t{font-size:20px;font-weight:700;margin-top:6px;max-width:none}
.tre{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0}
.tre div{border:1px solid var(--paper-line);padding:10px;min-width:0}
.tre strong{font:700 24px/1 var(--fd);display:block}
.tre span{display:block;font-size:12px;line-height:1.3;color:var(--paper-text);margin-top:4px}
.barra{display:flex;height:14px}
.barra i{display:block}
.leg{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:8px;font-size:12px;color:var(--paper-text)}
.leg i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}
.pagine{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid var(--paper-line)}
.pagine li{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--paper-line);font-size:14px;font-weight:500}
.pagine li span{font:400 12px/1.6 var(--fm);color:var(--paper-text)}
.timbro{position:absolute;right:14px;bottom:14px;transform:rotate(-8deg);font:500 11px/1.4 var(--fm);letter-spacing:.1em;color:var(--paper-acc);border:2px solid var(--paper-acc);border-radius:4px;padding:3px 8px;background:var(--bianco)}
.sottofoglio{margin:26px auto 0;font-size:13px;color:var(--muted);max-width:460px;text-align:center}

/* scatole */
.quattro,.tre-box,.numeri,.chi,.fam{display:grid;gap:14px}
.quattro,.tre-box,.fam{margin-top:32px}
.box{background:var(--bianco);border:1px solid var(--paper-line);padding:20px;min-width:0}
.box .n{font:500 13px/1.3 var(--fm);color:var(--paper-acc);display:block}
.box h3{font-size:18px;font-weight:700;margin:8px 0 6px}
.box p{font-size:15px;color:var(--paper-text)}
.tre-box .box h3,.impegni .box h3,.chi .box h3{margin-top:0}

/* prima e dopo */
.due{display:grid;gap:28px}
.pannello{background:var(--paper);border:1px solid var(--paper-line);padding:16px}
.ling{display:inline-flex;background:var(--tinta);border-radius:6px;padding:4px}
.ling button{font:600 14px/1 var(--ft);border:0;background:transparent;color:var(--paper-text);padding:10px 16px;border-radius:4px;cursor:pointer}
.ling button[aria-selected=true]{background:var(--paper-ink);color:#fff}
.vista-t{font:500 12px/1.4 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--paper-acc)}
[data-linguette]:not(.on) [data-vista]+[data-vista]{margin-top:24px;padding-top:20px;border-top:1px solid var(--paper-line)}
[hidden]{display:none!important}
.fogli{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 6px}
.fogli span{background:var(--bianco);border:1px solid var(--paper-line);padding:9px 12px;font-size:14px;font-weight:500;box-shadow:0 2px 0 #D5DCE4}
.sparsi span:nth-child(odd){transform:rotate(-3deg)}
.sparsi span:nth-child(even){transform:rotate(2.5deg) translateY(4px)}
.ordine{display:grid;gap:8px;margin:18px 0 6px}
.ordine div{background:var(--bianco);border:1px solid var(--paper-line);border-left:4px solid var(--acc);padding:9px 12px;font-size:14px;font-weight:500}
.ordine small{display:block;font:400 12px/1.4 var(--fm);color:var(--paper-text)}
.inpiu{font:500 12px/1.4 var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--paper-acc);margin-top:16px}
.rigasotto{font-size:14px;color:var(--paper-text);margin-top:14px;font-style:italic}

/* cosa ricevi: indice e pagine */
.report{display:grid;background:var(--bianco);border:1px solid var(--paper-line);margin-top:32px;min-width:0}
.ind{display:flex;gap:6px;overflow-x:auto;padding:12px;background:var(--tinta);border-bottom:1px solid var(--paper-line);min-width:0}
.ind button{flex:none;font:500 14px/1.2 var(--ft);border:0;background:transparent;color:var(--paper-text);padding:9px 12px;border-radius:4px;cursor:pointer;text-align:left;white-space:nowrap}
.ind button b{font:400 13px/1 var(--fm);margin-right:8px}
.ind button[aria-selected=true]{background:var(--bianco);color:var(--paper-ink);box-shadow:0 1px 3px rgba(12,27,44,.16)}
.pagg{min-width:0}
.pag{padding:22px}
.report:not(.on) .pag+.pag{border-top:1px solid var(--paper-line)}
.report.on .pag{min-height:250px}
.pag h3{font-size:20px;font-weight:700}
.pag p{color:var(--paper-text);font-size:15px;margin-top:8px;max-width:56ch}
.pag .kick{margin-top:0}
.colonne{display:flex;align-items:flex-end;gap:10px;height:140px;margin-top:22px;max-width:520px}
.colonne div{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.colonne i{display:block;flex:none}
.colonne .cx{box-shadow:inset 0 0 0 1px #A9B0A6}
.colonne span{flex:none;text-align:center;font:500 12px/1 var(--fm);color:var(--paper-ink);padding-bottom:6px}
.nomi{display:flex;gap:10px;margin-top:6px;font-size:12px;color:var(--paper-text);max-width:520px}
.nomi span{flex:1;text-align:center;min-width:0}
.indemo{display:inline-block;margin-top:16px;font:400 12px/1.4 var(--fm);color:var(--paper-acc);border:1px dashed var(--paper-acc);border-radius:4px;padding:4px 8px}
.riservata{font-size:14px;color:var(--paper-text);margin-top:12px}
.impegni{background:var(--esce);border:1px solid var(--esce-b);padding:18px;margin-top:28px}
.impegni .kick{color:var(--esce-t);margin-bottom:14px}
.impegni .quattro{margin-top:0}

/* confronto */
.conf{margin-top:32px;display:grid;gap:14px}
.dom{background:var(--bianco);border:1px solid var(--paper-line)}
.dom h3{font-size:16px;font-weight:700;padding:14px 16px;background:var(--tinta)}
.dom dl{margin:0;display:grid}
.dom dl div{padding:10px 16px;border-top:1px solid var(--paper-line)}
.dom dt{font:400 11px/1.4 var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--paper-text)}
.dom dd{margin:2px 0 0;font-size:15px}
.dom .noi{background:var(--bg);color:#fff;border-top:0}
.dom .noi dt{color:var(--acc)}
.dom .noi dd{font-weight:600}
.tab-scorri{display:none}
.piccolo{font-size:13px;color:var(--paper-text);margin-top:14px}

/* per chi è */
.chi{margin-top:28px}
.chi ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px}
.chi li{padding-left:30px;position:relative;font-size:15px;color:var(--paper-text)}
.chi li::before{position:absolute;left:0;top:-2px;font-weight:700;font-size:17px}
.nofa li::before{content:"×";color:var(--no)}
.fa li::before{content:"✓";color:var(--ok)}
.fa{background:#E8F5EE;border-color:#BFE3CF}

/* caso simulato, su fascia scura; il disegno resta su carta chiara */
.scura .box{background:var(--card);border-color:var(--line)}
.scura .box h3{font:500 12px/1.4 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--acc-t);margin:0 0 8px}
.scura .box p{color:var(--text)}
.numeri{margin-top:14px}
.numeri .box strong{font:800 40px/1 var(--fd);color:var(--hi);display:block;margin-bottom:6px}
.pd{background:var(--paper);color:var(--paper-ink);border:1px solid var(--paper-line);padding:18px;margin-top:14px}
.mucchio{display:grid;grid-template-columns:repeat(12,1fr);gap:5px;margin-top:20px;max-width:620px}
.mucchio i{aspect-ratio:3/4;background:var(--bianco);border:1px solid var(--paper-line);display:block}
.mucchio i:nth-child(3n){transform:rotate(-7deg)}
.mucchio i:nth-child(4n+1){transform:rotate(6deg) translateY(3px)}
.mucchio i:nth-child(5n){background:var(--paper-line)}
.scaff{display:grid;gap:8px;margin-top:20px;background:#E9EBE4;padding:12px 10px 8px}
.rip{display:grid;grid-template-columns:repeat(13,1fr);gap:3px;padding:0 2px 5px;border-bottom:4px solid #7C8A97}
.rip i{display:block;aspect-ratio:3/5}
.didas{font:400 12px/1.4 var(--fm);color:var(--paper-text);margin-top:12px}
.fant{font-size:13px;color:var(--muted);margin-top:18px}

/* come funziona */
.fasi{list-style:none;margin:32px 0 0;padding:0;display:grid;counter-reset:f}
.fasi li{counter-increment:f;position:relative;padding:0 0 26px 54px}
.fasi li::before{content:counter(f);position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;background:var(--paper-ink);color:#fff;font:700 15px/1 var(--fd);display:grid;place-items:center}
.fasi li::after{content:"";position:absolute;left:17px;top:40px;bottom:2px;width:2px;background:var(--paper-line)}
.fasi li:last-child::after{display:none}
.fasi h3{font-size:19px;font-weight:700;padding-top:7px}
.fasi p{color:var(--paper-text);font-size:15px;margin-top:4px;max-width:56ch}
.esce{display:inline-block;margin-top:10px;font-size:14px;background:var(--esce);border:1px solid var(--esce-b);border-radius:4px;padding:5px 10px;color:var(--esce-t)}
.esce b{font-family:var(--fm);font-weight:500}

/* domande */
.faq{margin-top:28px;border-top:1px solid var(--paper-line)}
details{border-bottom:1px solid var(--paper-line)}
summary{font:700 17px/1.3 var(--fd);padding:16px 34px 16px 0;cursor:pointer;list-style:none;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:12px;font:400 22px/1.3 var(--ft);color:var(--paper-acc)}
details[open] summary::after{content:"–"}
details p{padding:0 0 18px;color:var(--paper-text);font-size:16px;max-width:62ch}

/* famiglia */
.fam a{text-decoration:none;color:inherit;display:block}
.fam a:hover{border-color:var(--paper-acc)}
.fam .qui{border:2px solid var(--paper-acc)}

/* demo: il modulo è quello della home */
.passi{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px;counter-reset:p}
.passi li{counter-increment:p;padding-left:44px;position:relative}
.passi li::before{content:counter(p);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--acc);color:var(--acc);font:700 14px/1 var(--fd);display:grid;place-items:center}
.passi b{font-family:var(--fd);font-weight:700;display:block;color:var(--on-dark)}
.passi span{font-size:15px;color:var(--text)}
.griglia-mod{display:grid;gap:32px}
.modulo{align-content:start}
textarea{padding:10px 12px;border:1px solid #3B5570;border-radius:4px;background:var(--paper);color:var(--paper-ink);font:400 16px/1.4 var(--ft);width:100%;resize:vertical}

@media (max-width:600px){
  .modulo{grid-template-columns:1fr}
  .fogli span,.ordine div{font-size:13.5px}
}
@media (min-width:860px){
  html{scroll-padding-top:136px}
  .fascia{padding:88px 0}
  .apertura{padding:72px 0 104px}
  .griglia-ap{grid-template-columns:1.05fr .95fr;align-items:center}
  .foglio{transform:rotate(3deg) translateY(10px)}
  .quattro{grid-template-columns:repeat(4,1fr)}
  .impegni .quattro,.tre-box,.numeri{grid-template-columns:repeat(3,1fr)}
  .due{grid-template-columns:.9fr 1.1fr;align-items:center;gap:48px}
  .report.on{grid-template-columns:270px minmax(0,1fr)}
  .report.on .ind{flex-direction:column;border-bottom:0;border-right:1px solid var(--paper-line);overflow:visible}
  .pag{padding:32px}
  .report.on .pag{min-height:420px}
  .conf{display:none}
  .tab-scorri{display:block;overflow-x:auto;margin-top:36px;border:1px solid var(--paper-line)}
  .tab-conf{width:100%;border-collapse:collapse;background:var(--bianco);font-size:15px}
  .tab-conf th,.tab-conf td{padding:16px;text-align:left;vertical-align:top;border-top:1px solid var(--paper-line);width:19%}
  .tab-conf thead th,.tab-conf thead td{border-top:0;font:700 14px/1.3 var(--fd);background:var(--tinta)}
  .tab-conf tbody th{font:700 15px/1.3 var(--fd)}
  .tab-conf td{color:var(--paper-text)}
  .tab-conf th:last-child,.tab-conf td:last-child{background:var(--bg);color:#fff;font-weight:600;width:24%;border-top-color:var(--line)}
  .tab-conf thead th:last-child{color:var(--acc);background:var(--bg)}
  .chi{grid-template-columns:1fr 1fr}
  .fam{grid-template-columns:repeat(4,1fr)}
  .mucchio{grid-template-columns:repeat(16,1fr)}
  .scaff{max-width:620px}
  .griglia-mod{grid-template-columns:1fr 1fr;gap:56px;align-items:start}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}
/* misure:inizio (scritte da tools/genera-pagine.mjs, non toccare) */
.a25{height:25%}.a26{height:26%}.a35{height:35%}.a41{height:41%}.a47{height:47%}.a53{height:53%}.a56{height:56%}.a79{height:79%}.a82{height:82%}.a88{height:88%}.a100{height:100%}.q6{flex:6}.q7{flex:7}.q8{flex:8}.q9{flex:9}.q12{flex:12}.q14{flex:14}.q17{flex:17}.q18{flex:18}.q27{flex:27}.q34{flex:34}
/* misure:fine */