/* ============================================================
   valuta.css — /valuta/ sul sistema di tokens.css (11/10/2026).

   Quarta pagina dopo /agenzie/, la mappa e la scheda. Solo token: nessun
   colore scritto qui. Le parole della pagina non cambiano; escono le icone
   (emoji, spunte, triangoli), che il sistema non usa: la parola porta il
   significato.

   Il contenuto sta in .sistema.valuta, e le classi va-* sono quelle di
   sempre: fuori da qui (la valutazione salvata, /valuta-visura/) restano
   col loro aspetto vecchio finche' non tocca a loro. I componenti che la
   pagina condivide con la scheda (stima lavori, mutuo) stanno in
   componenti.css.

   Nessun colore di giudizio: il verde dell'occasione e l'ambra del «caro»
   erano un verdetto quanto la parola (06/10/2026, la stessa scelta della
   scheda e del dossier).
   ============================================================ */

/* ---------- la testa: la fascia scura ---------- */
.va-testa { padding-top: 64px; padding-bottom: 80px; }
.sistema .va-testa h1 { font-size: 64px; margin: 18px 0 18px; }
.sistema .va-testa .va-attacco { font-size: 18px; max-width: 640px; }

.va-bivio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 44px 0 28px; }
.sistema .scuro .va-scelta { display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  font: inherit; color: inherit; cursor: pointer; text-decoration: none; padding: 30px 32px 28px;
  border-top: 2px solid var(--brass-2); transition: border-color .2s; }
.sistema .scuro .va-scelta:hover { border-color: var(--carta-28); border-top-color: var(--paper); }
.sistema .scuro .va-scelta:focus-visible { outline: 2px solid var(--brass-2); outline-offset: 3px; }
.sistema .scuro .va-scelta h2 { font-size: 30px; margin: 14px 0 0; }
.sistema .scuro .va-scelta p { font-size: 16px; line-height: 1.6; margin-top: 12px; }
.sistema .scuro .va-scelta p b { color: var(--paper); font-weight: 600; }
.va-scelta-cta { margin-top: 22px; font-size: 15px; font-weight: 600; color: var(--brass-2); }
.sistema .scuro .va-scelta-nota { font-size: 13px; font-style: normal; color: var(--carta-testo); margin-top: 10px; }
.sistema .scuro .va-perimetro { font-size: 15px; line-height: 1.6; color: var(--carta-testo); max-width: 820px;
  border-left: 2px solid var(--brass-2); padding: 2px 0 2px 18px; background: transparent; }
.sistema .scuro .va-perimetro b { color: var(--paper); }

/* ---------- il modulo e i risultati ---------- */
.sistema .va-body { max-width: none; margin: 0; padding: 80px var(--gutter) 110px; }
.sistema .va-body .va-inner, .sistema .va-grid { max-width: 1240px; margin: 0 auto; }
.sistema .va-form-titolo { font-size: 40px; margin: 0 0 30px; padding: 0; }
.sistema .va-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }

/* incolla l'annuncio */
.sistema .va-paste { background: var(--paper-3); border: 1px solid var(--line); border-radius: 0; padding: 24px 26px; margin-bottom: 20px; }
.sistema .va-paste label { font-size: 15px; font-weight: 600; color: var(--ink); }
.sistema .va-paste-hint { font-size: 14px; line-height: 1.55; color: var(--testo-2); margin: 6px 0 12px; }
.sistema .va-paste textarea { border-radius: 0; border: 1px solid var(--line); background: var(--paper-2);
  font-size: 15px; color: var(--ink); padding: 12px 14px; }
.sistema .va-paste-ok, .sistema .va-paste-ko { font-size: 14px; font-weight: 600; color: var(--ink);
  border-left: 2px solid var(--ink); padding-left: 12px; }
.sistema .va-paste-ko { border-left-color: var(--rust); }

/* il modulo */
.sistema .va-form { background: var(--paper-2); border: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 30px 32px; }
.sistema .va-form label { font-size: 13.5px; font-weight: 600; color: var(--testo); }
.sistema .va-form .opt, .sistema .va-profilo summary .opt { font-weight: 400; color: var(--testo-3); font-size: 12.5px; }
.sistema .va-form input, .sistema .va-form select { border-radius: 0; border: 1px solid var(--line); background: var(--paper);
  color: var(--ink); min-height: 48px; font-size: 16px; padding: 10px 14px; box-shadow: none; }
.sistema .va-form input:focus, .sistema .va-form select:focus,
.sistema .va-paste textarea:focus { outline: 2px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
.sistema .va-form .va-solo-case { font-size: 14px; line-height: 1.55; color: var(--testo-2); }
.sistema .va-campi-acquisto-hint { font-size: 14px; color: var(--testo-2); }
.sistema .va-campi-acquisto-hint b { color: var(--ink); }
.sistema .va-checks label { font-size: 15px; color: var(--testo); }
.sistema .va-checks input { width: 18px; height: 18px; min-height: 0; accent-color: var(--ink); }

/* comprare, vendere, mettere a reddito: tre scelte a filetto */
.sistema .va-switch { background: transparent; border: 1px solid var(--line); border-radius: 0; padding: 0; gap: 0; }
.sistema .va-switch-opt { border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent;
  padding: 14px 16px; min-height: 64px; box-shadow: none; cursor: pointer; font-family: var(--sans); }
.sistema .va-switch-opt:last-child { border-right: 0; }
.sistema .va-switch-opt b { font-size: 15px; color: var(--ink); }
.sistema .va-switch-opt span { font-size: 13px; color: var(--testo-2); }
.sistema .va-switch-opt.on { background: var(--ink); box-shadow: none; }
.sistema .va-switch-opt.on b { color: var(--paper); }
.sistema .va-switch-opt.on span { color: var(--carta-testo); }
.sistema .va-switch-opt:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }

/* le caratteristiche facoltative */
.sistema .va-profilo { border: 1px solid var(--line); border-radius: 0; background: var(--paper); padding: 4px 16px; margin: 8px 0 18px; }
.sistema .va-profilo summary { color: var(--ink); font-size: 15px; padding: 12px 0; }

/* i due pulsanti */
.sistema.valuta .cta { background: var(--ink) !important; color: var(--paper) !important; border-radius: 0;
  box-shadow: none; min-height: 48px; padding: 14px 24px; font-family: var(--sans); font-size: 15px; font-weight: 600; }
.sistema.valuta .cta:hover { background: var(--rust) !important; color: var(--paper) !important; }
.sistema.valuta .cta.ghost { background: transparent !important; color: var(--ink) !important; border: 1px solid var(--ink) !important; }
.sistema.valuta .cta.ghost:hover { background: var(--ink) !important; color: var(--paper) !important; }

/* ---------- i risultati ---------- */
.sistema .va-placeholder { background: transparent; border: 1px dashed var(--line); border-radius: 0; padding: 48px 32px; }
.sistema .va-placeholder p { font-size: 16px; color: var(--testo-2); }
.sistema .va-error { background: transparent; color: var(--ink); border-radius: 0; border-left: 2px solid var(--rust);
  padding: 4px 0 4px 18px; font-size: 16px; }

/* il riquadro dei numeri, in alto */
.sistema .va-results-col .va-hero { background: var(--paper-2); color: var(--testo); border: 1px solid var(--line);
  border-top: 2px solid var(--ink); border-radius: 0; padding: 28px 30px 26px; margin-bottom: 18px; }
.sistema .va-hero-dove { font-family: var(--mono); font-size: 11.5px; line-height: 1.6; letter-spacing: .06em;
  opacity: 1; color: var(--testo-2); margin-bottom: 14px; }
.sistema .va-hero-giudizio { font-family: var(--serif); font-size: 32px; font-weight: 500; line-height: 1.15;
  letter-spacing: -.015em; color: var(--ink); }
.sistema .va-hero-giudizio .pct { color: var(--testo-2); }
.sistema .va-hero-riga { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0;
  margin-top: 22px; border-top: 1px solid var(--line-2); }
.sistema .va-hero-riga > div { padding: 16px 18px 0 0; }
.sistema .va-hero-riga div b { font-family: var(--serif); font-size: 24px; font-weight: 500; color: var(--ink); margin-bottom: 4px; }
.sistema .va-hero-riga div span { font-size: 13px; line-height: 1.45; opacity: 1; color: var(--testo-2); }
/* da anonimo il prezzo massimo e' coperto: nella pagina non c'e' */
.sistema .va-hero-riga div b.va-coperto { width: 7.5em; height: 24px; margin: 0 0 8px; border-radius: 0;
  background: repeating-linear-gradient(135deg, var(--line) 0 6px, var(--line-2) 6px 12px); }

/* la riga di zona */
.sistema .va-verdict { margin: 4px 0 18px; }
.sistema .va-zona { font-size: 14px; font-weight: 600; color: var(--testo); }
.sistema .va-metodo { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  border-radius: 0; background: transparent; border: 1px solid var(--line); color: var(--testo-2); padding: 3px 8px; }
.sistema .va-metodo.esatta { background: transparent; color: var(--ink); border-color: var(--ink); }
.sistema .vs-zona-incerta { background: transparent; border: 0; border-left: 2px solid var(--rust); border-radius: 0;
  padding: 2px 0 2px 18px; margin: 14px 0; font-size: 15px; font-weight: 400; line-height: 1.6; color: var(--testo); }
.sistema .vs-zona-incerta b { color: var(--ink); }
.sistema .vs-zona-incerta span { color: var(--testo-2); font-size: 14px; }

/* il mercato e l'affidabilita': parole, non semafori */
.sistema .liq-badge { background: transparent; border: 0; border-left: 2px solid var(--ink); border-radius: 0;
  padding: 2px 0 2px 18px; margin: 0 0 18px; box-shadow: none; }
.sistema .liq-badge b { font-family: var(--serif); font-size: 20px; font-weight: 500; color: var(--ink); }
.sistema .liq-badge span { font-size: 14.5px; color: var(--testo-2); }
.sistema .vis-affid { background: transparent; border: 1px solid var(--line); border-radius: 0; padding: 18px 22px; margin: 0 0 18px; }
.sistema .vis-affid .affid-dot { display: none; }
.sistema .vis-affid .affid-head b { font-family: var(--serif); font-size: 20px; font-weight: 500; color: var(--ink); }
.sistema .affid-note { font-size: 15px; color: var(--testo); }
.sistema .affid-consiglio { font-size: 13.5px; color: var(--testo-2); }

/* le schede dei numeri */
.sistema .va-card { background: var(--paper-2); border: 1px solid var(--line); border-radius: 0; box-shadow: none;
  padding: 26px 30px; margin-bottom: 18px; }
.sistema .va-card.occ-forte, .sistema .va-card.occ-buono, .sistema .va-card.occ-caro,
.sistema .va-card-profilo { background: var(--paper-2); border: 1px solid var(--line); }
.sistema .va-label { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--rust); margin-bottom: 12px; }
.sistema .va-label .opt { letter-spacing: .1em; color: var(--testo-3); }
.sistema .va-big { font-family: var(--serif); font-size: 40px; font-weight: 500; line-height: 1.05; letter-spacing: -.02em;
  color: var(--ink); margin-bottom: 8px; }
.sistema .va-card.occ-forte .va-big, .sistema .va-card.occ-buono .va-big,
.sistema .va-card.occ-caro .va-big { color: var(--ink); }
.sistema .va-sub { display: block; font-size: 15px; line-height: 1.6; color: var(--testo-2); margin-top: 6px; }
.sistema .va-sub b { color: var(--ink); }
.sistema .va-affitto { gap: 0; margin: 0 0 6px; border-top: 1px solid var(--line-2); }
.sistema .va-affitto > div { padding: 14px 18px 4px 0; gap: 4px; }
.sistema .va-affitto b { font-family: var(--serif); font-size: 24px; font-weight: 500; color: var(--ink); }
.sistema .va-affitto span { font-size: 13px; line-height: 1.45; color: var(--testo-2); }
.sistema .va-neg { color: var(--ink); }
/* il costo totale: il riquadro non e' piu' blu notte, il numero si legge da se' */
.sistema .va-costo { background: var(--paper-2); border-top: 2px solid var(--ink); }
.sistema .va-costo .va-label { color: var(--rust); }
.sistema .va-costo .va-big { color: var(--ink); }
.sistema .va-costo .va-sub { color: var(--testo-2); }

/* la stima affinata, voce per voce */
.sistema .va-profilo-griglia { background: transparent; border-radius: 0; padding: 0; margin: 18px 0 14px;
  border-top: 1px solid var(--line); }
.sistema .vpg-titolo { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--testo-3); padding: 12px 0 4px; }
.sistema .vpg-riga { border-bottom: 1px solid var(--line-2); padding: 10px 0; font-size: 15px; }
.sistema .vpg-voce { color: var(--ink); }
.sistema .vpg-eff, .sistema .vpg-eff.pos, .sistema .vpg-eff.neg { font-family: var(--mono); font-weight: 500; color: var(--ink); }
.sistema .vpg-nota { font-size: 13px; font-style: normal; color: var(--testo-2); }

/* il paywall, come sulla scheda */
.sistema.valuta .paywall { border: 1px solid var(--line); border-radius: 0; background: var(--paper-2); box-shadow: none;
  text-align: left; padding: 28px 30px 30px; margin: 0 0 18px; }
.sistema.valuta .paywall-lock { display: none; }
.sistema.valuta .paywall-testo strong { display: block; font-family: var(--serif); font-size: 24px; font-weight: 500; color: var(--ink); margin-bottom: 8px; }
.sistema.valuta .paywall-testo p { font-size: 15.5px; line-height: 1.6; color: var(--testo-2); margin: 0 0 20px; }
.sistema.valuta .paywall .btn-primary { display: inline-block; background: var(--ink); color: var(--paper); border-radius: 0;
  padding: 15px 26px; font-family: var(--sans); font-size: 15px; font-weight: 600; min-height: 48px; text-decoration: none; }
.sistema.valuta .paywall .btn-primary:hover { background: var(--rust); }
.sistema.valuta .paywall .btn-ghost { display: inline-block; color: var(--ink); border: 1px solid var(--line); border-radius: 0;
  padding: 14px 22px; text-decoration: none; }
.sistema.valuta .paywall-nota { color: var(--testo-3); font-size: 13.5px; }

/* i componenti condivisi, dentro la colonna dei risultati: niente margine
   proprio (lo da' la pila delle schede) */
.sistema .va-results-col .reno-tool, .sistema .va-results-col .mutuo-box { margin-top: 0; margin-bottom: 18px; }
.sistema .va-card-mutuo { padding: 0; border: 0; background: transparent; }
.sistema .va-card-mutuo .mutuo-box { margin-bottom: 0; }

/* il dossier e il ricontatto */
.sistema .va-cta-box { background: var(--ink); border-radius: 0; text-align: left; padding: 28px 30px; margin-top: 26px; }
.sistema .va-cta-box p { font-size: 16px; line-height: 1.6; color: var(--carta-testo); }
.sistema .va-cta-box p b { color: var(--paper); }
.sistema.valuta .va-cta-box .cta { background: var(--brass-2) !important; color: var(--ink) !important; }
.sistema.valuta .va-cta-box .cta:hover { background: var(--paper) !important; color: var(--ink) !important; }
.sistema .va-ricontatto { margin-top: 20px; font-size: 15px; }
.sistema .va-ricontatto a { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

/* ---------- telefono: una colonna, il margine unico di 16 px ---------- */
@media (max-width: 600px) {
  .va-testa { padding-top: 40px; padding-bottom: 56px; }
  .sistema .va-testa h1 { font-size: 40px !important; }
  .sistema .va-testa .va-attacco { font-size: 16.5px; }
  .va-bivio { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 30px; }
  .sistema .scuro .va-scelta { padding: 24px 20px 22px; }
  .sistema .scuro .va-scelta h2 { font-size: 25px !important; }
  .sistema .va-body { padding-top: 56px; padding-bottom: 72px; }
  .sistema .va-form-titolo { font-size: 30px !important; }
  .sistema .va-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .sistema .va-form, .sistema .va-paste { padding: 22px 18px; }
  .sistema .va-switch-3 { grid-template-columns: minmax(0, 1fr); }
  .sistema .va-switch-opt { border-right: 0; border-bottom: 1px solid var(--line); min-height: 56px; }
  .sistema .va-switch-opt:last-child { border-bottom: 0; }
  .sistema .va-results-col .va-hero { padding: 22px 18px; }
  .sistema .va-hero-giudizio { font-size: 26px; }
  .sistema .va-card { padding: 22px 18px; }
  .sistema .va-big { font-size: 34px; }
  .sistema.valuta .paywall { padding: 24px 18px 26px; }
  .sistema.valuta .paywall .btn-primary, .sistema.valuta .paywall .btn-ghost { display: block; text-align: center; margin: 0 0 10px; }
  .sistema .va-cta-box { padding: 24px 18px; }
  .sistema .vpg-riga { flex-wrap: wrap; }
  .sistema .vpg-nota { flex-basis: 100%; text-align: left; }
}