/* ==========================================================================
   valutazione.css — landing di conversione.
   Carica dopo tokens.css e base.css.

   Qui l'ottone può salire fino al 10% della superficie: ogni pulsante conta.
   Sul sito vetrina resta sotto il 5%.
   ========================================================================== */

/* ============================================================== 1. hero */

.vhero {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) var(--sp-section-s);
  background:
    radial-gradient(120% 80% at 50% 0%, var(--c-sand) 0%, var(--c-bg) 62%);
  text-align: center;
}
.vhero__badge { margin-bottom: var(--sp-5); }
.vhero h1 { font-size: var(--fs-3xl); margin-bottom: var(--sp-4); }
.vhero__lead {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-2);
  max-width: 46ch;
  margin: 0 auto var(--sp-6);
}
.vhero .btn-row { justify-content: center; }

/* Le tre rassicurazioni: gratuito, due minuti, nessun impegno */
.rassicura {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-3) var(--sp-5);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-line);
}
.rassicura li {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); color: var(--c-ink-2); font-weight: var(--fw-medium);
}
.rassicura svg { width: 18px; height: 18px; color: var(--c-blue); flex: none; }

/* ========================================================== 2. il problema */

.scarto { display: grid; gap: var(--sp-4); margin-top: var(--sp-6); }
@media (min-width: 700px) { .scarto { grid-template-columns: 1fr 1fr; gap: var(--sp-5); } }

.scarto__card {
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}
.scarto__k {
  font-size: var(--fs-3xs); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--c-ink-3); margin-bottom: var(--sp-3);
}
.scarto__v {
  font-family: var(--ff-display);
  font-variation-settings: var(--fv-display);
  font-size: var(--fs-xl); font-weight: var(--fw-semi);
  letter-spacing: var(--ls-tight); line-height: 1.1;
  color: var(--c-ink);
}
.scarto__v em { font-style: normal; color: var(--c-blue); }
.scarto__n { font-size: var(--fs-2xs); color: var(--c-ink-3); margin-top: var(--sp-3); line-height: var(--lh-normal); }

.scarto__card--forte { background: var(--c-navy); border-color: var(--c-navy); }
.scarto__card--forte .scarto__k { color: var(--c-brass-light); }
.scarto__card--forte .scarto__v { color: var(--c-on-dark); }
.scarto__card--forte .scarto__v em { color: var(--c-brass-light); }
.scarto__card--forte .scarto__n { color: var(--c-on-dark-a70); }

.conseguenze { display: grid; gap: var(--sp-4); margin-top: var(--sp-6); }
@media (min-width: 700px) { .conseguenze { grid-template-columns: 1fr 1fr; } }
.conseguenza { display: flex; gap: var(--sp-4); align-items: flex-start; }
.conseguenza__i {
  flex: none; width: 40px; height: 40px; border-radius: var(--r-full);
  display: grid; place-items: center;
  background: var(--c-blue-a10); color: var(--c-blue);
}
.conseguenza__i svg { width: 20px; height: 20px; }
.conseguenza h3 { font-size: var(--fs-md); margin-bottom: var(--sp-1); }
.conseguenza p { font-size: var(--fs-sm); color: var(--c-ink-2); line-height: var(--lh-relaxed); }

/* ======================================================== 3. come funziona */

.passi { counter-reset: passo; display: grid; gap: var(--sp-5); margin-top: var(--sp-6); }
@media (min-width: 820px) { .passi { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } }

.passo { position: relative; padding-top: var(--sp-6); }
.passo::before {
  counter-increment: passo;
  content: counter(passo);
  position: absolute; top: 0; left: 0;
  font-family: var(--ff-display);
  font-variation-settings: var(--fv-display);
  font-size: var(--fs-xl); font-weight: var(--fw-bold);
  color: var(--c-brass); line-height: 1;
}
.passo::after {
  content: ""; position: absolute; top: calc(var(--sp-6) - 14px); left: 0;
  width: 28px; height: 2px; background: var(--g-brass-rule);
}
.passo h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.passo p { font-size: var(--fs-sm); color: var(--c-ink-2); line-height: var(--lh-relaxed); }

.fonte {
  margin-top: var(--sp-6); padding: var(--sp-4) var(--sp-5);
  background: var(--c-sand); border-radius: var(--r-md);
  border-left: 3px solid var(--c-blue);
  font-size: var(--fs-2xs); color: var(--c-ink-2); line-height: var(--lh-relaxed);
}

/* ========================================================= 4. questionario */

.vquiz { scroll-margin-top: 80px; }

.quiz {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  /* `clip` in orizzontale e `visible` in verticale, non `hidden` su tutti e
     due. Il taglio orizzontale serve: i passi entrano ed escono scorrendo di
     lato, e senza allargherebbero la pagina. Quello verticale invece tagliava
     l'elenco del comune: con venti voci arrivava novanta pixel sotto il bordo
     della scheda e le ultime due sparivano.
     `clip` e non `hidden` perche' `hidden` su un asse solo obbliga l'altro a
     diventare `auto`, cioe' crea un contenitore di scorrimento: e' la stessa
     coppia gia' usata su html e body per la stessa ragione. */
  overflow-x: clip;
  overflow-y: visible;
  max-width: var(--w-narrow);
  margin-inline: auto;
}

/* ---- barra di avanzamento ---- */
.quiz__testa { padding: var(--sp-4) var(--sp-5) 0; }
.avanzamento { display: block; }
.avanzamento__riga {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-3);
}
.avanzamento__passo {
  font-size: var(--fs-3xs); font-weight: var(--fw-semi);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--c-ink-3);
}
.avanzamento__pista {
  height: 4px; border-radius: var(--r-full);
  background: var(--c-line-soft); overflow: hidden;
}
.avanzamento__barra {
  height: 100%; width: 100%;
  background: var(--g-brass-rule);
  border-radius: var(--r-full);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform var(--d-base) var(--e-out);
}

/* ---- le tacche ----
   Sette segmenti invece di una riga che cresce. Una barra continua dice «piu'
   o meno a meta'»; le tacche dicono «al terzo di sette», che e' l'informazione
   con cui si decide se vale la pena arrivare in fondo.

   La barra continua qui sopra non si tocca: la usa ancora `acquirenti.js`,
   che carica questo stesso foglio. */
.avanzamento__tacche {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
}
.avanzamento__tacca {
  height: 4px;
  border-radius: var(--r-full);
  background: var(--c-line-soft);
  transition: background-color var(--d-base) var(--e-out);
}
.avanzamento__tacca.is-fatta { background: var(--c-brass); }
/* Quella dove ci si trova adesso e' ottone velato: si distingue da quelle
   ancora da fare senza sembrare gia' fatta. */
.avanzamento__tacca.is-qui { background: var(--c-brass-a40); }

.ripreso {
  margin: var(--sp-4) var(--sp-5) 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-blue-a10);
  border-radius: var(--r-sm);
  font-size: var(--fs-2xs); color: var(--c-ink-2);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
}
.ripreso button {
  font-size: var(--fs-2xs); font-weight: var(--fw-semi);
  color: var(--c-blue); text-decoration: underline; white-space: nowrap;
  min-height: var(--touch); padding-inline: var(--sp-2);
}

/* ---- singolo step ---- */
.quiz__corpo { position: relative; padding: var(--sp-5); min-height: 340px; }
@media (min-width: 640px) { .quiz__corpo { padding: var(--sp-6); min-height: 380px; } }

.step { transition: transform var(--d-base) var(--e-out), opacity var(--d-base) var(--e-out); }
.step--da-destra   { transform: translateX(26px);  opacity: 0; }
.step--da-sinistra { transform: translateX(-26px); opacity: 0; }
/* Il passo che esce si taglia da solo all'altezza di quello che entra.
   Serve da quando la scheda non taglia piu' in verticale (per non mangiare
   l'elenco del comune): un passo alto che esce verso uno corto sbordava di
   quattrocentosessanta pixel sotto la scheda e per un terzo di secondo
   sfumava sopra il testo sottostante. `max-height: 100%` si misura sul corpo
   della scheda, che nel frattempo ha gia' preso l'altezza del passo nuovo. */
.step--esce-sx, .step--esce-dx {
  position: absolute; inset: var(--sp-5) var(--sp-5) auto;
  max-height: 100%;
  overflow: hidden;
  opacity: 0; pointer-events: none;
}
.step--esce-sx { transform: translateX(-26px); }
.step--esce-dx { transform: translateX(26px); }

.step__testa { margin-bottom: var(--sp-5); }
/* `.step__facoltativo` e' stato tolto il 30/08/2026: con i passi raggruppati
   un passo intero non e' quasi mai facoltativo, lo e' un campo dentro il
   passo, e quello lo dice «(facoltativa)» accanto alla sua etichetta. Non
   lo usava piu' nessuno ne' qui ne' nella landing di chi compra. */
/* La domanda dentro la scheda del passo. Da `--fs-xl` a `--fs-lg` il
   05/09/2026: a 27,84 px pesava quasi quanto il titolo della sezione che le
   sta sopra (37 px), e dentro un riquadro una domanda non e' un titolo, e'
   una domanda. A 22 px il gradino con il titolo si sente e quello con le
   opzioni (16 px) pure.
   Vale per tutti e due i questionari, valutazione e acquirenti: sono la stessa
   cosa vista da due pubblici, e devono somigliarsi. */
.step__domanda { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.step__aiuto   { font-size: var(--fs-sm); color: var(--c-ink-3); line-height: var(--lh-relaxed); }
.step__aiuto:empty { display: none; }
.step__nota {
  margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  background: var(--c-sand); border-radius: var(--r-sm);
  font-size: var(--fs-2xs); color: var(--c-ink-2); line-height: var(--lh-normal);
}

/* ---- opzioni ---- */
.opzioni { display: grid; gap: var(--sp-2); }
.opzioni--griglia { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); }

.opzione {
  position: relative; display: flex; align-items: center; gap: var(--sp-3);
  min-height: 56px; padding: var(--sp-3) var(--sp-4);
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  cursor: pointer;
  transition: border-color var(--d-fast) var(--e-out),
              background-color var(--d-fast) var(--e-out),
              transform var(--d-fast) var(--e-out);
}
.opzione:hover { border-color: var(--c-blue-a35); background: var(--c-blue-a10); }
.opzione:active { transform: scale(.99); }

/* Il radio vero resta, invisibile ma presente: frecce, tab e screen reader
   continuano a funzionare come si aspettano. */
.opzione__input {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0;
}
.opzione__testi { flex: 1; min-width: 0; }
.opzione__label { display: block; font-size: var(--fs-base); font-weight: var(--fw-medium); }
.opzione__desc  { display: block; font-size: var(--fs-3xs); color: var(--c-ink-3); margin-top: 2px; line-height: 1.4; }
/* Sulla carta scelta il fondo diventa ottone velato e `--c-ink-3` scende
   sotto il rapporto di 4,5:1. Il testo secondario di una carta selezionata
   e' esattamente quello che si rilegge per controllare di aver scelto bene:
   deve restare leggibile. */
.opzione:has(.opzione__input:checked) .opzione__desc { color: var(--c-ink-2); }

.opzione__segno {
  flex: none; width: 22px; height: 22px; border-radius: var(--r-full);
  border: 2px solid var(--c-line);
  display: grid; place-items: center;
  transition: border-color var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out);
}
.opzione__segno::after {
  content: ""; width: 10px; height: 10px; border-radius: var(--r-full);
  background: var(--c-on-brass); transform: scale(0);
  transition: transform var(--d-fast) var(--e-out);
}
.opzione__input:checked ~ .opzione__segno { border-color: var(--c-brass); background: var(--c-brass); }
.opzione__input:checked ~ .opzione__segno::after { transform: scale(1); }
.opzione:has(.opzione__input:checked) { border-color: var(--c-brass); background: var(--c-brass-a12); }
.opzione__input:focus-visible ~ .opzione__segno { outline: 2px solid var(--c-focus); outline-offset: 2px; }
/* Dove il segno non si vede, il contorno va sulla carta.
   `.opzioni--griglia` e `.opzioni--corte` nascondono `.opzione__segno`, e
   siccome il contorno di focus stava proprio li' sopra, chi naviga da
   tastiera su quelle due varianti non vedeva NIENTE muoversi: le lettere
   della classe energetica e i numeri dei bagni erano una fila di riquadri
   identici in cui era impossibile sapere dove si era. */
.opzione:has(.opzione__input:focus-visible) {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

.opzioni--griglia .opzione { justify-content: center; text-align: center; padding: var(--sp-4) var(--sp-2); }
.opzioni--griglia .opzione__segno { display: none; }
.opzioni--griglia .opzione__label { font-size: var(--fs-md); font-weight: var(--fw-semi); }

/* ---- campo numerico ---- */
.campo-numero { display: flex; align-items: center; gap: var(--sp-3); }
/* .input, .campo, .consenso e .trappola stanno in base.css */
.input--numero {
  font-family: var(--ff-display);
  font-variation-settings: var(--fv-display);
  font-size: var(--fs-xl); font-weight: var(--fw-semi);
  text-align: center; max-width: 200px;
}
.campo-numero__suffisso { font-size: var(--fs-lg); color: var(--c-ink-3); font-weight: var(--fw-medium); }
/* Le frecce del number su desktop invitano a cliccare mille volte: via. */
.input--numero::-webkit-outer-spin-button,
.input--numero::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.input--numero { -moz-appearance: textfield; appearance: textfield; }

/* ---- pertinenze ---- */
.pertinenze { display: grid; gap: var(--sp-2); }
.pertinenza {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1.5px solid var(--c-line); border-radius: var(--r-sm);
  min-height: 56px;
}
.pertinenza:has(.pertinenza__check:checked) { border-color: var(--c-brass); background: var(--c-brass-a12); }
.pertinenza__voce { display: flex; align-items: center; gap: var(--sp-3); flex: 1; cursor: pointer; min-height: var(--touch); }
.pertinenza__check { width: 22px; height: 22px; flex: none; accent-color: var(--c-brass); cursor: pointer; }
.pertinenza__label { font-size: var(--fs-base); font-weight: var(--fw-medium); }
.pertinenza__mq { display: flex; align-items: center; gap: var(--sp-2); }
/* `--touch` e non 40 px scritti a mano: e' il valore che tutto il resto del
   sito usa per la misura minima di un bersaglio, e scriverlo di nuovo qui
   significava avere un controllo piu' piccolo degli altri senza motivo. */
.input--mq { width: 84px; text-align: center; padding: var(--sp-2); font-size: 1rem; min-height: var(--touch); }
/* Stessa regola di .input in base.css, che qui mancava: `--fs-base` su un
   telefono vale 15 px, e sotto i 16 Safari su iPhone ingrandisce la pagina
   appena si tocca il campo. Era l'unico campo del questionario rimasto
   senza protezione (10/09/2026). Col mouse torna alla misura di prima. */
@media (pointer: fine) {
  .input--mq { font-size: var(--fs-base); }
}
.pertinenza__unita { font-size: var(--fs-2xs); color: var(--c-ink-3); }

/* ============================================================================
   PASSI RAGGRUPPATI
   ----------------------------------------------------------------------------
   Il questionario nasce con una domanda per schermata: undici schermate, un
   controllo ciascuna. Funzionava, ma faceva sembrare lungo un percorso che
   lungo non e', e undici volte «Avanti» stancano prima di arrivare in fondo.

   Da qui in poi un passo e' un GRUPPO: una riga che dice di che cosa si sta
   parlando, un titolo, e dentro piu' campi che appartengono alla stessa
   domanda mentale. «Che tipo di casa e'?» sono tipologia e superficie
   insieme, perche' chi risponde le sa nello stesso momento.

   Quello che c'era prima non si butta: `.opzione`, `.opzioni`, `.campo-numero`
   e `.pertinenze` restano identici e si riusano. Qui c'e' solo il di piu'.
   ========================================================================== */

/* ---- la riga che dice di che cosa si sta parlando ---- */
/* Una pastiglia navy con il pallino ottone, non blu: il blu in questo sito
   vuol dire «attenzione, leggi», e l'insegna di un passo non e' un avviso,
   e' un titolo. Usare il blu qui lo avrebbe svuotato. */
.step__gruppo {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-3xs); font-weight: var(--fw-semi);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--c-navy); background: var(--c-navy-a06);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-full);
}
.step__gruppo::before {
  content: ""; width: 6px; height: 6px; border-radius: var(--r-full);
  background: var(--c-brass); flex: none;
}

/* ---- piu' campi dentro un passo ---- */
/* `--sp-5` e non `--sp-6`: fra un campo e l'altro passavano 48 px, che su un
   passo da tre domande diventano una schermata di aria. Le etichette bastano
   a separarli. */
.campi { display: grid; gap: var(--sp-5); }
/* La distanza fra un campo e l'altro qui la decide `gap`, non il margine che
   `.campo` porta da base.css: dove ci sono tutti e due si sommano, e il
   04/09/2026 lo stacco e' passato da 40 a 48 px senza che nessuno lo
   chiedesse. Stessa ragione per cui i campi dentro `.lm__campi` in home.css
   hanno il margine azzerato: in una griglia, spaziare e' compito della
   griglia. */
.campi > .campo, .campi__riga > .campo { margin-bottom: 0; }

/* Un campo ha la sua etichetta anche quando e' un gruppo di opzioni: senza,
   in un passo con tre domande non si capisce dove finisce l'una e comincia
   l'altra. */
.campo__titolo {
  display: block; margin-bottom: var(--sp-3);
  font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--c-ink);
}
.campo__obbligo { color: var(--c-error); margin-left: 2px; }
/* Il contrario dell'obbligo ha la sua classe. Prima riusava `.campo__obbligo`
   con il colore riscritto in linea, cioe' la stessa classe diceva «questo e'
   obbligatorio» e «questo e' facoltativo» a seconda dello stile che le si
   metteva accanto. */
.campo__scelta-libera {
  color: var(--c-ink-3); font-weight: var(--fw-regular);
}

/* Due campi corti sulla stessa riga: civico e CAP stanno insieme perche' si
   scrivono insieme, e da soli su una riga sembrano piu' importanti di quello
   che sono. Sotto i 520 px tornano in colonna. */
/* Stesso `gap` della distanza fra un campo e l'altro: due campi affiancati
   sono vicini quanto due campi impilati, altrimenti la griglia respira in un
   verso e non nell'altro. */
.campi__riga { display: grid; gap: var(--sp-5); }
@media (min-width: 520px) {
  .campi__riga { grid-template-columns: 1fr 1fr; }
}

.campo__aiuto {
  margin-top: var(--sp-2);
  font-size: var(--fs-3xs); color: var(--c-ink-3); line-height: var(--lh-normal);
}

/* ---- opzioni a carte ---- */
/* `.opzioni--griglia` esiste gia' ma nasconde la descrizione ed e' pensata per
   le lettere della classe energetica. Qui la descrizione e' meta' del
   contenuto: «Appartamento / In condominio» dice una cosa che «Appartamento»
   da solo non dice. */
.opzioni--carte {
  /* Due colonne sul telefono e non una: otto carte in fila verticale sono
     uno scorrimento lungo per otto parole.
     `minmax(0, 1fr)` e non `1fr`: `1fr` vale `minmax(auto, 1fr)`, e `auto`
     tiene conto della parola piu' lunga che c'e' dentro. Bastava
     «industriale» per allargare la sua colonna a 170 px e lasciare l'altra a
     161, con due carte affiancate di misura diversa. Con `0` come minimo le
     colonne restano uguali e la parola va a capo. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-3);
}
@media (min-width: 520px) {
  /* 190 px e non 148: a 148 px ci stavano quattro colonne da 170, e cinque
     etichette su otto andavano a capo. «Locale commerciale» spezzato in due
     righe si legge peggio di «Locale commerciale» intero, e la carta accanto
     si allunga per stare al passo. A 190 px le colonne diventano tre, larghe
     abbastanza da tenere il nome su una riga. */
  .opzioni--carte { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  .opzioni--carte .opzione { min-width: 0; }
}
.opzioni--carte .opzione {
  flex-direction: column; align-items: flex-start; justify-content: center;
  gap: var(--sp-1);
  min-height: 78px;
  padding: var(--sp-4);
  padding-right: var(--sp-8);   /* lo spazio del segno, che qui sta in alto a destra */
}
.opzioni--carte .opzione__testi { width: 100%; }
.opzioni--carte .opzione__label { font-size: var(--fs-sm); font-weight: var(--fw-semi); line-height: var(--lh-snug); }
.opzioni--carte .opzione__desc  { font-size: var(--fs-3xs); }
/* Il segno va in alto a destra: al centro verticale di una carta alta due
   righe finirebbe accanto alla descrizione invece che accanto al nome. */
.opzioni--carte .opzione__segno {
  position: absolute; top: var(--sp-3); right: var(--sp-3);
  width: 20px; height: 20px;
}
.opzioni--carte .opzione__segno::after { width: 9px; height: 9px; }

/* Le opzioni corte (numero di bagni, si'/no) non hanno bisogno di 148 px. */
.opzioni--corte {
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: var(--sp-3);
}
.opzioni--corte .opzione { min-width: 0; }
.opzioni--corte .opzione {
  flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; text-align: center; min-height: 72px; padding: var(--sp-3);
}
.opzioni--corte .opzione__segno { display: none; }
.opzioni--corte .opzione__label { font-size: var(--fs-md); font-weight: var(--fw-semi); }
.opzioni--corte .opzione__desc  { font-size: var(--fs-3xs); }

/* ---- il piede del passo ---- */
/* La nota sugli obbligatori sta in mezzo alla pulsantiera come nel modello:
   e' la' che serve, cioe' nel momento in cui si sta per premere «Continua».

   Sotto i 560 px non sparisce, va a capo. Nascondendola restava sullo schermo
   una fila di asterischi rossi senza nessuno che dicesse che cosa
   significano, e sul telefono ci arriva la maggior parte delle persone: la
   spiegazione di un simbolo non e' un lusso da schermo grande. */
.step__azioni { flex-wrap: wrap; }
.step__legenda {
  order: 1; width: 100%;
  margin-top: var(--sp-3);
  font-size: var(--fs-3xs); color: var(--c-ink-3); text-align: center;
  padding-inline: var(--sp-3);
}
@media (min-width: 560px) {
  .step__legenda { order: 0; width: auto; flex: 1; margin-top: 0; }
}

/* ---- il selettore del comune ----
   Sostituisce il `<datalist>`, che il browser disegnava come un menu di
   sistema fuori dalla scheda e in cui Chrome infilava i propri indirizzi
   salvati. Qui l'elenco e' nostro: stessa superficie, stesso bordo, stesso
   raggio di tutto il resto, e sotto al campo invece che accanto. */
.combo { position: relative; }

.combo__lista {
  position: absolute;
  z-index: var(--z-sticky);
  top: calc(100% + 6px); left: 0; right: 0;
  /* L'altezza la decide il JavaScript in base allo spazio che c'e' davvero:
     qui c'e' solo il tetto, per il caso in cui il JavaScript non giri. */
  max-height: 264px;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0; padding: var(--sp-2);
  list-style: none;
  background: var(--c-surface);
  border: 1px solid var(--c-line-forte);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
}
.combo__lista[hidden] { display: none; }
/* Verso l'alto quando sotto non c'e' posto: succede quando il campo e'
   l'ultimo del passo e sul telefono la tastiera si prende meta' schermo. */
.combo__lista--sopra { top: auto; bottom: calc(100% + 6px); }

.combo__voce {
  /* `block` e NON `flex`, ed e' un difetto che si vede solo guardando.
     Con `display: flex` la riga diventa un contenitore flessibile e i pezzi
     di testo attorno al <strong> dell'evidenza diventano elementi anonimi:
     lo spazio in testa a un elemento anonimo viene mangiato. Cercando
     «torre» si leggeva «TorreAnnunziata», tutto attaccato.
     I 44 px del bersaglio tattile si ottengono lo stesso: 20 px di riga piu'
     12+12 di imbottitura, e il testo resta centrato da solo. */
  display: block;
  padding: var(--sp-3) var(--sp-4);
  min-height: var(--touch);
  border-radius: var(--r-sm);
  font-size: var(--fs-2xs);
  line-height: var(--lh-normal);
  color: var(--c-ink);
  cursor: pointer;
}
/* Il passaggio del mouse e' un accenno: dice «sei qui sopra», non «questa e'
   la scelta». Resta il velo d'ottone. */
.combo__voce:hover { background: var(--c-brass-a12); }

/* L'evidenza vera e' un'altra cosa, ed e' navy pieno.
   Prima era anche lei il velo d'ottone, che sul bianco da' 1,11:1: come
   confine fra «questa» e «le altre» e' quasi niente, e in modalita' contrasto
   forzato di Windows i fondi si perdono e l'evidenza spariva del tutto. Con il
   navy si vede da lontano e non dipende da una sfumatura. */
.combo__voce.is-evidenziata {
  background: var(--c-navy);
  color: var(--c-on-dark);
}
/* La parte che corrisponde a quello che si e' scritto.
   Navy sul bianco, ottone chiaro sulla riga evidenziata. Prima era ottone
   scuro in tutti e due i casi: 3,67:1 sul bianco e 3,29:1 sull'evidenza,
   sotto la soglia di 4,5 che vale per il testo. */
.combo__match { font-weight: var(--fw-semi); color: var(--c-navy); }
.combo__voce.is-evidenziata .combo__match { color: var(--c-brass-light); }

/* In contrasto forzato i colori del sito non esistono: si usano quelli che il
   sistema riserva alla selezione, che sono l'unica cosa garantita. */
@media (forced-colors: active) {
  .combo__voce.is-evidenziata { background: Highlight; color: HighlightText; }
  .combo__voce.is-evidenziata .combo__match { color: HighlightText; }
  .combo__lista { border: 1px solid CanvasText; }
}

.combo__vuoto {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-3xs);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-3);
}

/* La freccia: dice che il campo e' una scelta e non una riga da riempire.
   E' disegnata sul campo e non e' un pulsante: cliccarla equivale a cliccare
   il campo, che e' quello che succede davvero. */
.combo__campo { padding-right: var(--sp-8); }
.combo::after {
  content: "";
  /* Ancorata in cima e non centrata sull'intero contenitore: sotto al campo
     c'e' l'elenco, e con `top: 50%` la freccia scenderebbe a meta' dell'elenco
     aperto invece di restare sul campo. `22px` era il numero giusto scritto a
     mano; questo lo ricava dall'altezza vera del campo. */
  position: absolute; right: var(--sp-4);
  top: calc(var(--touch) / 2 - 4px);
  width: 9px; height: 9px;
  border-right: 2px solid var(--c-ink-3);
  border-bottom: 2px solid var(--c-ink-3);
  transform: rotate(45deg);
  pointer-events: none;
  transition: transform var(--d-fast) var(--e-out);
}
/* Aperto, la freccia si gira in su: e' l'unico segno che dice «questo si
   richiude». */
.combo:has(.combo__campo[aria-expanded="true"])::after {
  transform: rotate(-135deg);
}

/* ---- la conferma sotto il campo ---- */
.campo__conferma {
  margin-top: var(--sp-2);
  font-size: var(--fs-3xs); font-weight: var(--fw-medium);
  color: var(--c-success);
  display: flex; align-items: center; gap: var(--sp-2);
}
.campo__conferma[hidden] { display: none; }


/* ---- errori e azioni ---- */
.step__errore {
  font-size: var(--fs-2xs); color: var(--c-error); line-height: var(--lh-normal);
  margin-top: var(--sp-3); display: none;
}
.step__errore.is-visibile { display: block; }

.step__azioni {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); margin-top: var(--sp-6);
  padding-top: var(--sp-5); border-top: 1px solid var(--c-line-soft);
}
.step__azioni-dx { display: flex; gap: var(--sp-3); margin-left: auto; }
.step__indietro {
  font-size: var(--fs-sm); color: var(--c-ink-3); font-weight: var(--fw-medium);
  min-height: var(--touch); padding-inline: var(--sp-2);
}
.step__indietro:hover { color: var(--c-ink); }
/* "Salta" non è mai in grigio spento: se una domanda è facoltativa,
   l'utente lo deve capire senza cercarlo. */
.step__azioni-dx .btn--ghost { font-weight: var(--fw-semi); }

@media (max-width: 479px) {
  .step__azioni-dx { flex: 1; }
  .step__azioni-dx .btn { flex: 1; }
}

/* ---- campi contatto ---- */
.form-contatti { transition: opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-out); }
.form-contatti.is-uscita { opacity: 0; transform: translateY(12px); }

/* ========================================================== 5. la stima
   Il momento per cui esiste tutta la pagina.
   Nota sull'unica eccezione alla regola "solo transform e opacity": qui si
   anima anche filter, perché il passaggio da sfocato a nitido È l'effetto
   richiesto. filter non provoca reflow, resta sulla GPU, e si applica a un
   solo elemento una sola volta. */

.stima {
  position: relative;
  text-align: center;
  padding: var(--sp-6) var(--sp-5);
  margin-bottom: var(--sp-6);
  background: var(--g-navy);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.stima__label {
  font-size: var(--fs-3xs); font-weight: var(--fw-semi);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--c-brass-light); margin-bottom: var(--sp-3);
}
.stima__valore {
  font-family: var(--ff-display);
  font-variation-settings: var(--fv-display);
  font-size: var(--fs-num); font-weight: var(--fw-bold);
  line-height: 1.05; letter-spacing: var(--ls-tight);
  color: var(--c-on-dark);
  font-variant-numeric: tabular-nums lining-nums;
  filter: blur(16px);
  opacity: .55;
  transform: scale(.98);
  transition:
    filter var(--d-reveal) var(--e-soft),
    opacity var(--d-reveal) var(--e-soft),
    transform var(--d-reveal) var(--e-soft);
  user-select: none;
}

.stima__velo {
  position: absolute; inset: auto 0 0;
  padding: var(--sp-4);
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-size: var(--fs-2xs); color: var(--c-on-dark-a88);
  background: linear-gradient(180deg, var(--c-surface-a00), var(--c-navy-a85));
  transition: opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}
.stima__lucchetto { font-size: var(--fs-sm); }

/* Rivelazione */
.stima.is-rivelata .stima__valore {
  filter: blur(0);
  opacity: 1;
  transform: none;
  color: var(--c-brass-light);
}
.stima.is-rivelata .stima__velo { opacity: 0; transform: translateY(8px); pointer-events: none; }

/* Un bagliore che attraversa il riquadro nel momento in cui si mette a fuoco */
.stima.is-rivelata::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--g-shimmer);
  transform: translateX(-100%);
  animation: bagliore 1.1s var(--e-soft) .12s 1;
  pointer-events: none;
  mix-blend-mode: overlay;
}
@keyframes bagliore { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .stima.is-rivelata::after { animation: none; content: none; }
}

.stima__dopo { text-align: center; }
.stima__dopo-testo { font-size: var(--fs-sm); color: var(--c-ink-2); line-height: var(--lh-relaxed); }

/* ---- recupero dei dati saltati ---- */
.recupero {
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-sand);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-6);
  transition: opacity var(--d-base) var(--e-out);
}
.recupero.is-uscita { opacity: 0; }
.recupero__testo { font-size: var(--fs-2xs); color: var(--c-ink-2); line-height: var(--lh-relaxed); }
.recupero__azioni { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.recupero__azioni .btn { font-size: var(--fs-2xs); padding: var(--sp-2) var(--sp-4); min-height: 40px; }

/* ---- disclaimer: sempre visibile, mai in un accordion ---- */
.disclaimer {
  max-width: var(--w-narrow); margin: var(--sp-5) auto 0;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg);
  font-size: var(--fs-3xs); line-height: var(--lh-relaxed); color: var(--c-ink-3);
}
.disclaimer strong { color: var(--c-ink-2); font-weight: var(--fw-semi); }

/* ========================================================== 6. chi è Paolo */

.chi { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 760px) { .chi { grid-template-columns: 240px 1fr; gap: var(--sp-7); } }
.chi__foto { max-width: 240px; margin-inline: auto; }
.chi__dati { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-5); }
.chi__dato .num { font-size: var(--fs-xl); }
.chi__dato span { display: block; font-size: var(--fs-3xs); color: var(--c-ink-3); margin-top: var(--sp-1); }

/* ================================================================ 7. FAQ */

/* Le FAQ sono state spostate in base.css il 05/09/2026: non sono piu' roba
   della sola landing di valutazione, le usano anche gli articoli del blog, e
   un componente usato da due pagine appartiene al foglio comune. La storia
   del difetto che sembrava esserci (l'apertura che pareva rotta e non lo era)
   e' rimasta insieme alle regole. */

/* ====================================================== 8. footer minimo
   Sulla landing NON esistono link verso il sito: le uniche uscite ammesse
   sono privacy e cookie policy, che sono obbligatorie per legge. */

/* Il piede delle landing e' stato spostato in base.css il 05/09/2026.
   Non e' piu' roba delle sole landing: lo usano valutazione, grazie,
   acquirenti, l'indice del blog e ogni articolo. Gli articoli non caricano
   questo foglio, e per una giornata il loro piede e' uscito completamente
   senza stile: testo nero su bianco e collegamenti blu sottolineati, al posto
   del blocco su navy. Un componente usato da cinque tipi di pagina appartiene
   al foglio comune, non a quello di una di loro. */


/* ============================================================ 9. sticky CTA
   Su mobile, quando il questionario è lontano, una barra bassa riporta lì.
   Sparisce appena il questionario entra in vista: due inviti alla stessa
   azione nella stessa schermata si annullano a vicenda. */

.cta-mobile {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: var(--z-sticky);
  padding: var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  background: var(--c-surface-a92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--c-line);
  transform: translateY(110%);
  transition: transform var(--d-base) var(--e-out);
}
.cta-mobile.is-visibile { transform: none; }
@media (min-width: 760px) { .cta-mobile { display: none; } }