/* ===========================================================
   Quiz Funnel — Gianni Caldarola
   Titoli: Molde SemiExpanded MediumItalic · Testo: Montserrat
   Palette brand: lime #E4EF48 · nero #0D0D0D · teal #48A9A6
   Pensato prima per il telefono.
   =========================================================== */

@font-face {
  font-family: 'Molde';
  src: url('fonts/Molde-SemiExpanded-MediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

:root {
  --nero: #0D0D0D;
  --nero-carta: #161616;
  --nero-bordo: #2A2A2A;
  --lime: #E4EF48;
  --teal: #48A9A6;
  --bianco: #FFFFFF;
  --grigio: #9A9A9A;
  --grigio-scuro: #6B6B6B;
  --rosso: #E86A5C;

  --raggio: 14px;
  --larghezza: 620px;
  --transizione: 220ms cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }

/* Diversi elementi qui hanno un display esplicito (block, flex), che da solo
   vincerebbe sull'attributo hidden lasciandoli visibili. Questa riga tiene
   nascosto per davvero tutto quello che marco come hidden da JavaScript. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--nero);
  color: var(--bianco);
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- Barra di avanzamento ---------- */

.barra-avanzamento {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--nero-bordo);
  z-index: 50;
}

.barra-riempimento {
  height: 100%;
  width: 0;
  background: var(--lime);
  transition: width var(--transizione);
}

/* ---------- Impianto generale ---------- */

.contenitore {
  max-width: var(--larghezza);
  margin: 0 auto;
  padding: 32px 22px calc(48px + env(safe-area-inset-bottom));
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.schermata { display: none; }

.schermata.attiva {
  display: block;
  animation: entra 300ms cubic-bezier(.4, 0, .2, 1);
}

@keyframes entra {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .schermata.attiva { animation: none; }
  * { transition-duration: 1ms !important; }
}

/* ---------- Testi ---------- */

.etichetta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--lime);
  margin: 0 0 18px;
}

.titolo-principale {
  font-family: 'Molde', 'Montserrat', sans-serif;
  font-style: italic;
  font-size: clamp(30px, 8vw, 46px);
  line-height: 1.12;
  letter-spacing: -.01em;
  margin: 0 0 20px;
}

.titolo-principale .accento { color: var(--lime); }

.sottotitolo {
  font-size: 16px;
  color: var(--grigio);
  margin: 0 0 34px;
  max-width: 46ch;
}

.sottotitolo strong { color: var(--bianco); font-weight: 600; }

/* ---------- Modulo contatto ---------- */

.modulo-contatto { display: flex; flex-direction: column; gap: 18px; }

.campo { display: flex; flex-direction: column; gap: 7px; }

.campo label {
  font-size: 13px;
  font-weight: 600;
  color: var(--bianco);
}

.campo input {
  background: var(--nero-carta);
  border: 1.5px solid var(--nero-bordo);
  border-radius: var(--raggio);
  padding: 16px 18px;
  color: var(--bianco);
  font-family: inherit;
  font-size: 16px; /* niente zoom automatico su iOS */
  transition: border-color var(--transizione);
}

.campo input::placeholder { color: var(--grigio-scuro); }

.campo input:focus {
  outline: none;
  border-color: var(--lime);
}

.campo input.non-valido { border-color: var(--rosso); }

.nota-campo {
  font-size: 12.5px;
  color: var(--grigio-scuro);
  line-height: 1.45;
}

.errore {
  font-size: 12.5px;
  color: var(--rosso);
  display: none;
}

.errore.visibile { display: block; }

/* ---------- Bottoni ---------- */

.bottone-primario {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 17px 22px;
  background: var(--lime);
  color: var(--nero);
  border: none;
  border-radius: var(--raggio);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: transform var(--transizione), filter var(--transizione);
}

.bottone-primario:hover { filter: brightness(1.06); }
.bottone-primario:active { transform: scale(.985); }

.bottone-testo { display: block; font-size: 17px; }

.bottone-nota {
  display: block;
  font-size: 12px;
  font-weight: 500;
  opacity: .72;
  margin-top: 3px;
}

.bottone-secondario {
  display: block;
  margin-top: 22px;
  padding: 15px 20px;
  background: transparent;
  border: 1.5px solid var(--nero-bordo);
  border-radius: var(--raggio);
  color: var(--grigio);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  transition: border-color var(--transizione), color var(--transizione);
}

.bottone-secondario:hover { border-color: var(--teal); color: var(--bianco); }

.bottone-indietro {
  margin-top: 26px;
  background: none;
  border: none;
  padding: 8px 0;
  color: var(--grigio-scuro);
  font-family: inherit;
  font-size: 13.5px;
  cursor: pointer;
  transition: color var(--transizione);
}

.bottone-indietro:hover { color: var(--bianco); }
.bottone-indietro[hidden] { display: none; }

.prova-sociale {
  margin: 26px 0 0;
  font-size: 13px;
  color: var(--grigio-scuro);
  text-align: center;
}

.prova-sociale strong { color: var(--teal); font-weight: 600; }

/* ---------- Domande ---------- */

.contatore {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--lime);
  margin: 0 0 16px;
}

.titolo-domanda {
  font-family: 'Molde', 'Montserrat', sans-serif;
  font-style: italic;
  font-size: clamp(24px, 6.2vw, 34px);
  line-height: 1.2;
  margin: 0 0 10px;
}

.occhiello-domanda {
  font-size: 14.5px;
  color: var(--grigio);
  margin: 0 0 26px;
}

.occhiello-domanda:empty { display: none; }

.opzioni { display: flex; flex-direction: column; gap: 11px; }

.opzione {
  width: 100%;
  text-align: left;
  background: var(--nero-carta);
  border: 1.5px solid var(--nero-bordo);
  border-radius: var(--raggio);
  padding: 18px 20px;
  color: var(--bianco);
  font-family: inherit;
  font-size: 15.5px;
  line-height: 1.45;
  cursor: pointer;
  transition: border-color var(--transizione), background var(--transizione), transform var(--transizione);
}

.opzione:hover {
  border-color: var(--lime);
  background: #1C1C1C;
}

.opzione:active { transform: scale(.99); }

.opzione.scelta {
  border-color: var(--lime);
  background: rgba(228, 239, 72, .1);
}

/* ---------- Esito e scarto ---------- */

.esito { padding-bottom: 10px; }

.titolo-esito {
  font-family: 'Molde', 'Montserrat', sans-serif;
  font-style: italic;
  font-size: clamp(26px, 7vw, 38px);
  line-height: 1.15;
  margin: 0 0 16px;
  color: var(--lime);
}

.sommario-esito {
  font-size: 16.5px;
  color: var(--bianco);
  font-weight: 500;
  margin: 0 0 30px;
}

.testo-esito p { color: var(--grigio); margin: 0 0 16px; }
.testo-esito strong { color: var(--bianco); }

.blocco-diagnosi {
  background: var(--nero-carta);
  border: 1px solid var(--nero-bordo);
  border-radius: var(--raggio);
  padding: 22px;
  margin-bottom: 16px;
}

.titolo-blocco {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 14px;
}

.blocco-diagnosi p { margin: 0 0 12px; color: var(--grigio); font-size: 15px; }
.blocco-diagnosi p:last-child { margin-bottom: 0; }
.blocco-diagnosi strong { color: var(--bianco); font-weight: 600; }

.passi { margin: 0; padding-left: 20px; color: var(--grigio); font-size: 15px; }
.passi li { margin-bottom: 11px; }
.passi li:last-child { margin-bottom: 0; }
.passi strong { color: var(--bianco); font-weight: 600; }

.riquadro-contatto {
  border-left: 3px solid var(--lime);
  background: rgba(228, 239, 72, .06);
  border-radius: 0 var(--raggio) var(--raggio) 0;
  padding: 20px 22px;
  margin: 26px 0 0;
}

.riquadro-contatto p { margin: 0; font-size: 15px; color: var(--grigio); }
.riquadro-contatto strong { color: var(--bianco); }

.titolo-riquadro {
  font-family: 'Molde', 'Montserrat', sans-serif;
  font-style: italic;
  font-size: 20px;
  color: var(--bianco) !important;
  margin: 0 0 8px !important;
}

.stato-invio {
  margin-top: 20px;
  font-size: 12.5px;
  color: var(--grigio-scuro);
  text-align: center;
  min-height: 18px;
}

.stato-invio.errore-invio { color: var(--rosso); }

/* ---------- Schermi larghi ---------- */

@media (min-width: 700px) {
  .contenitore { padding: 56px 32px; }
  .opzione { padding: 19px 24px; }
}