/* I PEZZI CONDIVISI fra piu' pagine: il bottone azzurro pieno, l'anteprima del report
   (l'anello col voto e le tre barrette) e le schede dei pacchetti.

   ⭐⭐ Perche' un file a se': queste regole servono a piu' pagine insieme. L'anteprima del
   report sta nella home e su /agenzie; le schede dei pacchetti su /prezzi e su /agenzie; il
   bottone pieno un po' ovunque. Erano scritte DUE VOLTE — dentro `index.html` e nel foglio
   della pagina separata — e due copie, alla prima modifica, divergono senza che nessuno se
   ne accorga.

   ⚠️ Va caricato DOPO `sito.css` e PRIMA dello <style> in linea di `index.html`: le poche
   regole che li' devono restare diverse continuano a vincere per ordine di cascata. */

.lp-testo { font-size: 17px; color: var(--muted); line-height: 1.6; }
/* Comparsa a scorrimento: le schede e i passi entrano dal basso, sfalsati. */
.anim.visibile { opacity: 1; transform: none; }
.anim { opacity: 0; transform: translateY(40px); transition: opacity .8s ease, transform .8s ease; }
.lp-demo { background: #fff; border: 1px solid var(--line); border-radius: 16px;
    box-shadow: 0 18px 44px rgba(28,47,54,.1); overflow: hidden; }
.lp-demo .testa { padding: 20px 22px; display: flex; align-items: center; gap: 18px;
    border-bottom: 1px solid var(--line); }
.lp-demo .anello { flex: none; width: 76px; height: 76px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; }
.lp-demo .foro { width: 58px; height: 58px; border-radius: 50%; background: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lp-demo .foro b { font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1; }
.lp-demo .foro span { font-size: 8.5px; color: var(--faint); }
.lp-demo .dove { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.lp-demo .voto { font-family: var(--serif); font-size: 19px; font-weight: 500; }
.lp-demo .barre { padding: 16px 22px 20px; display: flex; flex-direction: column; gap: 13px; }
.lp-demo .riga { display: flex; justify-content: space-between; font-size: 12.5px; margin: 0 0 5px; }
.lp-demo .riga span { display: flex; align-items: center; gap: 6px; }
.lp-demo .riga i { color: #7d8f93; }
.lp-demo .track { background: #e4eaea; height: 6px; border-radius: 99px; overflow: hidden; }
.lp-demo .fill { height: 100%; width: 0; transition: width .3s linear; }
.pk-card { background: #fffdfb; border-radius: 16px; padding: 26px 22px;
    border: 1.5px solid rgba(28,47,54,.1); position: relative;
    display: flex; flex-direction: column; height: 100%; box-sizing: border-box; }
.pk-card.evidenza { border-color: var(--brand); box-shadow: 0 12px 32px rgba(47,151,179,.16); }
.pk-etichetta { position: absolute; top: -11px; left: 22px; background: var(--brand); color: #fff;
    font-size: 11px; font-weight: 700; padding: 4px 11px; border-radius: 99px; letter-spacing: .03em; }
.pk-quanti { font-size: 13px; color: #8aa0a5; margin: 0 0 6px; font-weight: 600; }
.pk-prezzo { font-family: var(--serif); font-size: 30px; font-weight: 600; margin: 0 0 6px; }
.pk-riga { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; }
.pk-unitario { font-size: 12.5px; color: var(--muted); margin: 0; }
.pk-sconto { font-size: 11px; font-weight: 700; color: #3f7d55; background: rgba(63,125,85,.12);
    padding: 2px 8px; border-radius: 99px; }
.pk-nota { font-size: 12.5px; color: #7d8f93; margin: 0 0 18px; line-height: 1.5; flex: 1; }
.pk-btn { display: block; width: 100%; box-sizing: border-box; text-align: center;
    background: transparent; color: var(--brand); border: 1.5px solid var(--brand);
    padding: 11px 16px; border-radius: 10px; font-size: 13.5px; font-weight: 700;
    cursor: pointer; font-family: inherit; text-decoration: none;
    transition: background .15s, color .15s; }
/* Contornato: si riempie di un velo del colore del marchio. Pieno: scurisce. Due risposte
     diverse perché sono due bottoni diversi, ma nessuno dei due deve restare immobile. */
.pk-btn:hover { background: var(--brand-soft); color: var(--brand-ink); }
.pk-btn.pieno { background: var(--brand); color: #fff; border: none; }
.pk-btn.pieno:hover { background: var(--brand-ink); color: #fff; }
.pk-come { background: var(--brand); color: #fff; position: relative; }
.pk-come .dentro { max-width: 760px; margin: 0 auto; padding: 64px 28px; }
/* Stesso occhiello della fascia prezzi, stesso blu scuro: anche qui il fondo è brand. */
.pk-come .lp-occhiello { color: #084a5e; font-weight: 800; margin: 0 0 22px; text-align: center; }
.pk-voci { display: flex; flex-direction: column; gap: 16px; }
.pk-voce { display: flex; gap: 14px; align-items: flex-start; }
.pk-voce i { font-size: 20px; color: #fff; margin-top: 2px; }
.pk-voce p { font-size: 14.5px; color: rgba(255,255,255,.85); margin: 0; line-height: 1.6; }
/* ⚠️ Sul fondo blu della fascia un link nel colore del marchio sparirebbe: qui è bianco e
     sottolineato, che su questo sfondo è l'unico modo di farlo vedere come cliccabile. */
.pk-voce a { color: #fff; font-weight: 700; text-decoration: underline; }
.pk-voce a:hover { color: rgba(255,255,255,.75); }
.pk-scrivici { text-align: center; font-size: 13.5px; color: rgba(255,255,255,.72); margin-top: 32px; }
.pk-scrivici a { display: inline-block; margin-top: 12px; margin-left: 14px; background: var(--brand-ink);
    color: #fff; font-weight: 700; padding: 9px 18px; border-radius: 9px; text-decoration: none;
    transition: background .15s; }
.pk-scrivici a:hover { background: #084a5e; color: #fff; }
/* L'indirizzo scritto in chiaro sotto il bottone. ⚠️ Non è un doppione: `mailto:` apre il
     programma di posta PREDEFINITO, e su un computer che non ne ha uno (o dove la posta si
     legge nel browser) il clic non fa assolutamente nulla — nessun sito può farci niente.
     Chi ci si trova deve almeno poter copiare l'indirizzo. */
.pk-scrivici .pk-indirizzo { display: block; margin-top: 12px; font-size: 12.5px;
    color: rgba(255,255,255,.72); }
.pk-scrivici .pk-indirizzo a { display: inline; margin: 0; padding: 0; background: none;
    font-weight: 600; color: #fff; text-decoration: underline; }
.pk-scrivici .pk-indirizzo a:hover { background: none; color: rgba(255,255,255,.85); }
/* La pagina /contatti come pagina autonoma. Va caricata DOPO `sito.css`.
   ⚠️⚠️ È una COPIA delle regole `.ct-*` in linea dentro `index.html` (dove la vista
   `#contatti` esiste ancora): se cambia una, va cambiata l'altra. */
/* Il bottone del sito, ricopiato: `:not(:disabled)` perché un bottone spento non deve
   accendersi al passaggio del mouse. */
.btn-azione { border: none; background: var(--brand); color: #fff; font-family: inherit;
  font-weight: 700; font-size: 14px; padding: 12px 22px; border-radius: 11px; cursor: pointer;
  display: inline-block; text-align: center; text-decoration: none; transition: background .15s; }
/* ⭐ Variante CHIARA, per il tasto secondario affiancato a quello pieno (14/09/2026):
   scritta e bordo nel blu del marchio, fondo TRASPARENTE.
   ⭐ Trasparente e non bianco (richiesta dell'utente): così il tasto prende esattamente il
   colore della fascia su cui sta — il grigio nella sezione «Com'è fatto il report», il
   bianco altrove — e se un giorno quella fascia cambia tinta lo segue da sé, senza che
   nessuno debba ricordarsi di aggiornare un colore scritto a mano in due file.
   Il bordo non è un vezzo: senza, un tasto senza fondo proprio sparirebbe.
   ⚠️ Il padding è 1,5px in meno per lato ESATTAMENTE quanto il bordo che si aggiunge: così
   i due tasti affiancati restano della stessa identica misura, che è la richiesta. Se un
   giorno cambia il bordo, va cambiato anche il padding. */
.btn-azione.chiaro { background: transparent; color: var(--brand); border: 1.5px solid var(--brand);
  padding: 10.5px 20.5px; }
.btn-azione.chiaro:not(:disabled):hover { background: var(--brand-soft); color: var(--brand-ink);
  border-color: var(--brand-ink); }
.btn-azione:not(:disabled):hover { background: var(--brand-ink); color: #fff; }
.btn-azione:disabled { opacity: .5; cursor: default; }
@media (max-width: 700px) {
  .br-desktop { display: none; }
}

/* ── La finestra che si apre sopra la pagina ────────────────────────────
   Serve al dialogo «Fonti dei dati», che dal piede si apre su OGNI pagina, e al foglio
   del report d'esempio dentro `index.html`: le stesse classi per la stessa cosa. */
/* Dialogo delle fonti: riusa l'overlay e la card del modale d'esempio (sfondo sfocato,
     bordi, chiusura), qui serve solo il corpo di testo. */
.fo-corpo { padding: 20px 24px 26px; font-size: 13.5px; line-height: 1.65; color: var(--muted); }
.fo-corpo p { margin: 0 0 12px; }
.fo-corpo p:last-child { margin-bottom: 0; }
/* ---- Modale "Vedi un esempio completo" (finestra flottante del mockup) ---- */
.me-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(20,32,38,.55);
    backdrop-filter: blur(5px); display: flex; align-items: flex-start; justify-content: center;
    padding: 34px 16px; overflow: auto; }
.me-card { width: 100%; max-width: 720px; background: #fffdfb; border-radius: 18px;
    box-shadow: 0 40px 100px rgba(0,0,0,.45); overflow: hidden; animation: mefade .35s ease; }
@keyframes mefade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
  }
.me-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 26px;
    border-bottom: 1px solid var(--line); }
.me-luogo { display: flex; align-items: center; gap: 10px; }
/* La goccia dell'indirizzo: grande il doppio, perché è il soggetto del documento — e del
     colore del marchio, lo stesso del segnaposto sulla mappa (COL_INDIRIZZO). */
.me-luogo > i { font-size: 34px; color: var(--brand); }
/* L'indirizzo è il soggetto del documento: si legge da lontano, e regge il confronto con
     la goccia raddoppiata accanto. La riga della data resta piccola, è una didascalia. */
.me-luogo b { font-size: 20px; font-weight: 600; color: var(--ink); display: block;
    line-height: 1.25; }
.me-luogo span { font-size: 12px; color: var(--faint); }
.me-x { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line);
    background: transparent; color: var(--muted); cursor: pointer; font-size: 15px;
    display: flex; align-items: center; justify-content: center; }
.me-x:hover { background: var(--card-soft); }

/* ⭐ La finestrella delle fonti: staccata dal bordo alto. L'overlay allinea le schede in
   cima (`align-items: flex-start`, giusto per il foglio dell'esempio, che è lungo), ma
   questa è di poche righe e lassù sembra incollata al menu. Solo su schermo grande: sotto
   i 700px lo schermo è tutto quello che c'è, e 200px di vuoto la spingerebbero fuori.
   ⚠️⚠️ Stava solo dentro `index.html`, e nelle pagine separate la finestra si apriva
   200px più in alto che nella home (segnalato dall'utente il 01/09/2026): il dialogo è lo
   stesso ovunque, e le sue misure devono stare dove stanno le altre sue regole. */
#fo-card { max-width: 620px; margin-top: 200px; }
@media (max-width: 700px) {
  #fo-card { margin-top: 0; }
}

/* ── Il modulo di accesso e la tendina dell'account ────────────────────────
   Servono a OGNI pagina: da /privacy o da una guida si deve poter entrare e aprire il
   proprio account restando dove si è. Markup in `static/pagine/_accesso.html`,
   codice in `static/account.js`. */
/* Il menu di chi è collegato riusa la veste del pannello a scomparsa, ma vive a ogni
     larghezza (non solo sotto i 700px) e si aggancia sotto il bottone col nome. */
.menu-utente.aperto { display: flex; }
.menu-utente { border-radius: 0 0 14px 14px; padding: 4px 18px 10px; }
@media (max-width: 700px) {
  .menu-utente { border-radius: 0 0 0 14px; }
}
/* ── Accesso / registrazione / recupero password ─────────────────────────────────
     Un modale, quattro viste. Misure e colori dal mockup 2 (blocco `authOpen`). */
.au-overlay { position: fixed; inset: 0; z-index: 220; background: rgba(20,32,38,.55);
    backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center;
    padding: 20px; overflow: auto; }
.au-card { width: 100%; max-width: 380px; background: #fffdfb; border-radius: 18px;
    box-shadow: 0 40px 100px rgba(0,0,0,.45); padding: 34px 32px 30px; position: relative;
    animation: mefade .35s ease; }
/* La registrazione ha quattro campi: nel mockup il modale si allarga di 40px. */
.au-card.larga { max-width: 420px; }
.au-x { position: absolute; top: 20px; right: 20px; width: 30px; height: 30px;
    border-radius: 8px; border: 1px solid rgba(28,47,54,.12); background: transparent;
    color: var(--muted); cursor: pointer; font-size: 14px;
    display: flex; align-items: center; justify-content: center; }
.au-titolo { font-family: var(--serif); font-weight: 500; font-size: 22px;
    color: var(--ink); margin-bottom: 22px; }
.au-overlay form { display: flex; flex-direction: column; gap: 12px; }
.au-overlay label { font-size: 12.5px; color: var(--muted);
    display: flex; flex-direction: column; gap: 6px; }
.au-overlay label input[type="text"], .au-overlay label input[type="email"],
  .au-overlay label input[type="password"] {
    font-size: 14px; padding: 11px 13px; border-radius: 9px; border: 1px solid rgba(28,47,54,.15);
    font-family: inherit; color: var(--ink); outline: none; background: #fff; }
.au-overlay label input:focus { border-color: var(--brand); }
.au-check { flex-direction: row !important; align-items: flex-start; gap: 9px !important;
    margin-top: 4px; line-height: 1.4; }
.au-check input { margin-top: 2px; }
/* ⚠️ I due collegamenti stanno DENTRO l'etichetta della casella. Non serve fermare
     l'evento a mano: per specifica HTML l'etichetta NON gira il clic alla casella quando
     il clic parte da un discendente interattivo (un link con href lo è), quindi aprire la
     privacy non spunta l'accettazione. ⚠️ Verificato in browser il 28/08/2026: se un
     domani si togliesse l'`href` da uno dei due, quella garanzia cadrebbe e il consenso
     si darebbe proprio nell'atto di andare a leggere cosa si accetta. */
.au-check a { color: var(--brand); text-decoration: underline; }
.au-check a:hover { color: var(--brand-ink); }
.au-btn { margin-top: 6px; background: var(--brand); color: #fff; border: none;
    padding: 12px 18px; border-radius: 10px; font-size: 14.5px; font-weight: 600;
    cursor: pointer; font-family: inherit; }
.au-btn:hover { background: var(--brand-ink); }
.au-oppure { display: flex; align-items: center; gap: 10px; margin: 20px 0; }
.au-oppure::before, .au-oppure::after { content: ""; flex: 1; height: 1px;
    background: rgba(28,47,54,.1); }
.au-oppure span { font-size: 11.5px; color: var(--faint); }
.au-social { display: flex; flex-direction: column; gap: 10px; }
.au-social button { display: flex; align-items: center; justify-content: center; gap: 9px;
    padding: 11px 16px; border-radius: 9px; border: 1px solid rgba(28,47,54,.15);
    background: #fff; color: var(--ink); font-size: 13.5px; font-weight: 600;
    cursor: pointer; font-family: inherit; }
.au-social button i { font-size: 16px; color: var(--muted); }
.au-piede { display: flex; align-items: center; justify-content: space-between;
    margin-top: 22px; font-size: 12.5px; flex-wrap: wrap; gap: 8px; color: var(--faint); }
.au-overlay a { color: var(--brand); font-weight: 600; text-decoration: none; cursor: pointer; }
.au-overlay a:hover { color: #25798e; }
/* Errore dentro il modale, sopra il bottone: è lì che sta guardando chi ha appena
     premuto, e il box errore della pagina resterebbe nascosto sotto l'overlay. */
.au-errore { background: #fdecea; border: 1px solid #ef9a9a; color: #b71c1c;
    border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.4; }
.au-btn-chiaro { background: #fff; color: var(--brand); border: 1px solid var(--brand); }
.au-btn-chiaro:hover { background: var(--hover); }
/* Elenco dei report acquistati, dentro la vista "account". */
.au-report { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 14px;
    max-height: 320px; overflow-y: auto; }
.au-report .vuoto { color: var(--muted); font-size: 13.5px; }
.au-riga-report { display: flex; align-items: center; gap: 10px; text-align: left;
    background: var(--card-soft); border: 1px solid var(--line); border-radius: 10px;
    padding: 10px 12px; cursor: pointer; font-family: inherit; width: 100%; }
.au-riga-report:hover { background: var(--hover); }
.au-riga-report .ind { font-weight: 600; font-size: 14px; color: var(--ink);
    flex: 1; min-width: 0; }
.au-riga-report .meta { color: var(--muted); font-size: 12px; white-space: nowrap; }
.au-testo { font-size: 13.5px; color: var(--muted); margin: 0 0 18px; line-height: 1.5; }
.au-torna { margin-top: 20px; font-size: 12.5px; text-align: center; }
.au-fatto { text-align: center; padding: 10px 0 6px; font-size: 12.5px; }
.au-fatto .segno { width: 44px; height: 44px; margin: 0 auto 16px; border-radius: 50%;
    background: rgba(63,125,85,.12); display: flex; align-items: center; justify-content: center; }
.au-fatto .segno i { font-size: 20px; color: #3f7d55; }
.au-fatto .au-testo { margin-bottom: 20px; }
.au-occhiello { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--brand); margin: 0 0 8px; font-weight: 700; text-align: center; }
.au-h2 { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.15;
    letter-spacing: -.02em; margin: 0 0 6px; text-align: center; }
.au-h2 .au-logo { font-weight: 700; }
.au-h2 .au-logo span { color: var(--brand); }
.au-sotto { font-size: 13.5px; color: var(--muted); text-align: center;
    margin: 0 0 24px; line-height: 1.5; }
.au-gia { text-align: center; font-size: 12.5px; color: var(--faint); margin-top: 22px; }

/* ⚠️⚠️ IN FONDO, e non altrove: nasconde a parità di specificità con le regole che
   danno un `display` — `.me-overlay` qui sopra ha `display: flex` — quindi vince solo
   perché viene DOPO. Senza questa riga il dialogo «Fonti dei dati» nasceva già aperto
   su ogni pagina separata: nessun foglio definiva la classe con cui si nasconde.
   ⚠️ In `index.html` resta la sua, ancora più in basso: vedi il commento accanto. */
.hidden { display: none; }