/*
 * Il foglio comune del sito: caratteri, colori, base tipografica, pulsanti,
 * impaginazione e intestazione. Lo collegano tutte le pagine, prima del loro
 * <style>; il piè di pagina sta in piede.css (lo usa anche il manuale, che
 * questo foglio non lo carica).
 *
 * Direzione «grafica editoriale» (fase 4b del piano del 4 ottobre): titoli in
 * Archivo condensato e nerissimo, testi in Instrument Sans, giallo solo nelle
 * campiture, pulsanti grafite, fondo carta chiaro.
 *
 * Cosa NON ridefinire nelle pagine: le variabili qui sotto, .testata e le sue
 * parti, .pulsante, .salta-al-contenuto, i @font-face. Una pagina che ne ha
 * bisogno diversi aggiunge una classe sua, non riscrive queste.
 */

/* ---------------------------------------------------------------------------
 * I caratteri
 *
 * Serviti dal sito (assets/caratteri, licenza OFL accanto ai file): nessuna
 * richiesta a Google, quindi l'IP dei visitatori non esce e la privacy non
 * deve nominarlo. Solo caratteri latini: à è é ì ò ù « » € ci sono.
 * font-display: swap — il testo si legge subito col carattere di ripiego, e
 * il ripiego qui sotto ha le misure corrette perché il cambio non sposti
 * niente.
 * ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo';
  src: url('/assets/caratteri/archivo-latin-wdth-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('/assets/caratteri/instrument-sans-latin-wght-normal.woff2') format('woff2');
  font-weight: 400 700;
  font-stretch: 100%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/*
 * I ripieghi con le misure giuste.
 *
 * Misurati in Chromium il 6 ottobre 2026 sugli stessi file, con frasi
 * italiane lunghe: Instrument Sans 400 è largo il 101,2% di Arial 400, sale 97
 * e scende 25 (Arial 91 e 21). Archivo, rispetto ad Arial Bold: al 62% e peso
 * 900 (titoli grandi) il 72,7%; al 72% e peso 850 (h1, h2) l'80,5%; all'82% e
 * peso 800 (h3, la riga sotto il titolo della home) l'87,4%. Sale 88 e scende
 * 21 a ogni larghezza. Con size-adjust e gli override il testo di ripiego
 * occupa lo stesso spazio del vero: quando arriva il carattere le righe non
 * cambiano e la pagina non salta.
 *
 * Archivo ha tre ripieghi con lo stesso nome e font-stretch diversi: il
 * browser sceglie da solo quello della larghezza che l'elemento chiede (62,
 * 72 o 82%; una larghezza in mezzo prende il più stretto sotto). Prima ce
 * n'era uno solo, tarato al 62%: un titolo al 72% o all'82% col ripiego
 * stava su una riga e col vero su due (la home a 1280 scendeva di 35 px).
 * Su Android Arial non c'è: vale Roboto, larga quasi uguale.
 */
@font-face {
  font-family: 'Instrument Sans ripiego';
  src: local('Arial'), local('ArialMT'), local('Helvetica'), local('Roboto');
  size-adjust: 101.2%;
  ascent-override: 95.8%;
  descent-override: 24.7%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Archivo ripiego';
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'), local('Roboto Bold');
  font-weight: 100 900;
  font-stretch: 62%;
  size-adjust: 72.7%;
  ascent-override: 121%;
  descent-override: 28.9%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Archivo ripiego';
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'), local('Roboto Bold');
  font-weight: 100 900;
  font-stretch: 72%;
  size-adjust: 80.5%;
  ascent-override: 109.3%;
  descent-override: 26.1%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Archivo ripiego';
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'), local('Roboto Bold');
  font-weight: 100 900;
  font-stretch: 82%;
  size-adjust: 87.4%;
  ascent-override: 100.7%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* ---------------------------------------------------------------------------
 * Le variabili
 *
 * Giallo e grafite vengono da tokens.css, cioè da @viisi/styles: gli stessi
 * del portale e del chiosco. I valori dopo la virgola servono solo se
 * tokens.css manca (il sito aperto da public/ senza build) e la build
 * controlla che siano uguali ai token (scripts/build.mjs).
 * ------------------------------------------------------------------------- */
:root {
  /* colori */
  --giallo: var(--ak-yellow, #fbe304);   /* solo campiture: fasce, cordino, sottolineature piene */
  --grafite: var(--ak-dark, #313138);    /* pulsanti, testo, filetti, piè di pagina */
  --grafite-scura: #1e1e23;              /* pulsante sotto il puntatore */
  --testo: var(--grafite);
  --testo-2: #5a5a56;                    /* testo secondario: 6,3:1 sulla carta, 5,3:1 sul giallo */
  --carta: #f6f5f0;                      /* fondo delle pagine */
  --carta-2: #ecebe4;                    /* fascia alternata, riquadri */
  --bianco: #fff;
  --linea: #d6d5cd;                      /* righe sottili, solo decorative */
  --fuoco: var(--grafite);               /* il contorno del campo attivo; sul fondo scuro diventa giallo */

  /* caratteri */
  --famiglia-titoli: 'Archivo', 'Archivo ripiego', 'Arial Narrow', Arial, sans-serif;
  --famiglia-testo: 'Instrument Sans', 'Instrument Sans ripiego', system-ui, -apple-system,
    'Segoe UI', Roboto, sans-serif;
  --famiglia-codice: 'Cascadia Mono', Consolas, 'SFMono-Regular', Menlo, monospace;

  /* la scala dei titoli: dimensione, larghezza (font-stretch), peso */
  --t-gigante: clamp(4rem, 1.6rem + 12vw, 11rem);   /* l'apertura della home: 72 px a 390, 176 a 1280 */
  --t-riga: clamp(3rem, 1.4rem + 7vw, 7.5rem);      /* le parole delle righe numerate (Presenti., Invito.) */
  --t-1: clamp(2.5rem, 1.5rem + 4.4vw, 5rem);       /* l'H1 delle altre pagine */
  --t-2: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  --t-3: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --t-4: 1.1875rem;
  --stretto: 62%;      /* il condensato pieno: gigante e righe */
  --stretto-medio: 72%;
  --stretto-lieve: 82%;

  /* il testo */
  --corpo: 1.0625rem;  /* 17 px; 16 sotto i 600 px */
  --piccolo: 0.9375rem; /* 15 px: il minimo nelle pagine commerciali è 14 */
  /* La lunghezza massima di una riga di testo: 44em, cioè i 66ch di prima
     misurati con Instrument Sans (923 px per l'introduzione a 1280). In em e
     non in ch, perché il ch è quello del carattere che c'è in quel momento:
     col ripiego la colonna era più stretta di un sesto, e all'arrivo del
     carattere vero si allargava e faceva salire tutto quello che c'era
     sotto. */
  --misura: 44em;

  /* le spaziature */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;
  --margine: clamp(16px, 5vw, 64px);          /* margine laterale delle pagine */
  --larghezza: 1200px;                         /* larghezza massima del contenuto */
  --sezione: clamp(56px, 4rem + 4vw, 112px);   /* spazio sopra e sotto una sezione */
  /* lo spazio fra l'intestazione e l'apertura di una pagina, uguale ovunque:
     32 px sul telefono, 52 a 1280, 64 al massimo. Le schede al centro
     (conferma, password) e le pagine del visitatore (ingresso, documenti)
     hanno il loro, perché lì la scheda sta in mezzo allo schermo. */
  --sopra-pagina: clamp(32px, 1.25rem + 2.5vw, 64px);
  --filetto: 3px;                              /* il filetto editoriale */
  --raggio: 16px;
}

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

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

body {
  margin: 0;
  background: var(--carta);
  color: var(--testo);
  font-family: var(--famiglia-testo);
  font-size: var(--corpo);
  line-height: 1.55;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 599.98px) {
  :root { --corpo: 1rem; }
}

img, video { max-width: 100%; height: auto; }
button, input, select, textarea { font-family: inherit; }

/* I titoli: Archivo condensato e nerissimo. Le pagine scelgono la misura con
   le classi .titolo-* qui sotto, o lasciano quella di serie. */
h1, h2, h3 {
  font-family: var(--famiglia-titoli);
  font-weight: 850;
  color: inherit;
  margin: 0 0 0.4em;
  text-wrap: balance;
  /* Pesi da 800 in su e spaziatura stretta: senza un po' d'aria fra le parole
     «di carta» diventava «dicarta» (prova dell'analista grafico, 4 ottobre). */
  word-spacing: 0.06em;
}
h1 { font-size: var(--t-1); font-stretch: var(--stretto-medio); line-height: 0.95; letter-spacing: -0.01em; }
h2 { font-size: var(--t-2); font-stretch: var(--stretto-medio); line-height: 1; letter-spacing: -0.005em; }
h3 { font-size: var(--t-3); font-stretch: var(--stretto-lieve); line-height: 1.1; font-weight: 800; }
h4 { font-size: var(--t-4); font-weight: 700; margin: 0 0 0.4em; line-height: 1.25; }

p { margin: 0 0 1em; }

.titolo-gigante, .titolo-riga, .titolo-1, .titolo-2, .titolo-3 {
  font-family: var(--famiglia-titoli);
  color: inherit;
  margin: 0;
}
/* L'apertura della home. Interlinea stretta ma non meno di 0,86: sotto, una
   maiuscola accentata tocca la riga sopra. */
.titolo-gigante {
  font-size: var(--t-gigante);
  font-stretch: var(--stretto);
  font-weight: 900;
  line-height: 0.86;
  letter-spacing: -0.012em;
  word-spacing: 0.1em;
}
/* Le parole delle righe. Interlinea 0,95 e non meno: con 0,88 la «p» di
   «Imprese» toccava la «t» di «esterne» sulla riga sotto (misurato in
   Chromium il 6 ottobre). I titoli-frase di funzioni e come-funziona, che
   vanno spesso su due righe con una «p» sopra una «d», stanno a 1. */
.titolo-riga {
  font-size: var(--t-riga);
  font-stretch: var(--stretto);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.01em;
  word-spacing: 0.08em;
}
/* I titoli-frase delle righe numerate (funzioni, come-funziona: «Imprese
   esterne e documenti.»). Più piccoli delle parole della home, che sono una
   per riga (Invito., Arrivo.): una frase va su due o tre righe, e a quella
   misura sarebbe alta mezzo schermo. Interlinea 1: con meno la «p» di una
   riga toccava la «d» della riga sotto. */
.titolo-frase {
  font-family: var(--famiglia-titoli);
  font-size: clamp(2.5rem, 1.3rem + 4.6vw, 5.25rem);
  font-stretch: var(--stretto);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.01em;
  word-spacing: 0.08em;
}
.titolo-1 { font-size: var(--t-1); font-stretch: var(--stretto-medio); font-weight: 850; line-height: 0.95; }
.titolo-2 { font-size: var(--t-2); font-stretch: var(--stretto-medio); font-weight: 850; line-height: 1; }
.titolo-3 { font-size: var(--t-3); font-stretch: var(--stretto-lieve); font-weight: 800; line-height: 1.1; }

/* Testo di sostegno, occhielli, note. */
.introduzione { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem); line-height: 1.5; max-width: var(--misura); }
.occhiello {
  font-family: var(--famiglia-testo);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--testo);
}
.nota { font-size: var(--piccolo); color: var(--testo-2); }
.misura { max-width: var(--misura); }

/* ---------------------------------------------------------------------------
 * I collegamenti
 *
 * Sottolineati sempre: il colore da solo non basta a dire che sono
 * collegamenti. Sotto il puntatore la riga si ingrossa. La campitura gialla
 * sotto la parola la usano intestazione e piè di pagina, e .evidenza nel
 * testo: messa su ogni <a> finirebbe anche sotto le schede intere.
 * ------------------------------------------------------------------------- */
a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}
a:hover { text-decoration-thickness: 3px; }

/* La campitura gialla dentro il testo: «sottolineatura piena». Testo grafite,
   mai testo giallo su bianco. */
.evidenza {
  background-image: linear-gradient(var(--giallo), var(--giallo));
  background-size: 100% 0.42em;
  background-position: 0 88%;
  background-repeat: no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-inline: 0.06em;
}
/* L'etichetta su campitura gialla: il prezzo, «Tutto compreso». */
.etichetta-gialla {
  display: inline-block;
  background: var(--giallo);
  color: var(--grafite);
  font-weight: 700;
  padding: 0.1em 0.5em;
  border-radius: 6px;
}

/* ---------------------------------------------------------------------------
 * Il fuoco
 *
 * Sempre visibile con la tastiera, mai con il mouse. Il contorno sta fuori
 * dall'elemento, quindi deve vedersi sul fondo intorno: grafite sulla carta e
 * sul giallo, giallo sul grafite (le zone scure ridefiniscono --fuoco).
 * ------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--fuoco);
  outline-offset: 3px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline-offset: 1px;
}

/* Il primo tasto Tab porta qui: salta l'intestazione. */
.salta-al-contenuto {
  position: absolute;
  left: var(--s3);
  top: var(--s3);
  z-index: 100;
  transform: translateY(-200%);
  background: var(--grafite);
  color: var(--bianco);
  font-weight: 600;
  padding: 12px 18px;
  border-radius: 8px;
  text-decoration: none;
}
/* Il contorno resta grafite, come altrove sulla carta: giallo sulla carta
   si vedeva appena (1,2:1). */
.salta-al-contenuto:focus { transform: none; }

.visivamente-nascosto {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
 * I pulsanti
 *
 * Grafite pieno con testo bianco (12,9:1): il giallo è del design system per
 * la selezione, mai per i pulsanti che fanno qualcosa. Il secondario è a
 * contorno. Alti almeno 48 px (44 il piccolo): si centrano col pollice.
 * ------------------------------------------------------------------------- */
.pulsante {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 0.7em 1.5em;
  border: 2px solid var(--grafite);
  border-radius: 999px;
  background: var(--grafite);
  color: var(--bianco);
  font-family: var(--famiglia-testo);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.pulsante:hover {
  background: var(--grafite-scura);
  border-color: var(--grafite-scura);
  color: var(--bianco);
}
.pulsante-secondario {
  background: transparent;
  color: var(--grafite);
}
.pulsante-secondario:hover {
  background: var(--grafite);
  border-color: var(--grafite);
  color: var(--bianco);
}
.pulsante-piccolo {
  min-height: 44px;
  padding: 0.5em 1.05em;
  font-size: var(--piccolo);
  white-space: nowrap;
}
/* La frase accanto al primo pulsante: «Nessuna carta di credito». */
.pulsante-con-nota {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s4);
}
.pulsante-con-nota .nota { margin: 0; color: var(--testo); font-weight: 500; }

/* ---------------------------------------------------------------------------
 * Fondi e fasce
 * ------------------------------------------------------------------------- */
.fascia-gialla { background: var(--giallo); color: var(--grafite); }
.fascia-gialla .nota, .fascia-gialla .occhiello { color: var(--grafite); }
.fascia-carta { background: var(--carta-2); }
.fascia-bianca { background: var(--bianco); }
.fascia-grafite {
  background: var(--grafite);
  color: var(--bianco);
  --fuoco: var(--giallo);
  --testo-2: #c9c9cf;   /* 7,8:1 sul grafite */
}
.fascia-grafite a:hover { color: var(--giallo); }
.fascia-grafite .pulsante { background: var(--bianco); border-color: var(--bianco); color: var(--grafite); }
.fascia-grafite .pulsante:hover { background: var(--giallo); border-color: var(--giallo); color: var(--grafite); }
.fascia-grafite .pulsante-secondario { background: transparent; border-color: var(--bianco); color: var(--bianco); }
.fascia-grafite .pulsante-secondario:hover { background: var(--bianco); color: var(--grafite); }

/* Il filetto editoriale: tre pixel grafite sopra una riga o una sezione. */
.filetto { border-top: var(--filetto) solid var(--grafite); }
.fascia-gialla .filetto, .fascia-gialla.filetto { border-top-color: var(--grafite); }

/* ---------------------------------------------------------------------------
 * L'impaginazione
 *
 * Tutto si restringe fino a 320 px senza uscire dallo schermo: nessuna
 * colonna ha una larghezza minima più grande dello spazio che c'è.
 * ------------------------------------------------------------------------- */
.contenitore {
  width: min(100% - 2 * var(--margine), var(--larghezza));
  margin-inline: auto;
}
.contenitore-stretto {
  width: min(100% - 2 * var(--margine), 760px);
  margin-inline: auto;
}
.sezione { padding-block: var(--sezione); }

/* Una griglia che mette quante colonne ci stanno, mai più strette di
   --colonna (di serie 280 px) e mai più larghe dello schermo. */
.griglia {
  display: grid;
  gap: var(--spazio-griglia, var(--s5));
  grid-template-columns: repeat(auto-fit, minmax(min(var(--colonna, 280px), 100%), 1fr));
}
/* Due colonne affiancate da 900 px in su, una sotto l'altra prima. */
.due-colonne {
  display: grid;
  gap: var(--s6) var(--s7);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 900px) {
  .due-colonne { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* Una pila verticale con lo stesso spazio fra gli elementi. */
.pila > * + * { margin-top: var(--spazio, var(--s4)); }
.pila > * { margin-bottom: 0; }

/*
 * Le righe numerate della direzione editoriale: numero, parola grande, testo
 * (e, se c'è, un'immagine). Ogni riga ha il filetto sopra. Sul telefono gli
 * elementi vanno uno sotto l'altro; da 900 px stanno affiancati.
 *
 *   <ol class="righe">
 *     <li class="riga">
 *       <span class="riga-numero">01</span>
 *       <h3 class="riga-titolo titolo-riga">Presenti.</h3>
 *       <div class="riga-testo">…</div>
 *       <div class="riga-figura">…</div>   (facoltativa)
 *     </li>
 *   </ol>
 */
.righe { list-style: none; margin: 0; padding: 0; }
.riga {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s3);
  padding-block: var(--s6);
  border-top: var(--filetto) solid var(--grafite);
}
.riga-numero { font-size: var(--piccolo); font-weight: 700; font-variant-numeric: tabular-nums; }
.riga-titolo { margin: 0; }
.riga-testo { max-width: var(--misura); }
.riga-testo > :last-child { margin-bottom: 0; }
.riga-figura { min-width: 0; }
@media (min-width: 900px) {
  .riga {
    grid-template-columns: 3.5rem minmax(0, 6fr) minmax(0, 5fr);
    column-gap: var(--s5);
    align-items: start;
    padding-block: var(--s6) var(--s7);
  }
  .riga-numero { padding-top: 0.75rem; }
  .riga-testo { padding-top: 0.5rem; }
  .riga-figura { grid-column: 2 / -1; }
}

/* Un'immagine dentro una cornice sottile: le schermate vere. */
.schermata {
  display: block;
  border-radius: 12px;
  border: 1px solid var(--linea);
  background: var(--bianco);
}

/* Le tabelle larghe e i blocchi di codice scorrono dentro il loro riquadro,
   non la pagina. */
.scorre { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

/* ---------------------------------------------------------------------------
 * L'intestazione
 *
 * Uguale su tutte le pagine (markup in ogni HTML, aspetto solo qui). Da 900 px
 * in su: marchio, voci, Accedi e «Prova 30 giorni» su una riga. Sotto i 900:
 * marchio, «Prova 30 giorni» e il pulsante Menu; le voci si aprono sotto,
 * nella pagina, senza coprire niente. Senza JavaScript (sito.js non caricato,
 * o la pagina 404 che non ha script) le voci restano visibili, in fila.
 *
 * Le voci: Funzioni, Prezzo, Come funziona, Manuale, Domande frequenti (con
 * «/» davanti, così valgono da api/ e dalla 404 servita a qualunque
 * profondità; Prezzo e Domande frequenti portano a #prezzo e #faq della
 * home). Poi «Accedi»: chi ha già un account arriva qui per entrare, e senza
 * il collegamento dovrebbe ricordarsi a memoria l'indirizzo del portale
 * (build.mjs lo riscrive con l'indirizzo vero). È secondario rispetto alla
 * prova, perché chi apre il sito di solito è nuovo.
 *
 * I selettori partono da header.testata: più forti dei «header {…}» e
 * «nav a {…}» che una pagina può ancora avere nel suo stile.
 * ------------------------------------------------------------------------- */
header.testata {
  position: relative;
  z-index: 20;
  display: block;
  margin: 0;
  padding: 0;
  background: var(--carta);
  color: var(--testo);
  border-bottom: 1px solid var(--linea);
  font-family: var(--famiglia-testo);
  font-size: 1rem;
  line-height: 1.3;
  text-align: left;
}
header.testata .testata-interno {
  width: min(100% - 2 * var(--margine), var(--larghezza));
  margin-inline: auto;
  min-height: 76px;
  padding-block: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: clamp(16px, 2.4vw, 32px);
}
header.testata a { color: var(--testo); }

header.testata .testata-marchio {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 44px;
  text-decoration: none;
}
/* Il logo leggero: assets/logo-viisi-testata.png, 262×96 px (tre volte i 34
   mostrati, nitido anche sugli schermi a densità tripla), 3 KB contro i 160
   di logo-viisi.png. Ricavato da assets/marchio/viisi-parola.png senza
   ritocchi: riduzione Lanczos e tavolozza di 128 colori. */
header.testata .testata-marchio img {
  display: block;
  width: auto;
  height: 34px;
}
/* Con i colori forzati scuri (contrasto elevato di Windows) il fondo diventa
   nero e la parola VIISI, nera su trasparente, spariva: le si dà un fondo
   bianco suo, che il sistema non cambia. */
@media (forced-colors: active) {
  header.testata .testata-marchio img {
    forced-color-adjust: none;
    background-color: #fff;
    border-radius: 4px;
  }
}

header.testata .testata-nav {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  column-gap: clamp(16px, 2.4vw, 32px);
}
header.testata .testata-voci {
  display: flex;
  align-items: center;
  column-gap: clamp(14px, 1.9vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}
header.testata .testata-voci li { margin: 0; padding: 0; }
header.testata .testata-voci a,
header.testata .testata-accedi {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  font-size: var(--piccolo);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  /* La riga gialla sotto la voce: compare sotto il puntatore e sulla pagina
     in cui si è (con aria-current, che lo dice anche a chi non vede). */
  background-image: linear-gradient(var(--giallo), var(--giallo));
  background-size: 0 5px;
  background-position: 0 calc(50% + 0.85em);
  background-repeat: no-repeat;
}
header.testata .testata-voci a:hover,
header.testata .testata-accedi:hover,
header.testata .testata-voci a[aria-current="page"] {
  background-image: linear-gradient(var(--giallo), var(--giallo));
  background-size: 100% 5px;
}
header.testata .testata-voci a[aria-current="page"] { font-weight: 700; }
header.testata .testata-accedi { font-weight: 600; }

header.testata .testata-azioni {
  margin-left: auto;
  display: flex;
  align-items: center;
  column-gap: clamp(16px, 2vw, 24px);
}
header.testata .pulsante { color: var(--bianco); }
header.testata .pulsante:hover { color: var(--bianco); background-color: var(--grafite-scura); }

/* Il pulsante Menu: solo sul telefono e solo se sito.js è arrivato (classe
   con-menu su <html>). Le proprietà sono tutte scritte perché una pagina che
   ha ancora «button {…}» nel suo stile non lo deformi. */
header.testata .testata-menu,
header.testata .testata-prova-breve { display: none; }
header.testata .testata-menu {
  appearance: none;
  -webkit-appearance: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0 14px 0 12px;
  border: 2px solid var(--grafite);
  border-radius: 999px;
  background: transparent;
  color: var(--grafite);
  font-family: var(--famiglia-testo);
  font-size: var(--piccolo);
  font-weight: 600;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
header.testata .testata-menu svg { width: 20px; height: 20px; flex: none; }
header.testata .testata-menu .icona-chiudi { display: none; }
header.testata .testata-menu[aria-expanded="true"] {
  background: var(--grafite);
  color: var(--bianco);
}
header.testata .testata-menu[aria-expanded="true"] .icona-apri { display: none; }
header.testata .testata-menu[aria-expanded="true"] .icona-chiudi { display: block; }

/* Appena sopra i 900 px tutto sta su una riga solo se gli spazi si
   stringono: con quelli di serie, fra 900 e 947 px il marchio restava da solo
   sopra e le voci andavano sotto (intestazione alta 109 px invece di 77).
   Spazi più stretti e voci a 14 px, il minimo del sito, fino a 980 px. */
@media (min-width: 900px) and (max-width: 979.98px) {
  header.testata .testata-interno,
  header.testata .testata-nav { column-gap: 18px; }
  header.testata .testata-voci { column-gap: 12px; }
  header.testata .testata-azioni { column-gap: 14px; }
  header.testata .testata-voci a,
  header.testata .testata-accedi { font-size: 0.875rem; }
}

/* La variante essenziale (ingresso, documenti): solo il marchio, al centro.
   Chi la vede sta visitando un'altra azienda, non sta scegliendo VIISI. */
header.testata.testata-essenziale .testata-interno { justify-content: center; min-height: 64px; }

@media (max-width: 899.98px) {
  header.testata .testata-interno { min-height: 64px; column-gap: 8px; }
  header.testata .testata-marchio { margin-right: auto; }
  header.testata .testata-marchio img { height: 28px; }
  header.testata.testata-essenziale .testata-marchio { margin-right: 0; }
  header.testata .testata-prova-breve { display: inline-flex; padding-inline: 14px; }
  header.testata .testata-azioni .testata-prova { display: none; }

  /* Senza script: le voci in fila sotto la barra, piccole, tutte visibili. */
  header.testata .testata-nav {
    order: 10;
    flex: 1 0 100%;
    flex-wrap: wrap;
    column-gap: 18px;
    padding-bottom: 6px;
  }
  header.testata .testata-voci { flex-wrap: wrap; column-gap: 18px; }
  header.testata .testata-azioni { margin-left: 0; }

  /* La 404 non ha script (testata-ridotta): sul telefono le sei voci in fila
     occupavano tre righe, e l'intestazione era alta 203 px contro i 65 delle
     altre pagine. Lì restano marchio e «Prova 30 giorni»; le stesse strade
     sono nel corpo della pagina. */
  header.testata.testata-ridotta .testata-nav { display: none; }

  /* Con lo script: il pulsante Menu, e le voci si aprono a elenco. */
  .con-menu header.testata .testata-menu { display: inline-flex; }
  .con-menu header.testata:not(.aperta) .testata-nav { display: none; }
  .con-menu header.testata .testata-nav {
    display: block;
    margin-top: 10px;
    padding: 4px 0 18px;
    border-top: var(--filetto) solid var(--grafite);
  }
  .con-menu header.testata .testata-voci { display: block; }
  .con-menu header.testata .testata-voci li { border-bottom: 1px solid var(--linea); }
  .con-menu header.testata .testata-voci a {
    display: flex;
    width: 100%;
    min-height: 56px;
    padding: 0;
    font-family: var(--famiglia-titoli);
    font-size: 1.75rem;
    font-stretch: var(--stretto-medio);
    font-weight: 850;
    letter-spacing: -0.005em;
    background-position: 0 calc(50% + 0.6em);
  }
  .con-menu header.testata .testata-azioni { display: block; padding-top: 10px; }
  .con-menu header.testata .testata-accedi { font-size: 1.0625rem; }
}
/* Sui telefoni più stretti la parola «Menu» resta solo per chi usa un lettore
   di schermo: marchio, «Prova 30 giorni» e il pulsante stanno in 360 px. */
@media (max-width: 379.98px) {
  header.testata .testata-menu { padding: 0; width: 44px; }
  header.testata .testata-menu .testata-menu-testo {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}

/* ---------------------------------------------------------------------------
 * Il movimento
 *
 * Solo CSS e solo per chi non ha chiesto di ridurlo: le animazioni stanno
 * dentro questo blocco, e nient'altro nel sito si muove. Una pagina che
 * aggiunge un'animazione la mette in un blocco uguale.
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .con-menu header.testata.aperta .testata-nav { animation: testata-apri 0.18s ease-out both; }
  @keyframes testata-apri {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
  }
}
/* E per chi l'ha chiesto, niente si muove nemmeno se una pagina dimentica il
   blocco qui sopra. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
 * La stampa
 * ------------------------------------------------------------------------- */
@media print {
  .salta-al-contenuto, header.testata .testata-menu, header.testata .testata-nav,
  header.testata .testata-prova-breve { display: none !important; }
  header.testata { border-bottom: 1px solid #000; }
  body { background: #fff; }
}