/* NAPIX Labs · foglio unico del sito (contratto «semplice ed elegante», 19/10/2026; ritorno a questa veste la sera
   del 19/10 dopo la prova «strumento di precisione», bocciata perché sapeva di videogioco).
   Chiaro come il piede: fondi alternati, testo quasi nero, filetti 1 px, un solo accento. Carattere proprio:
   Instrument Sans (OFL), un file variabile. Scuro: blu-notte profondo, segue il sistema; il tasto della testata scrive
   data-tema sull'<html> (nessuna memoria). Movimento: il nucleo 3D di CORTEX in home (le soluzioni hanno FOTO), i cambi di colore (≤150 ms) e i riquadri
   della home al passaggio (≤220 ms); tutto spento con moto ridotto. */

/* (voce 3, 20/10) UN solo file variabile, quello ufficiale del progetto Instrument Sans (fonts/webfonts, OFL): pesi
   400-700 continui al posto dei tre file fissi (106 KB → 89 KB) e un solo precarico per pagina. */
@font-face { font-family: 'Instrument Sans'; src: url('/assets/fonts/InstrumentSans-Variabile.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }

/* ── Variabili: i NOMI pubblici (li leggono gli script del sito) ──────────────────────────────────────
   --fondo --fondo-2 --testo --testo-2 --filetto --accento --accento-testo (testo SU accento)
   --font-marchio --font-testo (il monospaziato NON si usa). */
:root {
  --font-marchio: 'Instrument Sans', system-ui, sans-serif;
  --font-testo: 'Instrument Sans', system-ui, 'Segoe UI', Roboto, sans-serif;
  --f: var(--font-testo);
  /* GRIGLIA UNICA (§24, 20/10): 12 colonne, gutter 48, righe a due colonne sempre 6 | 6 (colonna destra a x 744 a 1440,
     536 a 1024). Scala verticale: 8 · 16 · 24 · 32 dentro i blocchi, 48 fra blocchi, 96 fra coppie foto/testo; le sezioni
     hanno alto = basso (--spazio, a gradini). Il riepilogo per chi scrive le pagine: claude/docs/griglia.md */
  --largo: 1120px; --bordo-base: 40px; --bordo: max(var(--bordo-base), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --gutter: 48px; --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --blocco: 48px; --blocco-2: 96px;
  --spazio: 120px; --scheda-pad: 40px;
  /* angoli: TRE gettoni soli (titolare 27/10, prima erano ~10 raggi diversi) — pillola (bottoni, chip), --r 18px (riquadri,
     schede, foto, pannelli), --r-piccolo 8px (campi, etichette, miniature); restano 50% (cerchi) e 0 dove voluto */
  --pillola: 980px; --r: 18px; --r-piccolo: 8px;
  --passo: 150ms ease;
  /* (voce 26) assestamento finale appena percepibile (~2%): una molla scritta coi punti, nessuna libreria */
  --molla: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.9%, 1);

  /* chiaro (come il piede di f06f221) */
  --fondo: #ffffff; --fondo-2: #f5f5f7; --testo: #1d1d1f; --testo-2: #6e6e73; --t3: #424245; --filetto: #d2d2d7;
  --accento: #00739a; --accento-forte: #005f7f; --accento-testo: #ffffff; --errore: #b3261e;
  --campo-bordo: #aeaeb2; --segnaposto: #8e8e93; --selezione: #cfe8f1; --velo-testata: rgba(255, 255, 255, .96);
  --ombra-su: 0 18px 32px -22px rgba(20, 30, 45, .35);
  /* le foto: ombra morbida in chiaro; in scuro un filo chiaro + ombra profonda che le stacca dal fondo */
  --ombra-foto: 0 24px 48px -30px rgba(20, 30, 45, .45), 0 2px 6px -2px rgba(20, 30, 45, .12); --foto-luce: none;
  /* le tinte dei cinque riquadri della home: molto tenui, una per soluzione */
  --tinta-1: #f2effa; --tinta-2: #ecf1fb; --tinta-3: #f9f3e5; --tinta-4: #e9f5f6; --tinta-5: #faefe8;
  /* l'apertura della home come blocco unico (titolare 25/10): la famiglia del petrolio del marchio, testo bianco, tasto
     invertito; la «luce» sta solo attorno all'anello (sul testo il fondo resta ≤ --apertura-fondo-2: contrasto ≥ 7:1);
     le cinque tinte piene colorano le lastre del lavoro nella scena (una per soluzione, come i riquadri) */
  --apertura-fondo: #043447; --apertura-fondo-2: #0a5a78; --apertura-luce: #2fa6c9;
  --apertura-testo: #ffffff; --apertura-testo-2: #d6ecf3; --apertura-selezione: rgba(255, 255, 255, .26);
  --apertura-bottone: #ffffff; --apertura-bottone-testo: #043447; --apertura-bottone-su: #dff1f7;
  --apertura-tinta-1: #c9b8f0; --apertura-tinta-2: #a9c6f2; --apertura-tinta-3: #f0d9a6; --apertura-tinta-4: #9fdbe0; --apertura-tinta-5: #f4c2ad;
  color-scheme: light;
}
/* le fasce della griglia: bordo, sezione e gutter a gradini (mai valori che scivolano col viewport) */
@media (max-width: 1099px) { :root { --spazio: 96px; } }
@media (max-width: 833px) { :root { --bordo-base: 32px; --gutter: 24px; --spazio: 64px; --scheda-pad: 24px; --blocco-2: 48px; } }
@media (max-width: 559px) { :root { --bordo-base: 20px; --spazio: 48px; } }
/* scuro: blu-notte profondo, testo chiaro caldo, ciano del marchio. Due copie identiche (sistema / tasto) */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) {
    --fondo: #0b1520; --fondo-2: #101d2a; --testo: #ede7db; --testo-2: #a5b0ba; --t3: #c9c6bd; --filetto: #22364a;
    --accento: #3cc6e2; --accento-forte: #7ed9ec; --accento-testo: #062030; --errore: #ff8a80;
    --campo-bordo: #4a6075; --segnaposto: #7d8a96; --selezione: #1d4a5c; --velo-testata: rgba(11, 21, 32, .94);
    --ombra-su: 0 18px 32px -18px rgba(0, 0, 0, .7);
    --ombra-foto: 0 0 0 1px rgba(237, 231, 219, .12), 0 28px 56px -24px rgba(0, 0, 0, .85); --foto-luce: brightness(.9);
    --tinta-1: #1a1c34; --tinta-2: #12223b; --tinta-3: #14262b; --tinta-4: #0e2833; --tinta-5: #241b2b;
    --apertura-fondo: #07202e; --apertura-fondo-2: #0d3a4d; --apertura-luce: #3cc6e2;
    --apertura-testo: #ede7db; --apertura-testo-2: #c6d9e0; --apertura-selezione: rgba(237, 231, 219, .22);
    --apertura-bottone: #3cc6e2; --apertura-bottone-testo: #062030; --apertura-bottone-su: #7ed9ec;
    --apertura-tinta-1: #a897d8; --apertura-tinta-2: #8fb0e0; --apertura-tinta-3: #d9c48f; --apertura-tinta-4: #86c3c8; --apertura-tinta-5: #dba997;
    color-scheme: dark;
  }
}
:root[data-tema="scuro"] {
  --fondo: #0b1520; --fondo-2: #101d2a; --testo: #ede7db; --testo-2: #a5b0ba; --t3: #c9c6bd; --filetto: #22364a;
  --accento: #3cc6e2; --accento-forte: #7ed9ec; --accento-testo: #062030; --errore: #ff8a80;
  --campo-bordo: #4a6075; --segnaposto: #7d8a96; --selezione: #1d4a5c; --velo-testata: rgba(11, 21, 32, .94);
  --ombra-su: 0 18px 32px -18px rgba(0, 0, 0, .7);
  --ombra-foto: 0 0 0 1px rgba(237, 231, 219, .12), 0 28px 56px -24px rgba(0, 0, 0, .85); --foto-luce: brightness(.9);
  --tinta-1: #1a1c34; --tinta-2: #12223b; --tinta-3: #14262b; --tinta-4: #0e2833; --tinta-5: #241b2b;
  --apertura-fondo: #07202e; --apertura-fondo-2: #0d3a4d; --apertura-luce: #3cc6e2;
  --apertura-testo: #ede7db; --apertura-testo-2: #c6d9e0; --apertura-selezione: rgba(237, 231, 219, .22);
  --apertura-bottone: #3cc6e2; --apertura-bottone-testo: #062030; --apertura-bottone-su: #7ed9ec;
  --apertura-tinta-1: #a897d8; --apertura-tinta-2: #8fb0e0; --apertura-tinta-3: #d9c48f; --apertura-tinta-4: #86c3c8; --apertura-tinta-5: #dba997;
  color-scheme: dark;
}
/* (voce 9) Più contrasto chiesto al sistema (prefers-contrast: more): testi secondari quasi pieni, filetti e bordi dei
   campi ben visibili, accento più scuro (chiaro) o più acceso (scuro), testata piena, link nel testo sempre sottolineati.
   Nessun tasto in più. Le due copie dello scuro stanno DOPO quella chiara e hanno la stessa forza dei temi sopra. */
@media (prefers-contrast: more) {
  :root { --testo: #000000; --testo-2: #3a3a3c; --t3: #1d1d1f; --filetto: #6e6e73; --campo-bordo: #48484a;
    --accento: #005572; --accento-forte: #003e54; --segnaposto: #5f5f63; --velo-testata: var(--fondo); --apertura-fondo: var(--fondo); --apertura-fondo-2: var(--fondo); --apertura-luce: var(--fondo-2); --apertura-testo: var(--testo); --apertura-testo-2: var(--t3); --apertura-selezione: var(--selezione); --apertura-bottone: var(--accento); --apertura-bottone-testo: var(--accento-testo); --apertura-bottone-su: var(--accento-forte); }
  :root[data-tema="scuro"] { --testo: #ffffff; --testo-2: #d5dce2; --t3: #ede7db; --filetto: #6b8399; --campo-bordo: #8aa0b4;
    --accento: #7ed9ec; --accento-forte: #b4ebf6; --segnaposto: #b0bcc6; --velo-testata: var(--fondo); --apertura-fondo: var(--fondo); --apertura-fondo-2: var(--fondo); --apertura-luce: var(--fondo-2); --apertura-testo: var(--testo); --apertura-testo-2: var(--t3); --apertura-selezione: var(--selezione); --apertura-bottone: var(--accento); --apertura-bottone-testo: var(--accento-testo); --apertura-bottone-su: var(--accento-forte); }
  .eroe-palco { border: 1px solid var(--filetto); } .eroe-poster { display: none; }   /* col poster petrolio sotto il testo nero si leggeva 1,7:1 */
  a:not([class]), .vai { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) { --testo: #ffffff; --testo-2: #d5dce2; --t3: #ede7db; --filetto: #6b8399; --campo-bordo: #8aa0b4;
    --accento: #7ed9ec; --accento-forte: #b4ebf6; --segnaposto: #b0bcc6; --velo-testata: var(--fondo); --apertura-fondo: var(--fondo); --apertura-fondo-2: var(--fondo); --apertura-luce: var(--fondo-2); --apertura-testo: var(--testo); --apertura-testo-2: var(--t3); --apertura-selezione: var(--selezione); --apertura-bottone: var(--accento); --apertura-bottone-testo: var(--accento-testo); --apertura-bottone-su: var(--accento-forte); }
}

/* ── Base ──────────────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 72px; accent-color: var(--accento); }
/* (titolare 27/10) dettagli nei colori del marchio: barre di scorrimento (pollice d'accento su binario --fondo-2: i due temi
   le cambiano da sé, sono le stesse variabili; scrollbar-width resta com'è) e cursore di scrittura d'accento nei campi */
html { scrollbar-color: var(--accento) var(--fondo-2); }
input, textarea { caret-color: var(--accento); }
/* (voce 4) chi arriva su un'ancora («Scrivici», indice legale) si ferma SOTTO la testata, anche quando la testata riappare
   scorrendo in su: margine sull'obiettivo, oltre allo scroll-padding della pagina */
:target, [id] { scroll-margin-top: 16px; }
/* «Scrivici» porta al modulo: a computer il titolo della sezione sta 41 px sopra il modulo, nella colonna accanto, e
   finiva sotto la testata. Il margine comprende lo spazio interno della scheda: titolo e modulo arrivano interi. */
@media (min-width: 901px) { .scheda-modulo > form[id] { scroll-margin-top: calc(17px + var(--scheda-pad)); } }
body { margin: 0; background: var(--fondo); color: var(--testo); font: 400 1.0625rem/1.55 var(--f); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--accento); text-decoration: none; transition: color var(--passo); }
@media (hover: hover) { a:hover { color: var(--accento-forte); text-decoration: underline; text-underline-offset: 3px; } }
/* al tocco il riscontro è :active (l'hover sul telefono resterebbe incollato) */
a:not([class]):active, .vai:active { color: var(--accento-forte); }
:focus-visible { outline: 2px solid var(--accento); outline-offset: 3px; border-radius: var(--r-piccolo); }
::selection { background: var(--selezione); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.salta { position: fixed; left: 16px; top: -80px; z-index: 60; padding: 12px 18px; border-radius: var(--pillola); background: var(--testo); color: var(--fondo); font-size: 0.9375rem; }
.salta:focus { top: 12px; color: var(--fondo); }
.annuncio { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
main:focus { outline: none; }
/* base per il dito: niente riquadro grigio al tocco (c'è il riscontro :active), niente attesa del doppio tocco */
a, button, summary, label, [role="button"] { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

.contenitore { width: 100%; max-width: calc(var(--largo) + 2 * var(--bordo)); margin: 0 auto; padding: 0 var(--bordo); }

/* ── Tipografia ────────────────────────────────────────────────────────────────────────────── */
h1 { font-size: clamp(2.625rem, 6vw, 4.25rem); font-weight: 400; line-height: 1.06; letter-spacing: -.025em; }
h2 { font-size: clamp(1.875rem, 4vw, 2.75rem); font-weight: 400; line-height: 1.12; letter-spacing: -.02em; }
h3 { font-size: 1.1875rem; font-weight: 600; line-height: 1.35; letter-spacing: -.005em; }
/* (voce 1) a capo armonico: titoli bilanciati, paragrafi senza parola sola in fondo (chi non lo conosce va a capo come prima) */
h1, h2, h3, .riquadro-nome, .prove-tit, .modale-titolo { text-wrap: balance; }
p, li, dd, figcaption, summary, .riga, .frase { text-wrap: pretty; }
.occhiello { margin-bottom: 16px; color: var(--testo-2); font-size: 0.9375rem; font-weight: 500; letter-spacing: .01em; }
.frase { max-width: 36em; margin-top: 24px; color: var(--t3); font-size: clamp(1.1875rem, 1.9vw, 1.375rem); line-height: 1.5; }
.riga { max-width: 40em; margin-top: 16px; color: var(--t3); }
.azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 32px; }

/* ── Bottoni e collegamenti ────────────────────────────────────────────────────────────────── */
.bottone { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 24px; border: 1px solid var(--accento); border-radius: var(--pillola); background: var(--accento); color: var(--accento-testo); font: 500 1.0625rem/1 var(--f); cursor: pointer; transition: background-color var(--passo), border-color var(--passo), color var(--passo); }
@media (hover: hover) { .bottone:hover { background: var(--accento-forte); border-color: var(--accento-forte); color: var(--accento-testo); text-decoration: none; } }
.bottone:active { background: var(--accento-forte); border-color: var(--accento-forte); color: var(--accento-testo); text-decoration: none; }
.bottone--piccolo { min-height: 44px; padding: 0 16px; font-size: 0.9375rem; }
.bottone:disabled { opacity: .6; cursor: progress; }
/* (voce 7) il bottone si abbassa appena al clic (80 ms), e risale */
.bottone { transition: background-color var(--passo), border-color var(--passo), color var(--passo), transform 80ms ease-out; }
.bottone:active:not(:disabled) { transform: translateY(1px) scale(.98); }
/* «Scopri ›» e simili: 44 px da toccare senza cambiare il testo che scorre (padding su un elemento in linea: la riga non si
   sposta e la freccia resta attaccata all'ultima parola anche quando il link va a capo) */
.vai { padding-block: 12px; font-size: 1.0625rem; }
.vai::after { content: " ›"; }
/* (voce 7) col mouse: la sottolineatura si disegna da sinistra (180 ms) e la freccia avanza di 3 px. La linea sta sotto il
   testo (bordo del contenuto, non dei 12 px da toccare) e segue il link anche quando va a capo. La freccia resta in linea:
   avanza col margine, nessuna riga si sposta. Al tocco resta il riscontro di colore; fermo con moto ridotto. */
@media (hover: hover) and (pointer: fine) and (prefers-contrast: no-preference) {
  :is(.vai, .piede-col a:not([class])):not(:is(.riga, .informativa, .piede-legale) *) {
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; background-origin: content-box;
    background-clip: content-box; transition: color var(--passo), background-size 180ms var(--molla); }
  :is(.vai, .piede-col a:not([class])):not(:is(.riga, .informativa, .piede-legale) *):hover { background-size: 100% 1px; text-decoration: none; }
  .vai::after { transition: margin-left 180ms var(--molla); }
  .vai:hover::after { margin-left: 3px; }
  .riquadro-vai > [aria-hidden] { display: inline-block; transition: transform 220ms var(--molla); }
  .riquadro:hover .riquadro-vai > [aria-hidden] { transform: translateX(3px); }
}

/* ── Testata: marchio, le 5 soluzioni, il suono, «Scrivici»; al telefono un <details> ────────── */
.testata { position: sticky; top: 0; z-index: 20; background: var(--velo-testata); border-bottom: 1px solid var(--filetto); transition: transform .15s ease-out, opacity .15s ease-out; }
/* §16 (titolare 19/10): scorrendo in giù la testata sfuma e scivola via (250 ms), verso l'alto riappare SUBITO (150 ms).
   La classe la mette testata.js sull'<html> (regge lo scambio della testata nella navigazione continua); solo transform
   e opacità: nessuno spazio che salta. Nascosta resta raggiungibile col tabulatore: il fuoco la fa riapparire. */
html.testata-via .testata { transform: translateY(-100%); opacity: 0; pointer-events: none; transition-duration: .25s; transition-timing-function: ease-in; }
/* al telefono il velo al 94-96% lasciava leggere in trasparenza i titoli che scorrono sotto: fondo pieno (stesso colore) */
@media (max-width: 833px) { .testata { background: var(--fondo); } }
.testata-in { display: flex; align-items: center; gap: 24px; min-height: 60px; }
.marchio { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; color: var(--testo); font-size: 1.1875rem; white-space: nowrap; }
/* il marchio «NAPIX Labs» (titolare 24/10: in testata e piede NAPIX Labs, non più CORTEX), come l'icona del profilo
   Instagram: «NAPIX» pieno con «API» nell'accento, «Labs» più leggero. Solo testo: niente disegni, niente moto continuo.
   Al passaggio (solo col mouse) un filo d'accento si disegna da sinistra sotto la parola e «Labs» si scurisce; da tastiera
   lo stesso con :focus-visible. Lo stato dipende SOLO da :hover e :focus-visible (mai :focus, mai filtri o animazioni
   da far ripartire): via il mouse, torna com'era. Fermo con moto ridotto (il filo compare senza scorrere). */
.marchio-segno { position: relative; display: inline-flex; align-items: baseline; gap: .3em; color: var(--testo); font-family: var(--font-marchio); line-height: 1.2; }
.marchio-napix { font-weight: 600; letter-spacing: .01em; }
.marchio-api { color: var(--accento); }
.marchio-labs { color: var(--testo-2); font-weight: 400; transition: color .2s ease; }
.marchio-segno::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--accento); transform: scaleX(0); transform-origin: left center; transition: transform .24s cubic-bezier(.2, .7, .2, 1); }
:is(.marchio, .piede-marchio):hover { color: var(--testo); text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  :is(.marchio, .piede-marchio):hover .marchio-labs { color: var(--testo); }
  :is(.marchio, .piede-marchio):hover .marchio-segno::after { transform: scaleX(1); }
}
:is(.marchio, .piede-marchio):focus-visible .marchio-labs { color: var(--testo); }
:is(.marchio, .piede-marchio):focus-visible .marchio-segno::after { transform: scaleX(1); }
html.fermo .marchio-segno::after, html.fermo .marchio-labs { transition: none; }
@media (prefers-reduced-motion: reduce) { .marchio-segno::after, .marchio-labs { transition: none; } }
.testata-nav ul { display: flex; gap: 4px; }
.testata-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; color: var(--t3); font-size: 0.9375rem; white-space: nowrap; }
.testata-nav a:hover { color: var(--testo); text-decoration: none; }
.testata-nav a[aria-current="page"] { color: var(--testo); font-weight: 600; }
/* le tendine (titolare 24/10): al passaggio del mouse su una soluzione un pannello spiega in 3-4 righe cosa contiene.
   Solo CSS: si apre col fuoco (:focus-within, per tutti) e col passaggio solo dove c'è un mouse vero; un ponte invisibile
   tiene aperto il pannello mentre il puntatore scende; Esc lo chiude (testata.js mette data-chiusa sulla voce). Il testo è
   anche la descrizione del link (aria-describedby) per chi usa un lettore di schermo. Niente tendine nel menu del telefono. */
.testata-nav .voce { position: relative; }
.tendina { position: absolute; top: calc(100% + 8px); left: 0; z-index: 2; width: 20rem; padding: 16px 20px; border: 1px solid var(--filetto);
  border-radius: var(--r); background: var(--fondo); box-shadow: var(--ombra-su); color: var(--t3); font-size: 0.875rem; line-height: 1.55;
  white-space: normal; visibility: hidden; opacity: 0; transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s; }
.tendina::before { content: ""; position: absolute; left: -1px; right: -1px; bottom: 100%; height: 10px; }   /* il ponte */
.testata-nav .voce:last-child .tendina, .testata-nav .voce:nth-last-child(2) .tendina { left: auto; right: 0; }
.testata-nav .voce:focus-within > .tendina { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
@media (hover: hover) and (pointer: fine) {
  .testata-nav .voce:hover > .tendina { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
}
.testata-nav .voce[data-chiusa] > .tendina { visibility: hidden; opacity: 0; transition: none; }
html.fermo .tendina { transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) { .tendina { transform: none; transition: none; } }
.testata-azioni { display: flex; align-items: center; gap: 8px; }
/* (titolare 27/10) un solo «Scrivici» per schermata: finché è in vista il bottone dell'apertura che porta al contatto, la pillola
   della testata sfuma e non si raggiunge (visibility: hidden la toglie anche dal tabulatore e dai lettori di schermo); il suo
   posto resta (nessuno spostamento). Quando quel bottone esce, torna. La classe html.cta-in-vista la scrive testata.js; senza
   JS la pillola c'è sempre. Visibile→nascosta: la visibilità cambia a fine dissolvenza; nascosta→visibile: subito. */
.testata-azioni .bottone--piccolo { transition: background-color var(--passo), border-color var(--passo), color var(--passo), transform 80ms ease-out, opacity var(--passo), visibility 0s; }
html.cta-in-vista .testata-azioni .bottone--piccolo { opacity: 0; visibility: hidden; transition: background-color var(--passo), border-color var(--passo), color var(--passo), transform 80ms ease-out, opacity var(--passo), visibility 0s linear 150ms; }
@media (prefers-reduced-motion: reduce) { .testata-azioni .bottone--piccolo, html.cta-in-vista .testata-azioni .bottone--piccolo { transition: none; } }
html.fermo .testata-azioni .bottone--piccolo, html.fermo.cta-in-vista .testata-azioni .bottone--piccolo { transition: none; }
.menu-telefono { position: relative; display: none; }
.menu-telefono > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px 0 10px; color: var(--testo); font-size: 0.9375rem; cursor: pointer; list-style: none; }
.menu-telefono > summary::-webkit-details-marker { display: none; }
.menu-telefono > summary::after { content: ""; width: 16px; height: 10px; border-block: 1.5px solid currentColor; }
.menu-telefono[open] > summary::after { height: 0; border-bottom: 0; transform: rotate(0); }
.menu-telefono nav { position: fixed; left: 0; right: 0; top: 61px; padding: 8px var(--bordo) 20px; background: var(--fondo); border-bottom: 1px solid var(--filetto); }
.menu-telefono nav { max-height: calc(100vh - 61px); max-height: calc(100svh - 61px); overflow-y: auto; overscroll-behavior: contain; }
.menu-telefono:not([open]) nav { display: none; }
.menu-telefono nav a { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--filetto); color: var(--testo); font-size: 1.1875rem; }
.menu-telefono nav li:last-child a { border-bottom: 0; }
.menu-telefono nav a[aria-current="page"] { font-weight: 600; }
/* la fila intera (cinque voci, «Suono», tema, «Scrivici») sta dai 1100 px: sotto, il menu (a 1024 traboccava di 40 px) */
@media (max-width: 1099px) {
  .testata-nav { display: none; }
  .menu-telefono { display: block; }
}
@media (max-width: 420px) { .testata-in { gap: 10px; } .marchio { font-size: 1.125rem; } }
/* sotto i 360 px «Scrivici» lascia la testata (resta nell'apertura e in fondo): suono, tema e menu non traboccano */
@media (max-width: 359px) { .testata-in { gap: 6px; } .testata-azioni .bottone--piccolo { display: none; } }
/* sotto i 420 px (con suono e tema in testata) la parola «Menu» resta solo per chi legge con la voce: a vista basta l'icona */
@media (max-width: 420px) { .testata-azioni { gap: 0; } .menu-telefono > summary { justify-content: center; min-width: 44px; padding: 0; font-size: 0; gap: 0; } .testata-azioni .bottone--piccolo { padding: 0 12px; } }

/* il tasto del suono: altoparlante (spento = barrato); la scritta è l'azione, compare al passaggio */
.tasto-suono { position: relative; display: inline-flex; font: inherit; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--t3); cursor: pointer; transition: color var(--passo); }
.tasto-suono:hover { color: var(--testo); }
.tasto-suono-testo { position: absolute; top: calc(100% + 4px); right: 0; padding: 6px 10px; border: 1px solid var(--filetto); border-radius: var(--r-piccolo); background: var(--fondo); color: var(--testo); font-size: 0.875rem; line-height: 1.2; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--passo); }
.tasto-suono:is(:hover, :focus-visible) .tasto-suono-testo { opacity: 1; }
.tasto-suono[hidden] { display: none; }
/* il tasto del tema: mezzo disco (chiaro/scuro); forza il tema per questa visita */
.tasto-tema { display: inline-flex; font: inherit; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--t3); cursor: pointer; transition: color var(--passo); }
.tasto-tema:hover { color: var(--testo); }
.tasto-tema svg { width: 19px; height: 19px; }
.tasto-tema[hidden] { display: none; }
/* Spazio riservato (PageSpeed, CLS = 0): con JS i due tasti nascono [hidden] e il loro script li mostra dopo il primo
   disegno; senza riserva la testata scattava di ~140 px a sinistra (CLS 0,003 su ogni pagina). La classe js la mette
   lo script d'avvio PRIMA del primo disegno; senza JS restano fuori, come prima. */
html.js :is(.tasto-suono, .tasto-tema)[hidden] { display: inline-flex; visibility: hidden; }
/* al computer una parola fissa accanto all'icona dice cos'è; col dito la scritta compare al tocco */
@media (min-width: 1100px) { .tasto-suono { gap: 8px; padding: 0 6px; } .tasto-suono::after { content: "Suono" / ""; font-size: 0.875rem; } }
@media (max-width: 833px) { .tasto-suono:active .tasto-suono-testo { opacity: 1; } }
.tasto-suono-icona { position: relative; display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; width: 22px; height: 14px; }
.tasto-suono-icona::before { content: ""; position: absolute; inset: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'%3E%3Cpath d='M0 4.5h3.2L8 .6v12.8L3.2 9.5H0z'/%3E%3C/svg%3E") left center / 22px 14px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'%3E%3Cpath d='M0 4.5h3.2L8 .6v12.8L3.2 9.5H0z'/%3E%3C/svg%3E") left center / 22px 14px no-repeat; }
.tasto-suono-icona i { display: block; width: 2px; height: 5px; border-radius: var(--pillola); background: currentColor; }
.tasto-suono-icona i:nth-child(2) { height: 11px; }
.tasto-suono-icona i:nth-child(3) { height: 7px; }
.tasto-suono.spento .tasto-suono-icona i { display: none; }
.tasto-suono.spento .tasto-suono-icona::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'%3E%3Cpath d='M0 4.5h3.2L8 .6v12.8L3.2 9.5H0z'/%3E%3Cpath d='M11 4l6 6M17 4l-6 6' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'%3E%3Cpath d='M0 4.5h3.2L8 .6v12.8L3.2 9.5H0z'/%3E%3Cpath d='M11 4l6 6M17 4l-6 6' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.tasto-suono[data-suona] .tasto-suono-icona i { animation: barre 1.2s ease-in-out infinite; }
.tasto-suono[data-suona] .tasto-suono-icona i:nth-child(2) { animation-delay: -.4s; }
.tasto-suono[data-suona] .tasto-suono-icona i:nth-child(3) { animation-delay: -.8s; }
@keyframes barre { 50% { transform: scaleY(.45); } }
@media (forced-colors: active) { .tasto-suono-icona::before, .tasto-suono-icona i { background: ButtonText; } }

/* ── Sezioni: bianche, e chiare (#f5f5f7) alternate ────────────────────────────────────────── */
main, .piede { position: relative; z-index: 1; }
.sezione { padding: var(--spazio) 0; background: var(--fondo); }
.sezione--chiara { background: var(--fondo-2); }
.sezione-testa { max-width: 760px; margin-bottom: 48px; }

/* l'apertura: nelle soluzioni testo a sinistra e a destra la foto-eroe; in home il blocco unico (qui sotto) */
.apertura { padding: var(--spazio) 0; }
.apertura-griglia:has(.eroe-foto) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--gutter); }
/* accanto alla foto la colonna è metà pagina: il titolo resta in 3-4 righe */
.apertura-griglia:has(.eroe-foto) h1 { font-size: clamp(2.5rem, 4.4vw, 3.5rem); }
@media (max-width: 833px) { .apertura-griglia:has(.eroe-foto) { grid-template-columns: 1fr; gap: var(--s4); } }

/* ── L'apertura della home come BLOCCO UNICO (titolare 25/10: «un blocco unico e colorato e ben fatto in 3D, il testo
   deve far parte della rappresentazione 3D»). Un solo rettangolo color petrolio, alto quanto la prima schermata, con
   da bordo a bordo (seconda passata del 25/10: «a schermo intero»; il padding interno riporta il titolo sul filo
   sinistro della griglia). Dentro, sotto la lastra del testo (HTML vero: .eroe-lastra si misura,
   .eroe-lastra-in riceve dalla scena solo opacità e visibilità e scorre con la pagina — titolare 26/10 notte: niente
   trasformazioni dalla camera, facevano tremare il testo), il poster a
   copertura (immagine iniziale e riserva senza WebGL/JS/con moto ridotto) e il canvas (cortex-vivo/viaggio-3d.js). Il
   canvas sta sotto tutta la pagina (seconda passata del 25/10: un mondo solo, petrolio, dall'apertura alla fine delle
   cinque stanze): quando la scena è viva il blocco è trasparente e la scena ci si vede attraverso; nel binario anche
   «Cosa facciamo» lo è. Nessun ritaglio: niente overflow, contain, transform o filter sul blocco. ── */
/* (titolare 25/10, seconda passata: «una cosa tutta unica a livello 3D a schermo intero») il blocco va da bordo a
   bordo sotto la testata e riempie la prima schermata: il contenitore si apre e il padding riporta il titolo sul filo
   sinistro della griglia (a 1440: x 160) */
.apertura--blocco { padding: 0; }
.apertura--blocco .contenitore { max-width: none; padding: 0; }
.eroe-palco { position: relative; display: grid; align-content: center; min-height: max(560px, calc(100svh - 61px));
  padding: var(--s4) max(var(--bordo), calc(50% - var(--largo) / 2));
  background: var(--apertura-fondo); color: var(--apertura-testo); }
.eroe-lastra { position: relative; z-index: 1; max-width: 44%; }
/* (26/10 notte) la scena non trasforma più il testo, ma il livello proprio resta quello di sempre (will-change: transform):
   il testo si disegna come prima (con `opacity` cambiava la levigatura dei caratteri, ~21.700 pixel diversi a riposo) */
html.viaggio-vivo .eroe-lastra-in { will-change: transform; }
.eroe-palco h1 { font-size: clamp(2.625rem, 5vw, 4.25rem); }
.eroe-palco .frase { color: var(--apertura-testo-2); }
.eroe-palco .bottone { border-color: var(--apertura-bottone); background: var(--apertura-bottone); color: var(--apertura-bottone-testo); }
@media (hover: hover) { .eroe-palco .bottone:hover { border-color: var(--apertura-bottone-su); background: var(--apertura-bottone-su); color: var(--apertura-bottone-testo); } }
.eroe-palco .bottone:active { border-color: var(--apertura-bottone-su); background: var(--apertura-bottone-su); color: var(--apertura-bottone-testo); }
.eroe-palco :focus-visible { outline-color: var(--apertura-testo); }
.eroe-palco ::selection { background: var(--apertura-selezione); }
/* poster e canvas stanno sotto la lastra; il poster copre il blocco (object-fit: cover, misure dichiarate: CLS 0) e
   sfuma quando la scena ha disegnato (.occhio-vivo, la mette la scena) */
.eroe-poster, .occhio-tela { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.eroe-poster img { width: 100%; height: 100%; object-fit: cover; transition: opacity .4s ease; }
.occhio-tela { display: block; opacity: 0; transition: opacity .4s ease; }
.occhio-vivo .occhio-tela { opacity: 1; }
.occhio-vivo .eroe-poster img { opacity: 0; }
/* a scena viva (canvas sotto la pagina, già dipinto dello stesso petrolio) il blocco si fa trasparente nello stesso istante */
html.viaggio-vivo .eroe-palco { background: transparent; }
@media (max-width: 1023px) { .eroe-lastra { max-width: 50%; } }
@media (max-width: 833px) {
  /* al telefono il testo sta sopra la piega e la scena sotto: il blocco è più alto dello schermo (si scopre scorrendo) */
  .eroe-palco { align-content: start; min-height: calc(100svh + 180px); padding: 40px var(--bordo); }
  .eroe-lastra { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .eroe-poster img, .occhio-tela { transition: none; } .eroe-lastra-in { transform: none !important; } }
@media (forced-colors: active) { .eroe-palco { border: 1px solid CanvasText; } .eroe-poster, .viaggio-tela, .occhio-tela { display: none; } }

/* ── Le cinque soluzioni (home): riquadri affiancati a tinta propria, poster grande, nessun bordo ─────
   5 in fila da 1100 px; sotto, una fila che scorre di lato con aggancio. Al passaggio il riquadro sale di 4 px e il
   poster ruota appena (≤220 ms). */
.riquadri { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.riquadro { --tinta: var(--tinta-1); display: flex; flex-direction: column; height: 100%; padding-bottom: 24px; border-radius: var(--r); background: var(--tinta); color: var(--testo); transition: transform 220ms var(--molla), box-shadow 220ms ease; }
.riquadri > li:nth-child(2) .riquadro { --tinta: var(--tinta-2); }
.riquadri > li:nth-child(3) .riquadro { --tinta: var(--tinta-3); }
.riquadri > li:nth-child(4) .riquadro { --tinta: var(--tinta-4); }
.riquadri > li:nth-child(5) .riquadro { --tinta: var(--tinta-5); }
.riquadro:hover, .riquadro:focus-visible { color: var(--testo); text-decoration: none; }
/* il sollevamento col mouse e col tabulatore; al tocco no (il riquadro resterebbe sollevato) */
@media (hover: hover) { .riquadro:hover { transform: translateY(-4px); box-shadow: var(--ombra-su); } .riquadro:hover .riquadro-foto img { transform: rotate(-2deg) scale(1.05); } .riquadro:hover .riquadro-vai { text-decoration: underline; text-underline-offset: 3px; } }
.riquadro:focus-visible { transform: translateY(-4px); box-shadow: var(--ombra-su); }
.riquadro:focus-visible .riquadro-foto img { transform: rotate(-2deg) scale(1.05); }
.riquadro:focus-visible .riquadro-vai { text-decoration: underline; text-underline-offset: 3px; }
.riquadro-foto { display: block; aspect-ratio: 4 / 3; margin: 8px 8px 16px; overflow: hidden; border-radius: var(--r-piccolo); background: var(--fondo-2); }
.riquadro-foto img { display: block; width: 100%; height: 100%; object-fit: cover; filter: var(--foto-luce); transition: transform 220ms var(--molla); }
.riquadro-nome { display: block; margin: 0 20px; font-size: 1.1875rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.riquadro-riga { display: block; flex: 1; margin: 8px 20px 0; color: var(--t3); font-size: 0.9375rem; line-height: 1.45; }
.riquadro-vai { display: block; margin: 16px 20px 0; color: var(--accento); font-size: 0.9375rem; font-weight: 500; }
.riquadro-vai > [aria-hidden] { display: inline-block; }   /* la sottolineatura resta sulla parola, non sullo spazio prima della freccia */
/* sotto i 1100 px: tre riquadri sopra e due più larghi sotto, righe sempre piene (con tre colonne restava un buco a destra) */
@media (max-width: 1099px) { .riquadri { grid-template-columns: repeat(6, minmax(0, 1fr)); } .riquadri > li { grid-column: span 2; } .riquadri > li:nth-child(n+4) { grid-column: span 3; } }
/* al telefono: riquadri grandi in fila orizzontale, uno per schermo con l'accenno del successivo (contratto §6) */
@media (max-width: 699px) {
  .riquadri { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(78%, 320px); gap: 12px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--bordo);
    margin-inline: calc(-1 * var(--bordo)); padding: 4px var(--bordo) 16px; scrollbar-width: none; }
  .riquadri::-webkit-scrollbar { display: none; }
  .riquadri > li, .riquadri > li:nth-child(n+4) { grid-column: auto; scroll-snap-align: start; }
  .riquadro-nome { margin-inline: 14px; font-size: 1.0625rem; }
  .riquadro-riga, .riquadro-vai { margin-inline: 14px; }
}

/* ── Il viaggio 3D della home (cortex-vivo/viaggio-3d.js, titolare 24/10): un canvas fisso dietro la pagina, sotto il
   contenuto (main e piede stanno a z-index 1). html.viaggio-vivo = scena accesa; html.viaggio-binario = «Cosa facciamo»
   a passi (da 1024 px): ogni riquadro scorre a sinistra con la pagina mentre a destra si compone la sua stanza. Le due classi le
   mette e le toglie SOLO la scena: senza, la pagina è quella di sempre. ── */
.viaggio-tela { position: fixed; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; pointer-events: none; opacity: 0; }
/* compare nello stesso fotogramma in cui il blocco diventa trasparente: stesso petrolio, nessun lampo (il poster sfuma sopra) */
html.viaggio-vivo .viaggio-tela { opacity: 1; }
/* nel binario «Cosa facciamo» vive nel mondo: fondo via, titolo chiaro */
html.viaggio-vivo.viaggio-binario #soluzioni { background: transparent; color: var(--apertura-testo); }
/* (regia-viaggio.md, regola 7 — titolare 25/10 20:43: «più grandi le scritte e più piccole le foto… più professionale e
   pulito») il TESTO è il soggetto: la colonna prende il 44 % del contenitore come la lastra dell'apertura (493 px a 1440,
   415 a 1024), il nome della soluzione sta a 2,75 rem; la foto, piccola, è a destra (viaggio-3d.js, palco 2,4 × 1,7) */
html.viaggio-binario .riquadri { display: block; width: clamp(400px, 44%, 620px); }
/* (claude/docs/regia-viaggio.md, regola 1) nel binario il riquadro è testo nudo nei colori del mondo: niente fondo, ombra,
   bordo né foto. Sta nel flusso del suo li (alto una finestra), centrato in verticale: a u = k + 0,5 la regia porta il
   centro del li a metà finestra, quindi il riquadro è già dove la camera in sosta lo inquadra. Scorre con la pagina e
   basta: la scena gli scrive solo l'opacità (titolare 26/10 notte: la matrice della camera a ogni fotogramma lo faceva
   tremare); qui niente transizione né sollevamento col mouse */
html.viaggio-binario .riquadri > li { display: grid; align-content: center; height: max(100vh, 640px); }
/* (titolare 26/10 sera) dopo l'ultimo capitolo niente anello e niente vuoto da scorrere. (26/10 notte, titolare: «dovrebbe
   apparire molto prima in sovrapposizione al robot mentre sparisce in dissolvenza») «Chi lavora già con noi» sale SOPRA il
   quinto capitolo: la sezione risale di 23vh + il suo spazio + 24 px, così a u 6 il titolo sta poco sotto la metà dello schermo (55 %;
   prima a 78 px dal fondo), e «Robotica» esce fra u 5,5 e 5,6 (viaggio-3d.js) prima che il titolo arrivi alla sua altezza. È trasparente: il suo fondo è un velo del colore della pagina che parte trasparente 18vh sopra la cima e
   diventa pieno 16 px sopra il titolo (più corto, nel chiaro, era una fascia), e copre il robot mentre sale; velo e contenuto li accende la scena appena si lascia la sosta
   (--coda: 0 a u 5,5, 1 a 5,65), così in sosta il robot resta pulito. La sezione non prende i clic finché non arriva il suo
   contenuto (sopra c'è ancora «Scopri ›» della robotica). Solo a schermo, solo con la scena viva nel binario */
@media screen {
  html.viaggio-binario #soluzioni { padding-bottom: 8vh; }
  html.viaggio-vivo.viaggio-binario #clienti { position: relative; margin-top: calc(-23vh - var(--spazio) - 24px); background: transparent; pointer-events: none; }
  html.viaggio-vivo.viaggio-binario #clienti::before { content: ""; position: absolute; inset: -18vh 0 0; pointer-events: none;
    background: linear-gradient(to bottom, transparent, var(--fondo) calc(18vh + var(--spazio) - 16px)); opacity: var(--coda, 0); }
  html.viaggio-vivo.viaggio-binario #clienti > .contenitore { position: relative; opacity: var(--coda, 0); }
  html.viaggio-vivo.viaggio-binario.coda-accesa #clienti > .contenitore { pointer-events: auto; }
}
html.viaggio-binario .riquadri > li > .riquadro { position: static; display: flex; flex-direction: column; height: auto; padding-bottom: 0; border-radius: 0;
  background: transparent; box-shadow: none; color: var(--apertura-testo); transition: none; }
html.viaggio-binario .riquadro:hover, html.viaggio-binario .riquadro:focus-visible { transform: none; box-shadow: none; color: var(--apertura-testo); }
html.viaggio-binario .riquadro:focus-visible { outline-color: var(--apertura-testo); }
html.viaggio-vivo.viaggio-binario .riquadro { will-change: transform; }   /* come il testo dell'apertura: stesso disegno dei caratteri di prima */
html.viaggio-binario .riquadro-foto { display: none; }
html.viaggio-binario .riquadro-nome, html.viaggio-binario .riquadro-riga, html.viaggio-binario .riquadro-vai { margin-inline: 0; }
html.viaggio-binario .riquadro-riga { color: var(--apertura-testo-2); }
/* «Scopri ›» nei due temi nella luce ciano del mondo (revisione del 26/10: nel chiaro era bianco come la battuta accesa e
   non si riconosceva come link), schiarita di un quinto col testo: pura misura 4,5:1 sul fondo del tema chiaro, così 5,6:1
   (scuro 8,8:1); sottolineato al passaggio e col fuoco (le regole del riquadro qui sopra valgono anche nel binario). Sul
   filo sinistro come tutto il resto (griglia.md): l'«align-self: end» della scheda a griglia (effetti.css, subgrid) lì vuol
   dire «in fondo», ma nel binario il riquadro è una colonna flex e lo stesso «end» spingeva «Scopri ›» a destra (25/10) */
html.viaggio-binario .riquadro-vai { align-self: start; color: color-mix(in srgb, var(--apertura-luce) 80%, var(--apertura-testo)); }
/* (25/10) le tre battute di ogni stanza — una per battito del capitolo (entra · resta · esce), frasi vere della pagina della
   soluzione che la riga NON dice già (26/10: erano le parole delle tendine e ripetevano la riga), una idea per battuta;
   aria-hidden, e descrizione del link (aria-describedby) — stanno nel riquadro e vivono solo nel binario: la scena accende quella del momento
   (data-passo sul li, lo scrive la regia); le altre restano spente ma leggibili: a .68 stanno a 5,4-5,8:1 sul fondo della
   colonna nei due temi (revisione del 26/10: a .4 misuravano 2,8:1) */
.riquadro-passi { display: none; }
html.viaggio-binario .riquadro-passi { display: grid; gap: var(--s1); margin: var(--s3) 0 0; padding-top: var(--s2); border-top: 1px solid var(--apertura-selezione); }
html.viaggio-binario .riquadro-passo { color: var(--apertura-testo-2); font-size: 0.9375rem; line-height: 1.4; opacity: .68; transition: opacity .35s ease, color .35s ease; }
html.viaggio-binario .riquadri > li[data-passo="0"] .riquadro-passo:nth-child(1),
html.viaggio-binario .riquadri > li[data-passo="1"] .riquadro-passo:nth-child(2),
html.viaggio-binario .riquadri > li[data-passo="2"] .riquadro-passo:nth-child(3) { opacity: 1; color: var(--apertura-testo); font-weight: 500; }
/* la scala del capitolo (regola 7): nome 2,75 rem SemiBold stretto, riga 1,25, battute 1,0625, «Scopri ›» 1 rem; le distanze
   dalla scala della griglia (8 · 16 · 24); l'icona della soluzione sopra il nome, piccola, nella luce del mondo. Solo a
   schermo: stampata, la scheda resta alla misura di sempre. Sta DOPO le regole delle battute: a pari specificità vince
   l'ultima, e le battute tornavano a 0,9375 rem (misurato 25/10) */
@media screen {
  html.viaggio-binario .riquadro-nome { font-size: 2.75rem; line-height: 1.1; letter-spacing: -.02em; }
  html.viaggio-binario .riquadro-nome .icona-sol { display: block; width: 32px; height: 32px; margin: 0 0 var(--s2); color: var(--apertura-luce); }
  html.viaggio-binario .riquadro-riga { margin-top: var(--s2); font-size: 1.25rem; line-height: 1.45; }
  html.viaggio-binario .riquadro-vai { margin-top: var(--s3); font-size: 1rem; }
  html.viaggio-binario .riquadro-passo { font-size: 1.0625rem; }
}

/* la riga sotto ogni soluzione nell'elenco della 404 */
.categoria-riga { color: var(--testo-2); font-size: 1.0625rem; }

/* ── Elenco di una soluzione: «Cosa facciamo», una riga per voce ───────────────────────────── */
.voci { border-top: 1px solid var(--filetto); }
.voci > li { padding: 24px 0; border-bottom: 1px solid var(--filetto); font-size: 1.1875rem; line-height: 1.45; }
.voci h3 + .riga { margin-top: 8px; }
@media (max-width: 833px) { .voci > li { padding: 16px 0; font-size: 1.0625rem; } .sezione-testa { margin-bottom: 32px; } }

/* ── Domande frequenti: <details> dentro .voci; riga intera cliccabile ≥ 44 px, segno +/− al posto del triangolo ── */
.voci > li:has(> details) { padding: 8px 0; }
.voci details > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 44px; padding: 8px 0;
  color: var(--testo); font-weight: 500; line-height: 1.4; cursor: pointer; list-style: none; }
.voci details > summary::-webkit-details-marker { display: none; }
.voci details > summary::after { content: ""; flex: none; width: 14px; height: 14px; margin-right: 2px; opacity: .7;
  background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat; }
.voci details[open] > summary::after { background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat; }
@media (hover: hover) { .voci details > summary:hover { color: var(--accento); } }
.voci details > summary:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; border-radius: var(--r-piccolo); }
.voci details > .riga { max-width: 36em; margin: 8px 0 16px; }
@media (forced-colors: active) { .voci details > summary::after { background: none; border-top: 1.5px solid; height: 0; } }

/* ── I tre passi ───────────────────────────────────────────────────────────────────────────── */
.passi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--blocco); }
/* quattro passi: in fila da 1100 px, due per riga sotto (mai 3+1) */
.passi:has(> li:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 1099px) { .passi:has(> li:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.passi > li { padding-top: 24px; border-top: 1px solid var(--filetto); }
.passi p { margin-top: 8px; color: var(--testo-2); }
@media (max-width: 833px) { .passi, .passi:has(> li:nth-child(4)) { grid-template-columns: 1fr; gap: 24px; } }

/* ── Chi lavora già con noi: frase, prova, e per ogni sito le misure pubbliche ───────────────────── */
.prove { margin-top: 32px; border-top: 1px solid var(--filetto); }
.prova { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s4); padding: 16px 0; border-bottom: 1px solid var(--filetto); }
.prova a { display: inline-flex; align-items: center; min-height: 44px; font-size: 1.0625rem; }
.prova .prova-sito { flex: 0 0 10em; color: var(--testo); font-size: clamp(1.1875rem, 1.9vw, 1.375rem); letter-spacing: -.01em; }
@media (max-width: 833px) { .prova .prova-sito { flex-basis: 100%; } }   /* al telefono: il dominio sopra, i due link affiancati sotto */
/* in mezza colonna (home) dominio + due link non stanno in una riga: il secondo andava a capo da solo e la riga era storta */
.alterna-testo .prova .prova-sito { flex-basis: 100%; }
.prova a::after { content: "›"; content: "›" / ""; margin-left: 6px; color: var(--accento); }
.prova-voto { font-weight: 600; }
.prove-nota { max-width: 40em; margin-top: 16px; color: var(--testo-2); font-size: 0.9375rem; }
.prove-tit, .alterna-testo > .prove-tit { margin-top: var(--blocco); font-size: clamp(1.1875rem, 1.9vw, 1.375rem); font-weight: 600; letter-spacing: -.01em; }
.prove-tit + .riga { margin-top: 8px; }
.prove-tit + .riga + .prove { margin-top: 24px; }
/* i loghi dei clienti: una fila sobria di tessere uguali, sempre chiare (i marchi sono pensati per il fondo chiaro) */
.clienti-loghi { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; padding: 0; list-style: none; }
.clienti-loghi li { margin: 0; }
.cliente { display: flex; align-items: center; justify-content: center; width: 156px; height: 72px; padding: 12px 16px; border: 1px solid var(--filetto);
  border-radius: var(--r); background: #ffffff; transition: border-color var(--passo), transform var(--passo); }
.cliente img { display: block; width: auto; height: auto; max-width: 100%; max-height: 44px; }
.cliente:hover { border-color: var(--accento); }
.cliente:focus-visible { outline: 2px solid var(--accento); outline-offset: 3px; }
:root[data-tema="scuro"] .cliente { background: #f4efe6; border-color: transparent; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="chiaro"]) .cliente { background: #f4efe6; border-color: transparent; } }
@media (max-width: 560px) { .clienti-loghi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .cliente { width: auto; height: 64px; padding: 10px 12px; } .cliente img { max-height: 36px; } }

/* ── Contatto: testo a sinistra, modulo a destra ───────────────────────────────────────────── */
/* contatto: 6 | 6 come le altre righe, le due colonne finiscono alla stessa riga. La scheda del modulo si allunga fino in
   fondo (la nota «rassicura» scende in fondo alla scheda); la foto di contatto, se c'è, riempie ciò che resta sotto il testo */
.contatto-griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--gutter); align-items: stretch; }
.contatto-griglia > .scheda-modulo { display: flex; flex-direction: column; }
.contatto-griglia > .scheda-modulo > form { display: flex; flex: 1; flex-direction: column; }
.contatto-griglia .rassicura { margin-top: auto; padding-top: var(--s2); }
@media (max-width: 900px) { .contatto-griglia { grid-template-columns: 1fr; } .contatto-griglia > .scheda-modulo { margin-top: var(--s4); } }
.informativa { margin-top: 24px; color: var(--testo-2); font-size: 0.9375rem; line-height: 1.55; }
/* informativa privacy in finestra (modale-privacy.js) */
.modale { width: min(720px, calc(100vw - 32px)); max-height: min(80vh, 820px); max-height: min(80svh, 820px); padding: 0; border: 1px solid var(--filetto);
  border-radius: var(--r); background: var(--fondo); color: var(--testo); box-shadow: var(--ombra-su, 0 24px 48px -24px rgba(0,0,0,.35)); }
.modale::backdrop { background: rgba(11, 21, 32, .45); }
.modale-testa { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px; background: var(--fondo); border-bottom: 1px solid var(--filetto); }
.modale-titolo { margin: 0; font-weight: 600; font-size: 1.0625rem; }
.modale-chiudi { min-width: 44px; min-height: 44px; border: 0; border-radius: var(--pillola); background: var(--fondo-2); color: var(--testo); font: inherit; font-size: 1.125rem; cursor: pointer; }
.modale-corpo { padding: 8px 20px 4px; font-size: 1rem; line-height: 1.6; }
.modale-corpo h2 { font-size: 1.375rem; } .modale-corpo h3 { margin: 22px 0 6px; font-size: 1.0625rem; }
.modale-corpo p { margin: 0 0 10px; } .modale-corpo ul { margin: 6px 0 12px; }
.modale-piede { margin: 0; padding: 12px 20px 20px; font-size: 0.9375rem; }

.scheda-modulo { padding: var(--scheda-pad); border: 1px solid var(--filetto); border-radius: var(--r); background: var(--fondo); }
.campi-due { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
@media (max-width: 560px) { .campi-due { grid-template-columns: 1fr; } }
.campo { margin-bottom: 24px; }
.campo label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 0.9375rem; font-weight: 600; }
.facolt, .contatore-car { color: var(--testo-2); font-weight: 400; }
.contatore-car { font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.contatore-car.vicino { color: var(--errore); }
.campo input:not([type="checkbox"]), .campo textarea { display: block; width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--campo-bordo); border-radius: var(--r-piccolo); background: var(--fondo); color: var(--testo); font: 400 1.0625rem/1.4 var(--f); transition: border-color var(--passo); }
.campo textarea { min-height: 140px; resize: vertical; }
.campo input:hover, .campo textarea:hover { border-color: var(--testo-2); }
.campo input:focus-visible, .campo textarea:focus-visible { outline: 2px solid var(--accento); outline-offset: 0; border-color: var(--accento); border-radius: var(--r-piccolo); }
.campo ::placeholder { color: var(--segnaposto); }
.nota-campo { margin-top: 8px; color: var(--testo-2); font-size: 0.875rem; }
.errore-testo { color: var(--errore); font-size: 0.875rem; }
.errore-testo:not(:empty) { margin-top: 8px; }
.campo.errore input, .campo.errore textarea { border-color: var(--errore); }
.consenso { display: flex !important; justify-content: flex-start !important; align-items: flex-start; gap: 12px; font-weight: 400 !important; cursor: pointer; }
/* la casella: 22 px a vista, 44 px da toccare */
.consenso input { flex: none; position: relative; width: 44px; height: 44px; margin: -11px -1px -11px -11px; appearance: none; -webkit-appearance: none; background: none; cursor: pointer; }
.consenso input::before { content: ""; position: absolute; inset: 11px; border: 1px solid var(--campo-bordo); border-radius: var(--r-piccolo); background: var(--fondo); transition: background-color var(--passo), border-color var(--passo); }
.consenso input:checked::before { border-color: var(--accento); background: var(--accento); }
.consenso input:checked::after { content: ""; position: absolute; left: 19px; top: 15px; width: 6px; height: 11px; border: solid var(--accento-testo); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.consenso input:focus-visible { outline: none; }
.consenso input:focus-visible::before { outline: 2px solid var(--accento); outline-offset: 2px; }
.campo.errore .consenso input::before { border-color: var(--errore); }
/* caselle con un link dentro (diagnosi: informativa privacy, CORTEX AI): il link apre la finestra, non spunta la casella */
.campo--consenso { margin-bottom: 12px; }
.consenso a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.consenso a:hover { text-decoration-color: currentColor; }
.nota-consensi { margin: 4px 0 20px; }
.trappola { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.trappola input { height: 44px; }
.invio { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 8px; }
.esito { color: var(--t3); font-size: 0.9375rem; }
.esito.no { color: var(--errore); }
.rassicura { margin-top: 16px; color: var(--testo-2); font-size: 0.875rem; }
.grazie h3 { margin: 8px 0 16px; font-size: 1.625rem; }
.grazie .occhiello { margin: 0; }

/* ── Piede: colonne, filetto, riga finale ──────────────────────────────────────────────────── */
.piede { padding: 48px 0 calc(32px + env(safe-area-inset-bottom, 0px)); background: var(--fondo-2); border-top: 1px solid var(--filetto); color: var(--testo-2); font-size: 0.875rem; line-height: 1.5; }
/* piede sulla griglia: 6 | 3 | 3 (Soluzioni sulla stessa linea della colonna destra delle righe sopra) */
.piede-colonne { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px var(--gutter); padding-bottom: 32px; }
.piede-colonne > :first-child { grid-column: span 6; } .piede-colonne > * { grid-column: span 3; }
.piede-tit { margin-bottom: 16px; color: var(--testo); font-size: 0.875rem; font-weight: 600; letter-spacing: 0; }
.piede-col p + p { margin-top: 8px; }
.piede-col p { max-width: 36em; }
/* passo di 28 px come nel piede di riferimento; col dito ogni link torna alto 44 px */
.piede-col a { color: var(--t3); }
.piede-col li + li { margin-top: 7px; }
@media (pointer: coarse), (max-width: 833px) { .piede-col a { display: inline-flex; align-items: center; min-height: 44px; } .piede-col li + li { margin-top: 0; } .piede-col ul { margin-top: -8px; } }
.piede-col a:hover { color: var(--testo); }
/* Partner ufficiali (§15): una riga sobria sopra la riga finale, elenco pronto per altri loghi (un <li> per partner,
   due immagini: per fondo chiaro e per fondo scuro). Backlink voluti: niente nofollow. */
.piede-partner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding-bottom: 8px; }   /* i loghi stanno in righe da 44 px: 8 + 24 sopra il marchio fanno 48 fra i testi */
.piede-partner .piede-tit { margin: 0; }
.partner-elenco { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 32px; }
.partner { display: inline-flex; align-items: center; min-height: 44px; opacity: .85; transition: opacity var(--passo); }
.partner:hover, .partner:focus-visible { opacity: 1; }
.partner-logo { width: auto; height: 26px; }
.partner-logo--scuro { display: none; }
:root[data-tema="scuro"] .partner-logo--chiaro { display: none; }
:root[data-tema="scuro"] .partner-logo--scuro { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) .partner-logo--chiaro { display: none; }
  :root:not([data-tema="chiaro"]) .partner-logo--scuro { display: block; }
}
.piede-fondo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 32px; padding-top: 24px; border-top: 1px solid var(--filetto); }
.piede-marchio { display: inline-flex; align-items: center; min-height: 44px; color: var(--testo); font-size: 1.0625rem; }
/* i contatti diretti come tre icone (titolare 24/10): email, WhatsApp, Instagram; bersagli da 44 px, colore del testo,
   l'accento al passaggio. Il nome lo porta il testo per i lettori di schermo dentro il link. */
.piede-col .piede-icone { display: flex; gap: 4px; margin: 8px 0 0 -12px; }
.piede-col .piede-icone li + li { margin-top: 0; }
.piede-col .piede-icona { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; color: var(--t3); transition: color var(--passo); }
.piede-col .piede-icona:hover { color: var(--accento); text-decoration: none; }
.piede-icona svg { width: 22px; height: 22px; }
/* la barra in fondo sta sul filo sinistro: il marchio, poi il testo legale; sotto i 1180 px il testo legale va sotto il marchio */
@media (max-width: 1179px) { .piede-fondo { flex-direction: column; align-items: flex-start; gap: 8px; } }
@media (min-width: 1180px) { .piede-legale { white-space: nowrap; } }   /* titolare 19/10: le voci legali su una riga (sono tre: da 1180 px) */
@media (max-width: 833px) {
  .piede-colonne > :first-child { grid-column: 1 / -1; }
  .piede-colonne > * { grid-column: span 4; }   /* due colonne da 4/12 accostate a sinistra: niente mezza pagina vuota fra i link */
}
@media (max-width: 480px) { .piede-colonne { grid-template-columns: 1fr; } .piede-colonne > * { grid-column: auto; } }   /* al telefono Soluzioni e Contatti uno sotto l'altro: righe proprie, niente buchi */

/* ── Foto realistiche (19/10, §13): sezioni alternate foto/testo come Sicurea, e la foto-eroe delle soluzioni ──
   .alterna = una riga a due colonne (foto a sinistra, testo a destra); .alterna--inversa = foto a destra.
   Più .alterna di fila nella stessa sezione si distanziano da sole. Al telefono (≤833 px) una colonna, la foto SEMPRE
   sopra il testo. La foto è 4:3, angoli 18 px, ombra morbida; in scuro un filo chiaro e un'ombra profonda la staccano. */
/* 6 | 6 sulla griglia, allineate IN ALTO: la foto si stira all'altezza del testo (ritaglio cover), con un minimo 2:1;
   così il filetto delle voci cade sul bordo alto della foto e le due colonne finiscono alla stessa riga */
.alterna { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--gutter); }
.alterna + .alterna { margin-top: var(--blocco-2); }
.alterna--inversa > .alterna-foto { order: 2; }
.alterna-foto { position: relative; overflow: hidden; border-radius: var(--r); background: var(--fondo-2); box-shadow: var(--ombra-foto); }
.alterna > .alterna-foto { align-self: stretch; }
.alterna-foto::before { content: ""; display: block; padding-top: 50%; }
.alterna-foto picture { position: absolute; inset: 0; }
.alterna-foto picture, .alterna-foto img { display: block; width: 100%; height: 100%; }
.alterna-foto img { object-fit: cover; filter: var(--foto-luce); }
/* quando il soggetto non sta al centro, il ritaglio lo segue (27/10). «Chi lavora già con noi»: tecnica e tablet a sinistra
   (da 834 px la foto è più alta che larga); «Come si lavora»: le teste vicine al bordo alto (a 1440 la foto è 16:9) */
.alterna-foto--soggetto-sx img { object-position: 30% 50%; }
.alterna-foto--soggetto-alto img { object-position: 50% 12%; }
/* foto in differita: finché non arriva si vede il fondo color tinta, non il testo alternativo */
picture img { color: transparent; background-color: var(--fondo-2); }
.alterna-testo > h2, .alterna-testo > h3 { max-width: 18em; }
.alterna-testo > p:not([class]) { max-width: 34em; margin-top: 16px; color: var(--t3); }
/* dentro una colonna: i passi uno sotto l'altro */
.alterna-testo .passi, .alterna-testo .passi:has(> li:nth-child(4)) { grid-template-columns: 1fr; gap: 24px; margin-top: 32px; }
/* il primo elemento di una colonna parte dal filo alto (sul bordo della foto accanto), qualunque sia il suo margine */
:is(.alterna-testo, .contatto-testo, .sezione-testa, .scheda-modulo > form) > :first-child { margin-top: 0; }
/* home, «Scrivici»: la foto chiude la colonna di sinistra accanto al modulo; al telefono va sopra il titolo */
.contatto-testo { display: flex; flex-direction: column; }
.contatto-foto { order: 2; flex: 1 0 160px; margin-top: var(--blocco); }
.contatto-foto::before { display: none; }
@media (max-width: 900px) { .contatto-foto { order: -1; flex: none; margin: 0 0 var(--s4); } .contatto-foto::before { display: block; } }
@media (max-width: 833px) {
  .alterna { grid-template-columns: 1fr; gap: var(--s3); }
  .alterna--inversa > .alterna-foto { order: 0; }
  .alterna + .alterna { margin-top: var(--blocco); }
  .alterna-foto::before { padding-top: 75%; }
}
/* tablet in verticale: a colonna intera una foto 4:3 riempiva quasi uno schermo; 3:2 la tiene proporzionata */
@media (min-width: 560px) and (max-width: 833px) { .alterna-foto::before { padding-top: 66.667%; } }
/* la foto-eroe in apertura di una soluzione: al posto del palco 3D, stessa colonna; 4:3 a computer, 16:9 al telefono.
   Si carica subito (niente lazy, fetchpriority="high"): è il primo schermo. */
.eroe-foto { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r); background: var(--fondo-2); box-shadow: var(--ombra-foto); }
@media (min-width: 834px) { .eroe-foto { align-self: stretch; aspect-ratio: auto; } .eroe-foto::before { content: ""; display: block; padding-top: 75%; } .eroe-foto picture { position: absolute; inset: 0; } }
.eroe-foto picture, .eroe-foto img { display: block; width: 100%; height: 100%; }
.eroe-foto img { object-fit: cover; filter: var(--foto-luce); }
@media (max-width: 833px) { .eroe-foto { aspect-ratio: 16 / 9; border-radius: var(--r); } }
@media (forced-colors: active) { .alterna-foto, .eroe-foto { border: 1px solid CanvasText; } }
/* Foto in AVIF con la webp di riserva (<picture>): nel riquadro la cornice resta quella di prima. */
.riquadro-foto picture { display: block; width: 100%; height: 100%; }
/* Icone delle 5 soluzioni (SVG in linea, tratto 1,6): colore d'accento del tema; misura dagli attributi, niente salti. */
.icona-sol { display: inline-block; width: 1.1em; height: 1.1em; margin-right: .42em; vertical-align: -.17em; color: var(--accento); }
.occhiello .icona-sol { width: 1.3em; height: 1.3em; vertical-align: -.3em; }
@media (forced-colors: active) { .icona-sol { color: CanvasText; } }

/* ── Pagina 404: accanto al titolo l'obiettivo che «cerca» la pagina (assets/errore/cerca.js); griglia 6 | 6 e palco 3:2
   col poster del tema, come l'apertura della home prima del 25/10 (la home ha ora il blocco unico: regole separate) ── */
.apertura-griglia:has(.errore-palco) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--gutter); }
.apertura-griglia:has(.errore-palco) h1 { font-size: clamp(2.5rem, 4.4vw, 3.5rem); }
@media (max-width: 833px) { .apertura-griglia:has(.errore-palco) { grid-template-columns: 1fr; gap: var(--s4); } }
.errore-palco { position: relative; aspect-ratio: 3 / 2; width: 100%; pointer-events: none; }
@media (min-width: 834px) { .errore-palco { align-self: stretch; aspect-ratio: auto; } .errore-palco::before { content: ""; display: block; padding-top: 66.667%; } }
.errore-palco .eroe-poster { object-fit: contain; transition: opacity .4s ease; }
.errore-palco.occhio-vivo .eroe-poster { opacity: 0; }
.errore-palco .eroe-poster--scuro { display: none; }
:root[data-tema="scuro"] .errore-palco .eroe-poster--scuro { display: block; }
:root[data-tema="scuro"] .errore-palco .eroe-poster--chiaro { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) .errore-palco .eroe-poster--scuro { display: block; }
  :root:not([data-tema="chiaro"]) .errore-palco .eroe-poster--chiaro { display: none; }
}

/* ── Moto ridotto: niente transizioni ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  /* la testata che si nasconde: con moto ridotto solo dissolvenza, senza spostamento */
  .testata { transition: opacity .2s ease !important; }
  html.testata-via .testata { transform: none; }
  .riquadro:hover, .riquadro:focus-visible, .riquadro:hover .riquadro-foto img, .riquadro:focus-visible .riquadro-foto img { transform: none; }
}

/* ── Pagina legale e privacy: testo a colonna leggibile, link sottolineati nel testo ── */
.legale > * { max-width: 36em; }
.legale h2 { margin-bottom: 24px; }
.legale h3 { margin-top: 48px; }
.legale p, .legale-elenco { margin-top: 16px; color: var(--t3); }
.legale .legale-attacco { margin-top: 0; color: var(--testo); font-size: 1.1875rem; line-height: 1.5; }
.legale b, .legale strong { color: var(--testo); font-weight: 600; }
.legale p a, .legale-elenco a { text-decoration: underline; text-underline-offset: 3px; }
.legale-elenco > li { position: relative; padding-left: 20px; }
.legale-elenco > li + li { margin-top: 8px; }
.legale-elenco > li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--accento); }
.legale .legale-data { margin-top: 48px; color: var(--testo-2); font-size: 0.9375rem; }
.piede-legale a { color: var(--t3); }
.piede-legale a:hover { color: var(--testo); }
/* Link dentro una frase (PageSpeed, accessibilità «i link non si distinguono solo dal colore»): il colore da solo
   non bastava (informativa 1,06:1 sul testo, righe 1,87:1, piede 1,97:1, serve 3:1). Sottolineatura sottile, a metà
   tono, come nella pagina legale; piena al passaggio. */
:is(.riga, .informativa, .piede-legale) a:is(:not([class]), .vai) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
:is(.riga, .informativa, .piede-legale) a:is(:not([class]), .vai):hover { text-decoration-color: currentColor; }
@media (pointer: coarse), (max-width: 833px) { .piede-legale a { display: inline-flex; align-items: center; min-height: 44px; } }
/* finché le voci legali non stanno su una riga (1180 px) vanno una per riga: niente «·» appeso a fine riga */
@media (max-width: 1179px) { .piede-sep { display: none; } .piede-legale a { display: flex; align-items: center; width: max-content; min-height: 44px; } .piede-legale a ~ a { margin-top: 4px; } }
@media (forced-colors: active) { .legale-elenco > li::before { background: CanvasText; } }

/* ── Al telefono nessun testo del corpo sotto i 16 px (a computer note ed etichette restano a 14-15).
   In fondo al foglio: vince sulle regole delle singole sezioni ── */
@media (max-width: 833px) {
  .occhiello, .riquadro-riga, .riquadro-vai, .prove-nota, .informativa, .rassicura, .nota-campo, .esito, .errore-testo,
  .campo label, .contatore-car, .legale .legale-data, .grazie .occhiello { font-size: 1rem; }
}
/* col mouse il piede tiene il suo passo di 28 px (titolare 19/10): l'area di clic dei link cresce a 28 px senza spostare
   nulla (padding su un elemento in linea); col dito resta la regola dei 44 px qui sopra */
@media (hover: hover) and (pointer: fine) and (min-width: 834px) { .piede-col a, .piede-legale a { padding-block: 5px; } .piede-col ul { margin-top: 4px; } }   /* +4: titolo→primo link resta 16 */

/* ── WhatsApp (titolare 20/10: come su Sicurea, nello stile del sito). Un tondo fisso in basso a destra: non sposta
   nulla (CLS 0), resta anche quando la testata si nasconde. A computer al passaggio si allarga con la scritta e il
   clic apre una piccola chat (whatsapp.js); al telefono è più piccolo e più discreto, e va dritto all'app.
   Si toglie di mezzo finché c'è il banner dei cookie o la finestra dell'informativa. Il verde è quello di
   WhatsApp scurito quanto basta per il 3:1 sul fondo chiaro. ── */
.wa { --wa-verde: #128c4a; position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 25;
  display: inline-flex; align-items: center; gap: 0; height: 52px; min-width: 52px; padding: 0 13px; border: 1px solid var(--filetto);
  border-radius: var(--pillola); background: var(--fondo); color: var(--testo); font: 500 0.9375rem/1 var(--f);
  box-shadow: 0 10px 28px -16px rgba(20, 30, 45, .45); text-decoration: none;
  transition: gap .25s ease, border-color var(--passo), opacity .2s ease, visibility .2s; }
:root[data-tema="scuro"] .wa { --wa-verde: #25d366; background: var(--fondo-2); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="chiaro"]) .wa { --wa-verde: #25d366; background: var(--fondo-2); } }
.wa svg { flex: none; width: 24px; height: 24px; color: var(--wa-verde); }
.wa-testo { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .25s ease; }
.wa:hover, .wa:focus-visible, .wa[aria-expanded="true"] { gap: 10px; border-color: var(--wa-verde); color: var(--testo); text-decoration: none; }
.wa:hover .wa-testo, .wa:focus-visible .wa-testo, .wa[aria-expanded="true"] .wa-testo { max-width: 12rem; }
.wa:focus-visible { outline: 2px solid var(--accento); outline-offset: 3px; }
/* fuori di mezzo: banner dei cookie, finestra dell'informativa (dialog modale) */
body:has(> .cookie:not([hidden])) .wa,
body:has(dialog[open]) .wa, body:has(> .cookie:not([hidden])) .wa-chat { opacity: 0; visibility: hidden; pointer-events: none; }
/* al telefono: più piccolo, solo il simbolo, un po' trasparente finché non lo tocchi */
@media (max-width: 833px), (pointer: coarse) {
  .wa { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); height: 48px; min-width: 48px; padding: 0 11px; opacity: .88; }
  .wa:is(:hover, :focus-visible, [aria-expanded="true"]) { gap: 0; }
  .wa:is(:hover, :focus-visible) .wa-testo, .wa .wa-testo { max-width: 0; }   /* nascosta alla vista, non al lettore di schermo */
  .wa:active, .wa:focus-visible { opacity: 1; }
  body:has(.menu-telefono[open]) .wa { opacity: 0; visibility: hidden; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) { .wa, .wa-testo, .wa-chat { transition: none; } }
@media (forced-colors: active) { .wa { border-color: ButtonText; } .wa svg { color: ButtonText; } }
/* ── «Dal nostro Instagram» in home (20/10): post e reel scaricati dal nostro server (/instagram/), finestra nostra.
   Griglia 3 colonne (2 sotto gli 834 px), caselle 4:5 come la griglia di Instagram, già misurate nell'HTML (CLS 0). ── */
.ig-griglia { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s2); }   /* al massimo 6, UNA riga (titolare 20/10) */
.ig-griglia > li { aspect-ratio: 4 / 5; }
.ig-griglia > li:nth-child(n+7) { display: none; }
.ig-attesa { border-radius: var(--r); background: var(--fondo); box-shadow: inset 0 0 0 1px var(--filetto); }
.ig--vuoto .ig-griglia, html.nojs .ig-griglia { display: none; }
.ig-segui { margin-top: var(--s4); }
.ig-post { position: relative; display: block; width: 100%; height: 100%; padding: 0; overflow: hidden; border: 0; border-radius: var(--r);
  background: var(--fondo); box-shadow: var(--ombra-foto); color: #fff; font: inherit; text-align: left; cursor: pointer; }
.ig-post img { display: block; width: 100%; height: 100%; object-fit: cover; filter: var(--foto-luce); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.ig-segno { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: rgba(8, 14, 22, .42); }   /* leggibile anche sui reel chiari */
.ig-segno svg { width: 100%; height: 100%; }
.ig-velo { position: absolute; inset: auto 0 0 0; padding: 32px 12px 10px; background: linear-gradient(to top, rgba(8, 14, 22, .78), rgba(8, 14, 22, 0));
  opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }
.ig-velo-testo { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.8125rem; line-height: 1.4; }
@media (hover: hover) {
  .ig-post:hover img { transform: scale(1.04); }
  .ig-post:hover .ig-velo, .ig-post:focus-visible .ig-velo { opacity: 1; transform: none; }
}
.ig-post:focus-visible { outline: 2px solid var(--accento); outline-offset: 3px; }
/* tablet e telefono: la stessa riga scorre di lato (scatti per casella), mai una seconda riga */
@media (max-width: 1099px) {
  .ig-griglia { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * var(--s2)) / 4);
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
  .ig-griglia::-webkit-scrollbar { display: none; }
  .ig-griglia > li { scroll-snap-align: start; }
}
@media (max-width: 559px) { .ig-griglia { grid-auto-columns: 42%; } }

/* la finestra: il media a sinistra (reel 9:16 a tutta altezza), il testo a destra; al telefono uno sotto l'altro */
.ig-finestra { --ig-h: min(86vh, 860px); --ig-h: min(86svh, 860px); width: fit-content; max-width: calc(100vw - 48px); height: var(--ig-h); max-height: none; padding: 0;
  overflow: hidden; border: 1px solid var(--filetto); border-radius: var(--r); background: var(--fondo); color: var(--testo);
  display: grid; grid-template-columns: max-content 340px; }
.ig-finestra:not([open]) { display: none; }
.ig-finestra::backdrop { background: rgba(11, 21, 32, .72); }
.ig-fin-media { position: relative; display: flex; align-items: center; justify-content: center; width: min(calc(var(--ig-h) * 4 / 5), calc(100vw - 48px - 340px)); min-height: 0; background: #0b1520; }
.ig-fin-media--video { width: min(calc(var(--ig-h) * 9 / 16), calc(100vw - 48px - 340px)); }   /* la finestra prende la forma del reel: niente bande nere ai lati */
.ig-fin-video, .ig-fin-foto { display: block; width: 100%; height: 100%; object-fit: contain; background: #0b1520; }
.ig-fin-fuori { position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%); display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
  border-radius: var(--pillola); background: var(--accento); color: var(--accento-testo); font-weight: 500; white-space: nowrap; }
.ig-fin-fuori:hover { color: var(--accento-testo); text-decoration: none; background: var(--accento-forte); }
.ig-fin-pezzo { position: absolute; top: 50%; width: 40px; height: 40px; margin-top: -20px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .88);
  color: #1d1d1f; font: 400 1.5rem/1 var(--f); cursor: pointer; }
.ig-fin-pezzo--prec { left: 12px; } .ig-fin-pezzo--succ { right: 12px; }
.ig-fin-pezzo:disabled { opacity: 0; pointer-events: none; }
.ig-fin-pallini { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.ig-fin-media--video .ig-fin-pallini { bottom: 64px; }
.ig-fin-pallini span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .5); }
.ig-fin-pallini span.attivo { background: #fff; }
.ig-fin-testo { display: flex; flex-direction: column; min-height: 0; padding: 64px 28px 24px; overflow-y: auto; border-left: 1px solid var(--filetto); }
.ig-fin-data { color: var(--testo-2); font-size: 0.875rem; }
.ig-fin-didascalia { margin-top: var(--s2); white-space: pre-line; overflow-wrap: anywhere; font-size: 1rem; line-height: 1.6; }
.ig-fin-azioni { margin-top: auto; padding-top: var(--s3); }
.ig-fin-chiudi, .ig-fin-passa { position: absolute; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  padding: 0; border: 0; border-radius: 50%; background: var(--fondo-2); color: var(--testo); cursor: pointer; }
.ig-fin-chiudi svg, .ig-fin-passa svg { width: 20px; height: 20px; }
.ig-fin-chiudi { top: 12px; right: 12px; }
.ig-fin-passa { top: 12px; } .ig-fin-passa--prec { right: 116px; } .ig-fin-passa--succ { right: 64px; }
.ig-fin-passa[hidden] { display: none; }
@media (max-width: 833px) {
  .ig-finestra { width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; border: 0; border-radius: 0; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .ig-fin-media, .ig-fin-media--video { width: 100%; }
  .ig-fin-testo { max-height: 34dvh; padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px)); border-left: 0; border-top: 1px solid var(--filetto); }
  .ig-fin-chiudi { top: calc(10px + env(safe-area-inset-top, 0px)); right: 10px; }
  .ig-fin-passa { top: calc(10px + env(safe-area-inset-top, 0px)); } .ig-fin-passa--prec { right: 114px; } .ig-fin-passa--succ { right: 62px; }
  .ig-fin-chiudi, .ig-fin-passa { background: rgba(255, 255, 255, .88); color: #1d1d1f; }
}
@media (prefers-reduced-motion: reduce) { .ig-post img, .ig-velo { transition: none; } }

@media print { .wa, .wa-chat { display: none; } }

/* la piccola chat (solo col mouse, whatsapp.js): una scheda sopra il tondo, come il banner dei cookie */
.wa-chat { position: fixed; right: 20px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 26;
  width: min(360px, calc(100vw - 40px)); padding: 16px 18px 14px; border: 1px solid var(--filetto); border-radius: var(--r);
  background: var(--fondo); color: var(--testo); box-shadow: 0 18px 40px -24px rgba(20, 30, 45, .45); font: 400 0.9375rem/1.5 var(--f);
  transform-origin: 0 0; }
/* comparsa e sparizione col «genio» (esce dall'icona e ci rientra): fotogrammi calcolati in whatsapp.js con le Web
   Animations, sulla posizione vera dell'icona; con moto ridotto o html.fermo solo una dissolvenza di 150 ms */
.wa-chat[hidden] { display: none; }
.wa-chat-testata { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -4px -8px 10px 0; }
.wa-chat-titolo { margin: 0; font-size: 1rem; font-weight: 600; }
.wa-chat-titolo span { color: var(--testo-2); font-weight: 400; }
.wa-chat-chiudi { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--testo-2); cursor: pointer; }
.wa-chat-chiudi svg { width: 20px; height: 20px; }
.wa-chat-chiudi:hover { color: var(--testo); background: var(--fondo-2); }
.wa-chat-bolla { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r-piccolo) var(--r) var(--r) var(--r); background: var(--fondo-2); color: var(--t3); }
.wa-chat-piede { display: grid; gap: 10px; }
.wa-chat-piede textarea { width: 100%; min-height: 76px; resize: vertical; padding: 10px 12px; border: 1px solid var(--filetto);
  border-radius: var(--r-piccolo); background: var(--fondo); color: var(--testo); font: inherit; }
.wa-chat-piede textarea:focus-visible { outline: 2px solid var(--accento); outline-offset: 1px; border-color: var(--accento); }
.wa-chat-invia { justify-self: end; }
.wa-chat-nota { margin: 10px 0 0; color: var(--testo-2); font-size: 0.875rem; }
.wa-chat-nota a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* (voce 26) il banner dei cookie sale con lo stesso assestamento finale (solo il tempo dello spostamento; cookie.css resta
   com'è: questa regola è più specifica e vale qualunque sia l'ordine dei fogli; con moto ridotto il banner non si sposta) */
html .cookie { transition-timing-function: ease, var(--molla); }

/* ── (voce 8) Domande frequenti e menu del telefono si aprono morbidi. Domande: l'altezza cresce da 0 al contenuto
   (::details-content + interpolate-size; dove manca uno dei due si apre di colpo, come prima). Menu: il pannello è fisso
   (l'altezza non lo taglierebbe), quindi entra con dissolvenza e 6 px di discesa. Fermi con moto ridotto. ── */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .voci details::details-content { block-size: 0; overflow-y: clip;
    transition: block-size 240ms var(--molla), content-visibility 240ms allow-discrete; }
  .voci details[open]::details-content { block-size: auto; }
}
.menu-telefono[open] nav { transition: opacity 180ms ease-out, transform 220ms var(--molla); }
@starting-style { .menu-telefono[open] nav { opacity: 0; transform: translateY(-6px); } }

@media (prefers-reduced-motion: reduce) {
  .bottone:active:not(:disabled), .riquadro:hover .riquadro-vai > [aria-hidden] { transform: none; }
  .vai:hover::after { margin-left: 0; }
  .menu-telefono[open] nav { transform: none; }
}

/* ── (voce 10) Stampa: solo il testo, nero su bianco, in qualunque tema. Via testata, occhio, foto, banner,
   WhatsApp, modulo e finestre; le domande frequenti stampate aperte; accanto a ogni link l'indirizzo per intero. ── */
@media print {
  :root:not(#stampa) { --fondo: #fff; --fondo-2: #fff; --testo: #000; --testo-2: #333; --t3: #111; --filetto: #999;
    --accento: #000; --accento-forte: #000; --tinta-1: #fff; --tinta-2: #fff; --tinta-3: #fff; --tinta-4: #fff; --tinta-5: #fff;
    --ombra-su: none; --ombra-foto: none; --foto-luce: none; color-scheme: light;
    --apertura-fondo: #fff; --apertura-fondo-2: #fff; --apertura-luce: #fff; --apertura-testo: #000; --apertura-testo-2: #111;
    --apertura-bottone: #fff; --apertura-bottone-testo: #000; --apertura-bottone-su: #fff; }
  @page { margin: 18mm 16mm; }
  /* le misure del testo sono in rem: basta la radice per portare tutta la pagina alla misura della carta */
  html { font-size: 10pt; }
  body { line-height: 1.45; background: #fff; color: #000; }
  *, *::before, *::after, ::details-content { transition: none !important; animation: none !important; }
  .alterna + .alterna { margin-top: 14pt; }
  .sezione-testa { margin-bottom: 10pt; opacity: 1 !important; }   /* «Cosa facciamo» stampato anche prima del portale (la regia lo tiene a 0) */
  .testata, .salta, .eroe-poster, .eroe-foto, .alterna-foto, .riquadro-foto, .cookie, .wa, .wa-chat, dialog,
  .scheda-modulo, .tasto-suono, .tasto-tema, .piede-partner, .clienti-loghi, video, audio, canvas { display: none !important; }
  .apertura, .sezione { padding: 12pt 0; }
  .apertura-griglia, .alterna, .contatto-griglia, .riquadri, .passi, .piede-colonne { display: block !important; }
  .eroe-palco { display: block; min-height: 0; margin: 0; padding: 0; background: none; clip-path: none; color: #000; }
  .eroe-lastra { max-width: none; } .eroe-lastra-in { transform: none !important; visibility: visible !important; opacity: 1 !important; }
  .riquadri { overflow: visible; margin: 0; padding: 0; }
  html.viaggio-binario .riquadri > li { display: block; height: auto; }   /* stampata a scena viva: i capitoli tornano in fila, tutti visibili */
  .riquadro { padding: 0 0 8pt; border-radius: 0; transform: none !important; visibility: visible !important; opacity: 1 !important; }
  .riquadro-vai { color: #000; }
  .riquadro-nome, .riquadro-riga, .riquadro-vai { margin-inline: 0; }
  h1 { font-size: 24pt; } h2 { font-size: 17pt; } h3 { font-size: 12.5pt; }
  h1, h2, h3 { break-after: avoid; } p, li { orphans: 3; widows: 3; }
  .riquadro, .passi > li, .prova, .voci > li { break-inside: avoid; }
  .voci details::details-content { content-visibility: visible; block-size: auto; }
  .voci details > summary::after { display: none; }
  a { color: #000; text-decoration: underline; background: none !important; }
  .bottone { min-height: 0; padding: 0; border: 0; background: none; color: #000; }
  main a[href^="http"]::after, .piede a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  main a[href^="/"]::after, .piede a[href^="/"]::after { content: " (napixlabs.it" attr(href) ")"; font-size: 9pt; }
  main a[href^="mailto:"]::after, .piede a[href^="mailto:"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}