/* ==========================================================================
   QUADERNO v3 — token di identità per emanueleguarino.me
   Come la v2 (scala tipografica modulare, verde petrolio, un solo livello di
   elevazione), più i token di COMPOSIZIONE: le larghezze di banda e di colonna.

   Tutti i colori sono definiti nella tavolozza chiara. I blocchi scuri
   ridefiniscono solo ciò che cambia.
   ========================================================================== */

:root {
  /* ── superficie: quattro livelli, un solo salto di elevazione ─────────── */
  --eg-carta:          oklch(0.978 0.002 250);   /* pagina */
  --eg-carta-alt:      oklch(1 0 0);             /* scheda, sale di un livello */
  --eg-carta-3:        oklch(0.953 0.003 250);   /* incasso: banda, riga aperta */
  --eg-carta-scura:    oklch(0.215 0.014 255);   /* banda invertita */
  --eg-inchiostro-su-scura: oklch(0.965 0.003 255);

  --eg-inchiostro:     oklch(0.190 0.012 255);
  --eg-inchiostro-2:   oklch(0.440 0.012 255);
  --eg-inchiostro-3:   oklch(0.535 0.010 255);

  --eg-linea:          oklch(0.895 0.004 250);
  --eg-linea-forte:    oklch(0.780 0.006 250);
  --eg-linea-scura:    oklch(0.310 0.014 255);

  /* ── accento: verde petrolio. Un fatto misurato, o l’azione principale ── */
  --eg-accento:        oklch(0.455 0.075 190);
  --eg-accento-forte:  oklch(0.375 0.068 190);
  --eg-accento-tenue:  oklch(0.938 0.026 190);
  --eg-accento-linea:  oklch(0.845 0.045 190);
  --eg-accento-testo:  oklch(0.990 0.004 190);
  --eg-accento-chiaro: oklch(0.780 0.095 190);   /* accento sulla banda scura */

/* ── sulla banda scura: la tavolozza è fissa perché la banda è fissa ──── */
  --eg-su-scura-2:   oklch(0.840 0.008 255);   /* testo secondario */
  --eg-su-scura-3:   oklch(0.800 0.008 255);   /* didascalie, coda dei titoli */
  --eg-linea-su-scura: oklch(0.360 0.014 255);
  --eg-accento-su-chiaro: oklch(0.160 0.020 190);  /* testo sopra --eg-accento-chiaro */

  /* ── curve: una per comportamento, non una per tutto ─────────────────── */
  --eg-curva-arrivo:  cubic-bezier(0.16, 1, 0.30, 1);   /* ciò che arriva rallenta */
  --eg-curva-uscita:  cubic-bezier(0.70, 0, 0.84, 0);   /* ciò che se ne va accelera */
  --eg-curva-luce:    cubic-bezier(0.25, 0.6, 0.35, 1); /* un'accensione non ha inerzia */

  --eg-fuoco:          oklch(0.455 0.075 190);
  --eg-disabilitato:   oklch(0.885 0.004 250);

  /* ── caratteri: solo di sistema ───────────────────────────────────────── */
  /* A1 · Prima la pila cominciava con "Helvetica Neue", che su macOS è
     installata: vinceva sempre, e `system-ui` non veniva mai raggiunto. Su un
     Mac si vedeva Helvetica Neue — un carattere degli anni Ottanta — e mai il
     carattere di sistema. Adesso il sistema viene per primo su ogni
     piattaforma, e Helvetica resta come ripiego dove non c'è altro. */
  --eg-font-titolo: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                    ui-sans-serif, system-ui, "Segoe UI Variable", "Segoe UI",
                    Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --eg-font-testo:  -apple-system, BlinkMacSystemFont, "SF Pro Text",
                    ui-sans-serif, system-ui, "Segoe UI Variable", "Segoe UI",
                    Inter, Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ── scala tipografica, ragione 1,25 su base 16 px ────────────────────── */
  --eg-t-00: 11px;  --eg-t-0: 12.5px; --eg-t-1: 14px;  --eg-t-2: 16px;
  --eg-t-3:  18px;  --eg-t-4:  21px;  --eg-t-5:  clamp(18px, 2.2vw, 27px);
  --eg-t-6:  clamp(22px, 2.6vw, 34px);
  --eg-t-7:  clamp(24px, 3.2vw, 42px);
  --eg-t-8:  clamp(26px, 4.4vw, 62px);   /* titoli di banda */
  --eg-t-9:  clamp(30px, 5.4vw, 78px);   /* titoli di sezione */
  --eg-t-10: clamp(34px, 9.2vw, 118px);  /* apertura */

  /* le cifre grandi: tre gradi, scelti in base a quante cifre contengono */
  --eg-t-cifra:   clamp(38px, 5.4vw, 72px);
  --eg-t-cifra-m: clamp(28px, 4.4vw, 54px);
  --eg-t-cifra-s: clamp(26px, 3.2vw, 42px);
  --eg-t-prezzo:  clamp(26px, 3vw, 38px);

  --eg-lh-serrata: 0.92;
  --eg-lh-titolo:  1.1;
  --eg-lh-medio:   1.32;
  --eg-lh-testo:   1.55;

  --eg-tr-titolone: -0.038em;
  --eg-tr-titolo:   -0.022em;
  --eg-tr-testo:    -0.006em;
  --eg-tr-etichetta: 0.085em;

  /* ── spaziatura, base 4 px ────────────────────────────────────────────── */
  --eg-s-1: 2px;  --eg-s-2: 4px;  --eg-s-3: 8px;  --eg-s-4: 12px;
  --eg-s-5: 16px; --eg-s-6: 24px; --eg-s-7: 32px; --eg-s-8: 48px;
  --eg-s-9: 64px; --eg-s-10: 96px; --eg-s-11: 128px;

  /* ── composizione: ogni sezione sceglie la sua larghezza ──────────────── */
  --eg-w-piena:   1240px;   /* apertura, bande di dati */
  --eg-w-larga:   1120px;   /* le prove, il problema, il listino */
  --eg-w-registro: 860px;   /* il registro: testo con la numerazione grande a lato */
  --eg-w-num:     clamp(52px, 11%, 108px);   /* la colonna del numero di voce:
        usata due volte — dalla griglia del titolo e dal rientro del corpo.
        Deve essere un token, o le due si scollano. */
  --eg-w-ritratto: clamp(200px, 22%, 292px); /* il ritratto in «Chi sono» */
  /* La soglia sotto cui la barra si posa in basso è 720px, scritta letterale
     in build/pagina.css: una @media non può leggere var(). Non c'è un token,
     per non tenere due verità sulla stessa misura. */

  /* A4 · Raggi più generosi e un raggio «pieno» per i pulsanti. A 8px e 5px
     gli angoli si leggono come una smussatura tecnica; a 14px come materiale.
     Il pieno è la pastiglia: un pulsante non ha spigoli. */
  --eg-raggio: 14px; --eg-raggio-s: 9px; --eg-raggio-pieno: 999px;

  /* ── movimento: solo cambi di stato e una rivelazione, una volta sola ─── */
  --eg-tempo:   160ms;
  --eg-tempo-s: 120ms;
  --eg-tempo-riv: 200ms;
  --eg-curva:   cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) {
    --eg-carta:         oklch(0.160 0.010 255);
    --eg-carta-alt:     oklch(0.205 0.012 255);
    --eg-carta-3:       oklch(0.235 0.013 255);
    --eg-carta-scura:   oklch(0.115 0.010 255);
    --eg-inchiostro-su-scura: oklch(0.955 0.003 255);
    --eg-inchiostro:    oklch(0.955 0.003 255);
    --eg-inchiostro-2:  oklch(0.750 0.008 255);
    --eg-inchiostro-3:  oklch(0.640 0.010 255);
    --eg-linea:         oklch(0.285 0.012 255);
    --eg-linea-forte:   oklch(0.420 0.014 255);
    --eg-linea-scura:   oklch(0.245 0.012 255);
    --eg-accento:       oklch(0.755 0.090 190);
    --eg-accento-forte: oklch(0.830 0.080 190);
    --eg-accento-tenue: oklch(0.262 0.038 190);
    --eg-accento-linea: oklch(0.360 0.050 190);
    --eg-accento-testo: oklch(0.160 0.020 190);
    --eg-accento-chiaro: oklch(0.780 0.095 190);
    /* ── curve: una per comportamento, non una per tutto ─────────────────── */
  --eg-curva-arrivo:  cubic-bezier(0.16, 1, 0.30, 1);   /* ciò che arriva rallenta */
  --eg-curva-uscita:  cubic-bezier(0.70, 0, 0.84, 0);   /* ciò che se ne va accelera */
  --eg-curva-luce:    cubic-bezier(0.25, 0.6, 0.35, 1); /* un'accensione non ha inerzia */

  --eg-fuoco:         oklch(0.755 0.090 190);
    --eg-disabilitato:  oklch(0.300 0.010 255);
  }
}

:root[data-tema="scuro"] {
  --eg-carta:         oklch(0.160 0.010 255);
  --eg-carta-alt:     oklch(0.205 0.012 255);
  --eg-carta-3:       oklch(0.235 0.013 255);
  --eg-carta-scura:   oklch(0.115 0.010 255);
  --eg-inchiostro-su-scura: oklch(0.955 0.003 255);
  --eg-inchiostro:    oklch(0.955 0.003 255);
  --eg-inchiostro-2:  oklch(0.750 0.008 255);
  --eg-inchiostro-3:  oklch(0.640 0.010 255);
  --eg-linea:         oklch(0.285 0.012 255);
  --eg-linea-forte:   oklch(0.420 0.014 255);
  --eg-linea-scura:   oklch(0.245 0.012 255);
  --eg-accento:       oklch(0.755 0.090 190);
  --eg-accento-forte: oklch(0.830 0.080 190);
  --eg-accento-tenue: oklch(0.262 0.038 190);
  --eg-accento-linea: oklch(0.360 0.050 190);
  --eg-accento-testo: oklch(0.160 0.020 190);
  --eg-accento-chiaro: oklch(0.780 0.095 190);
  /* ── curve: una per comportamento, non una per tutto ─────────────────── */
  --eg-curva-arrivo:  cubic-bezier(0.16, 1, 0.30, 1);   /* ciò che arriva rallenta */
  --eg-curva-uscita:  cubic-bezier(0.70, 0, 0.84, 0);   /* ciò che se ne va accelera */
  --eg-curva-luce:    cubic-bezier(0.25, 0.6, 0.35, 1); /* un'accensione non ha inerzia */

  --eg-fuoco:         oklch(0.755 0.090 190);
  --eg-disabilitato:  oklch(0.300 0.010 255);
}
/* ==========================================================================
   Regole della pagina — parte 2 di stile.css
   stile.css è GENERATO concatenando token/quaderno-v3.css e questo file:
   la fonte dei token resta una sola. Non modificare stile.css a mano.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--eg-carta); color-scheme: light dark; }
body {
  margin: 0; background: var(--eg-carta); color: var(--eg-inchiostro);
  font-family: var(--eg-font-testo); font-size: var(--eg-t-2);
  line-height: var(--eg-lh-testo); letter-spacing: var(--eg-tr-testo);
  -webkit-text-size-adjust: 100%; text-wrap: pretty;
  -webkit-font-smoothing: antialiased; font-kerning: normal;
  font-variant-numeric: tabular-nums;
  /* V10 · `overflow-x: hidden` è stato TOLTO. Oggi non serviva — misurato,
     scrollWidth = innerWidth a 390 e a 1440 — ma restava lì a nascondere il
     prossimo elemento troppo largo, che quindi non si sarebbe notato. Un
     tappeto sotto cui non si vede più niente non è una correzione: è la
     garanzia che il difetto successivo arrivi in produzione. */
}
img { max-width: 100%; }
a { color: var(--eg-accento); text-decoration-thickness: 1px; text-underline-offset: 3px;
    transition: color var(--eg-tempo-s) var(--eg-curva); }
a:hover { color: var(--eg-inchiostro); }
h1, h2, h3 { font-family: var(--eg-font-titolo); text-wrap: balance; margin: 0; }
p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--eg-fuoco); outline-offset: 2px; border-radius: 3px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ── misure e ritmo ─────────────────────────────────────────────────────── */
.piena { max-width: var(--eg-w-piena); margin: 0 auto; padding-inline: var(--eg-s-5); }
.larga { max-width: var(--eg-w-larga); margin: 0 auto; padding-inline: var(--eg-s-5); }
.registro-col { max-width: var(--eg-w-registro); margin: 0 auto; padding-inline: var(--eg-s-5); }
.sez { padding-block: var(--eg-s-11); }
.sez-media { padding-block: var(--eg-s-10); }
.filetto { border-top: 1px solid var(--eg-linea); }
section[id] { scroll-margin-top: 72px; }
.rientro { margin-left: 14%; }

/* ── superfici ──────────────────────────────────────────────────────────── */
.scura { background: var(--eg-carta-scura); color: var(--eg-inchiostro-su-scura); }
.scura a:not(.btn) { color: var(--eg-accento-chiaro); }
/* Superficie chiara annidata in una sezione scura: il modulo, il riquadro di
   conferma, e qualunque scheda futura. Senza questa riga i link ereditano il
   verde chiaro della banda scura e finiscono a 1,9:1 su bianco. */
.scura form a:not(.btn),
.scura .rialzata a:not(.btn),
.scura .ricevuto a:not(.btn) { color: var(--eg-accento); }
.scura .ricevuto a:not(.btn) { color: var(--eg-accento-su-chiaro); }
.accento-banda { background: var(--eg-accento); color: var(--eg-accento-testo); }
.accento-banda a:not(.btn) { color: var(--eg-accento-testo); }
.rialzata { background: var(--eg-carta-alt); }
.incassata { background: var(--eg-carta-3); }

/* ── tipografia ─────────────────────────────────────────────────────────── */
.occhiello { font-size: var(--eg-t-00); font-weight: 700; letter-spacing: var(--eg-tr-etichetta);
  text-transform: uppercase; color: var(--eg-inchiostro-2); }
.occhiello-accento { color: var(--eg-accento); }
.scura .occhiello-accento, .scura .occhiello { color: var(--eg-accento-chiaro); }
.tenue { color: var(--eg-inchiostro-2); }
.scura .tenue { color: var(--eg-su-scura-2); }
.grigio { color: var(--eg-inchiostro-3); }
.guida { font-size: var(--eg-t-3); line-height: var(--eg-lh-medio); }
.piccolo { font-size: var(--eg-t-1); }
.micro { font-size: var(--eg-t-0); }

/* A2 · Sopra i 48px il peso SCENDE invece di salire. La massa del nero, a
   quel corpo, basta già: un 700 a 118px è un blocco, non un titolo. E la
   crenatura si stringe meno, perché il carattere di sistema ha già la sua —
   il -0.045em serviva a compensare Helvetica, che non ce l'ha. */
h1 { font-size: var(--eg-t-10); line-height: 0.92; font-weight: 600; letter-spacing: -0.028em; }
h1 span { display: block; }
h1 .r2 { margin-left: 5%; }
h1 .r3 { margin-left: 11%; color: var(--eg-accento-chiaro); }
.h-sez { font-size: var(--eg-t-9); font-weight: 620;
  letter-spacing: var(--eg-tr-titolone); line-height: 0.94; }
.h-sez-m { font-size: var(--eg-t-8); font-weight: 700;
  letter-spacing: var(--eg-tr-titolone); line-height: 0.98; }

/* ── pulsanti ───────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding-inline: var(--eg-s-7); border: 0; border-radius: var(--eg-raggio-pieno);
  font-family: inherit; font-size: var(--eg-t-2); font-weight: 700; letter-spacing: var(--eg-tr-testo);
  text-decoration: none; cursor: pointer;
  transition: background-color var(--eg-tempo) var(--eg-curva), transform var(--eg-tempo-s) var(--eg-curva); }
.btn:active { transform: translateY(1px); }
.btn-accento { background: var(--eg-accento); color: var(--eg-accento-testo); }
.btn-accento:hover { background: var(--eg-accento-forte); color: var(--eg-accento-testo); }
.btn-chiaro { background: var(--eg-accento-chiaro); color: var(--eg-accento-su-chiaro); }
.btn-chiaro:hover { background: oklch(0.86 0.09 190); color: var(--eg-accento-su-chiaro); }
.btn:disabled { background: var(--eg-disabilitato); color: var(--eg-inchiostro-2);
  cursor: progress; transform: none; }
.btn-quieto { min-height: 44px; padding-inline: var(--eg-s-5); font-size: var(--eg-t-0);
  font-weight: 600; background: var(--eg-carta); color: var(--eg-inchiostro);
  border: 1px solid var(--eg-linea-forte); }
.btn-quieto:hover { background: var(--eg-carta-3); border-color: var(--eg-inchiostro-3); }
.lnk-quieto { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--eg-t-1);
  font-weight: 500; color: var(--eg-su-scura-2); text-decoration: underline;
  text-decoration-color: var(--eg-linea-forte); text-underline-offset: 4px;
  transition: color var(--eg-tempo-s) var(--eg-curva), text-decoration-color var(--eg-tempo-s) var(--eg-curva); }
.lnk-quieto:hover { color: var(--eg-inchiostro-su-scura); text-decoration-color: var(--eg-accento-chiaro); }

/* ── barra: appare dopo l'apertura. In basso sul telefono. ──────────────── */
.barra { position: fixed; left: 0; right: 0; z-index: 15; height: 56px;
  background: var(--eg-carta-alt); top: 0; border-bottom: 1px solid var(--eg-linea);
  opacity: 0; pointer-events: none; transform: translateY(-8px);
  transition: opacity var(--eg-tempo) var(--eg-curva), transform var(--eg-tempo) var(--eg-curva); }
.barra.visibile { opacity: 1; pointer-events: auto; transform: none; }
.barra-int { height: 100%; display: flex; align-items: center;
  justify-content: space-between; gap: var(--eg-s-5); }
.barra nav { display: flex; align-items: center; gap: var(--eg-s-2);
  overflow-x: auto; min-width: 0; scrollbar-width: none; }
.barra nav::-webkit-scrollbar { display: none; }
/* V11 · A 390px entrano due voci su sei: le altre quattro esistono solo
   scorrendo la barra di lato, e nascondere la barra di scorrimento toglie
   l'unico indizio che ci sia altro. Una sfumatura sul bordo destro lo
   rimette — e sparisce da sola quando si è arrivati in fondo, perché la
   maschera segue lo scorrimento. */
@media (max-width: 720px) {
  .barra nav {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  }
  /* Arrivati in fondo non c'è più niente da annunciare: la sfumatura si
     toglie. `scroll-driven` non serve — basta l'ultima voce che spinge. */
  .barra nav { scroll-padding-right: 28px; }
}
.barra nav a { display: inline-flex; align-items: center; min-height: 44px;
  padding-inline: var(--eg-s-4); border-radius: var(--eg-raggio-s); text-decoration: none;
  white-space: nowrap; font-size: var(--eg-t-0); font-weight: 500; color: var(--eg-inchiostro-2);
  transition: color var(--eg-tempo-s) var(--eg-curva), background-color var(--eg-tempo-s) var(--eg-curva); }
.barra nav a:hover { color: var(--eg-inchiostro); background: var(--eg-carta-3); }
.barra nav a[aria-current="true"] { font-weight: 700; color: var(--eg-accento);
  background: var(--eg-accento-tenue); }
.barra .btn { min-height: 44px; padding-inline: var(--eg-s-5);
  font-size: var(--eg-t-0); font-weight: 600; flex: none; }
/* 720 è letterale per forza: una @media non può leggere var(). Il token
   --eg-soglia-stretta è stato tolto dai token per non tenere due verità. */
@media (max-width: 720px) {
  .barra { top: auto; bottom: 0; border-bottom: 0; border-top: 1px solid var(--eg-linea);
    padding-bottom: env(safe-area-inset-bottom); transform: translateY(8px); }
  /* V2 · La barra passa in basso ed è fissa: senza questo spazio il piè di
     pagina finisce SOTTO di lei e l'ultima riga del sito non si legge.
     56px è l'altezza della barra, la safe area è il bordo del telefono. */
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  /* Quei 72px servono a non far finire l'ancora sotto la barra IN ALTO.
     Quaggiù la barra è in basso, quindi diventano solo un buco sopra ogni
     sezione raggiunta da un collegamento interno. */
  section[id] { scroll-margin-top: 0; }
}

.salta { position: absolute; left: -9999px; }
/* V13 · È il primo elemento che riceve il fuoco da tastiera, e misurava
   25px: `min-height` su un `inline-flex` in posizione fissa non si applica
   come ci si aspetta, perché la scatola si dimensiona sul contenuto. `height`
   fissa lo risolve, e `line-height` tiene il testo centrato. */
.salta:focus { position: fixed; left: var(--eg-s-5); top: var(--eg-s-5); z-index: 20;
  display: inline-flex; align-items: center; height: 44px; min-height: 44px;
  line-height: 44px; padding-inline: 20px; font-weight: 600;
  background: var(--eg-accento); color: var(--eg-accento-testo);
  border-radius: var(--eg-raggio-s); text-decoration: none; }

/* ── rivelazione: miglioria, non requisito.
      Senza lo script la classe .js non c'è e tutto resta visibile. ──────── */
html.js .riv { opacity: 0; transform: translateY(8px);
  transition: opacity var(--eg-tempo-riv) var(--eg-curva), transform var(--eg-tempo-riv) var(--eg-curva); }
html.js .riv.dentro { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html.js .riv { opacity: 1; transform: none; }
}

/* ── apertura ───────────────────────────────────────────────────────────── */
.testa-apertura { display: flex; align-items: center; justify-content: space-between;
  gap: var(--eg-s-4); padding-block: var(--eg-s-5) var(--eg-s-8); }
.identita { display: flex; align-items: center; gap: var(--eg-s-4); min-width: 0; }
.identita img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none;
  -webkit-mask-image: url(assets/ritratto-tondo-maschera.png);
  mask-image: url(assets/ritratto-tondo-maschera.png);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.identita span { font-size: var(--eg-t-1); font-weight: 600; white-space: nowrap; }
.btn-tema { display: inline-flex; align-items: center; min-height: 44px;
  padding-inline: var(--eg-s-3); margin-right: calc(-1 * var(--eg-s-3)); border: 0;
  background: transparent; color: var(--eg-su-scura-3); font-family: inherit;
  font-size: var(--eg-t-0); font-weight: 500; cursor: pointer; border-radius: var(--eg-raggio-s);
  white-space: nowrap; transition: color var(--eg-tempo-s) var(--eg-curva); }
.btn-tema:hover { color: var(--eg-inchiostro-su-scura); }
.apertura-piede { display: flex; flex-wrap: wrap; gap: var(--eg-s-7) var(--eg-s-9);
  align-items: flex-end; justify-content: space-between; margin-top: var(--eg-s-8); }
.apertura-piede > p { flex: 1 1 340px; max-width: 38ch; font-size: var(--eg-t-4);
  line-height: var(--eg-lh-medio); letter-spacing: var(--eg-tr-titolo); color: var(--eg-su-scura-2); }
.apertura-piede > p strong { font-weight: 600; color: var(--eg-inchiostro-su-scura); }
.apertura-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--eg-s-5); }
/* Sul telefono l'apertura ha 447 punti di budget e il sottotitolo occupa
   quattro righe: lo spazio si recupera dai margini, non dal carattere. */
@media (max-width: 560px) {
  .testa-apertura { padding-block: var(--eg-s-4) var(--eg-s-6); }
  .apertura-piede { margin-top: var(--eg-s-6); }
}

/* ── pastiglie ──────────────────────────────────────────────────────────── */
.pastiglie { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--eg-s-8) var(--eg-s-6); padding-block: var(--eg-s-8); }
.pastiglie a { display: block; color: var(--eg-accento-testo); text-decoration: none;
  border-top: 1px solid var(--eg-accento-testo); padding-top: var(--eg-s-4);
  transition: opacity var(--eg-tempo) var(--eg-curva); }
.pastiglie a:hover { opacity: 0.72; color: var(--eg-accento-testo); }
.pastiglie .cifra { display: block; font-weight: 700; line-height: var(--eg-lh-serrata);
  letter-spacing: -0.045em; font-variant-numeric: tabular-nums; text-wrap: nowrap;
  font-size: var(--eg-t-cifra); }
.pastiglie .cifra.media { font-size: var(--eg-t-cifra-m); }
.pastiglie .cifra.lunga { font-size: var(--eg-t-cifra-s); }
.pastiglie .sotto { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--eg-s-4); margin-top: var(--eg-s-4); }
.pastiglie .sotto span:first-child { font-size: var(--eg-t-1); font-weight: 500;
  line-height: 1.3; max-width: 22ch; }

/* ── il problema: nove righe, due colonne dove c'è spazio ───────────────── */
.tempo-occhiello { font-size: var(--eg-t-4); font-weight: 600; line-height: var(--eg-lh-medio);
  letter-spacing: var(--eg-tr-titolo); max-width: 34ch; margin-block: var(--eg-s-5) var(--eg-s-9); }
.problema { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--eg-s-5) var(--eg-s-8); }
.problema li { display: grid; grid-template-columns: 46px 1fr; gap: var(--eg-s-4);
  align-items: baseline; padding-top: var(--eg-s-5); border-top: 1px solid var(--eg-linea); }
.problema .n { font-size: var(--eg-t-5); font-weight: 700; line-height: 0.9;
  letter-spacing: -0.045em; color: var(--eg-accento); font-variant-numeric: tabular-nums; }
.problema p { font-size: var(--eg-t-4); font-weight: 600; line-height: var(--eg-lh-medio);
  letter-spacing: var(--eg-tr-titolo); max-width: 30ch; }

/* ── cosa faccio ────────────────────────────────────────────────────────── */
.offerta-testa { display: flex; flex-wrap: wrap; gap: var(--eg-s-6) var(--eg-s-9);
  align-items: flex-end; margin-bottom: var(--eg-s-8); }
.offerta-testa > div { flex: 2 1 340px; }
.offerta-testa > p { flex: 1 1 280px; line-height: var(--eg-lh-testo);
  color: var(--eg-inchiostro-2); max-width: 40ch; }
.su-misura { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px;
  background: var(--eg-linea); border: 1px solid var(--eg-linea); border-radius: var(--eg-raggio);
  overflow: hidden; margin-bottom: var(--eg-s-9); }
.su-misura > li { display: flex; flex-direction: column; padding: var(--eg-s-7) var(--eg-s-6);
  background: var(--eg-carta-alt); transition: background-color var(--eg-tempo) var(--eg-curva); }
.su-misura > li:hover { background: var(--eg-carta); }
.su-misura h3 { font-size: var(--eg-t-4); font-weight: 700; letter-spacing: var(--eg-tr-titolo);
  line-height: var(--eg-lh-titolo); margin-block: var(--eg-s-4); }
.prezzo { font-size: var(--eg-t-prezzo); font-weight: 700;
  letter-spacing: var(--eg-tr-titolone); line-height: 1; color: var(--eg-accento);
  font-variant-numeric: tabular-nums; margin-bottom: var(--eg-s-6); }
.prezzo.nota { font-size: var(--eg-t-1); font-weight: 600; line-height: var(--eg-lh-medio);
  color: var(--eg-inchiostro-3); }
.su-misura .corpo { font-size: var(--eg-t-1); line-height: var(--eg-lh-testo);
  color: var(--eg-inchiostro-2); }
.su-misura .corpo + .corpo { margin-top: var(--eg-s-4); }

.partire-testa { display: flex; flex-wrap: wrap; gap: var(--eg-s-4) var(--eg-s-7);
  align-items: baseline; margin-bottom: var(--eg-s-5); }
.partire-testa p:last-child { flex: 1 1 320px; line-height: var(--eg-lh-testo);
  color: var(--eg-inchiostro-2); max-width: 62ch; }
.partire { display: grid; gap: var(--eg-s-3); margin-bottom: var(--eg-s-7); }
.partire > li { display: flex; flex-wrap: wrap; gap: var(--eg-s-5) var(--eg-s-8);
  align-items: flex-start; padding: var(--eg-s-7); border-radius: var(--eg-raggio); }
.partire .testo { flex: 1 1 320px; min-width: 260px; }
.partire h3 { font-size: var(--eg-t-6); font-weight: 700;
  letter-spacing: var(--eg-tr-titolone); line-height: var(--eg-lh-titolo); max-width: 26ch;
  margin-block: var(--eg-s-4) var(--eg-s-5); }
.partire h3 .coda { font-weight: 500; color: var(--eg-su-scura-2); }
.partire .testo p { line-height: var(--eg-lh-testo); max-width: 58ch; }
.partire .testo p + p { margin-top: var(--eg-s-4); }
.partire .chiusura { color: var(--eg-accento-chiaro); }
/* La frase su cui si decide: staccata, e con più aria intorno delle altre. */
.partire .frase { margin-block: var(--eg-s-7); padding-left: var(--eg-s-5);
  border-left: 3px solid var(--eg-accento-chiaro);
  font-size: var(--eg-t-6); font-weight: 700; line-height: var(--eg-lh-titolo);
  letter-spacing: var(--eg-tr-titolo); color: var(--eg-inchiostro-su-scura); max-width: 30ch; }
.partire .testo p + .frase, .partire .frase + p { margin-top: var(--eg-s-7); }
.partire .lato { display: flex; flex-direction: column; gap: var(--eg-s-5);
  align-items: flex-start; flex: 0 1 auto; }
.partire .lato .cifra { font-size: var(--eg-t-cifra-s); font-weight: 700; line-height: 0.96;
  letter-spacing: var(--eg-tr-titolone); color: var(--eg-accento-chiaro);
  font-variant-numeric: tabular-nums; }
.rete { padding: var(--eg-s-6); border: 1px solid var(--eg-linea);
  border-radius: var(--eg-raggio); background: var(--eg-carta-alt); }
.rete .titolo { font-size: var(--eg-t-3); font-weight: 700; letter-spacing: var(--eg-tr-titolo);
  line-height: var(--eg-lh-titolo); margin-bottom: var(--eg-s-3); }
.rete p { font-size: var(--eg-t-1); line-height: var(--eg-lh-testo);
  color: var(--eg-inchiostro-2); max-width: 76ch; }
.rete .invito { margin-top: var(--eg-s-4); color: var(--eg-inchiostro); font-weight: 600; }

/* ── le prove ───────────────────────────────────────────────────────────── */
.prove-testa { margin-bottom: var(--eg-s-9); }
.prove-testa h2 { margin-block: var(--eg-s-6); font-size: var(--eg-t-9);
  letter-spacing: var(--eg-tr-titolone); line-height: 0.94; max-width: 18ch; font-weight: 700; }
.prove-testa .rientro { font-size: var(--eg-t-4); line-height: var(--eg-lh-medio);
  color: var(--eg-inchiostro-2); max-width: 40ch; }
.prova { border-radius: var(--eg-raggio); overflow: hidden; margin-bottom: var(--eg-s-6); }
.prova.chiara { background: var(--eg-carta-alt); border: 1px solid var(--eg-linea); }
.prova-testa { display: flex; flex-wrap: wrap; gap: var(--eg-s-1) var(--eg-s-4);
  align-items: baseline; padding: var(--eg-s-7); }
/* Le tre schede hanno strutture diverse — Odile porta il titolo nella testa,
   Bussola e Atlante dentro il corpo — ma la taglia è una sola. */
.prova-testa h3, .prova-corpo h3 { font-size: var(--eg-t-7); font-weight: 700;
  letter-spacing: var(--eg-tr-titolone); line-height: var(--eg-lh-titolo); }
.prova-corpo h3 { margin-top: var(--eg-s-4); }
.prova-corpo .sotto-nome { margin-bottom: var(--eg-s-6); }
.prova-corpo .stato { display: inline-block; margin-bottom: var(--eg-s-6); }
.stato { font-size: var(--eg-t-00); font-weight: 600; letter-spacing: var(--eg-tr-etichetta);
  text-transform: uppercase; color: var(--eg-accento); padding: var(--eg-s-2) var(--eg-s-4);
  border: 1px solid var(--eg-accento-linea); border-radius: var(--eg-raggio-s); }
.prova-testa .stato { margin-left: auto; }
.scura .stato { color: var(--eg-accento-chiaro); border-color: oklch(0.42 0.05 190); }
.differenza { padding: var(--eg-s-6) var(--eg-s-7); background: var(--eg-accento-tenue);
  border-block: 1px solid var(--eg-linea); }
.differenza p:last-child { font-size: var(--eg-t-5); font-weight: 600;
  line-height: var(--eg-lh-medio); letter-spacing: var(--eg-tr-titolo);
  color: var(--eg-inchiostro); max-width: 44ch; margin-top: var(--eg-s-3); }
.differenza-riq { padding: var(--eg-s-5) var(--eg-s-6); background: var(--eg-accento-tenue);
  border-left: 3px solid var(--eg-accento); border-radius: 0 var(--eg-raggio-s) var(--eg-raggio-s) 0;
  margin-bottom: var(--eg-s-6); }
.scura .differenza-riq { background: oklch(0.24 0.020 255); border-left-color: var(--eg-accento-chiaro); }
.differenza-riq p:last-child { font-size: var(--eg-t-3); font-weight: 600;
  line-height: var(--eg-lh-medio); color: var(--eg-inchiostro); max-width: 46ch; margin-top: var(--eg-s-2); }
.scura .differenza-riq p:last-child { color: var(--eg-inchiostro-su-scura); }
.prova-corpo { display: flex; flex-wrap: wrap; gap: var(--eg-s-7); padding: var(--eg-s-7); }
.prova-corpo > div { flex: 1 1 320px; min-width: 260px; }
.prova-corpo p { line-height: var(--eg-lh-testo); max-width: 52ch; }
.prova-corpo .did { font-size: var(--eg-t-3); line-height: var(--eg-lh-medio);
  margin-bottom: var(--eg-s-5); }
.prova-corpo .ris { font-size: var(--eg-t-1); color: var(--eg-inchiostro-2);
  margin-bottom: var(--eg-s-5); }
.scura .prova-corpo .ris { color: var(--eg-su-scura-2); }
.funzioni { display: grid; gap: var(--eg-s-2); }
.funzioni li { font-size: var(--eg-t-0); line-height: 1.45; color: var(--eg-inchiostro-2);
  padding-left: var(--eg-s-4); border-left: 2px solid var(--eg-linea); }
.scura .funzioni li { color: var(--eg-su-scura-2); border-left-color: var(--eg-linea-su-scura); }
.cornice { flex: 1 1 380px; min-width: 260px; margin: 0; }
.cornice .schermo { background: var(--eg-carta-3); border: 1px solid var(--eg-linea-forte);
  border-radius: var(--eg-raggio-s); display: flex; flex-direction: column;
  overflow: hidden; aspect-ratio: 16 / 10; }
.cornice .schermo.schema { aspect-ratio: 4 / 3; background: transparent;
  border: 1px dashed oklch(0.44 0.014 255); align-items: center;
  justify-content: center; padding: var(--eg-s-6); }

/* ── l'anteprima nella cornice: immagine sotto, pulsante sopra ──────────────
   L'immagine si carica solo quando la sezione entra nello schermo. Se non
   arriva, restano il fondo, la nota e il pulsante: il blocco tiene comunque,
   perché quello che vende è il pulsante, non la figura. */
.cornice .schermo.viva { position: relative; aspect-ratio: 4 / 3;
  background: var(--eg-carta-scura); border: 1px solid var(--eg-linea-su-scura);
  align-items: stretch; justify-content: flex-start; overflow: hidden; }
.cornice .schermo.viva img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 0 0; }
/* La nota: si legge solo se l'immagine non arriva, perché sta sotto. */
.cornice .schermo.viva .nota-sotto { position: absolute; inset: 0; margin: auto;
  display: flex; align-items: center; justify-content: center; padding: var(--eg-s-6);
  font-size: var(--eg-t-0); line-height: 1.45; text-align: center;
  color: var(--eg-su-scura-3); }
@media (max-width: 560px) {
  .cornice .schermo.viva { aspect-ratio: 5 / 4; }
  }
.cornice .barra-finta { display: flex; align-items: center; gap: var(--eg-s-3);
  padding: var(--eg-s-3) var(--eg-s-4); border-bottom: 1px solid var(--eg-linea); }
.cornice .barra-finta i { width: 7px; height: 7px; border-radius: 50%;
  background: var(--eg-linea-forte); flex: none; }
.cornice .barra-finta span { font-size: var(--eg-t-00); font-weight: 600;
  letter-spacing: var(--eg-tr-etichetta); text-transform: uppercase;
  color: var(--eg-inchiostro-3); margin-left: var(--eg-s-2); }
.cornice .attesa { flex: 1; display: flex; align-items: center;
  justify-content: center; padding: var(--eg-s-5); }
.cornice .attesa span, .cornice .schermo.schema span { font-size: var(--eg-t-0);
  color: var(--eg-inchiostro-3); text-align: center; max-width: 32ch; line-height: 1.45; }
.scura .cornice .schermo.schema span { color: var(--eg-su-scura-3); }
.cornice figcaption { margin-top: var(--eg-s-3); font-size: var(--eg-t-00);
  color: var(--eg-inchiostro-2); }
.scura .cornice figcaption { color: var(--eg-su-scura-3); }
.prove-chiusura { font-size: var(--eg-t-8); font-weight: 700; line-height: 1.02;
  letter-spacing: var(--eg-tr-titolone); max-width: 30ch; }

/* ══ Bussola ═══════════════════════════════════════════════════════════════
   Nessun cruscotto, nessuna schermata. Le due interazioni — il settore e il
   regolatore — sono radio più :has(), quindi funzionano senza JavaScript:
   qui non c'è niente da migliorare a esecuzione, e non deve esserci.
   ═════════════════════════════════════════════════════════════════════════ */

.bussola-attacco { padding-block: var(--eg-s-11) var(--eg-s-10); }
.bussola-attacco h2 { font-size: var(--eg-t-10); line-height: var(--eg-lh-serrata); font-weight: 600;
  letter-spacing: -0.045em; font-weight: 700; }
.bussola-attacco .sotto { font-size: var(--eg-t-6); font-weight: 700;
  line-height: var(--eg-lh-titolo); letter-spacing: var(--eg-tr-titolone);
  color: var(--eg-accento-chiaro); max-width: 30ch; margin-top: var(--eg-s-6); }
.bussola-attacco .limite { display: grid; gap: var(--eg-s-4); margin-top: var(--eg-s-8);
  padding-left: var(--eg-s-6); border-left: 3px solid var(--eg-linea-su-scura); max-width: 54ch; }
.bussola-attacco .limite p { font-size: var(--eg-t-3); line-height: var(--eg-lh-medio);
  color: var(--eg-su-scura-2); }
.bussola-attacco .azione { margin-top: var(--eg-s-8); }

/* ── i tre strati: uno schema statico, nessun movimento ─────────────────── */
/* Una pila, non tre fratelli: Sopra in cima, Sotto in fondo, e la base è la
   più larga e la più pesante perché è quella che regge.

   L'ordine sta nel MARKUP e non in un `column-reverse`. Prima il documento
   diceva Sotto → Sopra e il disegno lo rovesciava: chi legge con gli occhi
   riceveva una sequenza, chi legge con un lettore di schermo quella opposta
   (WCAG 1.3.2). Un rovesciamento visivo è una cosa che si vede solo se si
   vede — cioè la definizione di una barriera. */
.strati { display: flex; flex-direction: column; gap: var(--eg-s-2);
  margin-top: var(--eg-s-8); }
.strato { display: flex; flex-wrap: wrap; gap: var(--eg-s-4) var(--eg-s-7);
  padding: var(--eg-s-6); border: 1px solid var(--eg-linea);
  border-radius: var(--eg-raggio); background: var(--eg-carta-alt); }
/* Sopra: il più stretto e il più leggero. In mezzo: intermedio.
   Sotto: piena larghezza, superficie diversa, bordo in accento. */
.strato.sopra { margin-inline: 11% 0; }
.strato.mezzo { margin-inline: 5.5% 0; }
.strato.sotto { background: var(--eg-carta-3); border-color: var(--eg-accento-linea);
  border-width: 1px 1px 3px; padding: var(--eg-s-7) var(--eg-s-6); }
.strato.sotto .posto { color: var(--eg-accento); }
.strato.sotto h3 { font-size: var(--eg-t-7); }
.strato.sopra h3 { font-size: var(--eg-t-5); }
@media (max-width: 620px) {
  .strato.sopra { margin-inline: var(--eg-s-6) 0; }
  .strato.mezzo { margin-inline: var(--eg-s-3) 0; }
}
.strato .posto { flex: 0 0 var(--eg-w-num); font-size: var(--eg-t-00); font-weight: 700;
  letter-spacing: var(--eg-tr-etichetta); text-transform: uppercase;
  color: var(--eg-inchiostro-3); padding-top: var(--eg-s-2); }
.strato .corpo { flex: 1 1 320px; min-width: 240px; }
.strato h3 { font-size: var(--eg-t-6); font-weight: 700; letter-spacing: var(--eg-tr-titolone);
  line-height: var(--eg-lh-titolo); }
.strato .testo { font-size: var(--eg-t-1); line-height: var(--eg-lh-testo);
  color: var(--eg-inchiostro-2); max-width: 62ch; margin-top: var(--eg-s-3); }
.strato .verdetto { margin-top: var(--eg-s-4); font-size: var(--eg-t-1);
  line-height: var(--eg-lh-testo); max-width: 62ch; }
.strato .verdetto b { color: var(--eg-accento); }
.legame { margin-top: var(--eg-s-7); padding-left: var(--eg-s-6);
  border-left: 3px solid var(--eg-accento); font-size: var(--eg-t-5); font-weight: 700;
  line-height: var(--eg-lh-medio); letter-spacing: var(--eg-tr-titolo); max-width: 40ch; }

/* ══ il movimento ══════════════════════════════════════════════════════════
   Tutto in @keyframes, zero JavaScript: la sezione non ha copione e non lo
   acquista per un'animazione. Un'animazione CSS parte anche a copione morto —
   ed è la ragione per cui la pagina è piatta. Sotto prefers-reduced-motion
   ognuna mostra il proprio STATO FINALE, non il nulla.
   Il confine: si muove il meccanismo, non il prodotto. Nessun numero fuori
   dai due punti concessi — la conversazione e le due barre di Rese.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── A1 · l'archivio che si riempie ─────────────────────────────────────── */
@keyframes eg-converge {
  0%   { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.94);
         animation-timing-function: var(--eg-curva-arrivo); }
  14%  { opacity: 1; }
  62%  { opacity: 1; transform: translate(0, 0) scale(1);
         animation-timing-function: var(--eg-curva-uscita); }
  76%  { opacity: 0; transform: translate(0, 0) scale(0.82); }
  100% { opacity: 0; transform: translate(0, 0) scale(0.82); }
}
@keyframes eg-raccoglie {
  0%, 52%  { border-color: var(--eg-linea-forte); }
  62%      { border-color: var(--eg-accento); }
  78%, 100% { border-color: var(--eg-linea-forte); }
}
.flusso { position: relative; height: 156px; margin-top: var(--eg-s-5);
  border: 1px solid var(--eg-linea); border-radius: var(--eg-raggio-s);
  background: var(--eg-carta); overflow: hidden; }
.flusso .og { position: absolute; top: 50%; left: 50%; margin: -14px 0 0 -46px;
  width: 92px; text-align: center; font-size: var(--eg-t-00); font-weight: 600;
  letter-spacing: var(--eg-tr-etichetta); text-transform: uppercase;
  color: var(--eg-inchiostro-2); padding: var(--eg-s-2) 0;
  border: 1px solid var(--eg-linea-forte); border-radius: var(--eg-raggio-s);
  background: var(--eg-carta-alt); opacity: 0;
  animation: eg-converge 4.6s linear infinite; }
.flusso .og:nth-child(1) { --dx: -150px; --dy: -52px; animation-delay: 0s; }
.flusso .og:nth-child(2) { --dx:  158px; --dy: -40px; animation-delay: .21s; }
.flusso .og:nth-child(3) { --dx: -172px; --dy:  44px; animation-delay: .58s; }
.flusso .og:nth-child(4) { --dx:  146px; --dy:  56px; animation-delay: .74s; }
.flusso .og:nth-child(5) { --dx:  -96px; --dy: -74px; animation-delay: 1.19s; }
/* questo arriva chiaramente ultimo */
.flusso .og:nth-child(6) { --dx:  104px; --dy:  76px; animation-delay: 1.86s; }
.flusso .raccolta { position: absolute; top: 50%; left: 50%;
  width: 104px; height: 40px; margin: -20px 0 0 -52px;
  border: 2px dashed var(--eg-linea-forte); border-radius: var(--eg-raggio-s);
  animation: eg-raccoglie 4.6s var(--eg-curva-luce) infinite; }

/* ── I turni · «In mezzo» ────────────────────────────────────────────────
   Sei ruoli che si accendono a uno a uno. Stesso ciclo di A1 (4,6s) ma
   sfasato: letti in fila, i tre strati raccontano la catena — le cose
   arrivano, gli agenti lavorano, le sezioni compaiono. Chi guarda vede una
   cosa sola che scende, non tre decorazioni scollegate. ─────────────────── */
@keyframes eg-turno {
  0%, 6%    { opacity: .34; border-color: var(--eg-linea);
              background: var(--eg-carta); }
  13%, 27%  { opacity: 1;   border-color: var(--eg-accento-linea);
              background: var(--eg-accento-tenue); }
  36%, 100% { opacity: .34; border-color: var(--eg-linea);
              background: var(--eg-carta); }
}
.turni { display: flex; flex-wrap: wrap; gap: var(--eg-s-3);
  margin-top: var(--eg-s-5); padding: var(--eg-s-5);
  border: 1px solid var(--eg-linea); border-radius: var(--eg-raggio-s);
  background: var(--eg-carta); }
.turni .ruolo { padding: var(--eg-s-2) var(--eg-s-4);
  font-size: var(--eg-t-00); font-weight: 600;
  letter-spacing: var(--eg-tr-etichetta); text-transform: uppercase;
  color: var(--eg-inchiostro-2);
  border: 1px solid var(--eg-linea); border-radius: var(--eg-raggio-s);
  background: var(--eg-carta); opacity: .34;
  animation: eg-turno 4.6s var(--eg-curva-luce) infinite; }
/* La luce passa da uno all'altro: i ritardi coprono poco più di un secondo,
   quindi il giro si legge come un passaggio e non come sei lampeggi. */
.turni .ruolo:nth-child(1) { animation-delay: .10s; }
.turni .ruolo:nth-child(2) { animation-delay: .32s; }
.turni .ruolo:nth-child(3) { animation-delay: .54s; }
.turni .ruolo:nth-child(4) { animation-delay: .76s; }
.turni .ruolo:nth-child(5) { animation-delay: .98s; }
.turni .ruolo:nth-child(6) { animation-delay: 1.20s; }

/* ── Le tessere · «Sopra» ────────────────────────────────────────────────
   Ogni sezione compare con il nome dell'agente che la porta. È la tesi della
   pagina resa visibile: non le scegli da un menù, te le portano loro. Parte
   più tardi degli altri due strati — è l'ultimo anello della catena. ────── */
@keyframes eg-tessera {
  0%, 14%   { opacity: 0; transform: translateY(9px) scale(.97); }
  28%, 88%  { opacity: 1; transform: none; }
  100%      { opacity: 0; transform: translateY(5px) scale(.98); }
}
.tessere { display: flex; flex-wrap: wrap; gap: var(--eg-s-3);
  margin-top: var(--eg-s-5); padding: var(--eg-s-5);
  border: 1px solid var(--eg-linea); border-radius: var(--eg-raggio-s);
  background: var(--eg-carta); }
.tessere .tessera { display: grid; gap: 1px; padding: var(--eg-s-3) var(--eg-s-4);
  border: 1px solid var(--eg-linea-forte); border-radius: var(--eg-raggio-s);
  background: var(--eg-carta-alt); opacity: 0;
  animation: eg-tessera 4.6s var(--eg-curva-arrivo) infinite; }
.tessere .tessera b { font-size: var(--eg-t-0); font-weight: 700;
  color: var(--eg-inchiostro); }
.tessere .tessera i { font-size: var(--eg-t-00); font-style: normal;
  letter-spacing: var(--eg-tr-etichetta); text-transform: uppercase;
  color: var(--eg-accento); }
.tessere .tessera:nth-child(1) { animation-delay: 1.30s; }
.tessere .tessera:nth-child(2) { animation-delay: 1.58s; }
.tessere .tessera:nth-child(3) { animation-delay: 1.86s; }
.tessere .tessera:nth-child(4) { animation-delay: 2.14s; }

/* ── A2 · la conversazione. Un ciclo solo da 13s: i figli si azzerano da
      soli a ogni giro, e la velatura copre il momento del ritorno. ─────── */
@keyframes eg-batte  { 0%, 3%  { clip-path: inset(0 100% 0 0); }
                       14%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes eg-batte2 { 0%, 15% { clip-path: inset(0 100% 0 0); }
                       27%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes eg-attesa { 0%, 27% { opacity: 0; } 30%, 38% { opacity: 1; } 41%, 100% { opacity: 0; } }
@keyframes eg-risposta1 { 0%, 40% { opacity: 0; transform: translateY(5px); }
  46%, 100% { opacity: 1; transform: none; } }
@keyframes eg-risposta2 { 0%, 47% { opacity: 0; transform: translateY(5px); }
  53%, 100% { opacity: 1; transform: none; } }
@keyframes eg-ciclo { 0%, 92% { opacity: 1; animation-timing-function: var(--eg-curva-uscita); }
  96% { opacity: 0; animation-timing-function: var(--eg-curva-arrivo); }
  99%, 100% { opacity: 1; } }

.conversa { margin-top: var(--eg-s-7); border: 1px solid var(--eg-linea);
  border-radius: var(--eg-raggio); background: var(--eg-carta);
  overflow: hidden; animation: eg-ciclo 13s linear infinite; }

/* L'intestazione: il nome dell'agente, non quello dell'applicazione. È il
   punto della sezione — gli agenti sono ruoli con un nome e un mestiere. */
.conversa .capo { display: flex; align-items: center; gap: var(--eg-s-4);
  padding: var(--eg-s-5) var(--eg-s-6); border-bottom: 1px solid var(--eg-linea); }
.conversa .capo .spia { position: relative; flex: none; width: 26px; height: 26px;
  border-radius: 50%; background: var(--eg-accento-tenue);
  border: 1px solid var(--eg-accento-linea); }
.conversa .capo .spia::after { content: ""; position: absolute; inset: 0; margin: auto;
  width: 8px; height: 8px; border-radius: 50%; background: var(--eg-accento); }
.conversa .capo .nome { font-size: var(--eg-t-2); font-weight: 700;
  letter-spacing: var(--eg-tr-titolo); color: var(--eg-inchiostro); }

/* V14 · I puntini e la risposta stanno nella STESSA riga della griglia,
   quindi si sovrappongono invece di sommarsi: prima i puntini, a opacità
   zero per quasi tutto il ciclo, tenevano occupato uno spazio che restava
   vuoto in mezzo allo scambio. In ogni istante se ne vede uno solo. */
.conversa .scambio { display: grid; grid-template-columns: minmax(0, 1fr);
  padding: var(--eg-s-6); }
/* La COLONNA va detta insieme alla riga. Senza `grid-column`, due elementi
   messi sulla stessa riga vengono collocati in due colonne diverse: la
   griglia se ne inventa una seconda, e da lì in poi tutte le larghezze
   dentro la chat sono sbagliate. Sono nella stessa cella apposta — si
   sovrappongono, e in ogni istante se ne vede uno solo. */
.conversa .dom { grid-column: 1; grid-row: 1; }
.conversa .sta-scrivendo { grid-column: 1; grid-row: 2; align-self: start; }
.conversa .risp { grid-column: 1; grid-row: 2; }

/* La domanda è una bolla allineata a destra: chi guarda sa già cosa vuol dire,
   e non serve più l'etichetta «Tu». Il testo dentro resta a sinistra.
   justify-items: start — senza, il grid item si stira sulla colonna e
   clip-path misurerebbe la colonna invece del testo. */
/* Una colonna flessibile, non una griglia: con `display: grid` e
   `width: max-content` la bolla si dimensionava sulla SECONDA riga e la prima
   — che è più lunga — usciva fuori di sessanta pixel. In colonna flessibile
   con `align-items: flex-start` ogni riga resta larga quanto il suo testo,
   che è ciò che serve al taglio della battitura, e il contenitore prende la
   larghezza della riga più lunga, che è ciò che serve alla bolla. */
/* NIENTE `max-width: 100%` qui. Su un elemento di griglia largo quanto il
   suo contenuto quella percentuale è una dipendenza circolare — la larghezza
   dipende dal contenuto, il tetto dipende dalla larghezza — e Chrome la
   scioglie fermandosi a un valore più piccolo della riga più lunga: il testo
   usciva dalla bolla di sessanta pixel. Sul telefono, dove il rischio di
   sbordare è reale, le righe vanno semplicemente a capo (più sotto). */
.conversa .dom { display: grid; grid-template-columns: max-content;
  justify-items: start; gap: 2px; margin-left: auto;
  padding: var(--eg-s-4) var(--eg-s-5);
  border-radius: var(--eg-raggio) var(--eg-raggio) var(--eg-raggio-s) var(--eg-raggio);
  background: var(--eg-carta-alt); }
.conversa .dom .l { display: block; white-space: nowrap;
  clip-path: inset(0 100% 0 0);
  font-size: var(--eg-t-2); font-weight: 600; line-height: var(--eg-lh-medio);
  color: var(--eg-inchiostro); }
.conversa .dom .l1 { animation: eg-batte 13s steps(34) infinite; }
/* La seconda riga porta il nome proprio: la sua finestra è più lunga a pari
   caratteri, quindi si scrive più piano. Nessuno batte a velocità costante. */
.conversa .dom .l2 { animation: eg-batte2 13s steps(26) infinite;
  border-right: 2px solid var(--eg-accento); }

/* I tre puntini: è il segno che tutti riconoscono per «sta scrivendo». */
@keyframes eg-puntino { 0%, 100% { opacity: .28; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); } }
.conversa .sta-scrivendo { display: flex; align-items: center; gap: var(--eg-s-3);
  margin-top: var(--eg-s-5); font-size: var(--eg-t-1); font-style: italic;
  color: var(--eg-inchiostro-3); opacity: 0;
  animation: eg-attesa 13s linear infinite; }
.conversa .sta-scrivendo .punti { display: inline-flex; align-items: center; gap: 3px;
  flex: none; padding: 6px 9px; border-radius: 999px; background: var(--eg-carta-alt); }
.conversa .sta-scrivendo .punti i { display: block; width: 5px; height: 5px;
  border-radius: 50%; background: var(--eg-accento);
  animation: eg-puntino 1.1s ease-in-out infinite; }
.conversa .sta-scrivendo .punti i:nth-child(2) { animation-delay: .16s; }
.conversa .sta-scrivendo .punti i:nth-child(3) { animation-delay: .32s; }

.conversa .risp { margin-top: var(--eg-s-5); width: max-content; max-width: min(88%, 62ch);
  padding: var(--eg-s-4) var(--eg-s-5);
  border-radius: var(--eg-raggio) var(--eg-raggio) var(--eg-raggio) var(--eg-raggio-s);
  background: var(--eg-carta-3); }
.conversa .risp .b1 { font-size: var(--eg-t-1); line-height: var(--eg-lh-testo);
  color: var(--eg-inchiostro-2); opacity: 0;
  animation: eg-risposta1 13s var(--eg-curva-arrivo) infinite; }
.conversa .risp .b2 { margin-top: var(--eg-s-4); padding-bottom: var(--eg-s-2);
  border-bottom: 2px solid var(--eg-accento-linea);
  display: inline-block; font-size: var(--eg-t-2); font-weight: 700;
  line-height: var(--eg-lh-medio); letter-spacing: var(--eg-tr-titolo);
  color: var(--eg-accento); max-width: 40ch; opacity: 0;
  animation: eg-risposta2 13s var(--eg-curva-arrivo) infinite; }

/* La barra di scrittura: non fa niente ed è muta agli assistivi. Serve solo a
   dire che è una chat e non un riquadro come gli altri. */
.conversa .scrittura { display: flex; align-items: center; gap: var(--eg-s-4);
  padding: var(--eg-s-5) var(--eg-s-6); border-top: 1px solid var(--eg-linea);
  background: var(--eg-carta-alt); }
.conversa .scrittura .campo { flex: 1; height: 36px; border-radius: 999px;
  border: 1px solid var(--eg-linea-forte); background: var(--eg-carta); }
.conversa .scrittura .invia { position: relative; flex: none; width: 32px; height: 32px;
  border-radius: 50%; background: var(--eg-accento-tenue);
  border: 1px solid var(--eg-accento-linea); }
.conversa .scrittura .invia::after { content: ""; position: absolute; top: 50%; left: 11px;
  margin-top: -5px; width: 0; height: 0; border-left: 8px solid var(--eg-accento);
  border-top: 5px solid transparent; border-bottom: 5px solid transparent; }

.squadra > .nota { margin-top: var(--eg-s-4); font-size: var(--eg-t-0);
  color: var(--eg-inchiostro-3); }
.scura .squadra > .nota { color: var(--eg-su-scura-3); }

/* ── A3 · la notte ──────────────────────────────────────────────────────── */
@keyframes eg-riga { from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; } }
.notte { margin-top: var(--eg-s-7); padding: var(--eg-s-7);
  background: var(--eg-carta-scura); color: var(--eg-inchiostro-su-scura);
  border-radius: var(--eg-raggio); }
.notte .et { display: block; font-size: var(--eg-t-00); font-weight: 700;
  letter-spacing: var(--eg-tr-etichetta); text-transform: uppercase;
  color: var(--eg-accento-chiaro); margin-bottom: var(--eg-s-5); }
.notte ol { display: grid; gap: var(--eg-s-4); }
.notte li { display: flex; flex-wrap: wrap; gap: var(--eg-s-2) var(--eg-s-5);
  align-items: baseline; opacity: 0;
  animation: eg-riga .5s var(--eg-curva-arrivo) forwards; }
/* Fra 02:00 e 03:05 c'è più di un'ora, fra 03:05 e 03:35 la metà: i ritardi
   rispettano quella sproporzione, così sembra che abbiano impiegato tempi
   diversi — che è la verità, ed è gratis. */
.notte li:nth-child(1) { animation-delay: .20s; }
.notte li:nth-child(2) { animation-delay: 1.67s; }
.notte li:nth-child(3) { animation-delay: 2.35s; }
.notte li:nth-child(4) { animation-delay: 3.59s; }
.notte .ora { font-size: var(--eg-t-3); font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: var(--eg-tr-titolo);
  color: var(--eg-accento-chiaro); flex: 0 0 auto; }
.notte .cosa { font-size: var(--eg-t-1); line-height: var(--eg-lh-medio);
  color: var(--eg-su-scura-2); }
.notte .cosa b { font-weight: 600; color: var(--eg-inchiostro-su-scura); }
.notte .fine { margin-top: var(--eg-s-6); padding-top: var(--eg-s-5);
  border-top: 1px solid var(--eg-linea-su-scura); font-size: var(--eg-t-5);
  font-weight: 700; line-height: var(--eg-lh-medio); letter-spacing: var(--eg-tr-titolo);
  max-width: 30ch; opacity: 0;
  animation: eg-riga .6s var(--eg-curva-arrivo) 4.3s forwards; }

/* ── A4 · il numero che si forma. Un dato solo: due grafici sarebbero un
      cruscotto, e la scala del disegno è la stessa che l'ha vietato. ───── */
@keyframes eg-barra {
  0%   { width: 0; animation-timing-function: var(--eg-curva-arrivo); }
  20%  { width: calc(var(--q) + 4px); animation-timing-function: var(--eg-curva-luce); }
  28%, 88% { width: var(--q); animation-timing-function: var(--eg-curva-uscita); }
  100% { width: 0; }
}
/* La versione a scena non si azzera: si assesta e resta. */
@keyframes eg-barra-scena {
  0%   { width: 0; animation-timing-function: var(--eg-curva-arrivo); }
  72%  { width: calc(var(--q) + 4px); animation-timing-function: var(--eg-curva-luce); }
  100% { width: var(--q); }
}
.grafico { margin-top: var(--eg-s-5); padding: var(--eg-s-5);
  border: 1px solid var(--eg-linea); border-radius: var(--eg-raggio-s);
  background: var(--eg-carta); }
.grafico .fila { display: grid; grid-template-columns: 1fr; gap: var(--eg-s-2); }
.grafico .fila + .fila { margin-top: var(--eg-s-4); }
.grafico .testa { display: flex; justify-content: space-between; gap: var(--eg-s-4);
  font-size: var(--eg-t-00); font-weight: 600; letter-spacing: var(--eg-tr-etichetta);
  text-transform: uppercase; color: var(--eg-inchiostro-2); }
.grafico .testa .val { font-variant-numeric: tabular-nums; color: var(--eg-inchiostro);
  letter-spacing: 0; }
.grafico .pista { height: 10px; border-radius: 5px; background: var(--eg-carta-3);
  overflow: hidden; }
.grafico .riempi { display: block; height: 100%; width: 0; border-radius: 5px;
  background: var(--eg-linea-forte); animation: eg-barra 7s linear infinite; }
.grafico .fila.reale .testa .val { color: var(--eg-accento); }
.grafico .fila.reale .riempi { background: var(--eg-accento); animation-delay: .3s; }
.grafico .did { margin-top: var(--eg-s-4); font-size: var(--eg-t-1); font-weight: 600;
  line-height: var(--eg-lh-medio); color: var(--eg-inchiostro); }

/* ── il lampo sulle righe governate. La variante passa da display:none a
      block quando si sposta il comando: l'animazione riparte da sola, senza
      una riga di copione. Risolve il regolatore che governa quattrocento
      punti più in basso. ─────────────────────────────────────────────────── */
@keyframes eg-accende {
  0%   { background: var(--eg-accento); color: var(--eg-accento-testo); }
  100% { background: transparent; color: inherit; }
}
.agente .governo .var { animation: eg-accende .45s var(--eg-curva-luce); border-radius: 3px; }
.agente .governo .var p, .agente .governo .var .et {
  animation: eg-schiara .45s var(--eg-curva-luce); }
@keyframes eg-schiara { 0% { color: var(--eg-accento-testo); } 100% { color: inherit; } }

/* ── le scene avanzano mentre entrano nello schermo ──────────────────────
   Un ciclo cieco da 13s parte al caricamento: chi arriva scorrendo vede un
   frammento, non una scena. Con animation-timeline la scena comincia sempre
   dall'inizio, e sempre mentre la stai guardando. È CSS puro — nessun
   copione — e dove non è supportata resta il ciclo, che è già quello che
   c'era prima. L'archivio resta in ciclo: è ambiente, non racconto. ────── */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Un timeline solo per la scena: i figli lo ereditano per nome, così
       restano in sincrono fra loro invece di seguire ognuno la propria
       visibilità. */
    /* La conversazione NON segue lo scorrimento, e la ragione è il selettore
       di settore: cambiando azienda il blocco nuovo è già davanti agli occhi,
       quindi il suo percorso è oltre la fine e si presenterebbe all'ultimo
       fotogramma — testo già scritto, nessuna battitura. Resta a tempo: un
       elemento che passa da display:none a visibile riparte da zero da solo,
       ed è esattamente il momento in cui la si vuole vedere. */

    .notte { view-timeline-name: --scena-notte; }
    .notte li, .notte .fine {
      animation-timeline: --scena-notte; animation-duration: auto;
      animation-delay: 0s; animation-fill-mode: both;
    }
    /* Con un timeline di scorrimento il ritardo non è tempo, è posizione:
       gli scarti fra gli orari diventano scarti di percorso. */
    .notte li:nth-child(1) { animation-range: entry 18% entry 30%; }
    .notte li:nth-child(2) { animation-range: entry 45% entry 57%; }
    .notte li:nth-child(3) { animation-range: entry 58% entry 70%; }
    .notte li:nth-child(4) { animation-range: entry 79% entry 91%; }
    /* Stessa fase delle quattro righe, e crescente: un intervallo che mescola
       le fasi si inverte quando il blocco è alto quanto la finestra, e un
       intervallo invertito ha durata zero — con fill-mode:both congela il
       fotogramma iniziale, cioè opacity 0, per sempre. */
    .notte .fine            { animation-range: entry 92% entry 100%; }

    .grafico { view-timeline-name: --scena-grafico; }
    .grafico .riempi {
      animation-name: eg-barra-scena; animation-timeline: --scena-grafico;
      animation-duration: auto; animation-iteration-count: 1;
      animation-delay: 0s; animation-fill-mode: both;
      animation-range: entry 12% cover 34%;
    }
    .grafico .fila.reale .riempi { animation-range: entry 20% cover 40%; }
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Stato finale di ognuna, non il nulla. */
  .flusso { height: auto; display: flex; flex-wrap: wrap; gap: var(--eg-s-3);
    align-items: center; padding: var(--eg-s-5); }
  .flusso .og { position: static; margin: 0; width: auto; padding: var(--eg-s-2) var(--eg-s-4);
    opacity: 1; animation: none; }
  .flusso .raccolta { position: static; width: auto; height: auto; margin: 0;
    padding: var(--eg-s-2) var(--eg-s-4); animation: none; border-color: var(--eg-accento); }
  .conversa, .conversa .sta-scrivendo, .conversa .risp .b1, .conversa .risp .b2,
  .notte li, .notte .fine { opacity: 1; animation: none; transform: none; }
  .turni .ruolo { opacity: 1; animation: none;
    border-color: var(--eg-accento-linea); background: var(--eg-accento-tenue); }
  .tessere .tessera { opacity: 1; animation: none; transform: none; }
  .conversa .sta-scrivendo .punti i { animation: none; opacity: 1; }
  .conversa .dom .l { clip-path: none; animation: none; white-space: normal; }
  .conversa .dom .l2 { border-right: 0; }
  .grafico .riempi { width: var(--q); animation: none; }
  .agente .governo .var, .agente .governo .var p,
  .agente .governo .var .et { animation: none; }
}


/* ── la barra dei comandi: sta sopra le schede, perché è lì che si vede
      l'effetto. Un comando sotto a ciò che governa non è un comando. ───── */
.comandi { display: grid; gap: var(--eg-s-7); padding: var(--eg-s-7);
  border: 1px solid var(--eg-linea); border-radius: var(--eg-raggio);
  background: var(--eg-carta-alt); margin-top: var(--eg-s-8); }
.comando > .et { display: block; font-size: var(--eg-t-00); font-weight: 700;
  letter-spacing: var(--eg-tr-etichetta); text-transform: uppercase;
  color: var(--eg-inchiostro-3); margin-bottom: var(--eg-s-4); }
.scelte { display: flex; flex-wrap: wrap; gap: var(--eg-s-3); }
.scelte label { display: inline-flex; align-items: center; min-height: 44px;
  padding-inline: var(--eg-s-5); border: 1px solid var(--eg-linea-forte);
  border-radius: var(--eg-raggio-s); background: var(--eg-carta);
  font-size: var(--eg-t-0); font-weight: 600; color: var(--eg-inchiostro-2);
  cursor: pointer; user-select: none;
  transition: background-color var(--eg-tempo-s) var(--eg-curva),
    border-color var(--eg-tempo-s) var(--eg-curva), color var(--eg-tempo-s) var(--eg-curva); }
.scelte label:hover { background: var(--eg-carta-3); border-color: var(--eg-inchiostro-3);
  color: var(--eg-inchiostro); }
.scelte label:active { transform: translateY(1px); }
.scelte input { position: absolute; width: 1px; height: 1px; opacity: 0;
  margin: 0; pointer-events: none; }
.scelte label:has(input:checked) { background: var(--eg-accento);
  border-color: var(--eg-accento); color: var(--eg-accento-testo); }
.scelte label:has(input:focus-visible) { outline: 2px solid var(--eg-fuoco); outline-offset: 2px; }
.scelte label.altrove:has(input:checked) { background: var(--eg-inchiostro);
  border-color: var(--eg-inchiostro); color: var(--eg-carta); }
/* la spiegazione della posizione scelta: le altre due restano nel markup */
.spiega > p { display: none; font-size: var(--eg-t-1); line-height: var(--eg-lh-testo);
  color: var(--eg-inchiostro-2); max-width: 62ch; margin-top: var(--eg-s-4); }
.nota-comando { font-size: var(--eg-t-0); line-height: var(--eg-lh-testo);
  color: var(--eg-inchiostro-3); max-width: 62ch; margin-top: var(--eg-s-4);
  padding-top: var(--eg-s-4); border-top: 1px solid var(--eg-linea); }

/* ── le schede: profili di personale, non voci di un elenco ─────────────── */
.squadra { display: none; }
.squadra .intestazione { display: flex; flex-wrap: wrap; gap: var(--eg-s-2) var(--eg-s-5);
  align-items: baseline; margin-block: var(--eg-s-8) var(--eg-s-5); }
.squadra .intestazione .et { font-size: var(--eg-t-00); font-weight: 700;
  letter-spacing: var(--eg-tr-etichetta); text-transform: uppercase; color: var(--eg-inchiostro-3); }
.agenti { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--eg-s-5); }
.agente { display: flex; flex-direction: column; padding: var(--eg-s-6);
  border: 1px solid var(--eg-linea); border-radius: var(--eg-raggio);
  background: var(--eg-carta-alt); }
.agente > header { display: flex; flex-wrap: wrap; gap: var(--eg-s-2) var(--eg-s-4);
  align-items: baseline; padding-bottom: var(--eg-s-4);
  border-bottom: 1px solid var(--eg-linea); }
.agente h4 { margin: 0; font-family: var(--eg-font-titolo); font-size: var(--eg-t-4);
  font-weight: 700; letter-spacing: var(--eg-tr-titolo); line-height: var(--eg-lh-titolo); }
.sempre { font-size: var(--eg-t-00); font-weight: 600;
  letter-spacing: var(--eg-tr-etichetta); text-transform: uppercase; color: var(--eg-accento);
  padding: var(--eg-s-2) var(--eg-s-3); border: 1px solid var(--eg-accento-linea);
  border-radius: var(--eg-raggio-s); white-space: nowrap; }
.agente .sempre { margin-left: auto; }
.agente .area { font-size: var(--eg-t-1); font-weight: 600; color: var(--eg-inchiostro-2);
  flex: 1 1 100%; line-height: var(--eg-lh-medio); }
.agente .righe { display: grid; gap: var(--eg-s-4); padding-top: var(--eg-s-5); }
.agente .et { display: block; font-size: var(--eg-t-00); font-weight: 700;
  letter-spacing: var(--eg-tr-etichetta); text-transform: uppercase;
  color: var(--eg-inchiostro-3); margin-bottom: var(--eg-s-2); }
/* Il corpo della scheda ha una taglia sola, dovunque stia il testo. */
.agente .riga p, .agente .governo p, .agente .fermo p { font-size: var(--eg-t-1);
  line-height: var(--eg-lh-testo); color: var(--eg-inchiostro); }
.agente .compito p { font-size: var(--eg-t-3); font-weight: 600;
  line-height: var(--eg-lh-medio); letter-spacing: var(--eg-tr-testo); }
.agente .sa-fare ul { display: grid; gap: var(--eg-s-2); }
.agente .sa-fare li { font-size: var(--eg-t-1); line-height: 1.45; color: var(--eg-inchiostro-2);
  padding-left: var(--eg-s-4); border-left: 2px solid var(--eg-linea); }
/* la coppia governata dal regolatore */
.agente .governo { margin-top: var(--eg-s-2); padding: var(--eg-s-5);
  background: var(--eg-accento-tenue); border-left: 3px solid var(--eg-accento);
  border-radius: 0 var(--eg-raggio-s) var(--eg-raggio-s) 0; display: grid; gap: var(--eg-s-4); }
.agente .governo .var { display: none; gap: var(--eg-s-4); }
.agente .governo .var > div + div { margin-top: var(--eg-s-4); }
.agente .governo .et { color: var(--eg-accento); }
.agente .fermo { display: grid; gap: var(--eg-s-2); }
.agente .fermo .marchio { font-size: var(--eg-t-00); font-weight: 700;
  letter-spacing: var(--eg-tr-etichetta); text-transform: uppercase; color: var(--eg-accento); }
/* V3 · Le schede hanno la stessa altezza ma i blocchi interni cadono a
   quote diverse, proprio dove il lettore vuole CONFRONTARE. `margin-top:auto`
   spinge la coda in fondo, così almeno il piede di ogni scheda coincide. */
.agente .coda { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--eg-s-3) var(--eg-s-5);
  margin-top: auto; padding-top: var(--eg-s-5); border-top: 1px solid var(--eg-linea); }
.agente .coda > div { flex: 1 1 40%; min-width: 130px; }
.agente .coda p { font-size: var(--eg-t-0); line-height: 1.45; color: var(--eg-inchiostro-2); }
.agente .avvertenza { margin-top: var(--eg-s-5); padding: var(--eg-s-5);
  background: var(--eg-carta-3); border: 1px solid var(--eg-linea);
  border-radius: var(--eg-raggio-s); font-size: var(--eg-t-0);
  line-height: var(--eg-lh-testo); color: var(--eg-inchiostro-2); }

/* le altre tre squadre: sei nomi e un compito, che è tutto quello che c'è */
.agenti-brevi { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px; background: var(--eg-linea); border: 1px solid var(--eg-linea);
  border-radius: var(--eg-raggio); overflow: hidden; }
.agenti-brevi > li { padding: var(--eg-s-6); background: var(--eg-carta-alt); }
.agenti-brevi h4 { margin: 0 0 var(--eg-s-3); display: flex; flex-wrap: wrap;
  gap: var(--eg-s-3) var(--eg-s-4); align-items: center;
  font-family: var(--eg-font-titolo); font-size: var(--eg-t-3); font-weight: 700;
  letter-spacing: var(--eg-tr-titolo); }
.agenti-brevi p { font-size: var(--eg-t-1); line-height: var(--eg-lh-testo);
  color: var(--eg-inchiostro-2); }
.squadra .dopo { margin-top: var(--eg-s-6); font-size: var(--eg-t-1);
  line-height: var(--eg-lh-testo); color: var(--eg-inchiostro-2); max-width: 62ch; }

/* «il mio non è qui»: chi non si è visto rappresentato è chi scrive più volentieri */
.altrove-pannello { display: none; padding: var(--eg-s-8); margin-top: var(--eg-s-8);
  background: var(--eg-carta-scura); color: var(--eg-inchiostro-su-scura);
  border-radius: var(--eg-raggio); }
.altrove-pannello h3 { font-size: var(--eg-t-6); font-weight: 700;
  letter-spacing: var(--eg-tr-titolone); line-height: var(--eg-lh-titolo); max-width: 26ch; }
.altrove-pannello p { font-size: var(--eg-t-1); line-height: var(--eg-lh-testo);
  color: var(--eg-su-scura-2); max-width: 62ch; margin-top: var(--eg-s-4); }
.altrove-pannello .azione { margin-top: var(--eg-s-6); }

/* ── l'ammissione: tre righe, e valgono più di una figura ───────────────── */
.ammissione { margin-top: var(--eg-s-9); padding: var(--eg-s-8) 0;
  border-block: 1px solid var(--eg-linea); }
.ammissione ul { display: grid; gap: var(--eg-s-4); }
.ammissione li { font-size: var(--eg-t-5); font-weight: 700; line-height: var(--eg-lh-medio);
  letter-spacing: var(--eg-tr-titolo); max-width: 40ch; }
.ammissione li + li { font-size: var(--eg-t-3); font-weight: 500; color: var(--eg-inchiostro-2); }
/* L'enfasi la porta il colore: il peso resta quello della riga, per non
   introdurre un quarto grado nella scala. */
.ammissione li b { color: var(--eg-accento); font-weight: inherit; }

/* ── l'aggancio al registro, e la chiusura ──────────────────────────────── */
.bussola-guasti { display: flex; flex-wrap: wrap; gap: var(--eg-s-6) var(--eg-s-9);
  align-items: flex-end; margin-top: var(--eg-s-9); }
.bussola-guasti > div { flex: 1 1 320px; }
.bussola-guasti .forte { font-size: var(--eg-t-4); font-weight: 600;
  line-height: var(--eg-lh-medio); letter-spacing: var(--eg-tr-titolo); max-width: 34ch; }
.bussola-guasti .seconda { font-size: var(--eg-t-1); line-height: var(--eg-lh-testo);
  color: var(--eg-inchiostro-2); max-width: 54ch; margin-top: var(--eg-s-4); }
.bussola-chiusura { padding-block: var(--eg-s-10); }
.bussola-chiusura h3 { font-size: var(--eg-t-8); font-weight: 700;
  letter-spacing: var(--eg-tr-titolone); line-height: 1.02; max-width: 22ch; }
.bussola-chiusura p { font-size: var(--eg-t-3); line-height: var(--eg-lh-testo);
  color: var(--eg-su-scura-2); max-width: 58ch; margin-top: var(--eg-s-5); }
.bussola-chiusura .azione { margin-top: var(--eg-s-7); }

/* ── il cablaggio: quale pannello e quale variante si vedono.
      Nessun JavaScript: lo stato è nei radio, la reazione è in :has(). ──── */
#bussola:has(#sett-impianti:checked) .sq-impianti { display: block; }
#bussola:has(#sett-manifattura:checked) .sq-manifattura { display: block; }
#bussola:has(#sett-sanita:checked) .sq-sanita { display: block; }
#bussola:has(#sett-studi:checked) .sq-studi { display: block; }
#bussola:has(#sett-altrove:checked) .altrove-pannello { display: block; }
/* Un comando che non governa niente non deve stare a schermo: le varianti
   esistono solo nella squadra dettagliata, quindi il regolatore compare
   solo con quella. Nelle altre non c'è nulla da spostare. */
.comando-regolatore { display: none; }
#bussola:has(#sett-impianti:checked) .comando-regolatore { display: block; }
#bussola:has(#reg-chiede:checked) .var-chiede { display: block; }
#bussola:has(#reg-chiede:checked) .spiega .sp-chiede { display: block; }
#bussola:has(#reg-ripete:checked) .var-ripete { display: block; }
#bussola:has(#reg-ripete:checked) .spiega .sp-ripete { display: block; }
#bussola:has(#reg-riferisce:checked) .var-riferisce { display: block; }
#bussola:has(#reg-riferisce:checked) .spiega .sp-riferisce { display: block; }

/* ── se si rompe ────────────────────────────────────────────────────────── */
.rompe-testa { display: flex; flex-wrap: wrap; gap: var(--eg-s-7) var(--eg-s-9); align-items: flex-end; }
.rompe-testa > div { flex: 1 1 320px; }
.rompe-testa > div:last-child { max-width: 44ch; }
.rompe-testa h2 { max-width: 16ch; margin-top: var(--eg-s-5); }
.rompe-domanda { font-size: var(--eg-t-4); font-weight: 600; line-height: var(--eg-lh-medio);
  letter-spacing: var(--eg-tr-titolo); margin-bottom: var(--eg-s-5); }
.rompe-azioni { display: flex; flex-wrap: wrap; gap: var(--eg-s-5);
  align-items: center; margin-top: var(--eg-s-6); }
.voci { background: var(--eg-carta-alt); border: 1px solid var(--eg-linea);
  border-radius: var(--eg-raggio); overflow: hidden; }
.voce { border-top: 1px solid var(--eg-linea); }
.voce:first-child { border-top: 0; }
.voce > summary { display: grid; grid-template-columns: var(--eg-w-num) 1fr 20px;
  gap: 0 var(--eg-s-5); padding: var(--eg-s-6) var(--eg-s-4); align-items: start;
  list-style: none; cursor: pointer; transition: background-color var(--eg-tempo-s) var(--eg-curva); }
.voce > summary::-webkit-details-marker { display: none; }
.voce > summary::marker { content: ""; }
.voce > summary:hover { background: var(--eg-carta-3); }
.voce > summary:focus-visible { outline-offset: -2px; }
.voce .n { font-size: var(--eg-t-cifra-m); font-weight: 700; line-height: 0.8;
  letter-spacing: -0.05em; color: var(--eg-inchiostro-3); font-variant-numeric: tabular-nums;
  transition: color var(--eg-tempo-s) var(--eg-curva); }
.voce .sintomo { display: block; font-size: var(--eg-t-3); font-weight: 600;
  line-height: var(--eg-lh-medio); letter-spacing: var(--eg-tr-testo); max-width: 54ch; }
.voce .piu { font-size: var(--eg-t-4); color: var(--eg-inchiostro-3); text-align: right;
  line-height: 1; transition: transform var(--eg-tempo) var(--eg-curva), color var(--eg-tempo-s) var(--eg-curva); }
.voce[open] > summary { background: var(--eg-carta-3); box-shadow: inset 3px 0 0 var(--eg-accento); }
.voce[open] > summary .n, .voce[open] > summary .piu { color: var(--eg-accento); }
.voce[open] > summary .piu { transform: rotate(45deg); }
.voce-corpo { padding: 0 var(--eg-s-4) var(--eg-s-7) calc(var(--eg-w-num) + var(--eg-s-5) + var(--eg-s-4));
  display: grid; gap: var(--eg-s-5); }
.voce-corpo .coppia { display: flex; flex-wrap: wrap; gap: var(--eg-s-5) var(--eg-s-7); }
.voce-corpo .coppia p { flex: 1 1 250px; font-size: var(--eg-t-1);
  line-height: var(--eg-lh-testo); color: var(--eg-inchiostro-2); }
.voce-corpo .et { display: block; font-size: var(--eg-t-00); font-weight: 700;
  letter-spacing: var(--eg-tr-etichetta); text-transform: uppercase;
  color: var(--eg-inchiostro-3); margin-bottom: var(--eg-s-2); }
.risolto { padding: var(--eg-s-5) var(--eg-s-6); background: var(--eg-accento-tenue);
  border-left: 3px solid var(--eg-accento); border-radius: 0 var(--eg-raggio-s) var(--eg-raggio-s) 0; }
.risolto .et { color: var(--eg-accento); }
.risolto p { font-size: var(--eg-t-2); line-height: var(--eg-lh-testo);
  color: var(--eg-inchiostro); max-width: 64ch; }

/* ── chi sono ───────────────────────────────────────────────────────────── */
.chi-apertura { font-size: var(--eg-t-8); font-weight: 700; line-height: 1.02;
  letter-spacing: var(--eg-tr-titolone); max-width: 24ch; margin-block: var(--eg-s-8); }
.chi { display: flex; flex-wrap: wrap; gap: var(--eg-s-7) var(--eg-s-8); align-items: flex-start; }
.chi figure { flex: 0 0 var(--eg-w-ritratto); margin: 0; }
.chi img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  object-position: 50% 12%; border-radius: var(--eg-raggio-s);
  -webkit-mask-image: url(assets/ritratto-maschera.png);
  mask-image: url(assets/ritratto-maschera.png);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.chi > div { flex: 1 1 320px; min-width: 260px; max-width: 52ch; }
.chi p { font-size: var(--eg-t-3); line-height: var(--eg-lh-testo); color: var(--eg-inchiostro-2); }
.chi p + p { margin-top: var(--eg-s-5); }

/* ── contatto ───────────────────────────────────────────────────────────── */
.contatto { display: flex; flex-wrap: wrap; gap: var(--eg-s-9); }
.contatto > div { flex: 1 1 340px; min-width: 260px; }
.contatto h2 { font-size: var(--eg-t-9); margin-block: var(--eg-s-5) var(--eg-s-6); }
.contatto .invito { font-size: var(--eg-t-4); line-height: var(--eg-lh-medio); max-width: 30ch; }
.contatto .patto { margin-top: var(--eg-s-7); padding-top: var(--eg-s-6);
  border-top: 1px solid var(--eg-linea-su-scura); font-size: var(--eg-t-1);
  line-height: var(--eg-lh-testo); color: var(--eg-su-scura-2); max-width: 38ch; }
form { display: grid; gap: var(--eg-s-5); padding: var(--eg-s-7);
  background: var(--eg-carta-alt); color: var(--eg-inchiostro); border-radius: var(--eg-raggio); }
form label > span { display: block; font-size: var(--eg-t-0); font-weight: 600;
  color: var(--eg-inchiostro-2); margin-bottom: var(--eg-s-3); }
input, textarea { width: 100%; font-family: inherit; font-size: var(--eg-t-2);
  padding: var(--eg-s-4) var(--eg-s-5); border: 1px solid var(--eg-linea-forte);
  border-radius: var(--eg-raggio-s); background: var(--eg-carta); color: var(--eg-inchiostro);
  transition: border-color var(--eg-tempo-s) var(--eg-curva); }
input { min-height: 48px; }
textarea { line-height: var(--eg-lh-testo); resize: vertical; }
input:hover, textarea:hover { border-color: var(--eg-inchiostro-3); }
input:focus, textarea:focus { border-color: var(--eg-accento); }
.form-piede { display: flex; flex-wrap: wrap; align-items: center; gap: var(--eg-s-5); }
.form-esito { font-size: var(--eg-t-0); color: var(--eg-inchiostro-2); }
.informativa { padding-top: var(--eg-s-4); border-top: 1px solid var(--eg-linea);
  font-size: var(--eg-t-0); line-height: var(--eg-lh-testo); color: var(--eg-inchiostro-2); }
.ricevuto { padding: var(--eg-s-7); background: var(--eg-accento-chiaro);
  color: var(--eg-accento-su-chiaro); border-radius: var(--eg-raggio); margin-bottom: var(--eg-s-5); }
.ricevuto .grosso { font-size: var(--eg-t-4); font-weight: 700;
  line-height: var(--eg-lh-medio); margin-block: var(--eg-s-3) var(--eg-s-4); }
.ricevuto p:last-child { font-size: var(--eg-t-1); line-height: var(--eg-lh-testo); }
.ricevuto .occhiello { color: var(--eg-accento-su-chiaro); }

footer { background: var(--eg-carta-scura); color: var(--eg-su-scura-3);
  border-top: 1px solid var(--eg-linea-scura); }
footer a:not(.btn) { color: var(--eg-su-scura-3); }
footer a:hover { color: var(--eg-inchiostro-su-scura); }
.footer-int { padding: var(--eg-s-7) var(--eg-s-5) var(--eg-s-10); display: flex; flex-wrap: wrap;
  gap: var(--eg-s-4) var(--eg-s-8); justify-content: space-between; font-size: var(--eg-t-0); }
.footer-int p { display: flex; flex-wrap: wrap; gap: var(--eg-s-2) var(--eg-s-5); }

/* ── Il campo esca del modulo ────────────────────────────────────────────
   Non `display:none` né `visibility:hidden`: i robot fatti bene saltano i
   campi che il browser non visualizza, e l'esca non pescherebbe niente. Sta
   fuori dallo schermo, resta nell'albero, e una persona non lo incontra —
   non è raggiungibile col tabulatore (`tabindex="-1"` nel markup) e i lettori
   di schermo lo saltano (`aria-hidden` sul contenitore). ────────────────── */
.esca {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ── V4 · le animazioni fuori schermo ────────────────────────────────────
   La pagina è alta 18.375px e le animazioni in ciclo sono 53: per quasi tutto
   il tempo quasi tutte girano dove nessuno le guarda. `content-visibility`
   sospende insieme il disegno e le animazioni di ciò che è fuori schermo, e
   accorcia anche il primo disegno.

   `contain-intrinsic-size` non è facoltativo: senza, il browser stima
   l'altezza a zero e la barra di scorrimento salta mentre si scorre. Le due
   misure sono quelle rilevate — Bussola ~7.400px, il registro ~4.900px — e
   valgono da segnaposto finché il blocco non entra in vista.

   Non si applica al blocco `#fatti`, che è in cima e va disegnato subito. ── */
#bussola, #registro {
  content-visibility: auto;
  contain-intrinsic-size: auto 7400px;
}
#registro { contain-intrinsic-size: auto 4900px; }


/* ── V12 · il vuoto fra la banda dei numeri e il primo testo ─────────────
   `.sez` mette 128px sopra e sotto; sommati al margine della banda che
   precede facevano ~350px di nero, più di uno schermo. La sezione che segue
   una banda a colore pieno non ha bisogno di respiro sopra: ce l'ha già,
   ed è la banda stessa. ─────────────────────────────────────────────────── */
.accento-banda + .sez,
.accento-banda + section { padding-top: var(--eg-s-9); }

/* ── V6 · la colonna sinistra di «Parliamone» ────────────────────────────
   Il modulo sta a destra; a sinistra, sotto quattro righe, restavano ~700px
   di nero. Non è respiro: è una colonna che finisce prima dell'altra, nella
   sezione dove si decide se scrivere o no. Allineare in alto e basta lascia
   il buco; allineare al centro lo divide in due e smette di leggersi come
   una mancanza. ─────────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  .contatto { align-items: center; }
}

/* ── X3 · il messaggio di errore di un campo ───────────────────────────── */
.errore {
  display: block;
  margin-top: var(--eg-s-2);
  font-size: var(--eg-t-0);
  line-height: 1.45;
  color: var(--eg-accento-chiaro);
}
.errore[hidden] { display: none; }

/* ── V5 · l'invito sotto l'anteprima ─────────────────────────────────────
   Stava sopra l'immagine, a tutta larghezza, con una velatura scura sotto
   per staccarlo: sembrava un comando dell'applicazione ritratta. Qui è
   quello che è — un invito della pagina. ─────────────────────────────────── */
.cornice .apri-sotto { margin-top: var(--eg-s-5); }
.cornice .apri-sotto .btn { width: 100%; }


/* ── La chat sul telefono ────────────────────────────────────────────────
   Le righe della domanda non vanno a capo, perché il taglio della battitura
   ha bisogno di una riga sola. A 390px quella riga è più larga della scheda,
   e senza questa regola uscirebbe fuori. La battitura si perde: su un
   telefono valeva pochi pixel, la leggibilità vale tutto. ───────────────── */
@media (max-width: 560px) {
  /* Un blocco e non una griglia: `minmax(0, 1fr)` dentro un elemento che si
     dimensiona sul contenuto è di nuovo la dipendenza circolare di sopra, e
     qui faceva collassare la bolla a trentadue pixel — cioè ai soli margini
     interni. Un blocco con un margine a sinistra riempie quello che resta,
     resta spostato a destra come una bolla deve essere, e non ha niente da
     far collassare. */
  .conversa .dom { display: block; width: auto; margin-left: 14%; }
  .conversa .dom .l { white-space: normal; clip-path: none; animation: none; }
  .conversa .dom .l2 { border-right: 0; }
}

/* ── Le pagine-documento: informativa e «non trovato» ────────────────────
   Vivono fuori dalla pagina principale e non hanno le sue sezioni, quindi
   non ereditano il suo ritmo verticale: senza queste righe i titoli si
   appoggiavano al paragrafo successivo e il testo toccava i bordi. ─────── */
.documento .h-doc { font-size: var(--eg-t-8); font-weight: 700;
  line-height: 1.04; letter-spacing: -0.032em; margin-block: var(--eg-s-4) var(--eg-s-6); }
.documento h2 { font-size: var(--eg-t-4); font-weight: 700;
  line-height: var(--eg-lh-medio); letter-spacing: var(--eg-tr-titolo);
  margin-block: var(--eg-s-8) var(--eg-s-4); }
.documento p { font-size: var(--eg-t-1); line-height: var(--eg-lh-testo);
  color: var(--eg-inchiostro-2); margin-block: var(--eg-s-4) 0; max-width: 68ch; }
.documento .guida { font-size: var(--eg-t-2); color: var(--eg-inchiostro); }
.documento b, .documento strong { color: var(--eg-inchiostro); }
.documento ul { margin-block: var(--eg-s-4) 0; }
.documento .informativa { margin-top: var(--eg-s-7); }
.documento .btn { margin-top: var(--eg-s-6); }


/* ── A4 · la barra traslucida ─────────────────────────────────────────────
   È il dettaglio riconoscibile: il contenuto che scorre sotto si intravede,
   invece di sparire dietro una fascia opaca. Il ripiego opaco è dichiarato
   sotto @supports e non prima, così dove il velo funziona non c'è una
   seconda regola che gli si sovrappone. ──────────────────────────────────── */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .barra {
    background: color-mix(in oklch, var(--eg-carta-alt) 72%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
}