/* =====================================================
   Livello zero — mini-simulatore UC
   Tipografia tarata sul pubblico 45-65 (rev. 01/08/2026,
   richiesta Nicola): corpi generosi, contrasto pieno,
   aree di tocco alte e distanziate, una domanda ben
   respirata per schermata. Regole minime:
   - domanda ≥22-24px mobile · opzioni ≥19px
   - nessun testo funzionale sotto i 16px
   - interlinea ≥1.5 · leggibilità > densità
   ===================================================== */
/* Font variabili auto-ospitati (Fontsource, licenza OFL nei .txt accanto).
   Zero chiamate esterne: coerenza totale con la promessa di riservatezza. */
@font-face {
  font-family: "Fraunces";
  src: url("fonts/Fraunces-var-latin.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-var-latin.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --blu: #0e72b5;
  --blu-scuro: #0b3556;
  --carta: #ffffff;
  --fondo: #f2f7fb;
  --testo: #1c2830;          /* contrasto pieno sul corpo */
  --testo-2: #3f4f5b;        /* "secondario" ma ben leggibile, niente grigi deboli */
  --verde: #1e7d43;
  --giallo: #9a6b00;
  --stop: #5f6b74;
  --raggio: 14px;
  --font-t: "Fraunces", Georgia, serif;
  --font-b: "DM Sans", -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-b); font-weight: 400; color: var(--testo); background: var(--fondo); min-height: 100svh; display: flex; flex-direction: column; font-size: 18px; line-height: 1.6; }
.wrap { width: 100%; max-width: 680px; margin: 0 auto; padding: 0 24px; }
a { color: var(--blu); }

.sim-header { background: var(--carta); border-bottom: 1px solid #dce7ef; padding: 16px 0; }
.sim-header .wrap { display: flex; align-items: center; justify-content: space-between; }
.brand-logo { height: 28px; width: auto; }
.sim-tag { font-size: 16px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--testo-2); }

main { flex: 1; padding: 36px 0 48px; }

/* Indicatore di avanzamento: funzionale → mai sotto i 16px */
.step-ind { font-size: 16px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--blu); font-weight: 500; margin-bottom: 16px; }

.screen h1, .screen h2 { font-family: var(--font-t); font-weight: 400; color: var(--blu-scuro); line-height: 1.22; letter-spacing: -0.005em; }
.screen h1 { font-size: clamp(30px, 7.5vw, 38px); margin-bottom: 16px; }
.screen h2 { font-size: clamp(26px, 6.8vw, 32px); margin-bottom: 10px; }

/* La domanda vera e propria: elemento principale della schermata,
   da titolo, contrasto pieno */
.kicker { font-size: clamp(22px, 5.8vw, 24px); line-height: 1.5; color: var(--testo); margin: 6px 0 26px; }
.lead { font-size: clamp(19px, 5vw, 21px); line-height: 1.65; color: var(--testo); margin-bottom: 30px; }
/* Apertura senza titolo (il nome vive nel tag in alto a destra):
   il testo di benvenuto sale di gerarchia, in Fraunces, con aria sopra */
.lead-apertura { font-family: var(--font-t); font-size: clamp(23px, 6vw, 28px); line-height: 1.45; color: var(--blu-scuro); margin-top: 10px; }

/* Opzioni: mai sotto i 19px, tocco alto, ben distanziate */
.opts { display: flex; flex-direction: column; gap: 18px; margin-top: 8px; }
button.opt {
  font-family: inherit; text-align: left; cursor: pointer;
  background: var(--carta); color: var(--testo);
  border: 1px solid #cfdde8; border-radius: var(--raggio);
  padding: 20px 20px; min-height: 64px;
  font-size: 19px; line-height: 1.5; letter-spacing: 0.005em; font-weight: 400;
  transition: border-color .15s, transform .06s;
}
button.opt:hover { border-color: var(--blu); }
button.opt:active { transform: scale(0.995); }
button.opt:focus-visible { outline: 3px solid rgba(14,114,181,.4); outline-offset: 2px; }

.btn { display: inline-block; font-family: inherit; cursor: pointer; border-radius: 999px; padding: 17px 30px; font-size: 19px; line-height: 1.3; border: 1px solid var(--blu); min-height: 56px; }
.btn-primary { background: var(--blu); color: #fff; }
.btn-ghost { background: transparent; color: var(--blu); }
.actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 30px; }

.back { background: none; border: none; color: var(--testo-2); font-family: inherit; font-size: 17px; cursor: pointer; padding: 14px 0; margin-top: 24px; min-height: 48px; }
.back:hover { color: var(--blu); }

/* Esito — badge centrato nello spazio tra header e scheda */
.esito-top { display: flex; justify-content: center; margin: 18px 0 26px; }
.badge { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase; }
.badge .dot { width: 16px; height: 16px; border-radius: 50%; flex: none; }
.esito-verde .dot { background: var(--verde); } .esito-verde { color: var(--verde); }
.esito-giallo .dot { background: var(--giallo); } .esito-giallo { color: var(--giallo); }
/* Stop: rosso fisso, spento, nessun glow — è un fermarsi, non un invito */
.esito-stop .dot { background: #a03d31; } .esito-stop { color: #a03d31; }

/* CTA finale colorata come il semaforo: tinte profonde e desaturate,
   glow = alone morbido dello stesso colore (luce, non neon) */
.btn-verde { background: #2b7f4f; border-color: #2b7f4f; color: #fff;
  box-shadow: 0 4px 22px rgba(43, 127, 79, 0.32); }
.btn-verde:hover { box-shadow: 0 4px 28px rgba(43, 127, 79, 0.45); }
.btn-giallo { background: #a8800f; border-color: #a8800f; color: #fff;
  box-shadow: 0 4px 22px rgba(168, 128, 15, 0.30); }
.btn-giallo:hover { box-shadow: 0 4px 28px rgba(168, 128, 15, 0.42); }

/* Impaginazione esito: CTA centrata; "Rifaccia" staccato sul fondo,
   centrato, con aria prima del footer */
.actions-esito { display: flex; flex-direction: column; align-items: center; margin-top: 32px; }
.rifai-zona { display: flex; justify-content: center; margin-top: 34px; padding-bottom: 26px; }

.card { background: var(--carta); border: 1px solid #dce7ef; border-radius: var(--raggio); padding: 28px 24px; margin: 20px 0; }
.card p { font-size: 19px; line-height: 1.6; color: var(--testo); }
.card p + p { margin-top: 16px; }
.grandezza { font-family: var(--font-t); font-size: clamp(23px, 6vw, 28px); color: var(--blu-scuro); line-height: 1.4; }
.ponte { font-size: 17px; color: var(--testo-2); margin-top: 18px; }
.pos-prof { font-size: 18px; color: var(--testo); border-left: 3px solid var(--blu); padding-left: 14px; margin-top: 18px; line-height: 1.6; }

.sim-footer { border-top: 1px solid #dce7ef; background: var(--carta); padding: 20px 0 28px; }
.sim-footer p { font-size: 16px; line-height: 1.6; color: var(--testo-2); }
.sim-footer .muted { margin-top: 8px; font-size: 16px; }

.fade { animation: fade .28s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fade { animation: none; } }