/* ═════════════════════════════════════════════════════ LA LINEA COORDINATA DEL SITO
   Un file solo. Il restyle della testata, del piede e della prosa si fa qui dentro —
   e' il criterio 13.7 della specifica, e regge solo se nessuna pagina si porta il
   proprio CSS.

   ═══ 10-09-2026: LA LINEA NUOVA ═══
   Riferimento dichiarato: Apple, preso per quello che serve. Un'idea per schermata con
   l'aria intorno, il tipo che fa il lavoro al posto della grafica, il colore in CAMPI
   PIENI invece che in pallini e riquadri. Niente card, niente bordi, niente ombre.
   Quello che NON si prende e' il vuoto: qui la vendita e' argomentativa, e le parole
   sono trecento per sezione invece di trenta. Lo spazio si prende FRA una sezione e
   l'altra, non dentro il paragrafo.

   ═══ I COLORI SI MISURANO, NON SI SCELGONO A OCCHIO ═══
   `Accessibilita::contrasto()` legge i `--nome: #hex` del PRIMO blocco `:root` e mette
   in fila le coppie di `COPPIE`: sotto 4,5:1 il build **si ferma**. Da cui due regole
   che sembrano pedanteria e non lo sono:
   · il valore letterale sta sul nome MISURATO. Un `--fondo: var(--carta)` non e' un
     colore esatto e la misura lo salta con un avviso — cioe' smette di misurare
     proprio mentre credi di aver dato un nome piu' bello alle cose.
   · i campi scuri hanno token loro (`--campo-*`, `--su-*`), non un `.notturno` che
     ridefinisce tutto: quello sta fuori da `:root` e nessuno lo misurerebbe. Adesso
     l'inchiostro, il blu e il mattone sono la meta' del sito e vanno guardati.

   Verde, ambra e rosso sono RISERVATI AI GIUDIZI SUI NUMERI. Fuori da un indicatore
   non compaiono mai: se girano anche come decorazione, tutto il sito sembra un
   cruscotto e i semafori perdono forza.
   ══════════════════════════════════════════════════════════════════════════════════ */

:root{
  /* LA MISURA DEL TITOLO DI PAGINA - uguale a `istituzionale.css`, e lo controlla
     `prova_sito.php`. Qui c'erano SETTE misure diverse per la stessa cosa, da 40 a 68px. */
  --titolo-pagina:clamp(2rem, 8vw, 3.1rem);
  /* E cosi' il titolo di sezione e l'occhiello: stessi valori di `istituzionale.css`,
     controllati da `prova_sito.php`. I sottotitoli avevano SEI misure, da 18 a 50px. */
  --titolo-sezione:clamp(1.4rem, 5.4vw, 2rem);
  --occhiello-corpo:.78rem;
  /* i tre fondi chiari — carta, sabbia, sabbia cupa. Mai bianco puro. */
  --fondo:#F6F3EE;      --fondo-2:#E9E2D6;    --fondo-3:#DCD3C3;
  /* l'inchiostro e' caldo, mai nero puro. `--tenue` e' a 4,80:1 sul fondo piu' scuro
     dei tre: schiarirlo di un tono lo porta sotto soglia proprio dove serve. */
  --testo:#16181D;      --testo-2:#2B2E35;    --tenue:#55585F;

  /* I CAMPI PIENI. Ogni sezione e' un colore solo, e i campi si alternano. */
  --campo-scuro:#16181D;   --campo-blu:#0E2439;   --campo-mattone:#C2482B;
  --su-scuro:#F6F3EE;      --su-scuro-2:#C9C6C0;  --su-scuro-3:#A8A49C;
  /* Il testo sul mattone e' piu' chiaro del previsto per un motivo solo: con
     #FCEFE9 il rapporto era 4,39 e il build si sarebbe fermato. Il mattone resta
     com'e' — quel tono scuro e saturo e' il segno che distingue questo sito da
     mezzo internet — e si schiarisce il testo, che costa meno. */
  --su-mattone:#FFF4EF;
  --link-scuro:#8FC0F0;

  /* LA CHAT DEL PROTOTIPO. Sono le convenzioni di una chat di telefono — le mie a destra sul
     verde, le sue a sinistra sul chiaro — e i tre fondi stanno qui perche' il build possa
     misurarli (vedi COPPIE in `Accessibilita.php`): il grigio che WhatsApp usa per l'orario sta
     a 4,19:1 sul loro verde e da noi non passerebbe. Il chiaro non e' bianco puro, come gli
     altri fondi di casa. */
  --chat-parato:#E5DED1;  --chat-mia:#DCF5D3;  --chat-sua:#FBF9F5;  --chat-spunta:#1A6285;

  /* Un solo stile di link: stesso colore del testo, con la riga sotto. Sui campi
     scuri l'azzurro, perche' li' la riga sotto da sola non basta a distinguerlo. */
  --accento:#0E2439;    --accento-cupo:#0E2439;   --ottone:#8E3420;
  --salto:#0E2439;      --salto-sopra:#F6F3EE;    --salto-testo:#0E2439;

  /* I GIUDIZI SUI NUMERI, e nient'altro. */
  --verde:#2F6B4F;      --ambra:#B07412;          --rosso:#B33A2B;

  /* Le tinte dei riquadri nel testo (`:::evidenza`, `:::attenzione`, `:::cosa-fare`).
     Non usano verde/ambra/rosso apposta: un avviso in una pagina non e' un
     indicatore fuori soglia, e confonderli toglie senso a tutt'e due. */
  --tinta-1:#E3E7EB;    --tinta-2:#F6E6E0;    --tinta-3:#E9E2D6;
  --tinta-4:#E3E7EB;    --tinta-5:#E9E2D6;
  --fam-1:#0E2439;      --fam-1-velo:#E3E7EB;   --fam-1-testo:#0E2439;
  --fam-2:#C2482B;      --fam-2-velo:#F6E6E0;   --fam-2-testo:#8E3420;
  --fam-3:#55585F;      --fam-3-velo:#E9E2D6;   --fam-3-testo:#33363D;

  --filo:rgba(22,24,29,.13);     --filo-2:rgba(22,24,29,.24);
  --filo-chiaro:rgba(246,243,238,.16);
  --vetro:rgba(22,24,29,.03);
  --ombra:0 18px 40px rgba(22,24,29,.10);
  --nebbia:rgba(22,24,29,.94);
  --errore:#B33A2B;

  /* UN GROTTESCO SOLO, con le cifre tabulari accese: meta' del sito sono numeri
     incolonnati, e se ballano si vede. Il serif corsivo compare UNA volta per
     pagina, sulla frase detta a voce alta: e' li' che rientra il calore. */
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --largo:min(68rem, 92vw);
  /* La colonna di testo sta sotto i 34rem. Il lettore ha cinquant'anni: il corpo
     piccolo lo perdi, e una riga lunga lo perdi due volte. */
  /* LA COLONNA E' 38rem, non 34 (21-09-2026). Aldo: «sono troppo strette in lettura». Misurate,
     le righe erano gia' fra 52 e 65 caratteri - dentro la soglia - quindi il difetto non era la
     lunghezza della riga ma il resto: una pagina intera chiusa in 544px al centro dello schermo,
     con la prosa a 16px in bastoni, contro i 17,6 in serif del vestito istituzionale. Colonna e
     corpo si cambiano INSIEME: allargare soltanto avrebbe portato le righe oltre i 75 caratteri,
     che e' il modo di rendere un testo piu' faticoso cercando di renderlo piu' comodo.
     Lo strumento per rimisurare: `node RevisioneSala/banchi/misura_righe.js [larghezza]`. */
  --colonna:min(38rem, 92vw);
  --molla:cubic-bezier(.2,.8,.25,1);
  color-scheme:light;
}

/* L'INVERSO COME COMPONENTE, per i blocchi dell'editor che chiedono `fondo: scuro`.
   Non e' un secondo tema del sito: i campi scuri della pagina usano i token
   `--campo-*` di `:root`, che si misurano. Questo serve dove un blocco vuole
   invertirsi da solo dentro una pagina chiara. */
.notturno{
  --fondo:#16181D;      --fondo-2:#0E2439;    --fondo-3:#1E2129;
  --testo:#F6F3EE;      --testo-2:#C9C6C0;    --tenue:#A8A49C;
  --accento:#8FC0F0;    --accento-cupo:#8FC0F0; --ottone:#E2A08C;
  --salto:#F6F3EE;      --salto-sopra:#16181D;  --salto-testo:#8FC0F0;
  --tinta-1:#1E2A36;    --tinta-2:#2A1F1B;    --tinta-3:#1E2129;
  --fam-1:#8FC0F0;      --fam-1-velo:#1B2733;   --fam-1-testo:#9CC7F3;
  --fam-2:#E2A08C;      --fam-2-velo:#2A1F1B;   --fam-2-testo:#E9B4A3;
  --fam-3:#A8A49C;      --fam-3-velo:#1E2129;   --fam-3-testo:#C9C6C0;
  --filo:rgba(246,243,238,.14);  --filo-2:rgba(246,243,238,.26);
  --vetro:rgba(246,243,238,.05);
  --nebbia:rgba(22,24,29,.94);
  color-scheme:dark;
  background:var(--fondo); color:var(--testo);
}

/* ─────────────────────────────────────────────────────────────────── il fondo */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--fondo); color:var(--testo);
  font:400 clamp(17px,4.6vw,19px)/1.55 var(--sans);
  font-feature-settings:"tnum" 1;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%; height:auto}
/* UN SOLO STILE DI LINK in tutto il sito: il colore del testo e la riga sotto. Due
   stili di link sono due promesse diverse, e il lettore impara solo la prima. */
a{color:inherit; text-decoration:none; border-bottom:1px solid var(--filo-2); padding-bottom:1px}
a:hover{border-bottom-color:currentColor}
:focus-visible{outline:3px solid var(--link-scuro); outline-offset:3px; border-radius:2px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

.salta-al-contenuto{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--campo-scuro); color:var(--su-scuro); padding:.7rem 1.1rem;
  border:0; border-radius:0 0 4px 0;
}
.salta-al-contenuto:focus{left:0}

/* Il nastro dell'anteprima. Deve dare fastidio: una bozza scambiata per una pagina
   pubblicata e' il modo piu' facile di pubblicare per sbaglio. */
.nastro-bozza{
  background:var(--campo-mattone); color:var(--su-mattone); text-align:center;
  font:500 13px/1 var(--sans); letter-spacing:.04em; padding:.55rem 1rem;
}

/* ─────────────────────────────────────────────────────────────────── la testata
   Scura, e non per gusto: la prima sezione della home e' un campo inchiostro, e una
   testata chiara ci farebbe sopra una riga che non c'entra niente. Cosi' la testata
   e' il bordo alto del primo campo. */

.testa{
  position:sticky; top:0; z-index:50;
  background:var(--campo-scuro); color:var(--su-scuro);
}
/* QUANTO E' ALTA LA TESTATA, detto una volta sola.
   Serve a chiunque si debba incollare SOTTO di lei: oggi l'intestazione della tavola di
   confronto, domani chiunque altro. Non e' un numero inventato — e' misurato sulla testata vera
   (62px sul telefono, 54 dal desktop in su: sotto gli 861 `.testa-riga` prende `flex-wrap` e un
   padding in piu', ed e' per questo che cambia).
   *Perche' un token e non un `top:62px` scritto in fondo al foglio*: quello sarebbe un SECONDO
   posto che dichiara quanto e' alta la testata, e si scosterebbe al primo ritocco del marchio —
   senza dare errore, solo con l'intestazione di una tabella nascosta dietro la barra nera.
   Chi cambia `.testa-riga` cambia anche questo. */
:root{ --testa-alta:62px; }
.testa-riga{
  width:var(--largo); margin:0 auto;
  display:flex; align-items:center; gap:1.4rem; min-height:3.4rem;
}
.marchio{
  font:500 1.05rem/1 var(--sans); letter-spacing:-.02em;
  color:var(--su-scuro); border:0; margin-right:auto;
}
.marchio:has(img){line-height:0}
.marchio img{height:24px; width:auto; display:block}
.marchio:hover img{opacity:.78; transition:opacity .2s}

/* ═══ IL MENU SI SCRIVE DAL TELEFONO IN SU ═══
   Quello che c'e' qui sotto, senza nessuna media query, e' la versione per il telefono: una
   lista in colonna dentro un pannello che il pulsante apre. La tendina che si apre al
   passaggio del mouse arriva DOPO, in `@media (min-width:861px)`, cioe' dove un mouse c'e'.

   Non e' un dettaglio d'ordine: scritto al contrario — desktop prima, telefono in una
   media query di correzione — le regole del desktop restano accese sul telefono finche'
   qualcuno non si ricorda di spegnerle una per una. E' successo qui: `white-space:nowrap`
   serviva alla tendina larga, sul telefono tagliava «Excel: quello che entra e quello che
   esce» a meta' schermo, e il bordo del pannello sbordava dal lato destro. */

.nav{flex-basis:100%}
.nav ul{list-style:none; display:flex; flex-direction:column; gap:0; margin:0; padding:.2rem 0 1.4rem}
.nav a, .nav span{
  display:block; font-size:16px; font-weight:400; color:var(--su-scuro); border:0;
  padding:.62rem 0;                    /* ~44px di bersaglio: il minimo per un dito */
}
.nav a:hover{border-bottom:0}
.nav .attiva > a{color:var(--link-scuro)}

/* IL GRUPPO CHE CONTIENE LA PAGINA APERTA si segna anche lui. Nel pannello del telefono i
   gruppi sono tutti aperti insieme: senza un segno, la voce accesa e' una fra quindici e
   l'occhio non trova a quale scaffale appartiene. */
.nav .ramo-attivo > span{color:var(--su-scuro)}
.nav .attiva > a::before{
  content:""; display:inline-block; width:3px; height:.85em; margin-right:.55rem;
  background:var(--link-scuro); border-radius:2px; vertical-align:-.06em;
}

/* IL TITOLO DI GRUPPO non e' una voce: e' il nome dello scaffale. Sul telefono si comporta
   come tale — piccolo, spaziato, staccato da sopra — cosi' le voci sotto si leggono come un
   elenco e non come cinque fratelli del titolo. */
.nav .ha-figli > span{
  font-size:12.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--su-scuro-3); padding:1.4rem 0 .3rem;
}
.nav .sotto{padding:0}
.nav .sotto a{padding:.62rem 0}

/* Le voci non ancora scritte si vedono e non si cliccano: dire che una pagina sta
   arrivando e' un'informazione, nasconderla e' una porta che si aprira' da sola un
   giorno senza che nessuno se ne accorga. */
.nav .preparazione{color:var(--su-scuro-3); cursor:default}
.nav .preparazione::after{
  content:"in preparazione"; font-size:12px; color:var(--su-scuro-3);
  margin-left:.5rem; letter-spacing:.02em;
}
/* La nota sta sulla stessa riga e va a capo da sola quando la voce e' lunga: mandarla
   sempre a capo raddoppiava l'altezza di undici voci — un menu da mille pixel di
   scorrimento, per dire undici volte «arriva». */
.nav .sotto .preparazione{padding-bottom:.55rem}

.apri-menu{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.75rem; height:2.75rem; border:1px solid var(--filo-chiaro); border-radius:4px;
  background:none; color:var(--su-scuro); cursor:pointer;
}
.apri-menu .tratti, .apri-menu .tratti::before, .apri-menu .tratti::after{
  display:block; width:17px; height:1.5px; background:currentColor; border-radius:2px; position:relative;
}
.apri-menu .tratti::before{content:""; position:absolute; top:-5px}
.apri-menu .tratti::after{content:""; position:absolute; top:5px}
.testa-riga{flex-wrap:wrap; padding:.55rem 0}

/* Senza JavaScript il menu resta aperto: la regola che lo chiude e' figlia di
   `.con-js`, che lo script mette solo se e' partito. Una navigazione che sparisce
   quando il JS non carica e' un sito che non c'e'. */
.con-js .nav{display:none}
.con-js .nav.aperto{display:block}

/* ═══ DA QUI IN SU C'E' UN MOUSE ═══ */
@media (min-width:861px){
  .testa-riga{flex-wrap:nowrap; padding:0}
  .apri-menu{display:none}
  .con-js .nav{display:block}
  .nav{flex-basis:auto}
  .nav ul{flex-direction:row; gap:1.4rem; padding:0}
  .nav a, .nav span{display:inline-block; font-size:15px; padding:.35rem 0}
  .nav a:hover{border-bottom:1px solid currentColor}
  .nav .attiva > a{border-bottom:1px solid var(--link-scuro)}
  .nav .attiva > a::before{display:none}          /* il trattino serve solo al pannello */
  /* Nella barra si vede solo il primo livello: se non fosse segnato, aprire una voce della
     tendina non cambierebbe UN PIXEL della testata. Il filo sotto il titolo del gruppo e' il
     minimo che dica «la pagina che stai leggendo sta qui dentro». */
  .nav .ramo-attivo > span{border-bottom:1px solid var(--su-scuro-3)}
  .nav .sotto .attiva > a{background:rgba(143,192,240,.14); color:var(--link-scuro)}
  .nav .ha-figli > span{
    font-size:15px; letter-spacing:0; text-transform:none;
    color:var(--su-scuro); padding:.35rem 0; cursor:default;
  }
  /* Il secondo livello. Due, e basta: il terzo e' un errore di build, non una tendina.
     IL PANNELLO HA BISOGNO DI UN BORDO, e non contraddice il «niente card»: si apre SOPRA
     un campo dello stesso colore, e senza un margine visibile le voci sembrerebbero
     scritte in mezzo alla pagina. Un tono piu' alto e un filo, niente ombra. */
  .nav .ha-figli{position:relative}
  .nav .sotto{
    display:none; position:absolute; left:-.9rem; top:100%; min-width:16.5rem;
    flex-direction:column; gap:0; padding:.5rem 0;
    background:#1E2129; border:1px solid var(--filo-chiaro); border-radius:0 0 4px 4px;
  }
  .nav .sotto li{white-space:nowrap}
  .nav .ha-figli:hover .sotto, .nav .ha-figli:focus-within .sotto{display:flex}
  .nav .sotto a{display:block; padding:.5rem .9rem; font-size:14.5px}
  .nav .sotto a:hover{background:rgba(246,243,238,.08); border-bottom:0}
  .nav .sotto .preparazione{padding:.5rem .9rem}
  .nav .sotto .preparazione::after{display:inline; margin-left:.5rem}
}

/* ═══ LA STRISCIA SOTTO LA TESTATA: DOVE SEI, E DOVE SEI CAPITATO ═══
   Fa due mestieri, e il secondo pesa di piu'.

   **Dove sei**: un menu a due livelli non lo dice da solo — si sceglie dalla tendina, la
   pagina cambia, e la barra resta identica. Sul telefono peggio: li' la barra ha solo il
   marchio e un bottone, quindi col menu chiuso non c'e' niente. Due passi, il gruppo e la
   pagina; non una briciola di pane completa, che qui non serve a nessuno.

   **Dove sei capitato**: la promessa del sito. E' l'unica riga che dice che cos'e' questo
   posto a chi arriva da una ricerca su una pagina profonda — «Caricare il bilancino del mese»
   apre su una domanda operativa di un prodotto mai sentito nominare, e la stessa frase stava
   solo nel piede, cioe' dopo tutta la pagina.

   Sta fuori dalle media query perche' nasce sul telefono: li' le due righe si impilano, sul
   desktop stanno sulla stessa riga ai due capi della colonna. */
.sei-qui{background:var(--fondo-2); border-bottom:1px solid var(--filo-2); padding:0 20px}
.sei-qui-dentro{
  max-width:var(--colonna); margin:0 auto; padding:.6rem 0;
  display:flex; flex-direction:column; gap:.15rem; font-size:13.5px;
}
.briciole{display:flex; flex-wrap:wrap; align-items:baseline; gap:.1rem .45rem}
.sei-qui .ramo, .sei-qui .ramo a{color:var(--tenue); border:0}
.sei-qui .ramo a:hover{border-bottom:1px solid currentColor}
.sei-qui .ramo::after{content:"›"; margin-left:.45rem; color:var(--tenue)}
.sei-qui .qui{color:var(--testo); font-weight:500}
.promessa-riga{margin:0; display:none; color:var(--tenue); font-size:12.5px; line-height:1.4}
/* SUL TELEFONO LA PROMESSA NON ESCE (Aldo, 21-09-2026: «mi basta il breadcrumb, mi occupa spazio
   e basta»). Sul telefono lo spazio sopra il titolo e' quello che decide se si legge la pagina;
   la briciola dice dove sei, la promessa resta dal desktop in su e nel piede. */
@media (min-width:861px){ .promessa-riga{display:block} }

/* LE DUE RIGHE RESTANO IMPILATE ANCHE SUL DESKTOP, e non e' pigrizia. Messe sulla stessa
   riga ai due capi della colonna si litigano trentaquattro rem: la briciola andava a capo e
   la promessa si troncava a meta' — «Sapere ogni mese come sta andando l'impresa, quando …»,
   che e' peggio di nessuna promessa. Allargare la striscia oltre la colonna non si puo':
   perderebbe l'allineamento col titolo, che e' quello che la fa leggere come parte della
   pagina e non come una barra di servizio. Due righe basse costano meno di tutt'e due i
   difetti. */

/* ─────────────────────────────────────────────────────────────────── il corpo */

main{display:block; min-height:60vh}
.pagina-autore{display:block}

/* ─────────────────────────────────────────────── IL RITMO DEI CAMPI
   Ogni sezione e' un campo pieno di un colore solo, a piena larghezza, e i campi si
   alternano chiaro e scuro. Dentro, la colonna stretta. Il respiro sta QUI, fra un
   campo e l'altro: dentro il paragrafo il testo resta fitto, perche' argomenta. */

.campo{padding:76px 20px}
.campo > .dentro{max-width:var(--colonna); margin:0 auto}
.campo--carta{background:var(--fondo); color:var(--testo)}
.campo--sabbia{background:var(--fondo-2); color:var(--testo)}
.campo--inchiostro{background:var(--campo-scuro); color:var(--su-scuro)}
.campo--blu{background:var(--campo-blu); color:var(--su-scuro)}
.campo--mattone{background:var(--campo-mattone); color:var(--su-mattone)}
.campo--inchiostro a, .campo--blu a{color:var(--link-scuro); border-bottom-color:rgba(143,192,240,.45)}
.campo--mattone a{color:var(--su-mattone); border-bottom-color:rgba(255,244,239,.5)}

.campo h1{font:600 var(--titolo-pagina)/1.1 var(--sans); letter-spacing:-.022em; margin:0}
.campo h2{font:600 var(--titolo-sezione)/1.15 var(--sans); letter-spacing:-.022em; margin:0}
.campo p{margin:1.15em 0 0; max-width:var(--colonna)}
/* LA PROSA DEI CAMPI SI LEGGE IN SERIF, come negli scritti e nel vestito istituzionale. Qui non
   c'e' un contenitore `.prosa`: le pagine d'autore (`per-il-commercialista`, `per-il-controller`,
   `listino`, `dove-sei`) scrivono i paragrafi direttamente nei campi, e prendevano il carattere
   del `body` - bastoni a 19px. Si prendono SOLO i paragrafi e le voci d'elenco SENZA classe:
   occhielli, pastiglie e bottoni hanno una classe e un carattere loro, e un `.campo p` largo li
   avrebbe voltati in serif insieme alla prosa. */
.campo p:not([class]), .campo ul:not([class]) > li, .campo ol:not([class]) > li{
  font-family:var(--serif); font-size:1.1rem; line-height:1.62;
}
.campo p:first-of-type{margin-top:1.4em}
.campo .sotto{margin-top:1.5em; font-size:1.05em; color:var(--su-scuro-2)}
.campo--carta .sotto, .campo--sabbia .sotto{color:var(--tenue)}
.campo .forte{font-weight:500}
.campo .avanti{display:inline-block; margin-top:2.2em; font-size:1.02em}

/* LA FRASE A VOCE ALTA. Una per pagina: e' l'unico posto dove entra il serif, e se
   compare due volte non e' piu' una voce, e' un carattere. */
.voce-alta{
  font:italic 400 clamp(24px,6.4vw,36px)/1.32 var(--serif);
  letter-spacing:-.01em; margin-top:1.6em;
}

@media (min-width:760px){
  .campo{padding:120px 40px}
}

/* L'ARTICOLO — la pagina di contenuto, resa dal motore dell'Academy.
   Qui sta la differenza che conta: dentro l'applicazione il contenuto formativo si
   legge in un visore, largo, con la barra dei passi e il colore dell'Academy. Sul
   sito e' un TESTO PUBBLICATO: una colonna sola, il fondo del sito. Stesso markdown,
   altro mestiere. */
.articolo{width:var(--colonna); margin:0 auto; padding:3.6rem 0 4.5rem}
.articolo-testa{margin-bottom:2.4rem}
.occhiello{
  font-family:var(--sans); font-size:var(--occhiello-corpo); font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--tenue); margin:0 0 .9rem;
}
/* LA RETE PER I CAMPI SCURI, messa prima che serva (14-09-2026). Oggi tutti e otto gli occhielli
   del sito stanno su fondo chiaro, quindi non c'e' niente da correggere — ma `--tenue` dentro un
   campo inchiostro o blu fa 2,49:1 e 2,22:1, ed e' esattamente il difetto trovato lo stesso
   giorno sui titoli dei paragrafi: un colore scritto per i fondi chiari che si porta dentro il
   buio per EREDITA'. Il primo occhiello messo li' dentro sarebbe illeggibile, e il banco non lo
   direbbe (misura un elenco di coppie, non la pagina resa: vedi Backlog).
   Costa due righe adesso; scoprirlo dopo costa una pagina pubblicata che non si legge. */
.campo--inchiostro .occhiello, .campo--blu .occhiello{color:var(--su-scuro-3)}
.campo--mattone .occhiello{color:var(--su-mattone)}
.articolo-testa h1{
  font:600 var(--titolo-pagina)/1.1 var(--sans);
  letter-spacing:-.022em; margin:0 0 .9rem;
}
.sommario{font-size:1.1rem; line-height:1.5; color:var(--tenue); margin:0}

/* ═══ LA TESTATA DI UNO SCRITTO: UNA FASCIA, NON UNA RIGA DI TESTO ═══
   Il titolo stava sullo stesso fondo del testo, e un articolo cominciava senza che si vedesse
   dove comincia. Adesso e' una fascia scura a tutta larghezza col fondo grafico (la stessa
   macchina degli archivi: `fondo_animato`), e il testo resta nella sua colonna. */
.articolo-testa--fondo{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--campo-scuro); color:var(--su-scuro);
  padding:clamp(3rem,6.5vw,4.6rem) 0 clamp(2.4rem,4.5vw,3.4rem); margin-bottom:0;
  --spline-linea:var(--link-scuro); --spline-nodo:var(--maglia-punto, #A694DC);
}
.articolo-testa--fondo .articolo-dentro{position:relative; z-index:1; width:var(--colonna); margin:0 auto}
.articolo-testa--fondo .occhiello{color:var(--su-scuro-3)}
.articolo-testa--fondo h1{color:var(--su-scuro)}
.articolo-testa--fondo .sommario{color:var(--su-scuro-2)}
.articolo-testa--fondo .invito-presto a{color:var(--link-scuro)}
.articolo-testa--fondo .invito-presto a::before{color:var(--link-scuro)}

/* LA TINTA DELL'ARGOMENTO. Si cambia il colore del DISEGNO (le linee della spline, i punti
   della maglia), mai il fondo: il fondo e' una coppia col testo che ci sta sopra, e
   cambiarlo per otto argomenti vorrebbe dire rimisurare otto contrasti. Cosi' ogni
   categoria si riconosce e la leggibilita' resta quella misurata una volta. */
.arg-controllo-di-gestione{--spline-linea:#8FC0F0; --spline-nodo:#A694DC; --maglia-punto:#8FC0F0}
.arg-adeguati-assetti{--spline-linea:#A8A49C; --spline-nodo:#8FC0F0; --maglia-punto:#A8A49C}
.arg-analisi{--spline-linea:#8FC0F0; --spline-nodo:#E2A08C; --maglia-punto:#8FC0F0}
.arg-software{--spline-linea:#A694DC; --spline-nodo:#8FC0F0; --maglia-punto:#A694DC}
.arg-intelligenza-artificiale{--spline-linea:#A694DC; --spline-nodo:#E2A08C; --maglia-punto:#A694DC}
.arg-design-thinking{--spline-linea:#E2A08C; --spline-nodo:#8FC0F0; --maglia-punto:#E2A08C}
.arg-visual-thinking{--spline-linea:#E2A08C; --spline-nodo:#A694DC; --maglia-punto:#E2A08C}
.arg-organizzazione{--spline-linea:#8FC0F0; --spline-nodo:#A8A49C; --maglia-punto:#8FC0F0}

/* ═══ DA LEGGERE DOPO ═══
   Tre schede in fondo allo scritto. Sul telefono in colonna, dal desktop affiancate. */
.correlati{width:var(--colonna); margin:3.2rem auto 0; padding-top:2rem; border-top:1px solid var(--filo)}
.correlati-titolo{font-family:var(--sans); font-size:.78rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--tenue); font-weight:600; margin:0 0 1.1rem}
.correlati ul{list-style:none; margin:0; padding:0; display:grid; gap:1.4rem}
@media (min-width:861px){ .correlati ul{grid-template-columns:repeat(3, 1fr); gap:1.6rem} }
.correlati a{display:block; text-decoration:none; color:inherit}
.correlati img{display:block; width:100%; height:auto; border-radius:4px;
  border:1px solid var(--filo); margin:0 0 .7rem}
.correlato-titolo{display:block; font-family:var(--serif); font-weight:600; font-size:1.1rem;
  line-height:1.25; letter-spacing:-.01em; margin:0 0 .35rem}
.correlati a:hover .correlato-titolo{text-decoration:underline}
.correlato-riga{display:block; font-size:.92rem; line-height:1.45; color:var(--tenue)}
/* L'invito presto degli scritti: una riga, non un bottone - il bottone pieno e' uno per
   pagina, e sta nel richiamo in fondo. Serve a chi si riconosce gia' nel sommario. */
.invito-presto{margin:1rem 0 0; font-family:var(--sans); font-size:.98rem; line-height:1.45}
.invito-presto a{color:var(--testo)}
.invito-presto a::before{content:"\2192\00a0"; color:var(--accento)}

/* LA PROSA SI LEGGE IN SERIF, come nel vestito istituzionale (`body` di `istituzionale.css`):
   stessa famiglia, stesso corpo, stessa interlinea. Passando dalla home a un Approfondimento il
   testo cambiava carattere e rimpiccioliva, e un muro di bastoni a 16px e' quello che fa dire
   «stretto» anche quando la riga e' della misura giusta. I titoli dentro la prosa restano in
   bastoni: li dichiarano da se', qui sotto. */
.prosa{font-family:var(--serif); font-size:1.1rem; line-height:1.62}
.prosa > * + *{margin-top:1.15em}
.prosa h2{
  font:600 var(--titolo-sezione)/1.15 var(--sans); letter-spacing:-.022em;
  margin-top:2.4em; margin-bottom:.2em;
}
.prosa h3{font:600 1.2rem/1.3 var(--sans); letter-spacing:-.018em; margin-top:1.9em; margin-bottom:.1em}
.prosa h4{font:500 1.02rem/1.35 var(--sans); color:var(--tenue); margin-top:1.7em}
.prosa ul,.prosa ol{padding-left:1.3em}
.prosa li + li{margin-top:.4em}
/* UNA STRINGA DI CODICE SENZA SPAZI NON VA A CAPO DA SOLA, e sul telefono esce dalla
   pagina. `white-space:pre-wrap` manda a capo sugli SPAZI, e in
   `localStorage.setItem('ap_niente_tracce','1')` di spazi non ce n'e' uno: la pagina
   Cookie sbordava di 11px a 390px, e con lei tutto il documento.
   `anywhere` spezza dove serve e solo quando serve. Trovato da
   `node RevisioneSala/banchi/prova_larghezze.js`. */
.prosa code{
  font:400 .9em/1.4 ui-monospace,"Cascadia Mono",Consolas,monospace;
  background:var(--fondo-2); border-radius:3px; padding:.1em .35em;
  overflow-wrap:anywhere;
}
/* Niente ombra e niente angoli tondi sulle fotografie: la linea dice campi pieni e
   niente card, e un'immagine che galleggia su un'ombra e' una card con la foto dentro. */
.prosa img{display:block; margin:2em auto; border-radius:3px}
/* LA FIGURA PRENDE TUTTA LA COLONNA. Il `<figure>` nasce col margine del browser, 40px per
   lato: su un telefono da 390 sono 80px, e ogni immagine di ogni scritto usciva larga 279
   invece di 359 - il 22% della colonna buttato, proprio dove il dettaglio conta. E la
   didascalia, senza una regola sua, veniva resa come un paragrafo di prosa. */
.prosa figure{margin:2em 0}
.prosa figure img{margin:0; max-width:100%; height:auto}
.prosa figcaption{margin-top:.7em; font-family:var(--sans); font-size:.92rem; line-height:1.45;
  color:var(--tenue)}
.prosa blockquote{
  margin:2em 0; padding-left:1.2em; border-left:2px solid var(--filo-2);
  font:italic 400 1.15rem/1.5 var(--serif); color:var(--testo-2);
}
.prosa hr{border:0; border-top:1px solid var(--filo); margin:2.8em 0}

/* ═══ DOVE COMINCIA IL LUNGO ═══
   Terzo obbligo della pagina lunga: chi arriva deve vedere che da li' in giu' si entra nel
   discorso esteso. Una banda e un fondo suo, e un CARTELLO corto - non un paragrafo: al
   massimo novanta caratteri, o non e' un cartello, e' l'inizio del discorso. */
/* LA FONTE DI UN DATO O DI UNA FIGURA. Un numero senza fonte e' un'opinione con le cifre, e una
   figura senza fonte e' un'illustrazione: la riga sta attaccata a quello che sostiene, non in
   fondo alla pagina dove non la legge nessuno. Si usa sotto una figcaption oppure da sola,
   subito dopo il paragrafo che porta il dato. */
.prosa .fonte, .prosa figcaption .fonte{
  display:block; margin-top:.5em; font-family:var(--sans); font-size:.85rem; line-height:1.4;
  color:var(--tenue);
}
.prosa p.fonte{margin-top:-.6em}

/* CHI L'HA SCRITTO, in fondo. */
.autore-piede{width:var(--colonna); margin:2.8rem auto 0; padding-top:1.4rem;
  border-top:1px solid var(--filo)}
.autore-nome{margin:0; font-family:var(--sans); font-weight:600; font-size:1rem}
.autore-ruolo{margin:.25rem 0 0; font-size:.92rem; line-height:1.45; color:var(--tenue)}

.prosa .seguito{
  margin:2.6em 0 1.6em; padding:1rem 0 0;
  border-top:4px solid var(--accento);
  font-family:var(--sans); font-size:.8rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tenue);
  background:transparent;
}

/* ── I BLOCCHI DELL'ACADEMY, vestiti della linea del sito ────────────────────
   `:::evidenza`, `:::attenzione`, `:::pullquote`... escono dal motore come
   `<div class="block-nome">`. Dentro l'applicazione li veste `ap-elements.css`
   con i colori dell'Academy; qui li vestiamo noi. Stesso contenuto, due case. */
.prosa [class^="block-"]{
  margin:2em 0; padding:1.2rem 1.4rem; border-radius:4px;
  background:var(--fondo-2);
  font-size:.98rem; line-height:1.58;
}
.prosa [class^="block-"] > *:first-child{margin-top:0}
.prosa [class^="block-"] > *:last-child{margin-bottom:0}

.prosa .block-evidenza,
.prosa .block-perche{background:var(--fam-1-velo); box-shadow:inset 3px 0 0 var(--fam-1)}
.prosa .block-attenzione{background:var(--fam-2-velo); box-shadow:inset 3px 0 0 var(--fam-2)}
.prosa .block-cosa-fare,
.prosa .block-handoff{background:var(--fam-3-velo); box-shadow:inset 3px 0 0 var(--fam-3)}
.prosa .block-formula{
  font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-size:.96rem;
  background:var(--fondo-3);
}
/* La frase a voce alta dentro una pagina di prosa: stesso serif corsivo dei campi. */
.prosa .block-pullquote{
  background:none; border-radius:0; padding:1.4rem 0;
  border-top:1px solid var(--filo); border-bottom:1px solid var(--filo);
  font:italic 400 1.4rem/1.4 var(--serif); letter-spacing:-.01em; color:var(--testo);
  text-align:left;
}
.prosa .block-meta{
  background:none; border-left:2px solid var(--filo-2); border-radius:0;
  padding:.2rem 0 .2rem 1.1rem; font-size:.92rem; color:var(--tenue);
}
.prosa .block-grid{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); background:none; padding:0}
.prosa .block-hero{background:var(--tinta-1); padding:1.8rem}
.prosa .block-quiz{background:var(--tinta-4)}

/* Un blocco che l'Academy conosce e il sito no NON deve sparire: esce col fondo
   neutro della regola generale qui sopra. Sparire in silenzio e' il modo in cui un
   contenuto si perde senza che nessuno lo veda. */

.tag{
  display:inline-block; font-size:12.5px; font-weight:500; letter-spacing:.02em;
  color:var(--fam-1-testo); background:var(--fam-1-velo);
  padding:.28rem .7rem; border-radius:3px; border:0;
}
.tag:hover{background:var(--fondo-3)}
.articolo-piede{margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--filo)}

/* IL RICHIAMO IN FONDO A UNO SCRITTO. Uno per pagina, e lo mette il template: se lo scrivesse
   chi redige il testo, il pezzo nuovo nascerebbe senza. Il fondo e' quello dei campi sabbia, e
   il bottone e' il bottone di casa — un secondo stile di bottone qui vorrebbe dire due modi di
   dire «vai avanti» nella stessa pagina. */
.richiamo{
  margin-top:3.4rem; padding:2rem 1.9rem;
  background:var(--fondo-2); border-radius:4px;
  border-top:2px solid var(--campo-mattone);
}
.richiamo .occhiello{margin-bottom:.6rem}
.richiamo h2{
  font:600 var(--titolo-sezione)/1.15 var(--sans); letter-spacing:-.022em; margin:0 0 .7rem;
}
.richiamo p{margin:0 0 1.3rem; line-height:1.55; color:var(--testo-2)}
.richiamo p:last-child{margin-bottom:0}

/* Una pagina di CONTENUTO: testo in colonna, come un articolo ma senza firma ne' data — e' una
   pagina del sito, non uno scritto datato. Serve alle pagine che arrivano dal markdown: senza
   `.prosa` uscirebbero a piena larghezza e senza respiro, e sembrerebbero rotte. */
.contenuto{width:var(--colonna); margin:0 auto; padding:3.6rem 0 4.5rem}
.contenuto-testa{margin-bottom:2.2rem}
.contenuto-testa h1{
  font:600 var(--titolo-pagina)/1.1 var(--sans); letter-spacing:-.022em; margin:0 0 .8rem;
}

/* ─────────────────────────────────────────────────────────────────── l'archivio */

/* La testata sta FUORI dalla colonna (template/archivio.html), cosi' quella con la fotografia
   puo' andare a tutta larghezza senza `100vw`, che conta la barra di scorrimento e sborda di
   lato. Senza fotografia misura come prima: colonna, 3.6rem sopra, e l'elenco sotto. */
/* L'ARCHIVIO E' PIU' LARGO DI UNA PAGINA DI TESTO: qui non si legge, si sceglie.
   La colonna da 38rem serve alla prosa; una griglia a due colonne dentro 38rem
   farebbe due strisce. Il sommario resta stretto, perche' quello si legge. */
.archivio-testa{width:min(62rem, 92vw); margin:0 auto; padding:3.6rem 0 0}
.archivio-testa .sommario{max-width:38rem}
.archivio{width:min(62rem, 92vw); margin:0 auto; padding:0 0 4.5rem}
.archivio-testa h1{font:600 var(--titolo-pagina)/1.1 var(--sans); letter-spacing:-.022em; margin:0 0 .7rem}
.archivio-testa .quante{font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--tenue); margin:.9rem 0 0}

/* ── LA TESTATA SCURA CON LE SPLINE (`sito.json → fondo_tag`) ─────────────────────────────
   La linea della home nuova: fondo inchiostro e un motivo che si muove al posto della
   fotografia (Aldo, 20-09-2026). Qui il motivo sono quattro curve che ondeggiano attorno a una
   riga ferma — il ritmo e il livello dichiarato — e i nodi battono i periodi. Il disegno sta in
   `blocchi-comuni/spline.html`, il perche' nel `.md` accanto; qui c'e' solo dove sta.
   Il testo va SOPRA (`z-index:1`): il canvas e' un fondo, non un comando, e non prende clic.
   Le tinte discendono dalla tavolozza: `--link-scuro` e' il blu che la carta dichiara per i
   fondi scuri, `--maglia-punto` e' il lilla dei punti della home — i nodi parlano la stessa
   lingua apposta. */
.archivio-testa--scura{
  position:relative; overflow:hidden; isolation:isolate; width:auto;
  background:var(--campo-scuro); color:var(--su-scuro);
  padding:clamp(3.4rem,7vw,5rem) 0 clamp(2.6rem,5vw,3.6rem);
  --spline-linea:var(--link-scuro); --spline-nodo:var(--maglia-punto, #A694DC);
}
.archivio-testa--scura .archivio-dentro{position:relative; z-index:1; width:var(--colonna); margin:0 auto}
.archivio-testa--scura h1{color:var(--su-scuro)}
.archivio-testa--scura .sommario{color:var(--su-scuro-2)}
.archivio-testa--scura .quante{color:var(--su-scuro-3)}
.spline{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; line-height:0}
.spline canvas{
  display:block; color:var(--spline-linea);
  /* LA MASCHERA SMORZA DOVE CI SONO LE PAROLE, come fa la maglia sulla home, e per la stessa
     ragione: non e' il contrasto (il conto sta nel blocco) ma la lettura — una curva che passa
     in mezzo a una riga la fa rileggere. Al centro resta il 25%, ai bordi la figura e' piena. */
  -webkit-mask-image:radial-gradient(ellipse 64% 66% at 42% 52%, rgba(0,0,0,.25) 0%, #000 78%);
          mask-image:radial-gradient(ellipse 64% 66% at 42% 52%, rgba(0,0,0,.25) 0%, #000 78%);
}
@media print{ .spline{display:none} }

/* LA TESTATA CON LA FOTOGRAFIA (`sito.json → apertura_tag`). La foto si vede per intero e il
   testo sta in un riquadro color carta: e' il velo «dietro il testo», non sulla foto. Il
   pavimento di contrasto e' il riquadro al 93%: sul caso peggiore (foto nera) il fondo resta
   sopra #E4E1DD, e --tenue ci sta a 5,7:1, --testo a 14:1. Il velo a tutta superficie che la
   porta emette per le pagine qui non serve e si spegne.
   Il movimento lo fa `apertura.js`, come sulle pagine: la foto e' piu' alta della testata
   (124%) perche' scorrendo scende piu' lenta del testo, e il margine copre lo spostamento
   finche' la testata e' in vista. */
/* LA FOTO E' UNA FASCIA, NON UNA COPERTINA. Alla prima versione la testata prendeva 600px su
   una scrivania da 900: gli argomenti e gli scritti — cioe' la ragione per cui si apre questa
   pagina — si vedevano solo scorrendo (Aldo, 19-09-2026: «offusca gli argomenti»). Adesso sopra
   la piega stanno titolo, argomenti e l'inizio del primo scritto, anche su un portatile 1280x720.
   AL TELEFONO il testo NON sta sopra la foto: su una colonna stretta il riquadro copriva
   proprio il soggetto (l'uomo sul molo). La foto e' una fascia alta 44vw e il testo le sta
   sotto, sul fondo della pagina. La foto e' piu' alta della fascia (+12vw sopra e sotto)
   perche' scorrendo scende piu' lenta del testo, e il margine deve coprire lo spostamento
   finche' la fascia e' in vista. `max-width:none`: la regola generale `img{max-width:100%}`
   la accorciava, e a destra restava una striscia vuota. */
.archivio-testa--foto{
  position:relative; overflow:hidden; isolation:isolate;
  width:auto; padding:44vw 0 0;
}
.archivio-testa--foto .sfondo{
  position:absolute; left:-3%; top:-12vw; width:106%; max-width:none; height:68vw;
  object-fit:cover; object-position:30% 40%; z-index:-2; will-change:transform;
}
.archivio-testa--foto + .archivio .argomenti{margin-top:1.8rem}
.archivio-testa--foto .velo{display:none}
/* Il fondo chiaro va da bordo a bordo (largo quanto la colonna, lasciava due strisce di foto ai
   lati del testo); il testo resta allineato alla colonna con l'imbottitura. */
.archivio-testa--foto .archivio-dentro{
  width:auto; margin:0; background:var(--fondo);
  padding:1.8rem calc((100% - var(--colonna)) / 2) 0;
}
@media (min-width:861px){
  .archivio-testa--foto{padding:clamp(6rem,10vw,9rem) 0 1.8rem}
  .archivio-testa--foto .sfondo{top:-12%; height:124%; object-position:30% 42%}
  .archivio-testa--foto h1{margin-bottom:.45rem}
  .archivio-testa--foto .quante{margin-top:.6rem}
  .archivio-testa--foto .archivio-dentro{
    width:var(--colonna); margin:0 auto; padding:1.2rem 1.5rem 1.05rem;
    background:rgba(246,243,238,.93); border-radius:3px; box-shadow:var(--ombra);
  }
}
@media (prefers-reduced-motion: reduce){ .archivio-testa--foto .sfondo{transform:none !important} }
:root[data-moto="fermo"] .archivio-testa--foto .sfondo{transform:none !important}
/* ═══ L'ELENCO DI UN ARCHIVIO: SCHEDE, NON RIGHE ═══
   Una colonna sola di titoli, date e righette faceva un elenco senza punto d'ingresso: l'occhio
   parte da dove capita e scorre via. Adesso e' una griglia di schede, con la PRIMA in evidenza
   (immagine grande a sinistra, titolo grande a destra) e le altre a due colonne dal desktop.
   Le voci senza immagine restano solo testo: l'irregolarita' fa ritmo, un riquadro vuoto no. */
.archivio-elenco{list-style:none; margin:2.6rem 0 0; padding:0}
/* DUE COLONNE CHE SI RIEMPIONO DA SOLE, non una griglia. Con la griglia ogni riga e' alta
   quanto la scheda piu' alta, e sotto una scheda corta accanto a una con la fotografia resta
   un buco bianco grande come mezza schermata. Il flusso a colonne fa scorrere la scheda
   successiva su, e le due colonne si bilanciano da se'.
   Il prezzo, dichiarato: l'ordine diventa quello del giornale - si scende tutta la colonna di
   sinistra e poi si risale a destra - invece di andare a zigzag. Su un elenco in ordine di data
   e' una lettura che si conosce, e vale il buco in meno. */
@media (min-width:861px){
  .archivio-elenco{columns:2; column-gap:2rem}
}
.archivio-elenco .voce{padding:1.5rem 0 0; border-top:1px solid var(--filo); min-width:0;
  margin:0 0 2.2rem; break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid}
.voce-carta{display:block; text-decoration:none; color:inherit}
/* IL TITOLO DI UNA SCHEDA E' IL SERIF, GRANDE E GRASSETTO. In un elenco si sceglie guardando i
   titoli: in Inter a 1.25rem erano della stessa taglia della descrizione, e l'occhio non aveva
   un appiglio. Il peso 600 del serif e' un carattere vero, aggiunto apposta - il finto grassetto
   che il browser costruisce ingrassando il 400 sporca le grazie. */
.voce-titolo{
  display:block; font:600 1.45rem/1.2 var(--serif); letter-spacing:-.012em;
  color:var(--testo); border:0;
}
.voce-carta:hover .voce-titolo{text-decoration:underline}
.voce time{display:block; font-size:12.5px; color:var(--tenue); margin-top:.35rem}

/* LA VOCE IN EVIDENZA sta in una lista sua, sopra il flusso. Sul telefono e' una scheda come
   le altre, solo col titolo piu' grande: due colonne su 390px non sono due colonne. */
.archivio-evidenza{list-style:none; margin:2.6rem 0 0; padding:0}
.archivio-evidenza + .archivio-elenco{margin-top:2.4rem}
.voce--evidenza .voce-titolo{font-size:1.8rem; line-height:1.14}
@media (min-width:861px){
  .voce--evidenza .voce-carta{display:grid; grid-template-columns:1.15fr .85fr;
    gap:0 2rem; align-items:center}
  .voce--evidenza .voce-miniatura{grid-column:1; grid-row:1 / span 3; margin:0; aspect-ratio:16/10}
  .voce--evidenza .voce-titolo{grid-column:2; grid-row:1; align-self:end; font-size:2.4rem}
  .voce--evidenza time{grid-column:2; grid-row:2}
  .voce--evidenza .voce-riga{grid-column:2; grid-row:3; align-self:start; font-size:1.05rem}
}
/* LA MINIATURA STA IN CIMA ALLA SCHEDA e prende tutta la cella, con un taglio fisso: le
   immagini hanno proporzioni diverse fra loro, e senza un rapporto dichiarato la griglia
   uscirebbe a gradini. `cover` taglia, non deforma. */
.voce-miniatura{display:block; width:100%; aspect-ratio:3/2; object-fit:cover; margin:.9rem 0;
  border-radius:4px; border:1px solid var(--filo)}
.voce-riga{display:block; margin:.6rem 0 0; color:var(--tenue); font-size:.98rem}
.voce-tag{margin:.7rem 0 0; display:flex; flex-wrap:wrap; gap:.35rem}

/* ─────────────────────────────────────────────────── LA BARRA DEGLI ARGOMENTI
   Un elenco in ordine di data risponde a una domanda sola, «che cosa c'e' di nuovo»: a chi
   arriva cercando un tema non dice niente. Gli argomenti stanno SOPRA l'elenco, prima di
   leggerlo, perche' e' li' che si decide se scorrere tutto o filtrare.
   Le pastiglie scorrono in orizzontale sul telefono invece di andare a capo tre volte: sopra
   l'elenco, quattro righe di filtri sono un muro davanti alla cosa che si e' venuti a leggere. */
.argomenti{
  /* Solo il filo SOPRA: sotto ce l'ha gia' la prima voce dell'elenco, e due righe a un
     centimetro di distanza sembrano un riquadro vuoto. */
  margin:2.4rem 0 0; padding:1.2rem 0 .4rem;
  border-top:1px solid var(--filo);
}
.argomenti-riga{
  font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--tenue);
  margin:0 0 .8rem;
}
.argomenti ul{
  list-style:none; margin:0; padding:0 0 .2rem;
  display:flex; flex-wrap:wrap; gap:.4rem;
}
.argomento{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:14px; font-weight:500; line-height:1.2; color:var(--testo-2);
  background:var(--fondo-2); border:1px solid transparent; border-radius:3px;
  padding:.4rem .7rem;
}
.argomento:hover{background:var(--fondo-3); color:var(--testo); border-color:transparent}
.argomento-quanti{
  font-size:12.5px; font-weight:400; color:var(--tenue); font-variant-numeric:tabular-nums;
}
/* L'argomento che si sta guardando: fondo scuro, non un bordo. Un bordo in piu' su una
   pastiglia fra venti non si vede — e quello che deve dire e' «sei qui», che e' la stessa
   cosa che dice il menu quando segna la voce aperta. */
.argomento.attivo{background:var(--accento); color:var(--su-scuro); border-color:var(--accento)}
.argomento.attivo:hover{background:var(--accento); color:var(--su-scuro)}
.argomento.attivo .argomento-quanti{color:var(--su-scuro-2)}

/* ─────────────────────────────────────────────── i documenti (privacy, cookie, accessibilita')
   Un documento di legge si legge, non si sfoglia: colonna stretta come un articolo, ma senza
   firma in vetrina e senza tag. Il corpo riusa `.prosa`, che e' gia' la lingua del sito: una
   pagina legale con una grafica sua sembra scritta da qualcun altro, e in un certo senso lo e'. */

.documento{width:var(--colonna); margin:0 auto; padding:3.6rem 0 4.5rem}
.documento-testa{margin-bottom:2.2rem; padding-bottom:1.4rem; border-bottom:1px solid var(--filo)}
.documento-testa h1{
  font:600 var(--titolo-pagina)/1.1 var(--sans); letter-spacing:-.022em; margin:0 0 .7rem;
}
.documento-data{font-size:12.5px; color:var(--tenue); margin:.9rem 0 0}
.documento .prosa h2{margin-top:2.2em}

/* ─────────────────────────────────────────────────────────────────── il piede
   La coda e' un campo inchiostro come gli altri, e usa i token dei campi scuri —
   non un `.notturno` locale: quelli stanno fuori da `:root` e la misura non li
   guarderebbe. Qui invece ogni colore e' una coppia che il build controlla. */

.piede{margin-top:0; background:var(--campo-scuro); color:var(--su-scuro-2)}
.piede-dentro{width:var(--largo); margin:0 auto; padding:3.4rem 0 3.8rem}
.piede-promessa{
  font:400 1.15rem/1.45 var(--sans); letter-spacing:-.015em;
  color:var(--su-scuro); margin:0 0 2rem; max-width:30rem;
}
.piede-nav ul, .piede-utility ul{
  list-style:none; display:flex; flex-wrap:wrap; gap:1.2rem; margin:0 0 1rem; padding:0;
}
.piede a{color:var(--su-scuro-2); border:0}
.piede a:hover{border-bottom:1px solid currentColor}
.piede-nav a{font-size:15px}
.piede-utility a{font-size:13.5px; color:var(--su-scuro-3)}
/* IL BLOCCO LEGALE. Sta in fondo a OGNI pagina e non e' decorazione: ragione sociale, sede e
   partita IVA sono un obbligo (art. 2250 c.c., d.lgs. 70/2003). Piccolo ma leggibile: 13px, e
   il colore resta sopra 4,5:1 sul fondo del piede — il banco lo misura. */
.piede-legale-blocco{margin-top:1.8rem; padding-top:1.4rem; border-top:1px solid var(--filo-chiaro)}
.piede-legale{font-size:13px; color:var(--su-scuro-3); margin:0; line-height:1.7}
.piede-legale .piede-chi{color:var(--su-scuro-2); font-weight:500}
.piede-contatti{font-size:13px; color:var(--su-scuro-3); margin:.35rem 0 0}
.piede-contatti a{color:var(--su-scuro-3)}
.piede-nota{font-size:13px; color:var(--su-scuro-3); margin:.6rem 0 0; max-width:44rem}
.piede-firma{font-size:13px; color:var(--su-scuro-3); margin:1.6rem 0 0}

/* ─────────────────────────────────────────────────────────── pezzi per le pagine d'autore
   Poche classi, e generiche: una pagina d'autore porta il proprio layout nel
   frammento, non nomi di classe che poi vivono qui e nessuno sa piu' chi li usa. */

.sezione{width:var(--largo); margin:0 auto; padding:4.5rem 0}
.sezione--stretta{width:var(--colonna)}
.sezione--tinta{background:var(--fondo-2); width:100%; padding-left:calc((100vw - var(--largo))/2); padding-right:calc((100vw - var(--largo))/2)}
.titolone{font:500 clamp(2.1rem,5.4vw,3.4rem)/1.04 var(--sans); letter-spacing:-.035em; margin:0 0 1rem}
.sottotitolo{font-size:clamp(1.05rem,2.2vw,1.25rem); line-height:1.5; color:var(--tenue); margin:0; max-width:34rem}
/* Un solo bottone pieno in tutto il sito, e sta sulla porta finale. Se ce ne sono
   due la porta e' un bivio, e un bivio alla fine di una pagina non lo prende nessuno. */
.pulsante{
  display:inline-block; background:var(--salto); color:var(--salto-sopra);
  font:500 15px/1 var(--sans); border:0;
  padding:.95rem 1.6rem; border-radius:4px; transition:transform .18s var(--molla);
}
.pulsante:hover{color:var(--salto-sopra); transform:translateY(-1px); border:0}
.campo--inchiostro .pulsante, .campo--blu .pulsante{background:var(--su-scuro); color:var(--campo-scuro)}
.pulsante--filo{background:none; color:var(--salto-testo); box-shadow:inset 0 0 0 1px var(--filo-2)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
}
@media print{
  .testa,.piede,.salta-al-contenuto,.nastro-bozza{display:none}
  .articolo,.archivio,.archivio-testa,.campo{width:auto; background:none; color:#000}
  .archivio-testa--foto{padding:0}  .archivio-testa--foto .sfondo{display:none}  .archivio-testa--foto .archivio-dentro{box-shadow:none; background:none; padding:0}
}

/* ═════════════════════════════════════════════ LE QUATTRO FORME DI BLOCCO
   Il rischio vero di un sito a campi pieni non e' il colore piatto: e' che ogni sezione
   abbia la stessa forma — titolo piu' tre paragrafi — e che dopo la terza il lettore
   smetta di guardare. Quindi le forme si alternano, e sono quattro:

     1. SOLO TESTO col tipo grande, per i momenti che devono restare nudi;
     2. UN GRAFICO che e' gia' un'immagine (la scala del tempo);
     3. UNO SCHEMA DI PRODOTTO, disegnato e non fotografato;
     4. UNA FOTOGRAFIA vera.

   Stanno qui e non dentro la home perche' sono il design system: le pagine che verranno
   si derivano da queste, e una seconda copia in una pagina divergerebbe dalla prima
   entro un mese. */

/* ── 1 · il conto che si compone, in apertura ─────────────────────────────
   L'UNICO movimento di tutta la pagina. Se si mettono transizioni anche sulle altre
   sezioni, questo smette di significare qualcosa: qui il movimento E' l'argomento —
   un conto che si sgretola riga per riga e finisce con una domanda. */
.conto{font-size:clamp(15px,4vw,17px); margin-bottom:44px}
.conto .voce{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:9px 0; border-bottom:1px solid var(--filo-chiaro);
  opacity:0; transform:translateY(6px); animation:entra .5s ease forwards;
}
.conto .voce:nth-child(1){animation-delay:.15s}
.conto .voce:nth-child(2){animation-delay:.5s}
.conto .voce:nth-child(3){animation-delay:.85s}
.conto .voce:nth-child(4){animation-delay:1.2s}
.conto .resto{
  border-bottom:0; border-top:1px solid rgba(246,243,238,.4);
  margin-top:6px; padding-top:14px; font-size:1.15em; animation-delay:1.65s;
}
.conto .cifra{font-variant-numeric:tabular-nums; white-space:nowrap}
.titolo-apertura{opacity:0; animation:entra .7s ease forwards; animation-delay:2.05s}
@keyframes entra{to{opacity:1; transform:none}}
/* Chi ha chiesto meno movimento vede la stessa pagina, ferma. Non una pagina diversa. */
@media (prefers-reduced-motion:reduce){
  .conto .voce, .titolo-apertura{opacity:1; transform:none; animation:none}
}

/* IL GIUDIZIO SU UN NUMERO. Verde, ambra e rosso vivono SOLO qui: sono la lingua degli
   indicatori, e se girassero anche come decorazione il sito intero sembrerebbe un
   cruscotto e i semafori perderebbero forza. */
.giudizio{font-size:.78em; padding:2px 8px; border-radius:3px; margin-left:8px}
.g-bene{background:var(--verde); color:#EAF3EE}
.g-capire{background:var(--ambra); color:#2A1D05}
.g-guarda{background:var(--rosso); color:#FDECEA}

/* ── 2 · la scala del tempo ───────────────────────────────────────────────
   Un grafico che e' gia' un'immagine: la barra dice quanto tempo resta per raddrizzare
   un numero storto, e non serve nessuna legenda per capirlo. */
.scala{margin-top:2.6em; display:grid; gap:16px}
.gradino .eti{font-size:.86em; color:var(--su-scuro-2); margin-bottom:6px}
.gradino .barra{height:10px; background:rgba(246,243,238,.14); border-radius:2px; overflow:hidden}
.gradino .riempi{height:100%; background:var(--link-scuro); border-radius:2px}
.gradino .mesi{font-size:.8em; color:var(--su-scuro-3); margin-top:5px; font-variant-numeric:tabular-nums}
.gradino.ora .eti{color:var(--su-scuro); font-weight:500}
.gradino.ora .riempi{background:var(--su-scuro)}
.legenda{margin-top:1.6em; font-size:.84em; color:var(--su-scuro-3)}

/* ── il passo del tempo: primo mese, terzo, dodicesimo ── */
.mesi-lista{margin-top:2.4em; display:grid; gap:26px}
/* IL TITOLO DI UN PARAGRAFO E' UN'ETICHETTA, e in casa le etichette hanno una forma sola:
   maiuscoletto spaziato (14-09-2026, scelta di Aldo — «come i titoli di gruppo»).
   E' la stessa forma dell'`.occhiello` e del titolo di gruppo della tavola di confronto: stessi
   valori, non una terza variante. Prima era testo normale a 16px in grigio tenue, e Aldo lo
   leggeva come «piccolo e sbiadito» — giusto: sembrava una riga di testo indebolita invece di un
   titolo. Un'etichetta piccola ma in maiuscoletto si legge come un'etichetta.
   `text-transform` e non maiuscole nel testo: nel documento la frase resta in tondo, quindi chi
   ascolta la pagina sente «Un perimetro, non una promessa» e non una sigla lettera per lettera. */
.mese .quando{
  font-size:12.5px; letter-spacing:.09em; text-transform:uppercase; font-weight:500;
  color:var(--tenue); margin-bottom:.45rem;
}
/* SUI CAMPI SCURI IL TENUE NON SI LEGGE: misurato 2,22:1 sul blu e 2,49:1 sull'inchiostro, contro
   una soglia di 4,5. Non «bassino»: meno della meta'. E il titolo del paragrafo e' la riga che
   dice di che cosa si parla — sbiadita, il paragrafo comincia senza nome.
   `--su-scuro-3` e' lo stesso tono che usano gia' le didascalie dentro i campi scuri: nessun
   colore nuovo, e sta a 7,15:1 sull'inchiostro e 6,36:1 sul blu.
   PERCHE' NESSUNO SE N'ERA ACCORTO: `.quando` non dichiara niente dentro il campo scuro — EREDITA
   `--tenue` da questa riga, scritta per i fondi chiari, e se lo porta dentro il blu. Il banco
   confronta un elenco di coppie scritte a mano (`Accessibilita::COPPIE`) e una coppia ereditata li'
   dentro non c'e' e non ci puo' essere: la si vede solo misurando la PAGINA RESA. Vedi il Backlog. */
.campo--inchiostro .mese .quando, .campo--blu .mese .quando{color:var(--su-scuro-3)}
.campo--mattone .mese .quando{color:var(--su-mattone)}
.mese p{margin-top:0}

/* ── 3 · lo schema di prodotto ────────────────────────────────────────────
   DISEGNATO, non fotografato, e con la dida che lo dice. Una schermata vera invecchia a
   ogni rilascio e una schermata vecchia fa piu' danno di una schermata che non c'e'. I
   valori vengono da un'azienda vera, anonimizzata. */
.schema{
  background:#FFFDFA; border:1px solid var(--filo); border-radius:4px;
  padding:16px; color:var(--testo);
}
.schema .capo{
  font-size:12px; color:var(--tenue); display:flex; justify-content:space-between;
  padding-bottom:10px; border-bottom:1px solid var(--filo);
}
.riga-c{
  display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:baseline;
  padding:9px 0; border-bottom:1px solid var(--vetro); font-size:14px;
}
.riga-c .n{font-variant-numeric:tabular-nums; text-align:right; min-width:52px}
.riga-c .p{font-variant-numeric:tabular-nums; text-align:right; min-width:46px; color:var(--tenue); font-size:13px}
.riga-c.tot{border-bottom:0; border-top:1px solid var(--filo-2); margin-top:4px; font-weight:500}
.tessere{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px}
.tessera{background:var(--fondo-2); border-radius:3px; padding:11px 12px}
.tessera .et{font-size:12.5px; color:var(--tenue); line-height:1.3}  /* mai sotto i 12px: regola di casa */
.tessera .vl{
  font-size:19px; font-weight:500; font-variant-numeric:tabular-nums;
  margin-top:3px; display:flex; align-items:center; gap:7px;
}
.pallino{width:8px; height:8px; border-radius:50%; flex:none}
.p-verde{background:var(--verde)} .p-ambra{background:var(--ambra)} .p-rosso{background:var(--rosso)}

/* ── 4 · la fotografia ────────────────────────────────────────────────────
   Niente repertorio: su un sito che argomenta contro l'approssimazione, una foto di stock
   smonta l'argomento da sola. Queste sono scattate nelle aziende della beta. */
.figura{margin:2.6em 0 0}
.figura img{display:block; width:100%; border-radius:3px}
.figura .dida{font-size:.8em; color:var(--tenue); margin-top:10px; line-height:1.45}
.campo--inchiostro .figura .dida, .campo--blu .figura .dida{color:var(--su-scuro-3)}
.campo--mattone .figura .dida{color:var(--su-mattone)}
/* A tutta larghezza: esce dalla colonna e arriva ai bordi del campo. */
.piena{margin-left:-20px; margin-right:-20px}
.piena img{border-radius:0}
@media (min-width:760px){ .piena{margin-left:-40px; margin-right:-40px} }

/* ── la porta finale ──────────────────────────────────────────────────────
   Chiedere un appuntamento a un'azienda e' diverso dal chiederlo a una faccia: il ritratto
   sta qui e non in cima. */
.ritratto{display:flex; gap:16px; align-items:center; margin-top:2.4em}
.ritratto img{width:96px; height:96px; border-radius:50%; flex:none; object-fit:cover}
.ritratto .chi{font-size:.92em; line-height:1.5; color:var(--su-scuro-2); margin:0}
.scelte{margin-top:2.6em; display:grid; gap:10px}
.scelta{
  display:block; border:1px solid var(--filo-chiaro); border-radius:4px;
  padding:15px 18px; font-size:.95em;
}
.scelta:hover{border-color:var(--su-scuro)}
.scelte .intro{font-size:.9em; color:var(--su-scuro-3); margin:0 0 4px}
@media (min-width:760px){ .scelte{grid-template-columns:1fr 1fr} }

/* ── 5 · la scala a pioli, a scoperta progressiva ─────────────────────────
   `<details>` nativo: nessun JavaScript, funziona da tastiera e con un lettore di
   schermo senza che noi ci si metta niente, e chi arriva col JS spento vede la
   pagina intera invece di quattro titoli muti.

   LA REGOLA CHE DECIDE COME SI SCRIVE: chi non apre nessun piolo deve uscire dalla
   pagina avendo capito lo stesso. Quindi nel `<summary>` non ci va un'etichetta —
   ci va la frase intera. Il dettaglio dentro e' per chi vuole di piu', non per chi
   vuole capire. Un accordion in cui il titolo dice «Budget» e il senso sta dentro
   e' un elenco di funzioni con una tendina davanti. */
.pioli{margin-top:2.4em; border-top:1px solid var(--filo)}
.piolo{border-bottom:1px solid var(--filo)}
.piolo > summary{
  display:grid; grid-template-columns:1.9rem 1fr; gap:0 .9rem;
  padding:1.25rem 0; cursor:pointer; list-style:none;
}
.piolo > summary::-webkit-details-marker{display:none}
.piolo .n{
  font-size:13px; font-variant-numeric:tabular-nums; color:var(--tenue);
  padding-top:.35em;
}
.piolo .che{font:500 1.25rem/1.25 var(--sans); letter-spacing:-.022em}
.piolo .dice{grid-column:2; margin-top:.4rem; color:var(--tenue); font-size:.98rem; line-height:1.55}
/* Il segno che si apre: una crocetta che diventa un meno. Sta a destra del titolo e
   non davanti, perche' davanti sposterebbe l'allineamento dei numeri. */
.piolo .che::after{
  content:"+"; float:right; font-weight:400; color:var(--tenue);
  transition:transform .2s var(--molla); display:inline-block;
}
.piolo[open] .che::after{content:"–"}
.piolo > summary:hover .che{color:var(--accento)}
.piolo > summary:focus-visible{outline-offset:-3px}
.dentro-piolo{grid-column:2; padding:0 0 1.6rem 2.8rem}
.dentro-piolo p{margin:0 0 .9em; font-size:.98rem; line-height:1.6}
.dentro-piolo p:last-child{margin-bottom:0}
.dentro-piolo b{font-weight:500}
@media (max-width:600px){
  .dentro-piolo{padding-left:0}
  .piolo > summary{grid-template-columns:1.4rem 1fr; gap:0 .6rem}
}

/* ── le domande numerate, quando la domanda E' il contenuto ── */
.domande{margin-top:2.2em; counter-reset:d; list-style:none; padding:0}
.domande li{
  counter-increment:d; position:relative; padding:.85rem 0 .85rem 2.6rem;
  border-top:1px solid var(--filo); font-size:1.05rem; line-height:1.45;
}
.domande li::before{
  content:counter(d); position:absolute; left:0; top:1rem;
  font-size:13px; color:var(--tenue); font-variant-numeric:tabular-nums;
}
.campo--sabbia .domande li{border-top-color:rgba(22,24,29,.16)}

/* ── il confronto: come si fa oggi / come si fa qui ──
   Due colonne sul desktop, due riquadri impilati sul telefono. La colonna «oggi» sta su un
   fondo piu' alto e con le lettere tenui, quella «qui» sul fondo della pagina e a piena
   forza: la gerarchia la fa il colore, non un aggettivo. Nessun colore nuovo — sono i token
   della linea, e le due coppie (`tenue` su `fondo-3`, `testo` su `fondo`) sono gia' misurate.

   NIENTE FRECCE fra le due colonne: una freccia dice «prima/dopo», e questa non e' una
   promessa di trasformazione — sono due modi di lavorare messi uno accanto all'altro. */
.confronto{margin-top:2.4em; display:grid; gap:1.4rem}
.confronto .riga{display:grid; gap:.55rem}
.confronto .oggi, .confronto .qui{padding:.9rem 1.05rem; border-radius:3px; line-height:1.5}
.confronto .oggi{background:var(--fondo-3); color:var(--tenue)}
.confronto .qui{background:var(--fondo); color:var(--testo); border:1px solid var(--filo-2)}
.confronto .et{
  display:block; font-size:12.5px;   /* mai sotto i 12px: regola di casa */ letter-spacing:.09em; text-transform:uppercase;
  color:var(--tenue); margin-bottom:.3rem;
}
.confronto .qui .et{color:var(--tenue)}
.confronto .qui b{font-weight:500}

@media (min-width:861px){
  /* Il confronto esce dalla colonna: due colonne dentro 34rem fanno due strisce da 260px, e
     una tabella di confronto che si legge a fatica non confronta niente. Resta centrata sulla
     colonna, quindi il testo sopra e sotto non si sposta. */
  .confronto{width:min(52rem, 92vw); margin-left:50%; transform:translateX(-50%)}
  .confronto .riga{grid-template-columns:1fr 1fr; gap:.9rem; align-items:stretch}
  /* L'etichetta si scrive una volta sola, in cima: ripeterla su dodici riquadri e' rumore. */
  .confronto .riga:not(:first-child) .et{display:none}
}

/* ── il listino: QUATTRO SCHEDE AFFIANCATE (13-09-2026) ──
   Fino a oggi era un elenco: un pacchetto per riga, nome a sinistra e prezzo a destra. Aldo:
   «non voglio vedere base standard uno sotto l'altro, base standard sono uno a fianco all'altro».
   Ha ragione, ed e' una questione di mestiere prima che di gusto: **il verticale lo prende il
   CONTENUTO di un'opzione, non l'elenco delle opzioni.** Messi in colonna, i quattro pacchetti si
   leggono uno dopo l'altro — cioe' si legge il primo e si scorre via; affiancati, si confrontano
   con un movimento solo degli occhi, che e' la cosa per cui una pagina di prezzi esiste.

   Dal telefono in su: una scheda sotto l'altra perche' quattro colonne in 390px non stanno, e
   rimpicciolire il testo lo porterebbe sotto i 12px. Da 600px in su due per riga, da 861 tutte e
   quattro. Non e' un ripiego: a due per riga il confronto a coppie regge ancora.

   IL BOTTONE STA IN FONDO A TUTTE ALLA STESSA ALTEZZA. Le schede hanno descrizioni di lunghezza
   diversa, e senza questo i quattro bottoni finirebbero scalettati — sembrerebbe un errore di
   impaginazione, e il confronto fra i prezzi si perderebbe dietro il disordine. Lo tiene la
   colonna flessibile piu' il `margin-top:auto`. */
.listino{margin-top:2.4em; display:grid; gap:1rem}
.carta-p{
  display:flex; flex-direction:column; gap:.55rem;
  padding:1.3rem 1.25rem; border:1px solid var(--filo-2); border-radius:4px;
  background:var(--fondo);
}
/* Sul fondo sabbia la scheda resta chiara: e' quello che la stacca dalla sezione. */
.campo--sabbia .carta-p{background:var(--fondo)}
.carta-p .chi{font:500 1.15rem/1.25 var(--sans); letter-spacing:-.02em; margin:0}
.carta-p .quote{margin:0; color:var(--tenue); font-size:.92rem; line-height:1.5}
/* CHE COSA AGGIUNGE QUESTO PACCHETTO, in grassetto e per primo (13-09-2026, Aldo).
   Sotto le schede c'era lo STORICO — «tre mesi di storico», «sei mesi di storico» — e Aldo:
   «questi mesi si confondono, sembra che il sistema tenga dentro tre periodi; e a questo livello
   chi se ne frega di quanto storico ha, non e' quello il discriminante». Aveva ragione due volte:
   la frase era ambigua E rispondeva a una domanda che nessuno si fa guardando un listino.
   Adesso la prima riga dice il CONTENUTO — il mestiere che si aggiunge salendo — e sotto restano
   le persone, che invece il discriminante lo sono. Lo storico resta nella tavola di confronto,
   dove ha accanto le altre quote e non si puo' fraintendere. */
.carta-p .quote b{
  display:block; margin-bottom:.35rem;
  color:var(--testo); font-weight:500; font-size:.98rem; line-height:1.35;
}
.carta-p .quanto{display:flex; align-items:baseline; flex-wrap:wrap; gap:.4rem; margin-top:.5rem}
.carta-p .quanto .n{font:500 1.9rem/1 var(--sans); letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.carta-p .quanto .q{color:var(--tenue); font-size:.92rem}
.carta-p .quanto .anno{flex-basis:100%; color:var(--tenue); font-size:12.5px}
/* `margin-top:auto` spinge il bottone in fondo alla scheda, comunque sia lunga la riga sopra. */
.carta-p .fa{margin-top:auto; padding-top:1rem}
.carta-p .fa .pulsante{width:100%; text-align:center}

@media (min-width:600px){
  .listino{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (min-width:861px){
  /* Come la tavola di confronto: il listino esce dalla colonna del testo, che e' la misura di un
     paragrafo e non di quattro schede affiancate. */
  .listino{width:min(60rem, 94vw); margin-left:50%; transform:translateX(-50%);
           grid-template-columns:repeat(4, minmax(0, 1fr)); gap:1.1rem}
  /* A quattro colonne lo spazio per scheda e' circa 220px: la cifra scende un poco per non
     mandare a capo «2.078» e il nome del pacchetto. */
  .carta-p .quanto .n{font-size:1.7rem}
  /* Fra gli 861 e i mille pixel la scheda e' larga meno di 200: «Attiva Professional» andava a
     capo su due righe mentre gli altri bottoni restavano su una. I fondi restano allineati (li
     tiene `margin-top:auto`), ma due bottoni alti il doppio degli altri si leggono come un
     errore di impaginazione. Lettere un filo piu' piccole e respiro laterale ridotto: sopra i
     12px, che e' il pavimento di casa. */
  .carta-p .fa .pulsante{padding-left:.75rem; padding-right:.75rem; font-size:.86rem}
}

/* ── il perimetro: quello che NON si fa, in fila ── */
.perimetro{margin-top:2.2em; display:grid; gap:1.1rem}
.perimetro div{padding-left:1rem; border-left:2px solid var(--filo-2)}
.perimetro b{display:block; font-weight:500; margin-bottom:.15rem}
.perimetro span{color:var(--tenue); font-size:.96rem; line-height:1.55}
.campo--inchiostro .perimetro div, .campo--blu .perimetro div{border-left-color:var(--filo-chiaro)}
.campo--inchiostro .perimetro span, .campo--blu .perimetro span{color:var(--su-scuro-2)}

/* ── la data in fondo alle pagine d'officina ──
   Le pagine di «In pratica» invecchiano a ogni rilascio: una schermata vecchia fa piu' danno
   di una schermata che non c'e'. La data non e' una firma, e' una dichiarazione di freschezza,
   quindi sta sotto tutto e usa i toni tenui gia' misurati (--tenue sui campi chiari,
   --su-scuro-3 su quelli scuri: due coppie che stanno in Accessibilita::COPPIE). */
.campo .aggiornata{margin-top:3.2em; font-size:.86rem; color:var(--tenue)}
.campo--inchiostro .aggiornata, .campo--blu .aggiornata{color:var(--su-scuro-3)}
.campo--mattone .aggiornata{color:var(--su-mattone)}

/* ── LA PAGINA LARGA (11-09-2026) ─────────────────────────────────────────────
   La colonna stretta e' giusta per un PARAGRAFO, non per una pagina: su uno schermo largo
   lasciava due terzi di vuoto ai lati, e il prodotto stava in un budello. Qui si allarga il
   CAMPO e la pagina si dispone su due o tre colonne; ogni paragrafo resta nella sua misura
   (`.campo p` tiene `--colonna`), perche' una riga lunga quanto lo schermo non la legge
   nessuno. Dal telefono in su: fuori dalle media query e' tutto una colonna sola. */
/* `--largo` e' la misura della testata e del piede: con un numero suo, il bordo del contenuto
   partiva 64px piu' a sinistra del marchio. Lo stesso token, e combaciano per costruzione. */
.campo--largo > .dentro{max-width:var(--largo)}
.campo--largo h1, .campo--largo h2{max-width:22ch}
.campo--largo .occhiello{margin:0 0 1rem}
.campo h3{font:500 clamp(22px,5.4vw,28px)/1.2 var(--sans); letter-spacing:-.02em; margin:0}
.campo .nota{margin-top:1em; font-size:.88rem; color:var(--tenue)}

/* UN CODICE CONTO SI MOSTRA COM'E'. `white-space:pre-wrap` non e' un vezzo: negli esempi veri gli
   spazi multipli e quello in TESTA fanno parte del codice, e l'HTML normale li appiattisce in uno
   solo — cioe' cancellerebbe proprio la cosa che l'esempio deve far vedere. */
.campo code{
  font:400 .92em/1.4 ui-monospace,"Cascadia Mono",Consolas,monospace;
  white-space:pre-wrap; overflow-wrap:anywhere;
  background:var(--fondo-3); border-radius:3px; padding:.08em .4em;
}
.campo--inchiostro code, .campo--blu code{background:rgba(246,243,238,.14)}
.campo--mattone code{background:rgba(255,244,239,.18)}

/* testo e immagine affiancati; `--rovescia` mette l'immagine a sinistra */
.fila{display:grid; gap:1.8rem; margin-top:3.6em}
.fila:first-child{margin-top:0}
.fila > .figura{margin:0}
.fila .figura img{box-shadow:0 1px 0 var(--filo), 0 18px 40px -24px rgba(22,24,29,.45)}

/* ── l'elenco di che cosa fa, accanto alla schermata (13-09-2026) ──
   E' il pezzo che trasforma una `.fila` in un RECAP: la schermata fa vedere, tre o quattro righe
   dicono che cosa ci si fa. Prima non c'era, e senza di lui ogni blocco era un paragrafo — si
   legge il primo e si saltano gli altri otto.

   Il segno di spunta e' un `::before`, non un carattere nel testo: dentro il testo finirebbe
   letto a voce una volta per riga («spunta, spunta, spunta») e, peggio, finirebbe copiato insieme
   alla frase. `aria-hidden` non si puo' mettere a uno pseudo-elemento — ma uno pseudo-elemento i
   lettori di schermo non lo annunciano, ed e' esattamente il motivo per cui si usa qui.
   Il verde e' quello dei giudizi, gia' misurato su `fondo` e `fondo-2` (vedi COPPIE). */
.che-fa{list-style:none; margin:1.2rem 0 0; padding:0; display:grid; gap:.5rem}
.che-fa li{
  position:relative; padding-left:1.5rem; font-size:.96rem; line-height:1.5; color:var(--testo-2);
}
.che-fa li::before{
  content:'\2713'; position:absolute; left:0; top:0;
  color:var(--verde); font-size:.95rem; line-height:1.55;
}
.campo--inchiostro .che-fa li, .campo--blu .che-fa li{color:var(--su-scuro-2)}
.campo--inchiostro .che-fa li::before, .campo--blu .che-fa li::before{color:var(--link-scuro)}

/* ── le tre spunte IN RIGA sotto un titolo (13-09-2026) ──
   La variante orizzontale: tre garanzie corte, una accanto all'altra, come sotto il titolo della
   pagina dei prezzi. Sul telefono vanno a capo da sole e tornano una per riga — che e' il
   comportamento giusto, non un ripiego: tre righe corte si leggono, tre colonne da 120px no.
   Centrate solo dove il campo e' centrato; altrove restano allineate a sinistra col testo. */
.che-fa--riga{
  display:flex; flex-wrap:wrap; gap:.45rem 1.8rem; margin-top:1.8em;
}
.che-fa--riga li{
  padding-left:1.35rem; font-size:.94rem;
  /* LA VOCE CHE VA A CAPO NON DEVE LASCIARE LA SPUNTA APPESA. Sul telefono «Un'azienda, piu'
     quella dimostrativa in omaggio» prende due righe: col segno ancorato al riquadro restava in
     alto a sinistra, staccato, e sembrava la spunta di un'altra voce. Tenendolo sulla PRIMA riga
     di testo il legame si vede anche quando la frase si spezza. */
  display:flex; align-items:flex-start; gap:.55rem;
  padding-left:0; text-align:left;
}
.che-fa--riga li::before{position:static; flex:0 0 auto}
.campo--apertura .che-fa--riga, .apertura .che-fa--riga{justify-content:center}

@media (min-width:861px){
  /* LA RIGA DEVE USCIRE DALLA COLONNA DEL TESTO, o non e' una riga.
     Misurato: dentro `.apertura` la lista e' larga 544px — la misura di un paragrafo — e le tre
     garanzie in fila ne vogliono 893. Risultato: andavano a capo tutte e tre anche sul desktop,
     cioe' la variante orizzontale non faceva niente. Non era il flex: era il contenitore.
     Stessa cura della tavola e del listino — si esce dalla colonna restando centrati, cosi' il
     testo sopra e sotto non si sposta di un pixel. */
  /* 62rem e non 56: misurate, le tre garanzie in fila vogliono 893px di testo, e con lo stacco
     fra una voce e l'altra sfondavano i 896 che davano 56rem — restavano su DUE righe, cioe' la
     riga orizzontale non c'era lo stesso. Il `min()` col 94vw tiene il margine laterale. */
  .apertura .che-fa--riga{width:min(62rem, 94vw); margin-left:50%; transform:translateX(-50%)}
}

/* i bottoni dell'apertura, uno accanto all'altro */
.azioni{display:flex; flex-wrap:wrap; gap:12px; margin-top:2em}

/* tre numeri in fila, grandi */
.cifre{display:grid; gap:1.6rem; margin-top:2.4em}
.cifre div{border-top:1px solid var(--filo-2); padding-top:1rem}
.cifre b{display:block; font:500 clamp(40px,10vw,64px)/1 var(--sans); letter-spacing:-.04em}
.cifre span{display:block; margin-top:.5rem; color:var(--tenue); line-height:1.45}

/* schede cliccabili, per mandare avanti chi sa gia' da dove parte */
.schede{display:grid; gap:1rem; margin-top:2.4em}
.scheda{display:block; background:var(--fondo); color:var(--testo); border:0; border-radius:4px; padding:1.4rem 1.3rem}
.scheda:hover{border:0; box-shadow:inset 0 0 0 1px var(--filo-2)}
/* UNA PORTA SPENTA NON E' UN LINK, ed e' `sostituisciPorte` a non emetterlo: esce come <span>.
   Qui si dice solo che e' spenta. Prima usciva `<a href="">`, che non e' un link spento ma un
   link alla pagina corrente — cliccabile e raggiungibile da tastiera. */
.scheda.spenta{opacity:.62}
.scheda.spenta:hover{box-shadow:none}
/* l'immagine dentro la scheda, con la sua didascalia: proporzione unica per tutte, cosi' la fila
   resta ordinata anche con originali da 1,2:1 a 2,3:1; il taglio parte dall'alto, dove nelle
   schermate sta la roba che conta */
.scheda .scatto{margin:0 0 1rem}
.scheda .scatto img{display:block; width:100%; aspect-ratio:16/10; object-fit:cover; object-position:left top; border-radius:3px}
.scheda .scatto figcaption{margin-top:.55rem; font-size:.82rem; line-height:1.45; color:var(--tenue)}
.scheda b{display:block; font-weight:500; font-size:1.08em}
.scheda span{display:block; margin-top:.4rem; color:var(--tenue); font-size:.96rem; line-height:1.55}
/* Sul campo chiaro la scheda col fondo della pagina spariva: sembrava testo sparso. Prende il
   fondo del campo sabbia, che e' gia' una coppia misurata con --tenue. */
.campo--carta .scheda{background:var(--fondo-2)}
.occhiello + .schede{margin-top:1.2em}

/* L'APERTURA CENTRATA: occhiello, titolone, sottotitolo, bottoni, tutto sull'asse. Un titolo a
   sinistra in cima alla home si legge come l'inizio di un articolo; centrato e' un manifesto. */
.apertura{text-align:center}
/* Il titolone dell'apertura e' una FRASE, non tre parole: alla misura di `.campo h1` (fino a 68px)
   riempiva lo schermo da solo e il sottotitolo finiva sotto la piega. */
.apertura h1{margin-inline:auto; max-width:24ch; font-size:var(--titolo-pagina); line-height:1.1}

/* SUL TELEFONO L'APERTURA DEVE STARE IN UNA SCHERMATA. Con il titolo a 30px e l'elenco lungo nel
   sottotitolo, i due bottoni finivano sotto la piega: chi arriva vede un titolo e deve scorrere
   per sapere che cosa puo' fare. Quindi: titolo un po' piu' piccolo, meno aria sopra, e la parte
   lunga del sottotitolo mostrata solo dove c'e' spazio. Mobile-first: qui sotto e' il telefono,
   il desktop rientra nella media query. */
.campo--apertura{padding-top:44px; padding-bottom:56px}
.solo-largo{display:none}

@media (min-width:861px){
  .campo--apertura{padding-top:120px; padding-bottom:120px}
  .solo-largo{display:inline}
  .solo-stretto{display:none}
}
.apertura .sotto{margin-inline:auto; max-width:40rem}
.apertura .azioni{justify-content:center}
.apertura .nota{margin-inline:auto}
/* `.campo p` ha una larghezza massima e il margine a zero: senza, la riga dell'occhiello restava
   spostata a sinistra anche col testo centrato dentro. */
.apertura .occhiello{margin:0 auto 1rem}

/* TRE VOLTI con la loro frase in sovrimpressione. L'immagine riempie il riquadro; finche' non
   c'e', il riquadro `.da-produrre` dice che cosa dovra' contenere. La frase sta su un velo scuro
   dal basso, e il velo c'e' anche senza foto: il contrasto non dipende da cosa c'e' dietro. */
.volti{display:grid; gap:12px; margin-top:3.4em}
/* 4:3, la proporzione delle fotografie che abbiamo: in verticale 4:5 una scena orizzontale
   perdeva meta' della stanza. */
.volto{position:relative; margin:0; aspect-ratio:4/3; max-width:100%; overflow:hidden; border-radius:4px; background:var(--fondo-2)}
.volto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:0}
.volto .frase{
  position:absolute; left:0; right:0; bottom:0; padding:3.2rem 1.2rem 1.1rem;
  background:linear-gradient(to top, rgba(22,24,29,.92) 0%, rgba(22,24,29,.78) 55%, rgba(22,24,29,0) 100%);
  color:var(--su-scuro); font:500 1.12rem/1.3 var(--sans); letter-spacing:-.01em; text-align:left;
}
.da-produrre{box-shadow:inset 0 0 0 2px var(--filo-2)}
.da-produrre .brief{padding:1.1rem 1.2rem 7rem; font-size:.88rem; line-height:1.5; color:var(--tenue); text-align:left}
.da-produrre .brief b{display:block; font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--testo); margin-bottom:.5rem}

/* ── IL DIALOGO (prototipo casa-dialogo, 12-09-2026) ──────────────────────────
   Una conversazione FINTA ma vera nei numeri: si mostra che cosa si puo' chiedere ai propri conti,
   invece di spiegarlo. Non e' una chat viva e non finge di esserlo: niente campo di scrittura.
   Chi legge deve capire l'esempio, non provare a scriverci dentro.

   HA L'ASPETTO DI UNA CHAT DI TELEFONO (Aldo, 12-09-2026: «facciamo in modo che assomigli a
   quella di WA»), e cio' che si riprende sono le CONVENZIONI, non il marchio: le mie a destra sul
   verde, le sue a sinistra sul chiaro, la codina sull'angolo alto, l'orario e le spunte dentro la
   bolla, la pillola della data, il parato dietro. Niente nome, niente logo, e il parato e' un
   disegno nostro — gli scarabocchi di WhatsApp sono roba loro, e un sito che se li copia si
   prende un problema che non c'entra niente col prodotto. */
.apertura-dialogo h1{font-size:var(--titolo-pagina); line-height:1.1; letter-spacing:-.022em}
.apertura-dialogo h1 .seconda{color:var(--accento)}
.apertura-dialogo .sotto{max-width:34rem}

/* LA FINESTRA DELLA CHAT: altezza fissa, e i messaggi arrivano dentro. Se crescesse in altezza,
   la pagina si muoverebbe sotto le mani di chi legge; cosi' invece scorre solo la conversazione. */
.chat{
  display:flex; flex-direction:column; margin-top:2.4em; overflow:hidden;
  background:var(--chat-parato); border-radius:14px;
  box-shadow:inset 0 0 0 1px var(--filo), 0 18px 40px -28px rgba(22,24,29,.5);
}
.chat-testa{
  flex:none; display:flex; align-items:center; gap:.65rem;
  padding:.55rem .9rem; border-bottom:1px solid var(--filo); background:var(--fondo-2);
}
.chat-testa .faccia{
  flex:none; width:34px; height:34px; border-radius:50%; background:var(--campo-blu);
  color:var(--su-scuro); font:500 12.5px/34px var(--sans); text-align:center; letter-spacing:.03em;
}
.chat-testa .chi-e{display:flex; flex-direction:column; gap:1px; min-width:0}
.chat-testa .nome{font-size:14px; line-height:1.25; color:var(--testo)}
.chat-testa .stato{font-size:11.5px; line-height:1.25; color:var(--tenue)}
.chat-testa .pallino{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--verde); margin-right:.35rem; vertical-align:.05em}

/* il parato: un reticolo di puntini nostro, non il disegno di nessun altro */
.chat-corpo{
  flex:1 1 auto; overflow-y:auto; scroll-behavior:smooth;
  display:grid; align-content:start; gap:.35rem; padding:1rem .9rem 1.2rem; height:26rem;
  background-image:radial-gradient(circle at 1px 1px, rgba(22,24,29,.055) 1px, transparent 0);
  background-size:22px 22px;
}
.chat-piede{flex:none; padding:.6rem .9rem; background:var(--fondo-2); border-top:1px solid var(--filo)}
.rivedi{
  font:400 13px/1 var(--sans); color:var(--tenue); background:var(--fondo); cursor:pointer;
  border:1px solid var(--filo-2); border-radius:999px; padding:.5rem .9rem;
}
.rivedi:hover{color:var(--testo)}

/* LA PILLOLA DELLA DATA: sta ferma, non e' una battuta e non viene nascosta dallo script */
.giorno{
  justify-self:center; margin:.1rem 0 .5rem; padding:.3rem .75rem; border-radius:8px;
  background:var(--chat-sua); box-shadow:0 1px 1px rgba(22,24,29,.12);
  font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--tenue);
}

/* LE BOLLE. La codina sta in alto, come in una chat vera, ed e' un triangolo ritagliato nello
   stesso colore della bolla: un'immagine vorrebbe dire due file da tenere allineati ai colori. */
.battuta{
  position:relative; display:flow-root; max-width:min(25rem,76%);
  padding:.5rem .7rem .45rem; border-radius:8px; font-size:.95rem; line-height:1.45;
  color:var(--testo); box-shadow:0 1px .5px rgba(22,24,29,.13);
  transition:opacity .35s ease, transform .35s ease;
}
/* LA CODINA STA FUORI DALLA BOLLA, quindi le serve posto: senza questi 9px la codina di sinistra
   finiva sotto il taglio dell'`overflow` della finestra e quella di destra sbordava oltre il
   bordo. Non e' un dettaglio di gusto: sono i 9px che il triangolo occupa davvero. */
.battuta--ap{margin-left:9px}
.battuta--chi{margin-right:9px}
.battuta::after{content:""; position:absolute; top:0; width:10px; height:13px}
.battuta p{margin:0; max-width:none}
.battuta p + p{margin-top:.55em}
.battuta .segue{color:var(--testo-2); font-size:.92rem}

.battuta--chi{justify-self:end; background:var(--chat-mia); border-top-right-radius:0}
.battuta--chi::after{right:-9px; background:var(--chat-mia); clip-path:polygon(0 0, 100% 0, 0 62%)}
.battuta--ap{justify-self:start; background:var(--chat-sua); border-top-left-radius:0}
.battuta--ap::after{left:-9px; background:var(--chat-sua); clip-path:polygon(0 0, 100% 0, 100% 62%)}

/* L'ORARIO si infila in fondo all'ultima riga quando ci sta, e va a capo quando non ci sta:
   e' quello che fa il `float`, ed e' il gesto della chat vera. */
.ora{float:right; margin:.4rem -.05rem 0 .75rem; font-size:11px; line-height:1; color:var(--tenue); white-space:nowrap}
.ora .spunte{
  width:15px; height:10px; margin-left:.22rem; vertical-align:-.1em;
  fill:none; stroke:var(--chat-spunta); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}

/* i numeri dentro una risposta: sono il punto, quindi si vedono */
/* TRE COLONNE DENTRO UNA BOLLA STRETTA: la bolla sta al 76%, non a tutta la finestra, e con
   `1fr` la didascalia piu' lunga andava a capo («valore della / produzione»). `auto` lascia a
   ogni colonna la larghezza che le serve; sul telefono, dove tre non ci stanno davvero, scendono
   in colonna invece di spezzarsi le parole. */
.numeri{display:grid; grid-template-columns:repeat(3,auto); justify-content:space-between; gap:.55rem .9rem; margin-top:.7rem; padding-top:.7rem; border-top:1px solid var(--filo)}
@media (max-width:520px){ .numeri{grid-template-columns:1fr 1fr} }
.numeri b{display:block; font:500 1.05rem/1.15 var(--sans); color:var(--testo)}
.numeri span{display:block; margin-top:.2rem; font-size:.72rem; line-height:1.3; color:var(--tenue)}
.numeri .giù b{color:var(--ottone)}
/* l'orario dopo i numeri si infila accanto all'ultima colonna, invece di prendersi una riga sua */
.numeri + .ora{margin-top:-1.15rem}

/* i messaggi entrano dal basso, uno alla volta */
.battuta.attesa{opacity:0; transform:translateY(8px); pointer-events:none; position:absolute; visibility:hidden}
.scrive{
  display:flex; gap:5px; align-items:center; width:max-content; max-width:none;
  padding:.7rem .75rem; box-shadow:0 1px .5px rgba(22,24,29,.13);
}
.scrive span{width:7px; height:7px; border-radius:50%; background:var(--su-scuro-3); animation:battito 1.1s infinite ease-in-out}
.scrive span:nth-child(2){animation-delay:.15s}
.scrive span:nth-child(3){animation-delay:.3s}
@keyframes battito{0%,60%,100%{opacity:.25; transform:translateY(0)} 30%{opacity:1; transform:translateY(-3px)}}

/* chi ha chiesto meno movimento vede la conversazione intera, ferma */
@media (prefers-reduced-motion:reduce){
  .battuta.attesa{opacity:1; transform:none; position:static; visibility:visible}
  .scrive span{animation:none}
  .chat-corpo{scroll-behavior:auto}
}

.didascalia-dialogo{margin-top:2.6em; font-size:.86rem; line-height:1.5; color:var(--tenue)}

@media (min-width:861px){
  .apertura-dialogo{grid-template-columns:minmax(0,6fr) minmax(0,6fr); gap:3.4rem; align-items:start}
  .chat{margin-top:0}
}

/* una SCHERMATA da produrre: stesso riquadro dei volti, ma nella proporzione delle schermate e
   senza frase sopra */
.figura.da-produrre{aspect-ratio:3/2; max-width:100%; background:var(--fondo-2); border-radius:3px}
.figura.da-produrre .brief{padding-bottom:1.2rem}

/* domanda a sinistra, risposta a destra */
.due{display:grid; gap:1.2rem}
.due h2{max-width:14ch}
.due p:first-of-type{margin-top:0}
.origine{margin-top:3.4em}
.origine .occhiello{margin:0}
.origine .cifre{margin-top:1.2em}

@media (min-width:861px){
  .volti{grid-template-columns:repeat(3,minmax(0,1fr))}
  .due{grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:4rem; align-items:start}
  .fila{grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:4rem; align-items:center}
  .fila--rovescia > :first-child{order:2}
  .cifre{grid-template-columns:repeat(3,minmax(0,1fr)); gap:3rem}
  .schede{grid-template-columns:repeat(3,minmax(0,1fr))}
  .schede--due{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── LA TAVOLA DI CONFRONTO DEI PACCHETTI (13-09-2026) ────────────────────────
   La compone il build dal listino (`{{shop.confronto}}`): qui c'e' solo il vestito.

   SUL TELEFONO UNA TABELLA A CINQUE COLONNE NON STA, e le due vie d'uscita solite sono
   tutte e due sbagliate per questo caso: rimpicciolire il testo lo porta sotto i 12px
   (regola di casa), e impilare ogni pacchetto in una scheda toglie proprio la cosa per
   cui esiste una tabella — leggere una riga da sinistra a destra e vedere dove il segno
   cambia. Quindi la tavola SCORRE di lato, dentro il suo contenitore, e la prima colonna
   resta ferma: si scorre con le colonne dei prezzi e si sa sempre di che riga si tratta.
   E' l'unico posto del sito dove qualcosa scorre in orizzontale — la pagina, mai.

   `tabindex="0"` sul contenitore (lo mette il build): un riquadro che scorre e che non si
   puo' raggiungere da tastiera e' contenuto irraggiungibile per chi non usa il mouse. */
.tavola{
  margin-top:2.4em; overflow-x:auto; -webkit-overflow-scrolling:touch;
  /* La riga del fuoco non si spegne: e' un elemento che si raggiunge col tabulatore. */
  outline-offset:3px;
  /* `position:relative` NON e' decorazione: senza, la PAGINA scorre di lato sul telefono.
     Ogni casella porta la sua etichetta nascosta (`.sr`, «compreso» / «non compreso») perche' un
     ✓ e un — sono due disegni, e a voce si annuncerebbero uguali. Ma `.sr` e' `position:absolute`,
     e un elemento assoluto non lo taglia l'`overflow` di un antenato qualsiasi: lo taglia solo
     quello che gli fa da RIFERIMENTO. I `<td>` non sono posizionati, e risalendo non lo era
     nessuno fino a `<body>` — quindi il riferimento era la pagina intera, le etichette
     dell'ultima colonna stavano a 870px dentro una finestra da 390, e la pagina scorreva di lato.
     La tavola, lei, tagliava benissimo: il difetto non si vedeva guardando la tavola.
     Misurato sul telefono: 870px di scorrimento senza questa riga, 390 (cioe' nessuno) con.
     Le stesse etichette dentro le INTESTAZIONI non davano fastidio, ed e' la prova del
     meccanismo: li' il `th` e' `position:sticky`, cioe' e' gia' lui il loro riferimento. */
  position:relative;
}
.confronto-piani{
  border-collapse:collapse; width:100%; min-width:34rem;
  font-size:.95rem; line-height:1.4; text-align:left;
}
.confronto-piani th, .confronto-piani td{padding:.62rem .7rem; vertical-align:middle}

/* L'INTESTAZIONE RESTA IN VISTA scorrendo una tabella lunga: senza, a meta' tavola le
   colonne sono quattro caselle senza nome e il confronto non si fa piu'. */
.confronto-piani thead th{
  /* SI INCOLLA SOTTO LA TESTATA, non in cima alla finestra. Con `top:0` l'intestazione della
     tavola finiva DIETRO la barra nera del sito (anche lei `sticky`, z-index 50): misurato, il
     `thead` stava da 0 a 84 e la testata da 0 a 62, quindi dei nomi dei pacchetti e dei prezzi si
     vedeva solo l'ultima riga, «al mese». Una tabella che scorre con le intestazioni nascoste
     e' una tabella di caselle senza nome. */
  position:sticky; top:var(--testa-alta); z-index:2;
  background:var(--fondo); border-bottom:1px solid var(--filo-2);
  font-weight:500; text-align:center; white-space:nowrap;
}
.confronto-piani thead th:first-child{text-align:left}
.confronto-piani thead .nome{display:block; font-size:1.02rem}
.confronto-piani thead .cifra{display:block; font-variant-numeric:tabular-nums; font-size:1.05rem}
.confronto-piani thead .al{display:block; font-size:12.5px; color:var(--tenue); font-weight:400}

/* La prima colonna e' il nome della riga: resta ferma mentre le colonne scorrono. Ha il
   fondo pieno apposta — senza, il testo delle altre colonne le passa sotto e si legge
   uno sopra l'altro. */
.confronto-piani tbody th[scope="row"]{
  position:sticky; left:0; z-index:1;
  background:var(--fondo); font-weight:400;
  /* SUL TELEFONO LA COLONNA DEI NOMI NON PUO' PRENDERSI TUTTO. A 390px la finestra della tavola
     e' 350: con 13rem (208px) la colonna dei nomi ne lasciava 142, e una colonna di pacchetto ne
     vuole 153 — cioe' non ne entrava nemmeno UNA intera, e il confronto non cominciava proprio.
     Con 9.5rem ne entra una piena e si vede l'inizio della seconda, che e' anche il modo in cui
     si capisce che ce ne sono altre. I nomi lunghi vanno a capo: una riga alta e' meglio di un
     confronto che non si vede. */
  min-width:9.5rem;
  border-right:1px solid var(--filo);
}

/* «Scorri di lato»: c'e' solo finche' serve (sopra gli 861px le colonne ci stanno e sparisce).
   `aria-hidden` perche' e' un'istruzione per l'occhio: chi ascolta la pagina naviga la tabella
   per righe e colonne, e «scorri di lato» non vuol dire niente. */
.scorri-di-lato{
  margin:2.2em 0 -1.6em; font-size:12.5px; color:var(--tenue);
  letter-spacing:.06em; text-transform:uppercase;
}
.confronto-piani tbody tr{border-top:1px solid var(--filo)}

/* ── la riga che spiega che cos'e' un modulo ──
   Un `<details>` dentro la cella del nome: chiuso non occupa niente, aperto scrive sotto.
   Niente tooltip: il tooltip vive sul passaggio del mouse, e sul telefono il mouse non c'e'.

   IL SEGNO DI APERTURA E' NOSTRO, non il triangolino del browser (che cambia forma da un browser
   all'altro e in certi non si vede). `list-style:none` piu' la regola `::-webkit-details-marker`
   lo spengono: senza tutt'e due, in Safari resta.
   Il `+` diventa `−` da solo quando il dettaglio e' aperto — `[open]` lo sa il browser, non serve
   JavaScript. */
.confronto-piani .spiega{font:inherit}
.confronto-piani .spiega > summary{
  cursor:pointer; list-style:none; display:flex; gap:.5rem; align-items:baseline;
}
.confronto-piani .spiega > summary::-webkit-details-marker{display:none}
.confronto-piani .spiega > summary::after{
  content:'+'; color:var(--tenue); font-size:1rem; line-height:1; margin-left:auto;
  /* Il segno non si stringe quando il nome va a capo: senza, su un nome lungo sparisce. */
  flex:0 0 auto;
}
.confronto-piani .spiega[open] > summary::after{content:'\2212'}
.confronto-piani .spiega > summary:focus-visible{outline:2px solid var(--accento); outline-offset:2px}
.confronto-piani .spiega p{
  margin:.45rem 0 .1rem; font-size:.88rem; line-height:1.5; color:var(--tenue);
  /* La descrizione e' una frase, non un paragrafo: in media 122 caratteri. Sta nella colonna
     dei nomi e non la allarga — `min-width` la tiene, e il testo va a capo. */
  max-width:22rem;
}

/* Il titolo di gruppo e' una riga di servizio: si distingue col fondo e con le maiuscoletto,
   non con un colore nuovo. `--tenue` su `--fondo-2` e' una coppia gia' misurata. */
.confronto-piani .gruppo th{
  position:sticky; left:0;
  background:var(--fondo-2); color:var(--tenue);
  font-size:12.5px; letter-spacing:.09em; text-transform:uppercase; font-weight:500;
  padding-top:.9rem; padding-bottom:.55rem;
}
.confronto-piani td{text-align:center}
/* LA CASELLA COMPRESA E' UN FONDO PIENO, non un segno (13-09-2026, Aldo: «la spunta e' poco
   visibile, metterei un fondo verde»). Aveva ragione: una spunta sottile su fondo chiaro, ripetuta
   novanta volte, si perde — e in una tabella di confronto quello che si deve vedere da lontano non
   e' il segno, e' il DISEGNO delle colonne: dove il verde si interrompe, li' finisce il pacchetto.
   Il verde e' quello dei GIUDIZI SUI NUMERI, lo stesso che in prodotto vuol dire «questo va bene».
   Il segno sopra e' chiaro, e la coppia sta in `Accessibilita::COPPIE`: un fondo nuovo che nessuno
   misura e' un fondo che prima o poi diventa illeggibile senza che il build fiati.
   DOVE NON C'E', NIENTE: nessun fondo e nessun segno. La parola resta per chi ascolta (`.sr`). */
.confronto-piani td.si{background:none}
.confronto-piani td.si > span[aria-hidden]{
  display:inline-flex; align-items:center; justify-content:center;
  /* UN QUADRATINO DELLA MISURA DEL CARATTERE, non la casella intera (13-09-2026, Aldo).
     La prima versione riempiva tutta la cella: il colore si vedeva da lontano, ma allagava la
     tavola — trentasei righe per quattro colonne diventavano un muro verde, e il confronto lo
     faceva il fondo invece del segno. Cosi' il verde marca il SEGNO e basta, e le colonne si
     leggono lo stesso perche' i quadratini si incolonnano.
     Misura legata al testo (`em`, non pixel): se un giorno il corpo della tabella cambia, il
     quadratino cresce con lui invece di restare indietro. */
  width:1.45em; height:1.45em; border-radius:3px;
  background:var(--verde); color:var(--su-scuro);
  font-size:.92rem; line-height:1;
}
.confronto-piani td.no{background:none}
.confronto-piani td.quota{font-variant-numeric:tabular-nums; color:var(--testo)}
.confronto-piani .riga-fa td{padding-top:1.1rem; padding-bottom:.4rem}
.confronto-piani .riga-fa .pulsante{white-space:nowrap; font-size:.92rem}
/* Sul fondo sabbia le due colonne ferme devono avere IL FONDO DELLA SEZIONE, non quello
   della pagina: con un fondo diverso si vedrebbero due strisce chiare che scorrono. */
.campo--sabbia .confronto-piani thead th,
.campo--sabbia .confronto-piani tbody th[scope="row"]{background:var(--fondo-2)}
.campo--sabbia .confronto-piani .gruppo th{background:var(--fondo-3)}

@media (min-width:861px){
  /* Da qui in su la testata e' piu' bassa: `.testa-riga` perde il `flex-wrap` e il padding che
     le servono sul telefono. Misurata: 54px (contro 62). Senza questa riga l'intestazione della
     tavola si incollerebbe 8px piu' in basso del dovuto, e in quella fessura si vedrebbero
     scorrere le righe della tabella. */
  :root{ --testa-alta:54px; }
  /* L'AVVISO DI SCORRIMENTO NON SI SPEGNE QUI. Lo spegneva una media query — «sopra gli 861px le
     colonne ci stanno» — e non era vero: a 1200px la tavola ne vuole 1002 e ne ha 928, quindi
     scorre di 74 e l'ULTIMA COLONNA E' TAGLIATA. Con l'avviso spento, chi guardava da computer
     leggeva «€ 2.07» al posto di 2.078 e non aveva nessun segno che ci fosse dell'altro: un
     prezzo troncato non e' un difetto grafico, e' un prezzo sbagliato.
     Adesso lo decide lo script della pagina, confrontando l'ingombro VERO della tavola con lo
     spazio che ha — che e' l'unica cosa che sappia di quante colonne ci sono e di quanto sono
     larghi i nomi. Senza JavaScript l'avviso resta: dire «si scorre» quando non serve costa molto
     meno che tacerlo quando serve.
     E la colonna dei nomi torna larga, ma meno di prima (16rem invece di 17): quei 16px erano
     parte del taglio. */
  .confronto-piani tbody th[scope="row"]{min-width:16rem}
  /* Come il confronto e il listino: la tavola esce dalla colonna del testo, che e' giusta
     per un paragrafo e stretta per cinque colonne. */
  /* 64rem e non 58: la tavola con quattro pacchetti ne chiede circa 1002 (poco piu' di 62rem), e
     con 58rem (928px) restava fuori l'ultima colonna — il prezzo di Enterprise si leggeva
     «€ 2.07». Il `min()` col 94vw tiene il margine laterale sugli schermi stretti, quindi fra gli
     861 e i ~1090px la tavola scorre ancora: li' l'avviso si accende da se'. */
  .tavola{width:min(64rem, 94vw); margin-left:50%; transform:translateX(-50%)}
  .confronto-piani{font-size:.98rem}
  .confronto-piani tbody th[scope="row"]{min-width:17rem}
}

/* ── il commutatore mese/anno ──
   Due bottoni veri, non un interruttore disegnato: si raggiungono col tabulatore e dicono da
   soli quale dei due e' acceso (`aria-pressed`). Senza JavaScript non compare nemmeno — i
   prezzi al mese restano scritti in pagina, e l'anno e' detto a parole sotto ogni scheda. */
.periodo{display:none; margin-top:1.8em; gap:.4rem; align-items:center}
.periodo.acceso{display:inline-flex}
.periodo button{
  font:400 .92rem/1 var(--sans); padding:.5rem .9rem; border-radius:3px; cursor:pointer;
  background:none; color:var(--tenue); border:1px solid var(--filo-2);
}
.periodo button[aria-pressed="true"]{background:var(--campo-scuro); color:var(--su-scuro); border-color:var(--campo-scuro)}
.periodo .risparmio{font-size:12.5px; color:var(--tenue); margin-left:.3rem}

/* ── IL NASTRO DI UNA PAGINA SUPERATA ────────────────────────────────────────────────────
   Lo mette il build in cima al `<body>` di ogni pagina che dichiara `superata_da`, e a
   differenza del nastro della bozza questo ESCE ANCHE IN PRODUZIONE: e' il punto. Un
   indirizzo pubblicato non si spegne mai del tutto — il redirect porta il vecchio link alla
   sua pagina-old — e senza questa riga il lettore resta su un testo superato senza nessun
   segno. Al 18-09-2026 erano dodici pagine mute.
   Sabbia e non mattone: il mattone e' il colore dell'errore, e una pagina vecchia non e' un
   guasto. La coppia e' dichiarata nei token, e il link prende il colore del testo con un filo
   sotto — su questo fondo un accento chiaro non reggerebbe il contrasto. */
.nastro-superata{
  background:var(--fondo-3); color:var(--testo);
  border-bottom:1px solid var(--filo-2);
  text-align:center;
  font-family:var(--sans); font-size:.88rem; line-height:1.4;
  padding:.6rem 1rem;
}
.nastro-superata a{color:var(--testo); text-decoration:underline; text-underline-offset:.2em; font-weight:600}
@media print{ .nastro-superata{display:none} }

/* LE DOMANDE FREQUENTI (21-09-2026): in fondo a sei pagine, prima dell'invito. Aperte a clic;
   il build ne fa il dato strutturato `FAQPage`, quindi quello che si legge e' quello che si
   dichiara. Il nome non e' `.domande`, che in questo foglio e' gia' un'altra cosa. */
.domande-frequenti details{border-top:1px solid var(--filo-2); padding:.85rem 0}
.domande-frequenti details:last-of-type{border-bottom:1px solid var(--filo-2)}
.domande-frequenti summary{
  cursor:pointer; list-style:none; font-weight:600; color:var(--testo);
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
}
.domande-frequenti summary::-webkit-details-marker{display:none}
.domande-frequenti summary::after{content:"+"; color:var(--tenue); font-weight:400; font-size:1.2em; line-height:1}
.domande-frequenti details[open] summary::after{content:"\2212"}
.domande-frequenti summary:focus-visible{outline:2px solid var(--accento); outline-offset:3px}
.domande-frequenti details p{margin:.6rem 0 0; color:var(--testo-2)}

/* ── aggiunte di questo sito (21-09-2026) ─────────────────────────────────────────────────
   Il ritratto accanto al nome, e il percorso in righe con l'anno davanti. Dal telefono in su:
   impilati sul telefono, affiancati dal desktop. */
.presenta{display:flex; flex-direction:column; gap:1.4rem}
.presenta img{width:min(240px, 62vw); height:auto; border-radius:14px; background:var(--fondo-2)}
.tappe{list-style:none; margin:1.4rem 0 0; padding:0; display:grid; gap:1rem}
.tappe li{display:grid; grid-template-columns:4rem 1fr; gap:1rem; align-items:baseline}
.tappe b{color:var(--ottone); font-variant-numeric:tabular-nums}
.campo--inchiostro .tappe b, .campo--blu .tappe b{color:var(--su-scuro)}
.logo-editore{width:min(260px, 70vw); height:auto; background:#fff; border-radius:8px; padding:10px 14px}
@media (min-width:861px){
  .presenta{flex-direction:row; align-items:center; gap:2.4rem}
}