/* Adattatore per gli strumenti interattivi (test-ai, scheda-preventivo-ai):
   regole riprese dai vecchi fogli, con la palette nuova mappata sulle vecchie variabili. */
:root {
  --blue: var(--blu-500); --blue-2: var(--blu-700); --violet: var(--blu-500); --teal: var(--successo);
  --rose: var(--errore); --amber: var(--attenzione);
  --ink: var(--inchiostro); --ink-2: var(--grigio-600); --ink-3: var(--grigio-600);
  --bg: var(--fondo); --bg-alt: var(--ghiaccio); --card: var(--bianco); --line: var(--grigio-100);
  --r: var(--raggio-blocco); --r-sm: var(--raggio-comando); --r-s: var(--raggio-comando);
  --sh: var(--ombra-1); --sh-lg: var(--ombra-2); --head: var(--font); --body: var(--font);
  --grad: var(--notte); --grad-line: var(--blu-500); --grad-text: var(--inchiostro); --ease: var(--curva);
  --surface: var(--bianco); --radius: var(--raggio-blocco); --warn: var(--errore);
  --blue-text: var(--blu-600); --teal-text: var(--successo); --rose-text: var(--errore);
  --blue-soft: var(--velo-blu); --violet-soft: var(--blu-100); --teal-soft: #e2f2f1; --amber-soft: #fdf1dd; --rose-soft: #fbe9e7;
}
/* equivalenti sobri delle vecchie classi di impianto */
.wrap { width: 100%; max-width: calc(var(--largo) + 2 * var(--margine)); margin: 0 auto; padding: 0 var(--margine); }
.sec { padding: var(--sezione) 0; }
.sec.alt { background: var(--tinta); }
.page-hero h1 { letter-spacing: -.03em; line-height: 1.06; }
/* testata come le altre pagine interne: fondo tenue, misure di rg.css */
.page-hero { padding: var(--intestazione-alto) 0 var(--intestazione-basso); background: var(--superficie-tenue); }
.page-hero h1 { font-size: var(--t-h1); max-width: 22ch; }
.page-hero + .sec { padding-top: var(--stacco); }
/* test AI: niente spazio vuoto di sezione sopra il titolo */
.sec.glow { padding-top: var(--intestazione-alto); }
.page-hero .lead, .sec .lead { font-size: var(--t-lead); line-height: 1.5; color: var(--grafite); max-width: 36em; margin-top: var(--s5); }
.pill { display: inline-block; font-size: var(--t-etichetta); font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--blu-testo); margin-bottom: var(--s4); }
.grad { color: inherit; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 24px; border-radius: var(--pillola); border: 0; background: var(--blu); color: #fff; font: 600 1rem/1.2 var(--font); text-decoration: none; cursor: pointer; transition: background-color .2s; }
.btn:hover { background: var(--blu-scuro); }
.btn.btn-ghost, .btn:not(.btn-primary):not(.cb-yes) { background: #fff; color: var(--blu-testo); box-shadow: inset 0 0 0 1.5px var(--blu); }
.btn.btn-ghost:hover, .btn:not(.btn-primary):hover { background: #f3f7fe; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px 16px; }
.btn .arrow { display: none; }
.alt-link { display: inline-block; margin-top: 14px; color: var(--blu-testo); font-size: var(--t-piccolo); }
.note { font-size: var(--t-piccolo); color: var(--grafite); }


.qz-card { background: var(--card); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--sh-lg); padding: clamp(22px, 5vw, 40px); position: relative; }
.qz-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; font-size: .86rem; color: var(--ink-3); }
.qz-top .grp { font-weight: 700; color: var(--blue); letter-spacing: .04em; text-transform: uppercase; font-size: .74rem; }
.qz-bar { height: 6px; border-radius: 3px; background: var(--bg-alt); overflow: hidden; margin-bottom: 26px; }
.qz-bar i { display: block; height: 100%; width: 0; background: var(--grad-line); border-radius: 3px; transition: width .35s var(--ease); }
.qz-q { font-family: var(--head); font-weight: 700; font-size: clamp(1.3rem, 4vw, 1.75rem); line-height: 1.2; margin: 0 0 20px; letter-spacing: -.01em; }
.qz-opts { display: grid; gap: 10px; }
.qz-opt { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: center; text-align: left; width: 100%; background: var(--card); border: 1.5px solid var(--bordo-campo); border-radius: 14px; padding: 14px 16px; cursor: pointer; font: inherit; color: var(--ink); transition: border-color .15s, background .15s, transform .15s var(--ease); }
.qz-opt:hover { border-color: rgba(43,107,243,.45); transform: translateX(2px); }
.qz-opt .l { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--bordo-campo); display: grid; place-items: center; font-family: var(--head); font-weight: 700; font-size: .9rem; color: var(--ink-3); transition: all .15s; }
.qz-opt.sel { border-color: var(--blue); background: var(--blue-soft); }
.qz-opt.sel .l { background: var(--grad); border-color: transparent; color: #fff; }
.qz-opt:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.qz-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; gap: 12px; }
.qz-nav .back { background: none; border: 0; color: var(--ink-3); font: inherit; font-size: .92rem; cursor: pointer; padding: 12px 0; min-height: 44px; }
.qz-nav .back:hover { color: var(--ink); }
.qz-nav .back[disabled] { visibility: hidden; }
.qz-nav .keys { font-size: .78rem; color: var(--ink-3); }
@media (max-width: 759px) { .qz-nav .keys { display: none; } }
.qz-intro h1 { font-size: clamp(2.1rem, 7vw, 3.2rem); }
.qz-intro .lead { margin: 16px 0 24px; }
.qz-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; font-size: .9rem; color: var(--ink-3); }
.qz-meta span::before { content: "✓ "; color: var(--teal); font-weight: 700; }
/* il cantiere a 5 stadi */
.site-stages { display: grid; gap: 8px; margin: 26px 0 8px; }
/* esito */
.res-head .pill { margin-bottom: 12px; }
.res-head h2 { font-size: clamp(1.8rem, 6vw, 2.6rem); margin: 0 0 6px; }
.res-head .sub { color: var(--ink-3); font-weight: 600; margin: 0; }
.res-warn { margin: 18px 0 0; padding: 14px 16px; border-radius: 12px; border: 2px dashed var(--violet); background: var(--violet-soft); font-size: .93rem; color: var(--ink-2); }
.res-warn strong { color: var(--violet); }
.abars { display: grid; gap: 12px; margin-top: 14px; }
.abar { display: grid; gap: 6px; }
.abar .h { display: flex; justify-content: space-between; font-size: .88rem; }
.abar .h span { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.abar .t { height: 8px; border-radius: 4px; background: var(--bg-alt); overflow: hidden; }
.abar .t i { display: block; height: 100%; border-radius: 4px; background: var(--grad-line); width: 0; transition: width .8s var(--ease); }
.abar.low .t i { background: linear-gradient(90deg, var(--rose), #f5a524); }
.res-cta { display: grid; gap: 10px; margin-top: 22px; padding: 22px; border-radius: var(--r); background: var(--grad); color: #fff; }
.res-cta strong { font-family: var(--head); font-size: 1.2rem; }
.res-cta p { margin: 0; color: rgba(255,255,255,.88); font-size: .95rem; }
.res-cta .btn { justify-self: start; background: #fff; color: var(--blue); box-shadow: none; }
.res-cta .alt-link { color: #fff; font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; }
.res-cta.soft { background: var(--card); color: var(--ink); border: 1.5px solid var(--ink); }
.res-cta.soft p { color: var(--ink-2); }
.res-cta.soft .btn { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.res-cta.soft .btn:hover { background: var(--ink); color: #fff; }
.res-cta.soft .alt-link { color: var(--blue); }
.res-mail { margin-top: 18px; padding: 20px; border-radius: var(--r); background: var(--bg); border: 1px solid var(--line); }
.res-mail strong { font-family: var(--head); display: block; margin-bottom: 4px; }
.res-mail form { display: grid; gap: 10px; margin-top: 12px; }
.res-mail .inl { display: grid; gap: 10px; }
@media (min-width: 600px) { .res-mail .inl { grid-template-columns: 1fr 1fr auto; } }
.res-mail input[type=text], .res-mail input[type=email] { font: inherit; font-size: .97rem; min-height: 48px; border: 1px solid var(--bordo-campo); border-radius: 10px; padding: 11px 14px; background: #fff; width: 100%; }
.res-mail .ok { color: #0b6e67; font-weight: 600; }
/* scheda preventivo */
.chk-list { display: grid; gap: 10px; counter-reset: c; }
.chk-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 18px 20px; box-shadow: var(--sh); display: grid; gap: 12px; counter-increment: c; }
.chk-item .qq { display: grid; grid-template-columns: 30px 1fr; gap: 10px; }
.chk-item .qq::before { content: counter(c, decimal-leading-zero); font-family: var(--head); font-weight: 700; color: var(--violet); font-size: .9rem; padding-top: 24px; }
.chk-item strong { display: block; font-family: var(--head); font-weight: 600; font-size: 1.02rem; }
.chk-item em { display: block; font-style: normal; color: var(--ink-3); font-size: .88rem; margin-top: 3px; }
.chk-item .seg { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 40px; }
.seg label { cursor: pointer; position: relative; }
.seg input { position: absolute; opacity: 0; }
.seg span { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border: 1px solid var(--bordo-campo); border-radius: 999px; font-weight: 600; font-size: .9375rem; background: var(--card); transition: all .15s; }
.seg input:checked + span { background: var(--grad); color: #fff; border-color: transparent; }
.seg input[value=no]:checked + span { background: var(--rose); }
.seg input[value=nc]:checked + span { background: var(--ink-3); }
.seg input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.score-box { position: sticky; bottom: 12px; z-index: 5; margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; background: var(--ink); color: #fff; border-radius: var(--r); padding: 14px 18px; box-shadow: var(--sh-lg); }
.score-box strong { font-family: var(--head); font-size: 1.05rem; }
.score-box span { color: rgba(255,255,255,.8); font-size: .9rem; }
.score-box .btn { background: #fff; color: var(--ink); box-shadow: none; }
/* pagine di ringraziamento */
@media (max-width: 759px) {
  .lead { font-size: 1.05rem; line-height: 1.6; }
  .chk-item .seg { padding-left: 0; }
}
/* test-ai: i tre box prima del pulsante */
.qz-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4b); margin-top: 22px; text-align: left; }
.qz-why-box { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 18px; box-shadow: var(--sh); }
.qz-why-n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--grad); color: #fff; font-family: var(--head); font-weight: 700; font-size: .85rem; margin-bottom: 10px; }
.qz-why-box strong { display: block; font-family: var(--head); font-size: 1.05rem; margin-bottom: 4px; }
.qz-why-box p { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 759px) { .qz-why { grid-template-columns: 1fr; gap: 10px; } .qz-why-box { padding: 15px; } }
/* scheda preventivo: domande da fare al fornitore */
.chk-item .ask { display: inline-block; font-size: .8125rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--blu-700); background: var(--violet-soft); border-radius: 999px; padding: 3px 10px; margin-bottom: 6px; }
.chk-item em.okhint { color: var(--ink-2); background: var(--teal-soft); border-radius: var(--r-sm); padding: 8px 12px; margin-top: 8px; font-size: .88rem; }
.chk-item em.okhint b { color: #0b6e67; font-weight: 700; }
.chk-item .seg-q { font-size: .82rem; font-weight: 700; color: var(--ink-3); margin-top: 2px; }
.seg input[value=si]:checked + span { background: var(--teal); }
/* scheda preventivo: verdetto */
.vd-counts { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.vd-counts span { padding: 6px 12px; border-radius: 999px; font-size: .85rem; font-weight: 700; }
.vd-counts .c { background: var(--teal-soft); color: #0b6e67; }
.vd-counts .v { background: var(--amber-soft); color: #9a5b00; }
.vd-counts .n { background: var(--bg); color: var(--ink-3); border: 1px solid var(--line); }
.vd-block { margin-top: 28px; }
.vd-block h3 { font-size: 1.15rem; margin: 0 0 12px; }
.vd-areas { display: grid; gap: 10px; }
@media (min-width: 760px) { .vd-areas { grid-template-columns: 1fr 1fr; } }
.vd-area { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px 16px; background: var(--rose-soft); }
.vd-area p { margin: 4px 0 0; font-size: .92rem; color: var(--ink-2); line-height: 1.5; }
.vd-area b { font-family: var(--head); }
.vd-area .st { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--lampone); margin-bottom: 2px; }
.vd-area.s3 { background: var(--teal-soft); }
.vd-area.s3 .st { color: #0b6e67; }
.vd-area.s2 { background: var(--amber-soft); }
.vd-area.s2 .st { color: #9a5b00; }
.vd-items { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.vd-items li { padding: 12px 14px; border-radius: var(--r-sm); background: var(--bg); font-size: .94rem; color: var(--ink-2); line-height: 1.5; border: 1px solid var(--line); }
.vd-items .qn { display: block; font-family: var(--head); font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.vd-ok li { background: var(--teal-soft); border-color: transparent; }
.vd-warn li { background: var(--amber-soft); border-color: transparent; }
/* esito del check */
.rcard { display: grid; gap: 12px; margin-top: 18px; }
.rblock { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 16px 18px; box-shadow: var(--sh); }
.rk { display: block; font-size: .76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; }
.rblock p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.rblock p b { color: var(--ink); font-weight: 700; }


/* scala dei cinque stadi nell'esito del test */
.site-stages .stage { display: grid; grid-template-columns: 32px 1fr; gap: 4px 12px; padding: 12px 14px; border: 1px solid var(--linea); border-radius: 12px; background: #fff; align-items: start; }
.site-stages .stage b, .site-stages .stage strong { display: block; font-size: 1rem; font-weight: 650; color: var(--ink); margin-bottom: 2px; }
.site-stages .stage .sn { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; background: var(--blu-chiaro); color: var(--blu-testo); display: grid; place-items: center; font-weight: 650; font-size: var(--t-piccolo); }
.site-stages .stage span:not(.sn) { font-size: var(--t-piccolo); color: var(--grafite); }
.site-stages .stage.past { opacity: .6; }
.site-stages .stage.here { border-color: var(--blu); box-shadow: 0 0 0 1px var(--blu) inset; }
.site-stages .stage.wall .sn { background: var(--amber-soft); color: #9a5b00; }