/* ============================================================
   AXETTIA — pagina abbonamenti v0.1 (14.8.2026)
   Stili della SOLA pagina /abbonamenti/. stile.css non viene
   toccato: cosi' non serve rialzare il ?v= su tutte le altre
   pagine del sito per una pagina nuova.
   Palette e componenti di base restano quelli di stile.css
   (.btn, .carte, .feature-griglia, .flusso, .sigilli): qui ci
   sono solo i pezzi che prima non esistevano.

   ⚠️ Regola ereditata da stile.css v0.4: gli override di colore
   della card SCURA stanno DOPO le regole di base, perche' a
   parita' di specificita' vince l'ultimo dichiarato. Spostarli
   sopra rende titolo e testo navy su navy.
   ============================================================ */

/* ---------------- scelta della specializzazione ----------------
   Interruttore in solo CSS (radio nascosti + selettori di
   fratello): niente JavaScript, quindi funziona anche con la CSP
   del sito, che non ammette script inline. I radio DEVONO
   precedere .sp-etichette e .piani: il selettore ~ guarda solo
   in avanti. */
/* Qui i passi sono TRE, non i quattro della home. La regola sta nel foglio
   e non in uno `style=` inline: un inline batte qualunque media query, e a
   375 px teneva le tre colonne aperte facendo sbordare in orizzontale
   l'INTERA pagina — il documento andava a 430 px su una finestra di 375.
   Le soglie sono le stesse di stile.css; vanno ripetute perché `.flusso.tre`
   è più specifico di `.flusso` e vincerebbe comunque sulle sue. */
.flusso.tre{grid-template-columns:repeat(3,1fr)}
@media (max-width:960px){.flusso.tre{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.flusso.tre{grid-template-columns:1fr}}

/* Dichiarazione dell'account su cui nascerà la licenza: compare SOLO
   quando si arriva qui da dentro l'applicativo, con l'identità al
   seguito. Riempita da abbonamenti.js; in pagina l'elemento è vuoto e
   `hidden`, così senza JavaScript non lascia un riquadro spaiato. */
.identita{
  margin-top:32px;padding:16px 20px;border-radius:var(--r-md,10px);
  background:var(--oro-100);border:1px solid var(--oro-500);
  font-size:14.5px;line-height:1.65;color:var(--blu-900);max-width:78ch;
}
.identita b{font-weight:650}

.listino{margin-top:48px}
.sp-radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.sp-domanda{
  font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--oro-600);margin-bottom:14px;
}
.sp-etichette{display:flex;flex-wrap:wrap;gap:10px}
.sp-eti{
  display:inline-flex;align-items:center;gap:11px;background:var(--bianco);
  border:1px solid var(--bordo);border-radius:999px;padding:11px 24px;
  font-size:15px;color:var(--blu-800);cursor:pointer;
  transition:border-color .25s,background .25s,color .25s;
}
.sp-eti::before{
  content:"";width:11px;height:11px;border-radius:50%;flex:none;
  border:1.5px solid var(--blu-400);transition:border-color .25s,background .25s;
}
.sp-eti:hover{border-color:var(--oro-500)}
#sp-crisi:checked ~ .sp-etichette .sp-eti[for="sp-crisi"],
#sp-revisione:checked ~ .sp-etichette .sp-eti[for="sp-revisione"]{
  border-color:var(--oro-500);background:var(--oro-100);color:var(--blu-900);font-weight:650;
}
#sp-crisi:checked ~ .sp-etichette .sp-eti[for="sp-crisi"]::before,
#sp-revisione:checked ~ .sp-etichette .sp-eti[for="sp-revisione"]::before{
  border-color:var(--oro-600);background:var(--oro-600);box-shadow:inset 0 0 0 2px var(--oro-100);
}
/* l'anello di focus deve restare visibile: i radio sono nascosti,
   quindi lo porta l'etichetta */
#sp-crisi:focus-visible ~ .sp-etichette .sp-eti[for="sp-crisi"],
#sp-revisione:focus-visible ~ .sp-etichette .sp-eti[for="sp-revisione"]{
  outline:2px solid var(--blu-800);outline-offset:3px;
}
.sp-nota{margin-top:14px;font-size:13.5px;color:var(--grigio);max-width:76ch;line-height:1.7}
/* I due insiemi di pulsanti (e le note che li accompagnano) convivono nel
   markup: ne resta visibile uno solo, quello della specializzazione scelta.
   Senza CSS si vedono entrambi — degrado accettabile: nessuna informazione
   sparisce, i pulsanti dichiarano ciascuno la propria specializzazione. */
#sp-crisi:checked ~ .piani .per-revisione,
#sp-revisione:checked ~ .piani .per-crisi{display:none}

/* ---------------- i tre piani ---------------- */
.piani{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px;align-items:stretch}
.piano{
  position:relative;display:flex;flex-direction:column;background:var(--bianco);
  border:1px solid var(--bordo);border-radius:var(--r-lg);padding:36px 28px 30px;
  box-shadow:var(--ombra);transition:transform .3s,box-shadow .3s;
}
.piano:hover{transform:translateY(-4px);box-shadow:var(--ombra-alta)}
.piano-tag{
  position:absolute;top:-13px;left:28px;font-size:11.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;padding:6px 15px;border-radius:999px;
  background:var(--blu-100);color:var(--blu-800);
}
.piano h3{font-family:var(--serif);font-size:24px;color:var(--blu-900);margin-bottom:5px}
.piano-riga{font-size:13.5px;color:var(--grigio)}
.team-scelta{margin-top:22px}
.team-scelta-label{
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--blu-600);margin-bottom:9px;
}
.team-controllo{
  display:grid;grid-template-columns:38px 1fr 38px;align-items:center;
  min-height:40px;border:1px solid var(--bordo);border-radius:999px;
  background:var(--carta);overflow:hidden;
}
.team-controllo button{
  width:38px;height:38px;border:0;border-radius:50%;background:transparent;
  color:var(--blu-800);font:700 24px/1 var(--sans);cursor:pointer;
  transition:background .2s,color .2s,transform .2s;
}
.team-controllo button:hover:not(:disabled){
  background:var(--oro-500);color:var(--blu-900);transform:scale(.92);
}
.team-controllo button:focus-visible{outline:2px solid var(--blu-800);outline-offset:-2px}
.team-controllo button:disabled{color:var(--blu-400);opacity:.45;cursor:not-allowed}
.team-controllo output{
  text-align:center;font-family:var(--serif);font-size:20px;font-weight:700;
  color:var(--blu-900);font-variant-numeric:tabular-nums;
}
.piano-team .piano-prezzo{margin-top:20px}
.piano-prezzo{margin:24px 0 5px;display:flex;align-items:baseline;gap:5px;flex-wrap:wrap}
.pz-val{
  font-family:var(--serif);font-size:54px;font-weight:700;color:var(--blu-900);
  line-height:1;font-variant-numeric:tabular-nums;
}
.pz-eur{font-family:var(--serif);font-size:26px;font-weight:700;color:var(--blu-900)}
.pz-per{font-size:15px;color:var(--grigio);margin-left:2px}
.piano-iva{font-size:13px;color:var(--grigio);letter-spacing:.01em}
.piano-tot{
  margin-top:16px;padding:11px 15px;border-radius:var(--r-md);background:var(--carta);
  border:1px solid var(--bordo);font-size:13.5px;color:var(--blu-800);line-height:1.55;
}
.piano-tot b{color:var(--blu-900);font-weight:650}
.piano-elenco{list-style:none;margin:22px 0 0}
.piano-elenco li{
  position:relative;padding:10px 0 10px 27px;font-size:14.5px;color:var(--grigio);
  border-top:1px solid var(--blu-100);line-height:1.55;
}
/* spunta disegnata col bordo: nessuna risorsa esterna, nessun font di icone */
.piano-elenco li::before{
  content:"";position:absolute;left:3px;top:16px;width:11px;height:6px;
  border-left:2px solid var(--oro-500);border-bottom:2px solid var(--oro-500);
  transform:rotate(-45deg);
}
.piano-elenco li b{color:var(--blu-800);font-weight:650}
.piano-cta{margin-top:auto;padding-top:26px}
.piano-cta .btn{width:100%;justify-content:center}
.piano-nota{margin-top:11px;font-size:12.5px;color:var(--grigio);text-align:center;line-height:1.5}

/* la card evidenziata (annuale): stessa scocca, fondo navy.
   ⚠️ tutti gli override di colore DEVONO restare qui sotto. */
.piano.evidenza{
  background:linear-gradient(150deg,var(--blu-800) 0%,var(--blu-900) 75%);
  border-color:var(--blu-800);box-shadow:var(--ombra-alta);
}
.piano.evidenza .piano-tag{background:var(--oro-500);color:var(--blu-900)}
.piano.evidenza h3{color:#fff}
.piano.evidenza .piano-riga{color:rgba(231,236,242,.72)}
.piano.evidenza .pz-val,.piano.evidenza .pz-eur{color:var(--oro-500)}
.piano.evidenza .pz-per,.piano.evidenza .piano-iva{color:rgba(231,236,242,.72)}
.piano.evidenza .piano-tot{
  background:rgba(208,173,83,.12);border-color:rgba(208,173,83,.45);color:rgba(231,236,242,.9);
}
.piano.evidenza .piano-tot b{color:var(--oro-500)}
.piano.evidenza .piano-elenco li{color:rgba(231,236,242,.8);border-top-color:rgba(90,120,150,.35)}
.piano.evidenza .piano-nota{color:rgba(231,236,242,.62)}

/* note in coda al listino */
.listino-note{
  margin-top:30px;padding-top:22px;border-top:1px solid var(--bordo);
  font-size:13.5px;color:var(--grigio);line-height:1.8;max-width:82ch;
}
.listino-note b{color:var(--blu-900);font-weight:650}
.listino-note a{color:var(--oro-600)}
.listino-note p+p{margin-top:10px}

/* ---------------- checkout B2B Italia ----------------
   Il modulo riprende il contrasto editoriale del listino: carta chiara,
   testata netta e riepilogo navy. Il dialog nativo conserva focus, Escape e
   semantica senza introdurre una libreria nel sito statico. */
.checkout-esito{
  margin-top:20px;padding:15px 19px;border:1px solid var(--oro-500);
  border-radius:var(--r-md);background:var(--oro-100);color:var(--blu-900);
  font-size:14.5px;line-height:1.6;max-width:78ch;
}
.checkout-dialogo{
  width:min(760px,calc(100vw - 32px));max-height:min(900px,calc(100vh - 32px));
  margin:auto;padding:0;border:1px solid var(--blu-200);border-radius:18px;
  background:var(--carta);color:var(--blu-900);box-shadow:0 28px 90px rgba(8,28,48,.38);
  overflow:auto;
}
.checkout-dialogo::backdrop{background:rgba(7,25,43,.72);backdrop-filter:blur(4px)}
.checkout-testata{
  display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  padding:30px 32px 22px;border-bottom:1px solid var(--bordo);background:var(--bianco);
}
.checkout-kicker{
  margin-bottom:7px;color:var(--oro-600);font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
}
.checkout-testata h2{font-family:var(--serif);font-size:30px;line-height:1.15;color:var(--blu-900)}
.checkout-chiudi{
  flex:none;width:38px;height:38px;border:1px solid var(--bordo);border-radius:50%;
  background:var(--carta);color:var(--blu-800);font:300 27px/1 var(--sans);
  cursor:pointer;transition:background .2s,border-color .2s;
}
.checkout-chiudi:hover{background:var(--oro-100);border-color:var(--oro-500)}
.checkout-chiudi:focus-visible{outline:2px solid var(--blu-800);outline-offset:3px}
.checkout-intro{padding:20px 32px 0;color:var(--grigio);font-size:14px;line-height:1.65}
.checkout-ordine{
  display:grid;grid-template-columns:1fr auto;gap:4px 18px;align-items:end;
  margin:18px 32px 4px;padding:17px 20px;border-radius:var(--r-md);
  background:var(--blu-900);color:#fff;
}
.checkout-ordine span{font-size:14px;font-weight:650}
.checkout-ordine b{grid-row:1 / span 2;grid-column:2;font-family:var(--serif);font-size:21px;color:var(--oro-500)}
.checkout-ordine small{font-size:12px;color:rgba(255,255,255,.68)}
.checkout-dialogo form{padding:8px 32px 32px}
.checkout-dialogo fieldset{margin:20px 0 0;padding:0;border:0}
.checkout-dialogo legend{
  width:100%;padding:0 0 9px;border-bottom:1px solid var(--bordo);color:var(--blu-800);
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.checkout-griglia{display:grid;grid-template-columns:1fr 1fr;gap:15px 18px;margin-top:15px}
.checkout-campo{display:grid;gap:7px;color:var(--blu-800);font-size:12.5px;font-weight:650}
.checkout-campo input{
  width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--bordo);
  border-radius:8px;background:#fff;color:var(--blu-900);font:400 15px/1.3 var(--sans);
  transition:border-color .2s,box-shadow .2s;
}
.checkout-campo input:focus{outline:0;border-color:var(--oro-600);box-shadow:0 0 0 3px rgba(208,173,83,.18)}
.checkout-campo input[readonly]{background:#eef1f4;color:var(--blu-700);cursor:not-allowed}
.checkout-intero{grid-column:1 / -1}
.checkout-indirizzo{grid-template-columns:100px 1fr 100px}
.checkout-indirizzo .checkout-intero{grid-column:1 / -1}
.checkout-consensi{display:grid;gap:11px;margin-top:22px;padding-top:18px;border-top:1px solid var(--bordo)}
.checkout-consensi label{display:flex;align-items:flex-start;gap:10px;color:var(--grigio);font-size:13px;line-height:1.55}
.checkout-consensi input{flex:none;margin-top:3px;accent-color:var(--blu-800)}
.checkout-consensi a{color:var(--oro-600);text-decoration:underline;text-underline-offset:2px}
.checkout-errore{
  margin-top:17px;padding:12px 14px;border-left:3px solid #a8382f;background:#fff2f0;
  color:#76251f;font-size:13.5px;line-height:1.55;
}
.checkout-azioni{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.checkout-azioni .btn{border:0;cursor:pointer}
.checkout-azioni .checkout-annulla{border:1px solid var(--bordo);background:transparent;color:var(--blu-800)}
.checkout-azioni [disabled]{opacity:.6;cursor:wait}

/* ---------------- due colonne "che cosa comprende" ---------------- */
.carte.due{grid-template-columns:1fr 1fr}
.carta-piede{
  margin-top:18px;display:inline-flex;align-items:center;gap:9px;
  color:var(--oro-600);font-weight:650;font-size:14.5px;
}
.carta-piede:hover .freccia{transform:translateX(4px)}

/* ---------------- domande frequenti ---------------- */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:8px 44px;margin-top:50px}
.faq-voce{border-top:1px solid var(--bordo);padding:22px 0 4px}
.faq-q{font-family:var(--serif);font-size:18.5px;color:var(--blu-900);margin-bottom:9px;line-height:1.35}
.faq-a{font-size:14.5px;color:var(--grigio);line-height:1.7}
.faq-a a{color:var(--oro-600)}

/* ---------------- responsive ---------------- */
@media (max-width:960px){
  .piani{grid-template-columns:1fr}
  .piano{padding:34px 24px 28px}
  .carte.due,.faq{grid-template-columns:1fr}
  .listino{margin-top:36px}
}
@media (max-width:640px){
  .checkout-dialogo{width:calc(100vw - 16px);max-height:calc(100vh - 16px);border-radius:13px}
  .checkout-testata{padding:24px 20px 18px}
  .checkout-testata h2{font-size:25px}
  .checkout-intro{padding:17px 20px 0}
  .checkout-ordine{grid-template-columns:1fr;margin:16px 20px 2px}
  .checkout-ordine b{grid-row:auto;grid-column:auto;font-size:20px}
  .checkout-dialogo form{padding:6px 20px 24px}
  .checkout-griglia,.checkout-indirizzo{grid-template-columns:1fr}
  .checkout-intero,.checkout-indirizzo .checkout-intero{grid-column:auto}
  .checkout-azioni{flex-direction:column-reverse}
  .checkout-azioni .btn{width:100%;justify-content:center}
}