/* Nuravesta — stile del sito con il brand di ottobre 2026.
   I valori (colori, spazi, raggi) arrivano da /assets/marca/tokens.css: qui non si scrivono colori a mano.
   Tutte le classi iniziano con nv-, per non toccare le pagine che usano ancora i fogli di stile di settembre. */

/* ---------- Base delle pagine nuove (body.nv) ---------- */

body.nv {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font-family: var(--font);
  font-size: var(--testo-base);
  font-weight: var(--peso-testo);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body.nv *,
.nv-testata *,
.nv-piede * {
  box-sizing: border-box;
}

/* Le regole di base hanno peso zero (:where), così ogni classe nv- le supera senza forzature. */
:where(body.nv) :where(h1, h2, h3, p, ol, ul) {
  margin: 0;
}

:where(body.nv) :where(h1, h2, h3) {
  color: var(--verde-notte);
  font-weight: var(--peso-titolo);
  letter-spacing: -0.02em;
  line-height: 1.12;
  text-wrap: balance;
}

:where(body.nv) h1 {
  font-size: var(--titolo-hero);
}

:where(body.nv) h2 {
  font-size: var(--titolo-sezione);
}

:where(body.nv) h3 {
  font-size: var(--titolo-card);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

:where(body.nv) img {
  display: block;
  max-width: 100%;
  height: auto;
}

:where(body.nv) a {
  color: var(--verde);
}

.nv-salta {
  position: absolute;
  left: var(--spazio-4);
  top: -100px;
  z-index: 20;
  padding: var(--spazio-3) var(--spazio-4);
  border-radius: var(--raggio-controllo);
  background: var(--verde-notte);
  color: var(--card);
  font-weight: var(--peso-etichetta);
}

.nv-salta:focus {
  top: var(--spazio-4);
}

.nv-contenitore {
  width: min(100% - 2 * var(--spazio-4), 1120px);
  margin-inline: auto;
}

.nv-icona {
  display: inline-flex;
  flex: none;
  font-size: 1.25em;
  line-height: 0;
}

/* ---------- Pulsanti e link ---------- */

.nv-pulsante {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spazio-2);
  min-height: 52px;
  padding: 0 var(--spazio-6);
  border: 0;
  border-radius: var(--raggio-pillola);
  background: var(--verde-vivo);
  /* sul verde vivo il testo è sempre verde notte */
  color: var(--verde-notte);
  font: inherit;
  font-weight: var(--peso-titolo);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

.nv-pulsante:hover {
  transform: translateY(-1px);
  box-shadow: var(--ombra-card);
}

.nv-pulsante-piccolo {
  min-height: var(--altezza-tocco);
  padding: 0 var(--spazio-5);
  font-size: var(--testo-piccolo);
}

.nv-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spazio-2);
  min-height: var(--altezza-tocco);
  color: var(--verde);
  font-weight: var(--peso-titolo);
  text-decoration: none;
}

.nv-link:hover {
  color: var(--verde-notte);
}

.nv-pulsante:focus-visible,
.nv-link:focus-visible,
.nv-testata a:focus-visible,
.nv-piede a:focus-visible,
.nv-menu-pulsante:focus-visible {
  outline: 3px solid var(--verde);
  outline-offset: 3px;
}

/* ---------- Testata ---------- */

.nv-testata {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--linea);
  background: var(--fondo);
  font-family: var(--font);
}

.nv-testata-riga {
  display: flex;
  align-items: center;
  gap: var(--spazio-5);
  min-height: 68px;
}

.nv-logo {
  display: inline-flex;
  align-items: center;
  min-height: var(--altezza-tocco);
}

.nv-logo img {
  display: block;
  width: 155px;
  height: auto;
}

.nv-nav {
  display: none;
  margin-left: auto;
  gap: var(--spazio-2);
}

.nv-nav a,
.nv-menu a:not(.nv-pulsante) {
  display: inline-flex;
  align-items: center;
  min-height: var(--altezza-tocco);
  padding: 0 var(--spazio-3);
  border-radius: var(--raggio-controllo);
  color: var(--testo);
  font-size: var(--testo-base);
  font-weight: var(--peso-etichetta);
  text-decoration: none;
}

.nv-nav a:hover,
.nv-menu a:not(.nv-pulsante):hover {
  background: var(--tinta);
  color: var(--verde-notte);
}

.nv-testata-invito {
  display: none;
}

.nv-menu-pulsante {
  display: inline-flex;
  align-items: center;
  gap: var(--spazio-2);
  min-height: var(--altezza-tocco);
  margin-left: auto;
  padding: 0 var(--spazio-3);
  border: 1px solid var(--linea);
  border-radius: var(--raggio-pillola);
  background: var(--card);
  color: var(--verde-notte);
  font: inherit;
  font-family: var(--font);
  font-weight: var(--peso-etichetta);
  cursor: pointer;
}

.nv-menu {
  display: grid;
  gap: var(--spazio-1);
  padding-block: var(--spazio-3) var(--spazio-5);
}

.nv-menu[hidden] {
  display: none;
}

.nv-menu .nv-pulsante {
  margin-top: var(--spazio-3);
}

@media (min-width: 900px) {
  .nv-nav {
    display: flex;
  }

  .nv-testata-invito {
    display: inline-flex;
  }

  .nv-menu-pulsante,
  .nv-menu {
    display: none;
  }
}

/* ---------- Piede ---------- */

.nv-piede {
  padding-block: var(--spazio-7) var(--spazio-6);
  background: var(--verde-notte);
  color: var(--testo-su-scuro);
  font-family: var(--font);
  font-size: var(--testo-piccolo);
  font-weight: var(--peso-testo);
}

.nv-piede-riga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-5);
}

.nv-piede nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-1) var(--spazio-5);
}

.nv-piede nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--altezza-tocco);
  color: var(--card);
  font-weight: var(--peso-etichetta);
  text-decoration: none;
}

.nv-piede nav a:hover {
  text-decoration: underline;
}

.nv-piede-nota {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--spazio-2) var(--spazio-5);
  margin-top: var(--spazio-5);
  padding-top: var(--spazio-5);
  border-top: 1px solid var(--testo-secondario);
}

/* ---------- Sezioni ---------- */

.nv-occhiello {
  margin-bottom: var(--spazio-3);
  color: var(--verde);
  font-size: var(--testo-piccolo);
  font-weight: var(--peso-titolo);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* l'evidenziatore: una frase per pagina */

.nv-azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spazio-3) var(--spazio-5);
  margin-top: var(--spazio-6);
}

.nv-card {
  padding: var(--spazio-5);
  border: 1px solid var(--linea);
  border-radius: var(--raggio-card);
  background: var(--card);
}

.nv-card p {
  margin-top: var(--spazio-3);
  color: var(--testo-secondario);
}

.nv-card .nv-link {
  margin-top: auto;
}

/* ---------- Invito finale ---------- */

@media (prefers-reduced-motion: reduce) {
  .nv-pulsante {
    transition: none;
  }
}

/* ====================================================================
   La home come racconto (10 ottobre 2026): apertura con il telefono, righe alternate
   testo + telefono con una card che si anima, la fascia del totale, la griglia finale.
   Il movimento parte quando un blocco [data-nv-vedi] arriva a schermo (nv.js gli mette .nv-visto).
   ==================================================================== */

/* il telefono: una cornice sola per tutta la pagina */
.nv-tel { width: 250px; padding: 9px; border-radius: 40px; background: var(--verde-notte); box-shadow: 0 24px 60px rgba(6, 40, 31, 0.25); }
.nv-tel img { display: block; width: 100%; height: auto; border-radius: 31px; }

/* apertura: testo a sinistra, telefono intero a destra con due etichette che galleggiano */
.nv-ap { overflow: hidden; background: var(--verde-notte); }
.nv-ap-griglia { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spazio-7); padding-block: var(--spazio-7) 0; text-align: center; }
.nv-ap h1 { color: var(--card); font-size: clamp(2.375rem, 4.6vw, 3.75rem); letter-spacing: -0.03em; line-height: 1.06; }
/* il giallo-ambra del brand: una frase per pagina, qui quella del titolo */
.nv-ap h1 em { color: var(--ambra); font-style: normal; }
.nv-ap p.nv-sotto { max-width: 28em; margin: var(--spazio-5) auto 0; color: var(--testo-su-scuro); font-size: 1.125rem; }
.nv-ap .nv-azioni { justify-content: center; margin-top: var(--spazio-6); }

.nv-ap-scena { position: relative; width: 270px; margin: 0 auto -110px; }
.nv-ap-scena .nv-tel { width: 100%; background: color-mix(in srgb, var(--verde-notte) 88%, var(--verde-vivo)); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45); }
.nv-etichetta { position: absolute; display: grid; gap: 2px; padding: var(--spazio-3) var(--spazio-4); border-radius: 16px; background: var(--card); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3); text-align: left; animation: galleggia 5s ease-in-out infinite; }
.nv-etichetta span { color: var(--testo-secondario); font-size: 12px; font-weight: var(--peso-etichetta); white-space: nowrap; }
.nv-etichetta b { color: var(--verde-notte); font-size: 1.25rem; font-weight: var(--peso-titolo); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nv-etichetta b.nv-su { color: var(--verde); }
.nv-etichetta.nv-una { left: -34px; top: 245px; }
.nv-etichetta.nv-due { right: -34px; top: 345px; animation-delay: -2.5s; }
@keyframes galleggia { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* le righe: testo da una parte, telefono con la sua card dall'altra; fasce alternate */
.nv-fascia { padding-block: clamp(56px, 5vw, 72px); }
/* arrivando da "Come funziona" il titolo non finisce sotto la testata, che resta fissa in alto */
.nv-fascia[id] { scroll-margin-top: 68px; }
.nv-fascia.nv-tinta { background: var(--tinta); }
.nv-fascia.nv-bianca { background: var(--card); }

.nv-cifra { display: block; margin-top: var(--spazio-5); color: var(--verde-notte); font-size: clamp(2.25rem, 4vw, 3.25rem); font-weight: var(--peso-titolo); letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.nv-cifra.nv-verde { color: var(--verde); }

.nv-sotto-cifra { margin-top: var(--spazio-2); color: var(--testo-secondario); font-size: var(--testo-piccolo); }
.nv-sotto-cifra strong { color: var(--verde-notte); font-weight: var(--peso-titolo); }

/* la scena: un riquadro colorato da cui esce il telefono, e una card bianca appoggiata sopra */

.nv-sopra { position: relative; margin: -105px var(--spazio-3) 0 auto; width: min(100% - 2 * var(--spazio-3), 330px); padding: var(--spazio-5); border-radius: var(--raggio-card); background: var(--card); box-shadow: 0 22px 60px rgba(6, 40, 31, 0.18); }
.nv-sopra h3 { margin-bottom: var(--spazio-4); color: var(--testo-secondario); font-size: var(--testo-piccolo); font-weight: var(--peso-etichetta); letter-spacing: 0; }

/* barre che si riempiono */
.nv-scala { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spazio-3); }
.nv-scala-riga { display: grid; gap: 6px; }
.nv-scala-testa { display: flex; align-items: baseline; justify-content: space-between; gap: var(--spazio-3); color: var(--testo-secondario); font-size: var(--testo-piccolo); font-weight: var(--peso-etichetta); }
.nv-scala-testa b { color: var(--verde-notte); font-weight: var(--peso-titolo); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nv-scala-riga.nv-prima .nv-scala-testa { color: var(--verde-notte); font-weight: var(--peso-titolo); }
.nv-scala-barra { height: 10px; border-radius: var(--raggio-pillola); background: var(--tinta); }
.nv-scala-barra i { display: block; width: 0; height: 100%; border-radius: var(--raggio-pillola); background: var(--verde-vivo); transition: width 1s cubic-bezier(0.2, 0.7, 0.2, 1); }
.nv-scala-riga.nv-chiara .nv-scala-barra i { background: color-mix(in srgb, var(--verde-vivo) 40%, var(--card)); }
.nv-scala-riga.nv-sotto .nv-scala-barra i { background: var(--negativo); }
.nv-visto .nv-scala-barra i { width: var(--l); }
.nv-scala-riga:nth-child(2) .nv-scala-barra i { transition-delay: 0.25s; }
.nv-scala-riga:nth-child(3) .nv-scala-barra i { transition-delay: 0.5s; }
.nv-scala-riga:nth-child(4) .nv-scala-barra i { transition-delay: 0.75s; }
.nv-scala-riga:nth-child(5) .nv-scala-barra i { transition-delay: 1s; }

/* la casa divisa fra te e la banca */

/* il grafico: la linea si disegna da sinistra a destra */
.nv-grafico { display: block; width: 100%; height: auto; overflow: visible; }
.nv-grafico text { fill: var(--verde-notte); font-family: var(--font); font-size: 20px; font-weight: 800; }
.nv-grafico .nv-linea { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s cubic-bezier(0.3, 0.6, 0.2, 1); }
.nv-grafico .nv-area, .nv-grafico .nv-arrivo { opacity: 0; transition: opacity 0.8s 1.3s; }
.nv-visto .nv-grafico .nv-linea { stroke-dashoffset: 0; }
.nv-visto .nv-grafico .nv-area, .nv-visto .nv-grafico .nv-arrivo { opacity: 1; }

/* il totale: la fascia scura */

/* la griglia di card di misure diverse */

.nv-tessera { display: flex; flex-direction: column; gap: var(--spazio-3); padding: var(--spazio-6); border-radius: var(--raggio-card-grande); background: var(--card); border: 1px solid var(--linea); color: inherit; text-decoration: none; overflow: hidden; }
.nv-tessera h3 { font-size: 1.5rem; }
.nv-tessera p { color: var(--testo-secondario); }
.nv-tessera .nv-link { margin-top: auto; }
.nv-tessera.nv-scura { border-color: var(--verde-notte); background: var(--verde-notte); }
.nv-tessera.nv-scura h3 { color: var(--card); }
.nv-tessera.nv-scura p { color: var(--testo-su-scuro); }
.nv-tessera.nv-scura .nv-link { color: var(--verde-vivo); }
.nv-tessera.nv-tinta { border-color: var(--tinta); background: var(--tinta); }
.nv-tessera.nv-telefono { position: relative; padding-bottom: 0; }
/* la schermata da computer, dentro la cornice di una finestra del browser; esce dal fondo della tessera */
.nv-tessera.nv-computer { padding-bottom: 0; }
.nv-finestra { margin-top: var(--spazio-4); margin-bottom: -1px; border: 1px solid var(--linea); border-bottom: 0; border-radius: 14px 14px 0 0; background: var(--card); box-shadow: 0 24px 60px rgba(6, 40, 31, 0.16); overflow: hidden; }
.nv-finestra::before { content: ""; display: block; height: 30px; border-bottom: 1px solid var(--linea); background: radial-gradient(circle at 16px 50%, var(--linea) 5px, transparent 6px), radial-gradient(circle at 34px 50%, var(--linea) 5px, transparent 6px), radial-gradient(circle at 52px 50%, var(--linea) 5px, transparent 6px), var(--fondo); }
.nv-finestra img { display: block; width: 100%; height: auto; max-height: 300px; object-fit: cover; object-position: top left; }
.nv-tessera.nv-telefono .nv-tel { width: min(100%, 250px); margin: var(--spazio-5) auto -70px; background: color-mix(in srgb, var(--verde-notte) 88%, var(--verde-vivo)); }
.nv-tondo { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--tinta); color: var(--verde); font-size: 20px; }
.nv-tessera.nv-scura .nv-tondo { background: rgba(255, 255, 255, 0.1); color: var(--verde-vivo); }
.nv-tessera.nv-tinta .nv-tondo { background: var(--card); }

/* chiusura */
.nv-chiusura { padding-block: clamp(64px, 8vw, 96px); background: var(--verde-vivo); text-align: center; }
.nv-chiusura h2 { font-size: clamp(1.875rem, 3.6vw, 2.75rem); letter-spacing: -0.025em; line-height: 1.1; }
.nv-chiusura p { max-width: 28em; margin: var(--spazio-4) auto 0; color: var(--verde-notte); font-size: 1.125rem; }
.nv-chiusura .nv-azioni { justify-content: center; margin-top: var(--spazio-6); }
.nv-chiusura .nv-pulsante { background: var(--verde-notte); color: var(--card); }

/* ogni riga entra salendo, quando arriva a schermo */
[data-nv-vedi] { opacity: 0; transform: translateY(32px); transition: opacity 0.7s, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
[data-nv-vedi].nv-visto { opacity: 1; transform: none; }
/* chi ha chiesto meno movimento vede tutto subito, fermo */
@media (prefers-reduced-motion: reduce) {
  [data-nv-vedi] { opacity: 1; transform: none; }
  [data-nv-vedi], .nv-scala-barra i, .nv-grafico .nv-linea, .nv-grafico .nv-area, .nv-grafico .nv-arrivo { transition: none !important; }
  .nv-etichetta { animation: none; }
}

@media (min-width: 900px) {
  .nv-ap-griglia { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--spazio-7); align-items: center; padding-top: var(--spazio-7); text-align: left; }
  .nv-ap p.nv-sotto { margin-inline: 0; }
  .nv-ap .nv-azioni { justify-content: flex-start; }
  .nv-ap-scena { width: 290px; margin-bottom: -90px; }
  /* ancorata al bordo destro: sale sopra il telefono di 40px qualunque sia la lunghezza del testo */
  .nv-etichetta.nv-una { left: auto; right: calc(100% - 40px); top: 236px; }
  .nv-etichetta.nv-due { right: -90px; top: 340px; }
  
  
  
  
  
  
  
  
  
  .nv-sopra { position: absolute; right: 28px; bottom: 32px; margin: 0; width: 350px; padding: var(--spazio-5) var(--spazio-5); }
  
  
  
  
  
  .nv-tessera.nv-telefono { grid-column: 3; grid-row: 1 / span 2; }
  .nv-finestra img { max-height: 340px; }
}

/* i colori del grafico e delle scritte sulle fasce scure */
.nv-grafico .nv-area { fill: var(--tinta); }
.nv-grafico .nv-linea { fill: none; stroke: var(--verde-vivo); stroke-width: 5; stroke-linecap: round; }
.nv-grafico circle { fill: var(--verde-vivo); }
.nv-ap .nv-occhiello, .nv-ap .nv-link { color: var(--verde-vivo); }
.nv-ap .nv-link:hover { color: var(--card); }
.nv-ap .nv-pulsante:focus-visible, .nv-ap .nv-link:focus-visible { outline-color: var(--card); }

/* ====================================================================
   Il calcolatore unico (10 ottobre 2026): i dati a sinistra, i risultati a destra, che si aggiornano mentre si scrive.
   Le classi iniziano per nv-calc-: non toccano quelle della home, anche dove si somigliano.
   ==================================================================== */

/* apertura: la stessa fascia scura della home, più bassa */
.nv-calc-ap { padding-block: var(--spazio-7); background: var(--verde-notte); }
.nv-calc-ap h1 { color: var(--card); font-size: clamp(2.25rem, 4.4vw, 3.5rem); letter-spacing: -0.03em; line-height: 1.06; }
.nv-calc-ap p.nv-calc-sotto { max-width: 30em; margin-top: var(--spazio-4); color: var(--testo-su-scuro); font-size: 1.125rem; }

.nv-calc { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spazio-5); padding-block: var(--spazio-6) var(--spazio-8); }

/* i dati: tre gruppi in una card sola */
.nv-calc-dati { padding: 0; border-radius: var(--raggio-card-grande); }
.nv-calc-gruppo { padding: var(--spazio-5); border-bottom: 1px solid var(--linea); }
.nv-calc-gruppo:last-child { border-bottom: 0; }
.nv-calc-gruppo-titolo { display: flex; align-items: center; justify-content: space-between; gap: var(--spazio-4); }
.nv-calc-campi { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spazio-4); margin-top: var(--spazio-4); }
.nv-calc-campo label { display: block; color: var(--verde-notte); font-size: var(--testo-piccolo); font-weight: var(--peso-etichetta); }
.nv-calc-campo small { display: block; margin-top: var(--spazio-1); color: var(--testo-secondario); font-size: var(--testo-piccolo); }
.nv-calc-ingresso { display: flex; align-items: center; margin-top: var(--spazio-2); border: 1px solid var(--linea); border-radius: var(--raggio-controllo); background: var(--fondo); }
.nv-calc-ingresso:focus-within { border-color: var(--verde); outline: 2px solid var(--verde-vivo); outline-offset: 1px; }
.nv-calc-ingresso input { flex: 1; min-width: 0; height: 52px; padding: 0 var(--spazio-4); border: 0; background: none; color: var(--verde-notte); font: inherit; font-size: 1.125rem; font-weight: var(--peso-titolo); font-variant-numeric: tabular-nums; outline: 0; }
.nv-calc-ingresso input[readonly] { color: var(--testo-secondario); }
.nv-calc-ingresso span { padding-right: var(--spazio-4); color: var(--testo-secondario); font-weight: var(--peso-etichetta); white-space: nowrap; }

/* l'aiuto che somma le spese voce per voce */
.nv-calc-aiuto { display: inline-flex; align-items: center; min-height: var(--altezza-tocco); margin-top: var(--spazio-1); padding: 0; border: 0; background: none; color: var(--verde); font: inherit; font-size: var(--testo-piccolo); font-weight: var(--peso-titolo); cursor: pointer; }
.nv-calc-aiuto:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; border-radius: 6px; }
.nv-calc-voci { display: grid; gap: var(--spazio-2); margin-top: var(--spazio-2); padding: var(--spazio-4); border-radius: var(--raggio-controllo); background: var(--tinta); }
.nv-calc-voce { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: var(--spazio-3); align-items: center; }
.nv-calc-voce label { color: var(--verde-notte); font-size: var(--testo-piccolo); font-weight: var(--peso-etichetta); }
.nv-calc-voce .nv-calc-ingresso { margin-top: 0; background: var(--card); }
.nv-calc-voce .nv-calc-ingresso input { height: 44px; padding: 0 var(--spazio-3); font-size: 1rem; text-align: right; }
.nv-calc-voce .nv-calc-ingresso span { padding-right: var(--spazio-3); }
.nv-calc-voci-somma { display: flex; justify-content: space-between; gap: var(--spazio-4); margin-top: var(--spazio-2); padding-top: var(--spazio-3); border-top: 1px solid rgba(6, 40, 31, 0.12); color: var(--verde-notte); font-weight: var(--peso-titolo); font-variant-numeric: tabular-nums; }

/* l'interruttore del mutuo */
.nv-calc-interruttore { display: inline-flex; align-items: center; gap: var(--spazio-3); min-height: var(--altezza-tocco); color: var(--testo-secondario); font-size: var(--testo-piccolo); font-weight: var(--peso-etichetta); cursor: pointer; }
.nv-calc-interruttore input { position: absolute; opacity: 0; }
.nv-calc-interruttore i { position: relative; width: 46px; height: 28px; border-radius: var(--raggio-pillola); background: var(--linea); transition: background 0.15s; }
.nv-calc-interruttore i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--card); transition: transform 0.15s; }
.nv-calc-interruttore input:checked + i { background: var(--verde-vivo); }
.nv-calc-interruttore input:checked + i::after { transform: translateX(18px); }
.nv-calc-interruttore input:focus-visible + i { outline: 2px solid var(--verde); outline-offset: 2px; }

/* i risultati: le stesse card della home */
.nv-calc-esito { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spazio-4); align-content: start; }
.nv-calc-card { padding: var(--spazio-5); border: 1px solid var(--linea); border-radius: var(--raggio-card-grande); background: var(--card); }
.nv-calc-card > span { color: var(--testo-secondario); font-size: var(--testo-piccolo); font-weight: var(--peso-etichetta); }
.nv-calc-cifra { display: block; margin-top: var(--spazio-1); color: var(--verde-notte); font-size: clamp(2.25rem, 4vw, 3rem); font-weight: var(--peso-titolo); letter-spacing: -0.035em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.nv-calc-cifra.nv-calc-media { font-size: 2rem; letter-spacing: -0.02em; }
.nv-calc-cifra.nv-calc-verde { color: var(--verde); }
.nv-calc-cifra.nv-calc-negativo { color: var(--negativo); }
.nv-calc-card small { display: block; margin-top: var(--spazio-1); color: var(--testo-secondario); font-size: var(--testo-piccolo); }
.nv-calc-card.nv-calc-primo { border-color: var(--tinta); background: var(--tinta); }
.nv-calc-card.nv-calc-primo .nv-calc-scala { margin-top: var(--spazio-5); }
.nv-calc-card.nv-calc-primo .nv-calc-scala-barra { background: var(--card); }
.nv-calc-coppia { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spazio-4); }

/* barre che si riempiono e si aggiornano mentre si scrive */
.nv-calc-scala { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spazio-3); }
.nv-calc-scala-riga { display: grid; gap: 6px; }
.nv-calc-scala-testa { display: flex; align-items: baseline; justify-content: space-between; gap: var(--spazio-3); color: var(--testo-secondario); font-size: var(--testo-piccolo); font-weight: var(--peso-etichetta); }
.nv-calc-scala-testa b { color: var(--verde-notte); font-weight: var(--peso-titolo); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nv-calc-scala-testa small { display: block; margin: 0; font-weight: var(--peso-testo); }
.nv-calc-scala-riga.nv-calc-prima .nv-calc-scala-testa { color: var(--verde-notte); font-weight: var(--peso-titolo); }
.nv-calc-scala-barra { height: 10px; border-radius: var(--raggio-pillola); background: var(--tinta); }
.nv-calc-scala-barra i { display: block; width: 0; height: 100%; border-radius: var(--raggio-pillola); background: var(--verde-vivo); transition: width 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.3s; }
.nv-calc-scala-riga.nv-calc-chiara .nv-calc-scala-barra i { background: color-mix(in srgb, var(--verde-vivo) 40%, var(--card)); }
.nv-calc-scala-riga.nv-calc-sotto .nv-calc-scala-barra i { background: var(--negativo); }
.nv-calc-scala-esito { display: flex; align-items: baseline; justify-content: space-between; gap: var(--spazio-4); margin-top: var(--spazio-1); padding: var(--spazio-3) var(--spazio-4); border-radius: var(--raggio-controllo); background: var(--verde-notte); color: var(--card); font-size: var(--testo-piccolo); font-weight: var(--peso-titolo); }
.nv-calc-scala-esito b { color: var(--verde-vivo); font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.nv-calc-scala-esito b.nv-calc-negativo { color: color-mix(in srgb, var(--negativo) 45%, var(--card)); }
.nv-calc-card h2 { margin-bottom: var(--spazio-4); font-size: var(--titolo-card); letter-spacing: -0.01em; }

/* la casa divisa fra te e la banca */
.nv-calc-casa-barra { display: flex; gap: 3px; height: 14px; margin-top: var(--spazio-3); }
.nv-calc-casa-barra span { border-radius: var(--raggio-pillola); transition: flex-grow 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.nv-calc-casa-barra .nv-calc-tua { background: var(--verde-vivo); }
.nv-calc-casa-barra .nv-calc-banca { background: var(--linea); }

/* il totale: la card scura della home */
.nv-calc-card.nv-calc-totale { border-color: var(--verde-notte); background: var(--verde-notte); }
.nv-calc-card.nv-calc-totale h2 { color: var(--card); }
.nv-calc-addendi { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spazio-2); }
.nv-calc-addendo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--spazio-4); padding: var(--spazio-3) var(--spazio-4); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--raggio-controllo); color: var(--testo-su-scuro); font-size: var(--testo-piccolo); font-weight: var(--peso-etichetta); }
.nv-calc-addendo b { color: var(--card); font-size: 1.125rem; font-weight: var(--peso-titolo); font-variant-numeric: tabular-nums; }
.nv-calc-addendo b.nv-calc-negativo { color: color-mix(in srgb, var(--negativo) 45%, var(--card)); }
.nv-calc-addendo.nv-calc-somma { border-color: var(--verde-vivo); background: rgba(18, 201, 123, 0.12); color: var(--card); }
.nv-calc-addendo.nv-calc-somma b { color: var(--verde-vivo); font-size: 1.375rem; }
.nv-calc-card.nv-calc-totale small { color: var(--testo-su-scuro); margin-top: var(--spazio-3); }

.nv-calc-invito { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spazio-4); align-items: center; padding: var(--spazio-5); border-radius: var(--raggio-card-grande); background: var(--verde-vivo); }
.nv-calc-invito h2 { font-size: var(--titolo-card); letter-spacing: -0.01em; }
.nv-calc-invito p { margin-top: var(--spazio-2); color: var(--verde-notte); }
.nv-calc-invito .nv-pulsante { background: var(--verde-notte); color: var(--card); }

.nv-calc-metodo { padding-block: var(--spazio-7); background: var(--card); border-top: 1px solid var(--linea); }
.nv-calc-metodo h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); letter-spacing: -0.025em; }
.nv-calc-metodo ul { display: grid; gap: var(--spazio-4); margin-top: var(--spazio-5); padding: 0; list-style: none; }
.nv-calc-metodo li { padding: var(--spazio-5); border-radius: var(--raggio-card); background: var(--fondo); color: var(--testo-secondario); }
.nv-calc-metodo li strong { display: block; margin-bottom: var(--spazio-2); color: var(--verde-notte); font-weight: var(--peso-titolo); }

/* su telefono i risultati sono sotto il modulo: una striscia in basso li tiene a vista mentre si scrive */
.nv-calc-striscia { position: fixed; left: var(--spazio-3); right: var(--spazio-3); bottom: var(--spazio-3); z-index: 9; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spazio-4); padding: var(--spazio-3) var(--spazio-5); border-radius: var(--raggio-card); background: var(--verde-notte); box-shadow: 0 16px 40px rgba(6, 40, 31, 0.35); transition: transform 0.25s, opacity 0.25s; }
.nv-calc-striscia.nv-calc-via { transform: translateY(120%); opacity: 0; }
.nv-calc-striscia span { display: block; color: var(--testo-su-scuro); font-size: 12px; font-weight: var(--peso-etichetta); }
.nv-calc-striscia b { color: var(--card); font-size: 1.25rem; font-weight: var(--peso-titolo); font-variant-numeric: tabular-nums; }
.nv-calc-striscia b.nv-calc-negativo { color: color-mix(in srgb, var(--negativo) 45%, var(--card)); }

.nv-calc [hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .nv-calc-scala-barra i, .nv-calc-casa-barra span, .nv-calc-striscia { transition: none; }
}

@media (min-width: 900px) {
  .nv-calc { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--spazio-6); align-items: start; }
  .nv-calc-campi.nv-calc-due { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nv-calc-coppia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nv-calc-invito { grid-template-columns: minmax(0, 1fr) auto; }
  .nv-calc-metodo ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nv-calc-striscia { display: none; }
}
.nv-calc-ap .nv-occhiello { color: var(--verde-vivo); }

/* ====================================================================
   Le pagine interne (10 ottobre 2026): una testata scura con il titolo, poi il contenuto.
   Usate da lista d'attesa, informative, conferma e pagina non trovata.
   ==================================================================== */

.nv-testa { padding-block: var(--spazio-7); background: var(--verde-notte); }
.nv-testa h1 { color: var(--card); font-size: clamp(2.25rem, 4.4vw, 3.5rem); letter-spacing: -0.03em; line-height: 1.06; }
.nv-testa .nv-occhiello, .nv-testa .nv-link { color: var(--verde-vivo); }
.nv-testa .nv-link:hover { color: var(--card); }
.nv-testa .nv-pulsante:focus-visible, .nv-testa .nv-link:focus-visible { outline-color: var(--card); }
.nv-testa-sotto { max-width: 30em; margin-top: var(--spazio-4); color: var(--testo-su-scuro); font-size: 1.125rem; }
/* le pagine con il solo titolo (informative, conferma, pagina non trovata): chiare, per staccarsi dal piede scuro */
.nv-testa-alta { padding-block: var(--spazio-8); background: var(--fondo); }
.nv-testa-alta h1 { color: var(--verde-notte); }
.nv-testa-alta .nv-testa-sotto { color: var(--testo-secondario); }
.nv-testa-alta .nv-occhiello, .nv-testa-alta .nv-link { color: var(--verde); }
.nv-testa-alta .nv-link:hover { color: var(--verde-notte); }
/* nelle pagine corte il piede resta in fondo allo schermo */
body.nv { display: flex; flex-direction: column; min-height: 100vh; }
body.nv > main { flex: 1; }
.nv-pagina { padding-block: var(--spazio-7) var(--spazio-8); }

/* lista d'attesa: a sinistra cosa si trova, a destra il modulo */
.nv-lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spazio-6); align-items: start; }
.nv-lista [hidden] { display: none !important; }
.nv-lista h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.02em; }
.nv-elenco { display: grid; gap: var(--spazio-4); margin-top: var(--spazio-5); padding: 0; list-style: none; color: var(--verde-notte); font-size: 1.0625rem; font-weight: var(--peso-etichetta); }
.nv-elenco li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--spazio-3); align-items: start; }
.nv-elenco .nv-icona { margin-top: 2px; color: var(--verde); font-size: 22px; }
.nv-lista-nota { margin-top: var(--spazio-6); color: var(--testo-secondario); }
.nv-lista-nota a, .nv-campo-nota a { font-weight: var(--peso-titolo); }

.nv-modulo { padding: var(--spazio-5); border-radius: var(--raggio-card-grande); }
.nv-modulo form { display: grid; gap: var(--spazio-4); }
.nv-modulo-intro { margin-top: calc(-1 * var(--spazio-2)); color: var(--testo-secondario); }
.nv-campo { display: grid; gap: var(--spazio-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.nv-campo label, .nv-campo legend { padding: 0; color: var(--verde-notte); font-size: var(--testo-piccolo); font-weight: var(--peso-etichetta); }
.nv-campo input[type="email"], .nv-campo select { width: 100%; height: 52px; padding: 0 var(--spazio-4); border: 1px solid var(--linea); border-radius: var(--raggio-controllo); background: var(--fondo); color: var(--verde-notte); font: inherit; font-weight: var(--peso-etichetta); }
.nv-campo input:focus-visible, .nv-campo select:focus-visible { border-color: var(--verde); outline: 2px solid var(--verde-vivo); outline-offset: 1px; }
.nv-campo [aria-invalid="true"] { border-color: var(--negativo); }
.nv-modulo p { margin-top: 0; }
.nv-modulo .nv-campo-nota { color: var(--testo-secondario); font-size: var(--testo-piccolo); }
.nv-modulo .nv-campo-errore { color: var(--negativo); font-size: var(--testo-piccolo); font-weight: var(--peso-etichetta); }
.nv-modulo-errori p, .nv-modulo-errori a { color: var(--negativo); }
.nv-modulo-errori ul { margin: var(--spazio-2) 0 0; padding-left: var(--spazio-5); }
.nv-modulo-errori { padding: var(--spazio-3) var(--spazio-4); border-radius: var(--raggio-controllo); background: color-mix(in srgb, var(--negativo) 10%, var(--card)); color: var(--negativo); font-size: var(--testo-piccolo); font-weight: var(--peso-etichetta); }
.nv-modulo-errori a { color: inherit; }
.nv-modulo-stato { min-height: 1.4em; color: var(--testo-secondario); font-size: var(--testo-piccolo); }
.nv-modulo-stato:empty { display: none; }
/* le risposte a scelta multipla: pastiglie che si accendono */
.nv-scelte-griglia { display: flex; flex-wrap: wrap; gap: var(--spazio-2); }
.nv-scelte-griglia label { cursor: pointer; }
.nv-scelte-griglia input { position: absolute; opacity: 0; }
.nv-scelte-griglia span { display: inline-flex; align-items: center; min-height: var(--altezza-tocco); padding: 0 var(--spazio-4); border: 1px solid var(--linea); border-radius: var(--raggio-pillola); background: var(--fondo); color: var(--verde-notte); font-size: var(--testo-piccolo); font-weight: var(--peso-etichetta); }
.nv-scelte-griglia input:checked + span { border-color: var(--verde); background: var(--tinta); font-weight: var(--peso-titolo); }
.nv-scelte-griglia input:focus-visible + span { outline: 3px solid var(--verde); outline-offset: 2px; }
/* il campo trappola per i programmi che compilano moduli da soli: le persone non lo vedono */
.nv-vasetto { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nv-modulo .nv-pulsante { width: 100%; }
.nv-modulo .nv-pulsante:disabled { opacity: 0.55; cursor: default; transform: none; box-shadow: none; }
.nv-modulo-fatto { display: grid; gap: var(--spazio-3); justify-items: start; }
.nv-modulo-fatto .nv-tondo { background: var(--verde-vivo); color: var(--verde-notte); }
.nv-modulo .test-notice { padding: var(--spazio-3) var(--spazio-4); border-radius: var(--raggio-controllo); background: var(--tinta); color: var(--verde-notte); font-size: var(--testo-piccolo); }

@media (min-width: 900px) {
  .nv-lista { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--spazio-8); }
  .nv-lista-testo { padding-top: var(--spazio-5); }
  .nv-modulo { padding: var(--spazio-6); }
}

/* ---------- Guide e "Il progetto": una colonna stretta da leggere, con i conti di esempio in un riquadro ---------- */

.nv-testa .nv-occhiello a { color: inherit; text-decoration: none; }
.nv-testa .nv-occhiello a:hover { text-decoration: underline; }
.nv-articolo { max-width: 720px; font-size: 1.0625rem; line-height: 1.65; }
.nv-articolo h2 { margin-top: var(--spazio-7); font-size: clamp(1.5rem, 2.6vw, 1.875rem); letter-spacing: -0.02em; line-height: 1.2; }
.nv-articolo > h2:first-child { margin-top: 0; }
.nv-articolo p { margin-top: var(--spazio-4); }
.nv-articolo ul { display: grid; gap: var(--spazio-3); margin-top: var(--spazio-4); padding-left: 1.25em; }
.nv-articolo li::marker { color: var(--verde); }
.nv-articolo strong { color: var(--verde-notte); font-weight: var(--peso-titolo); }
.nv-articolo a { font-weight: var(--peso-etichetta); }
.nv-esempio { margin-top: var(--spazio-5); padding: var(--spazio-5); border-radius: var(--raggio-card); background: var(--tinta); }
.nv-esempio h3 { color: var(--testo-secondario); font-size: var(--testo-piccolo); font-weight: var(--peso-etichetta); letter-spacing: 0; }
.nv-esempio dl { margin: var(--spazio-3) 0 0; }
.nv-esempio dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--spazio-4); padding: var(--spazio-2) 0; border-bottom: 1px solid color-mix(in srgb, var(--verde-notte) 12%, transparent); font-size: var(--testo-base); line-height: 1.4; }
.nv-esempio dl > div:last-child { border-bottom: 0; }
.nv-esempio dt { color: var(--testo-secondario); }
.nv-esempio dd { margin: 0; color: var(--verde-notte); font-weight: var(--peso-etichetta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nv-esempio-somma dt, .nv-esempio-somma dd { color: var(--verde-notte); font-weight: var(--peso-titolo); }
.nv-articolo .nv-esempio-nota { margin-top: var(--spazio-3); color: var(--testo-secondario); font-size: var(--testo-piccolo); line-height: 1.5; }
.nv-articolo-fine { display: grid; gap: var(--spazio-4); align-items: center; max-width: 720px; margin-top: var(--spazio-7); padding: var(--spazio-5); border-radius: var(--raggio-card-grande); background: var(--verde-notte); }
.nv-articolo-fine h2 { color: var(--card); font-size: var(--titolo-card); letter-spacing: -0.01em; }
.nv-articolo-fine p { margin-top: var(--spazio-2); color: var(--testo-su-scuro); }
.nv-articolo-fine .nv-azioni { margin-top: 0; }
.nv-articolo-fine .nv-link { color: var(--verde-vivo); }
.nv-articolo-fine .nv-link:hover { color: var(--card); }
.nv-articolo-indietro { margin-top: var(--spazio-5); }

/* l'indice delle guide: una card per guida, tutta cliccabile */
.nv-guide { display: grid; gap: var(--spazio-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
a.nv-guida { transition: box-shadow 0.15s, transform 0.15s; }
a.nv-guida:hover { box-shadow: var(--ombra-card); transform: translateY(-2px); }
a.nv-guida:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; }
.nv-guida h2 { font-size: 1.5rem; letter-spacing: -0.01em; line-height: 1.25; }
.nv-guida.nv-scura h2 { color: var(--card); }
@media (prefers-reduced-motion: reduce) { a.nv-guida { transition: none; } a.nv-guida:hover { transform: none; } }

/* ---------- Domande frequenti: la domanda in vista, la risposta si apre con un clic ---------- */

.nv-domande { margin-top: var(--spazio-7); }
.nv-domande > h2 { margin-bottom: var(--spazio-4); font-size: clamp(1.5rem, 2.6vw, 1.875rem); letter-spacing: -0.02em; }
.nv-domanda { border-top: 1px solid var(--linea); }
.nv-domanda:last-child { border-bottom: 1px solid var(--linea); }
.nv-domanda summary { display: flex; align-items: center; justify-content: space-between; gap: var(--spazio-4); min-height: 60px; padding-block: var(--spazio-3); cursor: pointer; list-style: none; }
.nv-domanda summary::-webkit-details-marker { display: none; }
.nv-domanda summary:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; border-radius: 8px; }
.nv-domanda h3 { font-size: 1.125rem; letter-spacing: 0; line-height: 1.35; }
/* il più che diventa meno: due trattini, uno ruota quando la risposta è aperta */
.nv-domanda summary::after { content: ""; flex: none; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(var(--verde), var(--verde)) center / 14px 2px no-repeat, linear-gradient(var(--verde), var(--verde)) center / 2px 14px no-repeat, var(--tinta); transition: transform 0.2s; }
.nv-domanda[open] summary::after { background: linear-gradient(var(--verde), var(--verde)) center / 14px 2px no-repeat, var(--tinta); transform: rotate(180deg); }
.nv-domanda p { margin: 0; padding: 0 52px var(--spazio-5) 0; color: var(--testo-secondario); }
.nv-domande-larghe { max-width: 820px; margin-top: 0; font-size: 1.0625rem; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .nv-domanda summary::after { transition: none; } }
.nv-testa-data { margin-top: var(--spazio-4); color: var(--testo-su-scuro); font-size: var(--testo-piccolo); }

/* ====================================================================
   Il comparatore "Affitto breve o affitto lungo" (11 ottobre 2026).
   Usa le card e i campi del calcolatore (nv-calc-); le classi sue iniziano per nv-cf-.
   ==================================================================== */

/* le linguette che portano da un calcolatore all'altro, nella fascia scura */
.nv-calc-altri { display: flex; flex-wrap: wrap; gap: var(--spazio-2); margin-bottom: var(--spazio-5); }
.nv-calc-altri a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--spazio-4); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--raggio-pillola); color: var(--testo-su-scuro); font-size: var(--testo-piccolo); font-weight: var(--peso-etichetta); text-decoration: none; }
.nv-calc-altri a:hover { border-color: var(--card); color: var(--card); }
.nv-calc-altri a[aria-current="page"] { border-color: var(--verde-vivo); background: var(--verde-vivo); color: var(--verde-notte); font-weight: var(--peso-titolo); }
.nv-calc-altri a:focus-visible { outline: 3px solid var(--card); outline-offset: 2px; }

/* i due colori del confronto: breve verde vivo, lungo verde notte */
.nv-cf-punto { display: inline-block; flex: none; width: 10px; height: 10px; margin-right: var(--spazio-2); border-radius: 50%; background: var(--verde-vivo); }
.nv-cf-punto.nv-cf-lungo { background: var(--verde-notte); }
.nv-cf-dati .nv-calc-gruppo h3 { display: flex; align-items: center; }
.nv-cf-guida { margin-top: var(--spazio-2); color: var(--testo-secondario); font-size: var(--testo-piccolo); }

/* su telefono i risultati vengono prima dei dati: i numeri di partenza danno già una risposta */
.nv-cf-vista { order: -1; display: grid; gap: var(--spazio-4); }
.nv-calc.nv-cf-calc { padding-bottom: var(--spazio-5); }
.nv-cf-sotto { display: grid; gap: var(--spazio-4); padding-bottom: var(--spazio-8); }

/* scelta fra due valori */
.nv-cf-scelta { display: flex; gap: 4px; margin-top: var(--spazio-2); padding: 4px; border: 1px solid var(--linea); border-radius: var(--raggio-controllo); background: var(--fondo); }
.nv-cf-scelta label { flex: 1; display: block; position: relative; margin: 0; cursor: pointer; }
.nv-cf-scelta input { position: absolute; opacity: 0; }
.nv-cf-scelta span { display: grid; place-items: center; min-height: 44px; padding: 0 var(--spazio-2); border-radius: calc(var(--raggio-controllo) - 4px); color: var(--testo-secondario); font-size: var(--testo-piccolo); font-weight: var(--peso-etichetta); text-align: center; line-height: 1.25; }
.nv-cf-scelta input:checked + span { background: var(--verde-notte); color: var(--card); font-weight: var(--peso-titolo); }
.nv-cf-scelta input:focus-visible + span { outline: 2px solid var(--verde); outline-offset: 2px; }

/* le spese del breve: una riga per voce, nome e peso a sinistra, campo a destra */
.nv-cf-spese { display: grid; margin-top: var(--spazio-3); }
.nv-cf-spesa { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: var(--spazio-3); align-items: center; padding: var(--spazio-3) 0; border-bottom: 1px solid var(--linea); }
.nv-cf-spesa-nome { display: flex; align-items: center; gap: var(--spazio-3); min-width: 0; }
.nv-cf-spesa-nome label.nv-cf-nome { display: block; color: var(--verde-notte); font-size: var(--testo-piccolo); font-weight: var(--peso-etichetta); line-height: 1.3; }
.nv-cf-spesa-nome small { display: block; margin-top: 2px; color: var(--verde); font-size: 12px; font-weight: var(--peso-etichetta); font-variant-numeric: tabular-nums; line-height: 1.3; }
.nv-cf-spesa .nv-calc-ingresso { margin-top: 0; }
.nv-cf-spesa .nv-calc-ingresso input { height: 44px; padding: 0 var(--spazio-3); font-size: 1rem; text-align: right; }
.nv-cf-spesa .nv-calc-ingresso span { padding-right: var(--spazio-3); }
.nv-cf-spesa.nv-cf-spenta .nv-calc-ingresso { opacity: 0.4; }
.nv-cf-spesa.nv-cf-spenta .nv-cf-spesa-nome small { color: var(--testo-secondario); }
.nv-cf-spesa .nv-calc-interruttore { flex: none; min-height: 0; }
.nv-cf-somma { display: flex; align-items: baseline; justify-content: space-between; gap: var(--spazio-4); margin-top: var(--spazio-4); padding: var(--spazio-3) var(--spazio-4); border-radius: var(--raggio-controllo); background: var(--tinta); color: var(--verde-notte); font-size: var(--testo-piccolo); font-weight: var(--peso-titolo); }
.nv-cf-somma b { font-size: 1.125rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* il risultato in cima */
.nv-cf-esito-parola { display: block; margin-top: var(--spazio-1); color: var(--verde-notte); font-size: clamp(2rem, 3.6vw, 2.75rem); font-weight: var(--peso-titolo); letter-spacing: -0.03em; line-height: 1.08; }
.nv-cf-lungo-riga .nv-calc-scala-barra i { background: var(--verde-notte); }

/* il punto di pareggio: la riga da 0 a 100% è anche il cursore dell'occupazione */
.nv-cf-pari-testa { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--spazio-4); }
.nv-cf-pari-testa > div:last-child { text-align: right; }
.nv-cf-pari-testa span { display: block; color: var(--testo-secondario); font-size: var(--testo-piccolo); font-weight: var(--peso-etichetta); }
.nv-cf-pari-testa .nv-calc-cifra { font-size: 2rem; letter-spacing: -0.02em; }
.nv-cf-pari { --pollice: 30px; position: relative; height: 14px; margin: calc(var(--spazio-6) + 6px) 0 var(--spazio-4); border-radius: var(--raggio-pillola); background: var(--tinta); }
.nv-cf-pari i { display: block; height: 100%; border-radius: var(--raggio-pillola); background: var(--verde-vivo); }
.nv-cf-pari b { position: absolute; top: -8px; width: 3px; height: 30px; margin-left: -1px; border-radius: 2px; background: var(--verde-notte); pointer-events: none; transition: left 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.nv-cf-pari b::before { content: attr(data-testo); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding-bottom: 4px; color: var(--verde-notte); font-size: 12px; font-weight: var(--peso-titolo); white-space: nowrap; }
.nv-cf-pari b.nv-cf-a-destra::before { left: auto; right: 0; transform: none; }
.nv-cf-pari b.nv-cf-a-sinistra::before { left: 0; transform: none; }
.nv-cf-pari input { position: absolute; inset: -15px 0; width: 100%; height: 44px; margin: 0; background: none; cursor: grab; -webkit-appearance: none; appearance: none; }
.nv-cf-pari input:active { cursor: grabbing; }
.nv-cf-pari input::-webkit-slider-runnable-track { height: 44px; background: none; }
.nv-cf-pari input::-moz-range-track { height: 44px; background: none; }
.nv-cf-pari input::-webkit-slider-thumb { -webkit-appearance: none; width: var(--pollice); height: var(--pollice); margin-top: 7px; border: 4px solid var(--verde); border-radius: 50%; background: var(--card); box-shadow: 0 2px 8px rgba(6, 40, 31, 0.25); }
.nv-cf-pari input::-moz-range-thumb { width: 22px; height: 22px; border: 4px solid var(--verde); border-radius: 50%; background: var(--card); box-shadow: 0 2px 8px rgba(6, 40, 31, 0.25); }
.nv-cf-pari input:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; border-radius: var(--raggio-pillola); }
.nv-cf-pari-scala { display: flex; justify-content: space-between; color: var(--testo-secondario); font-size: 12px; font-weight: var(--peso-etichetta); }
.nv-cf-pari-nota { margin-top: var(--spazio-3) !important; }

/* il conto: una tabella sola, una colonna per modo di affittare */
.nv-cf-conto { width: 100%; border-collapse: collapse; font-size: var(--testo-piccolo); font-variant-numeric: tabular-nums; }
.nv-cf-conto th, .nv-cf-conto td { padding: var(--spazio-3) 0 var(--spazio-3) var(--spazio-3); border-bottom: 1px solid var(--linea); text-align: right; white-space: nowrap; }
.nv-cf-conto th:first-child, .nv-cf-conto td:first-child { padding-left: 0; text-align: left; white-space: normal; }
.nv-cf-conto thead th { color: var(--verde-notte); font-weight: var(--peso-titolo); }
.nv-cf-conto thead th:first-child { color: var(--testo-secondario); font-weight: var(--peso-etichetta); }
.nv-cf-conto thead .nv-cf-punto { margin-right: 6px; }
.nv-cf-conto tbody td { color: var(--verde-notte); font-weight: var(--peso-titolo); }
.nv-cf-conto tbody td:first-child { color: var(--testo-secondario); font-weight: var(--peso-etichetta); }
.nv-cf-conto tbody tr:first-child td:first-child { color: var(--verde-notte); font-weight: var(--peso-titolo); }
.nv-cf-conto td.nv-cf-niente { color: var(--testo-secondario); opacity: 0.5; }
.nv-cf-conto tfoot td { padding: var(--spazio-3) var(--spazio-4); border: 0; background: var(--verde-notte); color: var(--verde-vivo); font-size: 1.125rem; font-weight: var(--peso-titolo); }
.nv-cf-conto tfoot td:first-child { padding-left: var(--spazio-4); border-radius: var(--raggio-controllo) 0 0 var(--raggio-controllo); color: var(--card); font-size: var(--testo-piccolo); }
.nv-cf-conto tfoot td:last-child { border-radius: 0 var(--raggio-controllo) var(--raggio-controllo) 0; }
.nv-cf-conto tfoot td.nv-calc-negativo { color: color-mix(in srgb, var(--negativo) 45%, var(--card)); }
.nv-cf-conto tfoot tr:first-child td { border: 0; padding: var(--spazio-2); background: none; }

@media (prefers-reduced-motion: reduce) { .nv-cf-pari b { transition: none; } }

@media (min-width: 900px) {
  /* i dati a sinistra; a destra risultato e pareggio restano fermi mentre si scorrono i dati */
  .nv-cf-vista { order: 0; position: sticky; top: 88px; }
  .nv-cf-spesa { grid-template-columns: minmax(0, 1fr) 128px; }
  .nv-cf-conto th, .nv-cf-conto td { padding-left: var(--spazio-6); }
  .nv-cf-conto th:nth-child(n+2), .nv-cf-conto td:nth-child(n+2) { width: 22%; }
}

/* ====================================================================
   La home dell'11 ottobre 2026: "rende in tre modi". Le classi nuove iniziano per nv-h-;
   apertura, card, barre, grafico e movimento sono quelli della home precedente (più sopra).
   Dopo questa home non servono più nv-racconto con il telefono, nv-mosaico e nv-totale: restano, da togliere con una pulizia a parte.
   ==================================================================== */

/* apertura: due motivi per fidarsi, al posto della riga "Si apre nel browser" */
.nv-h-fiducia { display: flex; flex-wrap: wrap; gap: var(--spazio-2) var(--spazio-5); margin: var(--spazio-5) 0 0; padding: 0; list-style: none; color: var(--testo-su-scuro); font-size: var(--testo-piccolo); font-weight: var(--peso-etichetta); }
@media (min-width: 900px) { .nv-ap .nv-ap-testo { padding-bottom: var(--spazio-8); } }
.nv-h-fiducia li { display: inline-flex; align-items: center; gap: var(--spazio-2); }
.nv-h-fiducia .nv-icona { color: var(--verde-vivo); font-size: 18px; }

/* la tesi: i tre pezzi in una card scura, su fondo chiaro per staccarsi dall'apertura */

/* le tre card: l'occhiello porta il numero */

/* variante corta: i tre pezzi affiancati, ognuno con il suo numero e la sua card, senza telefono */

/* il rendimento: una fascia bassa, senza telefono */

/* come funziona: tre passi in riga, poi il computer con la schermata intera e il telefono accanto */
.nv-h-come-testa h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); letter-spacing: -0.025em; line-height: 1.1; }
.nv-h-passi { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spazio-5); margin: var(--spazio-6) 0 0; padding: 0; list-style: none; counter-reset: passo; }
.nv-h-passi li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--spazio-4); align-items: start; counter-increment: passo; }
.nv-h-passi li::before { content: counter(passo); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--verde-notte); color: var(--card); font-weight: var(--peso-titolo); }
.nv-h-passi h3 { font-size: 1.125rem; letter-spacing: -0.01em; }
.nv-h-passi p { margin-top: var(--spazio-1); color: var(--testo-secondario); }
.nv-h-schermi { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spazio-4); margin-top: var(--spazio-6); }
/* qui la schermata si vede intera: l'immagine finisce nello spazio fra due card */
.nv-h-schermi .nv-finestra img { max-height: none; }
.nv-h-schermi .nv-h-telefono .nv-tel { margin-bottom: -40px; }

/* i calcolatori in risalto: una fascia scura, le card bianche ci stanno sopra */
.nv-h-calc-fascia { background: var(--verde-notte); }
.nv-h-calc-testa { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--spazio-4); margin-bottom: var(--spazio-6); }
.nv-h-calc-testa h2 { color: var(--card); font-size: clamp(1.75rem, 3.2vw, 2.5rem); letter-spacing: -0.025em; line-height: 1.1; }
.nv-h-calc-testa .nv-occhiello, .nv-h-calc-testa .nv-link { color: var(--verde-vivo); }
.nv-h-calc { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spazio-4); }
.nv-h-calc a.nv-tessera { border-color: var(--card); transition: transform 0.15s; }
.nv-h-calc a.nv-tessera:hover { transform: translateY(-3px); }
.nv-h-calc h3 { font-size: 1.375rem; letter-spacing: -0.015em; }
.nv-h-calc p { color: var(--testo-secondario); }
.nv-h-calc .nv-pulsante { align-self: flex-start; margin-top: var(--spazio-4); }

/* invito a metà pagina, dopo i tre pezzi */
.nv-h-invito { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spazio-4); align-items: center; padding: var(--spazio-6); border-radius: var(--raggio-card-grande); background: var(--verde-vivo); }
.nv-h-invito h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.02em; }
.nv-h-invito p { margin-top: var(--spazio-2); color: var(--verde-notte); }
.nv-h-invito .nv-pulsante { background: var(--verde-notte); color: var(--card); justify-self: start; }

@media (min-width: 900px) {
  
  .nv-h-passi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nv-h-schermi { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); align-items: stretch; }
  .nv-h-schermi .nv-tessera.nv-telefono { grid-column: auto; grid-row: auto; }
  .nv-h-calc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  
  
  
  .nv-h-invito { grid-template-columns: minmax(0, 1fr) auto; }
}
/* fra 900 e 1100 px il telefono è vicino al bordo: la seconda etichetta resta dentro lo schermo */
@media (min-width: 900px) and (max-width: 1099px) { .nv-etichetta.nv-due { right: -20px; } }

/* La home dopo il primo riscontro (11 ottobre 2026): quattro risposte separate, nessuna somma.
   Non servono più nv-h-tesi, nv-h-pezzi, nv-h-numero, nv-h-capitolo, nv-h-tre e nv-h-rende: restano, da togliere con la pulizia. */
.nv-h-intro { max-width: 34em; margin-bottom: var(--spazio-6); }
.nv-h-intro h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); letter-spacing: -0.025em; line-height: 1.1; }
/* quattro card, due per riga su desktop: titolo, numero, una riga, il grafico in fondo */
.nv-h-quattro { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spazio-4); }
.nv-h-quattro .nv-tessera { height: 100%; gap: var(--spazio-2); }
.nv-h-quattro h3 { font-size: 1.375rem; letter-spacing: -0.015em; }
.nv-h-quattro .nv-cifra { margin-top: var(--spazio-2); font-size: clamp(2.25rem, 4vw, 3.25rem); }
.nv-h-quattro .nv-sotto-cifra { margin-bottom: var(--spazio-4); }
.nv-h-quattro .nv-grafico { max-height: 150px; }
.nv-h-quattro .nv-grafico text { font-size: 12px; font-weight: var(--peso-etichetta); fill: var(--testo-secondario); }
.nv-h-quattro .nv-sopra { position: static; width: auto; max-width: none; margin: auto 0 0; padding: var(--spazio-4) 0 0; border: 0; border-top: 1px solid var(--linea); border-radius: 0; background: none; box-shadow: none; transform: none; opacity: 1; }
/* l'elenco delle uscite: nome, euro, parte degli incassi e una barra sottile */
.nv-h-voci { display: grid; gap: var(--spazio-3); margin: 0; padding: 0; list-style: none; font-size: var(--testo-piccolo); font-variant-numeric: tabular-nums; }
.nv-h-voci li { display: grid; grid-template-columns: minmax(0, 1fr) auto 3em; gap: 6px var(--spazio-3); align-items: baseline; color: var(--testo-secondario); font-weight: var(--peso-etichetta); }
.nv-h-voci b { color: var(--verde-notte); font-weight: var(--peso-titolo); white-space: nowrap; }
.nv-h-voci em { color: var(--testo-secondario); font-style: normal; text-align: right; }
.nv-h-voci i { grid-column: 1 / -1; height: 6px; border-radius: var(--raggio-pillola); background: linear-gradient(var(--verde-vivo), var(--verde-vivo)) left / 0 100% no-repeat, var(--tinta); transition: background-size 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.nv-visto .nv-h-voci i { background-size: var(--l) 100%; }
.nv-h-parole { max-width: 36em; margin-inline: auto; text-align: center; }
.nv-h-parole h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); letter-spacing: -0.025em; line-height: 1.1; }
.nv-h-parole p:last-child { margin-top: var(--spazio-3); color: var(--testo-secondario); font-size: 1.0625rem; }
@media (min-width: 760px) {
  .nv-h-quattro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nv-h-quattro .nv-tessera:nth-child(even) { transition-delay: 0.12s; }
}