/* ============================================================================
   affleak — foglio di stile

   TEMA CHIARO SOLTANTO. Scelta deliberata: ogni colore e' dichiarato
   esplicitamente, nessuna media query di preferenza, nessun automatismo. La
   pagina si presenta identica su qualunque impostazione di sistema.

   L'accento e' UNO (indaco #4C46D6). Rosso, verde e ambra non sono decorazione:
   dicono lo stato. Non vanno usati per altro, mai.

   Palette dei grafici verificata con il validatore del design system:
   banda di luminosita', soglia di croma, separazione per daltonismo
   (delta E 30 in protanopia, 32,7 a vista normale) e contrasto sul fondo.
   ============================================================================ */

:root {
  /* --- superfici e inchiostri --- */
  --fondo:        #FBFBFD;
  --carta:        #FFFFFF;
  --carta-alt:    #F6F7FA;
  --inchiostro:   #16181D;
  --inchiostro-2: #454A54;
  --spento:       #767C88;
  --filo:         #E7E8EE;
  --filo-forte:   #D3D6DF;

  /* --- accento --- */
  --accento:      #4C46D6;
  --accento-cupo: #3E38C0;
  --accento-velo: #EEEDFC;
  --accento-orlo: #C9C6F4;
  --su-accento:   #FFFFFF;

  /* --- stati: riservati, mai per altro --- */
  --grave:        #C4271B;
  --grave-velo:   #FEF2F1;
  --grave-orlo:   #F3C9C5;
  --buono:        #067647;
  --buono-velo:   #ECFDF3;
  --buono-orlo:   #B6E9CD;
  --avviso:       #A85806;
  --avviso-velo:  #FFF8EC;
  --avviso-orlo:  #F0DBB4;

  /* --- ombre: due sole, usate con parsimonia --- */
  --ombra-1: 0 1px 2px rgba(16, 18, 29, .05);
  --ombra-2: 0 6px 20px -6px rgba(16, 18, 29, .12), 0 1px 2px rgba(16, 18, 29, .05);

  /* --- caratteri ---
     Due famiglie, con due mestieri diversi.

     `--sans` resta di SISTEMA e regge tutto il testo che si legge: paragrafi, tabelle,
     moduli. E' il carattere che il lettore ha gia' installato, non costa un byte, ed e'
     disegnato apposta per essere leggibile a 15 px sul suo schermo. Sostituirlo con un
     font scaricato peggiorerebbe la leggibilita' e farebbe pagare l'attesa a tutti.

     `--titoli` e' Outfit, servito da noi. Vale i 32 KB perche' li spende su cio' che si
     GUARDA — il marchio e i titoli — non su cio' che si legge. Serviti da noi e non da
     Google: un font preso da fonts.gstatic.com e' una richiesta a un terzo su ogni
     pagina del sito, con l'indirizzo del lettore, e non serve a niente.

     Il ripiego e' `--sans` per intero: se il font non arriva, i titoli restano titoli. */
  --sans: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Roboto, Arial, sans-serif;
  --titoli: "Outfit", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Roboto, Arial, sans-serif;
  --mono: "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", Menlo, monospace;

  /* --- scala di spazio, base 4 --- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* --- raggi --- */
  --r-s: 6px;  --r: 10px;  --r-g: 14px;
}

/* ============================================================ azzeramenti */

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

/* L'attributo `hidden` deve vincere, e senza questa riga non vince: il browser
   lo applica con `display: none` dal proprio foglio, che ha specificita' piu'
   bassa di qualunque nostra classe. Un `.nota[hidden]` con `.nota{display:flex}`
   resta quindi VISIBILE — visto il 15/08/2026 sull'avviso di scansione ferma,
   che compariva subito con il testo vuoto. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--inchiostro);
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img, svg { max-width: 100%; }

/* Rete di sicurezza sulle icone. Un SVG con il solo `viewBox` e nessuna larghezza
   NON e' piccolo: si prende tutta la larghezza che il contenitore gli concede. Per
   questo ogni icona ha una regola sua (.bottone svg, .segno svg, ...) — ma basta
   metterne una in un posto nuovo e diventa una freccia alta mezzo schermo.
   Visto il 15/08/2026 in home, sul link «Cosa comprende ogni pacchetto».

   Il `:where()` serve e non e' decorativo: senza, `svg:not([width]):not([height])`
   pesa (0,2,1) — piu' di `.bottone svg` e di `.disegno-apertura` — e invece di fare
   da rete di sicurezza schiaccerebbe A 1em OGNI icona e ogni illustrazione del sito.
   `:where()` azzera la specificita', quindi qualunque regola scritta altrove vince,
   e questa vale solo dove non c'e' nient'altro. Sbagliato e corretto il 15/08/2026. */
:where(svg:not([width]):not([height])) {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  vertical-align: -.15em;
}

/* Un solo anello di fuoco per tutto il sito, sempre visibile. */
:focus-visible {
  outline: 2px solid var(--accento);
  outline-offset: 2px;
  border-radius: var(--r-s);
}
:focus:not(:focus-visible) { outline: none; }

/* Salto al contenuto, per chi naviga da tastiera. */
.salta {
  position: absolute;
  left: -9999px;
  top: var(--s2);
  background: var(--carta);
  color: var(--accento);
  padding: var(--s2) var(--s4);
  border-radius: var(--r-s);
  border: 1px solid var(--accento);
  z-index: 100;
  font-weight: 600;
}
.salta:focus { left: var(--s4); }

/* ============================================================== tipografia */

/*
 * Un file solo per tutti i pesi: Outfit e' un font variabile, quindi `font-weight`
 * dichiara l'intervallo 400-800 e il browser interpola. Due file statici — uno per il
 * 650 dei titoli, uno per l'800 del marchio — sarebbero costati il doppio.
 *
 * `font-display: swap` e' la riga che decide se questo font e' un miglioramento o un
 * danno: senza, il titolo resta INVISIBILE finche' il font non arriva, e su una
 * connessione lenta chi apre la pagina vede un rettangolo vuoto dove c'e' scritto di
 * cosa parla. Con swap si legge subito col carattere di sistema e cambia quando arriva.
 */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonti/outfit.woff2") format("woff2");
}

h1, h2, h3, h4 { margin: 0; font-family: var(--titoli); font-weight: 650; letter-spacing: -.018em; }

h1 { font-size: 1.625rem; line-height: 1.25; text-wrap: balance; }
h2 { font-size: 1.0625rem; line-height: 1.35; }
h3 {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--spento);
}
h4 { font-size: .9375rem; line-height: 1.4; }

p { margin: 0 0 var(--s3); }
p:last-child { margin-bottom: 0; }

.guida     { color: var(--spento); font-size: .9rem; margin-top: var(--s1); }
.sommario  { color: var(--inchiostro-2); font-size: 1.0625rem; }
.minuto    { font-size: .8125rem; color: var(--spento); }
.mono      { font-family: var(--mono); font-size: .86em; letter-spacing: -.01em; }

a { color: var(--accento); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

strong { font-weight: 650; }

/* ================================================================== barra */

.barra {
  background: var(--carta);
  border-bottom: 1px solid var(--filo);
  box-shadow: 0 1px 3px rgba(16, 18, 29, .04);
  position: sticky;
  top: 0;
  z-index: 20;
}

.barra .dentro {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--s5);
  height: 68px;
  display: flex;
  align-items: center;
  gap: var(--s6);
}

/*
 * Il marchio: goccia, poi «aff» in nero e «leak» nel blu del prodotto.
 *
 * Lo stacco fra le due meta' non e' decorazione: e' quello che rende il nome leggibile
 * come una parola composta invece che come una sequenza di sette lettere. «affleak»
 * tutto nero si legge una volta e non si ricorda.
 *
 * Lo spazio fra icona e testo e' un `margin` sull'icona, NON un `gap` del flex: il gap
 * vale fra tutti i figli, quindi separerebbe anche «aff» da «leak» — che e' esattamente
 * l'effetto che non vogliamo.
 */
.marchio {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-family: var(--titoli);
  font-size: 1.65rem;   /* 1,375 + 20%, chiesto il 16/08 */
  font-weight: 700;
  letter-spacing: -.035em;
  color: var(--inchiostro);
  white-space: nowrap;
}
.marchio:hover { text-decoration: none; }
.marchio svg { width: 38px; height: 38px; flex: none; color: var(--accento); margin-right: 9px; }
.marchio .leak { color: var(--accento); }

.barra nav { display: flex; align-items: center; gap: var(--s1); font-size: .9375rem; }

/* Voci di menu a pastiglia: il bersaglio del clic e' l'intera pastiglia, non le due
   parole. Su un'applicazione si clicca, non si legge. */
.barra nav a {
  color: var(--inchiostro-2);
  font-weight: 550;
  padding: 7px var(--s3);
  border-radius: var(--r-s);
  transition: color .12s ease, background .12s ease;
}
.barra nav a:hover { color: var(--inchiostro); background: var(--carta-alt); text-decoration: none; }
.barra nav a.attivo { color: var(--accento); background: var(--accento-velo); }
/* La regola qui sopra e' piu' specifica di .bottone: il bottone in barra va ridichiarato
   per intero, altrimenti eredita il padding della pastiglia e si accartoccia. */
.barra nav a.bottone {
  color: var(--su-accento);
  padding: 9px var(--s4);
  background: linear-gradient(180deg, #5B55DF 0%, #4540CE 100%);
}
.barra nav a.bottone:hover {
  color: var(--su-accento);
  background: linear-gradient(180deg, #6A64E8 0%, #4F49D6 100%);
}

.spinta { margin-left: auto; }

/* Pastiglia utente: un contenitore vero, non un'email appesa nel vuoto. */
.utente {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 4px var(--s3) 4px 4px;
  border: 1px solid var(--filo);
  border-radius: 999px;
  background: var(--carta-alt);
  max-width: 260px;
}
.utente .mono {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .8125rem;
}
.iniziali {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(180deg, #5B55DF 0%, #4540CE 100%);
  color: #FFFFFF;
  display: grid;
  place-items: center;
  font-size: .7rem;
  font-weight: 700;
  flex: none;
  user-select: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}

/* ============================================================== struttura */

main { flex: 1; }

.contenuto {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--s6) var(--s5) var(--s8);
  width: 100%;
}
.contenuto.stretto { max-width: 400px; padding-top: var(--s7); }

.testa-pagina {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
  margin-bottom: var(--s5);
}

.briciola { margin-bottom: var(--s2); font-size: .875rem; }
.briciola a { color: var(--spento); }
.briciola a:hover { color: var(--accento); }

.sezione { margin-top: var(--s6); }
.sezione > h2 { margin-bottom: var(--s3); }

/* ================================================================= schede */

.scheda {
  background: var(--carta);
  border: 1px solid var(--filo);
  border-radius: var(--r);
  box-shadow: var(--ombra-1);
  overflow: hidden;
}

.scheda > .testa {
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--filo);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
}
.scheda > .corpo { padding: var(--s5); }
.scheda > .piede-scheda {
  padding: var(--s3) var(--s5);
  border-top: 1px solid var(--filo);
  background: var(--carta-alt);
  font-size: .8125rem;
  color: var(--spento);
}

/* ====================================================== riquadri numerici */

.numeri {
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
}

.numero-grande {
  background: var(--carta);
  border: 1px solid var(--filo);
  border-radius: var(--r);
  padding: var(--s4) var(--s5) var(--s5);
  box-shadow: var(--ombra-1);
}
.numero-grande .titolo {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--spento);
  display: flex;
  align-items: center;
  gap: var(--s1);
}
.numero-grande .cifra {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.05;
  margin-top: var(--s2);
}
.numero-grande .coda { font-size: .8125rem; color: var(--spento); margin-top: var(--s1); }

.numero-grande.critico { border-color: var(--grave-orlo); background: var(--grave-velo); }
.numero-grande.critico .cifra, .numero-grande.critico .titolo { color: var(--grave); }
.numero-grande.sereno  { border-color: var(--buono-orlo); background: var(--buono-velo); }
.numero-grande.sereno .cifra, .numero-grande.sereno .titolo { color: var(--buono); }

/* ================================================================= avvisi */

.nota {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  padding: var(--s4);
  border-radius: var(--r-s);
  border: 1px solid var(--filo);
  background: var(--carta);
  font-size: .9375rem;
  line-height: 1.55;
}
.nota > svg { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.nota + .nota { margin-top: var(--s2); }

.nota.grave    { background: var(--grave-velo);   border-color: var(--grave-orlo);   color: var(--grave); }
.nota.buono    { background: var(--buono-velo);   border-color: var(--buono-orlo);   color: var(--buono); }
.nota.avviso   { background: var(--avviso-velo);  border-color: var(--avviso-orlo);  color: var(--avviso); }
.nota.info     { background: var(--accento-velo); border-color: var(--accento-orlo); color: var(--accento); }

/* ================================================================ bottoni */

/* Il gradiente e' volutamente quasi impercettibile: 8% di scarto fra sopra e sotto.
   Serve a dare volume, non a farsi notare. Le tre cose che fanno sembrare "caro" un
   bottone sono queste, e nessuna e' vistosa:
     1. il micro-gradiente verticale
     2. un filo di luce interno sul bordo alto
     3. l'ombra colorata dell'accento, mai nera
   Un gradiente a due colori distinti invecchierebbe in sei mesi. */

.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.005em;
  padding: 9px var(--s4);
  border-radius: var(--r-s);
  border: 1px solid #4540CE;
  background: linear-gradient(180deg, #5B55DF 0%, #4540CE 100%);
  color: var(--su-accento);
  cursor: pointer;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 1px 2px rgba(76, 70, 214, .28);
  transition: background .14s ease, box-shadow .14s ease, transform .1s ease, border-color .14s ease;
}
.bottone:hover {
  background: linear-gradient(180deg, #6A64E8 0%, #4F49D6 100%);
  border-color: #4A44D2;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .2),
    0 3px 8px rgba(76, 70, 214, .3);
  transform: translateY(-1px);
  text-decoration: none;
}
.bottone:active {
  transform: translateY(0);
  background: linear-gradient(180deg, #4540CE 0%, #4540CE 100%);
  box-shadow: inset 0 2px 4px rgba(24, 20, 90, .28);
}
.bottone[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.bottone svg { width: 15px; height: 15px; flex: none; }

/* Il secondario ha lo stesso trattamento, con la luce che arriva dallo stesso lato:
   due bottoni accanto devono sembrare fatti dello stesso materiale. */
.bottone.tenue {
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F6F9 100%);
  color: var(--inchiostro-2);
  border-color: var(--filo-forte);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 1px 2px rgba(16, 18, 29, .06);
}
.bottone.tenue:hover {
  background: linear-gradient(180deg, #FFFFFF 0%, #EEF0F5 100%);
  color: var(--inchiostro);
  border-color: #BFC3CF;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 3px 8px rgba(16, 18, 29, .09);
}
.bottone.tenue:active {
  background: #EEF0F5;
  box-shadow: inset 0 2px 4px rgba(16, 18, 29, .1);
}

.bottone.pericolo {
  background: linear-gradient(180deg, #FFFFFF 0%, #FDF4F3 100%);
  color: var(--grave);
  border-color: var(--grave-orlo);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(196, 39, 27, .08);
}
.bottone.pericolo:hover { background: var(--grave-velo); border-color: var(--grave); }

.bottone.pieno { width: 100%; }

/* ================================================================= moduli */

form { display: flex; flex-direction: column; gap: var(--s4); }

label { display: flex; flex-direction: column; gap: var(--s1); font-size: .875rem; font-weight: 600; color: var(--inchiostro-2); }
label .suggerimento { font-weight: 400; color: var(--spento); font-size: .8125rem; line-height: 1.45; }

input[type=text], input[type=email], input[type=password], input[type=url], textarea {
  font: inherit;
  font-size: .9375rem;
  padding: 9px var(--s3);
  border: 1px solid var(--filo-forte);
  border-radius: var(--r-s);
  background: var(--carta);
  color: var(--inchiostro);
  width: 100%;
  transition: border-color .12s ease, box-shadow .12s ease;
}
/* Un elenco che si incolla: monospaziato perche' un dominio storto si vede, e
   ridimensionabile solo in verticale — in orizzontale sfonderebbe la scheda. */
textarea {
  font-family: var(--mono);
  font-size: .875rem;
  line-height: 1.6;
  resize: vertical;
  min-height: 96px;
}
input:hover, textarea:hover { border-color: var(--spento); }
input:focus, textarea:focus {
  border-color: var(--accento);
  box-shadow: 0 0 0 3px var(--accento-velo);
  outline: none;
}
input::placeholder, textarea::placeholder { color: var(--spento); opacity: 1; }

/* =============================================================== tabelle */

.scorrevole { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table { width: 100%; border-collapse: collapse; font-size: .9rem; }

thead th {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--spento);
  text-align: left;
  padding: var(--s3) var(--s4);
  background: var(--carta-alt);
  border-bottom: 1px solid var(--filo);
  white-space: nowrap;
  position: sticky;
  top: 0;
}
tbody td {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--filo);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background .1s ease; }
tbody tr:hover { background: var(--carta-alt); }

td.num, th.num { text-align: right; white-space: nowrap; }
td.codice { font-family: var(--mono); font-size: .8125rem; word-break: break-all; line-height: 1.45; }
td.azioni { text-align: right; white-space: nowrap; }
td.azioni > * + * { margin-left: var(--s2); }

/* ============================================================== etichette */

.stato {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font-size: .75rem;
  font-weight: 650;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid transparent;
  line-height: 1.45;
}
.stato::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

.stato.grave  { color: var(--grave);  background: var(--grave-velo);  border-color: var(--grave-orlo); }
.stato.buono  { color: var(--buono);  background: var(--buono-velo);  border-color: var(--buono-orlo); }
.stato.attesa { color: var(--avviso); background: var(--avviso-velo); border-color: var(--avviso-orlo); }
.stato.neutro { color: var(--spento); background: var(--carta-alt);   border-color: var(--filo); }

/* ================================================================ grafico */

.grafico { width: 100%; height: auto; display: block; }

/* Barre in HTML, non in SVG: cosi' le etichette sono testo vero e su un telefono
   restano leggibili invece di rimpicciolirsi con il disegno. */

.barre { display: flex; flex-direction: column; gap: 2px; }

.riga-barra {
  display: grid;
  grid-template-columns: 176px 1fr 92px;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2);
  border-radius: var(--r-s);
  transition: background .12s ease;
}
.riga-barra:hover, .riga-barra:focus-visible { background: var(--carta-alt); }

.etichetta-barra {
  font-size: .9rem;
  font-weight: 550;
  color: var(--inchiostro-2);   /* inchiostro di testo, mai il colore della serie */
  min-width: 0;
  overflow-wrap: anywhere;
}
.nota-barra { display: block; font-size: .75rem; font-weight: 400; color: var(--spento); }

.canale { height: 14px; border-radius: 4px; background: var(--carta-alt); overflow: hidden; }
.riempimento {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--accento);
  transition: background .12s ease;
}
.riempimento.stato { background: var(--avviso); }   /* non e' una categoria: e' uno stato */
.riempimento.muto  { background: var(--filo-forte); }

.riga-barra:hover .riempimento       { background: var(--accento-cupo); }
.riga-barra:hover .riempimento.stato { background: #8A4705; }

.valore-barra {
  font-family: var(--mono);
  font-size: .875rem;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

.legenda-grafico {
  display: flex;
  gap: var(--s4);
  flex-wrap: wrap;
  font-size: .8125rem;
  color: var(--spento);
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--filo);
}
.legenda-grafico span { display: inline-flex; align-items: center; gap: var(--s2); }
.legenda-grafico i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.legenda-grafico i.aff { background: var(--accento); }
.legenda-grafico i.cieco { background: var(--avviso); }

/* ================================================================== vuoto */

.nulla { text-align: center; padding: var(--s8) var(--s5); color: var(--spento); }
.nulla > svg { width: 34px; height: 34px; color: var(--filo-forte); margin-bottom: var(--s3); }
.nulla p { margin: 0 0 var(--s1); }
.nulla strong { color: var(--inchiostro); font-size: 1rem; }
.nulla .bottone { margin-top: var(--s4); }

/* ========================================================= pagina pubblica */

/* L'APERTURA — e la regola numero 1: i due campi si vedono senza scorrere.
   Due colonne su schermo largo (testo+modulo | disegno), una colonna sul telefono
   con il disegno SOTTO. Il padding verticale e' calmo apposta: ogni pixel qui e'
   un pixel che allontana il campo del dominio dal bordo alto dello schermo. */
.apertura {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: var(--s6);
  padding: var(--s6) 0 var(--s7);
  text-align: left;
  margin: 0 auto;
}
.apertura h1 {
  font-size: clamp(1.75rem, 3.6vw, 2.625rem);
  letter-spacing: -.035em;
  line-height: 1.12;
  margin-bottom: var(--s3);
}
.apertura .sommario { max-width: 52ch; margin: 0 0 var(--s5); }
.apertura .occhiello { margin-bottom: var(--s3); }
.apertura .cerca { margin: 0; max-width: none; }
.apertura .spunta-inline { margin-left: 0; margin-right: auto; }

.apertura-disegno svg { width: 100%; max-width: 440px; height: auto; display: block; margin: 0 auto; }

@media (max-width: 900px) {
  /* Una colonna, e il disegno va DOPO: `order` sposta quello che si vede senza
     toccare l'ordine del sorgente, che resta quello giusto da leggere. */
  .apertura {
    grid-template-columns: 1fr;
    gap: var(--s5);
    padding: var(--s5) 0 var(--s6);
    text-align: center;
  }
  .apertura .sommario { margin-left: auto; margin-right: auto; }
  .apertura .spunta-inline { margin-left: auto; }
  .apertura-testo   { order: 1; }
  .apertura-disegno { order: 2; }
  .apertura-disegno svg { max-width: 340px; }
}

@media (max-width: 560px) {
  /* Sul telefono i conti sono stretti. Su uno schermo da 375x667, impilando
     intestazione, occhiello, titolo e sommario, il modulo finisce intorno ai 560 px:
     ci sta, ma per un pelo, e su un telefono piu' piccolo o con il carattere ingrandito
     non ci sta piu'.
     Quindi qui il MODULO SALE SOPRA IL SOMMARIO. Il titolo dice di cosa si tratta, il
     campo e' subito sotto, la spiegazione viene dopo per chi la vuole. E' il solito
     ordine di lettura su telefono, e toglie di mezzo l'unico blocco alto che stava
     fra il titolo e la cosa da fare. Cambia solo cio' che si VEDE: il sorgente resta
     in ordine logico per chi legge con uno screen reader. */
  .apertura { padding: var(--s4) 0 var(--s5); gap: var(--s4); }
  .apertura h1 { font-size: 1.625rem; margin-bottom: var(--s3); }
  .apertura-disegno svg { max-width: 260px; }

  .apertura-testo { display: flex; flex-direction: column; }
  .apertura-testo > .occhiello { order: 1; align-self: center; }
  .apertura-testo > h1         { order: 2; }
  .apertura-testo > .nota      { order: 3; }
  .apertura-testo > form       { order: 4; }
  .apertura-testo > .sommario  {
    order: 5;
    font-size: .9375rem;
    margin: var(--s5) 0 0;
  }
}

.occhiello {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--accento);
  background: var(--accento-velo);
  border: 1px solid var(--accento-orlo);
  padding: 4px var(--s3);
  border-radius: 999px;
  margin-bottom: var(--s4);
}
.occhiello svg { width: 14px; height: 14px; }

.azioni-apertura { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; }

.caratteristiche {
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(236px, 1fr));
}
.caratteristica {
  background: var(--carta);
  border: 1px solid var(--filo);
  border-radius: var(--r);
  padding: var(--s5);
  box-shadow: var(--ombra-1);
  transition: box-shadow .15s ease, border-color .15s ease;
}
.caratteristica:hover { box-shadow: var(--ombra-2); border-color: var(--filo-forte); }
.caratteristica .segno {
  width: 34px; height: 34px;
  border-radius: var(--r-s);
  background: var(--accento-velo);
  color: var(--accento);
  display: grid;
  place-items: center;
  margin-bottom: var(--s3);
}
.caratteristica .segno svg { width: 17px; height: 17px; }
.caratteristica h4 { margin-bottom: var(--s1); }
.caratteristica p { font-size: .9rem; color: var(--inchiostro-2); }

/* ================================================================== piede */

.piede {
  border-top: 1px solid var(--filo);
  background: var(--carta);
  padding: var(--s5);
  text-align: center;
  font-size: .8125rem;
  color: var(--spento);
}
.piede a { color: var(--spento); text-decoration: underline; text-underline-offset: 2px; }
.piede a:hover { color: var(--accento); }

/* ================================================================ telefono */

@media (max-width: 720px) {
  .barra .dentro { gap: var(--s4); padding: 0 var(--s4); }
  .barra nav { gap: var(--s4); font-size: .875rem; }
  .utente .mono { display: none; }         /* l'email non serve sul telefono */
  .contenuto { padding: var(--s5) var(--s4) var(--s7); }
  .apertura { padding: var(--s6) 0 var(--s5); }
  .scheda > .corpo, .scheda > .testa { padding: var(--s4); }
  thead th, tbody td { padding: var(--s2) var(--s3); }
  h1 { font-size: 1.375rem; }
}

/* ================================================================== stampa */

@media print {
  .barra, .piede, .bottone, form { display: none !important; }
  body { background: #FFF; font-size: 11pt; }
  .scheda { border: 1px solid #CCC; box-shadow: none; break-inside: avoid; }
  .numero-grande { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ==================================================== ritocchi minori (v2) */

.apertura .occhiello svg { width: 15px; height: 15px; }

/* =========================================== grafico: toni e composizione */

.barra.muto  { fill: var(--filo-forte); }
.riga-grafico:hover .barra.muto { fill: var(--spento); }

.composizione {
  display: flex;
  width: 100%;
  height: 22px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--carta-alt);
  gap: 2px;                      /* il distacco fra segmenti e' del design system */
}
.composizione .pezzo { display: block; height: 100%; }
.composizione .pezzo.accento { background: var(--accento); }
.composizione .pezzo.stato   { background: var(--avviso); }
.composizione .pezzo.muto    { background: var(--filo-forte); }

.legenda-grafico i.accento { background: var(--accento); }
.legenda-grafico i.stato   { background: var(--avviso); }
.legenda-grafico i.muto    { background: var(--filo-forte); }
.legenda-grafico i.aff     { background: var(--accento); }
.legenda-grafico i.cieco   { background: var(--avviso); }

/* ============================================== il numero che conta */

.cassa {
  background: var(--carta);
  border: 1px solid var(--filo);
  border-radius: var(--r-g);
  padding: var(--s6) var(--s5);
  box-shadow: var(--ombra-1);
  text-align: center;
}
.cassa .etichetta {
  font-size: .8125rem;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--spento);
}
.cassa .somma {
  font-size: clamp(2.5rem, 7vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.05;
  margin: var(--s2) 0 var(--s1);
}
.cassa.perdita .somma { color: var(--grave); }
.cassa.pulito  .somma { color: var(--buono); }
.cassa .chiosa { color: var(--inchiostro-2); font-size: .9375rem; max-width: 46ch; margin: 0 auto; }

.riga-conto {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--filo);
}
.riga-conto:last-child { border-bottom: none; }
.riga-conto .voce { font-size: .9375rem; }
.riga-conto .cifra { font-weight: 650; white-space: nowrap; }
.riga-conto.forte .cifra { color: var(--grave); }

/* ==================================================== sparkline e linee */

.sparkline { width: 100%; height: 30px; display: block; margin-top: var(--s2); }
.sparkline .tratto { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.sparkline .velo   { stroke: none; }
.sparkline .ultimo { stroke: var(--carta); stroke-width: 1.5; }

.sparkline.accento .tratto, .sparkline.accento .ultimo { stroke: var(--accento); }
.sparkline.accento .ultimo { fill: var(--accento); }
.sparkline.accento .velo   { fill: var(--accento); opacity: .09; }

.sparkline.buono .tratto { stroke: var(--buono); }
.sparkline.buono .ultimo { fill: var(--buono); stroke: var(--carta); }
.sparkline.buono .velo   { fill: var(--buono); opacity: .1; }

.sparkline.grave .tratto { stroke: var(--grave); }
.sparkline.grave .ultimo { fill: var(--grave); stroke: var(--carta); }
.sparkline.grave .velo   { fill: var(--grave); opacity: .09; }

.grafico.linee { height: auto; }
.grafico .griglia { stroke: var(--filo); stroke-width: 1; }
.grafico .tacca {
  font-family: var(--sans);
  font-size: 11px;
  fill: var(--spento);
}
.grafico .linea {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.grafico .linea.buono { stroke: var(--buono); }
.grafico .linea.grave { stroke: var(--grave); }
.grafico .linea.accento { stroke: var(--accento); }

/* Anello di superficie sui punti: due serie che si incrociano restano leggibili. */
.grafico .punto { stroke: var(--carta); stroke-width: 2; }
.grafico .punto.buono   { fill: var(--buono); }
.grafico .punto.grave   { fill: var(--grave); }
.grafico .punto.accento { fill: var(--accento); }

.legenda-grafico i.buono { background: var(--buono); }
.legenda-grafico i.grave { background: var(--grave); }

/* ============================================== barre impilate per riga */

.impilate { display: flex; flex-direction: column; gap: var(--s3); }
.riga-impilata {
  display: grid;
  grid-template-columns: 132px 1fr 76px;
  align-items: center;
  gap: var(--s3);
}
.nome-impilata {
  font-size: .875rem;
  font-weight: 550;
  color: var(--inchiostro-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tot-impilata {
  font-size: .875rem;
  font-weight: 650;
  text-align: right;
  white-space: nowrap;
}
.riga-impilata .composizione { height: 18px; }

/* Il delta rispetto al periodo precedente, dentro il riquadro numerico. */
.delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: .8125rem;
  font-weight: 650;
  margin-top: var(--s1);
}
.delta.su  { color: var(--buono); }
.delta.giu { color: var(--grave); }
.delta.pari { color: var(--spento); }
.delta .rispetto { font-weight: 400; color: var(--spento); }

@media (max-width: 640px) {
  .riga-impilata { grid-template-columns: 92px 1fr 66px; gap: var(--s2); }
}

/* ============================================================================
   TELEFONO — trattamento vero, non solo restringimento

   Tre problemi che il semplice "si stringe" non risolve:
     1. le tabelle a cinque colonne, che scorrerebbero di lato
     2. i grafici SVG, il cui testo si rimpicciolisce insieme al disegno
     3. la testata, con marchio + tre voci + email + esci
   ============================================================================ */

@media (max-width: 640px) {

  /* --- barre: etichetta e valore sopra, barra sotto a tutta larghezza --- */
  .riga-barra {
    grid-template-columns: 1fr auto;
    grid-template-areas: "eti val" "can can";
    gap: var(--s1) var(--s2);
    padding: var(--s2) var(--s1);
  }
  .etichetta-barra { grid-area: eti; }
  .valore-barra    { grid-area: val; }
  .canale          { grid-area: can; }

  /* --- il testo dentro l'SVG va ingrandito: il disegno si riduce di circa
         la meta', quindi il carattere va raddoppiato per restare leggibile --- */
  .grafico .tacca { font-size: 19px; }

  /* --- tabelle: ogni riga diventa una scheda, ogni cella si porta dietro
         la propria intestazione. Nessuno scorrimento laterale. --- */
  .scheda .scorrevole > table thead { display: none; }
  .scheda .scorrevole > table,
  .scheda .scorrevole > table tbody,
  .scheda .scorrevole > table tr,
  .scheda .scorrevole > table td { display: block; width: 100%; }

  .scheda .scorrevole > table tr {
    padding: var(--s3) var(--s4);
    border-bottom: 1px solid var(--filo);
  }
  .scheda .scorrevole > table tr:last-child { border-bottom: none; }

  .scheda .scorrevole > table td {
    border: none;
    padding: 3px 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s3);
    text-align: left;
    /* Il valore va a capo sotto la propria etichetta quando non ci sta accanto.
       Senza, una cella con quattro gettoni non si stringe — un flex item non scende
       sotto la sua larghezza naturale — e sborda dal telefono verso destra, tagliato.
       `min-width: 0` sui figli e' la meta' che manca: il wrap da solo non basta se il
       figlio si rifiuta di restringersi. */
    flex-wrap: wrap;
  }
  .scheda .scorrevole > table td > * { min-width: 0; max-width: 100%; }
  /* Su una cella che e' andata a capo l'allineamento a destra non ha piu' senso:
     il valore parte da sinistra, sotto la sua etichetta. */
  .scheda .scorrevole > table td .gettoni,
  .scheda .scorrevole > table td .stato-lettera,
  .scheda .scorrevole > table td .comandi { justify-content: flex-start; }
  /* La tavola di lavoro perde le colonne fisse: qui le righe sono schede. */
  .scheda .scorrevole > table.tavola-lavoro { table-layout: auto; }
  .scheda .scorrevole > table.tavola-lavoro tbody td { padding: 3px 0; }
  .riga-scrivi { max-width: none; width: 100%; }
  .scheda .scorrevole > table td::before {
    content: attr(data-etichetta);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--spento);
    flex: none;
  }
  /* Una cella senza intestazione (la colonna dei bottoni) occupa tutta la riga. */
  .scheda .scorrevole > table td:not([data-etichetta])::before { content: none; }
  .scheda .scorrevole > table td.azioni {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--s2);
    margin-top: var(--s2);
  }
  .scheda .scorrevole > table td.azioni > * + * { margin-left: 0; }
  .scheda .scorrevole > table td.codice { flex-direction: column; align-items: flex-start; gap: 2px; }
  .scheda .scorrevole > table td .minuto { white-space: normal; }

  /* --- testata: il marchio resta, il resto si compatta ---

     `min-width: 0` piu' lo scorrimento sulle sezioni non sono rifiniture: senza,
     la barra e' un flex che NON si stringe sotto la larghezza dei suoi figli —
     marchio, quattro voci, targhetta del piano, utente, Esci — e allarga l'INTERA
     pagina oltre il telefono. Si vedeva come contenuto tagliato a destra ovunque,
     tabelle comprese, e sembrava un difetto delle tabelle mentre stava qui sopra.

     La targhetta del piano resta: e' una scelta scritta in testa.php — chi paga deve
     poterlo verificare da qualunque pagina — e non la si toglie per far quadrare i
     conti dei pixel. A scorrere sono le sezioni, che sono quattro e brevi. */
  .barra .dentro { height: 60px; gap: var(--s3); padding: 0 var(--s4); min-width: 0; }
  .barra nav[aria-label="Sezioni"] {
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .barra nav[aria-label="Sezioni"]::-webkit-scrollbar { display: none; }
  .barra nav[aria-label="Sezioni"] a { white-space: nowrap; }
  /* Su schermo stretto il marchio si rimpicciolisce, ma non torna a essere un'altra
     cosa: niente `gap`, che rimetterebbe uno spazio fra «aff» e «leak», e l'icona resta
     in proporzione al testo invece di scendere sotto i 30 px, dove la goccia sparisce. */
  .marchio { flex: none; font-size: 1.275rem; gap: 0; }
  .marchio svg { width: 30px; height: 30px; margin-right: 7px; }
  .barra nav { gap: 2px; font-size: .875rem; }
  .barra nav a { padding: 6px var(--s2); }
  .barra nav a.bottone { padding: 8px var(--s3); }
  .utente { padding: 3px; border: none; background: none; }
  .utente .mono { display: none; }        /* l'email non serve su un telefono */

  /* --- il numero grande non deve traboccare --- */
  .cassa { padding: var(--s5) var(--s4); }
  .cassa .somma { font-size: 2.25rem; }
  .numero-grande .cifra { font-size: 1.625rem; }

  .composizione { height: 26px; }        /* piu' alta: il dito e' meno preciso del mouse */
  .legenda-grafico { gap: var(--s2); font-size: .78rem; }

  .bottone { padding: 10px var(--s4); }   /* bersaglio da 44 px in verticale */
}

@media (max-width: 400px) {
  .numeri { grid-template-columns: 1fr; }
  .barra nav a { padding: 6px 6px; }
}

/* =========================================== il campo che apre tutto */

/* Da quando i campi sono due (dominio + email) la riga singola non regge: si
   avvolge, con i due campi sopra e il bottone a tutta larghezza sotto. Tre cose
   schiacciate su una riga da 480px non le compila nessuno da telefono. */
.cerca {
  display: flex;
  gap: var(--s2);
  max-width: 520px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.cerca input[type=text],
.cerca input[type=email] {
  font-size: 1.0625rem;
  padding: 12px var(--s4);
  border-radius: var(--r-s);
  box-shadow: var(--ombra-1);
  flex: 1 1 220px;
  min-width: 0;
}
.cerca .bottone {
  padding: 12px var(--s5);
  font-size: 1rem;
  flex: 1 0 100%;
  justify-content: center;
}

@media (max-width: 560px) {
  .cerca { flex-direction: column; }
  .cerca .bottone { width: 100%; }

  /* QUI STA LA TRAPPOLA, e costa mezza pagina su ogni telefono.
     Sopra i campi hanno `flex: 1 1 220px`. Quel 220px e' il flex-basis, e il
     flex-basis vale SULL'ASSE PRINCIPALE: in riga e' la larghezza — che e' quello
     che voleva chi l'ha scritto — ma due righe piu' su il contenitore diventa
     `flex-direction: column`, e da li' in poi quei 220px sono L'ALTEZZA. Le
     caselle non erano «grandi»: erano alte 220px per costruzione, e i quattro
     pixel di imbottitura non c'entravano niente.
     `flex: none` le rimette all'altezza del loro contenuto. La larghezza la da'
     gia' lo stiramento del contenitore.

     Regola generale: un flex-basis in pixel scritto per una riga non sopravvive a
     un cambio di direzione. Se una media query gira l'asse, la deve rivedere. */
  .cerca input[type=text],
  .cerca input[type=email] {
    flex: none;

    /* 16px e' il PAVIMENTO, non una preferenza: sotto quella misura Safari su iOS
       ingrandisce la pagina da solo appena si tocca il campo, e chi sta scrivendo
       si ritrova il sito zoomato senza aver chiesto niente. Chi vuole campi piu'
       bassi tolga imbottitura, non caratteri. */
    font-size: 1rem;
    padding: 10px var(--s3);
  }
}

/* =========================================== cosa ci rifiutiamo di fare */

.rifiuti { display: flex; flex-direction: column; gap: var(--s3); max-width: 760px; margin: 0 auto; }

.rifiuto {
  display: flex;
  gap: var(--s4);
  align-items: flex-start;
  background: var(--carta);
  border: 1px solid var(--filo);
  border-radius: var(--r);
  padding: var(--s5);
  box-shadow: var(--ombra-1);
}
.rifiuto .segno {
  width: 34px; height: 34px;
  border-radius: var(--r-s);
  background: var(--accento-velo);
  color: var(--accento);
  display: grid;
  place-items: center;
  flex: none;
}
.rifiuto .segno svg { width: 17px; height: 17px; }
.rifiuto h4 { margin-bottom: var(--s1); }
.rifiuto p { font-size: .9rem; color: var(--inchiostro-2); margin: 0; }

@media (max-width: 560px) {
  .rifiuto { flex-direction: column; gap: var(--s3); padding: var(--s4); }
}

/* ============================================================================
   L'ATTESA

   L'animazione mostra le fasi vere lette dal server, non una rotella che gira.
   Una rotella che gira senza sapere niente e' una bugia piccola, ma e' una bugia,
   e questo prodotto si vende sul non dirne.
   ============================================================================ */

/* Si chiamava `.attesa`, ed era un nome rubato: `.stato.attesa` e' il pallino
   giallo "in corso" della tabella dei siti, che ereditava questi 56px di padding
   e usciva come un cerchio giallo grande quanto mezza cella, con il testo perso
   in mezzo. Una regola su classe singola non puo' portare un nome che serve
   anche da modificatore altrove. */
.attesa-viva { padding: var(--s7) var(--s5); }

/* Cinque barre che pulsano: suggeriscono pagine che scorrono, non un caricamento
   generico. Si fermano del tutto se il sistema chiede meno animazioni. */
.scansione-viva {
  display: flex;
  gap: 5px;
  justify-content: center;
  align-items: flex-end;
  height: 44px;
  margin-bottom: var(--s5);
}
.scansione-viva span {
  width: 7px;
  border-radius: 3px;
  background: var(--accento);
  animation: leggi 1.1s ease-in-out infinite;
}
.scansione-viva span:nth-child(1) { height: 16px; animation-delay: 0s; }
.scansione-viva span:nth-child(2) { height: 28px; animation-delay: .12s; }
.scansione-viva span:nth-child(3) { height: 40px; animation-delay: .24s; }
.scansione-viva span:nth-child(4) { height: 28px; animation-delay: .36s; }
.scansione-viva span:nth-child(5) { height: 16px; animation-delay: .48s; }

@keyframes leggi {
  0%, 100% { transform: scaleY(.45); opacity: .45; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

.avanzamento {
  height: 6px;
  background: var(--carta-alt);
  border-radius: 3px;
  overflow: hidden;
  max-width: 420px;
  margin: 0 auto var(--s5);
}
.quota-avanzamento {
  height: 100%;
  background: var(--accento);
  border-radius: 3px;
  transition: width .6s cubic-bezier(.4, 0, .2, 1);
}

.passi {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  font-size: .9rem;
  color: var(--spento);
}
.passi li { display: flex; align-items: center; gap: var(--s3); transition: color .3s ease; }
.passi .pallino {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--filo-forte);
  flex: none;
  transition: background .3s ease, box-shadow .3s ease;
}
.passi li.fatto { color: var(--inchiostro-2); }
.passi li.fatto .pallino { background: var(--buono); }
.passi li.ora { color: var(--accento); font-weight: 600; }
.passi li.ora .pallino {
  background: var(--accento);
  box-shadow: 0 0 0 4px var(--accento-velo);
  animation: pulsa 1.4s ease-in-out infinite;
}
@keyframes pulsa {
  0%, 100% { box-shadow: 0 0 0 3px var(--accento-velo); }
  50%      { box-shadow: 0 0 0 7px var(--accento-velo); }
}

/* ============================================================ misuratore */

.misuratore { text-align: center; }
.misuratore svg { width: 100%; max-width: 190px; height: auto; }
.misuratore .pista { fill: none; stroke: var(--carta-alt); stroke-width: 12; stroke-linecap: round; }
.misuratore .quota {
  fill: none;
  stroke-width: 12;
  stroke-linecap: round;
  transition: stroke-dasharray .8s cubic-bezier(.4, 0, .2, 1);
}
.misuratore.accento .quota { stroke: var(--accento); }
.misuratore.buono   .quota { stroke: var(--buono); }
.misuratore.grave   .quota { stroke: var(--grave); }

.cifra-misuratore {
  font-family: var(--sans);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.03em;
  fill: var(--inchiostro);
}
.sotto-misuratore { font-family: var(--sans); font-size: 11px; fill: var(--spento); }
.didascalia-misuratore {
  font-size: .875rem;
  color: var(--inchiostro-2);
  margin: var(--s3) auto 0;
  max-width: 34ch;
  line-height: 1.5;
}

/* ================================================= due schede affiancate */

.doppia {
  display: grid;
  gap: var(--s3);
  grid-template-columns: minmax(240px, 320px) 1fr;
  align-items: start;
}
@media (max-width: 780px) {
  .doppia { grid-template-columns: 1fr; }
}

/* ================================== dove si trovano le credenziali */

.dove-trovarle {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  background: var(--carta-alt);
  border: 1px solid var(--filo);
  border-radius: var(--r-s);
  padding: var(--s4);
  margin-bottom: var(--s4);
}
.dove-trovarle > svg { width: 18px; height: 18px; flex: none; color: var(--spento); margin-top: 2px; }
.dove-trovarle strong { font-size: .8125rem; display: block; margin-bottom: 2px; }
.dove-trovarle p { font-size: .875rem; color: var(--inchiostro-2); margin: 0 0 var(--s3); }
.dove-trovarle .bottone { font-size: .875rem; padding: 7px var(--s3); }

/* ============================================================================
   IL CANTIERE — una scansione mentre sta succedendo

   Sostituisce il banner "questa pagina si aggiorna fra trenta secondi", che era
   la cosa peggiore che si potesse mettere qui: un'attesa cieca lunga minuti,
   con la pagina che si ricaricava sotto le mani di chi stava scrivendo un
   dominio nel campo qui sotto.

   Il principio e' quello della prova pubblica: si mostra cosa sta succedendo
   DAVVERO, letto dal database che il worker aggiorna. Niente rotelle generiche.
   La differenza e' che qui i numeri salgono mentre si guarda — pagine lette,
   link di affiliazione trovati, reperti — perche' un cliente che aspetta tre
   minuti ha diritto di vedere il lavoro, non un rettangolo giallo.
   ============================================================================ */

.cantiere {
  background: var(--carta);
  border: 1px solid var(--accento-orlo);
  border-radius: var(--r-g);
  box-shadow: var(--ombra-2);
  overflow: hidden;
  margin-bottom: var(--s5);
}

/* Il filo che scorre in cima: e' l'unico elemento puramente decorativo di
   questa pagina, e sta li' perche' dice "e' vivo" anche a chi guarda da
   lontano mentre fa altro. */
.cantiere::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--accento-velo) 0%, var(--accento) 50%, var(--accento-velo) 100%);
  background-size: 200% 100%;
  animation: scorre 1.8s linear infinite;
}
@keyframes scorre {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.cantiere .dentro { padding: var(--s5); }

/* La barra della prova pubblica e' centrata e stretta perche' li' sta da sola in
   mezzo a una scheda vuota. Qui attraversa un pannello pieno: stretta al centro
   sembrerebbe un elemento capitato per caso. */
.cantiere .avanzamento { max-width: none; margin: 0 0 var(--s4); }

.cantiere-testa {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s4);
}
.cantiere-testa .dominio {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.cantiere-testa .fase {
  color: var(--accento);
  font-weight: 600;
  font-size: .9375rem;
}
.cantiere-testa .tempo { font-size: .8125rem; color: var(--spento); }

/* La percentuale in cifre, non solo la barra. La barra dice "a che punto" a
   colpo d'occhio; il numero e' quello che si guarda quando si vuole sapere se
   vale la pena aspettare o tornare fra cinque minuti. */
.cantiere-testa .percento {
  margin-left: auto;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--accento);
  font-variant-numeric: tabular-nums;
}

/* La stessa progressione dentro la riga della tabella, per chi guarda l'elenco
   e non il pannello. Sono lo stesso dato: si aggiornano insieme. */
.riga-avanzamento {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: 6px;
}
.avanzamento.sottile {
  height: 4px;
  width: 84px;
  max-width: none;
  margin: 0;
  flex: none;
}
.riga-avanzamento .percento {
  font-size: .75rem;
  font-weight: 650;
  color: var(--accento);
  font-variant-numeric: tabular-nums;
}

/* I quattro passi in riga. Sotto i 640px tornano in colonna: in riga
   diventerebbero quattro parole tagliate. */
.passi.in-riga {
  flex-direction: row;
  max-width: none;
  gap: var(--s5);
  flex-wrap: wrap;
  margin: 0 0 var(--s4);
  font-size: .8125rem;
}
.passi.in-riga li { gap: var(--s2); }

/* I numeri che salgono. Non sono `.numero-grande`: quelli sono un risultato
   fermo, questi cambiano sotto gli occhi e devono pesare meno. */
.conta-vive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
  gap: var(--s2);
  border-top: 1px solid var(--filo);
  padding-top: var(--s4);
}
.conta-viva .etichetta { font-size: .75rem; color: var(--spento); font-weight: 600; }
.conta-viva .cifra {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.conta-viva.critico .cifra { color: var(--grave); }
.conta-viva.sereno  .cifra { color: var(--buono); }

/* Il lampo quando un numero cambia: 320ms, una volta sola. Serve a far
   accorgere del cambiamento chi non stava fissando quel punto. */
.conta-viva .cifra.salita { animation: salita .32s ease-out; }
@keyframes salita {
  0%   { transform: translateY(4px); color: var(--accento); }
  100% { transform: translateY(0); }
}

/* Le reti trovate finora, come compaiono. E' la risposta alla domanda che uno
   si fa mentre aspetta: "ma sta trovando qualcosa?" */
.reti-viste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s4);
}
.gettone {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--accento-orlo);
  background: var(--accento-velo);
  color: var(--accento);
  font-size: .8125rem;
  font-weight: 600;
  animation: entra .3s ease-out;
}
.gettone b { font-variant-numeric: tabular-nums; }
.gettone.cieco {
  border-color: var(--avviso-orlo);
  background: var(--avviso-velo);
  color: var(--avviso);
}
/* Un gettone che pesa: il numero che dice «qui c'e' qualcosa che non va». */
.gettone.grave {
  border-color: var(--grave-orlo);
  background: var(--grave-velo);
  color: var(--grave);
}
/* E uno che non pesa niente: un dato di contorno, non un allarme. */
.gettone.muto {
  border-color: var(--filo);
  background: var(--carta-alt);
  color: var(--inchiostro-2);
  font-weight: 550;
}
/* In tabella l'animazione di entrata da' fastidio: quaranta gettoni che pulsano
   a ogni ricaricamento sono rumore, non informazione. */
td .gettone { animation: none; }

/* Una fila di gettoni dentro una cella, che va a capo invece di allargare la tabella. */
.gettoni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s2);
  align-items: center;
}

/* ═══════════════════════════════════════════ il piano di lavoro dei prospetti

   E' la pagina su cui si passano le ore, quindi vale una regola sua: **la lista e'
   la pagina**. Tutto il resto — i numeri, il modulo per aggiungere siti — sta in
   cima, basso e ripiegato, e si apre solo quando serve.

   I gradienti seguono la regola del foglio: uno solo, sull'accento, e appena
   percettibile. Rosso, verde e ambra restano riservati agli stati: un gradiente
   colorato «per bellezza» qui dentro spegnerebbe proprio i colori che devono
   saltare all'occhio. */

/* Il filo d'accento in cima: l'unico punto in cui il gradiente si vede davvero, ed e'
   spesso tre pixel. Sfuma nel nulla a destra invece di fermarsi netto. */


/* --- i filtri: sono il flusso di lavoro, non un ornamento --- */

.filtri { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }
.filtro {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 6px var(--s3);
  border: 1px solid var(--filo-forte);
  border-radius: 999px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F7F8FB 100%);
  color: var(--inchiostro-2);
  font-size: .8125rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .12s ease, color .12s ease, transform .12s ease;
}
.filtro:hover { border-color: var(--accento-orlo); color: var(--accento); }
.filtro b {
  font-variant-numeric: tabular-nums;
  font-size: .75rem;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--carta-alt);
  color: var(--spento);
}
.filtro.attivo {
  background: linear-gradient(180deg, #5B55DF 0%, #4540CE 100%);
  border-color: transparent;
  color: var(--su-accento);
  box-shadow: var(--ombra-1);
}
.filtro.attivo b { background: rgba(255,255,255,.22); color: #fff; }

/* --- il pannello che si apre solo quando serve --- */

.piegato { margin-bottom: var(--s5); }
.piegato > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  cursor: pointer;
  list-style: none;
  padding: 7px var(--s4);
  border: 1px solid var(--filo-forte);
  border-radius: var(--r-s);
  background: linear-gradient(180deg, #FFFFFF 0%, #F7F8FB 100%);
  font-size: .875rem;
  font-weight: 600;
  color: var(--inchiostro-2);
}
.piegato > summary::-webkit-details-marker { display: none; }
.piegato > summary:hover { border-color: var(--accento-orlo); color: var(--accento); }
.piegato[open] > summary {
  border-color: var(--accento-orlo);
  color: var(--accento);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.piegato[open] > .scheda { border-top-left-radius: 0; margin-top: -1px; }

/* --- la riga: quello che chiede un'azione si vede, il resto sta zitto --- */

tbody tr.da-fare td:first-child { box-shadow: inset 3px 0 0 var(--accento); }
tbody tr.spenta { opacity: .62; }
tbody tr.spenta:hover { opacity: 1; }

/* ── la tabella di lavoro: proporzioni fisse e righe della stessa altezza ──────
   Le colonne senza larghezza dichiarata se la contendono in base al contenuto, e il
   risultato e' che il sito — la colonna che si legge per prima — finisce stretta
   mentre in mezzo resta un vuoto. Qui le proporzioni sono decise, non emerse. */
.tavola-lavoro { table-layout: fixed; }
.tavola-lavoro col.c-sito    { width: 22%; }
.tavola-lavoro col.c-dati    { width: 33%; }
.tavola-lavoro col.c-lettera { width: 26%; }
.tavola-lavoro col.c-azioni  { width: 19%; }

/* In alto, non al centro: con celle di due o tre righe l'allineamento centrale fa
   ballare il nome del sito rispetto ai suoi stessi dati. */
.tavola-lavoro tbody td { vertical-align: top; padding-top: var(--s4); padding-bottom: var(--s4); }
.tavola-lavoro tbody td.azioni { text-align: right; }

/* I gettoni dentro la tavola sono un dato, non un'etichetta da vetrina: piu' piccoli,
   piu' stretti, cosi' tre di fila stanno su una riga sola. */
.tavola-lavoro .gettone { padding: 2px 8px; font-size: .75rem; gap: 5px; }

/* ── le azioni: leggere, e la piu' pericolosa la meno vistosa ──────────────────
   Erano tre bottoni pieni per riga: su sei righe fanno diciotto riquadri grigi che
   pesano piu' dei dati. Qui diventano comandi in punta di penna, e «Togli» resta in
   grigio finche' non ci passi sopra — e' l'unico che cancella qualcosa. */
/* `nowrap`: i tre comandi stanno su una riga sola. Andando a capo alzavano ogni riga
   della tabella di venti pixel per un bottone solo, e la lista perdeva il ritmo. */
.comandi { display: inline-flex; align-items: center; gap: 2px; flex-wrap: nowrap; justify-content: flex-end; }
.comandi > form { display: inline-flex; }
.comando {
  display: inline-flex;
  align-items: center;
  padding: 4px var(--s2);
  border: 1px solid transparent;
  border-radius: var(--r-s);
  background: none;
  color: var(--inchiostro-2);
  font: inherit;
  font-size: .8125rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
/* I tre comandi si distinguono dal BORDO, non dal riempimento: restano leggeri, ma
   l'occhio li separa senza leggerli. Il colore dice cosa fanno —
     verde  apre una cosa e basta, non tocca niente
     grigio copia negli appunti, non tocca niente
     rosso  cancella
   E' l'unico punto del foglio in cui verde e rosso non indicano lo stato di un dato
   ma la natura di un'azione. Vale la deroga perche' la distinzione che fanno e' la
   stessa: «innocuo» contro «irreversibile». */
.comando { border-color: var(--filo); }
.comando:hover { background: var(--carta-alt); color: var(--accento); border-color: var(--filo-forte); }

.comando.apri { border-color: var(--buono-orlo); color: var(--buono); }
.comando.apri:hover { background: var(--buono-velo); border-color: var(--buono); color: var(--buono); }

.comando.pericolo { border-color: var(--grave-orlo); color: var(--spento); font-weight: 550; }
.comando.pericolo:hover { color: var(--grave); background: var(--grave-velo); border-color: var(--grave); }

/* Lo stato della lettera, compatto: una riga di badge, una di dettaglio, e il
   comando «ha risposto» in punta di penna invece che come bottone. */
.stato-lettera { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.stato-lettera .minuto { line-height: 1.35; }

/* Il campo per scrivere a un prospetto: chiuso finche' non serve.
   Quattordici riquadri di testo aperti tutti insieme sono un muro — e su una pagina
   di lavoro il muro e' proprio la cosa che rallenta. */
.scrivi-apri > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  cursor: pointer;
  list-style: none;
  padding: 5px var(--s3);
  border-radius: var(--r-s);
  border: 1px solid transparent;
  background: linear-gradient(180deg, #5B55DF 0%, #4540CE 100%);
  color: var(--su-accento);
  font-size: .8125rem;
  font-weight: 600;
}
.scrivi-apri > summary::-webkit-details-marker { display: none; }
.scrivi-apri > summary:hover { background: linear-gradient(180deg, #6A64E8 0%, #4F49D6 100%); }
.scrivi-apri[open] > summary {
  background: none;
  color: var(--spento);
  border-color: var(--filo-forte);
}
.scrivi-apri .riga-scrivi { margin-top: var(--s2); }

/* Il campo per scrivere a un prospetto, dentro la sua riga.
   `min-width: 0` sull'input e' la riga che serve davvero: senza, un campo in un flex
   si rifiuta di scendere sotto la sua larghezza naturale e allarga tutta la tabella
   finche' sfonda il riquadro. E' il difetto che si vedeva ieri sul portatile. */
.riga-scrivi {
  display: flex;
  /* `row` ESPLICITO, e non e' ridondante: la regola generale `form { flex-direction:
     column }` vale anche qui, e senza questa riga il modulo resta impilato. Peggio:
     in colonna il flex-basis passa dalla larghezza all'ALTEZZA, quindi l'input di
     sotto diventava un riquadro alto 150 px — la «finestra gigante».
     E' lo stesso errore che aveva il campo della home: un flex-basis in pixel non
     sopravvive a un cambio di direzione, e qui la direzione la cambiava una regola
     scritta altrove. */
  flex-direction: row;
  gap: var(--s2);
  align-items: center;
  flex-wrap: nowrap;
  max-width: 340px;
}
.riga-scrivi input[type=email] {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  font-size: .8125rem;
  padding: 6px var(--s3);
}
.riga-scrivi .bottone { flex: none; padding: 6px var(--s3); font-size: .8125rem; }
@keyframes entra {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: scale(1); }
}

/* L'ultimo ritrovamento, in chiaro. Un numero che sale dice che il lavoro
   procede; questa riga dice cosa il lavoro ha trovato, ed e' la parte che
   qualcuno legge davvero. */
.ritrovamento {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  margin-top: var(--s4);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-s);
  background: var(--carta-alt);
  border: 1px solid var(--filo);
  font-size: .875rem;
  line-height: 1.5;
  animation: entra .3s ease-out;
}
.ritrovamento.grave {
  background: var(--grave-velo);
  border-color: var(--grave-orlo);
  color: var(--grave);
}
.ritrovamento > svg { width: 16px; height: 16px; flex: none; margin-top: 3px; }
.ritrovamento .dove {
  font-family: var(--mono);
  font-size: .8125rem;
  word-break: break-all;
  opacity: .85;
}

.cantiere .minuto { margin-top: var(--s4); }

@media (max-width: 640px) {
  .passi.in-riga { flex-direction: column; gap: var(--s2); }
  .cantiere .dentro { padding: var(--s4); }
  .cantiere-testa .tempo { margin-left: 0; width: 100%; }
}

/* ============================================================================
   I REPERTI, CON LA CORREZIONE

   Non una riga di tabella ma una scheda: un problema si legge, si capisce e si
   risolve, e per farlo serve spazio. La riga "Ora / Metti" e' il cuore — vecchio
   e nuovo uno sotto l'altro, cosi' la differenza si vede senza rileggere.
   ============================================================================ */

.reperto {
  border: 1px solid var(--filo);
  border-radius: var(--r-s);
  padding: var(--s4);
  background: var(--carta);
}
.reperto + .reperto { margin-top: 0; }

.testa-reperto {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s2);
}
.spiega-reperto { font-size: .9rem; color: var(--inchiostro-2); margin: 0 0 var(--s3); }

.riga-url {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  margin-bottom: var(--s2);
  flex-wrap: wrap;
}
.etichetta-url {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--spento);
  padding-top: 5px;
  flex: none;
  width: 42px;
}
.etichetta-url.buono { color: var(--buono); }

.riga-url code {
  font-family: var(--mono);
  font-size: .78rem;
  line-height: 1.5;
  padding: 6px var(--s2);
  border-radius: 4px;
  word-break: break-all;
  flex: 1 1 260px;
  min-width: 0;
}
.riga-url code.vecchio {
  background: var(--grave-velo);
  color: var(--grave);
  border: 1px solid var(--grave-orlo);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--grave) 45%, transparent);
}
.riga-url code.nuovo {
  background: var(--buono-velo);
  color: var(--buono);
  border: 1px solid var(--buono-orlo);
}
.riga-url .copia { flex: none; padding: 5px var(--s3); font-size: .8125rem; }

.dove-sta { margin-top: var(--s2); }
.dove-sta summary {
  font-size: .8125rem;
  color: var(--spento);
  cursor: pointer;
  user-select: none;
}
.dove-sta summary:hover { color: var(--accento); }
.dove-sta ul {
  margin: var(--s2) 0 0;
  padding-left: var(--s4);
  font-size: .8125rem;
  line-height: 1.7;
}
.dove-sta a { word-break: break-all; }

/* =================================== la via per chi non usa WordPress */

.altra-via {
  border: 1px solid var(--filo);
  border-radius: var(--r-s);
  background: var(--carta-alt);
  margin-bottom: var(--s4);
}
.altra-via > summary {
  padding: var(--s3) var(--s4);
  cursor: pointer;
  font-size: .9rem;
  font-weight: 600;
  color: var(--inchiostro-2);
  user-select: none;
  list-style: none;
}
.altra-via > summary::-webkit-details-marker { display: none; }
.altra-via > summary::before { content: "+ "; color: var(--accento); font-weight: 700; }
.altra-via[open] > summary::before { content: "− "; }
.altra-via > summary:hover { color: var(--accento); }
.corpo-altra-via {
  padding: 0 var(--s4) var(--s4);
  border-top: 1px solid var(--filo);
  padding-top: var(--s4);
}
.corpo-altra-via p { font-size: .9rem; color: var(--inchiostro-2); }

/* La spunta del consenso sotto il modulo della prova. Volutamente discreta ma
   leggibile: nasconderla sarebbe scorretto, urlarla sarebbe fuori posto in una
   pagina che deve far partire una scansione. */
.spunta-inline {
  display: flex;
  gap: var(--s2);
  align-items: flex-start;
  justify-content: center;
  max-width: 46ch;
  margin: var(--s3) auto 0;
  text-align: left;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--spento);
  cursor: pointer;
}
.spunta-inline input {
  width: auto;
  margin: 2px 0 0;
  flex: 0 0 auto;
  accent-color: var(--accento);
}

/* La targhetta del piano nell'intestazione. Piccola: e' una conferma, non un
   annuncio. Sul gratuito resta neutra e invita, sui piani a pagamento prende
   l'accento perche' li' sta confermando una cosa che il cliente ha pagato. */
.targhetta-piano {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--accento-orlo);
  background: var(--accento-velo);
  color: var(--accento);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
}
.targhetta-piano:hover { background: var(--accento-orlo); }

@media (max-width: 720px) {
  /* Da telefono l'intestazione e' gia' stretta: fra la targhetta e l'indirizzo
     email vince la targhetta, perche' l'email l'utente la sa gia'. */
  .targhetta-piano { font-size: .6875rem; padding: 2px 7px; }
}

/* ==================================== illustrazioni, passi e listino in home */

@media (max-width: 560px) {
}

/* --- i tre passi della home ---
   NON si chiamano .passi: quel nome era gia preso dall elenco delle fasi in
   prova.php e dashboard.php, che ha max-width 300px. Riusarlo metteva la griglia
   dentro una colonna da 300px, cioe le tre schede una sotto l altra, e insieme
   rompeva l animazione di attesa. Un nome di classe e uno spazio condiviso. */
.tre-passi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--s4);
}
.scheda-passo {
  position: relative;
  background: var(--carta);
  border: 1px solid var(--filo);
  border-radius: var(--r-g);
  padding: var(--s5) var(--s4) var(--s4);
  text-align: center;
  box-shadow: var(--ombra-1);
}
.scheda-passo svg { width: 100%; max-width: 118px; height: auto; margin: 0 auto var(--s3); display: block; }
.scheda-passo h4 { margin-bottom: var(--s2); }
.scheda-passo p  { font-size: .875rem; color: var(--inchiostro-2); line-height: 1.6; margin: 0; }

/* Il numero del passo: pastiglia in alto a sinistra, mezza fuori dalla scheda, cosi'
   la sequenza si legge senza doverla cercare. */
.numero-passo {
  position: absolute;
  top: -13px;
  left: var(--s4);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(180deg, #5B55DF 0%, #4540CE 100%);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .8125rem;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(76, 70, 214, .32);
}

/* --- il listino --- */
.listino {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s4);
  align-items: stretch;
}
.carta-piano {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--carta);
  border: 1px solid var(--filo);
  border-radius: var(--r-g);
  padding: var(--s5);
  box-shadow: var(--ombra-1);
}
.carta-piano .bottone { margin-top: auto; justify-content: center; }

/* Quello consigliato: gradiente pieno, e sale di qualche pixel. La differenza deve
   vedersi dalla coda dell'occhio, prima ancora di leggere i prezzi. */
.carta-piano.scelto {
  background: linear-gradient(160deg, #5B55DF 0%, #4540CE 58%, #3A34B4 100%);
  border-color: transparent;
  box-shadow: 0 14px 34px -12px rgba(76, 70, 214, .5), var(--ombra-1);
  transform: translateY(-6px);
}
.carta-piano.scelto .nome-piano,
.carta-piano.scelto .prezzo-piano { color: #fff; }
.carta-piano.scelto .periodo-piano,
.carta-piano.scelto .sommario-piano { color: rgba(255, 255, 255, .82); }
/* Sul fondo indaco il bottone pieno sparirebbe: si inverte, bianco con testo indaco. */
.carta-piano.scelto .bottone {
  background: #fff;
  color: var(--accento);
  border-color: #fff;
}
.carta-piano.scelto .bottone:hover { background: #F2F1FE; color: var(--accento-cupo); }

.nastro {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  color: var(--accento);
  border: 1px solid var(--accento-orlo);
  border-radius: 999px;
  padding: 2px 12px;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nome-piano {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--spento);
  margin-bottom: var(--s2);
}
.prezzo-piano {
  font-size: 2.125rem;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--inchiostro);
}
.periodo-piano { font-size: .8125rem; font-weight: 400; color: var(--spento); }
.sommario-piano {
  font-size: .875rem;
  color: var(--inchiostro-2);
  line-height: 1.6;
  margin: var(--s3) 0 var(--s5);
}

@media (max-width: 720px) {
  /* Da telefono le carte si impilano: sollevare quella scelta creerebbe solo un buco
     nella colonna, e il gradiente basta gia' a distinguerla. */
  .carta-piano.scelto { transform: none; }
}

/* Il collegamento con la freccina in coda. */
.con-freccia { font-weight: 600; }
.con-freccia svg { margin-left: 4px; transition: transform .14s ease; }
.con-freccia:hover svg { transform: translateX(3px); }

/* ═══════════════════════════════════════════════════════════════════════ il blog

   Un blog che vive sullo stesso dominio del prodotto ha un vincolo che un blog
   qualunque non ha: **deve sembrare la stessa azienda**. Stessa scala di spazio,
   stesso accento, stessi riquadri. L'unica cosa che cambia e' la larghezza del testo,
   perche' un articolo si legge e un cruscotto si consulta.
   ============================================================================ */

.testa-blog { max-width: 640px; margin: 0 0 var(--s6); }
.testa-blog h1 { font-size: clamp(1.75rem, 3.4vw, 2.375rem); letter-spacing: -.03em; line-height: 1.14; }
.testa-blog .sommario { margin-top: var(--s3); }

.griglia-articoli {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: var(--s5);
}

.scheda-articolo {
  display: flex;
  flex-direction: column;
  background: var(--carta);
  border: 1px solid var(--filo);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.scheda-articolo:hover {
  border-color: var(--accento-orlo);
  box-shadow: var(--ombra-2);
  transform: translateY(-2px);
}
.scheda-articolo .copertina { display: block; aspect-ratio: 16 / 9; background: var(--carta-alt); }
.scheda-articolo .copertina img { width: 100%; height: 100%; object-fit: cover; display: block; }
.corpo-articolo { padding: var(--s4) var(--s5) var(--s5); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.corpo-articolo h2, .corpo-articolo h3 { font-size: 1.125rem; line-height: 1.3; letter-spacing: -.015em; }
.corpo-articolo h2 a, .corpo-articolo h3 a { color: var(--inchiostro); text-decoration: none; }
.corpo-articolo h2 a:hover, .corpo-articolo h3 a:hover { color: var(--accento); }
.corpo-articolo .briciola { display: flex; align-items: center; gap: var(--s2); margin: 0; flex-wrap: wrap; }
.sommario-articolo { color: var(--inchiostro-2); font-size: .9375rem; line-height: 1.55; margin: 0; flex: 1; }

/* Il primo della lista occupa due colonne: da qualche parte l'occhio deve cominciare. */
.scheda-articolo.in-evidenza { grid-column: span 2; }
.scheda-articolo.in-evidenza .copertina { aspect-ratio: 21 / 9; }
.scheda-articolo.in-evidenza h2 { font-size: 1.5rem; }
@media (max-width: 720px) { .scheda-articolo.in-evidenza { grid-column: span 1; } }

/* ── l'articolo ───────────────────────────────────────────────────────────────
   66 caratteri di riga. Non e' un numero elegante: e' quello oltre il quale l'occhio
   perde il capo della riga successiva e rilegge la stessa due volte. */

.articolo { max-width: 720px; }
.testa-articolo { margin-bottom: var(--s6); }
.testa-articolo h1 {
  font-size: clamp(1.875rem, 4vw, 2.5rem);
  letter-spacing: -.032em;
  line-height: 1.12;
  margin-bottom: var(--s3);
}
.testa-articolo .sommario { font-size: 1.125rem; color: var(--inchiostro-2); line-height: 1.55; }
/* La firma in cima all'articolo: ritratto piccolo, nome, ruolo, poi data e lettura.
   Volutamente breve — il riquadro lungo sta in fondo, e due presentazioni nella stessa
   pagina si annullano. Il ritratto e' 40px: si vede che c'e' una persona, non ruba la
   scena al titolo. */
.testa-articolo .firma {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--filo);
}
.firma-faccia {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  border: 2px solid var(--carta);
  box-shadow: 0 0 0 1px var(--filo);
}
.firma-testo { min-width: 0; }
.firma-nome {
  margin: 0;
  font-size: .875rem;
  color: var(--spento);
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
}
.firma-nome strong { color: var(--inchiostro); font-weight: 700; }
.firma-ruolo {
  font-size: .6875rem;
  font-weight: 700;
  color: var(--accento);
  background: var(--accento-velo);
  border: 1px solid var(--accento-orlo);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}
.firma-meta { margin: 2px 0 0; font-size: .8125rem; color: var(--spento); }
.copertina-articolo { margin: 0 0 var(--s6); }
.copertina-articolo img { width: 100%; border-radius: var(--r); display: block; }

.testo-articolo { font-size: 1.0625rem; line-height: 1.72; color: var(--inchiostro); }
.testo-articolo > * + * { margin-top: var(--s4); }
.testo-articolo h2 {
  font-size: 1.4375rem;
  letter-spacing: -.02em;
  line-height: 1.28;
  margin-top: var(--s7);
  padding-top: var(--s2);
}
.testo-articolo h3 { font-size: 1.125rem; margin-top: var(--s6); }
.testo-articolo h4 { font-size: 1rem; margin-top: var(--s5); }
.testo-articolo p { margin-bottom: 0; }
/*
 * I link dentro un articolo vanno in GRASSETTO, tutti: quelli che portano fuori e
 * quelli che portano su un'altra pagina nostra. Deciso il 16/08/2026.
 *
 * Sta qui e non nel Markdown di proposito. Scriverlo come `[**testo**](url)` articolo
 * per articolo vuol dire ricordarselo ogni volta, e la volta che lo dimentichi il link
 * e' esattamente quello che volevi far notare. Una regola sola, e vale anche per quelli
 * che scriveremo fra un anno.
 *
 * 650 non e' un numero a caso: e' lo stesso peso di `strong` in questo foglio, quindi
 * un link e una parola in grassetto pesano uguale invece di litigare nella stessa riga.
 */
.testo-articolo a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  font-weight: 650;
}
.testo-articolo ul, .testo-articolo ol { padding-left: var(--s5); }
.testo-articolo li + li { margin-top: var(--s2); }
.testo-articolo blockquote {
  border-left: 3px solid var(--accento-orlo);
  background: var(--accento-velo);
  padding: var(--s4) var(--s5);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  color: var(--inchiostro-2);
}
.testo-articolo blockquote p + p { margin-top: var(--s3); }
.testo-articolo code {
  font-family: var(--mono);
  font-size: .875em;
  background: var(--carta-alt);
  border: 1px solid var(--filo);
  padding: 1px 5px;
  border-radius: 4px;
}
.testo-articolo pre.codice {
  background: var(--carta-alt);
  border: 1px solid var(--filo);
  border-radius: var(--r-s);
  padding: var(--s4);
  overflow-x: auto;
  font-size: .875rem;
  line-height: 1.6;
}
.testo-articolo pre.codice code { background: none; border: none; padding: 0; }
.testo-articolo figure { margin: var(--s6) 0; }
.testo-articolo figure img { width: 100%; border-radius: var(--r); display: block; }
.testo-articolo figcaption {
  font-size: .8125rem;
  color: var(--spento);
  margin-top: var(--s2);
  text-align: center;
}
.testo-articolo hr { border: none; border-top: 1px solid var(--filo); margin: var(--s7) 0; }
.tabella-articolo { overflow-x: auto; border: 1px solid var(--filo); border-radius: var(--r); }
.tabella-articolo table { font-size: .9375rem; }

/* ── il richiamo alla prova, in fondo e mai in mezzo ─────────────────────────── */

.richiamo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
  margin-top: var(--s7);
  padding: var(--s5) var(--s6);
  border: 1px solid var(--accento-orlo);
  border-radius: var(--r);
  background: linear-gradient(135deg, #F4F3FE 0%, #FCFCFE 60%, #FFFFFF 100%);
}
.richiamo h2 { font-size: 1.1875rem; margin-bottom: var(--s2); letter-spacing: -.015em; }
.richiamo p { margin: 0; max-width: 52ch; }
.richiamo .bottone { flex: none; }

/* ── lo scrittoio: dove si scrive ──────────────────────────────────────────────
   Due colonne: il testo largo a sinistra, i contorni a destra. I contorni sono
   quelli che si compilano una volta e non si guardano piu'; il testo e' quello che
   si guarda per un'ora. */

.scrittoio-testa {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-bottom: var(--s5);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--filo);
}
.scrittoio-testa h1 { font-size: 1.5rem; letter-spacing: -.02em; }
.scrittoio-colonne { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s5); align-items: start; }
.scrittoio-testo { display: flex; flex-direction: column; gap: var(--s4); }
.scrittoio-lato { display: flex; flex-direction: column; gap: var(--s4); position: sticky; top: 84px; }
.scrittoio-lato .corpo { display: flex; flex-direction: column; gap: var(--s4); }
@media (max-width: 900px) {
  .scrittoio-colonne { grid-template-columns: minmax(0, 1fr); }
  .scrittoio-lato { position: static; }
}

/* Il campo del testo e' il posto in cui si sta un'ora: carattere piu' grande di
   quello di un modulo, interlinea da lettura, e nessuna larghezza sprecata. */
#corpo {
  font-family: var(--mono);
  font-size: .9375rem;
  line-height: 1.7;
  min-height: 62vh;
  resize: vertical;
}

select {
  font: inherit;
  font-size: .9375rem;
  padding: 9px var(--s3);
  border: 1px solid var(--filo-forte);
  border-radius: var(--r-s);
  background: var(--carta);
  color: var(--inchiostro);
  width: 100%;
}
input[type=file] { font-size: .8125rem; }
.anteprima-copertina {
  width: 100%;
  border-radius: var(--r-s);
  border: 1px solid var(--filo);
  display: block;
  margin-bottom: var(--s3);
}

/* Dentro un articolo un h3 e' un sottotitolo, non un'etichetta. Lo stile base di `h3`
   in questo foglio e' maiuscoletto grigio — giusto sopra un riquadro di cruscotto,
   sbagliato in mezzo a un testo che si legge. */
.testo-articolo h3,
.corpo-articolo h3 {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -.012em;
  text-transform: none;
  color: var(--inchiostro);
  line-height: 1.35;
}

/* ═══════════════════════════════════ i colori delle categorie, e perche' esistono

   Il foglio dice: «l'accento e' UNO, rosso verde e ambra dicono lo stato, non si usano
   per altro». Questa e' l'unica aggiunta, ed e' dentro quella regola invece che contro:

   una categoria NON e' decorazione, e' un dato — la stessa cosa che fa un'etichetta di
   stato, solo su un altro asse. Cinque tinte che si distinguono a colpo d'occhio
   valgono piu' di cinque scritte identiche, perche' scorrendo una lista l'occhio
   riconosce il colore prima di leggere la parola.

   Nessuna delle cinque e' rossa, verde o ambra: quei tre restano riservati, e un
   articolo colorato di verde vorrebbe dire «tutto a posto» a chi ha imparato il resto
   del prodotto.
   ============================================================================ */

:root {
  --cat-guide:      #4C46D6;  --cat-guide-velo:      #EEEDFC;
  --cat-reti:       #0E7490;  --cat-reti-velo:       #E8F6FA;
  --cat-strumenti:  #7E22CE;  --cat-strumenti-velo:  #F6EDFE;
  --cat-prove:      #BE185D;  --cat-prove-velo:      #FDECF3;
  --cat-numeri:     #1D4ED8;  --cat-numeri-velo:     #E9F0FE;
}

.cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .01em;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.cat::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cat-guide     { color: var(--cat-guide);     background: var(--cat-guide-velo); }
.cat-reti      { color: var(--cat-reti);      background: var(--cat-reti-velo); }
.cat-strumenti { color: var(--cat-strumenti); background: var(--cat-strumenti-velo); }
.cat-prove     { color: var(--cat-prove);     background: var(--cat-prove-velo); }
.cat-numeri    { color: var(--cat-numeri);    background: var(--cat-numeri-velo); }

/* La scheda prende il colore della sua categoria sul filo in alto: si vede scorrendo,
   non si legge. Resta grigio finche' non ci si passa sopra, cosi' la griglia da lontano
   e' ordinata e da vicino e' parlante. */
.scheda-articolo { position: relative; }
.scheda-articolo::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--filo);
  transition: background .16s ease;
  z-index: 1;
}
.scheda-articolo:hover::before { background: var(--tinta, var(--accento)); }
.scheda-articolo.c-guide     { --tinta: var(--cat-guide); }
.scheda-articolo.c-reti      { --tinta: var(--cat-reti); }
.scheda-articolo.c-strumenti { --tinta: var(--cat-strumenti); }
.scheda-articolo.c-prove     { --tinta: var(--cat-prove); }
.scheda-articolo.c-numeri    { --tinta: var(--cat-numeri); }
.scheda-articolo:hover h2 a, .scheda-articolo:hover h3 a { color: var(--tinta, var(--accento)); }

/* ── la testata del blog: l'unico posto del sito dove il colore fa spettacolo ──
   Tre aloni sfumati invece di un gradiente lineare: un gradiente da angolo ad angolo
   si riconosce come «gradiente» e invecchia; tre macchie morbide si leggono come luce
   e restano credibili. */
.testa-blog {
  position: relative;
  max-width: none;
  /* Da bordo a bordo: la testata esce dalla colonna del contenuto e occupa tutta la
     larghezza della finestra. E il trucco che distingue una pagina disegnata da una
     pagina impaginata — il colore deve toccare i bordi, altrimenti sembra un riquadro
     appoggiato sopra il testo invece che la testata della pagina. */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: calc(var(--s5) * -1);
  margin-bottom: var(--s6);
  padding: var(--s8) max(var(--s5), calc(50vw - 560px)) var(--s7);
  border-radius: 0;
  overflow: hidden;
  background:
    radial-gradient(60% 90% at 8% 0%,   rgba(76, 70, 214, .16) 0%, rgba(76, 70, 214, 0) 68%),
    radial-gradient(48% 80% at 88% 12%, rgba(126, 34, 206, .13) 0%, rgba(126, 34, 206, 0) 70%),
    radial-gradient(70% 70% at 55% 110%, rgba(14, 116, 144, .12) 0%, rgba(14, 116, 144, 0) 72%),
    linear-gradient(180deg, #FFFFFF 0%, #FBFBFD 100%);
  border-bottom: 1px solid var(--filo);
}
.testa-blog > * { position: relative; max-width: 660px; }
.testa-blog h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  letter-spacing: -.04em;
  line-height: 1.06;
  margin-bottom: var(--s3);
}
/* Una parola sola in accento: dice di cosa parla il blog senza aggiungere una riga. */
.testa-blog h1 em { font-style: normal; color: var(--accento); }
.testa-blog .sommario { font-size: 1.125rem; max-width: 56ch; }

/* ── il richiamo: una fascia scura, che da' ritmo alla pagina ──────────────────
   Tutto il sito e' chiaro. Un blocco scuro in fondo all'articolo non e' un vezzo: e'
   il punto in cui la lettura finisce e comincia un'altra cosa, e l'occhio ha bisogno
   di sapere che e' cambiato il registro. */
.richiamo {
  background: linear-gradient(135deg, #211E4E 0%, #2E2A6B 45%, #3E38C0 100%);
  border: none;
  color: #EDECFA;
  padding: var(--s6);
  position: relative;
  overflow: hidden;
}
.richiamo::after {
  content: '';
  position: absolute;
  right: -60px; top: -80px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 70%);
}
.richiamo h2 { color: #FFFFFF; font-size: 1.375rem; }
.richiamo p, .richiamo .minuto { color: rgba(237, 236, 250, .82); }
.richiamo .bottone {
  background: #FFFFFF;
  color: var(--accento-cupo);
  border-color: transparent;
  box-shadow: 0 6px 18px -6px rgba(0,0,0,.45);
}
.richiamo .bottone:hover { background: #F3F2FE; color: var(--accento-cupo); }

/* ── la barra degli strumenti dell'editor ────────────────────────────────────── */

/*
 * NIENTE `overflow: hidden` QUI, ed e' la riga che fa funzionare tutto il resto.
 * Serviva solo a smussare gli angoli della barra, ma un antenato con overflow
 * diverso da `visible` diventa il contenitore di scorrimento dei suoi figli: la
 * barra `position: sticky` dentro si sarebbe incollata a un riquadro che non
 * scorre, cioe' non si sarebbe mossa mai. Gli angoli li smussa la barra da sola.
 */
.campo-testo {
  border: 1px solid var(--filo-forte);
  border-radius: var(--r-s);
  background: var(--carta);
}
.campo-testo:focus-within { border-color: var(--accento); box-shadow: 0 0 0 3px var(--accento-velo); }
.barra-strumenti {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  padding: 6px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F6FA 100%);
  border-bottom: 1px solid var(--filo);
  border-radius: var(--r-s) var(--r-s) 0 0;
  /*
   * `--testa-h` la misura il JavaScript sulla testata vera invece di scriverla a
   * mano: la testata e' sticky anche lei, e un numero indovinato lascia una
   * fessura da cui si vede il testo scorrere sopra la barra.
   */
  position: sticky;
  top: var(--testa-h, 60px);
  z-index: 6;
}
/* Quando e' staccata dal suo posto si stacca anche visivamente, se no sembra un
   pezzo di testo che galleggia. La classe la mette un IntersectionObserver. */
.barra-strumenti.staccata { box-shadow: 0 4px 12px rgba(16, 18, 29, .10); }
.barra-strumenti .spinta { flex: 1; }
.barra-strumenti .separatore { width: 1px; height: 18px; background: var(--filo); margin: 0 4px; }
.ferro {
  font: inherit;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--inchiostro-2);
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 5px 9px;
  cursor: pointer;
  line-height: 1.2;
  transition: background .1s ease, color .1s ease, border-color .1s ease;
}
.ferro:hover { background: var(--accento-velo); color: var(--accento); border-color: var(--accento-orlo); }
.ferro b { font-weight: 800; }
.ferro code { font-size: .75rem; background: none; border: none; padding: 0; }
.ferro.attivo { background: var(--accento); color: var(--su-accento); border-color: transparent; }
/* Gli angoli in fondo li smussa chi sta in fondo, adesso che il contenitore non
   ritaglia piu' niente (vedi il commento su `.campo-testo`). */
.campo-testo textarea {
  border: none;
  border-radius: 0 0 var(--r-s) var(--r-s);
  background: none;
}
.campo-testo textarea:focus { box-shadow: none; }
.anteprima-riquadro {
  padding: var(--s5) var(--s5) var(--s6);
  min-height: 62vh;
  background: var(--carta);
  border-radius: 0 0 var(--r-s) var(--r-s);
}
/*
 * L'anteprima si scrive. Non e' piu' una vetrina: e' l'altro modo di stare sullo
 * stesso testo — il Markdown resta la copia salvata, questa e' la faccia.
 */
.anteprima-riquadro[contenteditable="true"] { outline: none; caret-color: var(--accento); cursor: text; }
.anteprima-riquadro[contenteditable="true"]:empty::before {
  content: "Scrivi qui: quello che vedi è come verrà.";
  color: var(--spento);
}
.anteprima-riquadro[contenteditable="true"] :is(h2, h3, h4):hover { background: var(--accento-velo); border-radius: var(--r-s); }
.anteprima-riquadro[contenteditable="true"] table { cursor: cell; }

/* Il cartello del modo: dice sempre su quale delle due facce stai scrivendo. */
.modo-scrittura {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 5px var(--s4);
  font-size: .75rem;
  color: var(--inchiostro-2);
  background: var(--carta-alt);
  border-bottom: 1px solid var(--filo);
}
.modo-scrittura b { font-weight: 650; }
.modo-scrittura.avviso-modo { color: var(--avviso); background: var(--avviso-velo); }

/* ═══════════════════════════════════════ la testata, uguale su tutto il prodotto

   Una sola per tutte le pagine: pubbliche, del cliente, riservate. Prima ce n'erano
   tre — `testa-pagina` scarna, `piano-testa` con i numeri, `testa-blog` con il
   colore — e tre testate diverse fanno sembrare tre siti diversi, che e' esattamente
   l'impressione che un prodotto a pagamento non si puo' permettere.

   Va da bordo a bordo. Non e' vezzo: il colore che tocca i bordi si legge come «la
   testata della pagina», il colore dentro una colonna si legge come «un riquadro
   appoggiato sopra» — e la seconda cosa sembra un componente, non un disegno.
   ============================================================================ */

.testata {
  position: relative;
  overflow: hidden;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: calc(var(--s5) * -1);
  margin-bottom: var(--s6);
  padding: var(--s7) max(var(--s5), calc(50vw - 560px)) var(--s6);
  border-bottom: 1px solid var(--filo);
  background:
    radial-gradient(58% 90% at 6% 0%,   rgba(76, 70, 214, .15) 0%, rgba(76, 70, 214, 0) 68%),
    radial-gradient(46% 78% at 90% 8%,  rgba(126, 34, 206, .11) 0%, rgba(126, 34, 206, 0) 70%),
    radial-gradient(66% 70% at 52% 108%, rgba(14, 116, 144, .10) 0%, rgba(14, 116, 144, 0) 72%),
    linear-gradient(180deg, #FFFFFF 0%, #FBFBFD 100%);
}
/* Il contenuto della testata resta dentro la colonna del resto della pagina. */
.testata > .dentro-testata {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
}
.testata h1 {
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  letter-spacing: -.035em;
  line-height: 1.1;
  margin-bottom: var(--s2);
}
.testata h1 em { font-style: normal; color: var(--accento); }
.testata .guida { margin: 0; max-width: 62ch; font-size: 1rem; }
.testata .briciola { margin-bottom: var(--s2); }

/* La riga di numeri sotto il titolo: la stessa forma ovunque, dal quadro al blog. */
.testata-numeri {
  position: relative;
  max-width: 1120px;
  margin: var(--s5) auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4) var(--s6);
}
.testata-numero .titolo {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--spento);
  margin-bottom: 3px;
}
.testata-numero .cifra {
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.testata-numero .coda { font-size: .75rem; color: var(--spento); margin-top: 3px; }

@media (max-width: 640px) {
  .testata { padding-top: var(--s6); padding-bottom: var(--s5); }
  .testata-numeri { gap: var(--s4); }
  .testata-numero { min-width: 42%; }
}


/* La testata di PAGINA e' una sola per pagina, ed e' quella in cima: da adesso e' la
   fascia a tutta larghezza. Le intestazioni che stanno in mezzo alla pagina — sopra un
   elenco, sopra una sezione — usano `testa-sezione`, che resta quello che era. */
.testa-pagina {
  position: relative;
  overflow: hidden;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: calc(var(--s5) * -1);
  margin-bottom: var(--s6);
  padding: var(--s7) max(var(--s5), calc(50vw - 560px)) var(--s6);
  border-bottom: 1px solid var(--filo);
  background:
    radial-gradient(58% 90% at 6% 0%,   rgba(76, 70, 214, .15) 0%, rgba(76, 70, 214, 0) 68%),
    radial-gradient(46% 78% at 90% 8%,  rgba(126, 34, 206, .11) 0%, rgba(126, 34, 206, 0) 70%),
    radial-gradient(66% 70% at 52% 108%, rgba(14, 116, 144, .10) 0%, rgba(14, 116, 144, 0) 72%),
    linear-gradient(180deg, #FFFFFF 0%, #FBFBFD 100%);
}
.testa-pagina h1 {
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  letter-spacing: -.035em;
  line-height: 1.1;
  margin-bottom: var(--s2);
}
.testa-pagina h1 em { font-style: normal; color: var(--accento); }
.testa-pagina .guida { margin: 0; max-width: 62ch; font-size: 1rem; }
.testa-pagina > * { position: relative; }

.testa-sezione {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
  margin-bottom: var(--s5);
}

@media (max-width: 640px) {
  .testa-pagina { padding-top: var(--s6); padding-bottom: var(--s5); }
}

/* ═══════════════════════════════════════════════ il quadro: due figure affiancate */

.griglia-quadro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s5);
  align-items: start;
}
@media (max-width: 900px) { .griglia-quadro { grid-template-columns: 1fr; } }

.griglia-quadro .scheda > .testa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
}

/* ── l'imbuto ─────────────────────────────────────────────────────────────────
   Barre che si accorciano, con accanto quanta parte del passo precedente e'
   arrivata fin li'. Niente trapezi disegnati in SVG: un trapezio inclina i lati e
   l'occhio confronta le AREE, che e' la cosa che l'occhio fa peggio. Con le barre
   confronta le lunghezze, che e' quella che fa meglio. */

.imbuto { display: flex; flex-direction: column; gap: var(--s4); }
.gradino-testa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: 5px;
}
.gradino-testa .nome { font-size: .875rem; font-weight: 600; color: var(--inchiostro-2); }
.gradino-testa .cifra {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.gradino-barra {
  height: 12px;
  border-radius: 999px;
  background: var(--carta-alt);
  overflow: hidden;
}
.gradino-barra > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #4C46D6 0%, #7B76EA 100%);
  transition: width .5s cubic-bezier(.4, 0, .2, 1);
}
/* Ogni gradino piu' in basso e' piu' scuro: la scala di colore dice «piu' avanti nel
   percorso» senza bisogno di leggere l'etichetta. */
.gradino:nth-child(2) .gradino-barra > span { background: linear-gradient(90deg, #4038C4 0%, #6C66E2 100%); }
.gradino:nth-child(3) .gradino-barra > span { background: linear-gradient(90deg, #322B9E 0%, #5A54D2 100%); }
.gradino:nth-child(4) .gradino-barra > span { background: linear-gradient(90deg, #067647 0%, #17A05F 100%); }

.gradino-piede {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin-top: 5px;
}
.resa {
  font-size: .75rem;
  font-weight: 700;
  color: var(--accento);
  background: var(--accento-velo);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}
.resa.ferma { color: var(--grave); background: var(--grave-velo); }

/* ═══════════════════════════ i numeri della testata, chiusi in riquadri e centrati

   Sulla fascia colorata i numeri «nudi» si appoggiano al gradiente e perdono peso:
   il colore dietro compete con la cifra invece di sostenerla. Chiusi in un riquadro
   bianco, invece, il gradiente diventa lo sfondo su cui il riquadro galleggia — e la
   cifra torna a essere la cosa piu' scura della pagina, che e' come deve essere.

   Il riquadro e' bianco pieno e non semitrasparente: il vetro smerigliato e' bello
   in uno screenshot e illeggibile su un portatile con la luminosita' bassa. Il
   contrasto qui vale piu' dell'effetto. */

.testata.centrata .dentro-testata { justify-content: center; text-align: center; }
.testata.centrata .dentro-testata .guida { margin-left: auto; margin-right: auto; }

.testata-numeri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: var(--s3);
  justify-content: center;
}
.testata-numero {
  background: var(--carta);
  border: 1px solid var(--filo);
  border-radius: 14px;
  padding: var(--s4) var(--s3);
  text-align: center;
  box-shadow: 0 1px 2px rgba(16,18,29,.04), 0 8px 24px -14px rgba(16,18,29,.18);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.testata-numero:hover {
  transform: translateY(-2px);
  border-color: var(--accento-orlo);
  box-shadow: 0 1px 2px rgba(16,18,29,.04), 0 14px 30px -14px rgba(76,70,214,.35);
}
.testata-numero .titolo {
  font-size: .625rem;
  letter-spacing: .07em;
  margin-bottom: var(--s2);
  /* Due righe al massimo, e non si accorcia il testo: un'etichetta troncata con i
     puntini fa indovinare, e su un cruscotto indovinare e' peggio che leggere lungo. */
  min-height: 2.1em;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  line-height: 1.05;
}
.testata-numero .cifra { font-size: 2rem; letter-spacing: -.03em; }
.testata-numero .coda { margin-top: var(--s2); line-height: 1.35; min-height: 2.3em; }

@media (max-width: 640px) {
  .testata-numeri { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: var(--s2); }
  .testata-numero { padding: var(--s3) var(--s2); }
  .testata-numero .cifra { font-size: 1.625rem; }
}

/* ═══════════════════════════════════════════════════ l'apertura della pagina iniziale

   E' l'unica pagina che vede chi non ci conosce, e finora era l'ultima rimasta con il
   linguaggio vecchio: fondo piatto, titolo della stessa misura di quello di una pagina
   interna, il modulo appoggiato sul bianco.

   Adesso ha la stessa luce delle testate — gli stessi tre aloni — ma piu' ampia,
   perche' qui non introduce una pagina: e' la pagina. */

.apertura {
  position: relative;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: calc(var(--s5) * -1);
  padding: var(--s8) max(var(--s5), calc(50vw - 560px)) var(--s8);
  border-bottom: 1px solid var(--filo);
  background:
    radial-gradient(52% 92% at 4% -6%,  rgba(76, 70, 214, .18) 0%, rgba(76, 70, 214, 0) 66%),
    radial-gradient(44% 74% at 94% 6%,  rgba(126, 34, 206, .13) 0%, rgba(126, 34, 206, 0) 70%),
    radial-gradient(72% 66% at 46% 116%, rgba(14, 116, 144, .12) 0%, rgba(14, 116, 144, 0) 74%),
    linear-gradient(180deg, #FFFFFF 0%, #FBFBFD 100%);
}
.apertura > * { position: relative; }
.apertura h1 { font-size: clamp(1.875rem, 4.4vw, 3rem); letter-spacing: -.038em; }
/* Una parola in accento dentro il titolo: dice di cosa si parla prima che si legga. */
.apertura h1 em { font-style: normal; color: var(--accento); }

/* Il modulo galleggia su un riquadro bianco invece di stare appoggiato sul colore:
   e' la cosa da fare, e va staccata dallo sfondo o si perde. */
.apertura .cerca {
  background: var(--carta);
  border: 1px solid var(--filo);
  border-radius: 16px;
  padding: var(--s4);
  box-shadow: 0 1px 2px rgba(16,18,29,.04), 0 18px 40px -22px rgba(16,18,29,.35);
}

/* Le tre prove sotto il modulo: piccole, non gridate. Dicono che la macchina ha
   gia' lavorato, che e' l'unica prova sociale che possiamo dare senza inventarci
   loghi di clienti che non abbiamo. */
.prove-vive {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--filo);
}
.prova-viva { display: flex; flex-direction: column; gap: 2px; }
.prova-viva .cifra {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.prova-viva .voce { font-size: .75rem; color: var(--spento); font-weight: 600; }

@media (max-width: 900px) {
  .apertura { padding-top: var(--s6); padding-bottom: var(--s6); }
}

/* ═══════════════════════════════════════════ l'articolo con la colonna a lato

   Il testo resta a 720px — sono i 66 caratteri per riga oltre i quali l'occhio perde
   il capo della riga dopo. La colonna NON toglie spazio al testo: la pagina si
   allarga, e sotto i 1080px la colonna sparisce invece di stringere la lettura.
   ============================================================================ */

.articolo { max-width: 1060px; }
.articolo-corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 268px;
  gap: var(--s7);
  align-items: start;
}
.articolo-corpo > .testo-articolo { min-width: 0; max-width: 720px; }

.lato-articolo {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}
.riquadro-lato {
  background: var(--carta);
  border: 1px solid var(--filo);
  border-radius: var(--r);
  padding: var(--s4) var(--s4) var(--s5);
}
.riquadro-lato h2 {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--spento);
  margin-bottom: var(--s3);
}

/* ── l'indice: la voce corrente si accende mentre si scorre ─────────────────── */

.indice ol { list-style: none; margin: 0; padding: 0; counter-reset: voce; }
.indice li { counter-increment: voce; }
.indice a {
  display: flex;
  gap: var(--s2);
  padding: 6px 0 6px var(--s3);
  border-left: 2px solid var(--filo);
  color: var(--inchiostro-2);
  text-decoration: none;
  font-size: .875rem;
  line-height: 1.4;
  transition: color .12s ease, border-color .12s ease;
}
.indice a::before {
  content: counter(voce);
  color: var(--spento);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: .75rem;
  flex: none;
  padding-top: 1px;
}
.indice a:hover { color: var(--accento); border-color: var(--accento-orlo); }
.indice a.qui {
  color: var(--accento);
  border-color: var(--accento);
  font-weight: 650;
}
.indice a.qui::before { color: var(--accento); }

/* ── il richiamo nella colonna: e' l'unico riquadro che deve staccare ────────── */

.richiamo-lato {
  background: linear-gradient(150deg, #F4F3FE 0%, #FFFFFF 70%);
  border-color: var(--accento-orlo);
}
.richiamo-lato h2 { color: var(--accento); }
.richiamo-lato p { font-size: .875rem; color: var(--inchiostro-2); line-height: 1.5; margin-bottom: var(--s3); }
.richiamo-lato .bottone { width: 100%; justify-content: center; }
.richiamo-lato .minuto { margin: var(--s2) 0 0; text-align: center; }

.elenco-lato { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.elenco-lato a { font-size: .875rem; font-weight: 600; line-height: 1.35; text-decoration: none; color: var(--inchiostro); }
.elenco-lato a:hover { color: var(--accento); }
.elenco-lato .minuto { display: block; margin-top: 2px; }

/* Sotto i 1080px la colonna passa sotto: stringere il testo per far posto a un indice
   vorrebbe dire peggiorare la cosa che si sta leggendo per un aiuto a leggerla. */
@media (max-width: 1080px) {
  .articolo-corpo { grid-template-columns: minmax(0, 1fr); }
  .lato-articolo { position: static; margin-top: var(--s6); }
  .articolo-corpo > .testo-articolo { max-width: none; }
  .indice { display: none; }
}

/* La copertina sta dentro una fascia alta al massimo 420px.
   `contain` e non `cover`: su questo blog le copertine saranno logo e schermate,
   e `cover` le taglierebbe — un logo tagliato a meta' e' peggio di due bande ai lati.
   Il fondo grigio chiaro fa da passe-partout invece di lasciare due buchi bianchi. */
.copertina-articolo {
  background: var(--carta-alt);
  border: 1px solid var(--filo);
  border-radius: var(--r);
  overflow: hidden;
}
.copertina-articolo img {
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  padding: var(--s5);
  border-radius: 0;
}
/* Nella scheda dell'elenco invece si taglia: li' il riquadro e' piccolo e uniforme,
   e una fila di schede con proporzioni diverse si legge peggio di una foto tagliata. */
.scheda-articolo .copertina img { object-fit: contain; background: var(--carta-alt); padding: var(--s3); }

/* ── chi ha scritto ───────────────────────────────────────────────────────────
   Sta in fondo all'articolo, staccato ma non gridato: e' la risposta a «questo chi
   e'?», non un secondo titolo. */

.box-autore {
  display: flex;
  gap: var(--s4);
  align-items: flex-start;
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--filo);
}
.box-autore .ritratto {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--filo);
  background: var(--carta-alt);
}
.box-autore .ritratto.iniziale {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--su-accento);
  background: linear-gradient(150deg, #5B55DF 0%, #3E38C0 100%);
  border-color: transparent;
}
.box-autore .chi { margin: 0 0 var(--s1); display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.box-autore .chi strong { font-size: 1.0625rem; letter-spacing: -.01em; }
.box-autore .ruolo {
  font-size: .75rem;
  font-weight: 650;
  color: var(--accento);
  background: var(--accento-velo);
  border-radius: 999px;
  padding: 2px 9px;
}
.box-autore .bio { font-size: .9375rem; color: var(--inchiostro-2); line-height: 1.55; margin: 0 0 var(--s2); }

/* ── «chi c'è dietro»: la scheda dell'autore, in home e sul blog ──────────────
   Due colonne: a sinistra l'identita' (ritratto, campo, nome, reti), a destra il
   racconto. La colonna di sinistra e' una colonna vera — impilata e allineata a
   sinistra — perche' con la foto affiancata al nome i gettoni delle reti andavano
   a capo a meta' e la scheda sembrava sbilenca. */

.presentazione {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--s6);
  align-items: start;
  margin-top: var(--s7);
  padding: var(--s6);
  border: 1px solid var(--filo);
  border-radius: var(--r);
  background:
    radial-gradient(600px 260px at 8% 0%, rgba(76,70,214,.07), transparent 70%),
    linear-gradient(135deg, #F7F6FE 0%, #FFFFFF 60%, #FAFAFD 100%);
}

/* La colonna dell'identita'. */
.presentazione-chi { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }

/* La cornice sfumata attorno al ritratto: senza, una foto con lo sfondo chiaro si
   scioglie nel fondo della scheda. */
.cornice-faccia {
  display: block;
  padding: 3px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--accento) 0%, #7B76EA 55%, #22B8CF 100%);
  box-shadow: 0 8px 22px -10px rgba(76,70,214,.55);
}
.presentazione .faccia {
  display: block;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--carta);
}

/* La menzione del campo. `nowrap` perche' «Affiliate marketing» spezzato su due
   righe dentro una pillola non e' una pillola, e' un incidente. */
.presentazione .occhiello-chi {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accento);
  background: var(--accento-velo);
  border: 1px solid var(--accento-orlo);
  border-radius: 999px;
  padding: 4px 11px 4px 8px;
  margin: 0;
}
.presentazione .occhiello-chi svg { width: 14px; height: 14px; flex: none; }

.presentazione .nome-e-ruolo { margin: calc(var(--s3) * -1 + 2px) 0 0; }
.presentazione h2 { font-size: 1.375rem; letter-spacing: -.02em; margin: 0; line-height: 1.2; }
.presentazione .ruolo-chi { font-size: .8125rem; color: var(--spento); margin: 3px 0 0; font-weight: 600; }

.reti-chi { display: flex; flex-wrap: wrap; gap: 5px; }
/* L'etichetta occupa la riga intera e manda i gettoni a capo: quattro nomi di rete
   senza dire cosa sono sembrano un elenco di loghi comprati. */
.reti-chi .reti-titolo {
  width: 100%;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--spento);
  margin-bottom: 1px;
}
.reti-chi .rete {
  font-size: .6875rem;
  font-weight: 700;
  color: var(--inchiostro-2);
  background: var(--carta);
  border: 1px solid var(--filo);
  border-radius: 6px;
  padding: 3px 8px;
}

.presentazione-testo p { color: var(--inchiostro-2); line-height: 1.62; margin: 0 0 var(--s3); }
.presentazione-testo p:last-child { margin-bottom: 0; }
.presentazione-testo strong { color: var(--inchiostro); }
.presentazione-testo .minuto { margin-top: var(--s4); }

/* Sotto i 760px la scheda diventa una colonna sola. L'identita' resta impilata —
   affiancare ritratto e nome su schermo stretto rimpicciolisce l'uno e manda l'altro
   a capo — ma il ritratto si stringe, per non mangiare mezzo schermo prima del testo. */
@media (max-width: 760px) {
  .presentazione { grid-template-columns: 1fr; gap: var(--s4); padding: var(--s5); }
  .presentazione .faccia { width: 72px; height: 72px; }
}