/* =====================================================================
   MyAgent24 - Foglio di stile del sito pubblico (myagent24.app)
   Si carica DOPO assets/css/myagent24.css, mai al suo posto.
   Codifica: UTF-8
   =====================================================================

   Da li' arrivano i token, l'azzeramento, i pulsanti, i riquadri e le
   pillole. Qui ci sono solo i pezzi che il pannello non ha: la vetrina
   del prodotto, i tre passi, il listino, la fascia di chiusura.

   Il motivo per cui non e' un foglio a se' stante e' §17: chi passa
   dalla landing alla registrazione deve avere la sensazione di essere
   rimasto nello stesso posto. Con due fogli separati, due bottoni blu
   diventano due blu diversi nel giro di un mese.

   Nessun valore di colore o dimensione scritto qui dentro: solo token.
   ===================================================================== */


/* ---------------------------------------------------------------------
   IMPIANTO
   --------------------------------------------------------------------- */
.contenitore {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.sezione { padding: var(--space-3xl) 0; }
.sezione--card { background: var(--color-card); }
.sezione--stretta { padding: var(--space-2xl) 0; }

.sezione__intestazione {
  max-width: 42rem;
  margin: 0 auto var(--space-2xl);
  text-align: center;
}
.sezione__intestazione h2 { font-size: var(--testo-2xl); margin-bottom: var(--space-md); }
.sezione__intestazione p {
  color: var(--color-muted-foreground);
  font-size: var(--testo-lg);
}

/* Occhiello: la riga corta sopra il titolo. Maiuscoletto spaziato, che
   nello stile svizzero fa da etichetta di sezione senza rubare peso al
   titolo vero. */
.occhiello {
  display: block;
  font-size: var(--testo-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}


/* ---------------------------------------------------------------------
   TESTATA
   Resta appiccicata in alto: il MASTER chiede la chiamata all'azione
   nell'eroe e in fondo, e su una pagina lunga "in fondo" arriva tardi.
   --------------------------------------------------------------------- */
.sito-testata {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-card);
  border-bottom: 1px solid var(--color-border);
}

.sito-testata__interno {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-height: var(--altezza-testata);
}

.sito-marchio {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: 700;
  font-size: var(--testo-lg);
  color: var(--color-foreground);
  letter-spacing: -0.01em;
}
.sito-marchio:hover { text-decoration: none; }
.sito-marchio svg { color: var(--color-primary); width: 24px; height: 24px; }

.sito-testata__azioni {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* La testata non va mai a capo e i pulsanti non si stringono: se non
   ci stanno, sfondano la pagina in orizzontale. Si tolgono a scaglioni,
   e l'ultima a restare e' sempre la chiamata all'azione.
     sotto 820px: via i due collegamenti lunghi
     sotto 480px: resta solo marchio + CTA */
@media (max-width: 819px) {
  .sito-testata__azioni .solo-largo { display: none; }
}
@media (max-width: 479px) {
  .sito-testata__azioni .solo-medio { display: none; }
}


/* ---------------------------------------------------------------------
   EROE
   --------------------------------------------------------------------- */
.eroe {
  padding: var(--space-3xl) 0 var(--space-2xl);
  background: var(--color-card);
  border-bottom: 1px solid var(--color-border);
}

.eroe__testo { max-width: 44rem; }

.eroe__titolo {
  font-size: var(--testo-3xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: var(--space-lg);
}
.eroe__titolo em {
  font-style: normal;
  /* Il sottolineato spesso e' l'unico segno grafico della pagina:
     marca la mezza frase su cui il lettore deve fermarsi, senza
     introdurre un secondo colore di testo da verificare per contrasto.
     Disegnato come sfondo e non come ombra interna: su un elemento in
     linea che va a capo, l'ombra si spezza male. */
  background-image: linear-gradient(var(--color-muted), var(--color-muted));
  background-repeat: no-repeat;
  background-size: 100% 0.35em;
  background-position: 0 88%;
}

.eroe__sommario {
  font-size: var(--testo-lg);
  color: var(--color-muted-foreground);
  max-width: 38rem;
  margin-bottom: var(--space-xl);
}

.eroe__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.eroe__nota {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  font-size: var(--testo-sm);
  color: var(--color-muted-foreground);
}
.eroe__nota span { display: flex; align-items: center; gap: var(--space-xs); }
.eroe__nota svg { width: 16px; height: 16px; color: var(--color-ok); flex-shrink: 0; }

@media (min-width: 768px) {
  .eroe { padding: var(--space-3xl) 0; }
  .eroe__titolo { font-size: var(--testo-4xl); }
}


/* ---------------------------------------------------------------------
   VETRINA
   La coda delle richieste, disegnata con gli stessi pezzi del pannello
   vero (§17): e' l'elemento che convince piu' di tre paragrafi, e
   funziona come prova solo se e' identica al prodotto.
   --------------------------------------------------------------------- */
.vetrina {
  border: 1px solid var(--color-border);
  border-radius: var(--raggio-lg);
  overflow: hidden;
  background: var(--color-card);
  box-shadow: var(--shadow-lg);
}

.vetrina__barra {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-background);
  border-bottom: 1px solid var(--color-border);
}
.vetrina__punti { display: flex; gap: var(--space-xs); }
.vetrina__punti i {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--color-border);
}
.vetrina__indirizzo {
  font-size: var(--testo-xs);
  color: var(--color-muted-foreground);
  margin-left: var(--space-sm);
}

.vetrina__corpo { padding: var(--space-lg); }

.vetrina__didascalia {
  margin-top: var(--space-md);
  font-size: var(--testo-sm);
  color: var(--color-muted-foreground);
  text-align: center;
}

/* Lo scambio: domanda del cliente e risposta partita */
.scambio { display: grid; gap: var(--space-md); margin-top: var(--space-lg); }
.messaggio {
  border: 1px solid var(--color-border);
  border-radius: var(--raggio);
  padding: var(--space-md);
  background: var(--color-card);
}
.messaggio--risposta {
  background: var(--color-info-fondo);
  border-color: var(--color-primary);
}
.messaggio__testata {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  font-size: var(--testo-sm);
}
.messaggio__chi { font-weight: 600; }
.messaggio__quando { color: var(--color-muted-foreground); margin-left: auto; }
.messaggio__corpo { font-size: var(--testo-sm); white-space: pre-line; }


/* ---------------------------------------------------------------------
   I TRE PASSI
   --------------------------------------------------------------------- */
.passi {
  display: grid;
  gap: var(--space-lg);
  counter-reset: passo;
}
@media (min-width: 768px) {
  .passi { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); }
}

.passo {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--raggio-lg);
  padding: var(--space-lg);
}

/* Il terzo passo e' quello che disinnesca la paura di lasciare la
   propria casella a un automatismo (§17): in pagina deve pesare piu'
   degli altri due, non meno. */
.passo--chiave { border-color: var(--color-primary); box-shadow: var(--shadow-md); }

.passo__numero {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-muted);
  color: var(--color-primary-scuro);
  font-weight: 700;
  font-size: var(--testo-sm);
  margin-bottom: var(--space-md);
}
.passo--chiave .passo__numero { background: var(--color-primary); color: var(--color-on-primary); }

.passo h3 { margin-bottom: var(--space-sm); }
.passo p { color: var(--color-muted-foreground); font-size: var(--testo-sm); }


/* ---------------------------------------------------------------------
   PREGI
   --------------------------------------------------------------------- */
.pregi { display: grid; gap: var(--space-lg); }
@media (min-width: 768px) { .pregi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pregio { display: flex; gap: var(--space-md); }
.pregio__icona {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: var(--raggio);
  background: var(--color-muted);
  color: var(--color-primary-scuro);
  display: flex; align-items: center; justify-content: center;
}
.pregio__icona svg { width: 22px; height: 22px; }
.pregio h3 { margin-bottom: var(--space-xs); }
.pregio p { color: var(--color-muted-foreground); font-size: var(--testo-sm); }


/* ---------------------------------------------------------------------
   LISTINO
   --------------------------------------------------------------------- */
.listino { display: grid; gap: var(--space-lg); align-items: start; }
@media (min-width: 900px) { .listino { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.piano {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--raggio-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  height: 100%;
}
.piano--evidenza { border-color: var(--color-primary); box-shadow: var(--shadow-md); }

.piano__etichetta {
  align-self: flex-start;
  font-size: var(--testo-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
}
.piano__nome { font-size: var(--testo-lg); font-weight: 600; }
.piano__prezzo {
  font-size: var(--testo-2xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.piano__prezzo span {
  font-size: var(--testo-sm);
  font-weight: 500;
  color: var(--color-muted-foreground);
  letter-spacing: 0;
}
.piano__descrizione { color: var(--color-muted-foreground); font-size: var(--testo-sm); flex: 1; }

.elenco-spunte { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.elenco-spunte li {
  display: flex; align-items: flex-start; gap: var(--space-sm);
  font-size: var(--testo-sm);
}
.elenco-spunte svg { width: 18px; height: 18px; color: var(--color-ok); flex-shrink: 0; margin-top: 2px; }

.listino__nota {
  margin-top: var(--space-lg);
  text-align: center;
  color: var(--color-muted-foreground);
  font-size: var(--testo-sm);
}


/* ---------------------------------------------------------------------
   PROVA SOCIALE
   --------------------------------------------------------------------- */
.prova {
  max-width: 44rem;
  margin: 0 auto;
  text-align: center;
}
.prova blockquote {
  margin: 0 0 var(--space-lg);
  font-size: var(--testo-xl);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.prova__firma { color: var(--color-muted-foreground); font-size: var(--testo-sm); }


/* ---------------------------------------------------------------------
   GARANZIE (l'obiezione GDPR, anticipata)
   --------------------------------------------------------------------- */
.garanzie { display: grid; gap: var(--space-lg); }
@media (min-width: 768px) { .garanzie { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.garanzia {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--raggio-lg);
}
.garanzia svg { width: 20px; height: 20px; color: var(--color-ok); flex-shrink: 0; margin-top: 2px; }
.garanzia h3 { margin-bottom: var(--space-xs); }
.garanzia p { color: var(--color-muted-foreground); font-size: var(--testo-sm); }


/* ---------------------------------------------------------------------
   CHIUSURA
   --------------------------------------------------------------------- */
.chiusura {
  background: var(--color-foreground);
  color: var(--color-card);
  padding: var(--space-3xl) 0;
  text-align: center;
}
.chiusura h2 { font-size: var(--testo-2xl); margin-bottom: var(--space-md); }
.chiusura p {
  /* Sul fondo scuro il grigio del testo secondario non regge il
     contrasto: qui il sommario resta bianco e si stacca con la misura */
  max-width: 34rem;
  margin: 0 auto var(--space-xl);
  font-size: var(--testo-lg);
}
.chiusura__nota { font-size: var(--testo-sm); margin: var(--space-lg) auto 0; }


/* ---------------------------------------------------------------------
   PIEDE
   --------------------------------------------------------------------- */
.sito-piede {
  background: var(--color-card);
  border-top: 1px solid var(--color-border);
  padding: var(--space-xl) 0;
  font-size: var(--testo-sm);
  color: var(--color-muted-foreground);
}
.sito-piede__interno {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-xl);
  align-items: center;
}
.sito-piede__legale { max-width: 42rem; }
.sito-piede__contatti { margin-left: auto; display: flex; gap: var(--space-lg); flex-wrap: wrap; }
/* Anche in un piede un collegamento resta un bersaglio da 44px */
.sito-piede__contatti a { display: inline-flex; align-items: center; min-height: 44px; }


/* ---------------------------------------------------------------------
   ANCORE
   Il collegamento interno non deve finire sotto la testata appiccicata.
   --------------------------------------------------------------------- */
[id] { scroll-margin-top: calc(var(--altezza-testata) + var(--space-md)); }

/* Chi ha chiesto meno movimento lo riceve dal foglio base, che
   azzera scroll-behavior con !important per tutta l'applicazione. */
html { scroll-behavior: smooth; }


/* ---------------------------------------------------------------------
   CARD DENTRO LE SEZIONI CHIARE
   Una card bianca su una sezione bianca sparisce, e resta solo il bordo.
   Dentro le sezioni chiare la superficie della card diventa il fondo
   pagina: e' lo stesso rapporto del resto del prodotto, rovesciato.
   Le due card che devono spiccare - il terzo passo e il piano di
   ingresso - restano bianche, e diventano loro quelle sollevate.
   --------------------------------------------------------------------- */
.sezione--card .passo,
.sezione--card .piano,
.sezione--card .garanzia { background: var(--color-background); }

.sezione--card .passo--chiave,
.sezione--card .piano--evidenza { background: var(--color-card); }


/* ---------------------------------------------------------------------
   DOCUMENTI LEGALI
   Informativa e condizioni. Misura di riga corta e gerarchia netta: sono
   pagine che nessuno legge per piacere, e l'unica cortesia possibile e'
   renderle scorribili.
   --------------------------------------------------------------------- */
.documento { max-width: 46rem; margin: 0 auto; }

.documento h1 { font-size: var(--testo-2xl); margin-bottom: var(--space-sm); }

.documento__sommario {
  color: var(--color-muted-foreground);
  font-size: var(--testo-lg);
  margin-bottom: var(--space-xl);
}

.documento h2 {
  font-size: var(--testo-xl);
  margin: var(--space-2xl) 0 var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}
.documento h3 { margin: var(--space-lg) 0 var(--space-sm); }

.documento ul, .documento ol {
  margin: 0 0 var(--space-md);
  padding-left: var(--space-lg);
  display: grid;
  gap: var(--space-sm);
}

.documento .tabella-contenitore { margin-bottom: var(--space-md); }

.documento__data {
  margin-top: var(--space-2xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  font-size: var(--testo-sm);
  color: var(--color-muted-foreground);
}

/* Indice: su un documento lungo e' la differenza fra scorrerlo e
   chiuderlo. Non e' decorazione. */
.indice {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--raggio-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
}
.indice p { font-weight: 600; margin-bottom: var(--space-sm); }
.indice ol { margin: 0; padding-left: var(--space-lg); display: grid; gap: var(--space-xs); }
.indice a { font-size: var(--testo-sm); }

/* Un dato identificativo che manca non si nasconde: si vede. Un'informativa
   pubblicata senza il nome del titolare non e' un'informativa, e il modo
   peggiore di accorgersene e' che lo noti qualcun altro. */
.da-compilare {
  background: var(--color-attesa-fondo);
  color: var(--color-attesa);
  font-weight: 600;
  padding: 0 var(--space-xs);
  border-radius: var(--raggio-sm);
  white-space: nowrap;
}