/* ===================================================================
   Methodly — pagina del modulo
   Stessa lingua della home: campo continuo, filetti sottili, mono per
   le etichette. Qui pero' il marchio non fa da fondale: si monta un
   pezzo per volta man mano che si risponde.
   =================================================================== */

.pagina-funnel { min-height: 100vh; }
.pagina-funnel main { padding: calc(var(--header-h) + clamp(2.5rem, 6vw, 5rem)) 0 clamp(4rem, 8vw, 7rem); }
.funnel-wrap { max-width: 760px; }

.funnel-nota {
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-muted);
}
.funnel-indietro { font-size: .8rem; }
@media (max-width: 720px) { .funnel-nota { display: none; } }

/* ------------------------------------------------------- intestazione */

.funnel-testa { margin-bottom: clamp(2rem, 4vw, 3rem); }
.funnel-testa h1 {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem);
  letter-spacing: -.032em; margin: 1.1rem 0 0; max-width: 16ch;
}
.funnel-sub {
  margin-top: 1.1rem; max-width: 54ch;
  color: var(--fg-muted); font-size: 1.05rem;
}

/* --------------------------------------------------- barra dei passi */

.funnel-barra[hidden] { display: none; }   /* 'display: grid' batteva l'attributo */
.funnel-barra {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: clamp(1.8rem, 3vw, 2.6rem);
}
.funnel-barra li {
  background: var(--panel); padding: .8rem .9rem;
  display: flex; flex-direction: column; gap: .25rem;
  font-family: var(--font-mono); font-size: .72rem;
  color: var(--fg-muted);
  transition: background .35s ease, color .35s ease;
}
.funnel-barra .fb-n { color: var(--line-strong); letter-spacing: .1em; transition: color .35s ease; }
.funnel-barra .fb-t { letter-spacing: .02em; }
.funnel-barra li.attivo { background: var(--accent-soft); color: var(--fg); }
.funnel-barra li.attivo .fb-n { color: var(--accent); }
.funnel-barra li.fatto .fb-n { color: var(--accent); }
.funnel-barra li.fatto .fb-n::after { content: " ✓"; }
@media (max-width: 640px) {
  .funnel-barra { grid-template-columns: repeat(4, 1fr); }
  .funnel-barra .fb-t { display: none; }
  .funnel-barra li { align-items: center; padding: .7rem .4rem; }
}


/* Il marchio sta di lato, senza cornice ne' didascalia: e' un oggetto
   decorativo che resta in vista mentre si scorre il modulo. Che rappresenti
   quello che si sta costruendo si intuisce, non serve dirlo. */
.scena-modulo {
  position: fixed;
  right: clamp(1rem, 3vw, 3.5rem);
  top: 50%; transform: translateY(-50%);
  width: clamp(230px, 21vw, 330px);
  aspect-ratio: 1;
  pointer-events: none;
  z-index: 0;
}
.scena-modulo .scene-canvas { width: 100%; height: 100%; }

/* Sotto i 1180px la colonna del modulo occupa tutto: il marchio torna
   in cima, sempre senza cornice. */
@media (max-width: 1180px) {
  .scena-modulo {
    position: relative; right: auto; top: auto; transform: none;
    width: 100%; aspect-ratio: auto; height: clamp(130px, 20vh, 180px);
    margin-bottom: clamp(1.2rem, 2.5vw, 1.8rem);
  }
}
.no-js .scena-modulo { display: none; }

/* Chiusura: il marchio scivola dal lato al centro e si ingrandisce.
   L'ancora resta la stessa (fixed, a destra): si anima solo la transform,
   perche' left/right non transizionano quando uno dei due e' 'auto'.
   Lo spostamento esatto lo calcola il JS, che conosce le misure vere. */
.scena-modulo { transition: transform 4.2s var(--ease-out); }

@media (max-width: 1180px) {
  .scena-modulo { transition: transform 3.4s var(--ease-out), height 3.4s var(--ease-out); }
  .scena-modulo.completo { height: clamp(240px, 40vh, 340px); }
}
@media (prefers-reduced-motion: reduce) {
  .scena-modulo { transition: none; }
}

/* --------------------------------------------------------- il modulo */

.funnel { position: relative; }

.passo {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: clamp(1.5rem, 3.5vw, 2.4rem);
  margin: 0;
}
.passo legend {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.25rem, 1rem + .8vw, 1.6rem);
  letter-spacing: -.02em; padding: 0 .6rem 0 0;
  display: flex; align-items: baseline; gap: .7rem;
}
.passo .p-num {
  font-family: var(--font-mono); font-size: .74rem; font-weight: 500;
  color: var(--on-accent); background: var(--accent);
  padding: .3em .5em; border-radius: 2px; letter-spacing: .08em;
}
.p-guida { margin-top: .9rem; color: var(--fg-muted); font-size: 1rem; max-width: 52ch; }

/* Senza JS i passi restano tutti aperti: il modulo funziona lo stesso,
   con un solo invio in fondo. */
.js .passo[hidden] { display: none; }
.no-js .passo[hidden] { display: block; }
.no-js .funnel-barra, .no-js #btnAvanti, .no-js #btnIndietro, .no-js .funnel-passo-di { display: none; }
.no-js #btnInvia { display: inline-flex !important; }
/* L'attributo hidden perde contro qualunque 'display' esplicito, e .btn e'
   inline-flex: "Avanti" e "Invia" restavano visibili insieme su ogni passo.
   La regola e' limitata a .js, cosi' il percorso senza JS non cambia. */
.js .btn[hidden], .js .funnel-passo-di[hidden] { display: none; }
.no-js .passo + .passo { margin-top: 1.2rem; }

.js .passo.attivo { animation: passoEntra .5s var(--ease-out) both; }
@keyframes passoEntra {
  from { opacity: 0; transform: translateX(var(--verso, 30px)); }
  to { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------- campi */

.campo { margin-top: 1.6rem; }
.campo-doppio { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 620px) { .campo-doppio { grid-template-columns: 1fr; gap: 0; } }

/* Solo le etichette di campo, non quelle delle scelte: '.campo label'
   colpiva anche le pillole dentro .scelte — specificita' (0,1,1) contro
   (0,1,0) — e le trasformava in blocchi maiuscoli senza gap. */
.campo > label, .campo .etichetta {
  display: block; margin-bottom: .55rem;
  font-family: var(--font-mono); font-size: .74rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted);
}
.campo .etichetta em { text-transform: none; letter-spacing: .02em; font-style: normal; opacity: .8; }

.campo input[type="text"], .campo input[type="email"], .campo input[type="tel"],
.campo select, .campo textarea {
  width: 100%; font: inherit; font-size: 1rem;
  color: var(--fg); background: var(--bg);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: .8em .9em;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.campo textarea { resize: vertical; min-height: 6em; line-height: 1.55; }
.campo select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-muted) 50%),
                    linear-gradient(135deg, var(--fg-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 1.15em, calc(100% - 13px) 1.15em;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-right: 2.4em;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--fg-muted); opacity: .55; }

.aiuto { margin-top: .5rem; font-size: .88rem; color: var(--fg-muted); }

/* ------------------------------------------------- scelte multiple */

.scelte { display: flex; flex-wrap: wrap; gap: .5rem; }
.scelte-fitte .scelta { flex: 0 0 auto; }
.scelta {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: .55em .85em; cursor: pointer;
  font-size: .95rem; color: var(--fg-muted);
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.scelta input { appearance: none; margin: 0; width: 13px; height: 13px; flex: 0 0 auto;
  border: 1px solid var(--line-strong); background: transparent;
  transition: border-color .18s ease, background .18s ease; }
.scelta input[type="radio"] { border-radius: 50%; }
.scelta input[type="checkbox"] { border-radius: 2px; }
.scelta:hover { border-color: var(--accent); color: var(--fg); }
.scelta:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--fg); }
.scelta input:checked { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--panel); }
.scelta:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------------------------------------------------- riepilogo */

.riepilogo {
  margin-top: 1.8rem; padding: 1.1rem 1.3rem;
  border-left: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 55%, transparent);
}
.r-titolo {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent); margin-bottom: .8rem;
}
.riepilogo dl { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1.1rem; margin: 0; }
.riepilogo dt {
  font-family: var(--font-mono); font-size: .74rem; color: var(--fg-muted);
  white-space: nowrap;
}
.riepilogo dd { margin: 0; font-size: .94rem; }
@media (max-width: 560px) { .riepilogo dl { grid-template-columns: 1fr; gap: .1rem .5rem; }
  .riepilogo dd { margin-bottom: .5rem; } }

/* ----------------------------------------------------- consenso */

.consenso {
  display: flex; align-items: flex-start; gap: .7rem;
  margin-top: 1.8rem; font-size: .92rem; color: var(--fg-muted); cursor: pointer;
}
.consenso input { appearance: none; margin: .2em 0 0; width: 15px; height: 15px; flex: 0 0 auto;
  border: 1px solid var(--line-strong); border-radius: 2px; background: transparent;
  transition: background .18s ease, border-color .18s ease; }
.consenso input:checked { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--panel); }
.consenso input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.consenso a { color: var(--accent); }

.nascosto-ai-robot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------ comandi */

.funnel-comandi {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-top: 1.6rem;
}
.funnel-passo-di {
  margin-left: auto; font-family: var(--font-mono);
  font-size: .74rem; color: var(--fg-muted); letter-spacing: .06em;
}

/* -------------------------------------------------------- errori */

.errore {
  margin-top: .5rem; font-family: var(--font-mono); font-size: .76rem;
  color: var(--flag); display: none;
}
.errore.visibile { display: block; }
.errore-invio { margin-top: 1rem; }
.campo input[aria-invalid="true"], .campo select[aria-invalid="true"], .campo textarea[aria-invalid="true"] {
  border-color: var(--flag);
}

/* --------------------------------------------------------- esito */

.esito { text-align: center; padding: clamp(2.5rem, 6vw, 5rem) 0; }
@media (min-width: 1181px) { .esito { padding-top: clamp(470px, 63vh, 610px); } }
.esito .riepilogo { margin: 2rem auto 0; max-width: 460px; text-align: left; }
.esito .eyebrow { justify-content: center; margin-bottom: 1.4rem; }
.esito h2:focus { outline: none; }
.esito h2 { font-size: clamp(1.8rem, 1.4rem + 2vw, 2.8rem); letter-spacing: -.03em; }
.esito-sub { margin: 1.2rem auto 0; max-width: 46ch; color: var(--fg-muted); font-size: 1.05rem; }
.esito-azioni { margin-top: 2.2rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ------------------------------------------ riduzione del movimento */

@media (prefers-reduced-motion: reduce) {
  .js .passo.attivo { animation: none; }
}

/* ------------------------------------------------------------ mobile
   Su schermo stretto il modulo deve restare comodo da usare col pollice:
   niente campi affiancati, pillole a piena larghezza dove il testo e'
   lungo, comandi che non vanno a capo in modo casuale. */

@media (max-width: 620px) {
  .pagina-funnel main { padding-top: calc(var(--header-h) + 1.6rem); }
  .funnel-testa h1 { font-size: clamp(1.7rem, 6.5vw, 2.2rem); }
  .funnel-sub { font-size: .98rem; }

  .passo { padding: 1.2rem 1.1rem 1.5rem; }
  .passo legend { font-size: 1.15rem; gap: .5rem; }
  .p-guida { font-size: .95rem; }

  /* i campi tattili non scendono sotto i 16px, altrimenti iOS zooma da solo */
  .campo input[type="text"], .campo input[type="email"], .campo input[type="tel"],
  .campo select, .campo textarea { font-size: 16px; padding: .85em .8em; }

  .scelte { gap: .45rem; }
  .scelta { padding: .6em .8em; font-size: .92rem; }

  .funnel-comandi { gap: .7rem; }
  .funnel-comandi .btn { flex: 1 1 auto; justify-content: center; }
  .funnel-passo-di { margin-left: 0; width: 100%; text-align: center; order: -1; }

  .riepilogo { padding: .9rem 1rem; }
  .esito-azioni { flex-direction: column; }
  .esito-azioni .btn { width: 100%; }
}

/* Sotto i 420px le pillole lunghe stanno meglio a tutta riga che spezzate */
@media (max-width: 420px) {
  .scelte-fitte .scelta { flex: 1 1 100%; }
}