/* ==========================================================================
   base.css — reset, elementi, componenti condivisi da tutte le pagine.
   Dipende da tokens.css, che va caricato prima.
   Nessun esadecimale qui dentro: solo var(--c-*).
   ========================================================================== */

/* ---------------------------------------------------------------- 1. reset */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Lenis prende il controllo dello scroll; senza JS resta questo. */

  /* Gli elementi in attesa di comparire sono traslati di lato (vedi
     [data-reveal="right"]): finché non entrano in vista allargano la pagina e
     su telefono si riesce a spostarla di qualche pixel in orizzontale.
     `clip` lo impedisce senza creare un contenitore di scorrimento — con
     `hidden` l'intestazione appiccicata in alto smetterebbe di funzionare. */
  overflow-x: clip;
}
/* Blocco dello scorrimento quando è aperto un pannello a tutto schermo.
   Sta su <html> e non su <body> di proposito: `overflow:hidden` sul corpo lo
   rende un contenitore di scorrimento, e l'intestazione appiccicata smette di
   agganciarsi alla finestra. Su <html> lo scorrimento si ferma e la barra
   resta dov'è. */
html.blocco-scroll { overflow: hidden; }

/* L'attributo `hidden` deve nascondere davvero.

   Il browser lo applica con `[hidden] { display: none }`, che e' una regola
   del foglio predefinito: qualunque regola di questo progetto con un selettore
   di classe la batte. `.login { display: grid }` bastava a rendere `hidden`
   completamente inutile, e il 29/08/2026 e' costato giorni: dopo l'accesso la
   dashboard si apriva davvero, ma il pannello di accesso restava sopra, alto
   quanto lo schermo, e la dashboard finiva sotto la piega. Da fuori sembrava
   che l'accesso non funzionasse.

   Ed era invisibile a ogni verifica automatica, perche' l'attributo c'era: a
   mentire era il `display`, non l'attributo. Si controlla lo stile calcolato,
   non `elemento.hidden`. */
[hidden] { display: none !important; }

html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--ff-text);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* `clip` e non `hidden`, per lo stesso motivo spiegato sopra su <html>:
     `hidden` trasforma il corpo in un contenitore di scorrimento, e da quel
     momento l'intestazione appiccicata in alto si aggancia a quello invece
     che alla finestra — cioè scorre via insieme al resto.

     Il commento su <html> lo diceva già; qui era rimasto `hidden`, e la barra
     spariva appena si scorreva. Le due righe vanno tenute uguali. */
  overflow-x: clip;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; border-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

a { color: var(--c-blue); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--c-blue-hover); }

hr { border: 0; border-top: 1px solid var(--c-line); margin: var(--sp-6) 0; }

::selection { background: var(--c-brass-a22); color: var(--c-ink); }

/* --------------------------------------------------------------- 2. focus */
/* Visibile su tutto ciò che si può raggiungere da tastiera. Non rimuoverlo. */

:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

/* Dentro le sezioni scure il blu non si vede: serve l'ottone schiarito. */
.sec--navy :focus-visible,
.is-dark :focus-visible { outline-color: var(--c-brass-light); }

.skip {
  position: absolute;
  left: var(--sp-4);
  top: calc(var(--sp-4) * -6);
  z-index: var(--z-skip);
  background: var(--c-navy);
  color: var(--c-on-dark);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-sm);
  font-weight: var(--fw-semi);
  text-decoration: none;
  transition: top var(--d-fast) var(--e-out);
}
.skip:focus { top: var(--sp-4); color: var(--c-on-dark); }

/* --------------------------------------------------------- 3. tipografia */

.display, h1, h2, h3 {
  font-family: var(--ff-display);
  font-variation-settings: var(--fv-display);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  color: var(--c-ink);
  text-wrap: balance;
}

h1, .t-h1 { font-size: var(--fs-3xl); }
h2, .t-h2 { font-size: var(--fs-2xl); line-height: var(--lh-snug); }
h3, .t-h3 { font-size: var(--fs-lg);  line-height: var(--lh-snug); letter-spacing: var(--ls-snug); }

.t-hero  { font-size: var(--fs-4xl); }
.t-lead  { font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--c-ink-2); }
.t-body  { font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--c-ink-2); }
.t-small { font-size: var(--fs-2xs); line-height: var(--lh-normal); color: var(--c-ink-3); }
.t-note  { font-size: var(--fs-3xs); line-height: var(--lh-normal); color: var(--c-ink-3); }

/* Occhiello: la riga maiuscola sopra i titoli. In blu, mai in ottone. */
.eyebrow {
  font-family: var(--ff-text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-blue);
  margin-bottom: var(--sp-3);
}
.sec--navy .eyebrow, .is-dark .eyebrow { color: var(--c-brass-light); }

/* Numeri: cifre di larghezza fissa, così i contatori non fanno saltare il layout */
.num {
  font-family: var(--ff-display);
  font-variation-settings: var(--fv-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-num);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--c-brass);
  font-variant-numeric: tabular-nums lining-nums;
}
.sec--navy .num, .is-dark .num { color: var(--c-brass-light); }

.measure       { max-width: var(--measure); }
.measure-tight { max-width: var(--measure-tight); }

/* Sottolineatura ottone: l'accento più piccolo che abbiamo */
.mark {
  background-image: var(--g-brass-rule);
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% .18em;
  padding-inline: .04em;
}

/* --------------------------------------------------------------- 4. layout */

.container { width: 100%; max-width: var(--w-page);   margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--w-narrow); }
.container--wide   { max-width: var(--w-wide); }

.sec { padding-block: var(--sp-section); position: relative; }
.sec--tight { padding-block: var(--sp-section-s); }

.sec--sand { background: var(--c-sand); }
.sec--navy {
  background: var(--g-navy);
  color: var(--c-on-dark);
}
.sec--navy h1, .sec--navy h2, .sec--navy h3 { color: var(--c-on-dark); }
.sec--navy .t-lead, .sec--navy .t-body { color: var(--c-on-dark-a88); }
.sec--navy .t-small, .sec--navy .t-note { color: var(--c-on-dark-a70); }
/* `:not(.btn)` non è un dettaglio: senza, questa regola vince per specificità
   su `.btn--primary` e colora di ottone chiaro il testo dei pulsanti ottone —
   contrasto 1,4:1, cioè illeggibile. Vale per ogni pulsante in sezione scura. */
.sec--navy a:not(.btn) { color: var(--c-brass-light); }

.sec__head { margin-bottom: var(--sp-7); }
.sec__head .t-lead { margin-top: var(--sp-4); }

.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }

.grid { display: grid; gap: var(--sp-5); }
@media (min-width: 640px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .grid--3 { grid-template-columns: repeat(3, 1fr); }
                             .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* -------------------------------------------------------------- 5. bottoni */
/* Gerarchia: l'azione primaria è OTTONE. Il blu non fa da pulsante, mai.
   Se in una schermata compaiono un pulsante blu e uno ottone, la gerarchia
   è sbagliata prima ancora del colore. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--touch);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-sm);
  font-family: var(--ff-text);
  font-size: var(--fs-base);
  font-weight: var(--fw-semi);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--d-fast) var(--e-out),
              box-shadow var(--d-fast) var(--e-out),
              background-color var(--d-fast) var(--e-out),
              color var(--d-fast) var(--e-out),
              border-color var(--d-fast) var(--e-out);
  -webkit-tap-highlight-color: transparent;
  /* Le etichette dei pulsanti sono corte per scelta: se una va a capo è il
     segno che qualcos'altro sta stringendo il pulsante, non che serve il wrap. */
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }

/* primaria — ottone su chiaro. Contrasto verificato 5,8:1 */
.btn--primary {
  background: var(--c-brass);
  color: var(--c-on-brass);
  box-shadow: var(--sh-sm);
}
.btn--primary:hover { background: var(--c-brass-hover); color: var(--c-on-brass); box-shadow: var(--sh-brass); transform: translateY(-1px); }

/* secondaria — contorno, testo blu */
.btn--ghost {
  background: transparent;
  color: var(--c-blue);
  border: 1.5px solid var(--c-blue-a35);
}
.btn--ghost:hover { background: var(--c-blue-a10); border-color: var(--c-blue); color: var(--c-blue-hover); }

/* su navy: l'ottone pieno regge, il contorno diventa chiaro */
.sec--navy .btn--ghost, .is-dark .btn--ghost {
  color: var(--c-on-dark);
  border-color: var(--c-on-dark-a24);
}
.sec--navy .btn--ghost:hover, .is-dark .btn--ghost:hover {
  background: var(--c-on-dark-a12);
  border-color: var(--c-on-dark-a70);
  color: var(--c-on-dark);
}

/* WhatsApp: azione di appoggio, mai in concorrenza con la primaria */
.btn--wa {
  background: var(--c-surface);
  color: var(--c-ink);
  border: 1.5px solid var(--c-line);
  box-shadow: var(--sh-xs);
}
.btn--wa:hover { border-color: var(--c-ink-a20); color: var(--c-ink); transform: translateY(-1px); }
.btn--wa svg { width: 1.15em; height: 1.15em; flex: none; }

/* Ogni icona dentro un pulsante è dimensionata qui. Senza, la regola globale
   `svg { display: block; max-width: 100% }` la fa crescere fino a riempire il
   pulsante: un'icona da 24px diventava 87px e spingeva il testo su tre righe. */
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

.btn--lg    { padding: var(--sp-4) var(--sp-7); font-size: var(--fs-md); min-height: 52px; }
.btn--block { display: flex; width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
@media (max-width: 479px) { .btn-row .btn { width: 100%; } }

/* Link con freccia: usato al posto dei pulsanti secondari nelle sezioni dense */
.link-arrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-weight: var(--fw-semi); text-decoration: none;
  min-height: var(--touch);
}
.link-arrow::after {
  content: "→";
  transition: transform var(--d-fast) var(--e-out);
}
.link-arrow:hover::after { transform: translateX(3px); }

/* ---------------------------------------------------------------- 6. card */

.card {
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  box-shadow: var(--sh-xs);
  transition: transform var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.card--hover:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.card__title { margin-bottom: var(--sp-2); }
.sec--navy .card {
  background: var(--c-on-dark-a12);
  border-color: var(--c-on-dark-a24);
  box-shadow: none;
}

/* Segnaposto dichiarato: si vede che manca un dato, e si vede che è voluto.
   Usato ovunque il cliente non abbia ancora consegnato il materiale. */
.placeholder {
  border: 1.5px dashed var(--c-line);
  background: var(--c-sand);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  color: var(--c-ink-3);
  font-size: var(--fs-2xs);
  line-height: var(--lh-normal);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: flex-start;
}
.placeholder__tag {
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-warning);
}
.placeholder__box {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-sm);
  background: var(--c-navy-a06);
  display: grid;
  place-items: center;
  color: var(--c-ink-3);
}

/* --------------------------------------------------- 6-bis. moduli
   Primitive condivise da tutti i moduli del sito: il questionario di
   valutazione, il modulo della guida in home, la dashboard. Stavano dentro
   valutazione.css finché il questionario era l'unico modulo; ora che anche la
   home ne ha uno, tenerle lì avrebbe significato o duplicarle o caricare in
   home un foglio di stile scritto per un'altra pagina. */

/* La distanza fra un campo e quello dopo. 24 px e non 16: fra l'etichetta e
   il suo campo ce ne sono 8, e con 16 di stacco il rapporto era 2:1, troppo
   poco perche' l'occhio capisse dove finisce una domanda e comincia l'altra.
   A 24 il rapporto e' 3:1 e i campi si leggono come blocchi separati invece
   che come una colonna continua di caselle.
   Vale per tutti i moduli del sito: la guida in home, il questionario della
   valutazione, la landing acquirenti, l'accesso alla dashboard. */
.campo { margin-bottom: var(--sp-5); }
.campo__label {
  display: block; font-size: var(--fs-xs); font-weight: var(--fw-semi);
  margin-bottom: var(--sp-2); color: var(--c-ink);
}
.campo__errore {
  font-size: var(--fs-2xs); color: var(--c-error); line-height: var(--lh-normal);
  margin-top: var(--sp-3); display: none;
}
.campo__errore.is-visibile { display: block; }

.input {
  width: 100%; min-height: var(--touch);
  padding: var(--sp-3) var(--sp-4);
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  /* 1rem fisso, non `--fs-md`. Quel token e' un clamp che su desktop arriva a
     18 px, cioe' PIU' GRANDE del testo della pagina: un campo da compilare
     scritto piu' in grande di quello che c'e' scritto intorno sembra un
     titolo, e il modulo diventa enorme senza guadagnarci niente.
     16 px e non meno: sotto quella soglia Safari su iPhone ingrandisce la
     pagina appena si tocca un campo, e chi compila si ritrova la schermata
     spostata. E' il motivo per cui qui non c'e' un clamp che possa scendere. */
  font-size: 1rem;
  transition: border-color var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out);
}
/* Il focus da mouse si rifinisce con bordo e alone; quello da tastiera tiene
   ANCHE l'anello di sistema. Affidarsi al solo box-shadow è fragile: in
   modalità contrasto forzato di Windows le ombre spariscono e il campo attivo
   diventerebbe indistinguibile dagli altri. */
.input:focus { border-color: var(--c-blue); box-shadow: 0 0 0 3px var(--c-blue-a18); }
.input:focus:not(:focus-visible) { outline: none; }
.input:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.input[aria-invalid="true"] { border-color: var(--c-error); }

/* I 16 px qui sopra sono una regola di Safari su iPhone, non una scelta di
   grafica: sotto quella soglia la pagina si ingrandisce da sola appena si
   tocca un campo. Su un dispositivo con puntatore preciso quel rischio non
   esiste, e li' un campo puo' tornare alla misura del testo che gli sta
   intorno invece di sporgere di un punto su tutto il resto.
   `pointer: fine` guarda il dispositivo di puntamento PRINCIPALE: un iPhone e
   un iPad restano `coarse` e tengono i 16 px, un portatile con schermo
   tattile ma con trackpad e' `fine` e scende a 15. */
@media (pointer: fine) {
  .input { font-size: var(--fs-sm); }
}

.consenso { margin-top: var(--sp-4); }
.consenso__riga { display: flex; gap: var(--sp-3); align-items: flex-start; cursor: pointer; }
.consenso__check {
  width: 22px; height: 22px; flex: none; margin-top: 1px;
  accent-color: var(--c-blue); cursor: pointer;
}
.consenso__testo { font-size: var(--fs-2xs); line-height: var(--lh-relaxed); color: var(--c-ink-2); }
.consenso__obbligo { color: var(--c-ink-3); }

/* Honeypot: fuori dallo schermo, non display:none — alcuni bot ignorano
   i campi nascosti, ma compilano quelli che il DOM dichiara visibili. */
.trappola {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* --------------------------------------------------------------- 7. media */

.media { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--c-sand); }
.media img { width: 100%; height: 100%; object-fit: cover; }
/* 4:5, la proporzione nativa del ritratto di Paolo. Forzarne un'altra
   taglierebbe la foto senza guadagnarci niente. */
.media--portrait { aspect-ratio: 4 / 5; }
.media--wide     { aspect-ratio: 3 / 2; }
.media--square   { aspect-ratio: 1 / 1; }

/* Velo scuro sulle foto su cui appoggia del testo */
.media--veiled::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--c-surface-a00) 40%, var(--c-navy-a85) 100%);
}

figcaption { font-size: var(--fs-3xs); color: var(--c-ink-3); margin-top: var(--sp-2); }

/* -------------------------------------------------------------- 8. badge */

.badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  line-height: 1.2;
}
.badge--brass { background: var(--c-brass-a12); color: var(--c-ink); border: 1px solid var(--c-brass-a40); }
.badge--blue  { background: var(--c-blue-a10);  color: var(--c-blue); }
.sec--navy .badge--brass { background: var(--c-on-dark-a12); color: var(--c-brass-light); border-color: var(--c-brass-a40); }

/* Stelle del rating: il rating è dell'AGENZIA, mai della persona. */
.rating { display: inline-flex; align-items: center; gap: var(--sp-2); }
.rating__stars { color: var(--c-brass); letter-spacing: .08em; font-size: var(--fs-sm); }
.sec--navy .rating__stars { color: var(--c-brass-light); }

/* ------------------------------------------------------------- 9. utility */

.u-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.u-center     { text-align: center; }
.u-center-x   { margin-inline: auto; }
.u-hide       { display: none !important; }
.u-mt-0 { margin-top: 0; }
.u-mt-4 { margin-top: var(--sp-4); }
.u-mt-6 { margin-top: var(--sp-6); }
@media (max-width: 639px) { .u-hide\@sm { display: none !important; } }

/* --------------------------------------------------------- 10. rivelazioni */
/* Stato iniziale applicato SOLO se il JS è vivo: senza JS il contenuto è
   già al suo posto, non invisibile per sempre. */

html.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  will-change: opacity, transform;
}
html.js [data-reveal="left"]  { transform: translateX(-24px); }
html.js [data-reveal="right"] { transform: translateX(24px); }
html.js [data-reveal="scale"] { transform: scale(.97); }
html.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out);
}
[data-reveal].is-in { will-change: auto; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js [data-reveal] { opacity: 1; transform: none; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------- 11. header */

/* La barra non si ritrae più scorrendo. Si ritraeva per restituire qualche
   pixel di lettura, ma su una pagina lunga come questa il costo era più alto
   del guadagno: per tornare a un'altra sezione bisognava prima risalire di
   qualche riga per farla riapparire. Ora è sempre lì, e in cambio si è
   guadagnato il posto mostrando in che sezione ci si trova. */
.hdr {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--c-surface-a92);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  box-shadow: var(--sh-inset-line);
  transition: box-shadow var(--d-base) var(--e-out);
}
.hdr--raised { box-shadow: var(--sh-sm); }
.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 64px; }

.logo {
  display: inline-flex; flex-direction: column; justify-content: center;
  text-decoration: none; color: var(--c-ink); line-height: 1.1;
  min-height: var(--touch);   /* target touch, non decorazione */
}
.logo__name {
  font-family: var(--ff-display);
  font-variation-settings: var(--fv-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-md);
  letter-spacing: var(--ls-snug);
}
.logo__role { font-size: var(--fs-3xs); color: var(--c-ink-3); letter-spacing: var(--ls-wide); text-transform: uppercase; margin-top: 2px; }

/* La testa delle landing: solo nome e ruolo, senza navigazione.
   Stava scritta in linea nell'HTML come `padding-block: var(--sp-5) 0`, cioe'
   spazio sopra e niente sotto: il nome finiva appoggiato al bordo della
   sezione successiva e si leggeva storto. Qui l'imbottitura e' simmetrica e la
   regola vive in un posto solo invece che copiata in due pagine. */
.landing__testa {
  padding-block: var(--sp-5);
  text-align: center;
}
.landing__testa .logo__name { display: block; }
.landing__testa .logo__role { display: block; }
/* Nome e ruolo arrivano da config.js dopo gli script, e fino ad allora i due
   span sono vuoti e alti zero. Quando il testo arriva la testata cresce di due
   righe e spinge giu' la pagina intera: misurato il 10/09/2026 su /valutazione
   da telefono, CLS 0,115, oltre la soglia buona di Google, proprio sulla pagina
   che riceve le campagne, e nel momento in cui chi arriva sta per toccare
   «Inizia la valutazione». Si tiene il posto di una riga ciascuno.
   `1lh` e' l'altezza esatta di una riga; chi non lo conosce usa la prima. */
.landing__testa .logo__name,
.landing__testa .logo__role { min-height: 1.4em; min-height: 1lh; }

.nav { display: none; }
@media (min-width: 900px) {
  .nav { display: flex; align-items: center; gap: var(--sp-2); }

  /* Testa di gruppo e link semplice devono essere indistinguibili finché non
     si interagisce: la differenza la fa la freccia, non la forma. */
  .nav__testa,
  .nav__link {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    min-height: var(--touch);
    padding: 0 var(--sp-3);
    border-radius: var(--r-sm);
    color: var(--c-ink-2); text-decoration: none;
    font-size: var(--fs-sm); font-weight: var(--fw-medium);
    font-family: inherit; background: none; border: 0; cursor: pointer;
    white-space: nowrap;
    transition: color var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out);
  }
  .nav__testa:hover,
  .nav__link:hover { color: var(--c-ink); background: var(--c-navy-a06); }

  /* La sezione in cui ci si trova adesso. Sostituisce quello che prima faceva
     la barra ritraendosi: dice dove sei senza chiedere di scorrere. */
  .nav__testa[data-attivo],
  .nav__link[data-attivo] { color: var(--c-navy); background: var(--c-navy-a06); }

  /* La voce della guida deve staccarsi dalle altre, ma l'ottone come colore
     del testo su fondo bianco si ferma a 3.67:1 — sotto la soglia. Quindi
     l'ottone diventa lo sfondo e il testo resta navy: stesso stacco visivo,
     contrasto oltre 7:1. È la stessa ragione per cui i pulsanti in ottone
     hanno il testo scuro e non il contrario. */
  .nav__link--evidenza {
    color: var(--c-navy);
    background: var(--c-brass-a12);
    box-shadow: inset 0 0 0 1px var(--c-brass-a22);
  }
  .nav__link--evidenza:hover,
  .nav__link--evidenza[data-attivo] {
    color: var(--c-navy);
    background: var(--c-brass-a22);
  }

  .nav__gruppo { position: relative; }
  .nav__freccia {
    width: 12px; height: 12px; flex: none;
    transition: transform var(--d-fast) var(--e-out);
  }
  .nav__testa[aria-expanded="true"] .nav__freccia { transform: rotate(180deg); }

  /* La tendina. Non usa [hidden] perché deve poter sfumare: si toglie dal
     flusso con visibility, che a differenza di opacity da sola impedisce
     anche di finirci dentro con il tabulatore mentre è chiusa. */
  .nav__sub {
    position: absolute; top: calc(100% + var(--sp-2)); left: 0;
    min-width: 190px;
    padding: var(--sp-2);
    background: var(--c-surface);
    border: 1px solid var(--c-line-soft);
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
    display: grid; gap: 2px;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity var(--d-fast) var(--e-out),
                transform var(--d-fast) var(--e-out),
                visibility var(--d-fast);
  }
  .nav__testa[aria-expanded="true"] + .nav__sub {
    opacity: 1; visibility: visible; transform: none;
  }
  .nav__sub a {
    display: flex; align-items: center;
    min-height: 38px; padding: 0 var(--sp-3);
    border-radius: var(--r-sm);
    color: var(--c-ink-2); text-decoration: none;
    font-size: var(--fs-sm); font-weight: var(--fw-medium);
    transition: color var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out);
  }
  .nav__sub a:hover { color: var(--c-ink); background: var(--c-navy-a06); }
  .nav__sub a[data-attivo] { color: var(--c-navy); background: var(--c-navy-a06); }
}

.hdr__cta { display: none; }
@media (min-width: 640px) { .hdr__cta { display: inline-flex; } }

/* menu mobile a scomparsa
   ------------------------------------------------------------------------
   Il pulsante erano tre righe nere nel vuoto. Senza un contorno non si legge
   come un comando: si legge come tre righe. */

/* Due tentativi sbagliati prima di questo, e vale la pena scriverli perche'
   la lezione e' la stessa: conta la proporzione fra il segno e lo spazio che
   gli sta intorno, non il segno da solo.

   Il primo era tre righe nere nel vuoto, senza contorno: non si leggevano
   come un comando, si leggevano come tre righe.

   Il secondo aveva il contorno ma sbagliava le misure: righe da 17 px dentro
   un riquadro da 44 con il bordo scuro. Il segno occupava il 39% della sua
   scatola e il bordo gridava piu' dell'icona: sembrava un box con dentro un
   uguale.

   Qui il riquadro e' piu' piccolo (40), il bordo e' quello leggero, e le
   righe arrivano a 20: meta' esatta della scatola, che e' la proporzione a
   cui un'icona smette di sembrarci persa dentro. */
/* Il pulsante e' largo 44, il riquadro che si vede e' largo 40.
   Sono due cose diverse: il bordo e' quello che si guarda, il bersaglio e'
   quello che si colpisce, e su un telefono il secondo deve essere 44 anche
   quando il primo starebbe meglio piu' piccolo. Il riquadro lo disegna lo
   pseudo-elemento a 2px dal bordo; provare ad allargare il bersaglio con lo
   pseudo-elemento, invece, non funziona: a destra e sotto ci finisce sopra
   un altro elemento della barra e i clic non arrivano al pulsante. */
.burger {
  /* Colonna con un intervallo dichiarato, non una griglia. Con `inline-grid`
     le tre righe finivano in tre righe alte quanto capita e la distanza fra
     loro non era quella scritta nel margine: 14,3 px invece di 7. Era cosi'
     da sempre, e nessuno aveva mai guardato il numero: e' il motivo per cui
     le righe sembravano sparse dentro il riquadro. */
  display: inline-flex;
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 5px;
  width: var(--touch); height: var(--touch);
  position: relative;
  border: 0; background: none; padding: 0;
}
.burger::before {
  content: ""; position: absolute; inset: 2px;   /* 44 - 2 - 2 = 40 */
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-surface-a92);
  transition: border-color var(--d-fast) var(--e-out),
              background-color var(--d-fast) var(--e-out);
}
@media (min-width: 900px) { .burger { display: none; } }
@media (hover: hover) {
  .burger:hover::before { border-color: var(--c-ink-3); background: var(--c-surface); }
}
.burger:active::before { background: var(--c-navy-a06); }
/* Aperto, il pulsante diventa scuro: la croce da sola non basta a dire che
   adesso quel tasto chiude invece di aprire. */
.burger[aria-expanded="true"]::before {
  background: var(--c-navy);
  border-color: var(--c-navy);
}
.burger[aria-expanded="true"] span { background: var(--c-on-dark); }

/* `position: relative` non e' un vezzo: lo pseudo-elemento e' posizionato e
   senza questo si dipingerebbe sopra le tre righe, che sparirebbero. */
.burger span {
  position: relative;
  display: block; width: 20px; height: 2px;
  background: var(--c-ink); border-radius: 2px;
  transition: transform var(--d-fast) var(--e-out),
              opacity var(--d-fast) var(--e-out),
              background-color var(--d-fast) var(--e-out);
}
/* 7px: due di riga piu' cinque di spazio. E' la distanza vera fra i centri, e
   sbagliarla di mezzo pixel si vede, perche' le due righe non si incontrano. */
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Il velo.
   Prima il pannello scendeva e la pagina restava visibile e sveglia sotto:
   il menu sembrava una striscia appoggiata, non uno strato. */
.velo {
  position: fixed; inset: 0;
  z-index: calc(var(--z-overlay) - 1);
  background: var(--c-ink-a55);
  opacity: 0; visibility: hidden;
  transition: opacity var(--d-base) var(--e-out), visibility var(--d-base);
}
.velo.is-open { opacity: 1; visibility: visible; }
@media (min-width: 900px) { .velo { display: none; } }

.menu {
  position: fixed; inset: 64px 0 auto 0; z-index: var(--z-overlay);
  background: var(--c-surface);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  padding: var(--sp-5) var(--gutter) var(--sp-6);
  display: grid; gap: 0;
  /* Su schermi bassi il menu puo' superare l'altezza della finestra: senza
     questo, le ultime voci diventano irraggiungibili. */
  max-height: calc(100dvh - 76px); overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(-12px); opacity: 0; visibility: hidden;
  transition: opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-out), visibility var(--d-base);
  box-shadow: var(--sh-lg);
}
.menu.is-open { transform: none; opacity: 1; visibility: visible; }
@media (min-width: 900px) { .menu { display: none; } }

/* Le voci entrano sfalsate. Il ritardo sta nel CSS e non nel JavaScript
   perche' e' una questione di presentazione: se un domani le voci cambiano
   numero, non c'e' niente da aggiornare da nessuna parte. */
.menu > * { transition: opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-out); }
.menu:not(.is-open) > * { opacity: 0; transform: translateY(-6px); }
.menu.is-open > *              { transition-delay: .05s; }
.menu.is-open > *:nth-child(2) { transition-delay: .09s; }
.menu.is-open > *:nth-child(3) { transition-delay: .12s; }
.menu.is-open > *:nth-child(4) { transition-delay: .15s; }
.menu.is-open > *:nth-child(5) { transition-delay: .18s; }
.menu.is-open > *:nth-child(6) { transition-delay: .21s; }
.menu.is-open > *:nth-child(7) { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .menu > *, .menu.is-open > * { transition: none; transition-delay: 0s; opacity: 1; transform: none; }
}

/* Le intestazioni non sono cliccabili: separano, non aprono. */
.menu__eti {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-3xs); font-weight: var(--fw-semi);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--c-ink-3);
  margin: var(--sp-5) 0 var(--sp-2);
}
/* Il filo d'ottone dopo l'etichetta: separa senza dover disegnare una riga
   che attraversa tutto e taglia il pannello in fette. */
.menu__eti::after {
  content: ""; flex: 1; height: 1px; background: var(--c-line);
}

.menu a {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 52px;
  color: var(--c-ink); text-decoration: none;
  font-size: var(--fs-lg); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-snug);
  border-radius: var(--r-sm);
  padding-inline: var(--sp-3);
  margin-inline: calc(var(--sp-3) * -1);
  transition: background-color var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
}
/* La freccia a destra: dice che si va da qualche parte. Disegnata con due
   bordi, cosi' non c'e' nessuna icona da caricare per otto voci. */
.menu [role="group"] a::after {
  content: ""; margin-left: auto;
  width: 7px; height: 7px;
  border-top: 1.6px solid var(--c-ink-3);
  border-right: 1.6px solid var(--c-ink-3);
  transform: rotate(45deg);
  transition: transform var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
}
.menu [role="group"] a:active { background: var(--c-navy-a06); }
.menu [role="group"] a:active::after {
  transform: rotate(45deg) translate(2px, -2px); border-color: var(--c-navy);
}
.menu a[data-attivo] { color: var(--c-navy); background: var(--c-navy-a06); }

/* La guida sta in cima e fuori dai gruppi: e' l'unica voce che offre qualcosa
   invece di portare da qualche parte. */
.menu__primo {
  justify-content: space-between;
  font-weight: var(--fw-semi) !important;
  /* Stessa scelta della voce desktop: l'ottone sta nello sfondo, non nel
     testo, altrimenti il contrasto non regge. */
  color: var(--c-navy) !important;
  background: var(--c-brass-a12);
  box-shadow: inset 0 0 0 1px var(--c-brass-a22);
  margin-inline: 0 !important;
}
.menu__nota {
  font-size: var(--fs-3xs); font-weight: var(--fw-regular);
  color: var(--c-ink-2); letter-spacing: 0; text-transform: none;
}

.menu .btn { margin-top: var(--sp-5); }

/* Il piede: come scrivere, e a che ora risponde qualcuno. */
.menu__piede {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-line-soft);
}
.menu__wa {
  min-height: var(--touch);
  font-size: var(--fs-base) !important;
  font-weight: var(--fw-regular) !important;
  margin-inline: calc(var(--sp-3) * -1) !important;
}
.menu__wa svg {
  width: 22px; height: 22px; flex: none;
  color: var(--c-whatsapp-hover);
}
.menu__wa span { display: grid; }
.menu__wa strong { font-size: var(--fs-base); font-weight: var(--fw-semi); }
.menu__wa em {
  font-style: normal; font-size: var(--fs-3xs); color: var(--c-ink-2);
}
.menu__wa::after { content: none !important; }

/* Con la barra sempre presente, una sezione raggiunta per URL diretto
   (/index.html#guida) finirebbe sotto di essa: lo scroll nativo non sa che
   l'header occupa i primi 64 px. Le ancore cliccate in pagina hanno già il
   loro scostamento in motion.js; questo copre gli arrivi da fuori. */
[id] { scroll-margin-top: 80px; }

/* --------------------------------------------------------------- 12. footer */

.ftr { background: var(--c-navy-deep); color: var(--c-on-dark); padding-block: var(--sp-8) var(--sp-6); }
.ftr a { color: var(--c-on-dark-a88); text-decoration: none; }
.ftr a:hover { color: var(--c-brass-light); text-decoration: underline; }
/* Quattro colonne da 960 px in su: ai dati societari, agli orari e ai link si
   e' aggiunta quella dei contatti (30/08/2026). In mezzo, fra 560 e 960, due
   colonne: quattro strette su un tablet spezzerebbero l'email a meta'. */
.ftr__grid { display: grid; gap: var(--sp-7); }
@media (min-width: 560px) { .ftr__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-7); } }
/* Le proporzioni non sono a occhio: la colonna degli orari tiene la riga
   piu' lunga di tutto il piede («9:00-13:00 · 15:30-20:00») e a 1fr la
   spezzava a meta'; quella dei link ha come voce piu' lunga «Valuta il tuo
   immobile» e di spazio ne chiede meno. */
@media (min-width: 960px) { .ftr__grid { grid-template-columns: 1.5fr 1.05fr 1.2fr .85fr; gap: var(--sp-7); } }

.ftr__t {
  font-size: var(--fs-3xs); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--c-brass-light); margin-bottom: var(--sp-4);
}
.ftr__li { font-size: var(--fs-2xs); line-height: 1.9; color: var(--c-on-dark-a88); }

/* ---- la colonna del marchio ----
   Prima era un blocco unico: nome, ragione sociale, indirizzo, P.IVA e REA
   tutti alla stessa misura e nello stesso colore, cioe' cinque fatti diversi
   che si leggevano come un paragrafo solo. Adesso hanno tre livelli: il nome,
   quello che serve per trovarlo, e i dati che servono a un commercialista. */
.ftr__nome { color: var(--c-on-dark); margin-bottom: var(--sp-4); }
.ftr__ragione {
  font-size: var(--fs-2xs); font-weight: var(--fw-semi);
  color: var(--c-on-dark); line-height: var(--lh-normal);
}
.ftr__indirizzo {
  font-style: normal;                     /* <address> lo mette in corsivo */
  font-size: var(--fs-2xs); line-height: var(--lh-relaxed);
  color: var(--c-on-dark-a88); margin-top: var(--sp-1);
  /* Senza, la riga si spezzava lasciando «(NA)» da solo in fondo. `balance`
     distribuisce le parole fra le righe invece di riempire la prima fino
     all'orlo; dove non e' supportato non succede niente di male, torna
     semplicemente l'a capo di prima. */
  text-wrap: balance;
}
/* Il collegamento alle indicazioni stradali: l'indirizzo dice dov'e', questo
   ci porta. Chi guarda il piede di pagina da un telefono e' spesso gia' in
   strada. */
.ftr__strada {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: var(--touch); margin-top: var(--sp-1);
  font-size: var(--fs-2xs); font-weight: var(--fw-semi);
  color: var(--c-brass-light);
}
.ftr__strada svg { width: 15px; height: 15px; flex: none; }
/* I dati fiscali sono un obbligo di legge, non un'informazione che qualcuno
   sta cercando: restano leggibili ma non competono con il resto. */
.ftr__fiscali {
  display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4);
  margin-top: var(--sp-3);
  font-size: var(--fs-3xs); line-height: var(--lh-relaxed);
  color: var(--c-on-dark-a70);
}

/* ---- elenchi di voci ----
   Prima erano righe dentro un <p> separate da <br>, con `line-height: 1.9` e
   un `min-height` di 44 px su ogni collegamento: le due misure si sommavano e
   fra un recapito e l'altro restava un vuoto che non voleva dire niente.
   Adesso la distanza la decide l'elenco, e l'altezza tattile la riempie il
   collegamento invece di aggiungersi. */
.ftr__voci { list-style: none; margin: 0; padding: 0; }
.ftr__voci > li + li { margin-top: var(--sp-3); }
.ftr__eti {
  display: block;
  font-size: var(--fs-3xs); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--c-on-dark-a70);
  margin-bottom: 2px;
}
.ftr__voci a {
  display: inline-flex; align-items: center;
  font-size: var(--fs-2xs); line-height: var(--lh-normal);
  /* Il bersaglio da toccare cresce fino ai 44 px, la riga non si muove:
     l'imbottitura la riprende un margine negativo uguale e contrario.
     Misurato il 10/09/2026 a 375 px: telefono, fisso ed email erano alti
     20 px, cioe' le tre cose che da telefono si toccano di piu' in un
     piede erano anche le piu' difficili da prendere col dito. Il commento
     qui sotto diceva che l'etichetta sopra bastava, ma l'etichetta non e'
     cliccabile: conta solo il collegamento. */
  padding-block: var(--sp-3);
  margin-block: calc(var(--sp-3) * -1);
}
/* Con l'etichetta sopra, la riga e' gia' alta abbastanza: i 44 px servono
   dove il collegamento sta da solo. */
.ftr__voci--link > li + li { margin-top: 0; }
.ftr__voci--link a { min-height: var(--touch); }

/* L'email e' una parola sola e lunga: senza questo, in colonna stretta esce
   dal riquadro invece di andare a capo. */
.ftr__mail { overflow-wrap: anywhere; }

/* ---- gli orari ----
   Due colonne allineate. Prima ogni riga era «giorno &nbsp; orario» dentro un
   paragrafo: gli orari partivano da tre punti diversi e si leggevano come tre
   frasi invece che come una tabella. */
.ftr__orari {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: auto 1fr;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-2xs); line-height: var(--lh-normal);
  color: var(--c-on-dark-a88);
}
.ftr__orari > li { display: contents; }
.ftr__giorno { color: var(--c-on-dark-a70); white-space: nowrap; }

/* Aperto o chiuso adesso. Stessa forma del riquadro nella sezione «L'ufficio»,
   perche' e' la stessa informazione: cambiarle aspetto in due punti della
   stessa pagina la farebbe sembrare due cose diverse. */
.ftr__stato {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
  font-size: var(--fs-3xs); font-weight: var(--fw-semi);
  line-height: var(--lh-normal);
  margin-bottom: var(--sp-3);
}
.ftr__stato::before {
  content: ""; width: 7px; height: 7px; border-radius: var(--r-full);
  background: currentColor; flex: none;
}
.ftr__stato.is-aperto { background: var(--c-success-a10); color: var(--c-on-dark); }
.ftr__stato.is-chiuso { background: var(--c-on-dark-a12); color: var(--c-on-dark-a70); }
.ftr__stato[hidden] { display: none; }

/* Le pagine legali hanno un piede piu' corto, che usa ancora `.ftr__li` con i
   <br>: li' i collegamenti stanno da soli e il bersaglio tattile serve. */
.ftr__li a, .ftr__legal nav a {
  display: inline-flex; align-items: center;
  min-height: var(--touch);
}
.ftr__legal {
  margin-top: var(--sp-7); padding-top: var(--sp-5);
  border-top: 1px solid var(--c-on-dark-a12);
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5);
  align-items: center; justify-content: space-between;
  font-size: var(--fs-3xs); color: var(--c-on-dark-a70);
}
.ftr__legal nav { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* Dato societario mancante: in pagina si vede il buco, non un'invenzione. */
[data-cfg].is-missing::after {
  content: "⚠ da inserire";
  font-size: var(--fs-3xs);
  color: var(--c-warning);
  font-weight: var(--fw-semi);
  letter-spacing: 0;
}

/* -------------------------------------------------- 13. banner di consenso */
/* Le tre azioni hanno lo stesso peso visivo. "Rifiuta tutto" non è un link
   grigio in fondo: è un pulsante identico ad "Accetta tutto", perché un
   rifiuto reso più difficile dell'assenso non è un consenso libero. */

.cc {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-consent);
  padding: var(--sp-4);
  display: flex; justify-content: center;
  transform: translateY(110%);
  transition: transform var(--d-base) var(--e-out);
  pointer-events: none;
}
.cc.is-aperto { transform: none; }
.cc__box {
  pointer-events: auto;
  width: 100%; max-width: 640px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  padding: var(--sp-5);
}
.cc__titolo { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.cc__testo {
  font-size: var(--fs-2xs);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-2);
  margin-bottom: var(--sp-4);
}
.cc__testo a { font-weight: var(--fw-medium); }
/* Il testo del banner e' in tre paragrafi (vedi consent.js): lo spazio fra
   l'uno e l'altro e' piccolo, perche' da leggere resta un discorso solo. */
.cc__testo p + p { margin-top: var(--sp-2); }

.cc__scelte { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.cc__voce {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-sm);
  background: var(--c-bg);
  min-height: var(--touch);
  cursor: pointer;
}
.cc__voce strong { display: block; font-size: var(--fs-xs); font-weight: var(--fw-semi); }
.cc__voce span   { display: block; font-size: var(--fs-3xs); color: var(--c-ink-3); line-height: 1.45; margin-top: 2px; }
.cc__sempre      { font-size: var(--fs-3xs); color: var(--c-success); font-weight: var(--fw-semi); white-space: nowrap; }
.cc__voce input[type="checkbox"] { width: 22px; height: 22px; flex: none; accent-color: var(--c-blue); cursor: pointer; }

.cc__azioni { display: grid; gap: var(--sp-2); }
@media (min-width: 560px) {
  .cc__azioni { grid-template-columns: 1fr 1fr; }
  .cc__azioni .btn:nth-child(3),
  .cc__azioni .btn:nth-child(4) { grid-column: 1 / -1; }
}

/* "Rifiuta tutto" ha lo stesso peso di "Accetta tutto" ma non lo stesso colore:
   due pulsanti ottone affiancati farebbero salire l'accento sopra la soglia e
   toglierebbero gerarchia alla pagina. Stessa dimensione, stesso rilievo. */
.cc__azioni [data-cc-rifiuta] {
  background: var(--c-surface);
  color: var(--c-ink);
  border: 1.5px solid var(--c-ink-a20);
  box-shadow: var(--sh-xs);
}
.cc__azioni [data-cc-rifiuta]:hover { background: var(--c-bg); border-color: var(--c-ink); color: var(--c-ink); }

/* -------------------------------------------- 14. WhatsApp flottante
   Pulsante tondo, sempre a portata di pollice. Verde WhatsApp: è l'unico
   punto del sito dove entra un colore fuori palette, ed è voluto — quel
   verde è riconosciuto prima di essere letto, e cambiarlo lo renderebbe
   solo un cerchio qualsiasi. Il token vive comunque in tokens.css. */

.wa-flot {
  position: fixed;
  right: var(--sp-4);
  bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-sticky);

  display: inline-flex; align-items: center; gap: var(--sp-3);
  height: 56px; min-width: 56px;
  padding: 0 18px 0 16px;
  border-radius: var(--r-full);

  background: var(--c-whatsapp);
  color: var(--c-on-whatsapp);
  text-decoration: none;
  box-shadow: var(--sh-lg);

  opacity: 0;
  transform: translateY(14px) scale(.9);
  pointer-events: none;
  transition: opacity var(--d-base) var(--e-out),
              transform var(--d-base) var(--e-out),
              background-color var(--d-fast) var(--e-out);
}
.wa-flot.is-visibile { opacity: 1; transform: none; pointer-events: auto; }
.wa-flot:hover { background: var(--c-whatsapp-hover); color: var(--c-on-whatsapp); transform: translateY(-2px); }
.wa-flot:active { transform: translateY(0) scale(.97); }
.wa-flot svg { width: 26px; height: 26px; flex: none; }

.wa-flot__testo {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  white-space: nowrap;
  letter-spacing: -.01em;
}

/* Su schermi stretti resta il solo cerchio: la scritta ruberebbe spazio
   proprio dove ce n'è meno. */
@media (max-width: 479px) {
  .wa-flot { padding: 0; width: 56px; justify-content: center; }
  .wa-flot__testo { display: none; }
}

/* Sopra la barra fissa della landing, quando entrambe esistono */
.cta-mobile ~ .wa-flot { bottom: calc(var(--sp-4) + 72px + env(safe-area-inset-bottom, 0px)); }

@media (prefers-reduced-motion: reduce) {
  .wa-flot { transition: opacity 1ms; transform: none; }
  .wa-flot.is-visibile { transform: none; }
}


/* ========================================================= 7-bis. le FAQ

   CHE COSA C'ERA CHE NON ANDAVA. Non il meccanismo: quello funzionava. Erano
   otto righe separate da una linea sottile, sullo stesso fondo sabbia di
   tutto il resto. Niente diceva che fossero cliccabili, non c'era uno stato
   di passaggio del mouse, e la freccia stava a quattrocento pixel dalla
   domanda, in fondo a una riga vuota. E il titolo della sezione partiva dal
   bordo del contenitore mentre l'elenco stava al centro, largo in modo
   diverso: due allineamenti che si leggevano come un errore.

   ⚠️ UNA DIAGNOSI SBAGLIATA, LASCIATA SCRITTA PERCHE' NON SI RIPETA.
   Provando in anteprima sembrava che l'apertura non funzionasse affatto:
   `aria-expanded` passava a `true` e la risposta restava alta zero, anche
   dopo due secondi. La spiegazione sembrava ovvia, cioe' che Chrome non sappia
   interpolare `grid-template-rows` da 0fr a 1fr quando il contenitore non ha
   un'altezza definita. Era falsa: il pannello di anteprima NON FA AVANZARE
   l'orologio delle animazioni, quindi ogni transizione resta ferma al primo
   fotogramma. Si vede da qui: forzando `getAnimations().forEach(a => a.finish())`
   la riga arriva a 98 px, cioe' a fine corsa ci va eccome.
   Regola che ne esce: in questo pannello una transizione ferma non e' una
   transizione rotta. Per sapere come va a finire si porta l'animazione alla
   fine e si misura li'.

   Quello che resta di quella indagine e' un miglioramento vero: adesso, oltre
   all'altezza, sfuma anche il CONTENUTO. Dove `grid-template-rows` non si
   anima (Firefox, Safari meno recenti) la riga scatta ma la risposta compare
   comunque in dissolvenza, invece di apparire di colpo. */

/* Titolo ed elenco nella stessa colonna: e' quello che toglie di mezzo il
   disallineamento, e non serve altro. */
.faq__colonna { max-width: var(--w-narrow); margin-inline: auto; }
.faq__colonna .sec__head { margin-bottom: var(--sp-6); }

.faq { display: grid; gap: var(--sp-2); }

/* Ogni domanda e' una scheda con la sua superficie. Su un fondo sabbia una
   riga bianca dice «questa cosa si tocca» prima di qualunque etichetta. */
.faq__voce {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  transition: border-color var(--d-fast) var(--e-out),
              box-shadow var(--d-fast) var(--e-out);
}
.faq__voce:hover { border-color: var(--c-line-forte); box-shadow: var(--sh-xs); }
/* Aperta: il bordo passa in ottone. E' l'unico segno che serve per ritrovare
   a colpo d'occhio quale delle otto si sta leggendo. */
.faq__voce:has(.faq__d[aria-expanded="true"]) {
  border-color: var(--c-brass);
  box-shadow: var(--sh-sm);
}

.faq__d {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  width: 100%; text-align: left;
  padding: var(--sp-4) var(--sp-5);
  font-family: var(--ff-display);
  font-variation-settings: var(--fv-display);
  font-size: var(--fs-md); font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
  color: var(--c-ink); min-height: var(--touch);
  cursor: pointer;
  border-radius: var(--r-md);
}
.faq__d:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; }

/* La freccia dentro un tondo: prima era due lati di un quadrato ruotati, in
   fondo a una riga larga, e a occhio non si capiva che fosse un comando.
   `flex: none` perche' il tondo non deve stringersi quando la domanda e'
   lunga: e' un bersaglio, non un ornamento. */
.faq__d::after {
  content: "";
  flex: none;
  width: 30px; height: 30px;
  border-radius: var(--r-full);
  background: var(--c-blue-a10);
  transition: background-color var(--d-fast) var(--e-out),
              transform var(--d-base) var(--e-out);
}
/* Il tondo e la punta sono due cose sovrapposte: il tondo e' `::after`, la
   punta e' `::before` messo sopra. Cosi' il tondo puo' cambiare colore e la
   punta puo' girare, senza che l'una trascini l'altra. */
.faq__d { position: relative; }
.faq__d::before {
  content: "";
  position: absolute;
  right: calc(var(--sp-5) + 10px);
  width: 9px; height: 9px;
  border-right: 2px solid var(--c-blue);
  border-bottom: 2px solid var(--c-blue);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--d-base) var(--e-out),
              border-color var(--d-fast) var(--e-out);
  pointer-events: none;
}
.faq__d[aria-expanded="true"]::after { background: var(--c-brass-a12); }
.faq__d[aria-expanded="true"]::before {
  border-color: var(--c-brass-testo);
  transform: rotate(-135deg) translate(-3px, -3px);
}

/* L'apertura: l'altezza dove il browser sa animarla, il contenuto sempre. */
.faq__r {
  display: grid; grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows var(--d-base) var(--e-out);
}
.faq__d[aria-expanded="true"] + .faq__r { grid-template-rows: 1fr; }
.faq__r > div {
  min-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--d-base) var(--e-out),
              transform var(--d-base) var(--e-out);
}
.faq__d[aria-expanded="true"] + .faq__r > div { opacity: 1; transform: none; }

.faq__r p {
  font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--c-ink-2);
  padding: 0 var(--sp-5) var(--sp-5);
  max-width: 62ch;
}

/* Chi ha chiesto meno movimento non deve vedere niente muoversi: la risposta
   compare e basta, che e' l'unica cosa che conta. */
@media (prefers-reduced-motion: reduce) {
  .faq__r > div,
  .faq__d::before,
  .faq__d::after,
  .faq__voce { transition: none; }
  .faq__r > div { opacity: 1; transform: none; }
}


/* Il piede delle landing (valutazione, grazie, acquirenti).
   Resta povero di collegamenti per scelta: da una landing si va solo alle
   informative. Quello che e' cambiato il 04/09/2026 e' la leggibilita': prima
   ragione sociale, indirizzo, partita IVA e REA stavano tutti a 12 px nello
   stesso colore, separati da <br>, e si leggevano come un blocco unico in cui
   non si distingueva un fatto dall'altro. Adesso hanno tre livelli, come nel
   piede della home.

   ⚠️ DAL 07/09/2026 NESSUNA PAGINA USA PIU' QUESTE REGOLE. Il committente ha
   chiesto il piede uguale su tutto il sito, e le tre landing che avevano
   questo (valutazione, acquirenti, grazie) adesso portano quello della home,
   scritto da `python _lab/aggiorna-piede.py`.
   Le regole restano qui e non si cancellano perche' sono la strada del
   ritorno: se un giorno si decide di nuovo che da una landing non si esce, si
   toglie quella pagina dall'elenco PAGINE dello script e le si rimette
   `<footer class="vftr">`. Cancellarle vorrebbe dire riscriverle da capo. */
.vftr {
  background: var(--c-navy-deep); color: var(--c-on-dark-a88);
  padding-block: var(--sp-7) var(--sp-6);
  text-align: center;
}
.vftr__nome {
  font-size: var(--fs-2xs); font-weight: var(--fw-semi);
  line-height: var(--lh-normal); color: var(--c-on-dark);
}
.vftr__dove {
  font-style: normal;                     /* <address> lo mette in corsivo */
  font-size: var(--fs-2xs); line-height: var(--lh-relaxed);
  color: var(--c-on-dark-a88); margin-top: var(--sp-1);
  /* Senza, la riga si spezza lasciando «(NA)» da solo in fondo. */
  text-wrap: balance;
}
/* Partita IVA e REA sono un obbligo di legge, non un'informazione che qualcuno
   sta cercando: restano leggibili ma non competono con il resto. Il punto
   mediano fra i due lo mette il CSS, cosi' non resta appeso a capo. */
.vftr__fiscali {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-1) var(--sp-4);
  margin-top: var(--sp-2);
  font-size: var(--fs-3xs); line-height: var(--lh-relaxed);
  color: var(--c-on-dark-a70);
}
.vftr__legale {
  margin-top: var(--sp-5); padding-top: var(--sp-4);
  border-top: 1px solid var(--c-on-dark-a12);
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  justify-content: center; align-items: center;
  font-size: var(--fs-3xs);
}
/* Sono tre parole vicine su cui si tocca con il pollice: senza un'altezza
   dichiarata, su un telefono si sbaglia bersaglio. */
.vftr__legale a {
  display: inline-flex; align-items: center;
  min-height: var(--touch);
}
.vftr a { color: var(--c-on-dark-a88); text-decoration: underline; }
.vftr a:hover { color: var(--c-brass-light); }