/* ============================================================
   MAPPA — foglio della sola esperienza guidata.
   Restyling del 14/09/2026: stessa lingua visiva della nuova home,
   guide, contatti e per chi è. Logica, domande e testi non cambiano:
   qui si tocca soltanto l'aspetto.
   ============================================================ */

/* --- pagina di ingresso ------------------------------------------------- */

/* Due colonne: a sinistra il testo con il modulo, a destra l'anteprima del
   risultato. La prima cosa che si vede resta il titolo, e subito sotto il
   campo email. */
.mappa-intro{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.58fr);
  gap:clamp(30px,4vw,58px);
  align-items:center;
  padding:clamp(30px,3.4vw,48px) var(--side) clamp(34px,3.8vw,54px);
  border-bottom:1px solid var(--border);
}
.mappa-intro-testo{max-width:640px}

.mappa-etichetta{color:var(--red);margin-bottom:16px}
.mappa-titolo{
  font-family:var(--sans);
  font-size:clamp(32px,4.2vw,48px);
  line-height:1.08;
  font-weight:600;
  letter-spacing:-.02em;
  margin-bottom:16px;
}
.mappa-titolo em{color:var(--red);font-style:normal;font-weight:600}

.mappa-promessa{
  font-size:clamp(16.5px,1.5vw,18.5px);
  line-height:1.5;
  font-weight:500;
  color:var(--black);
  max-width:540px;
  margin-bottom:26px;
}

/* anteprima del risultato: accompagna, non fa da copertina */
.mappa-intro-figura{display:flex;justify-content:flex-end;align-self:center}
.mappa-intro-figura img{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:clamp(240px,26vw,360px);
  border-radius:14px;
  border:1px solid var(--border);
  box-shadow:0 18px 40px rgba(33,29,26,.10);
}

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

.mappa-etichetta-campo{
  display:block;
  font-size:13.5px;
  font-weight:500;
  letter-spacing:.01em;
  color:var(--black);
  margin-bottom:8px;
}

.mappa-riga{
  display:flex;
  gap:12px;
  align-items:stretch;
  max-width:560px;
  flex-wrap:wrap;
}
.mappa-riga input{
  flex:1 1 240px;
  min-width:0;
  height:54px;
  padding:0 16px;
  font-family:var(--sans);
  font-size:16px;
  color:var(--black);
  background:var(--hb-card);
  border:1px solid var(--border);
  border-radius:8px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.mappa-riga input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(169,35,42,.12)}
.mappa-riga input::placeholder{color:rgba(98,91,84,.55)}

.mappa-btn{
  flex:0 0 auto;
  height:54px;
  padding:0 26px;
  background:var(--red);
  color:var(--cream);
  border:1px solid var(--red);
  border-radius:6px;
  font-family:var(--sans);
  font-size:15px;
  font-weight:500;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:14px;
  white-space:nowrap;
  transition:transform .22s ease, box-shadow .22s ease;
}
.mappa-btn:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(169,35,42,.22)}

.mappa-nota-modulo{
  margin-top:14px;
  max-width:520px;
  font-size:12.5px;
  line-height:1.5;
  color:rgba(98,91,84,.82);
}
.mappa-nota-modulo a{
  color:var(--anchor);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
}
.mappa-nota-modulo a:hover{color:var(--red)}

/* campo trappola per i bot */
.mappa-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.mappa-msg{
  display:none;
  padding:13px 16px;
  border-radius:8px;
  font-size:14.5px;
  line-height:1.5;
  margin-bottom:22px;
  max-width:560px;
}
.mappa-msg-errore{
  background:rgba(169,35,42,.08);
  border:1px solid rgba(169,35,42,.30);
  color:var(--red);
}

/* --- cosa ricevi --------------------------------------------------------- */

.mappa-ricevi{
  background:var(--sabbia);
  padding:clamp(44px,4.8vw,68px) var(--side) clamp(46px,5vw,70px);
  border-bottom:1px solid var(--border);
}
/* La riga che dice che cosa la MAPPA non è: sta sopra le card, centrata,
   e ha il peso di una frase che si legge, non di un avvertimento. */
.mappa-nontest{
  margin:0 auto clamp(20px,2.4vw,30px);
  max-width:660px;
  text-align:center;
  font-family:var(--sans);
  font-size:clamp(17px,1.5vw,19px);
  line-height:1.45;
  font-weight:500;
  color:var(--anchor);
}
.mappa-ricevi-titolo{
  font-family:var(--sans);
  font-size:clamp(26px,2.8vw,34px);
  line-height:1.14;
  font-weight:600;
  letter-spacing:-.02em;
  text-align:center;
  margin-bottom:clamp(26px,3vw,40px);
}
.mappa-ricevi-griglia{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,1.8vw,22px);
  max-width:1120px;
  margin:0 auto;
  align-items:stretch;
}
/* Card come quelle della home: fondo crema schiarito, angoli, bordo sottile,
   un accento carminio in alto e altezze uniformi. Nessuna icona. */
.mappa-ricevi-voce{
  display:flex;
  flex-direction:column;
  height:100%;
  padding:26px 28px 28px;
  background:var(--hb-card);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 2px 10px rgba(33,29,26,.05);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.mappa-ricevi-voce::before{
  content:"";
  display:block;
  width:34px;
  height:3px;
  border-radius:2px;
  background:var(--red);
  margin-bottom:18px;
}
.mappa-ricevi-voce:hover{
  transform:translateY(-5px);
  border-color:var(--red);
  box-shadow:0 18px 38px rgba(33,29,26,.08);
}
.mappa-ricevi-voce h3{
  font-family:var(--sans);
  font-size:clamp(19px,1.7vw,22px);
  line-height:1.2;
  font-weight:600;
  letter-spacing:-.015em;
  margin-bottom:10px;
}
.mappa-ricevi-voce p{
  font-size:15.5px;
  line-height:1.6;
  color:var(--muted);
}

@media (max-width:900px){
  /* Sotto i 900px l'anteprima sparisce: allungava la pagina proprio dove
     serve arrivare subito al campo e al pulsante. */
  .mappa-intro{grid-template-columns:1fr;gap:26px}
  .mappa-intro-figura{display:none}
  .mappa-ricevi-griglia{grid-template-columns:1fr;gap:14px}
  .mappa-ricevi-titolo,.mappa-nontest{text-align:left;margin-left:0}
}

@media (max-width:560px){
  .mappa-intro{padding-top:20px}
  .mappa-riga{flex-direction:column;max-width:400px;gap:10px}
  .mappa-riga input{flex:0 0 auto;width:100%;height:50px;min-height:50px;padding:0 14px}
  .mappa-btn{width:100%;height:50px;padding:0 22px;font-size:15px;justify-content:space-between}
  .mappa-etichetta{margin-bottom:12px}
  .mappa-nota-modulo{max-width:400px;font-size:12px}
  .mappa-msg{max-width:400px}
  .mappa-ricevi-voce{padding:22px 22px 24px}
  .mappa-nontest{font-size:17px}
}

/* --- percorso guidato --------------------------------------------------- */

/* Testo riservato ai lettori di schermo: invisibile, ma letto ad alta voce. */
.mappa-sr{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* Contorno visibile a chi naviga da tastiera. */
.mappa-opzione:focus-visible,
.mappa-indietro:focus-visible,
.mappa-feedback-btn:focus-visible,
.mappa-cta:focus-visible,
.mappa-btn:focus-visible,
.mappa-riga input:focus-visible{
  outline:2px solid var(--red);
  outline-offset:3px;
  border-radius:10px;
}
.mappa-domanda:focus,
.mappa-risultato-titolo:focus{outline:none}

.mappa-percorso{
  max-width:760px;
  margin:0 auto;
  padding:clamp(28px,4.4vw,52px) var(--side) clamp(50px,7vw,84px);
}
.mappa-schermata{display:none}
.mappa-schermata.attiva{display:block;animation:mappa-entra .32s ease}
@keyframes mappa-entra{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

/* Indicatore di avanzamento: il titoletto della domanda con un trattino
   carminio davanti, così si vede a colpo d'occhio a che punto si è. */
.mappa-passo{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--red);
  margin-bottom:18px;
}
.mappa-passo::before{
  content:"";
  width:28px;
  height:2px;
  border-radius:2px;
  background:var(--red);
  flex:0 0 auto;
}
.mappa-domanda{
  font-family:var(--sans);
  font-size:clamp(25px,3.1vw,34px);
  line-height:1.18;
  font-weight:600;
  letter-spacing:-.02em;
  margin-bottom:12px;
}
.mappa-sottodomanda{
  font-size:16px;
  line-height:1.6;
  color:var(--muted);
  margin-bottom:26px;
  max-width:600px;
}

/* --- opzioni di risposta ------------------------------------------------- */

.mappa-opzioni{display:flex;flex-direction:column;gap:12px;margin-top:10px}
.mappa-opzione{
  position:relative;
  text-align:left;
  width:100%;
  background:var(--hb-card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:18px 52px 18px 22px;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  color:var(--black);
  cursor:pointer;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease, background .18s ease;
}
/* la freccia compare al passaggio e allo stato attivo: dice «si va di qua» */
.mappa-opzione::after{
  content:"→";
  position:absolute;
  right:20px;
  top:50%;
  transform:translateY(-50%);
  color:var(--red);
  font-size:17px;
  opacity:0;
  transition:opacity .18s ease, transform .18s ease;
}
.mappa-opzione:hover{
  border-color:var(--red);
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(33,29,26,.09);
}
.mappa-opzione:hover::after{opacity:1;transform:translate(4px,-50%)}
.mappa-opzione:active,
.mappa-opzione.mappa-opzione-scelta{
  border-color:var(--red);
  background:rgba(169,35,42,.06);
  transform:translateY(0);
  box-shadow:none;
}
.mappa-opzione:active::after,
.mappa-opzione.mappa-opzione-scelta::after{opacity:1}

/* l'opzione di servizio: stessa forma, peso minore */
.mappa-opzione.mappa-opzione-fuori{
  background:transparent;
  border-style:dashed;
  color:var(--muted);
  font-size:15px;
  box-shadow:none;
}
.mappa-opzione.mappa-opzione-fuori:hover{background:rgba(33,29,26,.03)}

.mappa-indietro{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:30px;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  font-family:var(--sans);
  font-size:13.5px;
  font-weight:500;
  letter-spacing:.03em;
  color:var(--anchor);
  transition:color .2s ease;
}
.mappa-indietro:hover{color:var(--red)}

/* --- schermata di conferma ---------------------------------------------- */

.mappa-segnali{
  list-style:none;
  margin:24px 0 30px;
  padding:22px 26px;
  background:var(--sabbia);
  border-radius:12px;
}
.mappa-segnali li{
  position:relative;
  padding:0 0 0 22px;
  margin-bottom:14px;
  font-size:16.5px;
  line-height:1.55;
  color:var(--black);
}
.mappa-segnali li::before{
  content:"";
  position:absolute;
  left:0;
  top:11px;
  width:8px;
  height:2px;
  border-radius:2px;
  background:var(--red);
}
.mappa-segnali li:last-child{margin-bottom:0}

/* --- risultato ----------------------------------------------------------- */

.mappa-risultato-nome{color:var(--red);margin-bottom:14px}
.mappa-risultato-titolo{
  font-family:var(--sans);
  font-size:clamp(27px,3.4vw,38px);
  line-height:1.14;
  font-weight:600;
  letter-spacing:-.02em;
  margin-bottom:30px;
}
.mappa-blocco{
  padding:20px 24px;
  background:var(--hb-card);
  border:1px solid var(--border);
  border-radius:12px;
  margin-bottom:14px;
}
.mappa-blocco h2{
  font-family:var(--sans);
  color:var(--red);
  margin-bottom:8px;
}
.mappa-blocco p{
  font-size:16.5px;
  line-height:1.62;
  color:var(--black);
}
/* i due blocchi in sordina restano senza cornice: sono note, non passaggi */
.mappa-blocco.mappa-blocco-tenue{
  background:transparent;
  border:0;
  padding:6px 0 0;
  margin-bottom:14px;
}
.mappa-blocco.mappa-blocco-tenue h2{color:var(--anchor)}
.mappa-blocco.mappa-blocco-tenue p{color:var(--muted);font-size:15.5px}

.mappa-nota{
  border:1px solid var(--border);
  border-left:3px solid var(--red);
  border-radius:0 10px 10px 0;
  background:var(--sabbia);
  padding:16px 20px;
  font-size:14.5px;
  line-height:1.55;
  color:var(--muted);
  margin-bottom:22px;
}

.mappa-ponte{
  border-top:1px solid var(--border);
  margin-top:38px;
  padding-top:32px;
}
.mappa-ponte-intro{
  font-size:17px;
  line-height:1.6;
  margin-bottom:10px;
}
.mappa-ponte-testo{
  font-size:16px;
  line-height:1.62;
  color:var(--muted);
  margin-bottom:24px;
}
.mappa-sopratitolo{
  font-family:var(--sans);
  font-size:clamp(20px,1.9vw,24px);
  line-height:1.2;
  font-weight:600;
  letter-spacing:-.015em;
  color:var(--red);
  margin-bottom:14px;
}
.mappa-cta{
  display:inline-flex;
  align-items:center;
  gap:16px;
  height:52px;
  padding:0 30px;
  background:var(--red);
  color:var(--cream);
  border:1px solid var(--red);
  border-radius:6px;
  font-size:15px;
  font-weight:500;
  transition:transform .22s ease, box-shadow .22s ease;
}
.mappa-cta:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(169,35,42,.22)}

.mappa-copia{
  margin-top:26px;
  font-size:13.5px;
  line-height:1.55;
  color:var(--muted);
}
.mappa-copia.mappa-copia-ok::before{content:"✓  ";color:var(--red);font-weight:600}

.mappa-feedback{
  border-top:1px solid var(--border);
  margin-top:40px;
  padding-top:30px;
}
.mappa-feedback p{font-size:15.5px;line-height:1.6;margin-bottom:16px}
.mappa-feedback-opzioni{display:flex;gap:10px;flex-wrap:wrap}
.mappa-feedback-btn{
  background:transparent;
  border:1px solid var(--border);
  border-radius:999px;
  padding:9px 20px;
  font-family:var(--sans);
  font-size:14px;
  color:var(--muted);
  cursor:pointer;
  transition:border-color .18s ease, color .18s ease, background .18s ease;
}
.mappa-feedback-btn:hover{border-color:var(--red);color:var(--red);background:rgba(169,35,42,.05)}
.mappa-feedback-grazie{display:none;font-size:15px;color:var(--muted);font-style:italic}

@media (max-width:760px){
  .mappa-percorso{padding-top:26px}
  .mappa-opzione{padding:16px 46px 16px 18px;font-size:15.5px}
  .mappa-segnali{padding:18px 20px}
  .mappa-blocco{padding:18px 20px}
  .mappa-cta{width:100%;justify-content:space-between}
}