/* ============================================================================
   acquirenti.css — la landing per chi compra casa.
   ----------------------------------------------------------------------------
   Si appoggia a tokens.css, base.css e valutazione.css. Da quest'ultimo arriva
   tutto il vestiario del questionario: `.quiz`, `.avanzamento`, `.opzioni`,
   `.opzione`, `.quiz__piede`. Qui c'e' solo quello che esiste soltanto su
   questa pagina.

   La differenza rispetto alla landing di valutazione: li' si comincia subito
   con le domande, perche' chi vuole sapere quanto vale casa sua e' gia'
   deciso. Qui prima si fa vedere l'oggetto, perche' la pagina lo regala, e le
   domande vengono dopo.
   ========================================================================== */

/* =============================================================== 1. apertura */

/* Il libro prima delle parole.
   Nella prima versione la copertina era piccola e stava di lato, e il titolo
   riempiva mezzo schermo. Al contrario: la pagina offre un oggetto, l'oggetto
   si deve vedere, e il titolo deve stare in tre righe. */
.acq__apertura {
  display: grid;
  gap: var(--sp-7);
  justify-items: center;
  text-align: center;
}

.acq__libro {
  margin: 0;
  width: min(78vw, 340px);
}
/* Il render nasce con il fondo sabbia, riportato li' da installa-guida.py.
   Su una sezione chiara quel quadrato si stacca come una toppa: si vede il
   bordo di un file, non un libro. Continuandolo con lo stesso sabbia e
   arrotondandolo diventa un piano su cui il libro e' appoggiato.
   Il colore deve corrispondere: e' lo stesso `--c-sand` che usa lo script. */
.acq__libro picture {
  display: block;
  background: var(--c-sand);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-4) 0;
}
.acq__libro img {
  display: block;
  width: 100%; height: auto;
  /* Il render ha gia' la sua ombra dentro: una seconda lo staccherebbe due
     volte dal fondo. */
}

.acq__badge { display: inline-block; margin-bottom: var(--sp-4); }

/* I titoli di sezione un gradino sotto il titolo della pagina. Vale solo qui:
   sulle pagine dove l'h1 sta alla sua altezza normale il rapporto e' gia'
   giusto e non c'e' niente da correggere.

   L'esclusione non e' pignoleria. La domanda del questionario e' anche lei un
   `h2` (acquirenti.js la disegna cosi'), e `.acq h2` batte `.step__domanda`
   per specificita': senza il `:not` la domanda resterebbe a 28 px, cioe'
   esattamente il difetto che si sta correggendo, e lo farebbe in silenzio. */
.acq h2:not(.step__domanda) { font-size: var(--fs-xl); }

/* La domanda del questionario, ancora piu' giu' QUI SOLTANTO.
   Su questa pagina il modulo non e' la pagina: e' una delle cose che ci sono,
   e la domanda non deve competere ne' con il titolo (37 px) ne' con quello
   della sezione (28). A `--fs-md` sta a 18 px, che e' poco piu' del testo
   delle opzioni: si legge come una domanda, non come un titolo.
   Sulla landing di valutazione resta a `--fs-lg`, perche' li' il questionario
   e' l'unica cosa che c'e' e la domanda e' la voce che guida tutta la pagina. */
.acq .step__domanda { font-size: var(--fs-md); }

/* LA SCALA DI QUESTA PAGINA, rifatta il 05/09/2026.
   Il difetto misurato: H1, H2 di ogni sezione e i numeri della prova stavano
   TUTTI a 36,96 px, la domanda del questionario a 27,84, e sotto si saltava a
   16 e 13. Nessuna gerarchia: il titolo della pagina non dominava niente e le
   sezioni gli competevano.

   La causa non era una svista. Il titolo e' una domanda di diciassette parole,
   e a `--fs-3xl` (l'altezza normale di un h1) diventa cinque righe: qualcuno
   l'aveva rimpicciolito con un clamp scritto a mano finche' non e' finito
   esattamente sulla misura degli h2. Quel clamp aveva anche un difetto suo:
   sotto i 1080 px scendeva PIU' IN BASSO dei titoli di sezione, e su un
   telefono l'H1 era piu' piccolo di un h2.

   La correzione non gonfia il titolo, che resta lungo perche' le parole sono
   del cliente: abbassa i gradini sotto. Adesso la scala e'
      titolo pagina   --fs-2xl   37 px
      titolo sezione  --fs-xl    28 px
      domanda del form --fs-lg   22 px
      testo           --fs-base  16 px
      note            --fs-2xs   13 px
   ⚠️ Se un giorno il titolo si accorcia, questo e' il posto da cui rialzarlo
   a `--fs-3xl`: la scala regge lo stesso. */
.acq__titolo {
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  max-width: 22ch;
  margin-inline: auto;
}

.acq__parole .t-lead { max-width: 46ch; margin-inline: auto; }

/* Dice che cosa si riceve: e' l'ultima cosa che si legge prima di decidere,
   e stava a 12 px, il gradino piu' basso della scala. */
.acq__sotto-invito {
  margin-top: var(--sp-3);
  font-size: var(--fs-2xs); color: var(--c-ink-2);
}

/* Su schermo largo il libro va a sinistra e le parole a destra, allineate a
   sinistra: leggere centrato oltre le due righe stanca. */
@media (min-width: 860px) {
  .acq__apertura {
    grid-template-columns: 340px 1fr;
    align-items: center;
    gap: var(--sp-9);
    justify-items: stretch;
    text-align: left;
  }
  .acq__libro { width: 340px; }
  .acq__titolo, .acq__parole .t-lead { margin-inline: 0; }
}



/* ============================================== 2-bis. i tre consigli, corti

   Il 05/09/2026 erano tre schede intere con un paragrafo e un riquadro
   ciascuna: 437 parole e il 31% dell'altezza della pagina, tutto PRIMA del
   modulo. Su una landing che esiste per raccogliere un contatto, dimostrare di
   avere qualcosa da dire non vale cinque schermate di lettura.
   Adesso sono tre righe separate da un filetto: si leggono in venti secondi e
   stanno dopo il modulo. Il ragionamento lungo e' nella guida, che e' il posto
   suo, ed e' esattamente quello che si scarica. */

.consigli {
  margin-top: var(--sp-5);
  display: grid; gap: var(--sp-4);
}
.consiglio {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line);
}
.consiglio:first-child { padding-top: 0; border-top: 0; }

.consiglio__titolo {
  font-family: var(--ff-display);
  font-variation-settings: var(--fv-display);
  font-size: var(--fs-base); font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  color: var(--c-ink);
  margin-bottom: var(--sp-1);
}
.consiglio__riga {
  font-size: var(--fs-2xs);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-2);
}
.consiglio__nota {
  margin-top: var(--sp-2);
  font-size: var(--fs-3xs);
  line-height: var(--lh-normal);
  color: var(--c-ink-3);
}


/* ========================================================= 2. cosa c'e' dentro */

.acq__dentro {
  list-style: none; padding: 0;
  margin-top: var(--sp-6);
  display: grid; gap: var(--sp-4);
}
@media (min-width: 760px) {
  .acq__dentro { grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-7); }
}
.acq__dentro li {
  position: relative;
  padding-left: var(--sp-7);
  /* Sono le promesse del prodotto, non didascalie: a 13 px si leggevano come
     una nota a pie' di pagina. */
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--c-ink);
}
/* Il segno di spunta, disegnato con due bordi: niente icona da caricare sei
   volte per sei voci. */
.acq__dentro li::before {
  content: "";
  position: absolute; left: 0; top: .45em;
  width: 14px; height: 8px;
  border-left: 2px solid var(--c-brass);
  border-bottom: 2px solid var(--c-brass);
  transform: rotate(-45deg);
}


/* ============================================================== 3. i contatti */
/* Il passo finale del questionario. Il riquadro, la barra e le opzioni
   arrivano da valutazione.css: qui solo i campi. */

.acq__contatti { margin-top: var(--sp-5); }

/* Il bordo dei campi usa `--c-line-forte` e non `--c-line`: il secondo su
   fondo chiaro da' 1.34:1, e il contorno di un controllo deve arrivare a 3. */
.acq__contatti .input { border: 1.5px solid var(--c-line-forte); }

.acq__lucchetto {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  margin-top: var(--sp-5);
  font-size: var(--fs-3xs); color: var(--c-ink-2);
  line-height: var(--lh-normal);
}
.acq__lucchetto svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }

.acq__errore {
  display: none;
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-error-a10);
  border-radius: var(--r-sm);
  font-size: var(--fs-2xs); color: var(--c-error);
  line-height: var(--lh-normal);
}
.acq__errore.is-visibile { display: block; }

/* ---- quando e' fatta ---- */

.acq__fatto {
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-6);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
}
/* ---- il riquadro di invio riuscito, rifatto il 05/09/2026 ----
   Prima: occhiello, titolo, una riga, un pulsante largo quanto tutto il
   riquadro, e in fondo una nota grigia a 12 px centrata. Quella nota era il
   messaggio piu' personale della pagina (dice che cosa succede adesso, e a chi
   deve vendere per comprare dice una cosa scritta per lui) ed era la piu'
   difficile da leggere. Il pulsante largo, invece, gridava quanto il titolo. */

.acq__spunta {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  margin: 0 auto var(--sp-4);
  border-radius: var(--r-full);
  background: var(--c-success-a10);
  color: var(--c-success);
}
.acq__spunta svg { width: 24px; height: 24px; }

.acq__fatto-t { font-size: var(--fs-xl); }
.acq__fatto-sub {
  margin-top: var(--sp-2);
  font-size: var(--fs-2xs); color: var(--c-ink-2);
  line-height: var(--lh-relaxed);
}
/* Il pulsante sta alla larghezza del suo testo: e' il ripescaggio di un
   download gia' partito, non l'azione principale della schermata. */
.acq__fatto .btn { display: inline-flex; }

/* Che cosa succede adesso: allineato a sinistra e a misura di lettura, con il
   filetto d'ottone che lo stacca dalla conferma. Centrato e in grigio chiaro
   si leggeva come una postilla legale. */
.acq__seguito {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-line);
  text-align: left;
  font-size: var(--fs-2xs);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-2);
}
.acq__seguito-eti {
  font-size: var(--fs-3xs); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--c-brass-testo);
  margin-bottom: var(--sp-2);
}


/* ============================================================== 4. chi scrive */

.acq__dati {
  display: grid; gap: var(--sp-5);
  margin-top: var(--sp-6);
}
@media (min-width: 620px) {
  .acq__dati { grid-template-columns: repeat(3, 1fr); }
}
.acq__dato { display: grid; gap: var(--sp-1); }
.acq__dato .num {
  font-family: var(--ff-display);
  /* `--fs-xl` e non `--fs-2xl`: alla misura di prima erano un terzo blocco da
     37 px in pagina, che competeva con i titoli. E' la stessa scelta gia'
     fatta sulla landing gemella, in valutazione.css. */
  font-size: var(--fs-xl); line-height: 1;
  color: var(--c-navy);
}
/* `>` e non un discendente qualsiasi, ed e' il punto di tutta questa riga.
   Senza, `span:last-child` colpiva anche lo span DENTRO `.num`, che e'
   l'ultimo figlio suo: «oltre» restava grande e «300» scendeva a 12 px, e il
   numero dei contenziosi, che e' uno span solo, spariva del tutto. */
.acq__dato > span:last-child {
  font-size: var(--fs-3xs); color: var(--c-ink-2);
  line-height: var(--lh-normal);
}

/* ---- il ritratto ---- */

.acq__chi { display: grid; gap: var(--sp-6); }
.acq__ritratto {
  margin: 0;
  width: min(60vw, 240px);
}
.acq__ritratto img {
  display: block;
  width: 100%; height: auto;
  border-radius: var(--r-lg);
}
@media (min-width: 760px) {
  .acq__chi {
    grid-template-columns: 240px 1fr;
    gap: var(--sp-8);
    align-items: center;
  }
  .acq__ritratto { width: 240px; }
}