/* ==========================================================================
   BLOCCHI EDITORIALI — il blog come asset che trasferisce fiducia
   --------------------------------------------------------------------------
   Quattro blocchi che sui 30 articoli esistenti non c'erano affatto:
   il sommario in apertura, le fonti citate, la firma con la revisione
   tecnica, e l'invito all'azione legato al tema dell'articolo invece che
   generico.

   Le fonti sono il pezzo che cambia il registro della pagina. Un'azienda che
   scrive "rientra in edilizia libera" senza indicare la norma chiede di
   essere creduta sulla parola; una che mette il riferimento per esteso
   invita a controllare. Sul secondo si costruisce un preventivo da cinque
   cifre, sul primo no.
   ========================================================================== */

/* ------------------------------------------------------------- apertura */
.vp-a-sommario{font-size:1.08rem;line-height:1.72;color:rgba(255,255,255,.66);
  max-width:62ch;margin:14px 0 0}

/* ------------------------------------------------------------- il corpo */
.vp-a-body>p{max-width:68ch;line-height:1.78;margin:0 0 18px}
.vp-a-body>h2{font-family:var(--font-h,'Cormorant Garamond',Georgia,serif);
  font-weight:400;font-size:clamp(1.4rem,2.6vw,1.95rem);color:#efe9dc;
  margin:38px 0 14px;letter-spacing:.01em}
.vp-a-body>ul{max-width:68ch;margin:0 0 18px;padding-left:0;list-style:none}
.vp-a-body>ul>li{position:relative;padding-left:20px;margin-bottom:9px;line-height:1.7}
.vp-a-body>ul>li::before{content:'\25AB';position:absolute;left:0;
  color:var(--gold,#c4a84a)}
.vp-a-body>blockquote{max-width:68ch;margin:24px 0;padding:18px 22px;
  background:rgba(196,168,74,.055);border-left:2px solid var(--gold,#c4a84a);
  border-radius:0 6px 6px 0;line-height:1.72;color:rgba(255,255,255,.78)}

/* -------------------------------------------------------------- le fonti */
.vp-a-fonti{max-width:68ch;margin:44px 0 0;padding:24px 26px;
  border:1px solid rgba(196,168,74,.2);border-radius:10px;
  background:rgba(255,255,255,.022)}
.vp-a-fonti h2{font-size:.68rem!important;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold,#c4a84a);margin:0 0 14px!important;
  font-family:inherit!important}
.vp-a-fonti ol{margin:0;padding-left:20px}
.vp-a-fonti li{margin-bottom:8px;line-height:1.6;font-size:.92rem;
  color:rgba(255,255,255,.7)}
.vp-a-fonti a{color:var(--gold2,#dfc06a);text-decoration:underline;
  text-underline-offset:2px}
.vp-a-fonti-n{font-size:.82rem;line-height:1.6;color:rgba(255,255,255,.45);
  margin:14px 0 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.07)}

/* --------------------------------------------------------- le domande */
.vp-a-faq{max-width:68ch;margin:44px 0 0}
.vp-a-faq h2{margin-bottom:16px}

/* -------------------------------------------------------------- l'invito */
.vp-a-cta{max-width:68ch;margin:44px 0 0;padding:30px 32px;border-radius:12px;
  background:linear-gradient(140deg,rgba(196,168,74,.13),rgba(196,168,74,.04));
  border:1px solid rgba(196,168,74,.26)}
.vp-a-cta h2{margin:0 0 10px!important;font-size:clamp(1.25rem,2.4vw,1.6rem)!important}
.vp-a-cta p{margin:0 0 20px;line-height:1.7;color:rgba(255,255,255,.72)}
.vp-a-cta-b{display:flex;flex-wrap:wrap;gap:12px}
.vp-a-cta-b .btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:13px 22px;border-radius:3px;text-decoration:none;
  font-size:.78rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.vp-a-cta-b .btn--gold{background:linear-gradient(135deg,#c4a84a,#dfc06a);color:#0b0a08}
.vp-a-cta-b .btn--gold:hover{filter:brightness(1.08)}
.vp-a-cta-b .btn--line{border:1px solid rgba(196,168,74,.45);color:var(--gold2,#dfc06a)}
.vp-a-cta-b .btn--line:hover{border-color:var(--gold,#c4a84a);background:rgba(196,168,74,.08)}

/* --------------------------------------------------------------- la firma */
.vp-a-firma{max-width:68ch;margin:36px 0 0;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.08)}
.vp-a-firma p{margin:0 0 4px;font-size:.88rem;line-height:1.6}
.vp-a-firma-a{color:rgba(255,255,255,.82)}
.vp-a-firma-r{color:var(--gold2,#dfc06a)}
.vp-a-firma-d{color:rgba(255,255,255,.42);font-size:.82rem}

@media(max-width:640px){
  .vp-a-fonti,.vp-a-cta{padding:20px 18px}
  .vp-a-cta-b{flex-direction:column}
  .vp-a-cta-b .btn{width:100%}
}

/* --------------------------------------------------------- leggi anche */
/* Misurato prima di aggiungerlo: UN SOLO collegamento interno nel corpo, su
   otto articoli in totale. Chi leggeva una guida normativa non aveva nessuna
   strada verso il prodotto o verso gli altri approfondimenti, e un motore di
   ricerca non vedeva alcuna struttura fra le pagine. */
.vp-a-altri{max-width:68ch;margin:40px 0 0;padding-top:24px;
  border-top:1px solid rgba(196,168,74,.18)}
.vp-a-altri h2{font-size:.68rem!important;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold,#c4a84a);margin:0 0 14px!important;
  font-family:inherit!important}
.vp-a-altri ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.vp-a-altri li{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.vp-a-altri li:last-child{border-bottom:0}
.vp-a-altri a{color:rgba(255,255,255,.82);text-decoration:none;line-height:1.5;
  transition:color .18s}
.vp-a-altri a:hover{color:var(--gold2,#dfc06a)}
.vp-a-altri-c{font-size:.62rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(196,168,74,.55);white-space:nowrap;
  flex-shrink:0}
@media(max-width:560px){
  .vp-a-altri li{flex-direction:column;gap:4px}
  .vp-a-altri-c{font-size:.58rem}
}