/* ══ Pony Solutions — sito ══
   Chiave visiva presa da spacefs.com su indicazione del titolare (8 set 2026):
   bianco, inchiostro #0A0A0A, grigio #737373, fasce chiare #F8F8F8 e nere piene.
   Google Sans, pesi leggeri anche nei titoli. Pulsanti a pillola, barra flottante
   col menu al centro. Nessun colore d'accento: lo portano le schermate dei prodotti. */

@font-face { font-family: 'Google Sans'; src: url('/fonts/gsans-latino.woff2') format('woff2'); font-weight: 400 700; 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: 'Google Sans'; src: url('/fonts/gsans-esteso.woff2') format('woff2'); font-weight: 400 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Google Sans Code'; src: url('/fonts/gsans-code.woff2') format('woff2'); font-weight: 400 500; font-display: swap; }

:root {
  --bianco: #FFFFFF;
  --carta: #F8F8F8;
  --linea: rgba(10, 10, 10, .09);
  --linea-forte: rgba(10, 10, 10, .16);
  --grigio: #6F6F6F;   /* un filo più scuro di #737373: passa il 4.5:1 anche sul fondo carta */
  --grigio-scuro: #4A4A4A;
  --inchiostro: #0A0A0A;
  --nero: #000000;
  /* le tinte: una per sezione, chiara sotto le parole del titolo e viva sugli
     accenti (onda, barre, punti). Scelte il 12 settembre 2026 su richiesta del
     titolare: «più colorato, non solo nero». Pastelli che stanno bene con la
     porcellana bianca; le vive sono le stesse tinte, sature. */
  --verde-chiaro: #D3ECC0; --verde: #3E9E4F;
  --cielo-chiaro: #D5E6FB; --cielo: #2C6BD4;
  --lilla-chiaro: #E6DAF7; --lilla: #7A56E0;
  --pesca-chiaro: #FFDFC7; --pesca: #EE6A3A;
  --menta-chiaro: #CBEEDF; --menta: #1FA97A;
  --tinta: var(--inchiostro); --tinta-viva: var(--inchiostro);
  --r: 14px;
  --r-card: 20px;
  --wrap: 1240px;
  --font: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'Google Sans Code', ui-monospace, SFMono-Regular, Menlo, monospace;
  --lento: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: 16px; line-height: 1.55; font-weight: 400;
  background: var(--bianco); color: var(--inchiostro);
  -webkit-font-smoothing: antialiased; overflow-x: clip;
  caret-color: var(--inchiostro);
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, video { display: block; max-width: 100%; }
b, strong { font-weight: 500; }
::selection { background: var(--inchiostro); color: var(--bianco); }
:focus-visible { outline: 2px solid var(--inchiostro); outline-offset: 3px; border-radius: 4px; }
/* i titoli dei passi prendono il fuoco solo per farsi leggere ad alta voce: niente cornice */
.passo h2:focus, .passo h2:focus-visible { outline: 0; }
/* la barra di scorrimento è quella del sistema: quella disegnata a mano aveva il binario bianco, che spiccava sulla sezione nera (14 settembre 2026) */
[id] { scroll-margin-top: 96px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
/* le sezioni si distinguono: un filetto in testa a ognuna, i fondi che si
   alternano (bianco, banda chiara, il nero del cinema) e più aria in mezzo
   (14 settembre 2026: «una bella distinzione tra tutte le sezioni») */
/* misura delle sezioni: «troppo piccole», poi «troppo grandi» (14 settembre, sera) — questa è la via di mezzo */
.sez { padding: clamp(96px, 11vw, 168px) 0; border-top: 1px solid var(--linea); }
.chiara { background: var(--carta); }
.cinema, .cinema + .sez { border-top: 0; }

/* ── i titoli: leggeri e larghi, come sul riferimento ── */
/* Google Sans è variabile da 400 a 700: i titoli stanno su 500-560, un gradino
   sopra il peso leggero di prima. */
h1, h2, h3, h4 { font-weight: 500; letter-spacing: -.026em; line-height: 1.06; text-wrap: balance; }
h1 { font-size: clamp(40px, 5.2vw, 68px); }
h2 { font-size: clamp(34px, 4.3vw, 60px); font-weight: 560; letter-spacing: -.025em; line-height: 1.05; }
h3 { font-size: clamp(22px, 2.2vw, 30px); font-weight: 560; letter-spacing: -.022em; line-height: 1.12; }
h4 { font-size: 18px; font-weight: 560; }
p { text-wrap: pretty; }
.tratto { font-style: normal; color: var(--grigio); }
.lead { margin-top: 20px; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6; color: var(--grigio); max-width: 56ch; }
.sez-testa { max-width: 18ch; }
.sez-riga { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 64px; align-items: end; }
.sez-riga .lead { margin-top: 0; max-width: 44ch; }
.eti { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; color: var(--grigio); }

/* ── i titoli a colori (12 settembre 2026) ──
   Al posto del grigio sulla seconda parte del titolo: l'evidenziatore, una banda
   nella tinta della sezione dietro le parole d'inchiostro, un filo storta come
   tirata a mano, uguale su tutti i titoli (la sottolineatura a onda è stata
   tolta il 12 settembre: «titoli tutti uguali»). Le tinte stanno sulla
   sezione (--tinta, --tinta-viva) e le
   riprendono anche gli accenti piccoli: la barra del quadro, la pista del
   metodo, la riga della domanda attiva. Si accende con html.titoli-vecchi:
   senza quella classe i titoli tornano al grigio. La banda si tira da sinistra
   a destra quando il titolo entra nello schermo (moto.js mette .dentro); nelle
   pagine interne, che non caricano moto.js, si tira da sola all'apertura. */
.hero { --tinta: var(--pesca-chiaro); --tinta-viva: var(--pesca); }
#servizi { --tinta: var(--verde-chiaro); --tinta-viva: var(--verde); }
#integrazioni { --tinta: var(--menta-chiaro); --tinta-viva: var(--menta); }
#contenuti { --tinta: var(--pesca-chiaro); --tinta-viva: var(--pesca); }
#metodo { --tinta: var(--cielo-chiaro); --tinta-viva: var(--cielo); }
#prodotti { --tinta: var(--lilla-chiaro); --tinta-viva: var(--lilla); }
#domande { --tinta: var(--cielo-chiaro); --tinta-viva: var(--cielo); }
.pagina-testa { --tinta: var(--lilla-chiaro); --tinta-viva: var(--lilla); }
.pagina-testa.tinta-cielo { --tinta: var(--cielo-chiaro); --tinta-viva: var(--cielo); }
.titoli-vecchi .tratto { color: inherit; }
/* le basi stanno in :where(), che non pesa: così .dentro le vince */
.titoli-vecchi .tratto {
  display: inline-block; padding: 0 .18em .04em; margin: 0 -.06em;
  border-radius: .2em .32em .18em .3em / .28em .18em .3em .2em;
  background-image: linear-gradient(var(--tinta), var(--tinta));
  background-repeat: no-repeat; background-size: 0% 100%;
  transform: rotate(-.8deg); transform-origin: left center;
  transition: background-size .7s var(--lento) .15s;
}
.titoli-vecchi .dentro .tratto, .titoli-vecchi .tratto.dentro, html.titoli-vecchi:not(.js) .tratto { background-size: 100% 100%; }
.titoli-vecchi :where(.pagina-testa h1) .tratto { animation: tiraBanda .7s var(--lento) .35s forwards; }
@keyframes tiraBanda { to { background-size: 100% 100% } }

/* ── pulsanti: pillole ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 24px; border-radius: 999px;
  font-size: 14.5px; font-weight: 500; letter-spacing: -.005em; white-space: nowrap;
  background: var(--inchiostro); color: var(--bianco);
  transition: background .2s, box-shadow .25s, transform .15s var(--lento);
}
.btn:hover { background: #232323; box-shadow: 0 6px 20px -10px rgba(10,10,11,.6); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .4; pointer-events: none; }
.btn svg { width: 14px; height: 14px; transition: transform .25s var(--lento); }
.btn:hover svg { transform: translateX(3px); }
.btn-bordo { background: var(--bianco); color: var(--inchiostro); box-shadow: inset 0 0 0 1px var(--linea-forte); }
.btn-bordo:hover { background: var(--carta); box-shadow: inset 0 0 0 1px var(--inchiostro); }
.btn-sm { height: 40px; padding: 0 18px; font-size: 14px; }
.azioni { display: flex; flex-wrap: wrap; gap: 10px; }
.link-sotto { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 500; border-bottom: 1px solid var(--linea-forte); padding-bottom: 2px; transition: border-color .2s; }
.link-sotto:hover { border-color: var(--inchiostro); }
.link-sotto svg { width: 12px; height: 12px; }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 999px; background: var(--bianco); box-shadow: inset 0 0 0 1px var(--linea-forte); font-size: 13px; color: var(--grigio); }

/* ── navigazione: marchio a sinistra, menu a pillola al centro, call a destra ── */
.nav { position: fixed; top: 18px; left: 0; right: 0; z-index: 50; pointer-events: none; }
.nav-dentro { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; max-width: none; padding: 0 clamp(16px, 2.4vw, 40px); }
.nav-dentro > * { pointer-events: auto; }
/* solo il marchio, bianco, tutto a sinistra: nel tondo bianco il pony resta nero */
.marchio { display: inline-flex; justify-self: start; }
.marchio .tondo { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.9); backdrop-filter: blur(14px) saturate(1.6); -webkit-backdrop-filter: blur(14px) saturate(1.6); box-shadow: 0 1px 2px rgba(10,10,11,.07), 0 10px 26px -20px rgba(10,10,11,.6); display: grid; place-items: center; flex: none; transition: background .2s; }
.marchio:hover .tondo { background: var(--bianco); }
.marchio .tondo img { width: 24px; height: 21px; }
.nav-menu { justify-self: center; display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 26px; border-radius: 999px; background: rgba(255,255,255,.88); backdrop-filter: blur(14px) saturate(1.6); -webkit-backdrop-filter: blur(14px) saturate(1.6); box-shadow: 0 1px 2px rgba(10,10,11,.06), 0 10px 26px -20px rgba(10,10,11,.6); font-size: 15px; font-weight: 500; }
.nav-menu .barrette { display: grid; gap: 4px; width: 16px; }
.nav-menu .barrette i { display: block; height: 1.6px; background: var(--inchiostro); border-radius: 2px; transition: transform .3s var(--lento); }
.menu-aperto .nav-menu .barrette i:first-child { transform: translateY(2.8px) rotate(45deg); }
.menu-aperto .nav-menu .barrette i:last-child { transform: translateY(-2.8px) rotate(-45deg); }
.nav-fine { justify-self: end; display: inline-flex; align-items: center; gap: 8px; }
.nav-lingua { display: inline-flex; gap: 2px; height: 52px; align-items: center; padding: 0 6px; border-radius: 999px; background: rgba(255,255,255,.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 2px rgba(10,10,11,.06), 0 10px 26px -20px rgba(10,10,11,.6); font-size: 13px; }
.nav-lingua a { padding: 7px 10px; border-radius: 999px; color: var(--grigio); }
.nav-lingua a[aria-current] { background: var(--carta); color: var(--inchiostro); }
.nav .btn { height: 52px; box-shadow: 0 10px 26px -20px rgba(10,10,11,.7); }

.menu-tel { position: fixed; inset: 84px 16px auto; z-index: 49; display: none; flex-direction: column; padding: 12px; border-radius: 24px; background: rgba(255,255,255,.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 24px 60px -30px rgba(10,10,11,.45), 0 0 0 1px var(--linea); max-width: 440px; margin: 0 auto; }
.menu-tel a { padding: 13px 16px; border-radius: 14px; font-size: 18px; font-weight: 500; letter-spacing: -.02em; transition: background .2s; }
.menu-tel a:hover { background: var(--carta); }
.menu-tel .btn { margin-top: 8px; height: 50px; }
.menu-lingua { display: flex; gap: 8px; margin-top: 10px; padding: 12px 6px 4px; border-top: 1px solid var(--linea); }
.menu-lingua a { padding: 8px 14px; border-radius: 999px; font-size: 14px; color: var(--grigio); box-shadow: inset 0 0 0 1px var(--linea); }
.menu-lingua a[aria-current] { background: var(--inchiostro); color: var(--bianco); box-shadow: none; }
.menu-aperto .menu-tel { display: flex; }

/* ── apertura, come su steep: il titolo al centro e i pezzi del gestionale finto ──
   Il palco resta appiccicato per un tratto di scorrimento (gestionale.js
   muove i pezzi da sparsi a composti e ritira il titolo). Senza JS o con
   «riduci movimento» (html senza .app-viva) è tutto fermo: titolo sopra, app
   composta sotto. */
.hero { position: relative; isolation: isolate; padding: clamp(112px, 12vw, 160px) 0 clamp(40px, 5vw, 64px); }
/* la corsa (in schermi): 0,85 per ricomporre il CRM, mezzo schermo fermo sul
   CRM completo, poi le due schermate (la lista dei clienti, l'assistente che
   risponde) con le note a freccia che arrivano una alla volta e restano
   finché non cambia schermata: 1,6 schermi per schermata, così si fa in tempo
   a leggere tutto (14 settembre 2026: «si riesca a vedere e capire tutto») */
.app-viva .hero { height: 555svh; padding: 0; }
.hero-palco { position: relative; }
.app-viva .hero-palco { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; align-content: center; }
.hero-testo { position: relative; z-index: 3; text-align: center; display: grid; justify-items: center; transform-origin: 50% 30%; will-change: transform, opacity; }
.hero h1 { max-width: none; font-size: clamp(44px, 6.4vw, 92px); text-wrap: balance; }
.hero .lead { max-width: none; }
.hero .azioni { margin-top: 32px; justify-content: center; }

/* la finestra dell'app: al centro del palco, sotto il titolo (che si ritira) */
.gestionale { position: relative; z-index: 2; width: min(1180px, 94vw); margin: clamp(40px, 5vw, 64px) auto 0; }
.app-viva .gestionale { position: absolute; left: 50%; top: 50%; translate: -50% -50%; margin: 0; transform-origin: 50% 50%; }
.app { --cornice: 1; --dentro: 1; position: relative; display: grid; grid-template-columns: 206px 1fr 1fr 1fr 312px; grid-template-rows: 56px 110px 292px 84px; gap: 12px; padding: 12px; border-radius: 20px; font-size: 13.5px; line-height: 1.35; color: var(--inchiostro); }
/* la cornice e il pannello dell'assistente si accendono con l'opacità di uno
   strato proprio (will-change): così, mentre si ricompone, il telefono non
   ridisegna ombre grandi a ogni fotogramma */
.app::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--carta); box-shadow: inset 0 0 0 1px var(--linea), 0 50px 100px -40px rgba(10,10,11,.45); opacity: var(--cornice); z-index: -1; will-change: opacity; }
.app-viva .app { --cornice: 0; --dentro: 0; --s1: 0; --s2: 0; }
/* le due schermate: coprono l'area dei pezzi (non la barra laterale né la testata),
   accese dall'opacità (--s1, --s2); ferme e nascoste senza JS */
.app-schermo { grid-column: 2 / 6; grid-row: 2 / 5; position: relative; z-index: 6; border-radius: 14px; background: var(--bianco); box-shadow: inset 0 0 0 1px var(--linea); opacity: var(--s1, 0); will-change: opacity; overflow: hidden; pointer-events: none; }
.app-schermo.s2 { opacity: var(--s2, 0); z-index: 7; }
html:not(.app-viva) .app-schermo { display: none; }
.app .sch-testa { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--linea); }
.sch-testa b { font-size: 15px; font-weight: 560; }
.sch-testa > span:not(.sch-filtri) { color: var(--grigio); font-size: 12.5px; }
.sch-filtri { margin-left: auto; display: flex; gap: 4px; }
.sch-filtri em { font-style: normal; font-size: 12px; padding: 5px 10px; border-radius: 999px; color: var(--grigio-scuro); }
.sch-filtri em.on { background: var(--inchiostro); color: var(--bianco); }
.sch-righe { display: grid; }
.sch-riga { display: grid; grid-template-columns: 1.5fr 1.3fr .8fr 1fr; align-items: center; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--linea); font-size: 13px; }
.sch-riga:last-child { border-bottom: 0; }
.sch-capo { padding: 8px 18px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--grigio); background: var(--carta); }
.sch-riga > span:first-child { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.sch-riga i { width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--c, var(--cielo)) 16%, white); color: var(--c, var(--cielo)); display: grid; place-items: center; font-style: normal; font-weight: 560; font-size: 10.5px; flex: none; }
.sch-riga > span:nth-child(2), .sch-riga > span:nth-child(4) { color: var(--grigio); }
.sch-riga em { font-style: normal; font-size: 11px; padding: 3px 8px; border-radius: 999px; background: var(--lilla-chiaro); color: var(--lilla); white-space: nowrap; }
.sch-riga em.ok { background: var(--verde-chiaro); color: var(--verde); }
.sch-riga em.nuovo { background: var(--pesca-chiaro); color: var(--pesca); }
.sch-riga em.fermo { background: var(--carta); color: var(--grigio-scuro); box-shadow: inset 0 0 0 1px var(--linea); }
.sch-chat { display: grid; gap: 14px; padding: 22px 24px; align-content: start; height: 100%; }
.sch-dom { justify-self: end; max-width: 70%; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--inchiostro); color: var(--bianco); font-size: 13.5px; }
.sch-risp { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; max-width: 82%; }
.sch-risp > div { padding: 12px 16px; border-radius: 4px 16px 16px 16px; background: var(--carta); font-size: 13.5px; }
.sch-risp ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.sch-risp li { display: grid; padding: 8px 10px; border-radius: 10px; background: var(--bianco); box-shadow: inset 0 0 0 1px var(--linea); }
.sch-risp li b { font-weight: 560; font-size: 13px; }
.sch-risp li span { color: var(--grigio); font-size: 12px; }
.sch-azioni { display: flex; gap: 8px; margin-top: 12px; }
.sch-azioni b { padding: 7px 12px; border-radius: 999px; background: var(--inchiostro); color: var(--bianco); font-size: 12.5px; font-weight: 500; }
.sch-azioni span { padding: 7px 12px; border-radius: 999px; background: var(--bianco); box-shadow: inset 0 0 0 1px var(--linea-forte); font-size: 12.5px; }
/* nella schermata dei clienti la barra laterale evidenzia «Clienti» */
.app.vista-1 .app-voci > span.on { background: none; color: var(--grigio-scuro); }
.app.vista-1 .app-voci > span.on svg { color: var(--grigio); }
.app.vista-1 .app-voci > span:nth-child(2) { background: var(--carta); color: var(--inchiostro); }
.app.vista-1 .app-voci > span:nth-child(2) svg { color: var(--inchiostro); }
/* le note a freccia: ognuna è un punto (messo da gestionale.js sotto il pezzo
   che spiega) con la freccia disegnata a mano e l'etichetta sulla banda pesca,
   la stessa dei titoli. data-lato dice da che parte sta l'etichetta. La
   freccia si disegna quando la nota si accende. */
.note { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
html:not(.app-viva) .note { display: none; }
.nota { position: absolute; width: 0; height: 0; color: var(--inchiostro); opacity: 0; transition: opacity .35s ease; }
.nota.viva { opacity: 1; }
.freccia { position: absolute; width: 120px; height: 70px; overflow: visible; }
.freccia path { stroke-dasharray: 230; stroke-dashoffset: 230; transition: stroke-dashoffset .8s var(--lento); }
.nota.viva .freccia path { stroke-dashoffset: 0; }
.nota-testo { position: absolute; white-space: nowrap; font-size: 15.5px; font-weight: 500; letter-spacing: -.01em; padding: 5px 11px 6px; border-radius: .3em .55em .3em .5em / .5em .3em .55em .3em; background: var(--pesca-chiaro); transform: rotate(-1.2deg); box-shadow: 0 10px 24px -14px rgba(10,10,11,.45); }
/* etichetta in basso a destra del punto: la freccia sale verso sinistra */
.nota[data-lato="giu-dx"] .freccia { left: -10px; top: 4px; }
.nota[data-lato="giu-dx"] .nota-testo { left: 104px; top: 62px; }
/* etichetta in basso a sinistra: la freccia è specchiata */
.nota[data-lato="giu-sx"] .freccia { right: -10px; top: 4px; transform: scaleX(-1); }
.nota[data-lato="giu-sx"] .nota-testo { right: 104px; top: 62px; }
/* la freccia corta, dove sotto c'è poco spazio */
.nota.corto .freccia { height: 40px; }
.nota.corto .nota-testo { top: 34px; }
.pezzo { position: relative; min-width: 0; min-height: 0; border-radius: 14px; background: var(--bianco); box-shadow: inset 0 0 0 1px var(--linea), 0 24px 50px -30px rgba(10,10,11,.3); will-change: transform; transform-origin: 50% 50%; }
/* sotto i 1300 la finestra si stringe: colonne fisse più strette, via le scintille */
@media (max-width: 1300px) {
  .app { grid-template-columns: 176px 1fr 1fr 1fr 250px; }
  .app-scintilla { display: none; }
  .app-kpi b { font-size: 24px; }
}
/* la barra laterale: il marchio vero, le voci con le icone, chi è dentro */
.app-lato { grid-column: 1; grid-row: 1 / 5; padding: 16px 12px; display: grid; grid-template-rows: auto 1fr auto; gap: 18px; }
.app-marchio { display: flex; align-items: center; gap: 9px; padding: 0 4px; font-weight: 560; font-size: 15px; letter-spacing: -.02em; }
.app-marchio img { width: 24px; height: 21px; }
.app-marchio b { font-weight: 400; color: var(--grigio); }
.app-voci { display: grid; gap: 3px; align-content: start; }
.app-voci > span { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; color: var(--grigio-scuro); font-weight: 500; }
.app-voci > span.on { background: var(--carta); color: var(--inchiostro); }
.app-voci svg { width: 16px; height: 16px; flex: none; color: var(--grigio); }
.app-voci > span.on svg { color: var(--inchiostro); }
.app-voci b { margin-left: auto; font-weight: 500; font-family: var(--mono); font-size: 11px; color: var(--grigio); }
.app-utente { display: flex; align-items: center; gap: 10px; padding: 8px 6px 0; border-top: 1px solid var(--linea); }
.app-utente i { width: 30px; height: 30px; border-radius: 50%; background: var(--pesca-chiaro); color: var(--pesca); display: grid; place-items: center; font-style: normal; font-weight: 560; font-size: 11px; }
.app-utente b { display: block; font-weight: 500; font-size: 12.5px; }
.app-utente small { color: var(--grigio); font-size: 11px; }
/* la testata */
.app-testa { grid-column: 2 / 6; grid-row: 1; display: flex; align-items: center; gap: 12px; padding: 0 16px; overflow: hidden; }
.app-titolo { font-weight: 560; font-size: 15px; letter-spacing: -.01em; white-space: nowrap; }
.app-cerca { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; overflow: hidden; white-space: nowrap; padding: 8px 12px; border-radius: 999px; background: var(--carta); color: var(--grigio); font-size: 12.5px; box-shadow: inset 0 0 0 1px var(--linea); }
.app-cerca svg { width: 14px; height: 14px; flex: none; }
.app-tasto { padding: 8px 14px; border-radius: 999px; background: var(--inchiostro); color: var(--bianco); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
/* i numeri, con la scintilla */
.app-kpi { grid-row: 2; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "eti eti" "num sc" "sub sc"; align-content: center; column-gap: 10px; padding: 14px 18px; }
.app-kpi.k1 { grid-column: 2; } .app-kpi.k2 { grid-column: 3; } .app-kpi.k3 { grid-column: 4; }
.app-kpi > span { grid-area: eti; font-size: 12.5px; color: var(--grigio); }
.app-kpi b { grid-area: num; font-size: 27px; font-weight: 560; letter-spacing: -.03em; line-height: 1.1; white-space: nowrap; }
.app-kpi i { grid-area: sub; font-style: normal; font-size: 12px; color: var(--verde); white-space: nowrap; }
.app-kpi.k1 i { color: var(--cielo); } .app-kpi.k2 i { color: var(--grigio); }
.app-scintilla { grid-area: sc; align-self: end; width: 72px; height: 24px; }
/* il grafico ad area */
.app-grafico { grid-column: 2 / 4; grid-row: 3; padding: 16px 18px 12px; display: grid; grid-template-rows: auto 1fr auto; gap: 8px; }
.app-legenda { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--grigio); }
.app-legenda i { width: 8px; height: 8px; border-radius: 50%; background: var(--cielo); }
.app-legenda b { margin-left: auto; font-weight: 560; font-size: 15px; color: var(--inchiostro); letter-spacing: -.02em; }
.app-area { width: 100%; height: 100%; min-height: 0; }
.app-mesi { display: flex; font-family: var(--mono); font-size: 10.5px; color: var(--grigio); }
.app-mesi i { flex: 1; text-align: center; font-style: normal; }
/* la pipeline */
.app-pipeline { grid-column: 4; grid-row: 3; padding: 18px 18px; display: grid; align-content: space-evenly; gap: 10px; }
.app-fase { display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 10px; font-size: 12.5px; color: var(--grigio-scuro); }
.app-fase i { display: block; height: 8px; border-radius: 999px; background: var(--linea); position: relative; overflow: hidden; }
.app-fase i::after { content: ''; position: absolute; inset: 0; width: var(--w, 50%); border-radius: inherit; background: var(--cielo); }
.app-fase i[style*="--w:25%"]::after { background: var(--verde); }
.app-fase b { font-family: var(--mono); font-size: 11.5px; font-weight: 500; color: var(--inchiostro); }
/* i clienti: una fila in basso */
.app-clienti { grid-column: 2 / 5; grid-row: 4; padding: 0 8px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; }
.app-cliente { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 8px 10px; border-left: 1px solid var(--linea); min-width: 0; }
.app-cliente:first-child { border-left: 0; }
.app-cliente i { width: 32px; height: 32px; border-radius: 50%; background: color-mix(in srgb, var(--c, var(--cielo)) 16%, white); color: var(--c, var(--cielo)); display: grid; place-items: center; font-style: normal; font-weight: 560; font-size: 11px; }
.app-cliente b { display: block; font-weight: 500; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-cliente small { display: block; color: var(--grigio); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-cliente > span { min-width: 0; }
.app-cliente em { grid-column: 2; justify-self: start; font-style: normal; font-size: 10.5px; padding: 2px 7px; border-radius: 999px; background: var(--lilla-chiaro); color: var(--lilla); white-space: nowrap; }
.app-cliente em.ok { background: var(--verde-chiaro); color: var(--verde); }
.app-cliente em.nuovo { background: var(--pesca-chiaro); color: var(--pesca); }
/* l'assistente: il pony, libero all'inizio (pannello e domanda invisibili: --dentro 0),
   poi dentro il suo pannello con la domanda sotto */
.app-assistente { grid-column: 5; grid-row: 2 / 5; padding: 14px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 10px; background: none; box-shadow: none; }
.app-assistente::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--bianco); box-shadow: inset 0 0 0 1px var(--linea), 0 24px 50px -30px rgba(10,10,11,.3); opacity: var(--dentro); z-index: -1; will-change: opacity; }
.app-assistente .app-chat { opacity: var(--dentro); will-change: opacity; }
.app-chat { display: flex; min-width: 0; align-items: center; gap: 10px; padding: 6px 6px 6px 8px; border-radius: 999px; font-size: 12.5px; color: var(--grigio-scuro); background: var(--bianco); box-shadow: inset 0 0 0 1px var(--linea-forte); }
.app-chat > span:not(.app-chat-pony) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-assistente { min-width: 0; overflow: hidden; z-index: 3; }
.app-chat-pony { width: 28px; height: 28px; border-radius: 50%; background: var(--carta); display: grid; place-items: center; flex: none; }
.app-chat-pony img { width: 16px; height: 14px; }
.app-chat b { width: 30px; height: 30px; border-radius: 50%; background: var(--inchiostro); color: var(--bianco); display: grid; place-items: center; font-weight: 500; flex: none; }
/* il pony nel pannello: la scena riempie la parte alta; sotto c'è l'immagine ferma di riserva */
.pony-scena { position: relative; min-height: 0; z-index: 0; pointer-events: none; }
.pony-scena canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .7s ease;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 96%); mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 96%); }
.pony-scena.acceso canvas { opacity: 1; }
.pony-riserva { position: absolute; inset: 0; display: grid; place-items: center; opacity: 1; transition: opacity .5s ease; }
.pony-riserva img { width: auto; height: 92%; max-width: 100%; object-fit: contain; }
.pony-scena.acceso .pony-riserva { opacity: 0; }

/* ── la luce soffusa in tutto il sito (12 settembre 2026) ──
   Due aloni nella tinta della sezione, che vagano piano: uno in alto a
   sinistra, uno in basso a destra. Nell'apertura sono tre, nelle tre tinte. */
.sez { position: relative; isolation: isolate; overflow: clip; }
.luce::before, .luce::after { content: ''; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, var(--luce, var(--tinta)), transparent 72%); opacity: .7; }
.luce::before { left: -6%; top: 4%; width: min(44vw, 640px); aspect-ratio: 1; }
.luce::after { right: -4%; bottom: 2%; width: min(36vw, 540px); aspect-ratio: 1; opacity: .5; }
.js .luce::before { animation: vaga 18s ease-in-out infinite; }
.js .luce::after { animation: vaga 24s ease-in-out -9s infinite reverse; }
.manifesto { --luce: var(--pesca-chiaro); }
.finale { --luce: var(--pesca-chiaro); position: relative; isolation: isolate; overflow: clip; }
.pagina-testa { position: relative; isolation: isolate; overflow: clip; }
.hero-luci { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-luci i { position: absolute; border-radius: 50%; opacity: .75; }
.hero-luci .l1 { left: -8%; top: 18%; width: 46vw; aspect-ratio: 1; background: radial-gradient(closest-side, var(--pesca-chiaro), transparent 72%); }
.hero-luci .l2 { left: 30%; top: 50%; width: 34vw; aspect-ratio: 1; background: radial-gradient(closest-side, var(--cielo-chiaro), transparent 72%); opacity: .55; }
.hero-luci .l3 { left: 58%; top: -12%; width: 40vw; aspect-ratio: 1; background: radial-gradient(closest-side, var(--lilla-chiaro), transparent 72%); opacity: .5; }
.js .hero-luci .l1 { animation: vaga 16s ease-in-out infinite; }
.js .hero-luci .l2 { animation: vaga 21s ease-in-out -7s infinite reverse; }
.js .hero-luci .l3 { animation: vaga 26s ease-in-out -13s infinite; }
@keyframes vaga { 0%, 100% { transform: translate(0, 0) scale(1) } 33% { transform: translate(6%, -5%) scale(1.1) } 66% { transform: translate(-4%, 6%) scale(.94) } }
.js .hero h1 .hero-parola { display: inline-block; opacity: 0; filter: blur(12px); transform: translateY(.3em); animation: aFuoco .9s var(--lento) both; animation-delay: calc(.12s + var(--i, 0) * .13s); }
.js .hero h1 .hero-parola.tratto { display: inline-block; }
@keyframes aFuoco { to { opacity: 1; filter: blur(0); transform: none } }

@keyframes scendi { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(3px) } }

/* ── tre modi per correre, come su spacefs ──
   Tre righe separate da filetti: numero, titolo grande a sinistra e
   descrizione a destra. Sul grande, passando col mouse sulla riga, il titolo
   scivola di 12px e sotto il puntatore compare la finestra col filmato del
   servizio, centrata su di lui, che lo insegue con inerzia (moto.js); da una
   riga all'altra i due filmati si scambiano in dissolvenza. I filmati sono
   ritagliati sulla finestra dell'app, senza i margini scuri della
   registrazione. Sul telefono le tre righe diventano schede che si impilano
   (più giù, nel blocco del telefono). */
.modi { margin-top: clamp(48px, 6vw, 88px); border-top: 1px solid var(--linea); }
.modo { border-bottom: 1px solid var(--linea); }
.modo-dentro { display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(0, 34ch); align-items: center; gap: 24px 32px; padding: clamp(32px, 4.2vw, 64px) 24px; }
.modo-n { font-family: var(--mono); font-size: 12px; color: var(--grigio); }
.modo h3 { font-size: clamp(26px, 3.2vw, 48px); font-weight: 500; letter-spacing: -.025em; transition: transform .7s var(--lento); }
.modo p { font-size: 16px; line-height: 1.55; color: var(--grigio); transition: transform .7s var(--lento), color .5s; }
@media (hover: hover) and (pointer: fine) {
  .modo:hover h3, .modo:hover p { transform: translateX(12px); }
  .modo:hover p { color: var(--inchiostro); }
}
.modo-tel { display: none; }
/* la finestra col filmato, centrata sul puntatore; dentro due filmati
   sovrapposti, quello acceso sopra, così il cambio è una dissolvenza */
.modo-finestra { position: fixed; left: 0; top: 0; z-index: 40; width: clamp(300px, 27vw, 430px); aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: var(--carta); box-shadow: 0 0 0 1px rgba(10,10,10,.08), 0 40px 90px -30px rgba(10,10,11,.5); opacity: 0; transform: translate(-50%, -50%) scale(.9); transition: opacity .5s ease, transform .7s var(--lento); pointer-events: none; will-change: transform, left, top; }
.modo-finestra.accesa { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.modo-finestra video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .45s ease; }
.modo-finestra video.acceso { opacity: 1; }

/* ── il manifesto ──
   Una frase grande, bianco e inchiostro, leggera (peso 400: lontana dai
   titoli a banda del resto del sito). Le lettere arrivano a fuoco dalla
   sfocatura man mano che scorri: moto.js le spezza e le accende in
   proporzione a quanto la frase è salita nello schermo (html.manifesto-vivo).
   La sezione scorre normalmente: non resta più appiccicata (14 settembre:
   «togli l'effetto di locked in, rendi lo scroll più semplice»).
   Senza JS il testo è nitido da subito; con «riduci movimento» pure. */
.manifesto { position: relative; isolation: isolate; overflow: clip; background: var(--bianco); color: var(--inchiostro); padding: clamp(110px, 12vw, 190px) 0; border-top: 1px solid var(--linea); }
.manifesto-testo { max-width: 30ch; font-size: clamp(32px, 4.6vw, 70px); font-weight: 400; letter-spacing: -.022em; line-height: 1.12; text-wrap: pretty; }
/* ogni parola su uno strato suo (will-change): così accendere una lettera ridisegna la parola, non tutta la frase */
.manifesto-testo .parola { display: inline-block; white-space: nowrap; will-change: transform; }
/* le lettere: invisibili davanti (la frase si scrive man mano che scorri, come
   una macchina da scrivere), poche sul fronte che prendono corpo (.vicina),
   nitide dietro (.accesa). La sfocatura sta su poche lettere alla volta: con
   tutte le lettere sfocate il telefono si inchiodava per un attimo appena la
   sezione si avvicinava (14 settembre: «si legge già da subito» → ora no) */
.manifesto-testo .lettera { display: inline-block; opacity: 0; transition: opacity .3s ease, filter .3s ease; }
.manifesto-testo .lettera.vicina { opacity: .3; filter: blur(4px); }
.manifesto-testo .lettera.accesa { opacity: 1; filter: none; }
/* la barretta che lampeggia dopo l'ultima lettera scritta, come una macchina da scrivere */
.manifesto-testo .lettera.ultima { position: relative; }
.manifesto-testo .lettera.ultima::after { content: ''; position: absolute; left: 100%; top: .08em; width: .05em; height: .86em; margin-left: .05em; background: currentColor; animation: lampeggia 1s steps(2, start) infinite; }
@keyframes lampeggia { to { visibility: hidden } }

/* ── la scuderia: i prodotti nostri, sul modello del sito vecchio ──
   Tre schede: fondo nel colore del prodotto (un velo di gradiente, un filo di
   luce in alto), in testa il marchio col nome — il logo vero e il nome
   scritto, senza bande — e il link in una pillola; la descrizione; sotto, il
   pannello «vivo» col prodotto che lavora (le tre schermate di Sparcle, i
   filmati degli altri), che sporge dal fondo a destra come una finestra
   incassata nella scheda (13 settembre 2026: via le bande sui nomi e gli
   avvisi-notifica, «più belle, coi veri loghi»). Sul telefono le schede si
   sfogliano di lato. */
.scuderia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: clamp(32px, 3.6vw, 48px); }
/* sul grande, con JS (html.scuderia-viva): la vetrina a onda del sito vecchio.
   La sezione resta appiccicata e le tre schede attraversano lo schermo col
   tuo scorrimento, con inerzia (moto.js): quella al centro frontale, le altre
   inclinate sul cilindro e un po' più in basso. */
.scuderia-viva #prodotti { height: 280svh; padding: 0; }
/* il palco parte dall'alto (non centrato): così il titolo arriva subito, senza un vuoto bianco sopra */
.scuderia-viva .scuderia-palco { position: sticky; top: 0; height: 100svh; display: grid; align-content: start; padding-top: clamp(84px, 9vw, 128px); overflow: hidden; }
.scuderia-viva .scuderia { display: block; position: relative; height: min(600px, 62svh); margin-top: clamp(24px, 3vw, 40px); perspective: 100vw; transform-style: preserve-3d; }
.scuderia-viva .cavallo { position: absolute; left: 50%; top: 0; width: clamp(320px, 37vw, 560px); height: 100%; min-height: 0; margin-left: calc(clamp(320px, 37vw, 560px) / -2); transform-origin: 50% 50%; will-change: transform; backface-visibility: hidden; }
.cavallo { --carta-prod: var(--carta); --vivo: var(--inchiostro); display: flex; flex-direction: column; min-height: 520px; border-radius: 28px; overflow: hidden; color: var(--inchiostro); background: linear-gradient(165deg, color-mix(in srgb, var(--carta-prod) 60%, white) 0%, var(--carta-prod) 45%, color-mix(in srgb, var(--carta-prod) 90%, var(--vivo)) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 0 0 1px rgba(10,10,10,.05); transition: translate .5s var(--lento), box-shadow .5s; }
a.cavallo:hover { translate: 0 -5px; box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 0 0 1px rgba(10,10,10,.06), 0 34px 70px -40px color-mix(in srgb, var(--vivo) 45%, transparent); }
.c-sparcle { --carta-prod: #EFEBFF; --vivo: #6A3FE0; }
.c-quaderna { --carta-prod: #E8F0FE; --vivo: #2C6BD4; }
.c-ponycontrol { --carta-prod: #EFEFF2; --vivo: #0A0A0B; }
.cavallo-testo { padding: clamp(20px, 2vw, 28px); padding-bottom: 0; display: flex; flex-direction: column; }
.cavallo-testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* il marchio col nome: il logo vero e il nome scritto accanto, come sul sito del prodotto */
.cavallo-nome { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: clamp(19px, 1.5vw, 22px); font-weight: 600; letter-spacing: -.025em; line-height: 1; }
.cavallo-logo { width: 36px; height: 36px; border-radius: 11px; display: block; box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--vivo) 60%, transparent); }
.cavallo-vai { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; background: rgba(255,255,255,.72); box-shadow: inset 0 0 0 1px rgba(255,255,255,.9); font-family: var(--mono); font-size: 11.5px; letter-spacing: .02em; font-weight: 500; color: var(--vivo); white-space: nowrap; }
.cavallo-vai svg { width: 11px; height: 11px; }
.cavallo p { margin-top: 18px; max-width: 30ch; font-size: clamp(14px, 1.05vw, 15.5px); line-height: 1.5; color: color-mix(in srgb, var(--inchiostro) 78%, var(--carta-prod)); }
/* il pannello vivo: incassato nella scheda, sporge dal fondo a destra; solo l'angolo in alto a sinistra è tondo */
.cavallo-vivo { position: relative; flex: 1; min-height: 250px; margin: 22px -1px -1px clamp(22px, 2vw, 30px); border-radius: 20px 0 0 0; overflow: hidden; background: var(--bianco); box-shadow: 0 0 0 1px rgba(10,10,10,.06), 0 -2px 0 rgba(255,255,255,.5), 0 30px 60px -30px color-mix(in srgb, var(--vivo) 45%, transparent); transition: translate .5s var(--lento); }
a.cavallo:hover .cavallo-vivo { translate: -3px -3px; }
.cavallo-vivo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; }
/* i tre telefoni di Sparcle, a ventaglio, che galleggiano */
.cavallo-vivo .telefoni { position: absolute; inset: 18px 12px 0; height: auto; }
.telefono { position: absolute; margin: 0; width: 36%; aspect-ratio: 600 / 1214; border-radius: 18px; overflow: hidden; background: #fff; }
.telefono img { width: 100%; height: 100%; object-fit: cover; display: block; }
.telefono.t1 { transform: rotate(-9deg); } .telefono.t3 { transform: rotate(9deg); } .telefono.t2 { z-index: 2; }
.js .telefono { animation: galleggiaTel 6s ease-in-out infinite; }
.js .telefono.t2 { animation-delay: -2s; } .js .telefono.t3 { animation-delay: -4s; }
@keyframes galleggiaTel { 0%, 100% { translate: 0 0 } 50% { translate: 0 -10px } }
@keyframes galleggia { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-7px) } }
.cavallo-vivo .telefono { width: 40%; box-shadow: 0 0 0 1px rgba(10,10,10,.08), 0 30px 50px -30px rgba(20,10,60,.5); }
.cavallo-vivo .telefono.t1 { left: 2%; top: 10%; } .cavallo-vivo .telefono.t2 { left: 30%; top: 0; width: 42%; } .cavallo-vivo .telefono.t3 { right: 0; top: 12%; }

/* ── contenuti che vendono: la giostra dei contenuti UGC, al buio ──
   Come la hero di bendingspoons.com: la sezione è scura («effetto cinema»),
   il titolo al centro, sotto dieci schede 4:5 su un anello in tre dimensioni
   guardato da dentro (la camera sta vicino al bordo dell'anello): le schede
   sul lato lontano si vedono frontali e vicine tra loro, quelle ai lati
   arrivano grandi e di sbieco ed escono dallo schermo, quelle sul lato vicino
   danno le spalle e non si vedono (backface-visibility). Le misure vengono
   dalla larghezza della scheda (--w): raggio --r e prospettiva. L'anello gira
   da solo, piano, e non si ferma mai (14 settembre: «ogni tanto smette di
   girare» — era la pausa col mouse sopra, tolta). Ai bordi un velo scuro
   sfuma le schede che escono. In fondo i titoli di coda: una scheda scura col
   marchio, la frase con le tre bande (pesca, verde, cielo: le tinte del sito
   sul nero), i crediti in monospazio e la call. Nero assoluto, come da loro.
   Fermo con «riduci movimento». */
/* grande: la sezione prende più di tutto lo schermo, il titolo è il più grande
   del sito dopo l'apertura; nero pieno, senza sfumature (la dissolvenza
   provata il 14 settembre è stata bocciata) */
.cinema { --tinta: var(--pesca); --tinta-viva: var(--pesca); --luce: var(--pesca); background: #000; color: var(--bianco); min-height: 120svh; padding: clamp(120px, 13vw, 200px) 0 clamp(110px, 12vw, 180px); }
.cinema.luce::before, .cinema.luce::after { opacity: .16; }
.cinema.luce::after { opacity: .1; }
.cinema-testa { text-align: center; display: grid; justify-items: center; }
.cinema .sez-testa { max-width: none; font-size: clamp(42px, 6.2vw, 92px); }
.cinema .tratto { color: var(--inchiostro); }
/* il raggio è almeno mezzo schermo: così la scheda si gira (e sparisce) fuori dal bordo, non sotto gli occhi */
.giostra { --w: clamp(240px, 32vw, 460px); --r: max(calc(var(--w) * 1.85), 52vw); position: relative; height: calc(var(--w) * 1.12); margin-top: clamp(36px, 5vw, 72px); perspective: calc(var(--r) * 1.9); perspective-origin: 50% 50%; overflow: hidden; }
.giostra-anello { position: absolute; inset: 0; transform-style: preserve-3d; }
.js .giostra-anello { animation: giostra 90s linear infinite; }
.giostra-carta { position: absolute; left: 50%; top: 50%; width: var(--w); aspect-ratio: 4 / 5; margin: 0; translate: -50% -50%; transform: rotateY(calc(var(--i) * 36deg)) translateZ(var(--r)) rotateY(180deg); border-radius: 26px; overflow: hidden; background: #17171A; box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 40px 80px -40px rgba(0,0,0,.8); backface-visibility: hidden; will-change: transform; }
.giostra-carta video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* il velo ai bordi */
.giostra::before, .giostra::after { content: ''; position: absolute; top: 0; bottom: 0; width: 14%; z-index: 2; pointer-events: none; }
.giostra::before { left: 0; background: linear-gradient(90deg, #000, transparent); }
.giostra::after { right: 0; background: linear-gradient(270deg, #000, transparent); }
@keyframes giostra { to { transform: rotateY(-360deg) } }
/* le quattro voci sotto la giostra: colonne divise da filetti, l'oggetto di
   porcellana sopra, il titolo in bianco e la riga in grigio */
/* le voci stanno molto più in basso: prima si vede solo la giostra, la spiegazione arriva scorrendo (14 settembre, sera) */
.cinema-voci { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: max(38svh, 300px) auto 0; padding: 0; list-style: none; }
.cinema-voci li { padding: 6px clamp(20px, 2.4vw, 36px); border-left: 1px solid rgba(255,255,255,.14); }
.cinema-voci li:first-child { border-left: 0; padding-left: 0; }
.cinema-oggetto { display: block; width: clamp(88px, 8vw, 120px); margin: -14px 0 4px -12px; }
.cinema-oggetto img { width: 100%; height: auto; display: block; }
.js .cinema-oggetto { animation: galleggia 6s ease-in-out infinite; }
.cinema-voci li:nth-child(2) .cinema-oggetto { animation-delay: -1.5s; } .cinema-voci li:nth-child(3) .cinema-oggetto { animation-delay: -3s; } .cinema-voci li:nth-child(4) .cinema-oggetto { animation-delay: -4.5s; }
.cinema-voci h3 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--bianco); }
.cinema-voci p { margin-top: 6px; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.62); max-width: 30ch; }

/* ── corre con quello che usi già ──
   Tutto al centro dello schermo: il titolo, e sotto le tessere degli strumenti
   che girano piano su due anelli attorno al pony, ognuna dritta (l'anello gira
   in un verso, la tessera nell'altro). Solo le icone, senza nomi. */
#integrazioni .sez-riga { grid-template-columns: 1fr; justify-items: center; text-align: center; }
#integrazioni .sez-testa { max-width: 22ch; }
.campo { display: grid; justify-items: center; margin-top: clamp(28px, 3.2vw, 44px); }
/* Gli anelli che girano sono punti senza misura al centro, e i due cerchi
   disegnati stanno sull'orbita, fermi. L'ingombro scorribile va tagliato sul
   bordo dell'orbita: il browser lo calcola un livello alla volta, e a ogni
   livello ri-inscatola il quadrato ruotato della tessera, che così «pesa» fino
   al doppio del suo lato e sul telefono farebbe sporgere la pagina. Non si
   perde niente: dentro l'orbita c'è posto per tutto. */
.orbita { --r1: min(200px, 22.5vw); --r2: min(350px, 37.5vw); --t: min(76px, 13vw); --sp: 24px; position: relative; width: calc(2 * var(--r2) + var(--t) + var(--sp)); aspect-ratio: 1; margin: 0 auto; overflow: hidden; overflow: clip; }
.orbita::before, .orbita::after { content: ''; position: absolute; left: 50%; top: 50%; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--linea); transform: translate(-50%, -50%); pointer-events: none; }
.orbita::before { width: calc(2 * var(--r1)); height: calc(2 * var(--r1)); }
.orbita::after { width: calc(2 * var(--r2)); height: calc(2 * var(--r2)); }
.orbita-centro { position: absolute; left: 50%; top: 50%; width: calc(var(--r1) * 1.08); transform: translate(-50%, -52%); }
.orbita-centro img { width: 100%; height: auto; display: block; }
.anello { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.anello.a1 { --r: var(--r1); }
.anello.a2 { --r: var(--r2); }
.satellite { position: absolute; left: 0; top: 0; width: 0; height: 0; transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))); }
.tessera { position: absolute; left: 0; top: 0; width: var(--t); transform: translate(-50%, -50%); display: grid; justify-items: center; }
/* sotto il mouse la tessera si ingrandisce: la scala sta sulla proprietà
   `scale`, che non litiga con l'ondeggio (che muove `transform`). Solo con
   un mouse vero: col dito il tocco non deve ingrandire niente. */
.tessera picture { display: block; width: 100%; scale: 1; transition: scale .4s var(--lento); }
.tessera img { width: 100%; height: auto; display: block; }
@media (hover: hover) and (pointer: fine) {
  .tessera:hover picture { scale: 1.32; }
  .tessera:hover { z-index: 2; }
}
.js .anello.a1 { animation: gira 70s linear infinite; }
.js .anello.a2 { animation: gira 115s linear infinite reverse; }
/* la tessera gira al contrario del suo anello, e il keyframe si porta dietro il centraggio */
.js .a1 .tessera { animation: giraTessera 70s linear infinite reverse; }
.js .a2 .tessera { animation: giraTessera 115s linear infinite; }
@keyframes gira { to { transform: rotate(360deg) } }
@keyframes giraTessera { from { transform: translate(-50%, -50%) rotate(0deg) } to { transform: translate(-50%, -50%) rotate(360deg) } }
/* ── la vita dell'orbita (12 settembre 2026: «più viva, più dinamica») ──
   · ogni tessera ondeggia per conto suo, con un passo diverso dalle vicine;
   · all'ingresso della sezione le tessere scattano dentro una dopo l'altra;
   · un'onda radar, nella tinta della sezione, gira sull'anello esterno;
   · il pony respira. */
.js .tessera picture { animation: ondeggia 4.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.7s); }
@keyframes ondeggia { 0%, 100% { transform: translateY(0) rotate(0) } 50% { transform: translateY(-7px) rotate(-1.2deg) } }
.js .campo .tessera { scale: 0; }
.js .campo.dentro .tessera { animation: giraTessera 70s linear infinite reverse, scatta .7s var(--lento) both; animation-delay: 0s, calc(.15s + var(--i, 0) * .07s); }
.js .campo.dentro .a2 .tessera { animation-name: giraTessera, scatta; animation-direction: normal, normal; animation-duration: 115s, .7s; }
@keyframes scatta { from { scale: 0 } 70% { scale: 1.12 } to { scale: 1 } }
.radar { position: absolute; left: 50%; top: 50%; width: calc(2 * var(--r2) + 2px); height: calc(2 * var(--r2) + 2px); margin: calc(-1 * var(--r2) - 1px) 0 0 calc(-1 * var(--r2) - 1px); border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 78%, color-mix(in srgb, var(--tinta-viva) 55%, transparent) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); opacity: 0; }
.js .campo.dentro .radar { opacity: 1; animation: gira 7s linear infinite; }
.js .orbita-centro picture { display: block; animation: respira 5.2s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes respira { 0%, 100% { transform: translateY(0) scale(1) } 50% { transform: translateY(-5px) scale(1.025) } }

/* ── il metodo ──
   Sul grande, con JS e senza «riduci movimento» (html.metodo-vivo), il pony
   corre sulla pista man mano che la sezione sale nello schermo e le tappe si
   accendono una alla volta, con inerzia (moto.js). La sezione scorre
   normalmente: non resta più appiccicata (14 settembre). */
.metodo-vivo .pista .tappa .scena { opacity: .3; transform: translateY(18px) scale(.9); transition: opacity .5s var(--lento), transform .7s var(--lento); }
.metodo-vivo .pista .tappa.passata .scena { opacity: 1; transform: none; }
.metodo-vivo .pista .tappa h3, .metodo-vivo .pista .tappa p { opacity: .35; transform: translateY(8px); transition: opacity .45s, transform .6s var(--lento), color .35s; }
.metodo-vivo .pista .tappa.passata h3, .metodo-vivo .pista .tappa.passata p { opacity: 1; transform: none; }

/* i quattro oggetti del metodo: resi in 3D con lo stesso materiale e la stessa
   luce del pony dell'apertura (strumenti/rendi-oggetti.html), non più disegni
   vettoriali. Sono spenti finché la pista non li raggiunge. */
.scena { display: block; width: clamp(128px, 11vw, 168px); height: auto; aspect-ratio: 1; margin: 0 0 10px; }
.scena img { width: 100%; height: auto; display: block; }
.js .scena { opacity: .42; transform: scale(.94); transform-origin: 30% 70%; transition: opacity .5s var(--lento), transform .6s var(--lento); }
.js .tappa.passata .scena { opacity: 1; transform: none; }
.pista { position: relative; margin-top: clamp(48px, 5.6vw, 88px); }
.pista-linea { position: relative; height: 2px; background: var(--linea); margin: 0 0 46px; }
.pista-fatto { position: absolute; inset: 0; background: var(--tinta-viva); transform: scaleX(var(--q, 0)); transform-origin: left center; }
.pista-pony { position: absolute; top: 50%; left: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--bianco); display: grid; place-items: center; box-shadow: 0 0 0 1.5px var(--tinta-viva), 0 8px 18px -10px rgba(10,10,11,.5); }
.pista-pony img { width: 26px; height: 22px; }
.js .pista-pony { left: calc(var(--q, 0) * 100%); }
.pista .tappe { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; list-style: none; }
.pista .tappa { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 0 clamp(16px, 2vw, 30px) 0 0; }
.pista .tappa .tappa-punto { position: absolute; top: -56px; left: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--bianco); box-shadow: 0 0 0 1px var(--linea-forte); transition: background .35s, box-shadow .35s, transform .35s var(--lento); }
.pista .tappa.passata .tappa-punto { background: var(--tinta-viva); box-shadow: 0 0 0 1px var(--tinta-viva); transform: scale(1.15); }
.pista .tappa h3 { margin-top: 8px; font-size: clamp(20px, 2vw, 29px); color: var(--grigio); transition: color .35s; }
.pista .tappa.passata h3 { color: var(--inchiostro); }
.pista .tappa p { margin-top: 10px; color: var(--grigio); font-size: 16px; max-width: 30ch; }
.metodo-nota { margin-top: clamp(44px, 5vw, 72px); padding-top: 28px; border-top: 1px solid var(--linea); display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.metodo-nota p { font-size: 15px; color: var(--grigio); max-width: 56ch; }

/* ── le domande ── */
.dom-titolo { margin-bottom: clamp(40px, 5vw, 80px); max-width: 18ch; }
.domande { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.dom-lista { border-top: 1px solid var(--linea); }
.dom { position: relative; display: grid; grid-template-columns: 1fr 20px; gap: 16px; align-items: center; width: 100%; text-align: left; padding: 18px 0; border-bottom: 1px solid var(--linea); font-size: clamp(17px, 1.5vw, 20px); font-weight: 500; letter-spacing: -.022em; color: var(--grigio); transition: color .25s; }
.dom::before { content: ''; position: absolute; left: -14px; top: 50%; width: 2px; height: 58%; background: var(--tinta-viva); border-radius: 2px; transform: translateY(-50%) scaleY(0); transition: transform .35s var(--lento); }
.dom.attiva::before { transform: translateY(-50%) scaleY(1); }
.dom svg { width: 18px; height: 18px; opacity: 0; transform: translateX(-4px); transition: opacity .3s, transform .35s var(--lento); }
.dom > span { transition: transform .35s var(--lento); }
.dom:hover { color: var(--grigio-scuro); }
.dom.attiva { color: var(--inchiostro); }
.dom.attiva > span { transform: translateX(8px); }
.dom.attiva svg { opacity: 1; transform: none; }
.dom-risposte { display: grid; position: relative; border-radius: var(--r-card); background: var(--carta); padding: clamp(24px, 3vw, 40px); min-height: 240px; }
.dr { grid-area: 1 / 1; display: grid; gap: 14px; align-content: start; }
.js .dr { opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .35s ease, transform .5s var(--lento), visibility .35s; }
.js .dr.attiva { opacity: 1; visibility: visible; transform: none; }
.dr h3 { font-size: clamp(22px, 2.2vw, 32px); }
.dr p { color: var(--grigio); font-size: 17px; max-width: 54ch; }
.js .dr.attiva h3 { animation: entraDaSotto .55s var(--lento) .06s both; }
.js .dr.attiva p { animation: entraDaSotto .6s var(--lento) .12s both; }
@keyframes entraDaSotto { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
html:not(.js) .dom-risposte { display: block; }
html:not(.js) .dr + .dr { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--linea); }
html:not(.js) .dom-lista { display: none; }
html:not(.js) .campo { display: block; }
html:not(.js) .modo-tel { display: block; padding: 0 24px 24px; }
html:not(.js) .modo-tel video { width: min(100%, 520px); height: auto; border-radius: 14px; }

/* ── la chiusura ── */
.finale { background: var(--bianco); border-top: 1px solid var(--linea); text-align: center; padding: clamp(72px, 8vw, 120px) 0; }
.finale-dentro { display: grid; justify-items: center; gap: 22px; }
/* lo stesso pony dell'apertura, reso una volta e ritagliato sulla sagoma */
.finale-pony { display: block; width: clamp(96px, 9vw, 128px); }
.finale-pony img { width: 100%; height: auto; display: block; }
.finale h2 { font-size: clamp(40px, 6vw, 82px); font-weight: 400; letter-spacing: -.035em; }
.finale-modulo { display: flex; align-items: center; gap: 8px; width: min(520px, 100%); padding: 6px 6px 6px 20px; border-radius: 999px; background: var(--bianco); box-shadow: inset 0 0 0 1px var(--linea-forte); transition: box-shadow .25s; }
.finale-modulo:focus-within { box-shadow: inset 0 0 0 1px var(--inchiostro), 0 0 0 4px rgba(10,10,11,.06); }
.finale-modulo input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 15.5px; background: transparent; color: var(--inchiostro); }
.finale-modulo input::placeholder { color: var(--grigio); }
.finale-nota { font-size: 13.5px; color: var(--grigio); max-width: 46ch; }

/* ── piè di pagina ── */
.pie { padding: clamp(56px, 6vw, 80px) 0 32px; border-top: 1px solid var(--linea); }
.pie-griglia { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 32px; }
.marchio-pie { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-size: 17px; letter-spacing: -.02em; }
.marchio-pie img { width: 30px; height: 26px; flex: none; }
.marchio-pie .tld { color: var(--grigio); font-weight: 400; }
.pie-marchio p { margin-top: 16px; color: var(--grigio); font-size: 14px; max-width: 30ch; }
.pie-col .pie-titolo { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--grigio); margin-bottom: 14px; }
.pie-col a { display: block; padding: 5px 0; font-size: 14.5px; color: var(--grigio); transition: color .2s; }
.pie-col a:hover { color: var(--inchiostro); }
.pie-basso { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--linea); font-size: 13px; color: var(--grigio); }

/* ── pagine interne ── */
.pagina-testa { padding: clamp(130px, 13vw, 180px) 0 clamp(28px, 3.4vw, 48px); }
.pagina-testa h1 { max-width: 16ch; }
.stretto { max-width: 760px; }
.legale h2 { font-size: 21px; letter-spacing: -.02em; margin: 40px 0 12px; }
.legale p { color: var(--grigio-scuro); margin-bottom: 12px; }
.legale a { text-decoration: underline; text-underline-offset: 3px; }
.tre { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); margin-top: clamp(32px, 4vw, 56px); padding-top: 32px; border-top: 1px solid var(--linea); }
.tre p { margin-top: 12px; color: var(--grigio); font-size: 15px; }

/* ── contatti: il percorso guidato ── */
.percorso { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.percorso-lato .righe { list-style: none; margin-top: 26px; display: grid; gap: 14px; }
.percorso-lato .righe li { display: flex; gap: 12px; align-items: center; font-size: 15px; color: var(--grigio-scuro); }
.percorso-lato .righe svg { width: 17px; height: 17px; flex: none; }
.percorso-lato .alt { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--linea); font-size: 14.5px; color: var(--grigio); }
.percorso-lato .alt a { font-weight: 500; color: var(--inchiostro); text-decoration: underline; text-underline-offset: 3px; }
.scatola { border-radius: var(--r-card); background: var(--bianco); box-shadow: inset 0 0 0 1px var(--linea), 0 24px 60px -46px rgba(10,10,11,.4); padding: clamp(24px, 3vw, 40px); }
.avanzamento { display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 12px; color: var(--grigio); }
.avanzamento .barra { flex: 1; height: 3px; background: var(--linea); border-radius: 2px; overflow: hidden; }
.avanzamento .barra i { display: block; height: 100%; width: 100%; background: var(--inchiostro); border-radius: 2px; transform: scaleX(0); transform-origin: left center; transition: transform .45s var(--lento); }
.passo { display: none; margin-top: 26px; }
.passo.attivo { display: block; }
.passo h2 { font-size: clamp(23px, 2.3vw, 31px); max-width: 18ch; }
.passo .aiuto { margin-top: 10px; color: var(--grigio); font-size: 14.5px; }
.scelte { display: grid; gap: 10px; margin-top: 22px; }
.scelte.due { grid-template-columns: 1fr 1fr; }
.scelta { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 15px 18px; border-radius: 14px; background: var(--bianco); box-shadow: inset 0 0 0 1px var(--linea); font-size: 15.5px; transition: box-shadow .18s, background .18s; }
.scelta:hover { box-shadow: inset 0 0 0 1px var(--linea-forte); }
.scelta[aria-pressed="true"] { background: var(--carta); box-shadow: inset 0 0 0 1.5px var(--inchiostro); }
.scelta .segno { width: 20px; height: 20px; border-radius: 50%; flex: none; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--linea-forte); }
.scelta[aria-pressed="true"] .segno { background: var(--inchiostro); box-shadow: none; }
.scelta .segno svg { width: 11px; height: 11px; opacity: 0; }
.scelta[aria-pressed="true"] .segno svg { opacity: 1; }
.campi { display: grid; gap: 14px; margin-top: 22px; }
.campi .due { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.campo { display: grid; gap: 6px; }
.campo label { font-size: 13px; color: var(--grigio); }
.campo input, .campo textarea { width: 100%; font: inherit; font-size: 15.5px; padding: 13px 15px; background: var(--bianco); color: var(--inchiostro); border: 0; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--linea-forte); transition: box-shadow .18s; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--grigio); }
.campo input:focus, .campo textarea:focus { outline: 0; box-shadow: inset 0 0 0 1.5px var(--inchiostro); }
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--inchiostro), 0 0 0 3px rgba(10,10,11,.12); }
.campo textarea { min-height: 104px; resize: vertical; }
.riepilogo { margin-top: 22px; padding: 18px; background: var(--carta); border-radius: 14px; display: grid; gap: 10px; font-size: 14.5px; }
.riepilogo div { display: grid; grid-template-columns: 128px 1fr; gap: 14px; }
.riepilogo span { color: var(--grigio); }
.riepilogo b { font-weight: 500; }
.timone { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 26px; }
.timone .indietro { font-size: 14.5px; color: var(--grigio); padding: 10px 4px; }
.timone .indietro:hover { color: var(--inchiostro); }
.timone .btn { min-width: 190px; }
.errore { display: none; margin-top: 14px; font-size: 14.5px; font-weight: 500; }
.errore.on { display: block; }
.privacy-nota { margin-top: 16px; font-size: 12.5px; color: var(--grigio); }
.privacy-nota a { text-decoration: underline; text-underline-offset: 3px; }
.fatto-schermo { display: none; text-align: center; padding: clamp(24px, 4vw, 48px) 0; }
.fatto-schermo.on { display: block; }
.fatto-schermo .segno-ok { width: 56px; height: 56px; margin: 0 auto 22px; border-radius: 50%; background: var(--inchiostro); display: grid; place-items: center; }
.fatto-schermo .segno-ok svg { width: 26px; height: 26px; }
.fatto-schermo h2 { font-size: clamp(26px, 2.6vw, 34px); }
.fatto-schermo p { margin-top: 12px; color: var(--grigio); }
.hp { position: absolute; left: -9999px; }

/* ── comparse ── */
.js .rvl { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--lento), transform .8s var(--lento); transition-delay: calc(var(--i, 0) * 70ms); }
.js .rvl.dentro { opacity: 1; transform: none; }
.nav-avanzamento { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rvl { opacity: 1; transform: none; transition: none; }
  .js .barre i { transform: scaleY(1); transition: none; }
  .js .registro li, .js .passi li, .js .estratto li, .js .ocr-passi li, .js .ocr-risposta, .js .fatt-fatto, .js .foglio-mira, .js .ocr-box { opacity: 1; transform: none; transition: none; }
  .js .viva .ocr-lama, .passi li.corso svg, .js .dr.attiva h3, .js .dr.attiva p { animation: none; }
  .js .dr, .js .pista-pony { transition: none; }
  .titoli-vecchi .tratto { transition: none; animation: none; background-size: 100% 100%; }
  .manifesto-testo .lettera { opacity: 1; filter: none; transition: none; }
  .js .giostra-anello { animation: none; }
  .js .anello, .js .tessera, .js .tessera picture, .js .radar, .js .orbita-centro picture { animation: none; }
  .js .campo .tessera { scale: 1; }
  .js .campo .radar { opacity: 0; }
  .js .vetro { opacity: 1; transform: rotate(var(--r)); transition: none; }
  .js .lastra { transform: none; }
}

/* ── larghezze ── */
@media (max-width: 1040px) {
  .pista .tappe { grid-template-columns: 1fr 1fr; gap: 30px 0; }
  .pista-linea { display: none; }
  .pista .tappa .tappa-punto { display: none; }
  .pista .tappa h3, .pista .tappa.passata h3 { color: var(--inchiostro); }
  .js .scena { opacity: 1; transform: none; }
}
@media (max-width: 960px) {
  .nav-menu span:not(.barrette) { display: none; }
  .nav-menu { padding: 0; width: 52px; justify-content: center; }
  .nav-lingua { display: none; }
  /* sotto i 960 la scena 3D non parte: il pony fermo sta in basso a destra,
     dietro; l'app si stringe in due colonne, senza barra laterale */
  .hero .lead { max-width: 34ch; }
  .app { grid-template-columns: 1fr 1fr; grid-template-rows: 40px 70px 70px 150px 150px 150px; gap: 8px; padding: 8px; font-size: 12px; }
  /* l'apertura sul telefono: senza la ricomposizione (gestionale.js non parte
     sotto i 960: «pesa troppo»); resta il titolo con i pulsanti e, sotto, il
     pony con la domanda all'assistente. Gli altri pezzi del CRM non si vedono. */
  .gestionale { width: min(420px, 100%); margin-top: 36px; }
  .app { display: block; padding: 0; font-size: 13px; }
  .app::before, .app > .pezzo:not(.app-assistente), .app-schermo { display: none; }
  .app-assistente.pezzo { display: grid; grid-template-columns: 1fr; grid-template-rows: 260px auto; gap: 14px; padding: 0; background: none; box-shadow: none; border-radius: 0; }
  .app-assistente::before { display: none; }
  .pony-scena { min-height: 260px; }
  .app-assistente .app-chat { justify-self: center; width: min(100%, 360px); font-size: 13px; align-self: start; }
  .app-lato { display: none; }
  .app-testa { grid-column: 1 / 3; grid-row: 1; padding: 0 10px; gap: 8px; }
  .app-cerca { display: none; }
  .app-kpi { padding: 8px 12px; }
  .app-kpi.k1 { grid-column: 1; grid-row: 2; } .app-kpi.k2 { grid-column: 2; grid-row: 2; } .app-kpi.k3 { grid-column: 1 / 3; grid-row: 3; }
  .app-kpi b { font-size: 21px; }
  .app-scintilla { width: 56px; }
  .app-grafico { grid-column: 1 / 3; grid-row: 4; padding: 12px 12px 8px; }
  .app-pipeline { grid-column: 1; grid-row: 5; padding: 12px; gap: 8px; }
  .app-fase { grid-template-columns: 52px 1fr auto; font-size: 11px; }
  .app-clienti { grid-column: 2; grid-row: 5; padding: 4px 8px; grid-template-columns: 1fr; align-content: center; }
  .app-cliente { border-left: 0; border-top: 1px solid var(--linea); padding: 5px 0; }
  .app-cliente:first-child { border-top: 0; }
  .app-cliente:nth-child(n + 4), .app-cliente em { display: none; }
  .app-assistente { grid-column: 1 / 3; grid-row: 6; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); grid-template-rows: 1fr; padding: 10px; }
  .app-assistente .app-chat { align-self: end; font-size: 11.5px; }
  .app-schermo { grid-column: 1 / 3; grid-row: 2 / 7; }
  .sch-riga { grid-template-columns: 1.6fr 1fr; font-size: 12px; padding: 9px 12px; }
  .sch-riga > span:nth-child(2), .sch-riga > span:nth-child(4) { display: none; }
  .sch-capo span:nth-child(2), .sch-capo span:nth-child(4) { display: none; }
  .app .sch-testa { flex-wrap: wrap; padding: 12px; }
  .sch-filtri { margin-left: 0; width: 100%; }
  .sch-dom, .sch-risp { max-width: 100%; }
  .nota-testo { font-size: 12.5px; padding: 4px 9px 5px; white-space: normal; width: max-content; max-width: 150px; line-height: 1.25; }
  .freccia { width: 80px; height: 48px; }
  .nota[data-lato="giu-dx"] .nota-testo { left: 70px; top: 42px; }
  .nota[data-lato="giu-sx"] .nota-testo { right: 70px; top: 42px; }
  .nota.corto .freccia { height: 30px; } .nota.corto .nota-testo { top: 26px; }
  .nota:nth-child(4) { display: none; }
  /* ombre più corte sui pezzi: sul telefono ridisegnare le sfocature costa */
  .pezzo { box-shadow: inset 0 0 0 1px var(--linea), 0 14px 30px -20px rgba(10,10,11,.3); }
  .impegno, .percorso, .domande { grid-template-columns: 1fr; gap: 28px; }
  /* le domande: una fisarmonica — la risposta si apre sotto la sua domanda
     (moto.js sposta ogni risposta dopo il suo bottone); il pannello a parte sparisce */
  .dom-risposte { display: none; }
  .dom-lista .dr { grid-area: auto; position: static; padding: 0 0 20px; }
  .dom-lista .dr h3 { display: none; }
  .dom-lista .dr p { font-size: 15px; }
  .js .dom-lista .dr { display: none; opacity: 1; visibility: visible; transform: none; }
  .js .dom-lista .dr.attiva { display: grid; animation: entraDaSotto .4s var(--lento) both; }
  .js .dom-lista .dr.attiva p { animation: none; }
  /* la fattura resta accanto ai campi letti: diventa una miniatura, non una colonna in più */
  /* i tre telefoni restano in fila anche stretti: impilarli allungava la scheda di 1400px
     e la fila dei servizi prende l'altezza della scheda più alta */
  .pie-griglia { grid-template-columns: 1fr 1fr; }
  .sez-riga { grid-template-columns: 1fr; align-items: start; }
}
/* ── il telefono, sotto i 960px: due disegni diversi ──
   · i servizi: il quadro in verticale — la scheda con l'oggetto grande sopra
     (cambia da sola ogni 8 s, con la barra), le quattro voci sotto;
   · il metodo: la striscia — le quattro tappe si sfogliano di lato, a scatti,
     ognuna con l'oggetto al centro che galleggia e si avvicina quando è in
     mezzo (--vic da moto.js); sotto, la pista col pony che corre sfogliando.
   Il grande non cambia. */
@media (max-width: 960px) {
  /* i tre modi sul telefono: tre schede che si sfogliano di lato, come il
     metodo — numero e titolo, la riga, il filmato 16:9 */
  .modi { border-top: 0; margin: 28px 0 0; padding: 6px 18px 14px; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 18px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .modi::-webkit-scrollbar { display: none; }
  .modo { flex: 0 0 min(84%, 360px); scroll-snap-align: start; border: 0; border-radius: 22px; background: var(--bianco); box-shadow: inset 0 0 0 1px var(--linea), 0 24px 50px -40px rgba(10,10,11,.35); padding: 8px; }
  .modo .modo-dentro { grid-template-columns: 30px minmax(0, 1fr); gap: 6px 12px; padding: 14px 12px 16px; max-width: none; }
  .modo h3 { font-size: 23px; }
  .modo p { grid-column: 2; font-size: 14px; }
  .modo:hover h3, .modo:hover p { transform: none; }
  .modo .modo-tel { display: block; padding: 0; max-width: none; }
  .modo-tel video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 17px; box-shadow: inset 0 0 0 1px var(--linea); background: var(--carta); }
  .modo-finestra { display: none; }
  .cinema-voci { grid-template-columns: 1fr 1fr; gap: 28px 0; }
  .cinema-voci li:nth-child(3) { border-left: 0; padding-left: 0; }
  /* il metodo sul telefono: la striscia — le quattro tappe si sfogliano di
     lato, a scatti, ognuna con l'oggetto al centro che galleggia e si avvicina
     quando è in mezzo (--vic da moto.js); sotto, la pista col pony che corre
     sfogliando (rimessa il 14 settembre: «rimetti gli scroll da destra verso
     sinistra») */
  .pista .striscia { display: flex; gap: 14px; margin: 0 -18px; padding: 6px 18px 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 18px; scrollbar-width: none; -webkit-overflow-scrolling: touch; list-style: none; counter-reset: scheda; }
  .striscia::-webkit-scrollbar { display: none; }
  .pista .striscia > * { flex: 0 0 min(82%, 340px); scroll-snap-align: start; display: grid; justify-items: start; align-content: start; gap: 4px; padding: 20px 20px 24px; border-radius: var(--r-card); background: var(--bianco); box-shadow: inset 0 0 0 1px var(--linea); border-top: 0; }
  .scena { display: block; width: 66%; height: auto; justify-self: center; margin: -14px 0 -8px; opacity: 1; transform: none; }
  .js .scena { opacity: 1; transform: none; }
  .js .scena picture { display: block; animation: galleggia 5s ease-in-out infinite; }
  .scena img { width: 100%; transform: scale(calc(.8 + var(--vic, 1) * .2)) translateY(calc((1 - var(--vic, 1)) * 10px)); transition: transform .35s var(--lento); }
  .pista .tappa { counter-increment: scheda; }
  .pista .tappa::before { content: counter(scheda, decimal-leading-zero); display: block; padding: 0 0 8px; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--grigio); }
  .pista .tappa h3 { font-size: 22px; margin: 0; color: var(--inchiostro); }
  .pista .tappa p { margin: 8px 0 0; color: var(--grigio); font-size: 14.5px; max-width: none; }
  .pista .tappa .tappa-punto { display: none; }
  .pista { display: flex; flex-direction: column; margin-top: 24px; }
  .pista .pista-linea { display: block; order: 2; margin: 26px 22px 0; }
}
@media (max-width: 720px) {
  .wrap { padding: 0 18px; }
    .hero-luci .l1 { left: 0; top: 4%; width: 90vw; }
  .hero-luci .l2 { left: 40%; top: 40%; width: 70vw; }
  .hero-luci .l3 { display: none; }
  .luce::before { width: 80vw; }
  .luce::after { width: 60vw; }
  .orbita { --sp: 8px; }
  /* sul telefono l'orbita è più calma: via il radar e l'ondeggio, resta il giro lento */
  .radar { display: none; }
  .js .tessera picture { animation: none; }
  .giostra { --w: 86vw; --r: calc(var(--w) * 1.55); height: calc(var(--w) * 1.18); }
  .cinema { padding-top: 96px; }
  .cinema { min-height: 0; padding: 96px 0 72px; }
  .sez, .manifesto { padding: 88px 0; }
  .cinema-voci { grid-template-columns: 1fr; margin-top: 140px; }
  .cinema-voci li { padding: 22px 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.14); }
  .cinema-voci li:first-child { border-top: 0; padding-top: 0; }
  /* la scuderia: le schede si impilano — ognuna resta appiccicata sotto la
     barra e la successiva le scivola sopra; quella coperta si ritira un po'
     (--copre, da moto.js), con un velo a opacità (non un filtro: costerebbe a
     ogni fotogramma sul filmato) */
  .scuderia.striscia { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: clamp(32px, 3.6vw, 48px); padding-bottom: 8px; }
  .scuderia .cavallo { --copre: 0; position: sticky; top: 84px; min-height: 0; transform-origin: 50% 0; transform: scale(calc(1 - var(--copre) * .06)); will-change: transform; }
  .scuderia .cavallo:nth-child(2) { top: 98px; } .scuderia .cavallo:nth-child(3) { top: 112px; }
  .scuderia .cavallo::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgba(10,10,11,.10); opacity: var(--copre); pointer-events: none; will-change: opacity; z-index: 3; }
  .scuderia .cavallo-vivo { min-height: 240px; }
  .manifesto-testo { max-width: none; }
  .nav { top: 12px; }
  /* sul telefono la call resta nel menu: una pillola nera vuota accanto non serve */
  .nav .btn { display: none; }
  .esito { grid-template-columns: 1fr 1fr; }
  .pie-griglia { grid-template-columns: 1fr; gap: 24px; }
  .finale-modulo { flex-wrap: wrap; border-radius: 20px; padding: 12px; }
  .finale-modulo input { width: 100%; flex: 1 0 100%; padding: 8px 10px; }
  .finale-modulo .btn { width: 100%; }
  .timone .btn { min-width: 0; flex: 1; }
  .metodo-nota .btn { width: 100%; }
}