/* ============================================================
   electrONIK — Guide (articolo)
   Carica SOPRA exp-styles.css (token, .btn, .eyebrow, .wrap)
   e servizi.css (.sec, .sec-head, .faq, .cta-band, .foot-c,
   .breadcrumb, .reveal, .wa-float).
   Foglio RIUSABILE da tutte le guide: non contiene nulla di
   specifico della singola pagina.
   ============================================================ */

body{background:var(--bg-soft);}
.art-hero .wrap{position:relative;z-index:5;}
.art-title .hl{color:var(--accent);text-shadow:0 0 34px rgba(var(--accent-rgb),.45);}
.art-meta .dot{width:5px;height:5px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 8px rgba(var(--accent-rgb),.8);flex-shrink:0;}
@media(max-width:1000px){.art-layout{grid-template-columns:minmax(0,1fr);}}
.art-body h2 .n{color:rgba(var(--accent-rgb),.55);font-weight:600;margin-right:10px;
  font-variant-numeric:tabular-nums;}
.art-box .t{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;}
.art-box .t::before{content:"";width:16px;height:1px;background:var(--accent);}
@media(max-width:620px){.sig-grid{grid-template-columns:1fr;}}
.sig{position:relative;border:1px solid var(--line);border-radius:14px;padding:18px 20px;
  background:linear-gradient(165deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
  transition:border-color .4s var(--ease),transform .4s var(--ease);}
.sig:hover{border-color:rgba(var(--accent-rgb),.35);transform:translateY(-3px);}
.sig b{display:block;color:var(--ink);font-size:.99rem;font-weight:600;margin-bottom:6px;}
.sig span{display:block;color:var(--muted);font-size:.9rem;line-height:1.55;}

/* ---------- processo a step ---------- */
.steps{display:grid;gap:12px;margin:0 0 30px;counter-reset:st;}
.step{counter-increment:st;position:relative;border:1px solid var(--line);border-radius:14px;
  padding:20px 22px 20px 66px;background:rgba(255,255,255,.02);}
.step::before{content:counter(st,decimal-leading-zero);position:absolute;left:22px;top:19px;
  font-size:13px;font-weight:700;letter-spacing:.1em;color:rgba(var(--accent-rgb),.6);
  font-variant-numeric:tabular-nums;}
.step b{display:block;color:var(--ink);font-size:1rem;font-weight:600;margin-bottom:5px;}
.step span{display:block;color:var(--muted);font-size:.94rem;line-height:1.6;}

/* ============================================================
   INDICE LATERALE
   ============================================================ */
.toc{position:sticky;top:96px;border:1px solid var(--line);border-radius:16px;
  background:rgba(255,255,255,.02);padding:22px 22px 20px;}
@media(max-width:1000px){.toc{position:static;margin-bottom:36px;}}
.toc .t{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:14px;}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:tc;}
.toc li{counter-increment:tc;margin-bottom:2px;}
.toc a{display:flex;gap:10px;padding:7px 10px;border-radius:9px;font-size:.9rem;
  line-height:1.4;color:var(--muted);transition:color .3s,background .3s;}
.toc a::before{content:counter(tc,decimal-leading-zero);color:rgba(var(--accent-rgb),.45);
  font-size:11px;font-weight:700;flex-shrink:0;line-height:1.65;font-variant-numeric:tabular-nums;}
.toc a:hover{color:var(--ink);background:rgba(var(--accent-rgb),.07);}
.toc a.on{color:var(--accent);background:rgba(var(--accent-rgb),.09);}
@media(max-width:900px){.rel-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.rel-grid{grid-template-columns:1fr;}}
.rel{display:block;position:relative;border:1px solid var(--line);border-radius:16px;
  padding:24px 24px 26px;overflow:hidden;
  background:linear-gradient(165deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
  transition:transform .5s var(--ease),border-color .5s,box-shadow .5s;}
.rel:hover{transform:translateY(-5px);border-color:rgba(var(--accent-rgb),.4);
  box-shadow:0 26px 54px -28px rgba(var(--accent-rgb),.35);}
.rel .k{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(var(--accent-rgb),.6);}
.rel h3{font-size:1.08rem;font-weight:600;letter-spacing:-.02em;color:var(--ink);margin:12px 0 8px;}
.rel p{color:var(--muted);font-size:.92rem;line-height:1.55;margin:0;text-wrap:pretty;}
.rel .go{display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  color:var(--accent);font-size:.88rem;font-weight:600;}
.rel .go .arrow{transition:transform .35s var(--ease);}
.rel:hover .go .arrow{transform:translateX(4px);}
.art-cta .acts{display:flex;gap:13px;flex-wrap:wrap;}

/* respiro fra breadcrumb e hero dell'articolo */
.breadcrumb{padding-bottom:14px;}
@media(max-width:700px){.breadcrumb{padding-bottom:20px;}}

/* ---------- tabella: sotto i 640px diventa schede impilate ---------- */
@media(max-width:640px){
  .art-tablewrap{border:none;overflow:visible;}
  .art-table{min-width:0;display:block;}
  .art-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .art-table tbody,.art-table tr,.art-table td{display:block;width:100%;}
  .art-table tr{border:1px solid var(--line);border-radius:14px;padding:6px 0;margin-bottom:12px;
    background:linear-gradient(165deg,rgba(255,255,255,.035),rgba(255,255,255,.008));}
  .art-table tr:last-child{margin-bottom:0;}
  .art-table td{border-bottom:none;padding:10px 18px;}
  .art-table td:first-child{font-size:1.05rem;font-weight:600;padding-bottom:2px;}
  .art-table td[data-l]::before{content:attr(data-l);display:block;font-size:10.5px;font-weight:700;
    letter-spacing:.12em;text-transform:uppercase;color:rgba(var(--accent-rgb),.65);margin-bottom:5px;}
}
@media(max-width:620px){.dev-grid{grid-template-columns:1fr;}}
.dev{position:relative;border:1px solid var(--line);border-radius:16px;padding:24px 24px 26px;
  background:linear-gradient(165deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  transition:border-color .45s var(--ease),transform .45s var(--ease);}
.dev:hover{border-color:rgba(var(--accent-rgb),.35);transform:translateY(-4px);}
.dev .ic{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:rgba(var(--accent-rgb),.08);border:1px solid rgba(var(--accent-rgb),.25);margin-bottom:16px;}
.dev .ic svg{width:24px;height:24px;fill:none;stroke:var(--accent);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;}
.dev b{display:block;color:var(--ink);font-size:1.1rem;font-weight:600;letter-spacing:-.02em;margin-bottom:8px;}
.dev > span{display:block;color:var(--muted);font-size:.93rem;line-height:1.55;}
.dev .marks{display:flex;flex-wrap:wrap;gap:7px;margin-top:15px;}
.dev .marks i{font-style:normal;font-size:11.5px;font-weight:500;color:var(--muted);
  padding:5px 11px;border-radius:100px;background:rgba(255,255,255,.03);border:1px solid var(--line);}

/* ============================================================
   ELENCO COMPONENTI
   ============================================================ */
.parts{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:0 0 30px;}
@media(max-width:720px){.parts{grid-template-columns:1fr;}}
.pgroup .h{display:flex;align-items:center;gap:10px;font-size:11.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;}
.pgroup .h::before{content:"";width:14px;height:1px;background:var(--accent);flex-shrink:0;}

/* etichetta piccola inline */
.tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(var(--accent-rgb),.85);border:1px solid rgba(var(--accent-rgb),.3);
  background:rgba(var(--accent-rgb),.07);border-radius:100px;padding:3px 9px;margin-left:7px;
  vertical-align:middle;}

/* ============================================================
   CATALOGO — hero compatto + fascia fatti
   ============================================================ */
.cat-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:32px;}
@media(max-width:900px){.cat-facts{grid-template-columns:repeat(2,1fr);}}
@media(max-width:460px){.cat-facts{grid-template-columns:1fr;}}
.cfact{border:1px solid var(--line);border-radius:14px;padding:16px 18px;
  background:linear-gradient(165deg,rgba(255,255,255,.04),rgba(255,255,255,.01));}
.cfact b{display:block;color:var(--accent);font-size:1.28rem;font-weight:650;letter-spacing:-.02em;
  line-height:1.1;margin-bottom:6px;}
.cfact span{display:block;color:var(--muted);font-size:.86rem;line-height:1.45;}
@media(max-width:980px){.rep-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.rep-grid{grid-template-columns:1fr;}}
.rep{position:relative;border:1px solid var(--line);border-radius:15px;padding:20px 20px 22px;
  background:linear-gradient(165deg,rgba(255,255,255,.038),rgba(255,255,255,.008));
  transition:border-color .4s var(--ease),transform .4s var(--ease),box-shadow .4s;}
.rep:hover{border-color:rgba(var(--accent-rgb),.4);transform:translateY(-4px);
  box-shadow:0 22px 44px -26px rgba(var(--accent-rgb),.35);}
.rep .ic{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:rgba(var(--accent-rgb),.08);border:1px solid rgba(var(--accent-rgb),.22);margin-bottom:14px;}
.rep .ic svg{width:21px;height:21px;fill:none;stroke:var(--accent);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;}
.rep b{display:block;color:var(--ink);font-size:1rem;font-weight:600;letter-spacing:-.015em;margin-bottom:6px;}
.rep span{display:block;color:var(--muted);font-size:.88rem;line-height:1.5;}
.rep .t{position:absolute;top:16px;right:16px;font-size:9.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(var(--accent-rgb),.9);border:1px solid rgba(var(--accent-rgb),.3);
  background:rgba(var(--accent-rgb),.08);border-radius:100px;padding:3px 8px;}
@media(max-width:760px){.brand-cols{grid-template-columns:1fr;}}
.bcol .h{display:flex;align-items:center;gap:11px;margin-bottom:16px;}
.bcol .h .ic{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:rgba(var(--accent-rgb),.08);border:1px solid rgba(var(--accent-rgb),.22);flex-shrink:0;}
.bcol .h .ic svg{width:20px;height:20px;fill:none;stroke:var(--accent);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;}
.bcol .h b{color:var(--ink);font-size:1.06rem;font-weight:600;letter-spacing:-.02em;}
.bcol .note{margin-top:15px;color:var(--muted);font-size:.86rem;line-height:1.5;}
@media(max-width:860px){.cmp{grid-template-columns:1fr;}}
.copt.hi{border-color:rgba(var(--accent-rgb),.4);
  background:linear-gradient(170deg,rgba(var(--accent-rgb),.10),rgba(var(--accent-rgb),.02));}
.copt .k{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(var(--accent-rgb),.75);margin-bottom:10px;}
.copt.hi .k{color:var(--accent);}
.copt li.no::before{background:none;content:"–";left:4px;top:0;color:var(--muted);font-weight:700;line-height:1.6;}
.copt li.no{color:var(--muted);}
@media(max-width:900px){.svc-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.svc-grid{grid-template-columns:1fr;}}
.svc .ic{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:rgba(var(--accent-rgb),.08);border:1px solid rgba(var(--accent-rgb),.22);margin-bottom:14px;}
.svc .ic svg{width:20px;height:20px;fill:none;stroke:var(--accent);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;}

/* riga introduttiva sotto un titolo di sezione, stile catalogo */
.sec-line{color:var(--muted);font-size:clamp(.98rem,1.4vw,1.1rem);line-height:1.55;max-width:64ch;
  margin:0 0 clamp(26px,3.5vw,38px);text-wrap:pretty;}
.sec-line strong{color:var(--ink);font-weight:500;}
.cat-facts{margin-top:26px;}
.rep{padding:18px 18px 19px;}
.rep .ic{margin-bottom:12px;}

/* la riga introduttiva sale sotto il titolo di sezione */
.sec-head + .sec-line{margin-top:calc(-1 * clamp(22px,3.6vw,44px));}
/* ritmo verticale del catalogo: sezioni più vicine (fallback innocuo dove :has manca) */
.sec:has(.rep-grid),.sec:has(.brand-cols),.sec:has(.cmp),.sec:has(.svc-grid),.sec:has(.steps){
  padding-bottom:clamp(52px,7vw,88px);}

/* ============================================================
   REGISTRO INTERVENTI — badge «già eseguito» e log dei lavori
   ============================================================ */
.rep{padding-bottom:19px;}
.rep .done{position:absolute;left:18px;bottom:14px;display:inline-flex;align-items:center;gap:5px;
  font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#03130d;
  background:var(--accent);border-radius:100px;padding:4px 10px 4px 8px;
  box-shadow:0 6px 18px -6px rgba(var(--accent-rgb),.7);}
.rep .done svg{width:12px;height:12px;fill:none;stroke:#03130d;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round;}
.rep.is-done{padding-bottom:44px;border-color:rgba(var(--accent-rgb),.3);}
.rep.is-done .ic{background:rgba(var(--accent-rgb),.14);border-color:rgba(var(--accent-rgb),.4);}
@media(max-width:560px){.reg-facts{grid-template-columns:1fr;}}
@media(max-width:820px){.log-grid{grid-template-columns:1fr;}}
.log{border:1px solid var(--line);border-radius:16px;padding:22px 22px 24px;
  background:linear-gradient(165deg,rgba(255,255,255,.04),rgba(255,255,255,.01));}
.log-h{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-bottom:14px;}
.log-h b{color:var(--ink);font-size:1.12rem;font-weight:620;letter-spacing:-.02em;}
.log-h .q{color:var(--accent);font-size:1rem;font-weight:700;}
.log-h .ok{margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);border:1px solid rgba(var(--accent-rgb),.35);
  background:rgba(var(--accent-rgb),.08);border-radius:100px;padding:4px 10px;}
.log-c{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px;}
.log-c i{font-style:normal;font-size:12px;font-weight:500;color:var(--text2);
  padding:5px 11px;border-radius:100px;background:rgba(255,255,255,.04);border:1px solid var(--line);}
.log-n{color:var(--muted);font-size:.92rem;line-height:1.6;margin:0;text-wrap:pretty;}
.log-foto{display:flex;gap:10px;flex-wrap:wrap;margin-top:15px;}
.log-foto img{width:112px;height:112px;object-fit:cover;border-radius:11px;border:1px solid var(--line);}