/* =========================================================================
   AVVOCATI.NET — Diagnosi
   Tutto è racchiuso in .dgn: il foglio non tocca nulla del tema.
   La prima parte neutralizza quello che il tema fa ereditare dentro .dgn.
   ========================================================================= */

/* ---------- difesa dal tema ---------- */
.dgn,.dgn *,.dgn *::before,.dgn *::after{box-sizing:border-box}
.dgn{
  font-family:"Montserrat",Helvetica,Arial,"Lucida Grande",sans-serif;
  font-size:15px; line-height:1.7; font-weight:400; font-style:normal;
  text-align:left; text-transform:none; letter-spacing:normal;
}
.dgn h1,.dgn h2,.dgn h3,.dgn h4,.dgn h5,.dgn h6,
.dgn p,.dgn ul,.dgn ol,.dgn li,.dgn figure,.dgn blockquote{
  font-family:inherit; font-style:normal; text-transform:none; letter-spacing:normal;
  padding:0; text-shadow:none;
}
.dgn h1::after,.dgn h2::after,.dgn h3::after,.dgn h4::after,
.dgn h1::before,.dgn h2::before,.dgn h3::before,.dgn h4::before{content:none}
.dgn form{margin:0; padding:0; background:none; border:0}
.dgn fieldset{border:0; margin:0; padding:0; min-width:0; background:none}
/* Il float, con larghezza piena, è quello che impedisce alla legenda
   di interrompere il bordo superiore del fieldset: senza, la riga di
   separazione fra una domanda e l'altra esce spezzata. */
.dgn legend{
  all:unset; float:left; width:100%; font-family:inherit; font-weight:400;
  color:inherit; font-size:15px; line-height:1.6; text-transform:none;
}
.dgn fieldset::after{content:""; display:table; clear:both}
.dgn label{
  font-family:inherit; font-style:normal; text-transform:none;
  letter-spacing:normal; font-weight:400; color:inherit; display:inline;
}
.dgn input,.dgn textarea,.dgn select,.dgn button{
  font-family:inherit; font-size:15px; line-height:1.3;
  margin:0; text-transform:none; letter-spacing:normal; box-shadow:none;
}
.dgn input[type=radio],.dgn input[type=checkbox]{
  -webkit-appearance:auto; appearance:auto; opacity:1; position:static;
  width:auto; height:auto; padding:0; border:initial; background:initial;
}
.dgn button{border-radius:3px; cursor:pointer}
.dgn a{text-decoration:none; box-shadow:none}
.dgn img{max-width:100%; height:auto; display:block; border-radius:0}
.dgn table{border-collapse:collapse; width:100%; margin:0; border:0}
.dgn th,.dgn td{border:0}
.dgn :focus-visible{outline:3px solid #4A3FBF; outline-offset:3px}

/* ---------- da qui in giù: il modello ---------- */

/* =========================================================================
   Modello di pagina AVVOCATI.NET — accessibilità digitale e intelligenza artificiale
   Palette e carattere rilevati dal sito (tema Divi): Montserrat, navy #293766,
   testo #545960, fondo grigio #EDEDED, pulsanti a filo con raggio 3px.
   Gli accenti (indaco e ottanio) distinguono le due materie.
   ========================================================================= */
.dgn{
  --navy:#293766;          /* dal sito: testata e fasce scure */
  --navy-scuro:#1F2B51;    /* dal sito */
  --testo:#545960;         /* dal sito: corpo del testo */
  --titolo:#1B2340;
  --bianco:#FFFFFF;
  --grigio:#EDEDED;        /* dal sito: fasce alternate */
  --bordo:#DCDEE3;
  --indaco:#4A3FBF;        /* accento: accessibilità */
  --indaco-chiaro:#ABA3F5;
  --ottanio:#0F5F6B;       /* accento: intelligenza artificiale */
  --ottanio-chiaro:#7FD4DF;
  --ocra:#7E5A17;          /* accento: operazioni straordinarie */
  --ocra-chiaro:#E3B872;
  --sans:"Montserrat",Helvetica,Arial,"Lucida Grande",sans-serif;

  --rassegna-fondo:#F6F6F7;
  --rassegna-testo:#3A4150;
  --rassegna-bordo:#D6D9DF;
}

.dgn{font-size:15px; color:var(--testo)}
.dgn .contenitore{max-width:1080px; margin:0 auto; padding-left:24px; padding-right:24px}

/* fasce */
.dgn .fascia{padding:64px 0}
.dgn .fascia-chiara{background:var(--bianco)}
.dgn .fascia-grigia{background:var(--grigio)}
.dgn .fascia-navy{background:var(--navy); color:#D8DBE4}

.dgn .occhiello{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  margin:0 0 14px;
}
.dgn.tema-accessibilita .occhiello{color:var(--indaco)}
.dgn.tema-ia .occhiello{color:var(--ottanio)}
.dgn.tema-operazioni .occhiello{color:var(--ocra)}
.dgn .fascia-navy .occhiello{color:var(--indaco-chiaro)}
.dgn.tema-ia .fascia-navy .occhiello{color:var(--ottanio-chiaro)}
.dgn.tema-operazioni .fascia-navy .occhiello{color:var(--ocra-chiaro)}

.dgn h1{
  font-family:var(--sans); font-weight:700; color:var(--titolo);
  font-size:clamp(28px,4.6vw,44px); line-height:1.15; margin:0 0 14px; text-wrap:balance;
}
.dgn h2{
  font-weight:700; color:var(--titolo); font-size:clamp(20px,2.6vw,26px);
  line-height:1.25; margin:0 0 16px; text-wrap:balance;
}
.dgn h3{font-weight:600; color:var(--titolo); font-size:17px; line-height:1.35; margin:0 0 10px}
.dgn .fascia-navy h1, .dgn .fascia-navy h2, .dgn .fascia-navy h3, .dgn .fascia-navy .guida{color:#fff}
.dgn p{margin:0 0 16px}
.dgn .guida{font-size:clamp(16px,2vw,19px); font-weight:300; line-height:1.55; color:var(--titolo); max-width:60ch}
.dgn .colonna{max-width:66ch}

/* pulsanti, nello stile del sito: a filo, raggio 3px */
.dgn .bottone{
  display:inline-block; font-family:var(--sans); font-size:15px; font-weight:600;
  text-decoration:none; border-radius:3px; padding:11px 26px; cursor:pointer;
  border:2px solid var(--navy); background:var(--navy); color:#fff; line-height:1.3;
}
.dgn .bottone:hover{background:transparent; color:var(--navy)}
.dgn .bottone-filo{background:transparent; color:var(--navy)}
.dgn .bottone-filo:hover{background:var(--navy); color:#fff}
.dgn .fascia-navy .bottone{border-color:#fff; background:transparent; color:#fff}
.dgn .fascia-navy .bottone:hover{background:#fff; color:var(--navy)}

/* ---------- fascia della home ---------- */
.dgn .home-fascia{display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr); gap:44px; align-items:center}
.dgn .home-fascia img{width:100%; height:auto; display:block; box-shadow:0 14px 34px rgba(27,35,64,.22)}
.dgn .home-fascia .didasc{font-size:13px; line-height:1.55; margin:14px 0 0; color:#B9BECC}
.dgn .home-fascia h2{font-size:clamp(24px,3.4vw,34px); margin-bottom:18px}
@media (max-width:760px){
  .dgn .home-fascia{grid-template-columns:1fr; gap:26px}
  .dgn .home-fascia .copertina{max-width:190px}
}

/* ---------- due colonne ---------- */
.dgn .due{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:40px; align-items:start}

/* ---------- box dei pacchetti ---------- */
.dgn .pacchetti{display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(min(100%,255px),1fr)); align-items:stretch}
.dgn .pacchetto{
  background:var(--bianco); border:1px solid var(--bordo); border-radius:3px;
  padding:28px 24px 26px; display:flex; flex-direction:column; gap:0;
}
.dgn .pacchetto .nome{
  font-size:20px; font-weight:700; color:var(--titolo); margin:0 0 4px; line-height:1.2;
}
.dgn .pacchetto .claim{font-size:14px; font-weight:600; margin:0 0 18px}
.dgn.tema-accessibilita .pacchetto .claim{color:var(--indaco)}
.dgn.tema-ia .pacchetto .claim{color:var(--ottanio)}
.dgn.tema-operazioni .pacchetto .claim{color:var(--ocra)}
.dgn .pacchetto .corpo{font-size:14px; line-height:1.65; margin:0 0 18px}
.dgn .pacchetto .per{
  font-size:13px; line-height:1.6; margin:0 0 22px; padding-top:16px;
  border-top:1px solid var(--bordo); color:#6B717C;
}
.dgn .pacchetto .per b{display:block; font-weight:600; color:var(--titolo); margin-bottom:2px}
.dgn .pacchetto .azione{margin-top:auto}
.dgn .pacchetto .bottone{width:100%; text-align:center; font-size:14px; padding:10px 18px}
.dgn .pacchetto-primo{border-width:2px}
.dgn.tema-accessibilita .pacchetto-primo{border-color:var(--indaco)}
.dgn.tema-ia .pacchetto-primo{border-color:var(--ottanio)}
.dgn.tema-operazioni .pacchetto-primo{border-color:var(--ocra)}
.dgn .etichetta-pacchetto{
  align-self:flex-start; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  font-weight:700; color:#fff; border-radius:2px; padding:3px 9px; margin:0 0 12px;
}
.dgn.tema-accessibilita .etichetta-pacchetto{background:var(--indaco)}
.dgn.tema-ia .etichetta-pacchetto{background:var(--ottanio)}
.dgn.tema-operazioni .etichetta-pacchetto{background:var(--ocra)}
.dgn .etichetta-vuota{visibility:hidden}
.dgn .passo{
  display:flex; align-items:center; gap:10px; margin:0 0 10px;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
}
.dgn .passo b{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; font-size:14px; letter-spacing:0;
  color:#fff; flex:none;
}
.dgn.tema-accessibilita .passo{color:var(--indaco)} .dgn.tema-accessibilita .passo b{background:var(--indaco)}
.dgn.tema-ia .passo{color:var(--ottanio)} .dgn.tema-ia .passo b{background:var(--ottanio)}
.dgn.tema-operazioni .passo{color:var(--ocra)} .dgn.tema-operazioni .passo b{background:var(--ocra)}
.dgn .esito .rimando{
  border-top:1px solid rgba(255,255,255,.28); margin-top:18px; padding-top:16px;
}
.dgn .esito .rimando a{color:#fff; font-weight:600}
.dgn .disclaimer{font-size:13px; line-height:1.6; color:#6B717C; margin:18px 0 0; max-width:64ch}
.dgn .tabella-imbuto{width:100%; border-collapse:collapse; margin:0 0 6px; font-size:14.5px}
.dgn .tabella-imbuto th, .dgn .tabella-imbuto td{padding:9px 10px; border-bottom:1px solid var(--bordo); text-align:left}
.dgn .tabella-imbuto th{font-weight:700; color:var(--titolo); background:#fff}
.dgn .tabella-imbuto td.n, .dgn .tabella-imbuto th.n{text-align:right; font-variant-numeric:tabular-nums}
.dgn .tabella-imbuto tr:last-child td{border-bottom:0; font-weight:700; color:var(--titolo)}
.dgn .fonte{font-size:12.5px; line-height:1.55; color:#6B717C; margin:8px 0 0}

/* ---------- il test ---------- */
.dgn .test{background:var(--bianco); border:1px solid var(--bordo); border-radius:3px; padding:clamp(22px,4vw,40px)}
.dgn .test .gruppo{margin:0 0 34px}
.dgn .test .gruppo:last-of-type{margin-bottom:26px}
.dgn .test .gruppo > h3{
  font-size:16px; font-weight:700; margin:0 0 4px; padding-top:18px;
  border-top:2px solid var(--navy); color:var(--titolo);
}
.dgn .test .gruppo-nota{font-size:13.5px; line-height:1.6; margin:0 0 22px; color:#6B717C; max-width:62ch}
.dgn .test fieldset{border:0; margin:0; padding:0 0 18px; min-width:0}
.dgn .test fieldset + fieldset{border-top:1px solid var(--bordo); padding-top:18px}
.dgn .test legend{padding:0; margin:0 0 12px; max-width:62ch; font-size:15px; line-height:1.6; color:var(--titolo)}
.dgn .test .num{font-weight:700; margin-right:6px}
.dgn.tema-accessibilita .test .num{color:var(--indaco)}
.dgn.tema-ia .test .num{color:var(--ottanio)}
.dgn.tema-operazioni .test .num{color:var(--ocra)}
.dgn .scelte{display:flex; gap:10px; flex-wrap:wrap}
.dgn .scelta{position:relative; display:block; margin:0}
.dgn .scelta input{position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; cursor:pointer}
.dgn .scelta span{
  display:block; min-width:92px; text-align:center; padding:9px 22px; cursor:pointer;
  border:2px solid var(--navy); border-radius:3px; background:var(--bianco);
  font-size:14px; font-weight:500; color:var(--titolo);
}
.dgn .scelta input:checked + span{background:var(--navy); color:#fff}
.dgn .scelta input:checked + span::before{content:"\2713\00a0"}
.dgn .scelta input:focus-visible + span{outline:3px solid var(--indaco); outline-offset:3px}
.dgn .scelta:hover span{border-color:#6B7690}
.dgn fieldset.manca legend{color:#8C1D18}
.dgn fieldset.manca .scelta span{border-color:#8C1D18}
.dgn .avviso{color:#8C1D18; font-weight:600; font-size:14px; margin:14px 0 0}
.dgn .azioni{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.dgn .esito{background:var(--navy); color:#E4E7EE; border-radius:3px; padding:30px 28px; margin:26px 0 0}
.dgn .esito:focus{outline:3px solid var(--indaco); outline-offset:4px}
.dgn .esito .et{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; margin:0 0 8px}
.dgn.tema-accessibilita .esito .et{color:var(--indaco-chiaro)}
.dgn.tema-ia .esito .et{color:var(--ottanio-chiaro)}
.dgn.tema-operazioni .esito .et{color:var(--ocra-chiaro)}
.dgn .esito h4{font-size:clamp(22px,3.4vw,30px); font-weight:700; color:#fff; margin:0 0 4px; line-height:1.15}
.dgn .esito .punteggio{font-size:15px; margin:0 0 16px; font-weight:500}
.dgn.tema-accessibilita .esito .punteggio{color:var(--indaco-chiaro)}
.dgn.tema-ia .esito .punteggio{color:var(--ottanio-chiaro)}
.dgn.tema-operazioni .esito .punteggio{color:var(--ocra-chiaro)}
.dgn .esito p{margin:0 0 12px}
.dgn .esito p:last-child{margin-bottom:0}
.dgn .esito .aggiunta{border-top:1px solid rgba(255,255,255,.28); margin-top:18px; padding-top:16px}
.dgn .esito .prossimo{
  margin-top:20px; padding-top:18px; border-top:1px solid rgba(255,255,255,.28);
}
.dgn .esito .prossimo .bottone{border-color:#fff; color:#fff}

/* ---------- modulo ---------- */
.dgn .modulo{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.dgn .campo{display:flex; flex-direction:column; gap:6px}
.dgn .campo.largo{grid-column:1/-1}
.dgn .campo label{font-size:13px; font-weight:600; color:var(--titolo)}
.dgn .campo .aiuto{font-weight:400; color:#6B717C}
.dgn .campo input, .dgn .campo textarea{
  font-family:var(--sans); font-size:15px; color:var(--titolo);
  padding:10px 12px; border:1px solid #B9BECC; border-radius:3px; background:#fff; width:100%;
}
.dgn .campo input[readonly]{background:#F2F3F6; color:#4A5162}
.dgn .spunta{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; line-height:1.55}
.dgn .spunta input{margin-top:4px; width:17px; height:17px; flex:none}
.dgn .sotto-bottone{font-size:13.5px; color:#6B717C; margin:12px 0 0}
.dgn .consenso-esteso{font-size:13px; line-height:1.6; color:#6B717C; margin:10px 0 0 27px; max-width:62ch}
.dgn .consenso-esteso a{color:var(--ottanio)}

/* ---------- grafico inventario (pagina IA) ---------- */
.dgn .inventario{width:100%; height:auto; display:block}
.dgn .legenda{display:flex; gap:18px; flex-wrap:wrap; font-size:12.5px; margin:16px 0 0; color:#6B717C}
.dgn .legenda i{display:inline-block; width:12px; height:12px; margin-right:7px; vertical-align:-1px; border-radius:1px}

@media (prefers-reduced-motion:reduce){.dgn *{animation:none !important; transition:none !important}}

/* ---------- aggiunte del plugin ---------- */
.dgn-ancora{display:block; height:0; scroll-margin-top:110px}
.dgn .dgn-trappola{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.dgn .esito-invio{
  background:var(--navy); color:#E4E7EE; border-radius:3px; padding:30px 28px; margin:0;
}
.dgn .esito-invio .et{
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; margin:0 0 8px; color:var(--indaco-chiaro);
}
.dgn.tema-ia .esito-invio .et{color:var(--ottanio-chiaro)}
.dgn.tema-operazioni .esito-invio .et{color:var(--ocra-chiaro)}
.dgn .esito-invio p:last-child{margin-bottom:0}
.dgn .modulo .avviso{grid-column:1/-1}
.dgn .test .scelte{clear:both; padding-top:2px}
.dgn .modulo button.bottone{align-self:flex-start}

/* Fasce a tutta larghezza, quando il contenitore del tema le stringe.
   Da usare solo se la pagina non ha già un modello a tutta larghezza. */
.dgn-pieno{
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  max-width:100vw;
}

/* ---------- chi segue la materia, sopra il modulo ---------- */
.dgn .squadra{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  border-top:1px solid var(--bordo); padding-top:22px; margin:0 0 30px;
}
.dgn .volti{display:flex; gap:26px; flex:none}
.dgn .volto{text-align:center; width:64px}
.dgn .volto img{
  width:54px; height:54px; border-radius:50%; object-fit:cover;
  display:block; margin:0 auto 6px;
}
.dgn .volto span{display:block; font-size:11px; line-height:1.3; color:#6B717C}
.dgn .squadra p{
  margin:0; font-size:14px; line-height:1.6; color:#6B717C;
  flex:1 1 240px; min-width:0;
}

/* Le fasce a tutta larghezza usano 50vw, che include la barra di scorrimento:
   senza questo la pagina scorrerebbe di qualche pixel in orizzontale.
   La regola sta su html e non su body: mettendola su body, il corpo diventa
   un contenitore di scorrimento e i collegamenti interni alla pagina, come
   il pulsante «Parliamone», smettono di funzionare e riportano in cima. */
html:has(body.dgn-pagina){overflow-x:clip}

/* Divi stampa il titolo della pagina in cima anche quando la pagina non usa
   il suo costruttore, e lì nessuna impostazione lo toglie. Le nostre pagine
   hanno già il loro titolo, quindi quello del tema qui non si mostra. */
body.dgn-pagina h1.entry-title.main_title{display:none}

/* Rete di sicurezza: l'uscita dalla colonna vale solo per l'elemento più
   esterno. Se la classe finisse anche su qualcosa annidato dentro, i margini
   negativi si sommerebbero e il contenuto uscirebbe dallo schermo a sinistra. */
.dgn-pieno .dgn-pieno{margin-left:0; margin-right:0; max-width:100%}

/* ---------- scelta del pacchetto ---------- */
.dgn .pacchetto{transition:border-color .15s, box-shadow .15s, transform .15s}
.dgn .pacchetto:hover{box-shadow:0 8px 24px rgba(27,35,64,.12)}
.dgn.tema-accessibilita .pacchetto:hover,
.dgn.tema-accessibilita .pacchetto.scelto{border-color:var(--indaco)}
.dgn.tema-ia .pacchetto:hover,
.dgn.tema-ia .pacchetto.scelto{border-color:var(--ottanio)}
.dgn.tema-operazioni .pacchetto:hover,
.dgn.tema-operazioni .pacchetto.scelto{border-color:var(--ocra)}
.dgn .pacchetto.scelto{border-width:2px; box-shadow:0 8px 24px rgba(27,35,64,.16)}
.dgn .pacchetto.scelto .bottone{background:var(--navy); color:#fff}
.dgn .pacchetto .segno{
  display:none; align-self:flex-start; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; font-weight:700; margin:0 0 10px;
}
.dgn .pacchetto.scelto .segno{display:block}
.dgn.tema-accessibilita .pacchetto .segno{color:var(--indaco)}
.dgn.tema-ia .pacchetto .segno{color:var(--ottanio)}
.dgn.tema-operazioni .pacchetto .segno{color:var(--ocra)}
@media (prefers-reduced-motion:reduce){.dgn .pacchetto{transition:none}}