/* =========================================================================
   Dopo la notte: si innesta, dati e sicurezza, domande, chiamata finale,
   piè di pagina. Di nuovo sul bianco. Valori dai token.
   ========================================================================= */

/* =========================================================================
   10. Come si collega — sotto il titolo una frase grande coi loghi dentro
   (Mario, 12 ottobre: la C di prove/innesti.html, al posto di cinque voci in
   colonna). Quello che entra in Smistant, coi loghi su tessere bianche; poi il
   gestionale, che integriamo noi (che resta dov'è lo dice il titolo). Poi
   i gestionali per nome e la tabella a tre righe: cosa gestisce ciascuno, e
   dove si ferma (anche Smistant).
   ========================================================================= */
.innesta__frase { max-width: 1040px; margin-top: var(--space-3); font: 600 clamp(1.45rem, 1rem + 1.5vw, 2.5rem)/1.3 var(--sito-font-titoli); letter-spacing: -0.03em;
  color: var(--color-ink); text-wrap: balance; }
.innesta__frase + .innesta__frase { margin-top: 0; }
/* Ogni tessera va a capo insieme alla parola che la precede */
.innesta__lega { white-space: nowrap; }
.innesta__tessera { display: inline-flex; align-items: center; gap: .14em; padding: .1em .22em; margin: 0 .04em; border-radius: .34em; vertical-align: -.1em; line-height: 1;
  background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow); }
.innesta__tessera .logo { width: .86em; height: .86em; }
.innesta__tessera .ico { width: .72em; height: .72em; margin: .07em; color: var(--color-ink-soft); stroke-width: 2.25; }

/* Lo snodo, sotto la frase coi loghi: i canali a sinistra, Smistant al centro, il
   gestionale a destra (Mario, 12 ottobre: Smistant sta in mezzo fra le due parti). Era in
   home sotto la fascia: lì prendeva troppo spazio, e piccolo era troppo piccolo; qui
   spiega, a metà misura. Tessere tutte uguali (i canali in quattro gruppi, coi loghi e
   il nome; il gestionale col nome su due righe) e Smistant in un riquadro scuro, al
   centro della pagina, coi fili della stessa lunghezza ai due lati. I fili li disegna
   js/finale.js in un svg sotto le tessere; entrano una volta sola, tracciandosi. Sul
   telefono è una colonna. */
.snodo { position: relative; max-width: 1080px; margin: 96px auto 0; display: grid; justify-items: center; gap: var(--space-8); }
.snodo__fili { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.snodo__fili path { fill: none; stroke: var(--color-border-strong); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1100ms var(--sito-molla); }
.snodo__fili circle { fill: var(--color-ink); opacity: 0; transition: opacity 400ms ease; }
.snodo.acceso .snodo__fili path { stroke-dashoffset: 0; }
.snodo.acceso .snodo__fili circle { opacity: 1; }
.snodo__canali { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.snodo__canale, .snodo__gestionale { position: relative; display: flex; align-items: center; gap: var(--space-3); padding: 8px 18px 8px 10px; border-radius: 16px; background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-ink) 8%, transparent); box-shadow: var(--shadow); font-size: var(--text-base); font-weight: 600; line-height: 1.15; color: var(--color-ink); }
.snodo__loghi { display: flex; gap: 4px; }
.snodo__canale .logo { width: 26px; height: 26px; }
.snodo__centro { position: relative; isolation: isolate; display: grid; justify-items: center; align-content: center; gap: var(--space-3); width: 156px; height: 156px;
  border-radius: 32px; background: var(--palco); box-shadow: var(--shadow-lg); }
.snodo__centro::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background-image: var(--sito-grana); opacity: .4; mix-blend-mode: soft-light; }
.snodo__centro img { width: 52px; height: 52px; }
.snodo__centro b { font: 600 var(--text-xl)/1 var(--sito-font-titoli); letter-spacing: -0.02em; color: var(--sito-notte-titolo); }
.snodo__segno { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--color-bg); color: var(--color-ink); }
.snodo__segno .ico { width: 22px; height: 22px; }
.snodo__gestionale b { max-width: 6em; font-weight: 600; }
@media (min-width: 900px) {
  /* Da tavolo: in fila. Le due colonne ai lati sono uguali, quindi Smistant sta al centro
     della pagina; i canali e il gestionale stanno attaccati allo spazio dei fili, che è
     lo stesso dai due lati. */
  .snodo { --fili: 144px; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0 var(--fili); }
  .snodo__canali { justify-self: end; flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  /* Lo spazio di tre loghi per tutti: i nomi partono in colonna */
  .snodo__loghi { width: calc(3 * 26px + 2 * 4px); }
  .snodo__gestionale { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .snodo__fili path, .snodo__fili circle { transition: none; } }

/* I gestionali veri, per nome (Mario, 11 ottobre: «così siamo dentro la cosa»): due
   campi, agenzie viola e hotel verdi come nella logica dei colori, con la mascotte e una
   frase sola. Solo i nomi, niente loghi: non sono integrazioni, e la nota lo dice. */
.gestionali { max-width: 1280px; margin: 120px auto 0; display: grid; gap: var(--space-3); }
@media (min-width: 900px) { .gestionali { grid-template-columns: 1fr 1fr; } }
.gestionali__voce { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-7) var(--space-6); border-radius: var(--sito-r-campo);
  background: var(--campo); color: var(--color-ink); }
.gestionali__voce .mascotte { width: 64px; height: 64px; margin-bottom: var(--space-2); }
.gestionali__voce small { font-size: var(--text-base); font-weight: 600; }
.gestionali__voce > span:last-child { font: 500 var(--sito-titolo-3)/1.15 var(--sito-font-titoli); letter-spacing: -0.02em; text-wrap: balance; }
.gestionali__voce b { font-weight: 700; }
.gestionali__nota { grid-column: 1 / -1; margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-muted); }
@media (min-width: 768px) { .gestionali__voce { padding: var(--space-8); } }

/* La tabella: righe divise da un filo, Smistant sullo scuro di Smistant */
.confronta { max-width: 1280px; margin: 120px auto 0; }
.confronta__riga { display: grid; gap: var(--space-2); padding: var(--space-5); border-top: 1px solid var(--color-border-strong); font-size: var(--text-md); line-height: 1.5; }
.confronta__riga > b { font: 600 var(--text-xl)/1.15 var(--sito-font-titoli); letter-spacing: -0.02em; color: var(--color-ink); }
.confronta__riga > b small { display: block; margin-top: 4px; font: 400 var(--text-sm)/1.3 var(--sito-font); letter-spacing: 0; color: var(--color-muted); }
.confronta__testa { display: none; }
.confronta__riga--noi { border-top: 0; border-radius: var(--sito-r-scheda); background: var(--palco); color: var(--sito-notte-testo); }
.confronta__riga--noi > b { color: var(--sito-notte-titolo); }
@media (max-width: 799px) {
  /* Su telefono ogni cella dice di cosa parla */
  .confronta__riga > span::before { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); margin-bottom: 2px; }
  .confronta__riga--noi > span::before { color: var(--sito-notte-spento); }
  .confronta__riga > span:nth-of-type(1)::before { content: "Cosa gestisce"; }
  .confronta__riga > span:nth-of-type(2)::before { content: "Dove si ferma"; }
}
@media (min-width: 800px) {
  .confronta__riga { grid-template-columns: 260px 1fr 1fr; gap: var(--space-7); padding: var(--space-6) var(--space-7); }
  .confronta__testa { display: grid; border-top: 0; padding-top: 0; padding-bottom: var(--space-3); font-size: var(--text-base); font-weight: 600; color: var(--color-muted); }
}

/* =========================================================================
   11. Dati e sicurezza — un riquadro solo, scuro, con le voci dentro e senza
   schede (prima erano sei schede uguali: «AI made»). Nella home sta dentro la
   notte, che così dura fino alle domande (Mario, 11 ottobre); nella pagina
   della sicurezza è lo scuro sul bianco. I colori li fissa lui, non la notte.
   ========================================================================= */
.dati__campo { max-width: 1280px; margin: 0 auto; padding: var(--space-8) var(--space-5); border-radius: var(--sito-r-campo); background: var(--sito-notte-scheda); border: 1px solid var(--sito-notte-bordo); color: var(--sito-notte-testo); }
.dati__campo h2, .dati__campo h3 { color: var(--sito-notte-titolo); }
.dati__campo .sez__testa { max-width: none; }
.dati__campo .sez__lead { color: var(--sito-notte-testo); font-size: var(--text-md); }
.dati__elenco { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: grid; gap: var(--space-6) var(--space-7); }
@media (min-width: 640px) { .dati__elenco { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .dati__elenco { grid-template-columns: repeat(3, 1fr); } }
/* Il marchio sopra e il testo sotto, senza filo (Mario, 12 ottobre) */
.dato { padding-top: var(--space-2); }
.dato__segno { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--color-surface); color: var(--color-ink); }
.dato__segno .ico { width: 22px; height: 22px; }
.dato__segno .logo { width: 26px; height: 26px; }
/* Le norme nella home: tre voci, col marchio vero al posto dell'icona */
@media (min-width: 640px) { .dati__elenco--norme { grid-template-columns: 1fr; } }
@media (min-width: 860px) { .dati__elenco--norme { grid-template-columns: repeat(3, 1fr); } }
.dato__marchio { display: block; width: 56px; height: 56px; }
.dato h3 { margin-top: var(--space-4); font-size: clamp(1.3rem, 1.1rem + .5vw, 1.55rem); line-height: 1.1; }
.dato p { margin-top: var(--space-2); font-size: var(--text-md); line-height: 1.5; }
@media (min-width: 768px) { .dati__campo { padding: var(--space-9); } }
/* Le norme in breve, nella pagina della sicurezza sotto le sei voci: tre bollini
   bianchi col marchio vero. La parola grande è il marchio, quella piccola sopra
   dice cosa vuol dire. */
.bollini { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.bollino { display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-6) var(--space-2) var(--space-2); border-radius: var(--sito-r-barra);
  background: var(--color-surface); color: var(--color-ink); font: 600 var(--text-xl)/1 var(--sito-font-titoli); letter-spacing: -0.02em; }
.bollino small { display: block; margin-bottom: 4px; font: 500 var(--text-sm)/1 var(--sito-font); letter-spacing: 0; color: var(--color-ink-soft); }
.bollino__marchio { width: 52px; height: 52px; }
/* Nella home i dati sono in breve: il bottone porta alla pagina completa */
.dati__pagina { margin-top: var(--space-8); }
/* La firma: chi lo costruisce, grande, sotto il campo */
.dati__firma { max-width: 1280px; margin: 120px auto 0; font: 600 var(--sito-titolo-2)/1 var(--sito-font-titoli); letter-spacing: var(--sito-crenatura); color: var(--color-ink); text-wrap: balance; }
@media (min-width: 960px) { .dati__firma { padding-right: 25%; } }

/* =========================================================================
   Il centralino AI (centralino.html). Chiaro e scuro si alternano (Mario, 11
   ottobre: tre riquadri neri di fila erano troppi): la copertina a due colonne
   con la telefonata in un palco piccolo, cosa fa (chiaro), con Smistant (un
   riquadro scuro), la conformità (chiaro), come si attiva (chiaro), le
   domande, la chiusura (scura).
   ========================================================================= */
.centralino__logo { width: 56px; height: 56px; }
/* La copertina: il testo a sinistra, più corto, col bottone della demo; a destra la
   telefonata (Mario: il testo era lungo e stretto, la chiamata stava in un riquadro
   nero enorme con tanto vuoto ai lati). Sotto 1024 px vanno una sotto l'altra. */
.centralino__copertina { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); align-items: center; }
.centralino__copertina h1 { font-size: clamp(2.6rem, 1.2rem + 3.2vw, 4.6rem); }
.centralino__copertina .sez__lead { max-width: 560px; }
.centralino__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5); margin-top: var(--space-2); }
.centralino__copertina .palco--chiamata { margin: 0 calc(var(--space-4) * -1); }
@media (min-width: 768px) { .centralino__copertina .palco--chiamata { margin: 0; } }
@media (min-width: 1024px) {
  .centralino__copertina { grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: var(--space-9); }
  .centralino__copertina .palco--chiamata { padding: var(--space-8) var(--space-6); }
}
/* La telefonata: battute come in una chat. Chi risponde è bianco, chi chiama è
   un velo chiaro sullo scuro: nessun colore nuovo. L'icona è quella verde del
   telefono, come nei canali. */
.palco--chiamata { padding: var(--space-7) var(--space-4); }
@media (min-width: 768px) { .palco--chiamata { padding: 72px var(--space-7); } }
.chiamata { max-width: 620px; margin: 0 auto; display: grid; gap: var(--space-3); }
.chiamata__testa { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); padding: var(--space-3) var(--space-4);
  border-radius: var(--sito-r-barra); background: color-mix(in srgb, var(--color-surface) 10%, transparent); color: var(--sito-notte-titolo); }
.chiamata__testa .logo { width: 32px; height: 32px; }
.chiamata__testa small { margin-left: auto; font-size: var(--text-sm); color: var(--sito-notte-spento); white-space: nowrap; }
.battuta { max-width: 88%; padding: var(--space-3) var(--space-4); border-radius: 20px; font-size: var(--text-md); line-height: 1.45; }
.battuta span { display: block; margin-bottom: 2px; font-size: var(--text-sm); font-weight: 600; }
.battuta--ai { justify-self: start; border-bottom-left-radius: 6px; background: var(--color-surface); color: var(--color-ink); }
.battuta--ai span { color: var(--color-ink-soft); }
.battuta--chi { justify-self: end; border-bottom-right-radius: 6px; background: color-mix(in srgb, var(--color-surface) 14%, transparent); color: var(--sito-notte-titolo); }
.battuta--chi span { color: var(--sito-notte-testo); }

/* Le voci (cosa fa, la conformità): niente filo sopra (Mario, 11 ottobre: «non mi fa
   impazzire»). Ognuna ha la sua icona disegnata a due toni su una tessera nei tre
   colori dei settori, a giro: qui vuol dire «per tutti», come la scheda di Smistant
   Base. Poi il titolo e una riga. Le alternative stanno in prove/voci.html. */
.voci { list-style: none; max-width: 1280px; margin: var(--space-8) auto 0; padding: 0; display: grid; gap: var(--space-8) var(--space-7); }
@media (min-width: 640px) { .voci { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .voci { grid-template-columns: repeat(3, 1fr); } }
.voce { display: grid; justify-items: start; align-content: start; gap: var(--space-2); }
.voce__segno { --c: var(--campo-viola); position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: var(--space-3);
  border-radius: 22px; background: var(--c); color: var(--color-ink); }
.voce__segno::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--sito-grana); opacity: .5; mix-blend-mode: soft-light; }
.voce:nth-child(3n + 2) .voce__segno { --c: var(--campo-verde); }
.voce:nth-child(3n + 3) .voce__segno { --c: var(--campo-ambra); }
.voce__segno .ico { width: 36px; height: 36px; stroke-width: 1.6; }
.voce h3 { font-size: clamp(1.3rem, 1.1rem + .5vw, 1.55rem); line-height: 1.1; }
.voce p { max-width: 38ch; font-size: var(--text-md); line-height: 1.5; }

/* Con Smistant: un riquadro scuro solo, in due colonne della stessa misura. Da tavolo
   le colonne condividono le righe (titolo, testo, immagine) e le due immagini hanno
   la stessa altezza (Mario, 11 ottobre). */
.con-smistant__colonne { margin-top: var(--space-8); display: grid; gap: var(--space-9) var(--space-8); }
.con-smistant__col { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--space-3); min-width: 0; }
@media (min-width: 960px) {
  .con-smistant__colonne { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .con-smistant__col { grid-row: span 3; grid-template-rows: subgrid; }
}
.con-smistant__col h3 { font-size: var(--sito-titolo-3); line-height: 1.05; }
.con-smistant__col p { font-size: var(--text-md); line-height: 1.5; max-width: 46ch; }
.con-smistant__col > [id] { display: grid; padding-top: var(--space-4); }
.con-smistant__col > [id] > * { height: 100%; }
/* La sezione «Centralino» dell'app (prototipo: CentralinoView), in piccolo: gli stati a
   sinistra, le chiamate a destra. Colori come nell'app: grigio la risposta, rosso la
   persa, ambra la segreteria; celeste le righe nuove. */
.cl { display: grid; grid-template-columns: 150px minmax(0, 1fr); overflow: hidden; border-radius: var(--radius-btn); background: var(--color-surface);
  box-shadow: 0 32px 60px -32px color-mix(in srgb, var(--color-ink) 55%, transparent); font: 13px/1.4 var(--font-sans); color: var(--color-ink-soft); }
.cl__rail { padding: 12px 8px; background: var(--color-bg); border-right: 1px solid var(--color-border); }
.cl__titolo { padding: 2px 8px 10px; font-weight: 700; color: var(--color-ink); }
.cl__stato { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border-radius: var(--menu-item-radius); }
.cl__stato .ico { width: 15px; height: 15px; flex: none; }
.cl__stato small { margin-left: auto; font-size: 11px; color: var(--color-muted); }
.cl__stato.on { background: color-mix(in srgb, var(--color-ink) 6%, transparent); color: var(--color-ink); font-weight: 600; }
.cl__stato.on .ico, .cl__stato.on small { color: var(--color-accent); font-weight: 700; }
.cl__lista { min-width: 0; }
.cl__cerca { padding: 10px 12px; border-bottom: 1px solid var(--color-border); }
.cl__riga { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--color-border); }
.cl__riga--nuova { background: var(--color-unread-bg); }
.cl__segno { flex: none; color: var(--color-muted); }
.cl__segno .ico { width: 15px; height: 15px; }
.cl__segno--persa { color: var(--color-error); }
.cl__segno--segreteria { color: var(--color-warn); }
.cl__testo { flex: 1; min-width: 0; }
.cl__su { display: flex; justify-content: space-between; gap: 8px; }
.cl__su b { overflow: hidden; color: var(--color-ink); font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.cl__riga--nuova .cl__su b { font-weight: 700; }
.cl__su small { flex: none; font-size: 11.5px; color: var(--color-muted); }
.cl__giu { display: flex; align-items: center; gap: 5px; margin-top: 1px; overflow: hidden; font-size: 12.5px; color: var(--color-muted); white-space: nowrap; }
.cl__giu span { overflow: hidden; text-overflow: ellipsis; }
.cl__giu .ico { width: 12px; height: 12px; flex: none; color: var(--color-primary); }
.cl__giu i { font-style: italic; }
.cl__dx { display: flex; align-items: center; gap: 6px; flex: none; }
@media (max-width: 479px) { .cl { grid-template-columns: minmax(0, 1fr); } .cl__rail { display: none; } }
/* La telefonata nella sua pratica: la scheda del prototipo dell'app (ChiamataView), in
   piccolo. Testata grigia con chi ha chiamato, le pratiche collegate, la sintesi
   automatica nel riquadro azzurrino dell'assistente, due righe di trascrizione. */
.cs { overflow: hidden; border-radius: var(--radius-btn); background: var(--color-surface); box-shadow: 0 32px 60px -32px color-mix(in srgb, var(--color-ink) 55%, transparent);
  font: 13px/1.45 var(--font-sans); color: var(--color-ink-soft); }
.cs__testa { display: flex; align-items: center; gap: var(--space-3); padding: 12px 16px; background: var(--color-bg); border-bottom: 1px solid var(--color-border); }
.cs__testa .av { width: 34px; height: 34px; font-size: 12px; }
.cs__testa b { display: block; font-size: 15px; font-weight: 650; color: var(--color-ink); }
.cs__testa small { display: block; font-size: 12px; color: var(--color-muted); }
.cs__corpo { display: grid; gap: var(--space-3); padding: 14px 16px 16px; }
.cs__etichetta { font: 600 11px/1 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--color-muted); }
.cs__pratiche { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cs__pratica { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-btn);
  font-size: 12.5px; font-weight: 600; color: var(--color-ink-soft); }
.cs__pratica .ico { width: 14px; height: 14px; }
.cs__pratica--nuova { border-style: dashed; color: var(--color-muted); font-weight: 500; }
.cs__sintesi { padding: 12px 14px; border: 1px solid var(--color-primary-soft); border-radius: var(--radius-lg); background: color-mix(in oklch, var(--color-primary) 4%, var(--color-surface)); }
.cs__sintesi-su { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-weight: 600; color: var(--color-primary); }
.cs__sintesi-su span { display: inline-flex; align-items: center; gap: 5px; }
.cs__sintesi-su .ico { width: 14px; height: 14px; }
.cs__tono { padding: 2px 8px; border-radius: var(--radius-pill); background: var(--color-bg-muted); color: var(--color-muted); font-size: 11px; font-weight: 600; }
.cs__sintesi h5 { margin: 8px 0 6px; font: 650 14.5px/1.3 var(--font-sans); color: var(--color-ink); }
.cs__punti { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cs__punti li, .cs__trascrizione div { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 6px; }
.cs__punti i, .cs__trascrizione i { font: 500 11.5px/1.6 var(--font-sans); font-style: normal; font-variant-numeric: tabular-nums; color: var(--color-muted); }
.cs__resta { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--color-primary-soft); color: var(--color-ink); }
.cs__trascrizione { display: grid; gap: 4px; }
.cs__trascrizione b { color: var(--color-ink); font-weight: 650; }

/* La conformità, sul chiaro (decisione 58): a sinistra il titolo, a destra i tre bollini uno
   sotto l'altro, della stessa larghezza (Mario, 11 ottobre: due sopra e uno sotto non
   erano carini); sotto, le sei voci. */
.conformita { max-width: 1280px; margin: 0 auto; display: grid; gap: var(--space-8); }
@media (min-width: 960px) { .conformita { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: var(--space-9); align-items: center; } }
.conformita .voci { grid-column: 1 / -1; margin: var(--space-4) 0 0; }
.conformita__nota { font-size: var(--text-sm); color: var(--color-muted); }
.bollini--colonna { margin: 0; flex-direction: column; flex-wrap: nowrap; }
.bollini--colonna .bollino { width: 100%; }
.bollino__segno { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--palco); color: var(--color-surface); }
.bollino__segno .ico { width: 24px; height: 24px; }

/* Come si attiva: un percorso di tre riquadri con la freccia in mezzo, come lo schema
   di Lypso (Mario, 11 ottobre: filo sopra e numero sotto non gli piacevano). Il numero
   sta in una tessera; l'ultimo riquadro, il risultato, è scuro. */
.percorso { list-style: none; max-width: 1280px; margin: var(--space-8) auto 0; padding: 0; display: grid; gap: var(--space-9); }
@media (min-width: 860px) { .percorso { grid-template-columns: repeat(3, 1fr); } }
.percorso li { position: relative; display: grid; justify-items: start; align-content: start; gap: var(--space-2); padding: var(--space-6); border-radius: var(--sito-r-scheda);
  border: 1px solid var(--color-border-strong); background: var(--color-surface); }
.percorso__numero { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--space-3); border-radius: 14px; background: var(--color-bg);
  font: 600 var(--text-xl)/1 var(--sito-font-titoli); color: var(--color-ink); }
.percorso h3 { font-size: clamp(1.3rem, 1.1rem + .5vw, 1.55rem); line-height: 1.1; }
.percorso p { font-size: var(--text-md); line-height: 1.5; }
.percorso .percorso__fine { border-color: transparent; background: var(--palco); color: var(--sito-notte-testo); }
.percorso__fine h3 { color: var(--sito-notte-titolo); }
.percorso__fine .percorso__numero { background: var(--color-surface); }
.percorso li + li::before { content: ""; position: absolute; left: 50%; top: calc(var(--space-9) / -2 - 16px); width: 48px; height: 32px; margin-left: -24px;
  background: var(--color-ink); transform: rotate(90deg); -webkit-mask: var(--sito-freccia-curva) center / contain no-repeat; mask: var(--sito-freccia-curva) center / contain no-repeat; }
@media (min-width: 860px) { .percorso li + li::before { left: calc(var(--space-9) / -2 - 24px); top: 50%; margin: -16px 0 0; transform: none; } }

/* =========================================================================
   12. Domande frequenti — titolo fermo a sinistra, domande che si aprono a
   destra. Sono <details>: si aprono anche senza JavaScript.
   ========================================================================= */
.domande__corpo { max-width: 1280px; margin: 0 auto; display: grid; gap: var(--space-7); }
/* I colori vengono da --n-* (agenti.css): scuri sul chiaro, chiari sulla notte */
.domande, .domande h2, .domanda, .domanda summary { transition: color 400ms ease, border-color 400ms ease; }
.domande__testa h2 { margin: 0; font-size: var(--sito-titolo-2); line-height: 1; color: var(--n-titolo); }
.domande__testa p { margin-top: var(--space-5); font-size: var(--text-lg); }
@media (min-width: 960px) {
  .domande__corpo { grid-template-columns: .8fr 1.2fr; gap: 96px; align-items: start; }
  .domande__testa { position: sticky; top: 120px; }
}
.domanda { border-bottom: 1px solid var(--n-bordo); }
.domanda:first-child { border-top: 1px solid var(--n-bordo); }
.domanda summary { list-style: none; position: relative; padding: var(--space-5) 48px var(--space-5) 0; cursor: pointer;
  font: 500 var(--text-xl)/1.25 var(--sito-font-titoli); letter-spacing: -0.015em; color: var(--n-titolo); }
.domanda summary::-webkit-details-marker { display: none; }
.domanda summary:hover { color: var(--color-primary); }
/* Il più che diventa meno, disegnato come un'icona */
.domanda summary::before, .domanda summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 16px; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform var(--motion-slow) var(--sito-molla); }
.domanda summary::after { transform: rotate(90deg); }
.domanda[open] summary::after { transform: rotate(0deg); }
/* Mentre si chiude (finale.js) il meno torna subito più */
.domanda.chiude summary::after { transform: rotate(90deg); }
.domanda p { padding: 0 48px var(--space-6) 0; font-size: var(--text-md); line-height: 1.6; max-width: 62ch; }

/* =========================================================================
   13. Chiamata finale — la frase della copertina e il modulo della demo, sul
   palco scuro: si chiede la demo qui, senza andare su un'altra pagina (Mario,
   11 ottobre). Sotto c'è aria prima del piè di pagina.
   ========================================================================= */
/* Il palco della chiusura poggia a cavallo del piè di pagina: il grigio del piede
   comincia dietro la sua metà bassa (margine negativo del .piede), così i due
   stanno insieme invece di toccarsi per caso (Mario, 11 ottobre: «un po' triste»). */
.finale { position: relative; z-index: 1; padding: 120px var(--space-4) 0; }
.palco--finale { margin-top: 0; display: grid; gap: var(--space-7); align-items: start; padding: var(--space-7) var(--space-4);
  box-shadow: 0 40px 80px -48px color-mix(in srgb, var(--color-ink) 70%, transparent); }
.finale__testo { display: grid; justify-items: start; gap: var(--space-5); }
.finale__testo h2 { margin: 0; max-width: 11em; font-size: var(--sito-titolo-2); line-height: 1; color: var(--color-surface); }
.finale__testo p { max-width: 40ch; font-size: var(--text-lg); line-height: 1.5; color: var(--sito-notte-testo); }

/* Il bollino dei 30 giorni (Mario, 11 ottobre: «più fantasioso»): un cerchio azzurro,
   perché sta con la chiamata, con le faccette delle tre mascotte (le mette home.js),
   un po' storto, che esce dal bordo alto del palco. Sta nel flusso, in cima al testo:
   il margine negativo lo tira fuori senza coprire il titolo. Fermo. */
.finale__testo .trenta { --lato: 136px; --fuori: 44px; position: relative; z-index: 2; width: var(--lato); height: var(--lato); max-width: none;
  margin: calc(-1 * (var(--space-7) + var(--fuori))) 0 0; display: grid; place-content: center; justify-items: center; gap: 6px;
  border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary-ink); text-align: center; transform: rotate(-9deg);
  box-shadow: 0 18px 32px -18px color-mix(in srgb, var(--sito-notte) 90%, transparent); }
.trenta__facce { display: flex; }
.trenta__facce .mascotte { width: 34px; height: 34px; box-shadow: 0 0 0 3px var(--color-primary-soft); }
.trenta__facce .mascotte + .mascotte { margin-left: -8px; }
.trenta__testo { display: grid; font: 600 var(--text-sm)/1.15 var(--sito-font); }
.trenta__testo b { font: 600 1.6rem/1 var(--sito-font-titoli); letter-spacing: -0.03em; }
@media (min-width: 768px) {
  .finale__testo .trenta { --lato: 168px; --fuori: 56px; margin-top: calc(-1 * (var(--space-8) + var(--fuori))); }
  .trenta__facce .mascotte { width: 42px; height: 42px; }
  .trenta__testo { font-size: var(--text-base); }
  .trenta__testo b { font-size: 2rem; }
}
@media (min-width: 1100px) { .finale__testo .trenta { margin-top: calc(-1 * (72px + var(--fuori))); } }

/* La chiusura di Circe e Lypso (Mario, 13 ottobre): non è quella di Smistant. Il bollino dice
   «Per i primi sconti esclusivi» nel campo dell'agente, con la sua mascotte sola (l'azzurro resta
   ai 30 giorni, che stanno con la chiamata di Smistant); sotto il testo, cosa c'è oggi e cosa è in
   costruzione, come in «A che punto è». */
.finale--circe { --tinta: var(--tinta-circe); }
.finale--lypso { --tinta: var(--tinta-lypso); }
.finale--agente .trenta { background: var(--tinta); color: var(--color-ink); }
.finale--agente .trenta__facce .mascotte { box-shadow: 0 0 0 3px var(--tinta); }
.finale--agente .trenta__testo b { font-size: 1.3rem; line-height: 1.05; }
@media (min-width: 768px) { .finale--agente .trenta__testo b { font-size: 1.6rem; } }
.finale__stato { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.finale__stato li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); font-size: var(--text-md); color: var(--sito-notte-titolo); }
.finale__stato .chip-stato:not(.chip-stato--lavori) { background: var(--sito-notte-titolo); color: var(--palco); }

.finale .rassicura--box { justify-content: flex-start; }
.finale .rassicura--box li { background: transparent; border-color: var(--sito-notte-bordo); color: var(--sito-notte-testo); }
.finale .rassicura .ico { color: var(--sito-notte-titolo); }
@media (min-width: 768px) {
  .finale { padding: 140px var(--space-7) 0; }
  .palco--finale { padding: var(--space-8) var(--space-8); }
}
@media (min-width: 1100px) { .palco--finale { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: var(--space-9); padding: 72px var(--space-9); } }

/* Il modulo: un foglio bianco sul palco. Campi alti, testo grande: chi lo compila
   ha cinquanta, sessant'anni. */
.modulo { display: grid; gap: var(--space-5); padding: var(--space-6) var(--space-5); border-radius: var(--sito-r-scheda); background: var(--color-surface); color: var(--color-ink-soft); }
.modulo__campi { display: grid; gap: var(--space-4); }
@media (min-width: 600px) { .modulo__campi { grid-template-columns: 1fr 1fr; } .campo-mod--largo { grid-column: 1 / -1; } }
.campo-mod { display: grid; gap: 6px; font-size: var(--text-base); font-weight: 500; color: var(--color-ink); }
.campo-mod small { font-weight: 400; color: var(--color-muted); }
.campo-mod input, .campo-mod select, .campo-mod textarea { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg);
  background: var(--color-surface); color: var(--color-ink); font: 400 var(--text-md)/1.4 var(--sito-font); }
.campo-mod textarea { min-height: 96px; resize: vertical; }
.campo-mod input:focus, .campo-mod select:focus, .campo-mod textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--focus-ring); }
/* Dopo un tentativo d'invio, i campi da sistemare si vedono */
.modulo.provato :invalid { border-color: var(--color-error); }
.modulo__consenso { display: flex; align-items: flex-start; gap: 10px; font-size: var(--text-sm); line-height: 1.45; color: var(--color-ink-soft); cursor: pointer; }
.modulo__consenso input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--color-primary); }
/* Il link all'informativa: sottolineato nel colore del testo, il blu resta dell'azione */
.modulo__consenso a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.modulo.provato .modulo__consenso input:invalid { outline: 2px solid var(--color-error); outline-offset: 2px; }
.modulo__invia { width: 100%; }
.modulo__esito { font-size: var(--text-base); line-height: 1.45; color: var(--color-ink); }
.modulo__esito:empty { display: none; }
/* Registrata la richiesta (js/home.js, solo coi moduli collegati): resta la conferma, grande */
.modulo.inviato .modulo__campi, .modulo.inviato .modulo__consenso, .modulo.inviato .modulo__invia { display: none; }
.modulo.inviato .modulo__esito { font: 600 var(--text-xl)/1.3 var(--sito-font-titoli); letter-spacing: -0.02em; outline: none; }
@media (min-width: 768px) { .modulo { padding: var(--space-7); } }

/* =========================================================================
   14. Piè di pagina — riferimento Granola: a fine pagina il marchio sale
   ========================================================================= */
.piede { position: relative; overflow: hidden; margin-top: -120px; padding-top: 120px; background: var(--sito-fondo-grigio); color: var(--color-ink-soft); }
.piede__in { max-width: 1280px; margin: 0 auto; padding: var(--space-9) var(--space-4) var(--space-7); display: grid; gap: var(--space-7); }
@media (min-width: 700px) { .piede__in { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .piede__in { grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--space-6); padding-left: var(--space-7); padding-right: var(--space-7); } }
.piede__marca p { margin-top: var(--space-4); max-width: 34ch; font-size: var(--text-base); line-height: 1.55; }
.piede__col { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-base); }
.piede__col h4 { margin: 0 0 var(--space-2); font-size: var(--text-base); font-weight: 600; color: var(--color-ink); }
.piede__col a { color: var(--color-ink-soft); } .piede__col a:hover { color: var(--color-primary); }
/* Le pagine che non ci sono ancora: scritte, non collegate */
.in-arrivo { color: var(--color-muted); cursor: default; }
.piede__sotto { max-width: 1280px; margin: 0 auto; padding: var(--space-4) var(--space-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5);
  border-top: 1px solid color-mix(in srgb, var(--color-ink) 8%, transparent); font-size: var(--text-sm); color: var(--color-muted); }
@media (min-width: 1100px) { .piede__sotto { padding-left: var(--space-7); padding-right: var(--space-7); } }
.piede__sotto a { color: inherit; } .piede__sotto a:hover { color: var(--color-primary); }
/* «Preferenze cookie»: la aggiunge js/consenso.js accanto al link Cookie; sembra un link */
.piede__preferenze { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.piede__preferenze:hover { color: var(--color-primary); }
/* La targhetta di Superia (Mario, 23 ottobre): chi l'ha fatto, col simbolo bianco di superia.it
   (`img/simbolo-superia-bianco.svg`, il file del loro sito) su un rettangolo scuro, il palco.
   In fondo a destra; sul telefono va a capo, a sinistra. Porta a superia.it e al
   passaggio si solleva come i bottoni. */
.targhetta { display: inline-flex; align-items: center; gap: var(--space-2); margin-left: auto; padding: 6px var(--space-4) 6px 6px;
  border-radius: var(--radius-btn); background: var(--palco);
  transition: translate var(--motion-medium) var(--sito-molla), box-shadow var(--motion-medium) var(--ease-out-quart); }
.targhetta img { display: block; width: 36px; height: 36px; }
.targhetta span { display: flex; flex-direction: column; gap: 3px; font: 600 var(--text-md)/1 var(--sito-font-titoli); letter-spacing: -0.01em; }
.targhetta small { font: 500 var(--text-xs)/1 var(--sito-font); letter-spacing: 0; color: var(--sito-notte-spento); }
.piede__sotto a.targhetta, .piede__sotto a.targhetta:hover { color: var(--sito-notte-titolo); }
.piede__sotto a.targhetta:hover { translate: 0 -2px; box-shadow: 0 12px 22px -12px color-mix(in srgb, var(--color-ink) 45%, transparent); }
@media (max-width: 699px) { .targhetta { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .piede__sotto a.targhetta:hover { translate: none; } }

/* =========================================================================
   Il banner dei cookie (js/consenso.js, decisione 53). Una scheda bianca in
   basso a sinistra, sopra la barra della demo (che intanto si nasconde): un titolo, una riga e
   due bottoni grandi uguali. «Accetta» pieno e scuro, «Rifiuta» col bordo; niente X (decisione 56).
   Il blu resta alla demo.
   ========================================================================= */
.consenso { position: fixed; z-index: 42; left: var(--space-2); right: var(--space-2); bottom: var(--space-2); max-width: 400px; padding: var(--space-4) var(--space-5) var(--space-5);
  border-radius: var(--sito-r-scheda); background: var(--color-surface); color: var(--color-ink-soft); box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border); animation: consenso-entra 320ms var(--sito-molla); }
.consenso[hidden] { display: none; }
@keyframes consenso-entra { from { opacity: 0; transform: translateY(12px); } }
@media (min-width: 768px) { .consenso { left: var(--space-5); right: auto; bottom: var(--space-5); } }
html[data-consenso="aperto"] .barra-demo { visibility: hidden; }
.consenso__titolo { margin: 0; font: 600 var(--text-base)/1.3 var(--sito-font); color: var(--color-ink); }
.consenso__testo { margin: var(--space-2) 0 0; font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-soft); }
.consenso__testo a { color: var(--color-ink); text-decoration: underline; text-underline-offset: .15em; white-space: nowrap; }
.consenso__scelte { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.consenso__scelte[hidden] { display: none; }
.consenso__scelta { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-btn); background: var(--color-bg); cursor: pointer; }
.consenso__scelta input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--color-ink); }
.consenso__scelta span { display: grid; gap: 2px; font-size: var(--text-sm); }
.consenso__scelta b { color: var(--color-ink); }
.consenso__scelta small { color: var(--color-muted); }
.consenso__bottoni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-4); }
.consenso__bottoni .btn { flex: 1 1 120px; }
.consenso__personalizza { padding: var(--space-1) 0; border: 0; background: none; font: 500 var(--text-sm)/1.2 var(--sito-font); color: var(--color-ink);
  text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .consenso { animation: none; } }

/* Le pagine della privacy e dei cookie (Mario, 12 ottobre): testo e basta, largo da leggere.
   Non hanno la chiusura sul palco, quindi il piè di pagina non le scavalca. Complete dal 13
   ottobre coi dati di superia.it (decisione 53): non ci sono più segnaposto. */
.legale { max-width: 760px; margin: 0 auto; padding: 168px var(--space-4) 120px; }
main:has(> .legale) + .piede { margin-top: 0; padding-top: 0; }
.legale h1 { font-size: var(--sito-titolo-2); line-height: 1; }
.legale__lead { margin-top: var(--space-5); font-size: var(--text-lg); line-height: 1.5; color: var(--color-ink-soft); }
.legale p.legale__aggiornata { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-muted); }
.legale h2 { margin-top: var(--space-8); font-size: var(--sito-titolo-3); line-height: 1.1; }
/* Le tabelle dei cookie: larghe quanto il testo, le frasi vanno a capo */
.legale__tabella { width: 100%; margin-top: var(--space-4); border-collapse: collapse; font-size: var(--text-sm); line-height: 1.5; }
.legale__tabella th, .legale__tabella td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; color: var(--color-ink-soft); }
.legale__tabella th:first-child, .legale__tabella td:first-child { padding-left: 0; }
.legale__tabella th { font-weight: 600; color: var(--color-ink); }
.legale code { font: 500 .92em/1.4 ui-monospace, Consolas, monospace; color: var(--color-ink); white-space: nowrap; }
.legale p, .legale li { font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-soft); }
.legale p { margin-top: var(--space-3); }
.legale ul { margin: var(--space-3) 0 0; padding-left: 1.2em; display: grid; gap: var(--space-2); }
.legale b { font-weight: 600; color: var(--color-ink); }
.legale a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 2px; } .legale a:hover { color: var(--color-primary); }
@media (max-width: 767px) { .legale { padding-top: 128px; } }
.piede__scritta { display: flex; justify-content: center; margin-top: var(--space-5); line-height: .78; pointer-events: none; user-select: none; }
.piede__scritta span { font: 600 clamp(5rem, 22vw, 20rem)/1 var(--sito-font-titoli); letter-spacing: -0.06em; color: color-mix(in srgb, var(--color-ink) 9%, var(--sito-fondo-grigio));
  transform: translateY(var(--sale, 0%)); will-change: transform; }

/* =========================================================================
   Sul telefono i riquadri sono larghi quanto la barra in alto: 8 px dal bordo
   invece di 16 (Mario, 12 ottobre). I titoli e i testi fuori dai riquadri
   restano a 16; i riquadri che vanno già da bordo a bordo (il palco) restano
   così. Sta qui, nell'ultimo foglio caricato, perché vinca sui margini dei
   singoli componenti.
   ========================================================================= */
@media (max-width: 767px) {
  .confronto, .settori__box, .richiamo, .scala, .agenti-schede, .dati__campo, .video--agente, .tempo__confronto, .passo__img, .agente-info,
  .flusso__schema, .gestionali__voce, .confronta, .pec, .bollini, .sicurezza-testa .bollini, .percorso { margin-inline: calc(var(--space-2) * -1); }
  /* Le schede colorate hanno width: 100%: oltre al margine serve la larghezza */
  .voce-oggi .oggi__scheda, .passo__img { width: calc(100% + 2 * var(--space-2)); margin-inline: calc(var(--space-2) * -1); }
}