/* ═══════════════════════════════════════════════════════════════════════════
   vestito-sito.css — IL VESTITO DELLE PAGINE PUBBLICHE, SCRITTO UNA VOLTA SOLA.
   ═══════════════════════════════════════════════════════════════════════════

   Queste righe vivevano dentro `sito.html`, in un `<style>` suo. Finché la
   pagina pubblica era una sola andava bene. Dal momento in cui ne esiste una
   seconda — `guida.html` — ricopiarle vorrebbe dire rifare esattamente il
   difetto da cui è nato `guscio.css`: due copie della stessa cosa che
   prendono strade diverse, una per volta, senza che nessuno se ne accorga.

   ⚠️ IL CONTENUTO NON È CAMBIATO DI UNA RIGA. Questo file è uno spostamento,
   non una riscrittura: `sito.html` si vede identico a prima. I commenti che
   spiegano le misure sono venuti via col codice che spiegano, perché un
   commento lasciato indietro diventa una bugia al primo ritocco.

   ─── CHI POSSIEDE COSA ────────────────────────────────────────────────────

   `guscio.css` possiede i colori, i tre caratteri, la colonna e la barra del
   pannello: vale ovunque. Questo file possiede la GRIGLIA delle pagine che si
   leggono — la larghezza, la misura della riga, le schede, il riquadro
   giallo, il piede. Le pagine ci mettono dentro il contenuto, e basta.
   ═══════════════════════════════════════════════════════════════════════════ */

  /* ═══════════════════════════════════════════════════════════════════════
     LA REGOLA CHE HA GUIDATO OGNI FRASE DELLE PAGINE PUBBLICHE
     ═══════════════════════════════════════════════════════════════════════

     Il sito non può promettere quello che le condizioni negano.

     Nel contratto c'è scritto, senza attenuazioni, che il risultato non è
     garantito, che si può perdere tutto, e che della taratura risponde
     l'utente. Se una di queste pagine dicesse «guadagna mentre dormi», la prima cosa
     che un cliente scontento metterebbe accanto all'altra sarebbero quelle due
     frasi — e avrebbe ragione lui.

     Quindi qui non compare nessuna cifra di rendimento, nessun grafico che
     sale, nessuna testimonianza. Si spiega cosa fa il programma, cosa costa, e
     cosa può andare storto. Chi si iscrive dopo aver letto queste pagine sa
     a cosa va incontro, ed è l'unico tipo di cliente che vogliamo.

     Stessa tavolozza del pannello: chi entra non deve sentire di aver
     cambiato azienda. */

  *{box-sizing:border-box}
  /* ⚠️ IL CORPO DEL TESTO CRESCE COL MONITOR, poco e dentro un clamp — 3
     settembre 2026. Su uno schermo da 2560 punti un 16 fisso e' un testo da
     telefono in mezzo a un campo bianco: 16 sotto i 1150 punti, 19 sopra i
     2000, in mezzo segue lo schermo. E siccome `--misura` e' in `ch`, la
     riga di testo cresce con lui e resta di 68 caratteri. */



  /* ═══ LA PAGINA SI ADATTA AL MONITOR — Simone, 1 settembre 2026 ═════════
     «questa pagina deve adattarsi al monitor». Era `max-width:920px` fisso:
     su uno schermo da 2000 punti il sito restava una colonna stretta al
     centro, con metà dello schermo vuoto ai lati.

     ⚠️ MA «ADATTARSI» NON VUOL DIRE «STIRARSI FINO AI BORDI», e la differenza
        è la ragione per cui questa non è una riga sola. Una riga di testo
        larga 1900 punti è illeggibile: l'occhio perde il capo della riga
        successiva, e chi legge si ferma. Sono due misure diverse:

          · il CONTENITORE cresce col monitor — le tre schede «Come funziona»
            respirano, le tabelle non si spezzano, lo spazio serve a qualcosa;
          · la MISURA DEL TESTO resta ferma dove si legge, sotto i 70
            caratteri per riga.

     ⚠️ E CRESCE FINO A UN TETTO. `clamp(920px, 86vw, 1800px)`: da 920 in su
        segue lo schermo, e oltre i 2090 punti si ferma. Senza il tetto, su un
        monitor da ufficio la testata avrebbe il nome a sinistra e i due
        pulsanti a un metro di distanza — «adattato», e peggiore di prima.

     ⚠️ IL TETTO ERA 1320, E NON BASTAVA — Simone, 3 settembre, davanti a un
        monitor largo: «questa pagina va fatta che si adatta allo schermo».
        Misurato a 2560 punti: 1320 di pagina e 620 di bianco per lato, la
        meta' dello schermo vuota. Ma allargare il contenitore da solo non
        adatta niente — stende le stesse due schede per riga su 1800 punti.
        Quello che si adatta e' la GRIGLIA: le quattro schede dei prodotti e
        le quattro domande passano su UNA riga (`.g4`) quando la larghezza
        c'e', e il corpo del testo cresce un poco (vedi `body`). Le misure
        sono qui sotto, in `lav/sito-*.png` della prova, non a occhio.

     ⚠️ `width: min(100% - 44px, …)` E NON `max-width` + `padding`: così il
        margine laterale sui telefoni è dentro il calcolo della larghezza
        invece che aggiunto dopo, e non c'è nessuna larghezza in cui la pagina
        possa sporgere oltre lo schermo. */
  :root{--largo:clamp(920px, 86vw, 1800px);--misura:68ch}
  .dentro{ width: min(100% - 44px, var(--largo)); margin-inline: auto; }

  .barra{backdrop-filter:blur(8px)}
  .barra .dentro{display:flex;align-items:center;gap:14px;padding-top:14px;padding-bottom:14px}
  .marca{font-weight:700;letter-spacing:-.3px;font-size:17px}

  .btn{display:inline-block;border:1px solid var(--bordo);border-radius:10px;padding:9px 16px;
    font-size:14px;text-decoration:none;color:var(--testo);background:#fff;white-space:nowrap}
  .btn:hover{border-color:var(--blu)}
  .btn.pieno{background:var(--blu);border-color:var(--blu);color:#fff;font-weight:600}
  .btn.pieno:hover{opacity:.92}

  /* ⚠️ IL TITOLO CRESCE COL MONITOR, ma dentro un `clamp`: 40 punti su uno
     schermo largo il doppio sembrano un titolo che si è dimenticato di
     crescere. E il `<br>` scritto a mano nell'html non si tocca — su schermo
     largo tiene le due righe come sono state pensate. */



  .apertura{padding:clamp(48px,5vw,84px) 0 clamp(40px,4vw,64px)}
  /* ⚠️ QUI STA LA META' CHE CONTA. `--misura` e non una larghezza in punti:
     `ch` è la larghezza del carattere «0» del font in uso, quindi 68ch resta
     68 caratteri anche se un giorno si cambia il corpo del testo. Una misura
     scritta in pixel si scollega dal font alla prima modifica, e nessuno se ne
     accorge finché una riga non diventa lunga il doppio. */
  .occhiello{color:var(--tenue);font-size:clamp(17px,1.15vw,21px);max-width:var(--misura);margin:0 0 28px}
  /* I paragrafi che stanno da soli dentro una sezione: stessa misura. Quelli
     dentro le schede no — lì la colonna è già stretta di suo, e limitarli
     lascerebbe un buco bianco a destra di ogni scheda. */
  section > p, .apertura > p{max-width:var(--misura)}
  .azioni{display:flex;gap:12px;flex-wrap:wrap}

  section{padding:clamp(36px,3.4vw,60px) 0;border-top:1px solid var(--bordo)}
  .griglia{display:grid;gap:clamp(18px,1.6vw,28px)}
  @media(min-width:760px){ .g3{grid-template-columns:repeat(3,1fr)} .g2{grid-template-columns:1fr 1fr} }
  /* Quattro schede su una riga quando ci stanno: a 1700 punti di finestra il
     contenitore e' 1462, e ognuna ha 340 punti — la stessa larghezza che le
     tre di «Come funziona» hanno a 1200. Sotto, restano due per riga. */
  @media(min-width:1700px){ .g4{grid-template-columns:repeat(4,1fr)} }
  .scheda{background:var(--carta);border:1px solid var(--bordo);border-radius:14px;padding:20px 22px}
  .scheda p{margin:0;color:var(--tenue);font-size:15px}
  .passo .n{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
    border-radius:50%;background:var(--blu);color:#fff;font-size:13px;font-weight:700;margin-bottom:10px}

  .franco{border:1px solid var(--caldo);background:rgba(154,103,0,.06);border-radius:14px;padding:22px 24px}
  /* ⚠️ ANCHE QUI LA MISURA, e non è un dettaglio: il riquadro giallo è quello
     che dice le cose scomode, ed è il pezzo che va letto per intero. Steso su
     1300 punti si salta. */
  .franco p, .franco li{max-width:var(--misura)}
  /* Il riquadro giallo dopo una griglia respira quanto le schede fra loro:
     senza questa riga si appoggia all'ultima fila, e a 2560 punti si vede. */
  .griglia + .franco{margin-top:clamp(18px,1.6vw,28px)}
  .franco h2{margin-bottom:10px}
  .franco ul{margin:14px 0 0;padding-left:20px}
  .franco li{margin-bottom:9px}


  table{margin-top:8px}

  /* La colonna delle etichette («Canone fisso», «Compenso»): il 42% di 1800
     punti e' un campo vuoto fra l'etichetta e la risposta. Cresce fino a 380. */
  td:first-child{width:min(42%,380px);color:var(--tenue)}


  footer{border-top:1px solid var(--bordo);padding:34px 0 60px;color:var(--tenue);font-size:14px}
  footer a{color:var(--tenue)}