/* =====================================================================
   COMED — pagine servizio (deep dive SEO)
   Riusa i token di styles.css
   ===================================================================== */

.sv-header{
  position:sticky;top:0;z-index:100;
  background:rgba(20,21,23,.88);backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line);
}
.sv-header__inner{display:flex;align-items:center;gap:20px;height:70px}
.sv-back{
  display:flex;align-items:center;gap:10px;color:var(--paper);
}
.sv-back img{height:30px;width:auto;display:block}
.sv-back__word{display:flex;flex-direction:column;line-height:1}
.sv-back__name{font-family:var(--font-display);font-size:20px;letter-spacing:.06em}
.sv-back__tag{font-family:var(--font-mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--concrete);margin-top:3px}
.sv-header__cta{margin-left:auto;display:flex;align-items:center;gap:12px}
@media (max-width:560px){
  .sv-header__cta .btn--ghost{display:none}
  .sv-back__tag{display:none}
}

/* ---------- hero ---------- */
.sv-hero{padding:clamp(48px,7vw,90px) 0 clamp(36px,5vw,56px);border-bottom:1px solid var(--line)}

/* foto di apertura: fascia a tutta larghezza tra il titolo e il testo */
.sv-shot{margin:0;position:relative;overflow:hidden;background:#0d0e10}
.sv-shot img{
  display:block;width:100%;height:auto;
  aspect-ratio:16/9;object-fit:cover;
  max-height:min(58vh,560px);
}
/* sfuma il bordo inferiore dentro il fondo della pagina, senza stacchi netti */
.sv-shot::after{
  content:"";position:absolute;inset:auto 0 0 0;height:38%;pointer-events:none;
  background:linear-gradient(rgba(20,21,23,0),var(--ink));
}
.breadcrumb{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--concrete);margin-bottom:1.6rem;display:flex;flex-wrap:wrap;gap:.6em;align-items:center;
}
.breadcrumb a{color:var(--concrete);transition:color .2s}
.breadcrumb a:hover{color:var(--signal)}
.breadcrumb span[aria-current]{color:var(--paper)}
.sv-title{
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.2rem,6vw,4.2rem);line-height:.98;letter-spacing:.01em;color:var(--paper);margin:0;
}
.sv-sub{margin-top:1.4rem;max-width:56ch;font-size:clamp(1.05rem,1.5vw,1.25rem);color:#d8d3ca}
.sv-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:2rem}

/* ---------- corpo ---------- */
.sv-body{padding:clamp(48px,7vw,84px) 0}
.sv-lead{max-width:62ch;font-size:1.1rem;color:#d8d3ca;margin-bottom:clamp(40px,6vw,68px)}

.sv-block{margin-bottom:clamp(44px,6vw,76px)}
.sv-h2{
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1;letter-spacing:.01em;color:var(--paper);
  margin:0 0 1.6rem;display:flex;align-items:baseline;gap:.7em;
}
.sv-h2::before{
  content:attr(data-n);font-family:var(--font-mono);font-size:13px;color:var(--signal);
  letter-spacing:.1em;flex:none;
}

/* quando serve */
.sv-signs{display:grid;gap:14px;max-width:70ch}
.sv-signs li{
  display:flex;gap:14px;align-items:flex-start;padding:16px 18px;
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);
  color:#d8d3ca;
}
.sv-signs li::before{
  content:"";flex:none;width:8px;height:8px;margin-top:.5em;background:var(--signal);
}

/* come lavoriamo */
.sv-steps{counter-reset:st;display:grid;gap:0;border-top:1px solid var(--line)}
.sv-step{
  display:grid;grid-template-columns:56px 1fr;gap:20px;
  padding:24px 0;border-bottom:1px solid var(--line);align-items:start;
}
.sv-step__n{
  font-family:var(--font-mono);font-size:13px;color:var(--signal);font-weight:600;padding-top:.25em;
}
.sv-step__name{font-family:var(--font-display);font-size:1.2rem;text-transform:uppercase;letter-spacing:.01em;color:var(--paper);margin:0 0 .4rem}
.sv-step__txt{color:var(--concrete);max-width:60ch}
@media (max-width:560px){.sv-step{grid-template-columns:1fr;gap:6px}}

/* cosa include */
.sv-incl{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (max-width:640px){.sv-incl{grid-template-columns:1fr}}
.sv-incl li{
  display:flex;gap:12px;align-items:flex-start;color:#d8d3ca;font-size:.98rem;
  padding:14px 16px;background:var(--ink-2);border-left:2px solid var(--signal);border-radius:0 var(--radius) var(--radius) 0;
}

/* faq */
.sv-faq{border-top:1px solid var(--line)}
.sv-faq details{border-bottom:1px solid var(--line)}
.sv-faq summary{
  list-style:none;cursor:pointer;padding:22px 40px 22px 0;position:relative;
  font-family:var(--font-body);font-weight:600;font-size:1.05rem;color:var(--paper);
  transition:color .2s;
}
.sv-faq summary::-webkit-details-marker{display:none}
.sv-faq summary:hover{color:var(--signal)}
.sv-faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--signal);border-bottom:2px solid var(--signal);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease);
}
.sv-faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.sv-faq p{padding:0 0 24px;color:var(--concrete);max-width:68ch}

/* zona */
.sv-zone{
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(22px,3vw,32px);
}
.sv-zone h3{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--signal);margin:0 0 14px;font-weight:600}
.sv-zone p{color:var(--concrete);max-width:70ch}
.sv-zone strong{color:var(--paper);font-weight:600}

/* cta finale */
.sv-cta{
  background:var(--signal);border-radius:var(--radius);
  padding:clamp(32px,5vw,56px);text-align:center;margin-top:clamp(40px,6vw,64px);
}
.sv-cta h2{
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.8rem,4vw,2.8rem);line-height:1;color:#fff;margin:0 0 1rem;
}
.sv-cta p{color:rgba(255,255,255,.92);max-width:52ch;margin:0 auto 2rem}
.sv-cta__row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.btn--onorange{background:var(--ink);color:var(--paper)}
.btn--onorange:hover{background:#000;transform:translateY(-2px)}
.btn--onorange-ghost{color:#fff;border:1px solid rgba(255,255,255,.55)}
.btn--onorange-ghost:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}

/* altri servizi */
.sv-more{padding:clamp(44px,6vw,72px) 0;border-top:1px solid var(--line)}
.sv-more h2{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:1.5rem;color:var(--paper);margin:0 0 1.6rem;letter-spacing:.01em}
.sv-more__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:900px){.sv-more__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.sv-more__grid{grid-template-columns:1fr}}
.sv-more__grid a{
  display:block;padding:16px 18px;background:var(--ink-2);border:1px solid var(--line);
  border-radius:var(--radius);color:#d8d3ca;font-size:.95rem;
  transition:border-color .25s,color .25s,transform .25s var(--ease);
}
.sv-more__grid a:hover{border-color:var(--signal);color:var(--paper);transform:translateY(-3px)}