/* =========================================================================
   Homepage — impaginazione
   -------------------------------------------------------------------------
   I valori stanno nei token: css/tokens.css (l'app) e css/sito-tokens.css
   (lo strato del sito). Qui solo regole. Le schermate del prodotto (.app,
   .riga, .chip…) copiano l'app vera: carattere di sistema, stessi stati.
   Le reference di ogni sezione sono scritte sopra la sezione.
   ========================================================================= */

html { scroll-behavior: smooth; }
body { font-family: var(--sito-font); background: var(--sito-fondo); color: var(--color-ink-soft); font-size: 1.0625rem; line-height: 1.55; overflow-x: hidden; }
h1, h2, h3 { font-family: var(--sito-font-titoli); font-weight: var(--sito-peso-titolo); letter-spacing: var(--sito-crenatura); color: var(--color-ink); text-wrap: balance; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.logo, .ico { width: 1em; height: 1em; flex: none; }
/* Testo per chi legge con la sintesi vocale: c'è, ma non si vede (i nomi dei loghi dentro le frasi) */
.solo-lettore { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- Bottoni ----------------------------------------------------------
   Al passaggio si sollevano un poco e prendono un'ombra (Mario, 11 ottobre:
   erano «sciapi»). Il sollevamento usa `translate`, non `transform`: così si
   somma alle trasformazioni che un bottone ha già (quello fisso in basso è
   centrato con un transform). I bottoni che portano a un'altra pagina hanno
   la freccia, che al passaggio esce a destra e rientra da sinistra. Con la
   riduzione del movimento cambia solo il colore. */
.btn { --btn-ombra: color-mix(in srgb, var(--color-ink) 45%, transparent);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 52px; padding: 0 var(--space-6);
  border-radius: var(--radius-btn); border: 1px solid transparent; font: 500 var(--text-md)/1 var(--sito-font); cursor: pointer; white-space: nowrap;
  /* Centrata a occhio (Mario, 11 e 12 ottobre). Il riquadro del testo va dall'altezza
     delle maiuscole alla linea di base, senza lo spazio delle discendenti che «Chiedi una
     demo» non ha; così però il corpo delle minuscole restava 2,5 px sotto il centro (misurato
     a 3×). Il padding sotto lo alza di metà: maiuscole e minuscole si bilanciano. */
  text-box: trim-both cap alphabetic; padding-bottom: .1em;
  transition: background var(--motion-fast) var(--ease-out-quart), color var(--motion-fast) var(--ease-out-quart), border-color var(--motion-fast) var(--ease-out-quart),
    translate var(--motion-medium) var(--sito-molla), box-shadow var(--motion-medium) var(--ease-out-quart); }
.btn:hover { translate: 0 -2px; box-shadow: 0 12px 22px -12px var(--btn-ombra); }
.btn:active { translate: 0 0; box-shadow: 0 4px 10px -6px var(--btn-ombra); transition-duration: var(--motion-fast); }
a.btn[href$=".html"]::after { content: ""; width: 18px; height: 18px; flex: none; margin-right: -4px; background: currentColor;
  -webkit-mask: var(--sito-freccia) center / contain no-repeat; mask: var(--sito-freccia) center / contain no-repeat; }
a.btn[href$=".html"]:hover::after { animation: freccia-scorre 520ms var(--sito-molla); }
@keyframes freccia-scorre { 0% { translate: 0; opacity: 1; } 40% { translate: 12px; opacity: 0; } 41% { translate: -12px; opacity: 0; } 100% { translate: 0; opacity: 1; } }
.btn--blu { --btn-ombra: color-mix(in srgb, var(--color-primary) 75%, transparent); background: var(--color-primary); color: var(--color-surface); }
.btn--blu:hover { background: var(--color-primary-dark); color: var(--color-surface); }
.btn--linea { background: var(--color-surface); color: var(--color-ink); border-color: var(--color-border-strong); }
.btn--linea:hover { color: var(--color-primary); border-color: var(--color-primary); }
.btn--sm { height: 38px; padding-inline: var(--space-4); font-size: var(--text-sm); }
/* Il bottone che porta a una pagina dedicata (Cosa farà Circe per voi): scuro,
   per non fare concorrenza al blu dell'unica chiamata, ma ben visibile. Sullo
   scuro è chiaro. */
.btn--scuro { background: var(--color-ink); color: var(--color-surface); }
.btn--scuro:hover { background: var(--color-ink-soft); color: var(--color-surface); }
.btn--chiaro { --btn-ombra: color-mix(in srgb, var(--sito-notte) 85%, transparent); background: var(--color-surface); color: var(--color-ink); }
.btn--chiaro:hover { background: var(--color-bg); color: var(--color-ink); }
/* La chiamata della copertina, un gradino più grande */
.btn--grande { height: 58px; padding-inline: var(--space-7); font-size: var(--text-lg); }

/* ---- Barra alta — riferimento Accretion -------------------------------
   Un rettangolo che galleggia sopra la pagina, staccato dal bordo. Superata
   la copertina si stringe e diventa un po' trasparente (classe .stretta, da
   home.js).
   Leggerezza (11 ottobre): niente si muove ricalcolando la larghezza. Il
   rettangolo sono due fondi già disegnati (::before pieno, ::after stretto)
   che si restringono con scaleX e si scambiano con una dissolvenza; il
   contenuto si sposta con translateX. --k-stretta e --d-stretta li calcola
   home.js sulla larghezza vera della barra. Niente sfocatura sotto: costava a
   ogni fotogramma mentre si scorre sopra il video. */
.barra { position: fixed; z-index: 30; top: var(--space-2); left: 0; right: 0; padding: 0 var(--space-2); pointer-events: none; }
.barra__in { position: relative; isolation: isolate; pointer-events: auto; max-width: 1200px; height: 62px; margin: 0 auto; padding: 0 var(--space-2) 0 var(--space-5);
  display: flex; align-items: center; gap: var(--space-7); }
.barra__in::before, .barra__in::after { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: var(--sito-r-barra); pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--color-ink) 7%, transparent); transform: scaleX(var(--k, 1));
  transition: transform var(--sito-allarga) var(--sito-molla), opacity var(--motion-slow) ease, background-color 400ms ease, border-color 400ms ease; }
.barra__in::before { background-color: var(--color-surface); box-shadow: var(--shadow); }
.barra__in::after { background-color: color-mix(in srgb, var(--color-surface) 95%, transparent); box-shadow: var(--shadow-lg); opacity: 0; }
.barra.stretta .barra__in { --k: var(--k-stretta, 1); }
.barra.stretta .barra__in::before { opacity: 0; }
.barra.stretta .barra__in::after { opacity: 1; }
.barra .marchio, .barra__voci, .barra__dx { transition: transform var(--sito-allarga) var(--sito-molla), color 400ms ease; }
.barra.stretta .marchio, .barra.stretta .barra__voci { transform: translateX(var(--d-stretta, 0px)); }
.barra.stretta .barra__dx { transform: translateX(calc(-1 * var(--d-stretta, 0px))); }
/* Il marchio: il simbolo di Smistant (img/, i file di Mario) e il nome scritto col
   carattere del sito (Mario, 11 ottobre: del logo si tiene solo il cerchio). I
   colori del simbolo sono già quelli dei token. Nella barra c'è anche il simbolo
   bianco, che si vede quando la pagina è scura (agenti.css). */
.marchio { display: inline-flex; align-items: center; gap: 10px; flex: none; color: var(--color-ink); font: 600 1.4rem/1 var(--sito-font-titoli); letter-spacing: -0.03em; white-space: nowrap; }
.marchio:hover { color: var(--color-ink); }
.marchio__simbolo { position: relative; display: block; width: 30px; height: 30px; flex: none; }
.marchio__simbolo img { display: block; width: 30px; height: 30px; transition: opacity 400ms ease; }
.marchio__simbolo .marchio__bianco { position: absolute; inset: 0; opacity: 0; }
.barra__voci { display: none; gap: var(--space-6); }
.barra__voci a, .barra__accedi { color: var(--color-ink-soft); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
.barra__voci a:hover, .barra__accedi:hover { color: var(--color-primary); }
.barra__dx { margin-left: auto; display: flex; align-items: center; gap: var(--space-5); }
/* Il bottone della barra: più largo e più alto del piccolo standard (Mario, 11 ottobre) */
.barra__dx .btn { height: 46px; padding-inline: var(--space-5); font-size: var(--text-base); }
.barra__accedi { display: none; }
/* Le voci (sei, con Integrazioni e Centralino AI) stanno solo da 1100 px in su; sotto c'è il menu */
@media (min-width: 1100px) { .barra__voci, .barra__accedi { display: flex; } }
/* Il menu di Circe e Lypso (Mario, 11 ottobre): la voce della barra apre, sul bianco,
   due riquadri nei colori degli agenti; ognuno porta dritto alla sua pagina. Si apre al
   passaggio del mouse e al clic, si chiude con Esc o fuori (home.js). Solo da tavolo:
   sul telefono la barra non ha voci. */
.barra__voci { align-items: center; }
.menu-agenti { position: relative; }
.menu-agenti__apri { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 500 var(--text-sm)/1 var(--sito-font); color: var(--color-ink-soft); transition: color 400ms ease; }
.menu-agenti__apri .ico { width: 15px; height: 15px; transition: transform var(--motion-medium) var(--ease-out-quart); }
.menu-agenti__apri:hover, .menu-agenti.aperto .menu-agenti__apri { color: var(--color-primary); }
.menu-agenti.aperto .menu-agenti__apri .ico { transform: rotate(180deg); }
.menu-agenti__pannello { position: absolute; left: 50%; top: calc(100% + 26px); width: 600px; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2);
  padding: var(--space-2); border-radius: var(--sito-r-scheda); background: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-ink) 7%, transparent);
  box-shadow: var(--shadow-lg); transform: translateX(-50%); animation: menu-entra 180ms var(--ease-out-quart); }
.menu-agenti__pannello[hidden] { display: none; }
/* Il ponte invisibile fra la voce e il pannello: il mouse ci passa senza chiuderlo */
.menu-agenti__pannello::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 28px; }
@keyframes menu-entra { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
/* Al passaggio il riquadro sale piano (Mario, 11 ottobre: su Circe e Lypso scattava).
   Ha un livello suo (will-change): il movimento lo fa la scheda grafica anche mentre il
   video della pagina occupa il processore. */
.menu-agente { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-5); border-radius: calc(var(--sito-r-scheda) - var(--space-2));
  background: var(--campo); color: var(--color-ink); will-change: transform; }
/* Più specifica di `.barra__voci a` (agenti.css), che altrimenti lascia solo la
   transizione del colore e il riquadro salta su di colpo */
.barra__voci .menu-agente { transition: transform 480ms var(--sito-molla), box-shadow 480ms var(--sito-molla); }
.menu-agente:hover { color: var(--color-ink); transform: translateY(-4px); box-shadow: 0 16px 28px -18px color-mix(in srgb, var(--color-ink) 60%, transparent); }
.menu-agente .mascotte { width: 56px; height: 56px; }
.menu-agente__testo b { display: block; font: 600 var(--text-xl)/1 var(--sito-font-titoli); letter-spacing: -0.02em; }
.menu-agente__testo small { display: block; margin-top: 4px; font-size: var(--text-sm); font-weight: 500; }
.menu-agente__testo span { display: block; margin-top: var(--space-3); font-size: var(--text-base); line-height: 1.4; }
/* I riquadri sono link dentro la barra: non prendono colore, misura e a capo delle voci */
.barra__voci .menu-agente, html.is-notte .barra__voci .menu-agente, .barra__voci .menu-agente:hover { color: var(--color-ink); font-size: var(--text-base); font-weight: 400; white-space: normal; }
html.is-notte .menu-agenti__apri { color: var(--sito-notte-testo); }
html.is-notte .menu-agenti__apri:hover, html.is-notte .menu-agenti.aperto .menu-agenti__apri { color: var(--sito-notte-titolo); }
/* Sulla barra scura il pannello ha lo stesso fondo della barra, non il bianco; i due
   riquadri restano viola e verde (Mario, 11 ottobre) */
html.is-notte .menu-agenti__pannello { background: color-mix(in srgb, var(--sito-notte-scheda) 94%, transparent); border-color: var(--sito-notte-bordo); }
[id] { scroll-margin-top: 96px; }

/* Il menu del telefono (Mario, 12 ottobre). Sotto i 1100 px le voci della barra non ci sono:
   a destra di «Chiedi una demo» c'è il bottone con le tre linee, che diventa una X e apre
   sotto la barra un pannello con le stesse voci (Circe e Lypso nei loro colori) e Accedi.
   Lo costruisce home.js leggendo la barra, uguale in tutte le pagine. */
.barra__menu { display: grid; place-content: center; gap: 4px; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-btn);
  background: transparent; color: var(--color-ink); cursor: pointer; transition: color 400ms ease; }
/* Le linee si muovono in due tempi (Mario, 12 ottobre: spostarsi e ruotare insieme faceva una
   stellina): aprendo prima si raccolgono al centro, poi ruotano; chiudendo il contrario. La
   linea di mezzo sparisce quando le altre due le sono sopra. */
.barra__menu span { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor;
  transition: rotate 160ms var(--ease-out-quart), translate 160ms var(--ease-out-quart) 160ms, opacity 0s linear 160ms; }
.barra__menu.aperto span { transition: translate 160ms var(--ease-out-quart), rotate 220ms var(--sito-molla) 160ms, opacity 0s linear 160ms; }
.barra__menu.aperto span:nth-child(1) { translate: 0 6px; rotate: 45deg; }
.barra__menu.aperto span:nth-child(2) { opacity: 0; }
.barra__menu.aperto span:nth-child(3) { translate: 0 -6px; rotate: -45deg; }
html.is-notte .barra__menu { color: var(--sito-notte-titolo); }
.menu-telefono { position: absolute; left: 0; right: 0; top: calc(100% + var(--space-2)); display: grid; gap: 2px; max-height: calc(100dvh - 96px); overflow-y: auto;
  padding: var(--space-2); border-radius: var(--sito-r-scheda); background: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-ink) 7%, transparent);
  box-shadow: var(--shadow-lg); animation: menu-telefono 220ms var(--ease-out-quart); }
.menu-telefono[hidden] { display: none; }
@keyframes menu-telefono { from { opacity: 0; transform: translateY(-6px); } }
.menu-telefono__voce { padding: 14px var(--space-4); border-radius: var(--radius-btn); font: 500 var(--text-lg)/1.2 var(--sito-font); color: var(--color-ink); }
.menu-telefono__voce:hover { background: var(--color-bg); color: var(--color-ink); }
.menu-telefono__agenti { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin: var(--space-1) 0; }
.menu-telefono .menu-agente { gap: var(--space-2); padding: var(--space-4); }
.menu-telefono .menu-agente .mascotte { width: 40px; height: 40px; }
.menu-telefono .menu-agente__testo span { display: none; }
.menu-telefono__accedi { margin-top: var(--space-1); border-top: 1px solid var(--color-border); border-radius: 0; color: var(--color-ink-soft); }
html.is-notte .menu-telefono { background: var(--sito-notte-scheda); border-color: var(--sito-notte-bordo); }
html.is-notte .menu-telefono__voce { color: var(--sito-notte-titolo); }
html.is-notte .menu-telefono__voce:hover { background: color-mix(in srgb, white 6%, transparent); }
html.is-notte .menu-telefono__accedi { border-top-color: var(--sito-notte-bordo); color: var(--sito-notte-testo); }
/* A menu aperto la pagina dietro è sfocata e non scorre: tutta l'attenzione sul menu (Mario,
   12 ottobre). Il velo copre anche la barra della demo; la barra alta gli sta sopra. */
html.menu-aperto { overflow: hidden; }
html.menu-aperto .barra { z-index: 50; }
.menu-telefono { overscroll-behavior: contain; }
.velo-menu { position: fixed; inset: 0; z-index: 45; background: color-mix(in srgb, var(--color-ink) 22%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity 240ms ease, visibility 0s linear 240ms; }
html.menu-aperto .velo-menu { opacity: 1; visibility: visible; transition: opacity 240ms ease; }
@media (min-width: 1100px) { .barra__menu, .menu-telefono, .velo-menu { display: none; } }
/* Col menu la barra fa posto: il bottone un po' più piccolo, le distanze strette */
@media (max-width: 1099px) {
  .barra__in { gap: var(--space-3); padding-left: var(--space-4); }
  .barra__dx { gap: var(--space-1); }
  .barra__dx .btn { height: 40px; padding-inline: var(--space-4); font-size: var(--text-sm); }
}
/* Sui telefoni stretti (sotto i 380 px) il marchio e il bottone si stringono ancora */
@media (max-width: 379px) {
  .barra__in { padding-left: var(--space-3); }
  .barra .marchio { gap: 8px; font-size: 1.2rem; }
  .barra .marchio__simbolo, .barra .marchio__simbolo img { width: 26px; height: 26px; }
  .barra__dx .btn { padding-inline: var(--space-3); }
  .barra__menu { width: 40px; }
}

/* ---- Sezioni ----------------------------------------------------------
   Titolo grande a sinistra, di un colore solo; il testo d'apertura sta sotto
   (Mario, 11 ottobre: a destra del titolo «genera confusione»). Niente
   occhiello in maiuscolo sopra e niente seconda riga grigia («sciapo e AI
   made»). */
.sez { padding: 96px var(--space-4) 0; }
.sez__testa { max-width: 1280px; margin: 0 auto; display: grid; justify-items: start; gap: var(--space-5); }
.sez h2 { margin: 0; font-size: var(--sito-titolo-2); line-height: 1; }
/* Il testo che apre una sezione: grande, perché chi legge ha cinquanta, sessant'anni */
.sez__lead { max-width: 640px; font-size: var(--text-lg); line-height: 1.5; color: var(--color-ink-soft); text-wrap: pretty; }
.sez__lead b { font-weight: 600; color: var(--color-ink); }
@media (min-width: 768px) { .sez { padding: 168px var(--space-7) 0; } }
/* Il problema: la manopola sta a destra del titolo (Mario: lì va bene) */
@media (min-width: 960px) { .sez__testa--lato { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }
/* Le pagine dedicate (Circe, Lypso, sicurezza, come si collega): il titolo della
   pagina è un h1, grande come quello della copertina */
.sez h1 { margin: 0; font-size: var(--sito-titolo-1); line-height: .96; letter-spacing: -0.042em; }
/* Il nome di un prodotto sopra il titolo (Smistant Base, Circe, Lypso) con il suo stato */
.nome-prodotto { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.nome-prodotto b { font: 600 clamp(1.5rem, 1.25rem + .8vw, 2rem)/1 var(--sito-font-titoli); letter-spacing: -0.03em; color: var(--color-ink); transition: color 400ms ease; }
/* Lo stato non ha colore (i colori sono dei settori e degli agenti): pieno quello
   che c'è oggi, tratteggiato quello in costruzione, come i gradini della scala */
.chip-stato { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 500;
  background: var(--color-ink); color: var(--color-surface); border: 1px solid transparent; }
.chip-stato::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip-stato--lavori { background: transparent; color: inherit; border: 1px dashed currentColor; }
/* La mascotte del settore accanto al nome dell'agente: è la sua icona */
.nome-prodotto .mascotte { width: 56px; height: 56px; }

/* =========================================================================
   1. Copertina — centrata (Mario, 11 ottobre: a sinistra non gli piace):
   titolo, sottotitolo, la chiamata, e sotto le parole chiave in piccoli
   riquadri. Poi il video del prodotto sul palco, con le pastiglie del video
   attaccate come adesivi (riferimento Superhuman Docs).
   ========================================================================= */
.copertina { padding: 128px var(--space-4) 0; }
.copertina__testa { max-width: 1280px; margin: 0 auto; display: grid; justify-items: center; gap: var(--space-6); text-align: center; }
/* Larga (Mario: «croppata al centro, un po' troppo»): una frase per riga */
.copertina h1 { margin: 0; font-size: var(--sito-titolo-1); line-height: .96; letter-spacing: -0.042em; }
.copertina__sotto { max-width: 78ch; font-size: var(--text-lg); line-height: 1.5; color: var(--color-ink-soft); text-wrap: balance; }
@media (max-width: 479px) { .copertina .btn--grande { width: 100%; } }
@media (min-width: 768px) { .copertina { padding: 168px var(--space-7) 0; } }
/* Le tre rassicurazioni (brief: si collega alla posta che usate, nessuna
   migrazione, dati in Europa). La spunta la mette home.js. Nella copertina e
   nella chiusura sono piccoli riquadri. */
.rassicura { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: var(--text-base); color: var(--color-ink-soft); }
.rassicura li { display: inline-flex; align-items: center; gap: var(--space-2); }
.rassicura .ico { width: 16px; height: 16px; color: var(--color-ink); stroke-width: 2.5; }
.rassicura--box { justify-content: center; gap: var(--space-2); }
.rassicura--box li { padding: 7px 14px; border-radius: var(--radius-pill); background: var(--color-surface); border: 1px solid var(--color-border-strong); color: var(--color-ink); }
/* Sul telefono la copertina non le ha: il video arriva subito sotto il bottone
   (Mario, 11 ottobre). Restano nella chiusura. */
@media (max-width: 767px) { .copertina .rassicura { display: none; } }
/* La leva dei 30 giorni gratuiti. Nella copertina solo la scritta, sotto la chiamata
   (Mario, 11 ottobre: la pastiglia lì no). Nella chiusura è il bollino (.trenta, in
   finale.css). Non è un prezzo. */
.copertina__leva { margin-top: calc(var(--space-6) * -1 + var(--space-3)); font: 600 var(--text-md)/1.3 var(--sito-font); color: var(--color-ink); }

/* La barra della demo, in basso (Mario, 12 ottobre). La crea
   home.js su tutte le pagine: compare superata la copertina e sparisce al modulo della
   demo. Il blu è quello dell'azione: la barra intera è la chiamata. Sul telefono resta
   solo il titolo, il bottone e la X. */
.barra-demo { position: fixed; z-index: 40; left: 50%; bottom: var(--space-4); width: min(880px, calc(100% - 2 * var(--space-4))); display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5); border-radius: 18px; background: var(--color-primary); color: var(--color-surface);
  box-shadow: 0 18px 40px -16px color-mix(in srgb, var(--color-primary) 70%, black);
  transform: translate(-50%, calc(100% + 40px)); opacity: 0; transition: transform 500ms var(--sito-molla), opacity 300ms ease; }
.barra-demo.su { transform: translate(-50%, 0); opacity: 1; }
.barra-demo__testo { flex: 1; min-width: 0; display: grid; gap: 2px; }
.barra-demo__testo b { font: 600 var(--text-md)/1.25 var(--sito-font); }
.barra-demo__testo span { font-size: var(--text-sm); line-height: 1.35; color: color-mix(in srgb, var(--color-surface) 78%, transparent); }
.barra-demo__vai { flex: none; height: 46px; gap: var(--space-3); padding-inline: var(--space-5) var(--space-3); font-size: var(--text-base); }
.barra-demo__facce { display: inline-flex; }
.barra-demo__facce .mascotte { width: 28px; height: 28px; border: 2px solid var(--color-surface); box-shadow: none; }
.barra-demo__facce .mascotte + .mascotte { margin-left: -9px; }
/* La X: due tratti, separata dal resto da un filo, come nel riferimento */
.barra-demo__chiudi { position: relative; flex: none; align-self: stretch; width: 44px; margin: calc(var(--space-3) * -1) calc(var(--space-3) * -1) calc(var(--space-3) * -1) 0;
  border: 0; border-left: 1px solid color-mix(in srgb, var(--color-surface) 25%, transparent); border-radius: 0 18px 18px 0; background: transparent; color: var(--color-surface); cursor: pointer; }
.barra-demo__chiudi::before, .barra-demo__chiudi::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; border-radius: 2px; background: currentColor; }
.barra-demo__chiudi::before { transform: rotate(45deg); }
.barra-demo__chiudi::after { transform: rotate(-45deg); }
.barra-demo__chiudi:hover { background: color-mix(in srgb, var(--color-surface) 10%, transparent); }
@media (max-width: 639px) {
  .barra-demo { gap: var(--space-3); padding-left: var(--space-4); }
  .barra-demo__testo span, .barra-demo__facce { display: none; }
  .barra-demo__testo b { font-size: var(--text-sm); }
  .barra-demo__vai { height: 40px; padding-inline: var(--space-4); font-size: var(--text-sm); }
}


/* Il palco: un campo scuro con la grana del sito. Largo fino a 16 px dal
   bordo, ma non oltre 1408: sugli schermi grandi gli adesivi restano vicini
   alla finestra. Serve anche alla chiamata finale. */
.palco { position: relative; isolation: isolate; margin: var(--space-8) calc(var(--space-4) * -1) 0; padding: var(--space-6) var(--space-3) var(--space-4);
  border-radius: 28px; background: var(--palco); color: var(--color-surface); }
.palco::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background-image: var(--sito-grana); opacity: .4; mix-blend-mode: soft-light; pointer-events: none; }
@media (min-width: 768px) {
  .palco { margin: 96px max(-16px, calc((100% - 1408px) / 2)) 0; padding: 104px var(--space-7) var(--space-6); border-radius: var(--sito-r-campo); }
}

/* Gli adesivi, storti, attaccati al palco (Mario, 12 ottobre: le pastiglie dell'app
   avevano colori fuori dalla palette). Dicono il sottotitolo coi dati del video; sono
   tessere bianche come quelle di «Come si collega», col segno su una tessera nei tre
   colori del sito a giro (per tutti, come le voci); la persona ha il segno tondo.
   Fermi: si muove solo il video (11 ottobre, leggerezza). Non coprono la finestra,
   perché lì dentro la telecamera del video si sposta: tre stanno nella fascia sopra,
   da 1200; gli altri tre ai lati, solo da 1440, dove c'è posto. L'ordine è quello di
   ADESIVI in js/video.js. */
.fluttua { display: none; }
@media (min-width: 1200px) {
  .fluttua { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
  .fluttua > * { position: absolute; transform: rotate(var(--g, 0deg)); }
  .fluttua > :nth-child(1) { left: 56px; top: 26px; --g: -6deg; }
  .fluttua > :nth-child(3) { left: 34%; top: 22px; --g: -2deg; }
  .fluttua > :nth-child(5) { right: 13%; top: 26px; --g: 3deg; }
  .fluttua > :nth-child(2), .fluttua > :nth-child(4), .fluttua > :nth-child(6) { display: none; }
}
@media (min-width: 1440px) {
  .fluttua > :nth-child(2), .fluttua > :nth-child(4), .fluttua > :nth-child(6) { display: flex; }
  .fluttua > :nth-child(2) { left: 30px; top: 40%; --g: 4deg; }
  .fluttua > :nth-child(4) { right: 20px; top: 31%; --g: 5deg; }
  .fluttua > :nth-child(6) { right: 30px; top: 64%; --g: -4deg; }
}
.adesivo { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-5) var(--space-2) var(--space-2); border-radius: var(--sito-r-barra);
  background: var(--color-surface); box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--color-ink) 60%, transparent); font-family: var(--sito-font); white-space: nowrap; }
.adesivo small { display: block; font-size: var(--text-sm); line-height: 1.2; color: var(--color-muted); }
.adesivo b { display: block; font-size: var(--text-md); font-weight: 600; line-height: 1.25; color: var(--color-ink); }
.adesivo__segno { --c: var(--campo-viola); position: relative; isolation: isolate; overflow: hidden; flex: none; display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: var(--radius-btn); background: var(--c); color: var(--color-ink); font: 600 var(--text-sm)/1 var(--sito-font); font-style: normal; }
.adesivo__segno::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--sito-grana); opacity: .5; mix-blend-mode: soft-light; }
.adesivo__segno--persona { border-radius: 50%; }
.adesivo__segno .ico { width: 22px; height: 22px; stroke-width: 1.8; }
.adesivo--verde .adesivo__segno { --c: var(--campo-verde); }
.adesivo--ambra .adesivo__segno { --c: var(--campo-ambra); }
/* Ai lati c'è posto solo per tessere strette: il segno sopra e il testo sotto, come le
   voci. I canali che entrano sono i loghi, nei loro colori, in due file. */
.fluttua > :nth-child(2n) { flex-direction: column; align-items: start; gap: var(--space-2); width: 150px; padding: var(--space-3); white-space: normal; text-wrap: balance; }
.adesivo--canali small { padding-left: 2px; }
.adesivo__loghi { display: grid; grid-template-columns: repeat(4, 26px); gap: 6px; }
.adesivo__loghi .logo { width: 26px; height: 26px; }

/* Pastiglia "a fumetto": bordo pieno, fondo chiaro, inchiostro della stessa tinta */
.past { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 var(--space-3); border-radius: var(--radius-btn);
  border: 1px solid var(--c, var(--color-border-strong)); background: color-mix(in oklch, var(--c, var(--color-border)) 10%, var(--color-surface));
  color: color-mix(in oklch, var(--c, var(--color-ink)) 80%, black); font: 500 var(--text-sm)/1 var(--font-sans); white-space: nowrap; box-shadow: var(--shadow-sm); }
.past .ico { width: 15px; height: 15px; }
.past .av { width: 20px; height: 20px; font-size: 9px; margin-right: -4px; }
.past--grigia { --c: var(--color-border-strong); color: var(--color-ink-soft); background: var(--color-surface); }

/* Il video: una finestra 16:9, dentro un palco 1280×720 che si scala */
.video { position: relative; isolation: isolate; max-width: 1120px; margin: 0 auto; }
@media (min-width: 1440px) { .palco .video { max-width: 1040px; } }
.video__finestra { position: relative; aspect-ratio: 16 / 9; border-radius: var(--sito-r-scheda); overflow: hidden; background: var(--color-surface);
  box-shadow: 0 48px 80px -48px color-mix(in srgb, var(--color-ink) 70%, transparent); }
/* Il filmato vero riempie la finestra: niente scala, ci pensa object-fit.
   Resta accanto a .video__palco perche' la V2 e la pagina agenti usano ancora
   l'animazione disegnata. */
/* Il bottone che avvia: grande, al centro della copertina. Sparisce mentre
   il video va, e torna in pausa e a fine video. */
.video__avvia { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 76px; height: 76px; border-radius: 50%; border: 0; cursor: pointer;
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  color: var(--color-primary); box-shadow: 0 10px 30px rgb(0 0 0 / .28);
  display: grid; place-items: center; transition: transform var(--motion-fast, .18s) ease, opacity var(--motion-fast, .18s) ease; }
.video__avvia:hover { transform: translate(-50%, -50%) scale(1.06); }
.video__avvia .ico { width: 28px; height: 28px; margin-left: 3px; }
.video__avvia[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .video__avvia { transition: none; } }

.video__filmato { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: var(--color-surface); }
.video__palco { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; transform-origin: 0 0; transform: scale(var(--k, 1));
  transition: filter 1.2s var(--ease-out-quart); }
.video__finestra.is-sfocato .video__palco { filter: blur(14px) saturate(.9); }
.video__comandi[hidden] { display: none; }
/* La barra di avanzamento. Il riempimento e' un gradiente comandato da --fatto,
   che il JS aggiorna: cosi' non servono pseudo-elementi diversi per ogni browser. */
.video__barra { flex: 1; min-width: 0; height: 4px; margin: 0; padding: 0; cursor: pointer;
  appearance: none; -webkit-appearance: none; border-radius: 999px; outline-offset: 4px;
  background: linear-gradient(to right, var(--color-primary) var(--fatto, 0%), color-mix(in srgb, var(--color-ink-soft) 28%, transparent) var(--fatto, 0%)); }
.video__barra::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 13px; height: 13px;
  border-radius: 50%; background: var(--color-primary); border: 2px solid var(--color-surface); box-shadow: 0 1px 4px rgb(0 0 0 / .3); }
.video__barra::-moz-range-thumb { width: 13px; height: 13px; border: 2px solid var(--color-surface);
  border-radius: 50%; background: var(--color-primary); box-shadow: 0 1px 4px rgb(0 0 0 / .3); }
.video__barra:disabled { cursor: default; opacity: .45; }
.video__barra:disabled::-webkit-slider-thumb { display: none; }
.video__ora { font-size: 12px; color: var(--color-ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.palco .video__ora { color: color-mix(in srgb, var(--color-surface) 75%, transparent); }
.video__comandi { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); padding: 0 var(--space-2); }
.video__pausa { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-ink-soft);
  display: grid; place-items: center; cursor: pointer; flex: none; }
.video__pausa:hover { color: var(--color-primary); border-color: var(--color-primary); }
.video__pausa .ico { width: 14px; height: 14px; }
/* La barra a capitoli (Mario, 12 ottobre: si deve poter tornare indietro). La costruisce
   js/film.js: un tratto per capitolo, largo quanto dura; il tratto in corso si riempie con
   film-tempo, quelli passati sono pieni. Clic, trascinamento, frecce. */
.video__tempo { flex: 1; min-width: 0; display: flex; gap: var(--space-2); touch-action: pan-y; }
/* La linea (4 px) all'altezza del centro del bottone di pausa (32 px) */
.tratto { flex: 1 1 0; min-width: 0; display: grid; gap: var(--space-2); padding: calc(var(--space-4) - 2px) 0 var(--space-1); border: 0; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer; }
.tratto__linea { display: block; height: 4px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-ink) 12%, transparent); overflow: hidden; }
.tratto__linea i { display: block; height: 100%; background: var(--color-ink-soft); transform: scaleX(0); transform-origin: left; }
.tratto__nome { font: 500 var(--text-sm)/1.2 var(--sito-font); color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tratto[aria-current] .tratto__nome { color: var(--color-ink); }
.tratto:focus-visible { outline: none; box-shadow: none; }
.tratto:focus-visible .tratto__linea { box-shadow: var(--focus-ring); }
/* Sul telefono i nomi non ci stanno: il sottotitolo dice dove si è */
@media (max-width: 767px) { .tratto__nome { display: none; } }
.video__comandi { align-items: flex-start; }
/* Il salto del motore: mentre il copione corre fino al punto scelto, niente transizioni né
   animazioni, così la scena è subito quella giusta */
.film-salto, .film-salto *, .film-salto *::before, .film-salto *::after { transition: none !important; animation: none !important; }
/* Il sottotitolo dei video (Mario, 12 ottobre): lo crea js/film.js sopra i comandi, se i capitoli
   hanno un testo. Sul palco è bianco, nel carattere dei titoli; cambia a ogni capitolo. */
.video__sottotitolo { max-width: 900px; margin: var(--space-5) auto 0; text-align: center; font: 600 clamp(1.25rem, 1rem + .6vw, 1.65rem)/1.25 var(--sito-font-titoli);
  letter-spacing: -0.02em; color: var(--color-ink); text-wrap: balance; opacity: 0; transform: translateY(6px); transition: opacity 260ms ease, transform 260ms var(--sito-molla); }
.video__sottotitolo.su { opacity: 1; transform: none; }
.palco .video__sottotitolo { color: var(--color-surface); }
/* Sul telefono va su due righe: l'altezza è fissa, così la barra sotto non salta */
@media (max-width: 767px) { .video__sottotitolo { min-height: 2.5em; } }
@media (prefers-reduced-motion: reduce) { .video__sottotitolo { transition: none; } }
/* Sul palco scuro i comandi sono bianchi */
.palco .video__pausa { background: transparent; border-color: color-mix(in srgb, var(--color-surface) 60%, transparent); color: var(--color-surface); }
.palco .video__pausa:hover { border-color: var(--color-surface); color: var(--color-surface); }
.palco .tratto__linea { background: color-mix(in srgb, var(--color-surface) 25%, transparent); }
.palco .tratto__linea i { background: var(--color-surface); }
.palco .tratto__nome { color: color-mix(in srgb, var(--color-surface) 60%, transparent); }
.palco .tratto[aria-current] .tratto__nome { color: var(--color-surface); }
/* L'avanzamento: lo fa partire e lo ferma js/film.js, insieme all'orologio del video */
@keyframes film-tempo { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* =========================================================================
   L'app vera, in piccolo. Classi condivise da video, settori e "com'è oggi".
   Carattere e stati come nell'app (frontend/src/styles).
   ========================================================================= */
.app { position: relative; width: 100%; height: 100%; background: var(--color-surface); font: 13px/1.4 var(--font-sans); color: var(--color-ink-soft); overflow: hidden; }
.app * { font-family: var(--font-sans); }
.av { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; color: var(--color-surface); font: 600 10.5px/1 var(--font-sans); flex: none; }

/* Barra in alto dell'app */
.app-top { height: 56px; display: flex; align-items: center; gap: var(--space-5); padding: 0 var(--space-5); border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.app-brand { font: 700 18px/1 var(--font-sans); letter-spacing: -0.025em; color: var(--color-ink); }
.app-brand span { font-style: italic; font-weight: 400; color: var(--color-accent); margin-left: .12em; }
.app-nav { display: flex; gap: var(--seg-gap); padding: var(--seg-track-pad); border-radius: var(--seg-track-radius); background: var(--seg-track-bg); border: var(--seg-track-border); }
.app-nav span { position: relative; width: 46px; height: 36px; border-radius: var(--seg-item-radius); display: grid; place-items: center; color: var(--seg-item-fg); border: 1px solid transparent; }
.app-nav span .ico { width: 21px; height: 21px; }
.app-nav span.on { background: var(--seg-item-active-bg); border-color: var(--seg-item-active-border); color: var(--seg-item-active-fg); }
.app-nav span.muta { opacity: .45; }
.app-nav .sep { display: block; width: 1px; margin: 6px 4px; background: var(--color-border); }
.av--mini { width: 18px; height: 18px; font-size: 8.5px; vertical-align: -4px; }
.app-nav b { position: absolute; top: 3px; right: 6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-pill); background: var(--color-primary);
  color: var(--color-surface); font-size: 10px; display: grid; place-items: center; transition: transform var(--motion-medium) var(--ease-out-expo); }
.app-nav b.pop { transform: scale(1.35); }
/* Messaggi e Centralino partono senza numero: il badge vuoto non si vede */
.app-nav b:empty { display: none; }
.app-top__dx { margin-left: auto; display: flex; align-items: center; gap: var(--space-4); color: var(--color-ink-soft); }
.app-top__dx .ico { width: 19px; height: 19px; }
.app-piu { display: flex; height: 34px; border-radius: var(--radius-btn); background: var(--color-primary); color: var(--color-surface); overflow: hidden; }
.app-piu i { display: grid; place-items: center; width: 34px; } .app-piu i + i { width: 24px; border-left: 1px solid color-mix(in oklch, var(--color-surface) 30%, transparent); }
.app-piu .ico { width: 16px; height: 16px; }

/* Corpo della Posta: caselle | lista | lettore | pannello */
.app-corpo { position: absolute; top: 56px; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 196px 344px 1fr 262px; }
.app-caselle { background: var(--color-bg); border-right: 1px solid var(--color-border); padding: var(--space-3) var(--space-2); }
.app-caselle h6 { margin: 0 0 var(--space-2); padding: 0 var(--space-2); font: 600 11px/1 var(--font-sans); color: var(--color-muted); letter-spacing: .04em; text-transform: uppercase; }
.casella { display: flex; align-items: center; gap: var(--space-2); padding: 7px var(--space-2); border-radius: var(--menu-item-radius); color: var(--color-ink-soft); }
.casella .logo, .casella .ico { width: 16px; height: 16px; }
.casella.on { background: var(--menu-item-active-bg); color: var(--menu-item-active-fg); font-weight: 600; }
.casella small { display: block; font-size: 11px; font-weight: 400; color: var(--color-muted); }
.app-caselle hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-2) var(--space-2); }

.app-lista { border-right: 1px solid var(--color-border); overflow: hidden; display: flex; flex-direction: column; }
.app-lista__cerca { display: flex; gap: var(--space-2); padding: var(--space-3); border-bottom: 1px solid var(--color-border); }
.campo { flex: 1; height: 32px; display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); border-radius: var(--radius-lg); background: var(--color-bg); color: var(--color-muted-soft); }
.campo .ico { width: 15px; height: 15px; }
.app-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--space-3); border-radius: var(--radius-btn); border: 1px solid var(--color-border); color: var(--color-ink-soft); background: var(--color-surface); white-space: nowrap; }
.app-btn .ico { width: 15px; height: 15px; }
.fascia-data { padding: var(--space-3) var(--space-4) var(--space-1); font: 600 11px/1 var(--font-sans); color: var(--color-muted); }
.app-righe { position: relative; }

/* Riga della Posta, con gli stati veri: da leggere celeste, gestita bianca
   con la spunta, selezionata blu pieno. Nessun hover: il colore è lo stato. */
.riga { padding: 9px var(--space-4) 10px; border-bottom: 1px solid var(--color-border); background: var(--color-surface); overflow: hidden;
  transition: background var(--motion-medium) var(--ease-out-quart), color var(--motion-medium) var(--ease-out-quart); }
.riga__su, .riga__giu { display: flex; align-items: center; gap: var(--space-2); }
.riga__chi { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.riga__ora { font-size: 11.5px; color: var(--color-muted); }
.riga__ogg { color: var(--color-ink); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.riga__ant { flex: 1; min-width: 0; color: var(--color-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.riga__ind { display: flex; align-items: center; gap: 6px; color: var(--color-muted); }
.riga__ind .ind { width: 13px; height: 13px; }
.ind-ok { width: 17px; height: 17px; border-radius: 50%; background: var(--color-success-soft); color: var(--color-success); display: grid; place-items: center; }
.ind-ok .ico { width: 11px; height: 11px; stroke-width: 3; }
.riga--leggere { background: var(--color-unread-bg); }
.riga--leggere .riga__chi, .riga--leggere .riga__ogg { font-weight: 700; }
.riga--sel { background: var(--color-primary); }
.riga--sel .riga__chi, .riga--sel .riga__ogg, .riga--sel .riga__ora, .riga--sel .riga__ant, .riga--sel .riga__ind { color: var(--color-surface); }
.riga--sel .ind-ok { background: color-mix(in oklch, var(--color-surface) 25%, transparent); color: var(--color-surface); }

/* Lettore */
.app-lettore { position: relative; overflow: hidden; display: flex; flex-direction: column; }
.lettore-barra { height: 48px; display: flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-4); border-bottom: 1px solid var(--color-border); color: var(--color-ink-soft); }
.lettore-barra .ico { width: 17px; height: 17px; }
.lettore-barra .tasto { width: 30px; height: 30px; border-radius: var(--radius-lg); display: grid; place-items: center; transition: background var(--motion-medium), color var(--motion-medium); }
.lettore-barra .tasto.ok { background: var(--color-success-soft); color: var(--color-success); }
.lettore-barra .spazio { flex: 1; }
.chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: var(--radius-pill); font: 600 11.5px/1 var(--font-sans);
  background: color-mix(in oklch, var(--c) 12%, var(--color-surface)); color: color-mix(in oklch, var(--c) 80%, black); }
.chip--vuota { --c: var(--color-muted); }
.chip .ico { width: 12px; height: 12px; }
.chip--riga { height: 20px; padding: 0 7px; font-size: 10.5px; }
.lettore-testo { flex: 1; padding: var(--space-5) var(--space-6); overflow: hidden; }
.lettore-testo h4 { margin: 0; font: 700 19px/1.25 var(--font-sans); color: var(--color-ink); letter-spacing: -0.01em; }
.meta { margin-top: var(--space-2); font-size: 12px; color: var(--color-muted); display: grid; gap: 2px; }
.meta b { color: var(--color-ink-soft); font-weight: 600; }
.box-ai { margin-top: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-3); background: var(--color-surface); }
.box-ai__testa { display: flex; align-items: center; gap: var(--space-2); }
.btn-ai { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 var(--space-3); border-radius: var(--radius-btn); background: var(--color-primary-soft);
  color: var(--color-primary-ink); font-weight: 600; transition: transform var(--motion-fast) var(--ease-out-quart), background var(--motion-medium); }
.btn-ai .ico { width: 15px; height: 15px; }
.btn-ai.premuto { transform: scale(.95); }
.box-ai__esito { margin-top: var(--space-2); color: var(--color-ink-soft); line-height: 1.55; min-height: 0; }
.box-ai__esito b { color: var(--color-ink); }
.attesa { display: inline-flex; gap: 6px; align-items: center; color: var(--color-muted); }
.attesa::after { content: ""; width: 60px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--color-bg) 0, var(--color-primary-soft) 50%, var(--color-bg) 100%); background-size: 200% 100%; animation: luccica 1s linear infinite; }
@keyframes luccica { to { background-position: -200% 0; } }
.messaggio { margin-top: var(--space-4); line-height: 1.6; color: var(--color-ink-soft); }
.lettore-piede { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-6) var(--space-4); }
.pill-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--space-4); border-radius: var(--radius-pill); border: 1px solid var(--color-border-strong); color: var(--color-ink-soft); background: var(--color-surface); }
.pill-btn .ico { width: 15px; height: 15px; }

/* Finestra di scrittura con l'Assistente */
.scrivi { position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg); transform: translateY(110%); transition: transform 700ms var(--sito-molla); overflow: hidden; }
.scrivi.su { transform: none; }
.assistente { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: color-mix(in oklch, var(--color-primary-soft) 55%, var(--color-surface)); color: var(--color-primary-ink); font-weight: 600; }
.assistente .ico { width: 15px; height: 15px; }
.assistente small { margin-left: auto; font-weight: 500; color: var(--color-primary-ink); }
.stesura { display: inline-flex; height: 20px; align-items: center; padding: 0 8px; border-radius: var(--radius-pill); background: var(--color-surface); font-size: 11px; }
.scrivi__testo { padding: var(--space-3) var(--space-4); min-height: 112px; line-height: 1.6; color: var(--color-ink); }
.scrivi__piede { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-top: 1px solid var(--color-border); }
.invia { display: flex; height: 32px; border-radius: var(--radius-btn); background: var(--color-primary); color: var(--color-surface); font-weight: 600; overflow: hidden; transition: transform var(--motion-fast); }
.invia i { display: flex; align-items: center; gap: 6px; padding: 0 var(--space-3); font-style: normal; } .invia i + i { padding: 0 7px; border-left: 1px solid color-mix(in oklch, var(--color-surface) 30%, transparent); }
.invia .ico { width: 15px; height: 15px; }
.invia.premuto { transform: scale(.95); }
.cursore-testo { display: inline-block; width: 2px; height: 1em; margin-left: 1px; vertical-align: -2px; background: var(--color-primary); animation: lampeggia 1s steps(1) infinite; }
@keyframes lampeggia { 50% { opacity: 0; } }

/* Pannello destro: Chat, Note, Incarichi, Letti, Pratiche */
.app-pannello { border-left: 1px solid var(--color-border); background: var(--color-surface); display: flex; flex-direction: column; }
.schede-pan { display: flex; flex-wrap: wrap; gap: 4px; padding: var(--space-3); border-bottom: 1px solid var(--color-border); }
.schede-pan span { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border-radius: var(--radius-pill); color: var(--color-muted); font-size: 11.5px; transition: background var(--motion-medium), color var(--motion-medium); }
.schede-pan span .ico { width: 13px; height: 13px; }
.schede-pan span.on { background: var(--menu-item-active-bg); color: var(--menu-item-active-fg); font-weight: 600; }
.pan-corpo { position: relative; flex: 1; padding: var(--space-4); }
.pan-vista { position: absolute; inset: var(--space-4); opacity: 0; transform: translateY(8px); transition: opacity var(--motion-medium), transform var(--motion-slow) var(--ease-out-quart); }
.pan-vista.on { opacity: 1; transform: none; }
.etichetta { font: 600 11px/1 var(--font-sans); color: var(--color-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--space-2); }
.lettori { display: flex; gap: 4px; margin-bottom: var(--space-4); }
.gestore { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-lg); border: 1px dashed var(--color-border-strong); color: var(--color-muted); transition: all var(--motion-medium); }
.gestore.fatto { border-style: solid; border-color: var(--color-border); color: var(--color-ink); font-weight: 600; }
.gestore .ico { width: 16px; height: 16px; }
.scelta { margin-top: var(--space-2); border: var(--popover-border); border-radius: var(--popover-radius); box-shadow: var(--popover-shadow); padding: var(--popover-pad); background: var(--popover-bg);
  opacity: 0; transform: translateY(-4px); transition: opacity var(--motion-medium), transform var(--motion-medium); }
.scelta.su { opacity: 1; transform: none; }
.scelta div { display: flex; align-items: center; gap: var(--space-2); padding: var(--menu-item-pad); border-radius: var(--menu-item-radius); color: var(--color-ink); }
.scelta div.on { background: var(--menu-item-active-bg); }
.scelta .av { width: 22px; height: 22px; font-size: 9.5px; }
.mini-pratica { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-3); }
.mini-pratica h5 { margin: 0 0 var(--space-2); font: 700 14px/1.3 var(--font-sans); color: var(--color-ink); }
.dati { display: grid; grid-template-columns: auto 1fr; gap: 5px var(--space-3); font-size: 12px; }
.dati dt { color: var(--color-muted); } .dati dd { margin: 0; color: var(--color-ink); display: flex; align-items: center; gap: 6px; }
.scad { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600;
  background: var(--color-warn-soft); color: var(--color-warn-ink); }
.scad--grigia { background: var(--color-bg-muted); color: var(--color-ink-soft); }
.scad--rossa { background: var(--color-error-soft); color: var(--color-error-ink); }
.incarico { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.incarico div { flex: 1; min-width: 0; }
.incarico b { display: block; color: var(--color-ink); font-weight: 600; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.incarico small { display: flex; align-items: center; gap: 6px; margin-top: 3px; color: var(--color-muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.incarico .scad { flex: none; }
/* Pillole azione degli incarichi: i quattro colori dell'app */
.azione { flex: none; white-space: nowrap; display: inline-flex; align-items: center; height: 19px; padding: 0 7px; border-radius: var(--radius-pill); font-size: 10.5px; font-weight: 600; transition: all var(--motion-medium); }
.azione--rispondere { background: var(--color-primary-soft); color: var(--color-primary-ink); }
.azione--leggere { background: var(--color-warn-soft); color: var(--color-warn-ink); }
.azione--fare { background: var(--color-neutral-accent-soft); color: var(--color-neutral-accent-ink); }
.azione--fatto { background: var(--color-success-soft); color: var(--color-success-ink); }
.btn-agg { display: inline-flex; align-items: center; gap: 6px; color: var(--color-primary); font-weight: 600; margin-top: var(--space-3); }
.btn-agg .ico { width: 14px; height: 14px; }

/* Elementi del video: cursore, fumetti di spiegazione, avviso */
.camera { position: absolute; inset: 0; transform-origin: 0 0; transition: transform 1.3s cubic-bezier(.45, 0, .2, 1); }
.cursore { position: absolute; z-index: 9; left: 0; top: 0; width: 22px; height: 24px; transition: transform 900ms cubic-bezier(.45, 0, .2, 1), opacity var(--motion-medium); pointer-events: none; }
.cursore path { fill: var(--color-ink); stroke: var(--color-surface); stroke-width: 1.6; stroke-linejoin: round; }
.cursore.clic::after { content: ""; position: absolute; left: -10px; top: -10px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--color-primary); animation: clic .5s ease-out forwards; }
@keyframes clic { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.fumetto { position: absolute; z-index: 8; transform: translateY(6px) scale(.96); opacity: 0; transition: opacity var(--motion-slow), transform var(--motion-slow) var(--sito-molla); }
.fumetto.su { opacity: 1; transform: none; }
.fumetto .past { height: 34px; font-size: 13px; box-shadow: var(--shadow-lg); }
.avviso { position: absolute; z-index: 8; left: 779px; top: 118px; transform: translate(-50%, -12px); opacity: 0; display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); background: var(--color-success-soft); color: var(--color-success-ink); font-weight: 600; box-shadow: var(--shadow-lg);
  transition: opacity var(--motion-slow), transform var(--motion-slow) var(--sito-molla); }
.avviso.su { opacity: 1; transform: translate(-50%, 0); }
.avviso .ico { width: 16px; height: 16px; }

/* =========================================================================
   2. Il problema — riferimento FintechX: la manopola passa da «com'è oggi» a
   «con Smistant». Oggi è grigio e in disordine; con Smistant è lo scuro di
   Smistant (lo stesso del palco) e le cose stanno in fila.
   ========================================================================= */
.interruttore { display: flex; align-items: center; gap: var(--space-2); }
@media (min-width: 600px) { .interruttore { gap: var(--space-4); } }
/* Le due voci si colorano come il riquadro sotto: grigio oggi, scuro con Smistant */
.interruttore__voce { white-space: nowrap; border: 0; background: none; font: 500 1.25rem/1 var(--sito-font-titoli); color: var(--color-muted); cursor: pointer;
  padding: 12px 18px; border-radius: var(--radius-btn); transition: background 400ms ease, color 400ms ease; }
.interruttore__voce.is-on { color: var(--color-ink); }
.interruttore__voce--oggi.is-on { background: var(--sito-fondo-grigio); }
.interruttore__voce--dopo.is-on { background: var(--palco); color: var(--color-surface); }
.manopola { position: relative; width: 72px; height: 72px; border-radius: 50%; border: 2px solid var(--color-ink); background: var(--color-surface); cursor: pointer; flex: none; }
/* Disegno piatto, come un'icona: anello, tacche, lancetta, perno */
.manopola::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 2px dotted color-mix(in srgb, var(--color-ink) 30%, transparent); }
.manopola::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--color-ink); }
.manopola i { position: absolute; left: 50%; top: 50%; width: 4px; height: 24px; margin: -24px 0 0 -2px; border-radius: 2px; background: var(--color-primary);
  transform-origin: 2px 24px; transform: rotate(-90deg); transition: transform 700ms var(--sito-molla); }
/* La lancetta guarda la voce accesa: tutta a sinistra o tutta a destra */
.manopola.dopo i { transform: rotate(90deg); }
/* Sul telefono voci e manopola un po' più piccole, se no non ci stanno in riga */
@media (max-width: 599px) {
  .interruttore__voce { padding: 10px; font-size: 1.0625rem; }
  .manopola { width: 60px; height: 60px; }
  .manopola i { height: 20px; margin-top: -20px; transform-origin: 2px 20px; }
}
.manopola:hover { border-color: var(--color-primary); }
.confronto { position: relative; max-width: 1280px; margin: var(--space-8) auto 0; display: grid; }
/* Finché la manopola sta sotto il titolo: centrata e attaccata al riquadro che
   comanda (Mario, 11 ottobre) */
@media (max-width: 959px) {
  .sez__testa--lato .interruttore { justify-self: center; margin-top: var(--space-6); }
  .sez__testa--lato + .confronto { margin-top: var(--space-4); }
}
.stato { grid-area: 1 / 1; display: grid; gap: var(--space-7); padding: var(--space-6) var(--space-5); border-radius: var(--sito-r-campo); text-align: left;
  transition: opacity 500ms var(--ease-out-quart), transform 600ms var(--sito-molla); }
.stato h3 { font-size: var(--sito-titolo-3); line-height: 1.05; }
.stato--oggi { background: var(--sito-fondo-grigio); }
.stato--dopo { background: var(--palco); color: var(--sito-notte-testo); opacity: 0; transform: translateY(16px); pointer-events: none; }
.stato--dopo h3 { color: var(--sito-notte-titolo); }
.confronto.dopo .stato--oggi { opacity: 0; transform: translateY(-16px); pointer-events: none; }
.confronto.dopo .stato--dopo { opacity: 1; transform: none; pointer-events: auto; }
.elenco { list-style: none; padding: 0; margin: var(--space-5) 0 0; display: grid; gap: var(--space-4); }
.elenco li { position: relative; padding-left: 40px; font-size: var(--text-lg); line-height: 1.45; }
/* Il pallino al centro ottico della prima riga (Mario, 12 ottobre: stavano più in alto del testo) */
.elenco li::before { position: absolute; left: 0; top: calc(var(--text-lg) * 0.764 - 13px); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
/* Le cose che oggi non vanno: un cerchio rosso pieno con la X bianca disegnata (Mario, 12 ottobre:
   sul rosa chiaro la X si leggeva poco). Il rosso è lo stato d'errore dell'app: dice una cosa. */
.elenco--no li::before { content: ""; background: var(--color-error); }
.elenco--no li::after { content: ""; position: absolute; left: 0; top: calc(var(--text-lg) * 0.764 - 13px); width: 26px; height: 26px; background: var(--color-surface);
  -webkit-mask: var(--sito-croce) center / 13px no-repeat; mask: var(--sito-croce) center / 13px no-repeat; }
.elenco--si li::before { content: "✓"; background: var(--color-surface); color: var(--color-ink); }
/* Le righe di Circe e Lypso: in costruzione, col pallino tratteggiato come i gradini della scala */
.elenco--si li.elenco__domani::before { background: transparent; border: 1.5px dashed currentColor; color: inherit; }
.elenco .chip-stato { margin-left: 6px; padding: 2px 10px; vertical-align: 2px; font-size: var(--text-xs); }
.stato__lato { display: grid; gap: var(--space-3); align-content: center; }
/* I foglietti si sovrappongono: un bordino e un'ombra leggera li staccano l'uno dall'altro
   (Mario, 12 ottobre: «leggera, non una tamarrata») */
.tessera { padding: var(--space-4) var(--space-5); border-radius: var(--radius-btn); background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-ink) 9%, transparent); box-shadow: var(--shadow); }
.tessera b { display: block; color: var(--color-ink); font-weight: 600; }
.tessera small { color: var(--color-muted); }
.sparse { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-2); }
.sparse span { font-size: var(--text-sm); padding: 3px 10px; border-radius: var(--radius-pill); background: var(--color-bg); color: var(--color-ink-soft); }
.sparse span:nth-child(2n) { transform: rotate(-2deg); } .sparse span:nth-child(3n) { transform: rotate(2deg); }
/* I foglietti di oggi: storti, come appunti sparsi; con Smistant stanno dritti */
.stato--oggi .tessera:nth-child(1) { transform: rotate(-2.5deg); }
.stato--oggi .tessera:nth-child(2) { transform: rotate(1.5deg); }
.stato--oggi .tessera:nth-child(3) { transform: rotate(-1deg); }
.stato--dopo .foglio { box-shadow: var(--shadow); }
@media (min-width: 860px) {
  .stato { grid-template-columns: 1.2fr 1fr; padding: var(--space-8); }
  .stato--oggi .tessera:nth-child(2) { transform: rotate(1.5deg) translateX(28px); }
  .stato--oggi .tessera:nth-child(3) { transform: rotate(-1deg) translateX(-10px); }
}

/* =========================================================================
   4. Per chi — riferimento Sunbeam: le schede che si allargano al passaggio,
   ognuna su un campo di colore pieno (agenzie blu, hotel verde, gruppi
   ambra) con la sua mascotte. Ogni scheda porta all'agente del suo settore.
   Il campo di ogni scheda (--campo) lo mette home.js.
   ========================================================================= */
.settori__box { --settore-testo: 276px; --settore-pannello: 400px; max-width: 1280px; margin: var(--space-8) auto 0; }
/* Sotto i 1440 la colonna del testo si stringe: altrimenti nella scheda aperta il pannello
   resta stretto, oltre 100 px meno delle carte (misurato a 1280, 12 ottobre) */
@media (max-width: 1439px) { .settori__box { --settore-testo: 240px; } }
/* …e le schede si alzano, perché nel testo più stretto il bottone non esca dal fondo */
@media (min-width: 900px) and (max-width: 1439px) { .settori__box .settori__schede { height: 560px; } }
.settori__schede { display: grid; gap: var(--space-3); }
.settore { position: relative; display: flex; flex-direction: column; min-width: 0; padding: var(--space-3); border-radius: var(--sito-r-campo); background: var(--campo);
  text-align: left; cursor: pointer; overflow: hidden; }
.settore__sx { position: relative; display: flex; flex-direction: column; min-width: 0; padding: var(--space-4); }
.mascotte { position: relative; display: block; width: 104px; height: 104px; border-radius: 50%; background: var(--color-surface); overflow: hidden; flex: none; }
.mascotte::after { content: ""; position: absolute; inset: 0; background-image: var(--sito-grana); opacity: .3; }
.mascotte svg { width: 100%; height: 100%; display: block; }
.settore__testo { margin-top: auto; padding-top: var(--space-7); }
/* Ogni scheda dice di quale agente parla, e che è in costruzione (Mario, 12 ottobre) */
.settore__agente { margin-bottom: var(--space-3); color: var(--color-ink); }
.settore h3 { font-size: clamp(1.6rem, 1.3rem + .7vw, 2rem); line-height: 1.05; }
.settore p { margin-top: var(--space-2); font-size: var(--text-md); line-height: 1.5; color: var(--color-ink); }
/* Il bottone verso l'agente del settore: porterà alla sua pagina dedicata */
.settore__link { align-self: flex-start; margin-top: var(--space-5); height: 46px; padding-inline: var(--space-5); font-size: var(--text-base); }
.pannello { position: relative; border-radius: calc(var(--sito-r-campo) - var(--space-3)); overflow: hidden; background: color-mix(in srgb, var(--color-surface) 45%, transparent); isolation: isolate; }
.pannello::after { content: ""; position: absolute; inset: 0; z-index: 3; background-image: var(--sito-grana); opacity: .3; pointer-events: none; }
.pannello__pila { position: absolute; inset: 0; z-index: 2; }
.carta { position: absolute; background: var(--color-surface); border-radius: var(--radius-btn); box-shadow: var(--shadow-lg); padding: var(--space-3); font: 12px/1.4 var(--font-sans); color: var(--color-ink-soft);
  transform: rotate(var(--r, 0deg)); transition: transform 800ms var(--sito-molla), opacity 500ms; }
.carta .riga { border: 0; padding: 0; background: transparent; }
.pannello.entra .carta { opacity: 0; transform: translateY(26px) rotate(var(--r, 0deg)); }

/* Su telefono le schede sono una fisarmonica (Mario, 11 ottobre): chiusa si vede
   solo la testa (mascotte, nome, il più); aperta il testo, il bottone e sotto il
   pannello. Parte aperta la prima. */
.settore__segno { display: none; }
.settore .pannello { height: 0; opacity: 0; transition: height 560ms var(--sito-molla), margin-top 560ms var(--sito-molla), opacity 400ms ease; }
/* 380 px: la tabella dei fornitori non deve finire sotto la carta dopo */
.settore.on .pannello { height: 380px; margin-top: var(--space-2); opacity: 1; }
@media (max-width: 899px) {
  .settore__sx { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-4); padding: var(--space-3); }
  .settore__testo { display: contents; }
  .settore .mascotte { width: 56px; height: 56px; }
  .settore h3 { grid-area: 1 / 2; font-size: var(--text-xl); }
  .settore p, .settore__link { grid-column: 1 / -1; }
  .settore__link { justify-self: start; }
  .settore p { margin-top: var(--space-5); }
  /* Chiusa, il testo si ripiega invece di sparire di colpo: l'apertura scorre (Mario, 12 ottobre) */
  .settore p, .settore__link, .settore__agente { overflow: hidden;
    transition: max-height 560ms var(--sito-molla), margin-top 560ms var(--sito-molla), opacity 350ms ease 120ms, visibility 0s linear 0s; }
  .settore:not(.on) p, .settore:not(.on) .settore__link, .settore:not(.on) .settore__agente { max-height: 0; margin-top: 0; opacity: 0; visibility: hidden;
    transition: max-height 560ms var(--sito-molla), margin-top 560ms var(--sito-molla), opacity 200ms ease, visibility 0s linear 560ms; }
  .settore.on p { max-height: 14em; }
  .settore.on .settore__link { max-height: 46px; }
  .settore.on .settore__agente { max-height: 40px; }
  .settore__agente { grid-column: 1 / -1; justify-self: start; margin: var(--space-5) 0 0; }
  .settore__agente + h3 + p { margin-top: var(--space-3); }
  /* Il più che diventa meno, come nelle domande frequenti */
  .settore__segno { display: block; grid-area: 1 / 3; position: relative; width: 36px; height: 36px; border-radius: 50%; background: var(--color-surface); color: var(--color-ink); }
  .settore__segno::before, .settore__segno::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 2px;
    background: currentColor; transition: transform var(--motion-slow) var(--sito-molla); }
  .settore__segno::after { transform: rotate(90deg); }
  .settore.on .settore__segno::after { transform: rotate(0deg); }
}
/* Da tavolo il testo ha SEMPRE la stessa larghezza, quindi non va mai a capo
   in modo diverso: la scheda aperta si allarga e scopre il pannello. Il pannello
   arriva sempre fino al bordo destro della scheda, col margine minimo che ha
   sopra e sotto (Mario, 13 ottobre: prima era largo 400 px fissi, e a seconda
   dello schermo avanzava spazio a destra o veniva tagliato). Le carte invece
   sono composte su almeno 400 px, ferme a sinistra: mentre la scheda si apre il
   pannello cresce e le scopre senza spostarle. */
@media (min-width: 900px) {
  .settori__schede { display: flex; height: 500px; }
  .settore { flex: 0 0 calc(var(--settore-testo) + var(--space-5)); flex-direction: row; gap: var(--space-4);
    transition: flex-grow var(--sito-allarga) var(--sito-molla); }
  .settore.on { flex-grow: 1; }
  .settore__sx { flex: 0 0 var(--settore-testo); width: var(--settore-testo); }
  .settore .pannello, .settore.on .pannello { flex: 1 1 0; min-width: 0; height: auto; margin: 0; }
  .settore .pannello__pila { right: auto; width: max(var(--settore-pannello), 100%); }
  .settore .pannello { opacity: 0; transition: opacity 300ms; }
  .settore.on .pannello { opacity: 1; transition: opacity 500ms 150ms; }
}

/* =========================================================================
   5. I canali — la fascia dei loghi direttamente sul bianco (riferimento
   Granola: tessere che crescono verso il centro come un dock, si trascinano e
   scorrono da sole, piano). Sotto, la PEC sullo scuro di Smistant, con un
   pezzo dell'app vera.
   ========================================================================= */
.fascia { position: relative; max-width: 1408px; margin: var(--space-8) auto 0; }
.fascia__nota { margin: var(--space-4) auto 0; max-width: 640px; text-align: center; font-size: var(--text-lg); line-height: 1.5; color: var(--color-ink-soft); text-wrap: pretty; }
/* In home la nota sta su due righe da tavolo, la prima un po' più lunga della seconda
   (Mario, 12 ottobre: né uguali né una lunga e una corta, una via di mezzo) */
.fascia__nota--larga { max-width: 820px; }
.fascia__binario { position: relative; height: 170px; overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.fascia__binario.tieni { cursor: grabbing; }
.tess { position: absolute; top: 50%; left: 0; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: var(--sito-r-tessera); background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-ink) 8%, transparent); display: grid; place-items: center; will-change: transform; box-shadow: var(--shadow); }
.tess .logo { width: 50px; height: 50px; }
/* Nella home i canali hanno il titolo al centro, come la fascia (Mario, 11 ottobre).
   Sotto, il richiamo al centralino AI: una fascia scura (scuro = Smistant), col
   logo del telefono, una riga e il bottone verso la sua pagina. */
.sez__testa--centro { justify-items: center; text-align: center; }
/* Sotto la nota, il bottone verso «Come si collega», dove c'è lo snodo (Mario, 12 ottobre) */
.fascia__vai { display: flex; justify-content: center; margin-top: var(--space-5); }
/* Il richiamo: compatto, con l'icona verde del telefono, la stessa dei canali qui
   sopra (Mario, 11 ottobre: la cornetta bianca grande era troppo, e per coerenza
   l'icona è quella dei canali). */
.richiamo { position: relative; isolation: isolate; max-width: 1080px; margin: var(--space-8) auto 0; display: grid; justify-items: center; gap: var(--space-4);
  padding: var(--space-6) var(--space-5); border-radius: var(--sito-r-scheda); background: var(--palco); color: var(--sito-notte-testo); text-align: center; }
.richiamo::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background-image: var(--sito-grana); opacity: .4; mix-blend-mode: soft-light; pointer-events: none; }
.richiamo h3 { font-size: var(--text-2xl); line-height: 1.1; color: var(--sito-notte-titolo); }
.richiamo p { margin-top: var(--space-2); max-width: 54ch; font-size: var(--text-md); line-height: 1.5; text-wrap: pretty; }
.richiamo__logo { width: 64px; height: 64px; }
@media (min-width: 860px) {
  .richiamo { grid-template-columns: auto minmax(0, 1fr) auto; justify-items: start; align-items: center; column-gap: var(--space-6);
    padding: var(--space-6) var(--space-7) var(--space-6) var(--space-6); text-align: left; }
}

/* La PEC: sullo scuro, testo a sinistra e la finestra dell'app a destra */
.pec { max-width: 1280px; margin: var(--space-8) auto 0; display: grid; gap: var(--space-6); align-items: center; padding: var(--space-6) var(--space-5);
  border-radius: var(--sito-r-campo); background: var(--palco); color: var(--sito-notte-testo); }
.pec > * { min-width: 0; }
.pec h3, .pec .pec__forte { color: var(--sito-notte-titolo); }
.pec h3 { font-size: var(--sito-titolo-3); line-height: 1.05; }
.pec p { margin-top: var(--space-3); font-size: var(--text-lg); line-height: 1.5; max-width: 44ch; }
.pec .pec__forte { font-weight: 600; }
@media (min-width: 900px) { .pec { grid-template-columns: 1fr 1.05fr; gap: var(--space-8); padding: var(--space-8) var(--space-8) var(--space-8) var(--space-9); } }
.pec-finestra { background: var(--color-surface); border-radius: var(--radius-btn); box-shadow: 0 32px 60px -32px color-mix(in srgb, var(--color-ink) 55%, transparent); overflow: hidden; font: 13px/1.4 var(--font-sans); color: var(--color-ink-soft); }
.pec-finestra .casella { padding: 12px 16px; border-bottom: 1px solid var(--color-border); border-radius: 0; }
.pec-finestra .casella b { color: var(--color-ink); }
.badge-pec { display: inline-flex; align-items: center; height: 14px; padding: 0 5px; border-radius: 3px; background: var(--color-success); color: var(--color-surface); font-size: 9px; font-weight: 700; }
.pec-finestra__etichetta { padding: 8px 16px; font: 600 11px/1 var(--font-sans); color: var(--color-muted); text-transform: uppercase; letter-spacing: .05em; background: var(--color-bg); }
.pec-msg { padding: 12px 16px; border-bottom: 1px solid var(--color-border); }
.pec-msg:last-child { border-bottom: 0; }
.pec-msg__su { display: flex; justify-content: space-between; gap: var(--space-2); }
.pec-msg__su b { color: var(--color-ink); font-weight: 600; } .pec-msg__su small { color: var(--color-muted); font-size: 12px; }
.pec-msg__ogg { margin-top: 3px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* Le etichette PEC dell'app (inbox.css, §CA-03): fondo -soft, inchiostro della stessa tinta */
.pec-chip { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 9px; font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap; border: 1px solid transparent; }
.pec-chip--ok { background: var(--color-success-soft); color: var(--color-success-ink); border-color: color-mix(in oklch, var(--color-success) 30%, white); }
.pec-chip--warn { background: var(--color-warn-soft); color: var(--color-warn-ink); border-color: color-mix(in oklch, var(--color-warn) 30%, white); }

/* =========================================================================
   6. Smistant Base, com'è oggi — riferimento Wispr Flow: a sinistra la
   scheda resta e cambia (con lo "scatto" verso sinistra), a destra le voci
   scorrono e si accendono. Smistant Base è per tutti: la scheda passa per i
   colori dei tre settori (viola, verde, ambra), uno per voce (home.js).
   ========================================================================= */
.oggi__corpo { max-width: 1280px; margin: var(--space-8) auto 0; }
@media (min-width: 900px) { .oggi__corpo { margin-top: 120px; } }
.oggi__fermo { display: none; }
.voce-oggi { padding: var(--space-6) 0; }
/* I colori seguono il fondo della pagina (variabili --n-* in agenti.css): scuri sul
   bianco, chiari quando la pagina diventa scura */
.oggi h2, .oggi .nome-prodotto b { color: var(--n-titolo); transition: color 400ms ease; }
.oggi .chip-stato--oggi { background: var(--n-titolo); color: var(--n-fondo); transition: background-color 400ms ease, color 400ms ease; }
.voce-oggi h3 { color: var(--n-titolo); }
.voce-oggi p { color: var(--n-testo); }
.voce-oggi h3 { font-size: var(--sito-titolo-3); line-height: 1.05; transition: color var(--motion-slow) var(--ease-out-quart); }
.voce-oggi p { margin-top: var(--space-3); max-width: 44ch; font-size: var(--text-lg); line-height: 1.5; transition: color var(--motion-slow) var(--ease-out-quart); }
.voce-oggi .oggi__scheda { margin-top: var(--space-5); }
/* Sul telefono: titolo, immagine, testo (Mario, 11 ottobre). L'ordine lo dà già
   la pagina: js/home.js mette l'immagine subito dopo il titolo. */
@media (max-width: 899px) {
  .voce-oggi .oggi__scheda + p { margin-top: var(--space-5); }
  /* Il riquadro prende l'altezza di quello che contiene: a 13:10 tagliava la PEC */
  .voce-oggi .oggi__scheda { aspect-ratio: auto; }
  .voce-oggi .quadro { position: relative; }
}
/* La scheda è un campo pieno, e basta (Mario, 12 ottobre: la luce in alto, l'ombra in basso e i
   puntini «non c'hanno senso con il resto del sito»; poi la grana che si vedeva: «non mi piace»).
   Vale anche per i passi di Circe e Lypso; l'ombra fuori la scheda ce l'hanno solo loro, sul fondo
   scuro (agenti.css). */
.oggi__scheda { position: relative; width: 100%; aspect-ratio: 13 / 10; border-radius: var(--sito-r-campo); overflow: hidden; isolation: isolate;
  background-color: var(--p, var(--campo-viola)); transition: background-color 400ms var(--ease-out-quart); }
.quadro { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding: var(--space-6); opacity: 0; transition: opacity 220ms linear; }
.quadro.on { opacity: 1; }
.quadro > div { width: 100%; max-width: 420px; }
.oggi__scheda.scatto { animation: scatto 720ms cubic-bezier(.3, .7, .2, 1); }
@keyframes scatto { 0% { transform: translateX(0); } 28% { transform: translateX(-26px); } 100% { transform: translateX(0); } }
@media (min-width: 900px) {
  .oggi__corpo { container-type: inline-size; display: grid; grid-template-columns: 1.1fr 1fr; gap: 96px; }
  .oggi__fermo { display: block; }
  .oggi__fermo .oggi__scheda { position: sticky; top: calc(50vh - 220px); }
  /* Spaziature prese da Wispr Flow: voci lontane, così la scheda ha il tempo di cambiare.
     Lo stesso vuoto dopo ogni testo (Mario, 12 ottobre: la prima voce era più vicina alla
     seconda, perché i 120 px sopra stavano dentro la sua altezza minima). */
  .voce-oggi { padding: 0 0 300px; }
  .voce-oggi:first-child { padding-top: 120px; }
  /* L'ultima voce è alta quanto la scheda (la colonna di sinistra, 13:10) più 88 px, col
     testo in cima: la scheda si stacca quando il titolo ha superato di 56 px il suo bordo
     alto (gli altri 32 sono il margine sopra il titolo), e da lì salgono insieme. Mario: col
     vecchio 64vh il testo saliva troppo (di più sugli schermi grandi), col testo a metà la
     scheda partiva troppo presto. Misura fissa, uguale su ogni schermo. cqw è la larghezza
     di .oggi__corpo. */
  .voce-oggi:last-child { min-height: calc((100cqw - 96px) * 1.1 / 2.1 * 10 / 13 + 88px); }
  .voce-oggi .oggi__scheda { display: none; }
  .voce-oggi h3, .voce-oggi p { color: var(--n-velato); }
  .voce-oggi.on h3 { color: var(--n-titolo); }
  .voce-oggi.on p { color: var(--n-testo); }
}

/* Schede di prodotto dentro i pannelli e i quadri */
.foglio { background: var(--color-surface); border-radius: var(--radius-btn); box-shadow: var(--shadow-lg); padding: var(--space-4); font: 13px/1.45 var(--font-sans); color: var(--color-ink-soft); }
.foglio + .foglio { margin-top: var(--space-3); }
.foglio h5 { margin: 0 0 var(--space-3); font: 700 14px/1.3 var(--font-sans); color: var(--color-ink); display: flex; align-items: center; gap: 6px; }
.foglio h5 .ico { width: 15px; height: 15px; }
.foglio .riga { margin: 0 calc(var(--space-4) * -1); }
/* Foglio che contiene solo righe della Posta: le righe vanno da bordo a bordo */
.foglio--righe { padding: 0; overflow: hidden; }
.foglio--righe .riga { margin: 0; }
.foglio .riga:last-child { border-bottom: 0; }
/* La ricerca con la parola cercata, e la nota sul contatto appuntata sulla mail
   (frontend: ThreadSidePanel, «Nota su …») */
.campo--pieno { height: 36px; background: var(--color-surface); border: 1px solid var(--color-primary); color: var(--color-ink); box-shadow: var(--focus-ring); }
.nota-contatto { border: 1px solid var(--color-primary-soft); background: color-mix(in oklch, var(--color-primary) 4%, var(--color-surface)); }
.nota-contatto__su { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--color-primary); }
.nota-contatto__su .ico { width: 12px; height: 12px; }
.nota-contatto b { display: block; color: var(--color-ink); font-weight: 600; font-size: 12px; }
.nota-contatto p { margin: 2px 0 0; color: var(--color-ink); }

/* ---- Le entrate allo scorrimento (js/entrate.js) --------------------------
   Mario, 12 ottobre: i pezzi salgono di poco e compaiono, morbidi, uno dopo
   l'altro. Solo transform e opacity. La classe .entra la mette lo script: senza
   JavaScript tutto è già al suo posto. */
.entra { opacity: 0; transform: translateY(32px); }
/* «.notte .entra.entrato»: sulle pagine scure «.notte .sez__lead» (agenti.css) dà solo la
   transizione del colore e vince, e il sottotitolo compariva di colpo (Mario, 12 ottobre) */
.entra.entrato, .notte .entra.entrato { opacity: 1; transform: none;
  transition: opacity 800ms var(--ease-out-quart) var(--ritardo, 0ms), transform 1000ms var(--sito-molla) var(--ritardo, 0ms); }

/* ---- Movimento ridotto: tutto fermo, tutto al suo posto ---------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .attesa::after, .cursore-testo { animation: none; }
  .oggi__scheda.scatto { animation: none; }
  .video__palco, .camera, .settore, .stato, .quadro, .carta, .manopola i, .interruttore__voce, .barra-demo, .settore__segno::after, .settore p, .settore__link, .settore__agente, .settore .pannello, .barra__menu span, .velo-menu, .menu-agente, .menu-agenti__apri .ico { transition: none !important; }
  .menu-agenti__pannello { animation: none; }
  /* I bottoni non si sollevano e la freccia sta ferma: cambia solo il colore */
  .btn:hover, .btn:active { translate: none; }
  a.btn[href$=".html"]:hover::after { animation: none; }
}