/* ============================================================
   UpZid V6 · il carattere nel sito pubblico
   Si carica dopo sito.css, zid.css e carattere.css.
   Stesso mondo della pagina del percorso: fondo chiaro, tessere
   morbide, titoli in Petrona, passi numerati sul filo tratteggiato,
   un solo campo arancio pieno (l'iscrizione alla lista).
   Solo CSS: struttura, testi e script del sito restano quelli della V5 2.
   ============================================================ */


/* ---------- barra: piena, senza vetro ---------- */
.nav-sito{background:var(--bg);backdrop-filter:none;border-bottom:1px solid var(--ln);}
.nav-voci a{font-size:14px;}

/* ---------- titoli con voce ---------- */
.hero-testo h1,
.sezione-testa h2,
.zid-parole h2,
.zona--lista h2{
  font-family:var(--serif);font-weight:450;letter-spacing:-.015em;text-wrap:balance;
}
.hero-testo h1{font-size:54px;line-height:1.04;max-width:16ch;}
.sezione-testa h2,.zid-parole h2{font-size:40px;line-height:1.08;}
.sezione-testa .guida,.zid-parole .guida{font-size:17px;line-height:1.55;}
.situazione h3,
.confronto-col h3,
.tipo-percorso h3,
.sezione .griglia-2 .scheda h3{
  font-family:var(--serif);font-weight:520;letter-spacing:-.01em;
}
.situazione h3{font-weight:500;font-size:21px;line-height:1.25;}
.confronto-col h3{font-size:22px;}
.tipo-percorso h3{font-size:23px;}
.sezione .griglia-2 .scheda h3{font-size:21px !important;}

/* ---------- hero: niente macchia che respira, niente etichetta sopra il titolo ---------- */
.hero::before{display:none;}
.hero-griglia{align-items:start;}
/* la dimostrazione resta nella colonna di 560px della V5 2 (albero verticale) e nello
   stesso contenitore del resto della pagina; l'allineamento in alto basta a portare
   le azioni dell'apertura nella prima schermata */
.hero-testo{padding-top:var(--s5);}
.hero-testo{display:flex;flex-direction:column;align-items:flex-start;}
.hero-testo h1{order:1;}
.hero-testo .sotto-titolo{order:2;}
.hero-testo .guida{order:3;}
.hero-testo .hero-azioni{order:4;}
.hero-testo .hero-occhiello{order:5;margin:var(--s2) 0 2px;box-shadow:none;border:0;background:none;padding:0;font-size:14px;}
.hero-testo > p.piccolo{order:6;}
.hero-occhiello .punto{animation:none;}
.hero .guida{font-size:18px;line-height:1.55;}

/* la dimostrazione è un oggetto posato sulla pagina */
/* il bordo trasparente lascia al riquadro la stessa larghezza utile della V5 2,
   così l'albero della dimostrazione resta nella sua forma verticale e non scorre */
.dimostrazione{border:1px solid transparent;border-radius:22px;box-shadow:0 1px 2px rgba(11,18,32,.05),0 24px 48px -16px rgba(11,18,32,.22);}
html[data-theme="dark"] .dimostrazione{box-shadow:0 1px 2px rgba(0,0,0,.4),0 24px 48px -16px rgba(0,0,0,.7);}
.dim-testa{background:transparent;}
.dim-pallino{background:var(--dec-piano);box-shadow:none;}

/* ---------- sezioni: un solo fondo, separatori tratteggiati ---------- */
.sezione--rilievo,.sezione--zid{background:transparent;border:0;}
.sezione + .sezione{border-top:1px dashed var(--ln-forte);}
.sezione--rilievo + .sezione{border-top:1px dashed var(--ln-forte);}

/* le schede sono tessere morbide */
.scheda{border:0;border-radius:22px;box-shadow:none;padding:var(--s5);}

/* le tre situazioni: il segno accanto al titolo, non in un quadratino sopra */
.situazione{
  display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:var(--s3);row-gap:var(--s2);align-content:start;
}
.situazione .sit-segno{
  grid-row:1 / span 2;width:40px;height:40px;border-radius:50%;
  background:var(--qui-fondo);border:0;color:var(--dec);
}
.situazione h3,.situazione p{grid-column:2;}

/* confronto: la colonna di UpZid è tinta, senza sfumatura */
.confronto--upzid{background:var(--qui-fondo);border:0;}
.confronto-col h3{border-bottom:1px dashed var(--ln-forte);}

/* i due tipi di percorso: tinta piena di funzione, senza filetto in testa */
.tipo-percorso--for,.tipo-percorso--dec{border-top:0;}
.tipo-percorso--for{background:var(--zona-capire);}
.tipo-percorso--dec{background:var(--zona-decidere);}
.esempio{border-top:1px dashed rgba(11,18,32,.18);}

/* l'avviso: tessera con filo tratteggiato, nessuna striscia laterale */
.avviso.avviso--decisione{border:0;background:var(--cs);border-radius:16px;}
.avviso.avviso--decisione .avviso-segno{display:none;}

/* ---------- Zid: una tessera, il nome della sezione resta dopo il titolo ---------- */
.zid-presentazione{background:var(--cs);border-radius:24px;padding:var(--s7);}
.zid-parole{display:flex;flex-direction:column;}
.zid-parole h2{order:1;margin-top:0;}
.zid-parole > .occhiello{order:2;font-family:var(--sans);font-size:14px;letter-spacing:0;color:var(--mu);margin:-4px 0 var(--s4);}
.zid-parole .guida{order:3;}
.zid-parole .zid-cose{order:4;}
.zid-scena{background:var(--qui-fondo);border:0;border-radius:20px;}
.zid-scena .zid-nome{font-family:var(--serif);font-size:20px;font-weight:520;}

/* ---------- Come funziona: passi numerati sul filo tratteggiato (da Portal) ---------- */
#come .spina{background:transparent;padding:0 0 0 56px;counter-reset:passo-sito;}
#come .spina > li{counter-increment:passo-sito;position:relative;margin-bottom:var(--s5);border:0;}
#come .spina > li + li{border-top:0;}
#come .spina > li::after{        /* il filo fra un passo e il successivo */
  content:"";position:absolute;left:-41px;top:46px;bottom:calc(var(--s5) * -1 + 2px);
  border-left:1.5px dashed var(--dec-piano);
}
#come .spina > li:last-child::after{display:none;}
#come .nodo{
  left:-56px;top:8px;width:32px;height:32px;border-radius:50%;
  background:var(--dec-piano);display:grid;place-items:center;
}
#come .nodo::before{
  content:counter(passo-sito);width:auto;height:auto;border:0;background:none;transform:none;
  font-family:var(--sans);font-size:14px;font-weight:700;color:#160f04;box-shadow:none;animation:none;
}
#come .nodo::after{display:none;}
#come .passo-apri{background:var(--cs);border-radius:18px;padding:var(--s4) var(--s5);}
#come .passo-titolo{font-family:var(--serif);font-size:21px;font-weight:520;letter-spacing:-.01em;}
#come .passo--corrente .passo-apri{background:var(--qui-fondo);}

/* ---------- Per chi è: il selettore morbido (da carattere.css) ---------- */
#perchi [role="tabpanel"]{margin-top:var(--s2);}

/* ---------- la lista: l'unico campo arancio pieno del sito ---------- */
.zona.zona--lista{
  background:var(--tessera-piena);border:0;border-radius:24px;box-shadow:none;color:#0b1220;
}
.zona--lista > .zona-testa{background:transparent;border:0;padding:var(--s7) var(--s7) 0;}
.zona--lista .zona-testa .icona{display:none;}
.zona--lista h2{font-size:38px;line-height:1.08;color:#0b1220;}
.zona--lista .zona-testa .sotto{color:#2a1a05;font-size:16px;}
.zona--lista .zona-corpo{padding:var(--s5) var(--s7) var(--s7);}
.zona--lista .modulo-lista{
  background:#ffffff;color:#0b1220;border-radius:18px;padding:var(--s5);max-width:none;
}
.zona--lista .modulo-lista .campo > span{color:#0b1220;}
.zona--lista .modulo-lista input[type="email"]{background:#f7f8fa;color:#0b1220;border-color:rgba(11,18,32,.18);border-radius:12px;}
.zona--lista .modulo-lista .consenso,
.zona--lista .modulo-lista .consenso a,
.zona--lista .modulo-lista .piccolo{color:#3b4250;}
.zona--lista .modulo-lista .btn--primario{background:#0b1220;color:#ffffff;}
.zona--lista .modulo-lista .btn--primario:hover{background:#25304a;}
.zona--lista :focus-visible{outline-color:#0b1220;}
.zona--lista .avviso{background:#ffffff;color:#0b1220;}

/* ---------- domande frequenti: tessere, domanda con voce ---------- */
.faq{gap:var(--s3);}
.faq details{border:0;border-radius:18px;box-shadow:none;background:var(--cs);}
.faq summary{font-family:var(--serif);font-size:20px;font-weight:520;letter-spacing:-.01em;}
.faq details p{font-size:15px;}

/* ---------- piede ---------- */
.piede{border-top:1px dashed var(--ln-forte);}

/* ---------- telefono ---------- */
@media (max-width:768px){
  .hero-testo h1{font-size:38px;}
  .sezione-testa h2,.zid-parole h2{font-size:31px;}
  .zona--lista h2{font-size:29px;}
  .zid-presentazione{padding:var(--s5);}
  .zona--lista > .zona-testa{padding:var(--s5) var(--s5) 0;}
  .zona--lista .zona-corpo{padding:var(--s4) var(--s4) var(--s5);}
  .zona--lista .modulo-lista{padding:var(--s4);}
  #come .spina{padding-left:46px;}
  #come .nodo{left:-46px;}
  #come .spina > li::after{left:-31px;}
}

/* misura di lettura e righe senza orfani */
.sezione-testa .guida,.zid-parole .guida{max-width:36em;}
li,.confronto-col li,.zid-cose li{text-wrap:pretty;}

/* titoli su più righe: interlinea da titolo, non da testo */
#come .passo-titolo,.faq summary,.scheda h3{line-height:1.25;}
.faq details p{max-width:65ch;}
.zid-parole > .occhiello{font-size:17px;}

/* il modulo della lista resta chiaro anche nel tema scuro */
.zona--lista .modulo-lista{color-scheme:light;--mu:#4d5c70;--err:#b42318;--ln:rgba(11,18,32,.09);--ln-forte:rgba(11,18,32,.2);}
.zona--lista .modulo-lista input::placeholder{color:#5a6272;opacity:1;}
.zona--lista .errore-campo{color:#b42318;}
.zona--lista input[aria-invalid="true"]{border-color:#b42318;}
.zona--lista input[aria-invalid="true"]:focus-visible{outline-color:#b42318;}

/* ---------- testata: marchio e payoff stanno insieme, il payoff su due righe strette ---------- */
.nav-sito .marchio-payoff{line-height:1.25;font-size:12px;max-width:7.5em;}

/* ---------- Articoli: le etichette in DM Sans, le misure (date, minuti) in DM Mono ---------- */
.briciole,.voce-meta,.elenco-coda,.temi-etichetta{font-family:var(--sans);font-size:13px;letter-spacing:0;}
.voce-titolo{font-family:var(--serif);font-weight:520;letter-spacing:-.01em;font-size:21px;}
.vicino-verso{font-family:var(--sans);font-size:13px;}
.vicino-titolo{font-family:var(--serif);font-size:17px;font-weight:520;}
.chiusa-decisionale{border:0;border-radius:var(--r-scheda);background:var(--qui-fondo);}
.chiusa-etichetta{font-family:var(--sans);font-weight:600;font-size:13px;}
.invito-articolo{border:0;box-shadow:none;border-radius:var(--r-tessera);}
.invito-titolo{font-family:var(--serif);font-size:19px;font-weight:520;}
.prosa blockquote{border-left:0;padding:var(--s4) var(--s5);background:var(--cs);border-radius:var(--r-scheda);color:var(--tx);}

/* ---------- pagine legali ---------- */
.legale-titolo{font-size:40px;line-height:1.08;margin-bottom:var(--s3);}
.legale-voce{font-size:20px;font-weight:520;margin-bottom:var(--s2);}
@media (max-width:768px){.legale-titolo{font-size:31px;}}
.articolo{--misura:620px;}
.prosa{font-size:17px;}
.voce-sommario{max-width:54ch;}

/* ---------- l'esito che restituisce il server (frammento HTMX) ---------- */
[data-esito-modulo]:empty{display:none;}
[data-esito-modulo] .alert{
  background:#ffffff;color:#0b1220;border-radius:18px;padding:var(--s5);font-size:15px;line-height:1.55;
}
[data-esito-modulo] .alert strong{display:block;font-family:var(--serif);font-size:20px;font-weight:520;margin-bottom:var(--s1);}
[data-esito-modulo] .alert-danger{box-shadow:inset 0 0 0 1.5px #b42318;}
[data-esito-modulo]:focus{outline:none;}
.zona:not(.zona--lista) [data-esito-modulo] .alert{background:var(--done-bg);color:var(--tx);}

/* «Per chi è» da telefono: le tre scelte in colonna, ognuna a tutta larghezza */
@media (max-width:600px){
  #perchi [role="tablist"]{display:grid;grid-template-columns:1fr;width:100%;}
  #perchi [role="tab"]{justify-content:flex-start;min-height:44px;text-align:left;}
}

/* ---------- V6.1 · il confronto a tre strade (da solo · consulente · UpZid) ---------- */
.confronto-intro{margin-top:var(--s7);}
.confronto-intro + .confronto{margin-top:var(--s4);}
.confronto--tre{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));}
/* il costo è una misura: DM Mono, come date e durate */
.confronto-costo{font-size:var(--t-sm);color:var(--mu);margin:calc(-1 * var(--s1)) 0 var(--s4);}
.confronto-costo .cifra{font-family:var(--mono);color:var(--tx);font-weight:500;}
.confronto-fonte{margin-top:var(--s4);font-size:var(--t-3xs);color:var(--mu);max-width:80ch;}

/* ---------- V6.1 · articoli con immagine (facoltativa) ---------- */
.voce-articolo--immagine{grid-template-columns:112px minmax(0,1fr) 148px;}
.voce-immagine{margin:0;align-self:start;}
.voce-immagine img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--rs);background:var(--cs);}
.articolo-immagine{margin:0 0 var(--s7);max-width:var(--misura);}
.articolo-immagine img{display:block;width:100%;height:auto;border-radius:16px;background:var(--cs);}
.articolo-immagine figcaption{margin-top:var(--s2);font-size:var(--t-xs);color:var(--mu);}
.prosa img{display:block;max-width:100%;height:auto;border-radius:16px;}
@media (max-width:640px){
  .voce-articolo--immagine{grid-template-columns:1fr;}
  .voce-articolo--immagine .voce-immagine{order:-1;margin-bottom:var(--s2);}
  .voce-articolo--immagine .voce-immagine img{aspect-ratio:16/9;}
}

/* ---------- V6.1 · tabelle nei testi (privacy, termini, articoli) ----------
   Le tabelle arrivano dal testo scritto nel pannello (Markdown o Bard), senza classi.
   Computer: griglia leggibile, intestazione su riquadro pieno, righe separate da un filo.
   Telefono: ogni riga diventa un riquadro e ogni valore porta sopra il nome della sua
   colonna (data-etichetta, scritto da upzid.js). Senza script la tabella resta intera. */
.prosa table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--t-sm);line-height:1.6;margin-top:var(--s5);}
.prosa th,.prosa td{padding:var(--s3) var(--s4);text-align:left;vertical-align:top;}
.prosa thead th,.prosa tr[data-intestazione] > *{background:var(--tessera-tenue);color:var(--tx);font-weight:600;vertical-align:bottom;}
.prosa thead th:first-child,.prosa tr[data-intestazione] > :first-child{border-radius:var(--rb) 0 0 var(--rb);}
.prosa thead th:last-child,.prosa tr[data-intestazione] > :last-child{border-radius:0 var(--rb) var(--rb) 0;}
.prosa tbody tr:not([data-intestazione]) > *{border-bottom:1px solid var(--ln-forte);}
.prosa tbody tr:last-child > *{border-bottom:0;}
.prosa td > p,.prosa th > p{margin:0;}
.prosa td code,.prosa th code{font-family:var(--mono);font-size:.92em;}
@media (max-width:640px){
  .prosa table[data-impilata],.prosa table[data-impilata] tbody,
  .prosa table[data-impilata] tr,.prosa table[data-impilata] tr > *{display:block;width:100%;}
  .prosa table[data-impilata] thead,
  .prosa table[data-impilata] tr[data-intestazione]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .prosa table[data-impilata] tbody tr{background:var(--tessera-tenue);border-radius:var(--rs);padding:var(--s3) var(--s4);}
  .prosa table[data-impilata] tbody tr + tr{margin-top:var(--s3);}
  .prosa table[data-impilata] tbody tr > *{border:0;padding:var(--s1) 0;font-weight:inherit;}
  .prosa table[data-impilata] tbody tr > * + *{margin-top:var(--s2);}
  .prosa table[data-impilata] [data-etichetta]::before{content:attr(data-etichetta);display:block;font-size:var(--t-xs);font-weight:600;color:var(--mu);margin-bottom:2px;}
  /* la prima cella fa da titolo del riquadro: senza etichetta, in evidenza */
  .prosa table[data-impilata] tbody tr > :first-child{font-weight:600;color:var(--tx);}
  .prosa table[data-impilata] tbody tr > :first-child::before{content:none;}
}