/* =============================================================
   PAGINE-SERVIZIO (SEO/AI landing) — Loredana & Alessandro
   Coerenti con styles.css (stesse variabili, font, palette).
   Contenuto leggibile SENZA JavaScript (FAQ con <details>).
   ============================================================= */

.sp-skip{position:absolute;left:-999px}

/* ---------- Header ---------- */
.sp-header{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(14px,2vw,20px) var(--gut);
  background:rgba(250,248,244,.9);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line-soft);
}
.sp-header .logo{display:flex;flex-direction:column;line-height:1;letter-spacing:.02em;color:var(--ink)}
.sp-header .l-name{font-family:var(--serif);font-size:clamp(1.1rem,2.2vw,1.4rem);font-weight:500;white-space:nowrap}
.sp-header .l-sub{font-size:.54rem;letter-spacing:.4em;text-transform:uppercase;margin-top:.45em;opacity:.8}
.sp-nav{display:none;gap:clamp(18px,2.4vw,36px);align-items:center}
.sp-nav a{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);opacity:.85;transition:opacity .3s}
.sp-nav a:hover{opacity:1}
.sp-header .btn{padding:.85em 1.5em;font-size:.7rem}
@media(min-width:860px){.sp-nav{display:flex}}

/* ---------- Hero ---------- */
.sp-hero{
  position:relative;overflow:hidden;color:var(--paper);
  min-height:clamp(440px,72vh,680px);
  display:flex;align-items:flex-end;
  padding:var(--gut);padding-bottom:clamp(40px,6vw,72px);
}
.sp-hero img.sp-hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.sp-hero .sp-hero-overlay{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(12,11,10,.5) 0%,rgba(12,11,10,.2) 38%,rgba(12,11,10,.72) 100%)}
.sp-hero-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;width:100%}
.sp-hero .eyebrow{color:rgba(250,248,244,.85)}
.sp-hero h1{
  font-family:var(--serif);font-weight:300;letter-spacing:-.02em;line-height:.95;
  font-size:clamp(2.5rem,7.5vw,5.4rem);margin:.4em 0 .35em;text-wrap:balance;
}
.sp-hero h1 em{font-style:italic;color:var(--taupe)}
.sp-hero-lead{max-width:52ch;font-size:clamp(1.02rem,1.5vw,1.2rem);color:rgba(250,248,244,.92);font-weight:300}
.sp-hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(24px,3vw,34px)}

/* ---------- Sezioni ---------- */
.sp-section{padding:clamp(56px,9vw,120px) var(--gut)}
.sp-section.alt{background:var(--white)}
.sp-wrap{max-width:var(--maxw);margin:0 auto}
.sp-narrow{max-width:760px}
.sp-eyebrow{color:var(--taupe-deep)}
.sp-h2{font-family:var(--serif);font-weight:300;line-height:1.02;letter-spacing:-.01em;
  font-size:clamp(2rem,5vw,3.4rem);margin:.4em 0 .7em;text-wrap:balance}
.sp-body{color:var(--ink-soft);font-size:clamp(1.02rem,1.4vw,1.15rem);line-height:1.8}
.sp-body p{margin-bottom:1.1em;max-width:64ch}
.sp-body strong{color:var(--ink);font-weight:500}

/* intro a due colonne */
.sp-split{display:grid;grid-template-columns:1fr;gap:clamp(34px,5vw,64px);align-items:center}
.sp-split .sp-figure{border-radius:3px;overflow:hidden;border:1px solid var(--line)}
.sp-split .sp-figure img,.sp-split .sp-figure .ph{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
@media(min-width:860px){
  .sp-split{grid-template-columns:1.05fr .95fr}
  .sp-split.flip .sp-figure{order:-1}
}

/* lista "cosa comprende" */
.sp-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);margin-top:clamp(28px,4vw,44px)}
.sp-card{background:var(--paper);padding:clamp(24px,3vw,36px);display:grid;gap:12px}
.sp-section.alt .sp-card{background:var(--white)}
.sp-card .sp-num{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe-deep)}
.sp-card h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:1.1}
.sp-card p{color:var(--ink-soft);font-size:.97rem;line-height:1.65;max-width:46ch}
@media(min-width:760px){.sp-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.sp-grid.cols-3{grid-template-columns:repeat(3,1fr)}}

/* banda consulenza gratuita (scura) */
.sp-band{background:var(--ink);color:var(--paper)}
.sp-band .sp-eyebrow{color:var(--taupe)}
.sp-band .sp-h2{color:var(--paper)}
.sp-band .sp-body{color:rgba(250,248,244,.86)}
.sp-band .sp-body strong{color:var(--paper)}
.sp-band .sp-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(24px,3vw,34px)}
.sp-pricepill{display:inline-block;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--taupe);border:1px solid rgba(184,175,166,.4);border-radius:100px;padding:.7em 1.3em;margin-bottom:1.4em}

/* FAQ statiche (details/summary, niente JS) */
.sp-faq{max-width:820px;margin:clamp(28px,4vw,40px) auto 0;border-top:1px solid var(--line)}
.sp-faq details{border-bottom:1px solid var(--line)}
.sp-faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:clamp(20px,3vw,28px) 4px;font-family:var(--serif);font-weight:400;color:var(--ink);
  font-size:clamp(1.15rem,2.2vw,1.6rem);line-height:1.2;
}
.sp-faq summary::-webkit-details-marker{display:none}
.sp-faq summary::after{content:"+";font-family:var(--sans);font-size:1.4rem;font-weight:300;color:var(--taupe-deep);transition:transform .35s var(--ease)}
.sp-faq details[open] summary::after{transform:rotate(45deg)}
.sp-faq .sp-faq-a{padding:0 4px clamp(20px,3vw,26px);color:var(--ink-soft);max-width:64ch;font-size:1rem;line-height:1.7}

/* link ad altre specializzazioni */
.sp-links{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);margin-top:clamp(28px,4vw,44px)}
.sp-link{background:var(--paper);padding:clamp(22px,2.6vw,30px);display:flex;align-items:center;
  justify-content:space-between;gap:18px;transition:.4s var(--ease)}
.sp-link:hover{background:var(--white)}
.sp-link span{font-family:var(--serif);font-size:clamp(1.2rem,2.2vw,1.6rem)}
.sp-link .sp-arrow{font-size:1rem;color:var(--taupe-deep);transition:transform .4s var(--ease)}
.sp-link:hover .sp-arrow{transform:translateX(6px)}
@media(min-width:760px){.sp-links{grid-template-columns:repeat(2,1fr)}}

/* footer */
.sp-footer{background:var(--ink);color:var(--paper);padding:clamp(48px,7vw,84px) var(--gut) clamp(28px,4vw,38px)}
.sp-footer-top{display:grid;grid-template-columns:1fr;gap:clamp(30px,5vw,48px);
  padding-bottom:clamp(34px,5vw,52px);border-bottom:1px solid rgba(250,248,244,.14)}
.sp-footer .f-logo{font-family:var(--serif);font-size:clamp(1.8rem,5vw,2.6rem);font-weight:300;line-height:1}
.sp-footer .f-logo span{display:block;font-size:.58rem;font-family:var(--sans);letter-spacing:.42em;text-transform:uppercase;margin-top:.8em;opacity:.8}
.sp-footer-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.sp-footer h4{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--taupe);margin-bottom:1.1em;font-weight:400}
.sp-footer a,.sp-footer p{display:block;font-size:.9rem;color:rgba(250,248,244,.78);margin-bottom:.6em;transition:color .3s}
.sp-footer a:hover{color:var(--paper)}
.sp-footer-legal{padding-top:clamp(24px,3vw,32px);margin-top:clamp(22px,3vw,30px);
  border-top:1px solid rgba(250,248,244,.14);font-size:.72rem;line-height:1.7;color:rgba(250,248,244,.55);max-width:880px}
.sp-footer-bottom{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;
  padding-top:clamp(22px,3vw,30px);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(250,248,244,.5)}
@media(min-width:860px){
  .sp-footer-top{grid-template-columns:1.4fr 1fr}
  .sp-footer-cols{grid-template-columns:repeat(3,1fr)}
}

/* WhatsApp flottante (riusa .wa-float di styles.css) */