/* Coopyleft – pagina Servizi. Le fasi del metodo hanno il loro CSS (plugin "Homepage fasi progettuali"). */
.cl-sv{
  --cl-p-ink:#21242a; --cl-p-primary:#467ef7; --cl-p-coral:#ed7466; --cl-p-soft:#dceaff;
  --cl-sv-sfondo:#fafbfd;   /* SFONDO DELLA PAGINA (il grigino chiarissimo): cambia solo questo valore */
  /* Gerarchia tipografica del sito (theme.json): H1, H2, H3 non hanno misure qui, le decide il tema */
  --cl-t-sub:var(--wp--preset--font-size--subtitle,.75rem);
  --cl-t-p:var(--wp--preset--font-size--paragraph,1rem);
  --cl-t-h4:var(--wp--preset--font-size--h4,clamp(1.125rem,.971rem + .657vw,1.5625rem));
  --cl-t-h3:var(--wp--preset--font-size--h3,clamp(1.25rem,.898rem + 1.502vw,2.25rem));
  position:relative; isolation:isolate; color:var(--cl-p-ink); width:100%; font-size:var(--cl-t-p);
}
/* sfondo a tutta larghezza, anche se il contenuto sta in una colonna stretta */
.cl-sv::before{content:""; position:absolute; z-index:-1; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%); background:var(--cl-sv-sfondo)}
.cl-sv *,.cl-sv *::before,.cl-sv *::after{box-sizing:border-box}
.cl-sv p,.cl-sv h1,.cl-sv h2,.cl-sv h3,.cl-sv ul{margin:0}
.cl-sv ul{padding:0; list-style:none}
.cl-sv :focus-visible{outline:3px solid var(--cl-p-primary); outline-offset:3px}
.cl-sv .wp-block-buttons,.cl-sv .wp-block-button{margin:0}
.cl-sv__sez{margin-top:clamp(4.5rem,10vw,8rem); scroll-margin-top:1.5rem}

/* ---- testi comuni ---- */
/* H1, H2 e H3: la DIMENSIONE la decide il tema (theme.json); peso, interlinea e spaziatura sono quelli del design */
.cl-sv__h1,.cl-sv__h2,.cl-sv__h3,.cl-sv__risposta-n,.cl-sv__promessa-t{font-weight:800; letter-spacing:normal}
.cl-sv__h1{line-height:.98}
.cl-sv__h2{line-height:1.05}
.cl-sv__h3,.cl-sv__risposta-n,.cl-sv__promessa-t{line-height:1.1}
.cl-sv__sotto{max-width:34em; margin:.9rem 0 1.9rem !important; font-size:var(--cl-t-h4); color:#3b414b}
.cl-sv__eti{margin-bottom:.7rem !important; font-size:var(--cl-t-sub); font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#5b616b}
.cl-sv__testo{font-size:var(--cl-t-p); line-height:1.55; color:#3b414b}
.cl-sv__link{display:inline-flex; align-items:center; gap:.5rem; min-height:44px; padding:.6rem 0; font-size:var(--cl-t-p); font-weight:800; color:inherit; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px; background:none; border:0; cursor:pointer}
.cl-sv__link svg{transition:transform .2s ease}
.cl-sv__link:hover svg{transform:translateX(4px)}
.cl-sv__azioni{display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 1.5rem}

/* ---- hero ---- */
.cl-sv__hero{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2.5rem 3.5rem; padding-top:clamp(1rem,4vw,3rem)}
.cl-sv__hero-testo{flex:1 1 30rem; min-width:0}
.cl-sv__eyebrow{display:inline-block; margin-bottom:1.25rem !important; padding:.45rem .9rem; border-radius:999px; background:var(--cl-p-soft); color:#1f4fc4; font-size:var(--cl-t-sub); font-weight:700; letter-spacing:.08em; text-transform:uppercase}
.cl-sv__h1 span{color:var(--cl-p-primary)}
.cl-sv__lead{max-width:30em; margin:1.75rem 0 2.1rem !important; font-size:var(--cl-t-h4); color:#3b414b}
.cl-sv__anello{flex:0 1 26rem; min-width:0; display:grid; place-items:center; --cc-size:min(100%,26rem)}   /* l'anello e' quello della sezione clienti: [coopyleft_cerchio_testo] */

/* ---- da dove parti ---- */
.cl-sv__chips{display:flex; flex-wrap:wrap; gap:.75rem}
.cl-sv__chip{display:inline-flex; align-items:center; min-height:2.75rem; padding:.4rem 1.1rem; border:1.5px solid var(--cl-p-ink); border-radius:999px; background:#fff; color:var(--cl-p-ink); font:inherit; font-size:var(--cl-t-p); font-weight:700; line-height:1.2; text-align:left; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease}
.cl-sv__chip--fisso{cursor:default}
button.cl-sv__chip:hover{transform:translateY(-1px)}
.cl-sv__chip[aria-pressed="true"]{background:var(--cl-p-primary); color:#fff; box-shadow:0 4px 0 var(--cl-p-ink); transform:translateY(-2px)}
.cl-sv__risposte{margin-top:1.75rem}
.cl-sv__nessuna{font-size:var(--cl-t-p); color:#5b616b}
.cl-sv__risposta{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem 2.5rem; padding:clamp(1.5rem,4vw,2.5rem); background:#fff; border:1.5px solid var(--cl-p-ink); border-radius:2.5rem; animation:cl-sv-entra .45s ease both}
.cl-sv__risposta[hidden]{display:none}
.cl-sv__risposta-t{flex:1 1 26rem; min-width:0}
.cl-sv__risposta-d{max-width:32em; margin-top:.75rem !important; font-size:var(--cl-t-h4); color:#3b414b}
@keyframes cl-sv-entra{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}

/* ---- metodo (fasi della home) ---- */
.cl-sv__fasi{margin-top:.5rem}

/* ---- elenco servizi ---- */
.cl-sv__lista{display:flex; flex-direction:column; gap:1.5rem; margin-top:2.25rem}
.cl-sv__serv{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr)); gap:1.75rem 2.75rem; padding:clamp(1.4rem,3.4vw,2.5rem); background:#fff; border:1.5px solid var(--cl-p-ink); border-radius:2.5rem; scroll-margin-top:1.5rem; transition:box-shadow .45s ease, border-color .3s ease}
.cl-sv__serv.is-picked{border-color:var(--cl-p-primary); box-shadow:0 0 0 4px var(--cl-p-soft), 0 14px 34px -8px rgba(33,36,42,.16)}
.cl-sv__num{display:block; margin-bottom:.75rem; font-size:var(--cl-t-h3); font-weight:800; line-height:1; color:var(--cl-p-primary); font-variant-numeric:tabular-nums}
.cl-sv__h3{margin-bottom:.7rem !important}
.cl-sv__punti{display:flex; flex-direction:column; gap:.8rem}
.cl-sv__punti li{position:relative; padding-left:1.6rem; font-size:var(--cl-t-p)}
.cl-sv__punti li::before{content:""; position:absolute; left:0; top:.45rem; width:.7rem; height:.7rem; border-radius:50%; background:var(--cl-p-coral); border:1.5px solid var(--cl-p-ink)}
.cl-sv__col--prove{display:flex; flex-direction:column; gap:1.25rem}
.cl-sv__tags{display:flex; flex-wrap:wrap; gap:.5rem}
.cl-sv__tag{display:inline-block; padding:.28rem .75rem; border:1.5px solid #7d848f; border-radius:999px; font-size:var(--cl-t-sub); font-weight:700; letter-spacing:.02em; line-height:1.2; text-transform:uppercase; color:inherit; text-decoration:none}
.cl-sv__tag--prog{border-color:var(--cl-p-coral)}
a.cl-sv__tag:hover{background:var(--cl-p-soft)}
.cl-sv__link--fondo{margin-top:auto; align-self:flex-start}

/* ---- come funziona un preventivo ---- */
.cl-sv__prev{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr)); gap:1.25rem; margin:0 0 2rem; padding:0; list-style:none; counter-reset:none}
.cl-sv__prev-passo{padding:clamp(1.4rem,3vw,2.2rem); background:#fff; border:1.5px solid var(--cl-p-ink); border-radius:2.5rem}
.cl-sv__prev-n{display:block; margin-bottom:.75rem; font-size:var(--cl-t-h3); font-weight:800; line-height:1; color:var(--cl-p-primary)}
.cl-sv__prev-t{margin-bottom:.6rem !important; font-size:var(--cl-t-h4); font-weight:800; line-height:1.15}
.cl-sv__prev-passo p{font-size:var(--cl-t-p); line-height:1.55; color:#3b414b}
.cl-sv__costo{margin-bottom:1.25rem}

/* ---- cura continua + sociale ---- */
.cl-sv__due{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr)); gap:1.25rem}
.cl-sv__box{display:flex; flex-direction:column; gap:.9rem; padding:clamp(1.5rem,3.4vw,2.5rem); background:#fff; border:1.5px solid var(--cl-p-ink); border-radius:2.5rem}
.cl-sv__box .cl-sv__eti{margin-bottom:0 !important}
.cl-sv__box--sociale{background:#fff6f4; border-color:var(--cl-p-coral)}
.cl-sv__box--sociale .cl-sv__eti{color:#b4473b}

/* ---- promesse ---- */
.cl-sv__tre{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr)); gap:1.25rem; margin-top:2.25rem}
.cl-sv__promessa{padding:2rem 1.9rem; background:var(--cl-p-soft); border-radius:2.5rem}
.cl-sv__promessa p{margin-top:.8rem; line-height:1.55; font-size:var(--cl-t-p); color:#2b3038}

/* ---- chiusura con la griglia di sfondo (come in home: la classe .serv-griglia del tema la fa muovere) ---- */
.cl-sv__fine.serv-griglia{--cl-griglia-w:clamp(26rem,50vw,42rem); background-image:var(--cl-griglia); background-repeat:repeat; background-size:var(--cl-griglia-w) auto}
@media (max-width:781px){.cl-sv__fine.serv-griglia{--cl-griglia-w:26rem}}
.cl-sv__fine{margin-top:clamp(4.5rem,10vw,8rem); padding:clamp(2.75rem,7vw,5.5rem) 1.75rem; text-align:center; background-color:var(--cl-p-primary); color:#fff; border-radius:2.5rem}
/* trafiletto finale: stile originale, con le sue misure */
.cl-sv__fine-t{font-size:clamp(1.9rem,4vw,3.25rem); font-weight:800; line-height:1.08; letter-spacing:-.03em}
.cl-sv__fine-s{margin:1rem auto 2.1rem !important; max-width:28em; font-size:1.25rem; font-weight:700; line-height:1.5}

/* CTA a tondino con orbita */
.cl-sv__orb{display:inline-flex; align-items:center; gap:1.4rem; padding:.4rem .6rem .4rem .4rem; border-radius:999px; color:#fff; text-decoration:none}
.cl-sv__orb-anello{position:relative; display:block; flex:none; width:5.5rem; height:5.5rem}
.cl-sv__orb-anello::before{content:""; position:absolute; inset:0; border-radius:50%; border:1.5px dashed rgba(255,255,255,.65)}
.cl-sv__orb-giro{position:absolute; inset:0; display:block; animation:cl-sv-orbita 6s linear infinite}
.cl-sv__orb-giro i{position:absolute; top:-6px; left:50%; width:12px; height:12px; margin-left:-6px; border-radius:50%; background:var(--cl-p-soft)}
.cl-sv__orb-tondo{position:absolute; inset:.75rem; display:grid; place-items:center; border-radius:50%; background:var(--cl-p-coral); color:var(--cl-p-ink); transition:transform .3s cubic-bezier(.65,0,.35,1), box-shadow .2s ease}
.cl-sv__orb-testo{font-size:clamp(1.25rem,2.2vw,1.6rem); font-weight:800; letter-spacing:-.01em; text-decoration:underline; text-decoration-color:transparent; text-decoration-thickness:2px; text-underline-offset:6px; transition:text-decoration-color .2s ease}
.cl-sv__orb:active .cl-sv__orb-tondo,.cl-sv__orb:focus-visible .cl-sv__orb-tondo{transform:scale(1.18); box-shadow:0 4px 0 var(--cl-p-ink)}
.cl-sv__orb:active .cl-sv__orb-giro,.cl-sv__orb:focus-visible .cl-sv__orb-giro{animation-duration:2s}
.cl-sv__orb:active .cl-sv__orb-testo,.cl-sv__orb:focus-visible .cl-sv__orb-testo{text-decoration-color:#fff}
@media (hover:hover){
  .cl-sv__orb:hover .cl-sv__orb-tondo{transform:scale(1.18); box-shadow:0 4px 0 var(--cl-p-ink)}
  .cl-sv__orb:hover .cl-sv__orb-giro{animation-duration:2s}
  .cl-sv__orb:hover .cl-sv__orb-testo{text-decoration-color:#fff}
}
.cl-sv .cl-sv__orb:focus-visible{outline:3px solid #fff; outline-offset:6px}
@keyframes cl-sv-orbita{to{transform:rotate(360deg)}}

/* ---- comparsa allo scroll (solo con JS) ---- */
.cl-sv.is-js .cl-reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
.cl-sv.is-js .cl-reveal.is-in{opacity:1; transform:none}

@media (max-width:700px){
  .cl-sv__anello{flex-basis:100%; order:-1; --cc-size:min(100%,20rem)}
  .cl-sv__serv,.cl-sv__box,.cl-sv__risposta,.cl-sv__prev-passo{border-radius:2rem}
}
@media (prefers-reduced-motion:reduce){
  .cl-sv *{animation:none !important}
  .cl-sv.is-js .cl-reveal{opacity:1; transform:none; transition:none}
  .cl-sv__chip{transition:none}
}