/* =============================================================================
   GUIDA — la pagina `#/guida` (vedi `js/guida.js`) e i passi d'installazione, che stanno
   anche nel foglio «Installa» (`js/pwa.js`): per questo `.passi` e `.tasto-browser` non sono
   chiusi dentro `.guida`.
   ============================================================================= */

.guida-testa { padding: var(--sp-2) 0 var(--sp-2); }
.guida-testa h2 { font-size: var(--fs-24); font-weight: 700; letter-spacing: -.01em; }
.guida-testa p { color: var(--ink-2); margin: var(--sp-2) 0 var(--sp-4); max-width: 34em; }
.guida-azioni { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
/* Il titolo della sezione, raggiunto col tasto qui sopra, non deve finire sotto la testata
   appiccicata in alto. */
#g-installa { scroll-margin-top: calc(var(--h-top, 60px) + var(--sp-3)); }

/* Cosa trovi: sei riquadri, tre per riga sul largo e uno sotto l'altro sul telefono.
   ⚠️ L'icona sta A SINISTRA del testo, non sopra: sul telefono i sei riquadri vanno in colonna,
   e con l'icona sopra ognuno era alto il doppio — sei cartelle che riempivano tre schermate
   prima di arrivare a come si installa, che è la cosa per cui si apre la pagina. */
.guida-cosa { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-3); }
.guida-cosa li { display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto 1fr; column-gap: var(--sp-3); row-gap: 2px; }
.guida-cosa .guida-ico { grid-row: 1 / span 2; }
.guida-cosa b { font-weight: 700; align-self: end; }
.guida-cosa span:last-child { color: var(--ink-2); font-size: var(--fs-14); }
.guida-ico { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2); color: var(--accent-ink); }
.guida-ico svg { width: 20px; height: 20px; }

.guida-intro { color: var(--ink-2); margin-bottom: var(--sp-3); }
.guida-subito:not(:empty) { margin-bottom: var(--sp-4); }
.guida-disp { margin-bottom: var(--sp-4); flex-wrap: wrap; }

/* I passi: numerati in un tondo, perché si leggono col telefono nell'altra mano e il numero
   dice a che punto si è. */
.passi { list-style: none; counter-reset: passo; margin: 0 0 var(--sp-3); padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.passi li { counter-increment: passo; display: flex; gap: var(--sp-3); align-items: flex-start; line-height: 1.5; }
.passi li::before { content: counter(passo); flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-size: var(--fs-13); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-top: -1px; }
.passi b { font-weight: 700; }
/* Il disegno del tasto del browser, in riga col testo: un tasto vero, non un'icona nostra —
   per questo la cornice. */
.tasto-browser { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 24px; margin: 0 2px; vertical-align: -6px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface-2); color: var(--ink); }
.tasto-browser svg { width: 16px; height: 16px; }

.guida-domande h3:first-child { margin-top: 0; }
/* In fondo niente riga «Per qualsiasi dubbio chiedi al tuo referente KING»: tolta il 2026-10-05
   su richiesta del committente. */
.guida { padding-bottom: var(--sp-6); }