/* ===================================================================
   Michele Poletti — impostazione ispirata a ioinvesto.net
   Perno del sito: NON il costo, ma il RISULTATO.
   Il costo è la spiegazione, non la tesi.
   Caratteri di sistema: niente CDN esterne.
=================================================================== */
:root {
  --testo:    #313B4D;
  --nero:     #10161F;
  --blu:      #0E3473;
  --blu-vivo: #195CCC;
  --arancio:  #FF6B00;
  --verde:    #16A34A;
  --rosso:    #DC2626;
  --blu-fondo:#0E3473;
  --fondo:    #FFFFFF;
  --fondo-2:  #F7F8FA;
  --bordo:    #E3E7EE;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Text', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --titoli: 'Segoe UI Variable Display', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --testo:#C9D1DE; --nero:#F2F5F9; --blu:#8FB2EC; --blu-vivo:#7BA9FF;
          --verde:#4ADE80; --rosso:#F87171; --blu-fondo:#15294A;
          --fondo:#0D1117; --fondo-2:#151B24; --bordo:#26303D; }
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { background:var(--fondo); color:var(--testo); font-family:var(--sans);
       font-size:1.0625rem; line-height:1.65; -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }
.riga { max-width:74rem; margin:0 auto; padding:0 1.5rem; }
.stretto { max-width:52rem; }

/* --- testata --- */
header.sito { border-bottom:1px solid var(--bordo); position:sticky; top:0; z-index:30;
              background:var(--fondo); }
header.sito .riga { display:flex; align-items:center; gap:1rem; min-height:72px; }
.marchio { font-family:var(--titoli); font-weight:800; font-size:1.15rem; color:var(--nero);
           text-decoration:none; letter-spacing:-.02em; white-space:nowrap; }
header.sito nav { display:none; gap:1.05rem; margin-left:1.1rem; flex-wrap:wrap; }
header.sito nav a { color:var(--testo); text-decoration:none; font-weight:500; font-size:.9rem;
                    white-space:nowrap; }
header.sito nav a:hover, header.sito nav a[aria-current] { color:var(--blu-vivo); }
.azioni { margin-left:auto; display:flex; gap:.6rem; align-items:center; }
.apri-menu { display:inline-flex; flex-direction:column; gap:4px; background:none; border:0;
             padding:10px; cursor:pointer; margin-left:auto; }
.apri-menu span { width:22px; height:2px; background:var(--nero); display:block; }
@media (min-width:1240px){ header.sito nav{display:flex;} .apri-menu{display:none;} }
@media (max-width:1239px){
  header.sito nav { position:absolute; top:100%; left:0; right:0; background:var(--fondo);
    border-bottom:1px solid var(--bordo); flex-direction:column; gap:0; padding:0 1.5rem;
    max-height:0; overflow:hidden; transition:max-height .25s ease; }
  header.sito nav.aperto { max-height:24rem; padding:.5rem 1.5rem 1rem; }
  header.sito nav a { padding:.7rem 0; border-bottom:1px solid var(--bordo); }
  .azioni .bottone.vuoto { display:none; }
}

.bottone { display:inline-block; font-weight:700; text-decoration:none; border-radius:9px;
  padding:.85rem 1.5rem; font-size:1rem; border:2px solid transparent; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.pieno { background:var(--arancio); color:#fff; }
.pieno:hover { transform:translateY(-1px); box-shadow:0 10px 22px -12px rgba(255,107,0,.85); }
.vuoto { border-color:var(--blu-vivo); color:var(--blu-vivo); }
.vuoto:hover { background:color-mix(in srgb, var(--blu-vivo) 8%, transparent); }
.piccolo { padding:.55rem 1.05rem; font-size:.92rem; }

/* --- apertura --- */
.apertura { padding:clamp(2.5rem,5vw,4.5rem) 0 clamp(2rem,4vw,3rem); }
.apertura .riga { display:grid; gap:2.5rem; align-items:center; }
@media (min-width:900px){ .apertura .riga { grid-template-columns:1.08fr .92fr; gap:3.5rem; } }
.occhiello { color:var(--blu-vivo); font-weight:700; font-size:1rem; margin-bottom:1rem; }
h1 { font-family:var(--titoli); color:var(--nero); font-weight:800;
  font-size:clamp(2.2rem,5.4vw,3.8rem); line-height:1.05; letter-spacing:-.035em;
  margin-bottom:1.25rem; text-wrap:balance; }
.sommario { font-size:1.1rem; max-width:36rem; }
.sommario strong { color:var(--nero); font-weight:700; }
.ritratto { border-radius:16px; }

.fiducia { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem;
           margin:1.6rem 0 1.4rem; font-size:.97rem; }
.stelle { color:#00B67A; letter-spacing:.05em; }
.fiducia a, footer a { color:var(--testo); }
.ctas { display:flex; flex-wrap:wrap; gap:.8rem; }
.postille { display:flex; flex-wrap:wrap; gap:1.2rem; margin-top:1rem; font-size:.93rem; }
.postille span { display:inline-flex; align-items:center; gap:.4rem; }
.spunta { width:16px; height:16px; flex:none; }

/* --- la barra dei numeri --- */
.numeri { background:var(--fondo-2); border:1px solid var(--bordo); border-radius:18px;
          padding:1.75rem; }
.numeri .griglia { display:grid; gap:1.5rem; grid-template-columns:repeat(2,1fr); }
@media (min-width:880px){ .numeri .griglia { grid-template-columns:repeat(3,1fr); } }
.numeri .titolo { font-family:var(--titoli); font-weight:800; color:var(--nero);
                  font-size:1.3rem; letter-spacing:-.02em; line-height:1.25; }
.dato .cifra { font-family:var(--titoli); font-weight:800; color:var(--blu);
  font-size:clamp(1.7rem,3.4vw,2.4rem); line-height:1; letter-spacing:-.03em;
  display:block; margin-bottom:.35rem; font-variant-numeric:tabular-nums; }
.dato .eti { font-size:.95rem; line-height:1.4; }
.dato .fonte { font-size:.82rem; color:var(--testo); opacity:.75; margin-top:.3rem; display:block; }

/* --- sezioni --- */
section.blocco { padding:clamp(3rem,6vw,5rem) 0; }
section.blocco.grigia { background:var(--fondo-2); border-top:1px solid var(--bordo);
                        border-bottom:1px solid var(--bordo); }
h2 { font-family:var(--titoli); color:var(--nero); font-weight:800;
  font-size:clamp(1.7rem,3.8vw,2.5rem); letter-spacing:-.025em; margin-bottom:1rem;
  line-height:1.15;
  max-width:26ch; text-wrap:balance; }
h3 { font-family:var(--titoli); color:var(--nero); font-weight:700;
     font-size:1.2rem; margin-bottom:.55rem; letter-spacing:-.01em; line-height:1.3; }
section.blocco p { max-width:62ch; margin-bottom:1rem; }
section.blocco p:last-child { margin-bottom:0; }
.intro { font-size:1.1rem; margin-bottom:2rem !important; }
strong { color:var(--nero); font-weight:700; }

/* --- il grafico dei risultati: barre in HTML, nessuna libreria --- */
.grafico { margin:2rem 0 1rem; }
.barra-riga { display:grid; grid-template-columns:1fr; gap:.35rem; margin-bottom:1.4rem; }
.barra-eti { display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
             font-size:1rem; }
.barra-eti .valore { font-family:var(--titoli); font-weight:800; font-variant-numeric:tabular-nums;
                     font-size:1.25rem; letter-spacing:-.02em; }
.barra { height:34px; border-radius:7px; background:var(--bordo); overflow:hidden; display:flex; }
.barra i { display:block; height:100%; }
.barra i.perde { background:var(--rosso); }
.barra i.vince { background:var(--verde); }
.legenda { font-size:.9rem; opacity:.8; }

/* --- confronto a due colonne --- */
.confronto { display:grid; gap:1rem; margin-top:.5rem; }
@media (min-width:760px){ .confronto { grid-template-columns:1fr 1fr; gap:1.5rem; } }
.colonna { border:1px solid var(--bordo); border-radius:16px; padding:1.6rem; background:var(--fondo); }
.colonna.tua { border-color:var(--blu-vivo); border-width:2px; }
.colonna dl { display:grid; grid-template-columns:1fr auto; gap:.7rem 1rem; }
.colonna dd { font-variant-numeric:tabular-nums; font-weight:600; color:var(--nero); text-align:right; }
.colonna .somma { border-top:1px solid var(--bordo); margin-top:1.1rem; padding-top:1.1rem; }
.colonna .somma dd { font-size:1.3rem; }
.colonna.banca .somma dd { color:var(--rosso); }
.colonna.tua .somma dd { color:var(--verde); }

/* --- schede --- */
.schede { display:grid; gap:1.25rem; }
@media (min-width:880px){ .schede.tre { grid-template-columns:repeat(3,1fr); }
                          .schede.due { grid-template-columns:repeat(2,1fr); } }
.schede article { border:1px solid var(--bordo); border-radius:16px; padding:1.5rem;
                  background:var(--fondo); }
.schede p { font-size:1rem; margin-bottom:.7rem; }
.schede p:last-child { margin-bottom:0; }
.etichetta { display:inline-block; font-size:.85rem; font-weight:700; color:var(--blu-vivo);
             margin-bottom:.5rem; }

/* --- tabella --- */
.tabella-wrap { overflow-x:auto; margin:1.5rem 0; }
table.dati { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
table.dati th { text-align:left; background:var(--blu-fondo); color:#ffffff; font-weight:700;
                padding:.9rem 1rem; font-size:.97rem; }
table.dati th:first-child { border-radius:10px 0 0 0; }
table.dati th:last-child { border-radius:0 10px 0 0; }
table.dati td { padding:.9rem 1rem; border-bottom:1px solid var(--bordo); }
table.dati tbody tr:nth-child(even) { background:var(--fondo-2); }

/* --- avviso --- */
.avviso { border-left:4px solid var(--blu-vivo); background:var(--fondo-2);
          padding:1.35rem 1.5rem; border-radius:0 12px 12px 0; margin:1.75rem 0; }
.avviso p { margin-bottom:.7rem; }
.avviso p:last-child { margin-bottom:0; }

/* --- elenchi --- */
ul.lista { list-style:none; margin:1rem 0; }
ul.lista li { padding-left:1.8rem; position:relative; margin-bottom:.7rem; }
ul.lista li::before { content:''; position:absolute; left:0; top:.55rem; width:9px; height:9px;
                      border-radius:50%; background:var(--blu-vivo); }

/* --- chiusura --- */
.chiusura { background:var(--blu-fondo); color:#ffffff; padding:clamp(3rem,6vw,4.5rem) 0; text-align:center; }
.chiusura h2 { color:#ffffff; margin:0 auto 1rem; max-width:24ch; }
.chiusura p { color:#D7E2F4; max-width:54ch; margin:0 auto 2rem; font-size:1.08rem; }

footer.sito { padding:2.5rem 0 3rem; font-size:.94rem; border-top:1px solid var(--bordo); }
footer.sito p + p { margin-top:.5rem; }
footer .prova { margin-top:1.25rem; opacity:.7; }

a { color:var(--blu-vivo); }
a:focus-visible, .bottone:focus-visible, button:focus-visible {
  outline:3px solid var(--arancio); outline-offset:3px; border-radius:4px; }
@media (prefers-reduced-motion:reduce){ *{transition:none!important; transform:none!important;
  scroll-behavior:auto!important;} }

/* --- didascalia delle tabelle --- */
table.dati caption { caption-side:top; }

/* --- i passi della pagina contatti: qui il numero serve davvero,
       perche' e' una sequenza (prima si scrive, poi si parla, poi si guarda) --- */
ol.passi { list-style:none; counter-reset:passo; margin:1.25rem 0; }
ol.passi li { counter-increment:passo; position:relative; padding-left:3rem; margin-bottom:1.1rem; }
ol.passi li::before {
  content:counter(passo); position:absolute; left:0; top:-.1rem;
  width:2.1rem; height:2.1rem; border-radius:50%; background:var(--blu-fondo); color:#ffffff;
  font-family:var(--titoli); font-weight:800; font-size:1rem;
  display:flex; align-items:center; justify-content:center;
}

/* --- il modulo --- */
.campo { display:block; margin-bottom:1.1rem; }
.campo label { display:block; font-weight:600; color:var(--nero); margin-bottom:.35rem;
               font-size:.97rem; }
.campo input[type=text], .campo input[type=email], .campo input[type=tel],
.campo select, .campo textarea {
  width:100%; font:inherit; color:var(--testo); background:var(--fondo);
  border:1px solid var(--bordo); border-radius:9px; padding:.7rem .85rem;
  min-height:46px; /* pollice, non puntatore */
}
.campo textarea { min-height:118px; resize:vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline:3px solid var(--arancio); outline-offset:2px; border-color:var(--blu-vivo);
}
.campo .aiuto { display:block; font-size:.86rem; opacity:.8; margin-top:.3rem; }
.campo.consenso label { font-weight:400; display:flex; gap:.6rem; align-items:flex-start;
                        font-size:.93rem; line-height:1.5; }
.campo.consenso input { margin-top:.25rem; width:18px; height:18px; flex:none; }
form .bottone { width:100%; text-align:center; }

/* --- le schede in coppia: due colonne, non quattro strette --- */
.schede.due article { display:flex; flex-direction:column; }

/* ===================================================================
   Quello che serve agli articoli portati dal sito vero.
=================================================================== */
.breadcrumb { font-size:.93rem; margin-bottom:1rem; }
.breadcrumb a { color:var(--testo); text-decoration:none; }
.breadcrumb a:hover { color:var(--blu-vivo); }

hr.divisore { border:0; border-top:1px solid var(--bordo); margin:2.25rem 0; }

/* il numerone col suo commento: e' la cosa piu' forte dell'articolo,
   quindi e' l'unico punto in cui si alza la voce */
.numero-evidenza {
  background:var(--blu-fondo); color:#ffffff; border-radius:16px;
  padding:1.75rem 1.9rem; margin:2rem 0;
}
.numero-evidenza .num-grande {
  display:block; font-family:var(--titoli); font-weight:800;
  font-size:clamp(2.2rem,5.5vw,3.2rem); line-height:1; letter-spacing:-.03em;
  color:#ffffff; margin-bottom:.7rem; font-variant-numeric:tabular-nums;
}
.numero-evidenza p { color:#D7E2F4; margin:0; max-width:none; }

/* gli elenchi normali dentro gli articoli */
section.blocco ul:not(.lista), section.blocco ol:not(.lista) {
  margin:1rem 0 1.25rem 1.3rem; max-width:62ch;
}
section.blocco ul:not(.lista) li, section.blocco ol:not(.lista) li { margin-bottom:.55rem; }

/* le schede degli articoli usavano <div class="card"> */
.schede .card { border:1px solid var(--bordo); border-radius:16px; padding:1.5rem;
                background:var(--fondo); }
.schede .card h3 { margin-bottom:.5rem; }

/* i titoli degli articoli nell'indice */
.schede h3 a { text-decoration:none; }
.schede h3 a:hover { text-decoration:underline; text-underline-offset:3px; }

/* dentro la fascia blu di chiusura degli articoli il testo era gia' impaginato */
.chiusura .riga > p, .chiusura p { color:#D7E2F4; }
.chiusura .bottone.pieno { margin-top:.25rem; }