/* ══ PIÙ CONTROLLO E MENO PREOCCUPAZIONI (21/10/2026 sera, Marco) ══
   La tabella «Senza conoscere i numeri / Conoscere i numeri senza sorprese»
   del calcolatore, con di sottofondo le due foto del prima e dopo: a
   sinistra l'uomo preoccupato coi conti a casa (un po' spento), a destra lo
   stesso uomo sereno nel suo locale. Le divide una linea bianca, che cade
   nello spazio fra le due colonne. Sopra, un velo scuro perché le scritte
   si leggano.
   Caricato da landing.html e da numeri-senza-sorprese.html: lo stesso
   blocco nelle due pagine. Le classi sono tutte vdd-* e non le vd-* del
   vecchio blocco del calcolatore, che hanno regole sue dentro la pagina. */
.volto-doppio {
  position: relative; max-width: 460px; margin: 22px auto 0; overflow: hidden;
  border-radius: 14px; background: #0E1416; text-align: left;
  box-shadow: 0 14px 34px rgba(6, 53, 45, .18);
}
.vdd-foto { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; }
.vdd-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vdd-prima { object-position: 40% 30%; filter: grayscale(.5); }
.vdd-dopo { object-position: 64% 22%; }
/* il velo scuro sopra le due foto */
.vdd-foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14, 20, 22, .56), rgba(14, 20, 22, .74));
}
/* la linea bianca fra il prima e il dopo */
.vdd-foto::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; z-index: 1;
  width: 2px; margin-left: -1px; background: rgba(255, 255, 255, .8);
}
.vdd-sopra { position: relative; z-index: 2; padding: 22px 14px 20px; }
.vdd-testa, .vdd-righe li {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 26px;
}
.vdd-testa { margin: 0 0 16px; align-items: end; text-align: center; }
.vdd-eti { font-size: clamp(13px, 3.9vw, 18px); font-weight: 800; line-height: 1.2; }
.vdd-eti .t-riga { display: block; white-space: nowrap; }
.vdd-eti-prima { color: rgba(255, 255, 255, .85); }
.vdd-eti-dopo { color: #F5B335; }
.vdd-righe { margin: 0; padding: 0; list-style: none; }
.vdd-righe li { padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, .26); }
.vdd-p, .vdd-d {
  margin: 0; font-size: 16px; line-height: 1.3; text-shadow: 0 1px 8px rgba(0, 0, 0, .7);
}
.vdd-p { color: rgba(255, 255, 255, .9); }
.vdd-d { color: #fff; font-weight: 700; }
.vdd-p .t-riga, .vdd-d .t-riga { display: block; }
@media (max-width: 340px) {
  .vdd-sopra { padding: 18px 10px; }
  .vdd-testa, .vdd-righe li { column-gap: 16px; }
  .vdd-p, .vdd-d { font-size: 14.5px; }
}
@media (min-width: 861px) {
  .volto-doppio { max-width: 640px; margin-top: 30px; }
  .vdd-sopra { padding: 30px 28px 26px; }
  .vdd-testa, .vdd-righe li { column-gap: 56px; }
  .vdd-righe li { padding: 12px 0; }
  .vdd-p, .vdd-d { font-size: 17px; }
}