/* ============================================================
   Servizi e prezzi.
   Tre carte, non cinque: davanti a cinque opzioni si rimanda,
   davanti a tre si sceglie. Il resto sta sotto, piu' piccolo.
   ============================================================ */

#pg-servizi{
  --vio:#9463F5; --vio2:#A855F7; --vio-deep:#6D3BEB;
  --teal:#4FE3C1;
  --bg:#08060F; --card:#141026; --card2:#1A1533;
  --testo:#F4F2FB; --muto:#A49CC0; --muto2:#726A90;
  --filo:rgba(255,255,255,.09); --filo-v:rgba(148,99,245,.32);
  background:var(--bg); color:var(--testo);
  font-family:'Inter',-apple-system,sans-serif; line-height:1.62;
  padding-bottom:24px;
}
#pg-servizi *{box-sizing:border-box}
#pg-servizi h1,#pg-servizi h2,#pg-servizi h3{font-family:'Sora',sans-serif;letter-spacing:-.025em;line-height:1.12}

#pg-servizi .sv-kick{
  display:inline-block;font-family:'Sora',sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--vio2);margin-bottom:16px;
}
/* Hero corta apposta: la decisione (le tre card) deve entrare nello
   schermo il prima possibile, non restare sotto un manifesto. */
#pg-servizi .sv-hero{max-width:640px;margin:0 auto;padding:64px 26px 32px;text-align:center}
#pg-servizi .sv-hero h1{font-size:clamp(30px,4.8vw,46px);font-weight:700;margin-bottom:14px}
#pg-servizi .sv-hero p{color:var(--muto);font-size:16.5px;max-width:56ch;margin:0 auto}
#pg-servizi .sv-nota{font-size:14px;color:var(--muto2);border-top:1px solid var(--filo);padding-top:16px;margin-top:20px}

#pg-servizi .sv-sez{max-width:1080px;margin:0 auto;padding:40px 26px}
#pg-servizi .sv-sez h2{font-size:clamp(23px,3.2vw,31px);font-weight:600;margin-bottom:8px}
#pg-servizi .sv-dek{color:var(--muto);font-size:15.5px;margin-bottom:24px;max-width:60ch}

/* ---- le tre carte ---- */
/* align-items:stretch (il default): le tre card devono avere la
   stessa altezza, non fermarsi al contenuto proprio — altrimenti il
   199 e il 699 sembrano testo appoggiato accanto al 449. */
#pg-servizi .sv-griglia{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
/* Quattro percorsi: su schermo largo stanno in fila, sotto i 1180
   vanno a due per riga invece di stringersi fino a diventare colonne
   di parole singole. */
#pg-servizi .sv-griglia-4{grid-template-columns:repeat(4,1fr);gap:13px}
@media(max-width:1180px){#pg-servizi .sv-griglia-4{grid-template-columns:repeat(2,1fr);gap:16px}}

/* La riga che spiega la scala: senza, quattro colonne sembrano
   quattro alternative invece di quattro gradini. */
#pg-servizi .sv-scala{margin-top:18px;text-align:center;font-size:14px;color:var(--muto)}

/* Cosa NON c'e'. Dirlo evita la domanda dopo, e un percorso che
   dichiara i suoi limiti si crede di piu'. */
#pg-servizi .sv-senza{
  font-size:13px;color:var(--muto2);line-height:1.5;margin:0 0 16px;
  padding-top:12px;border-top:1px dashed var(--filo);
}

/* La spiegazione lunga di un modulo, quando serve. */
#pg-servizi .sv-m-x{font-size:12.5px;color:var(--muto2);line-height:1.5;margin-top:4px}

/* Tempi di consegna */
#pg-servizi .sv-tempi{max-width:720px}
#pg-servizi .sv-tempi p{color:var(--muto);font-size:15px;line-height:1.6;margin-bottom:10px}
#pg-servizi .sv-c{
  position:relative;display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--filo);border-radius:20px;
  padding:30px 26px;
}
/* Quella in evidenza e' piu' alta e ha il bordo viola: l'occhio ci
   va prima, ed e' anche quella che vale di piu' per voi. */
#pg-servizi .sv-c-top{
  border-color:var(--filo-v);background:var(--card2);
  box-shadow:0 20px 60px -22px rgba(124,58,237,.55);
}
#pg-servizi .sv-tag{
  position:absolute;top:-11px;left:26px;
  font-family:'Sora',sans-serif;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#0B0717;background:var(--teal);
  padding:4px 12px;border-radius:999px;
}
#pg-servizi .sv-c-top .sv-tag{background:linear-gradient(135deg,var(--vio),var(--vio2));color:#fff}
#pg-servizi .sv-c h3{font-size:21px;font-weight:600;margin-bottom:6px}
#pg-servizi .sv-som{color:var(--muto);font-size:14.5px;margin-bottom:18px;min-height:44px}
#pg-servizi .sv-pr{font-family:'Sora',sans-serif;font-size:15px;margin-bottom:20px}
#pg-servizi .sv-pr b{font-size:34px;font-weight:700}
#pg-servizi .sv-old{color:var(--muto2);text-decoration:line-through;margin-right:7px;font-size:16px}

#pg-servizi .sv-d{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:9px;flex:1}
#pg-servizi .sv-d li{position:relative;padding-left:25px;font-size:14px;color:var(--muto);line-height:1.5}
#pg-servizi .sv-d li::before{content:'✓';position:absolute;left:0;top:-1px;color:var(--teal);font-weight:700}
/* Il tasto resta sempre in fondo alla card, qualunque sia la
   lunghezza del testo sopra: le tre card sono alte uguali (stretch sul
   grid), ma il contenuto no. */
#pg-servizi .sv-c > .sv-go{margin-top:auto}

#pg-servizi .sv-go{
  display:block;text-align:center;text-decoration:none;
  font-family:'Sora',sans-serif;font-weight:600;font-size:15px;
  color:var(--testo);background:rgba(255,255,255,.05);
  border:1px solid var(--filo);border-radius:12px;padding:14px;
  transition:border-color .16s,background .16s,transform .14s;
}
#pg-servizi .sv-go:hover{border-color:var(--vio);background:rgba(148,99,245,.12);transform:translateY(-1px)}
#pg-servizi .sv-go-top{
  color:#fff;border:0;background:linear-gradient(135deg,var(--vio-deep),var(--vio2));
  box-shadow:0 8px 24px rgba(124,58,237,.42);
}
#pg-servizi .sv-go-top:hover{filter:brightness(1.08);background:linear-gradient(135deg,var(--vio-deep),var(--vio2))}

/* ---- i servizi singoli ---- */
#pg-servizi .sv-mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px}
#pg-servizi .sv-m{
  display:grid;gap:5px;background:var(--card);border:1px solid var(--filo);
  border-radius:14px;padding:18px 20px;text-decoration:none;color:inherit;
  transition:border-color .16s,transform .16s;
}
#pg-servizi .sv-m:hover{border-color:var(--vio);transform:translateY(-2px)}
#pg-servizi .sv-m-t{font-family:'Sora',sans-serif;font-weight:600;font-size:15.5px}
#pg-servizi .sv-m-d{font-size:13px;color:var(--muto);line-height:1.45}
#pg-servizi .sv-m-p{font-family:'Sora',sans-serif;font-size:13px;color:var(--muto);margin-top:4px}
#pg-servizi .sv-m-p b{font-size:19px;color:var(--testo);font-weight:700}

/* ---- le obiezioni ---- */
#pg-servizi .sv-ob-l{display:grid;gap:9px;max-width:780px}
#pg-servizi .sv-q{background:var(--card);border:1px solid var(--filo);border-radius:14px;padding:16px 20px}
#pg-servizi .sv-q[open]{border-color:var(--filo-v)}
#pg-servizi .sv-q summary{
  font-family:'Sora',sans-serif;font-weight:600;font-size:16px;cursor:pointer;list-style:none;
}
#pg-servizi .sv-q summary::-webkit-details-marker{display:none}
#pg-servizi .sv-q summary::before{content:'+';color:var(--vio2);margin-right:10px;font-weight:700}
#pg-servizi .sv-q[open] summary::before{content:'–'}
#pg-servizi .sv-q p{color:var(--muto);font-size:15px;margin-top:10px;padding-left:22px;line-height:1.6}

/* ---- chiusura ---- */
#pg-servizi .sv-fine{text-align:center;max-width:640px}
#pg-servizi .sv-fine p{color:var(--muto);margin-bottom:22px}
#pg-servizi .sv-fine .sv-go{display:inline-block;padding:15px 32px}

@media(max-width:920px){
  #pg-servizi .sv-griglia{grid-template-columns:1fr;gap:20px}
  #pg-servizi .sv-som{min-height:0}
  #pg-servizi .sv-hero{padding:92px 22px 36px}
  #pg-servizi .sv-sez{padding:32px 22px}
}
@media(prefers-reduced-motion:reduce){
  #pg-servizi .sv-go,#pg-servizi .sv-m{transition:none}
}

/* ============================================================
   LA TABELLA DEI PERCORSI
   Su schermo largo: quattro colonne e tutte le righe, cosi' la scala
   si legge in orizzontale. Su telefono: una colonna alla volta,
   scelta con i tasti in cima.
   ============================================================ */

#pg-servizi .sv-scelta{display:none}

/* Separa il confronto dalle card senza bisogno di una frase che lo
   introduca: il bordo e lo spazio sopra bastano a dire "qui inizia
   un'altra cosa". */
#pg-servizi .sv-tab-wrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin-top:44px;padding-top:28px;border-top:1px solid var(--filo);
}
#pg-servizi .sv-tab{width:100%;border-collapse:collapse;text-align:left}
#pg-servizi .sv-tab th,#pg-servizi .sv-tab td{vertical-align:top}

/* L'intestazione: solo per capire quale colonna è quale mentre si
   scorre — le card sopra hanno già fatto la vendita, qui basta
   un'etichetta compatta, non un secondo blocco prezzo. */
#pg-servizi .sv-tab thead th{
  position:sticky;top:0;z-index:3;
  background:var(--bg);padding:10px 14px;width:27%;
  border-bottom:1px solid var(--filo);
}
#pg-servizi .sv-tab thead th.top{background:var(--card2);border-radius:10px 10px 0 0}
#pg-servizi .sv-n{font-family:'Sora',sans-serif;font-size:13px;font-weight:600;color:var(--testo)}
#pg-servizi .sv-p{font-family:'Sora',sans-serif;font-size:12.5px;font-weight:600;color:var(--muto);margin-left:6px}

/* I gruppi di righe: danno respiro e dicono di cosa si parla. */
#pg-servizi .sv-gruppo th{
  padding:26px 0 8px;font-family:'Sora',sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--vio2);
  border-bottom:1px solid var(--filo);
}
#pg-servizi .sv-tab tbody tr:not(.sv-gruppo):not(.sv-az) th,
#pg-servizi .sv-tab tbody tr:not(.sv-gruppo):not(.sv-az) td{
  padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.05);font-size:14px;font-weight:400;
}
#pg-servizi .sv-tab tbody th{color:var(--testo);line-height:1.45}
#pg-servizi .sv-tab td{text-align:center;color:var(--muto)}
#pg-servizi .sv-tab td.si{color:var(--teal);font-size:16px}
/* "Non incluso": testo, non simbolo, ma il più leggero della tabella —
   deve leggersi dopo le spunte e i numeri, non alla pari. */
#pg-servizi .sv-tab td.no{color:var(--muto2);opacity:.55;font-size:11.5px;letter-spacing:.01em}
#pg-servizi .sv-tab td b{color:var(--testo);font-family:'Sora',sans-serif}
/* Extra (credential, ebook...): utili, ma non la ragione per cui si
   sceglie un piano piuttosto che un altro. Restano in tabella, ma
   pesano meno all'occhio delle voci sopra. */
#pg-servizi .sv-tab tr.sv-riga-extra th,
#pg-servizi .sv-tab tr.sv-riga-extra td{font-size:12.5px;opacity:.7}
/* La colonna del percorso evidenziato (dal catalogo, non un id fisso):
   ogni cella marcata "sv-col-top" prende lo stesso leggero sfondo
   viola della sua intestazione, per farla seguire con l'occhio scorrendo. */
#pg-servizi .sv-tab tbody td.sv-col-top{background:rgba(148,99,245,.06)}

/* "In ogni percorso": le feature identiche sui tre piani, dette una
   volta sola invece di ripetute in ogni colonna. */
#pg-servizi .sv-comuni-r th{color:var(--muto)!important;font-size:13px!important;vertical-align:top!important}
#pg-servizi .sv-comuni-c{text-align:left!important;padding:14px 14px!important}
#pg-servizi .sv-comune{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;color:var(--muto);margin:0 16px 6px 0;
}
#pg-servizi .sv-comune::before{content:'✓';color:var(--teal);font-weight:700}

#pg-servizi .sv-chi-r th{color:var(--muto)!important;font-size:13px!important}
#pg-servizi .sv-chi-c{text-align:left!important;font-size:12.5px!important;color:var(--muto)!important;line-height:1.5}
#pg-servizi .sv-az td{padding:18px 10px 0}
#pg-servizi .sv-az .sv-go{padding:12px 10px;font-size:14px}

/* Il punto interrogativo: la spiegazione sta accanto alla voce e si
   apre al passaggio. Sempre visibile allungherebbe la tabella di tre
   volte, e nessuno la leggerebbe comunque. */
#pg-servizi .sv-voce{position:relative;display:inline}
#pg-servizi .sv-i{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;margin-left:6px;vertical-align:1px;
  background:rgba(255,255,255,.08);border:0;color:var(--muto);
  font-family:'Inter',sans-serif;font-size:10.5px;font-weight:700;cursor:pointer;padding:0;
}
#pg-servizi .sv-i:hover{background:var(--vio);color:#fff}
#pg-servizi .sv-bolla{
  position:absolute;left:0;top:26px;z-index:8;width:min(320px,74vw);
  background:var(--card2);color:var(--testo);border:1px solid var(--filo-v);
  font-size:13px;line-height:1.55;padding:13px 15px;border-radius:12px;
  box-shadow:0 14px 40px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .16s,transform .16s,visibility .16s;
}
#pg-servizi .sv-voce:hover .sv-bolla,#pg-servizi .sv-i:focus + .sv-bolla{
  opacity:1;visibility:visible;transform:translateY(0);
}

#pg-servizi .sv-scala{margin-top:22px;text-align:center;font-size:14px;color:var(--muto)}

/* ---- i moduli ---- */
#pg-servizi .sv-m{display:flex;flex-direction:column;gap:6px}
#pg-servizi .sv-m-t{position:relative}
#pg-servizi .sv-m-n{font-size:12.5px;color:var(--muto2);line-height:1.5}
#pg-servizi .sv-m-p{margin-top:auto;padding-top:8px}
#pg-servizi .sv-m-go{
  display:block;text-align:center;text-decoration:none;margin-top:10px;
  font-family:'Sora',sans-serif;font-weight:600;font-size:13.5px;color:var(--testo);
  background:rgba(255,255,255,.05);border:1px solid var(--filo);border-radius:10px;padding:10px;
  transition:border-color .16s,background .16s;
}
#pg-servizi .sv-m-go:hover{border-color:var(--vio);background:rgba(148,99,245,.12)}

/* ---- le domande ---- */
#pg-servizi .sv-q div{color:var(--muto);font-size:15px;margin-top:10px;padding-left:22px;line-height:1.65}
#pg-servizi .sv-q a{color:var(--vio2);text-decoration:underline;text-underline-offset:3px}
#pg-servizi .sv-q b{color:var(--testo)}

/* ============================================================
   TELEFONO: un percorso alla volta.
   ============================================================ */
@media(max-width:900px){
  #pg-servizi .sv-scelta{
    display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:22px;
  }
  #pg-servizi .sv-t{
    display:grid;gap:2px;padding:10px 8px;cursor:pointer;text-align:left;
    background:var(--card);border:1px solid var(--filo);border-radius:13px;
    font-family:'Inter',sans-serif;color:var(--muto);
  }
  #pg-servizi .sv-t b{font-family:'Sora',sans-serif;font-size:12.5px;font-weight:600;color:var(--testo);line-height:1.25}
  #pg-servizi .sv-t em{font-style:normal;font-family:'Sora',sans-serif;font-size:17px;font-weight:700}
  #pg-servizi .sv-t.on{border-color:var(--vio);background:var(--card2);box-shadow:0 0 0 3px rgba(148,99,245,.18)}
  #pg-servizi .sv-t.on em{color:var(--vio2)}

  #pg-servizi [data-p].fuori{display:none}
  /* I tasti sopra già dicono nome e prezzo: un secondo header qui
     sotto ripeterebbe la stessa informazione due volte di fila. */
  #pg-servizi .sv-tab thead{display:none}
  #pg-servizi .sv-tab td{text-align:right}
  #pg-servizi .sv-tab tbody th{width:auto}
  #pg-servizi .sv-bolla{left:auto;right:0}
}