/* NTS NEXT — home. Si appoggia a sito.css: qui solo quello che è della home.
   Stessa lingua della pagina Siti web: testo da un lato, un grande disegno a linee animato in un
   pannello dall'altro. I cicli girano solo quando la sezione si vede ([data-vivo].in-vista, da sito.js);
   senza JavaScript i disegni sono completi, con «riduci movimento» restano fermi. */

/* ── Prestazioni: il browser impagina solo le sezioni vicine allo schermo. Senza, all'apertura
   calcolava tutta la home (oltre mille elementi) in un colpo solo e Lighthouse da telefono
   segnava 91–92 (2026-10-15). Nessun effetto visibile: le sezioni tagliano già il contenuto
   che sborda (overflow:hidden). Le misure di riserva sono quelle vere: a schermo intero sopra
   821×620, circa 1000px su telefono; «auto» fa ricordare la misura una volta vista. ── */
main>.sezione{content-visibility:auto;contain-intrinsic-size:auto 1000px}
@media (min-width:821px) and (min-height:620px){
  main>.sezione{contain-intrinsic-size:auto 100vh;contain-intrinsic-size:auto 100svh}
}

/* ── Colori e testi dei disegni ─────────────────────────── */
.illu{overflow:visible}
.illu .pieno{fill:rgba(233,241,243,.82)}
.illu .tenue{fill:rgba(157,179,184,.34)}
.illu .tinta{fill:var(--accento)}
.illu .velo{fill:var(--accento-tenue);stroke:rgba(0,196,224,.45);stroke-width:1}
.illu .fondo{fill:#0C2A30}
.illu .fondo2{fill:#0F3138}
.illu .tratto{stroke:#C4D6DA;stroke-width:1.5}
.illu .tratto.acc{stroke:var(--accento)}
.illu .tratto.tenue-l{stroke:rgba(196,214,218,.22);stroke-width:1}
.illu .guida{fill:none;stroke:rgba(255,255,255,.25);stroke-width:1.3;stroke-dasharray:4 7}
.illu text{font-family:var(--font)}
.illu .nome{font-size:13px;font-weight:500;fill:var(--testo-2);text-anchor:middle}
.illu .nome.forte{font-size:15px;font-weight:600;fill:var(--testo)}
.illu .et{font-size:12.5px;font-weight:500;fill:var(--testo-2)}
.illu .et.fine{text-anchor:end}
.illu .et.forte{font-size:15px;font-weight:600;fill:var(--testo)}
.illu .riga-doc{font-size:13.5px;font-weight:600;fill:var(--testo)}
.illu .riga-doc.grande{font-size:17px;font-weight:500}
.illu .riga-chat{font-size:12.5px;fill:var(--testo)}
.illu .conto{font-size:12px;font-weight:700;fill:var(--fondo);text-anchor:middle;dominant-baseline:central}
.illu .conto.piccolo{font-size:10px}
.illu .numero{font-size:12px;font-weight:600;fill:var(--testo-2);text-anchor:middle;dominant-baseline:central}
.illu .etichetta-scura{font-size:12.5px;font-weight:600;fill:var(--fondo);text-anchor:middle;dominant-baseline:central}
.illu .etichetta-scura.sx{text-anchor:start}
.illu g,.illu rect,.illu circle,.illu path{transform-box:fill-box}
.illu .cometa{fill:none;stroke:var(--accento);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:10 100;stroke-dashoffset:10;
  animation:cometa 2.4s linear infinite}
.illu .cometa.c2{animation-delay:.8s}.illu .cometa.c3{animation-delay:1.6s}.illu .cometa.lento{animation-duration:3.4s}
@keyframes cometa{from{stroke-dashoffset:10}to{stroke-dashoffset:-100}}
.illu .led{fill:var(--accento);animation:led 2.4s steps(1,end) infinite}
.illu .led.l2{animation-delay:.6s}.illu .led.l3{animation-delay:1.2s}.illu .led.l4{animation-delay:1.8s}
@keyframes led{0%,100%{opacity:1}50%{opacity:.25}}
/* un segno di spunta che si traccia (base: tracciato, così senza animazione si vede) */
.illu .spunta-a{stroke-dasharray:1;stroke-dashoffset:0;animation:traccia 10s var(--esce) infinite backwards}
.illu .spunta-a.s1{animation-delay:3.2s}.illu .spunta-a.s2{animation-delay:3.8s}.illu .spunta-a.s3{animation-delay:4.4s}
@keyframes traccia{0%{stroke-dashoffset:1}8%,88%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:1}}
/* un documento che viaggia: entra, viene letto (sparisce), esce e arriva a destinazione */
@keyframes gettone{
  0%{transform:translate(0,0);opacity:0}
  5%{opacity:1}
  25%{transform:translate(var(--ax),var(--ay));opacity:1}
  27%{opacity:0}
  40%{transform:translate(var(--bx),var(--by));opacity:0}
  42%{opacity:1}
  60%{transform:translate(var(--cx),var(--cy));opacity:1}
  66%,100%{transform:translate(var(--cx),var(--cy));opacity:0}
}
@keyframes arrivo{0%,57%{opacity:.14}62%{opacity:.95}82%,100%{opacity:.14}}
.illu .gettone{fill:var(--accento);opacity:0;animation:gettone 7.5s ease-in-out infinite}

/* Tutti i cicli si fermano quando la loro sezione non si vede */
.js main>section[data-vivo]:not(.in-vista) .illu *,
.js main>section[data-vivo]:not(.in-vista) .momenti li{animation-play-state:paused}

/* ── Parti comuni ───────────────────────────────────────── */
.h-testa{display:flex;justify-content:space-between;align-items:baseline;gap:8px 32px;flex-wrap:wrap}
.h-testa h2{font-size:clamp(1.8rem,1.2rem + 2.2vw,3.25rem)}
.h-testa p{color:var(--testo-2);font-size:1.05rem}
.ambiti h2,.dati h2,.incontro h2{font-size:clamp(1.8rem,1.2rem + 2vw,3rem)}
.tavola{margin:0;border-radius:20px;background:var(--pannello);border:1px solid var(--bordo);position:relative;overflow:hidden;
  box-shadow:0 30px 60px -34px rgba(0,0,0,.7)}
.tavola::before{content:"";position:absolute;inset:-1px;pointer-events:none;border-radius:inherit;
  background:radial-gradient(70% 50% at 50% 0%,rgba(0,151,178,.12),transparent 70%)}
.tavola svg{display:block;width:100%;height:auto;position:relative}
.tavola figcaption{position:relative;margin-top:10px;font-size:.82rem;color:var(--testo-2)}

/* ── Cosa facciamo: tre aree, ognuna col suo disegno ────── */
.aree{margin-top:26px;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);grid-auto-rows:auto;gap:16px}
.servizio.area{padding:24px 26px 22px}
.area h3{font-size:1.3rem}
.area p{font-size:.95rem;margin-top:8px}
.area .etichette,.servizio.area ul{margin-top:12px}
.area .vai{padding-top:16px}
.area-ai{grid-row:span 2;background:linear-gradient(160deg,rgba(0,151,178,.22),var(--pannello) 55%);border-color:rgba(0,196,224,.35)}
.area-ai h3{font-size:1.5rem}
.area-ai p{max-width:54ch}
.area-ai .smista{width:100%;height:auto;margin:auto 0 0;padding-top:20px}
.area-lato{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);gap:18px;align-items:center}
.area-lato .area-testo{display:flex;flex-direction:column;height:100%}
.area-lato .vai{margin-top:auto}
.area-lato svg{width:100%;height:auto;max-height:240px}
.servizio.area:hover .illu .tratto.fondo{stroke:#DCE8EB}
/* i documenti smistati */
.smista .scansione{fill:var(--accento);animation:scansione 1.8s ease-in-out infinite alternate}
@keyframes scansione{to{transform:translateY(96px)}}
.smista .g1{--ax:140px;--ay:110px;--bx:260px;--by:110px;--cx:360px;--cy:0px}
.smista .g2{--ax:140px;--ay:10px;--bx:260px;--by:10px;--cx:360px;--cy:5px;animation-delay:2.5s}
.smista .g3{--ax:140px;--ay:-90px;--bx:260px;--by:-90px;--cx:360px;--cy:10px;animation-delay:5s}
.smista .arrivo-ai{fill:var(--accento);opacity:.14;animation:arrivo 7.5s ease-in-out infinite}
.smista .arrivo-ai.a2{animation-delay:2.5s}.smista .arrivo-ai.a3{animation-delay:5s}
/* le pagine che si compongono sul computer e sul telefono */
@keyframes compone{0%{opacity:0;transform:translateY(10px)}8%,70%{opacity:1;transform:none}78%,100%{opacity:0;transform:translateY(-5px)}}
.pagine .blocco{animation:compone 9s var(--esce) infinite backwards}
.pagine .blocco[data-b="2"]{animation-delay:.5s}.pagine .blocco[data-b="3"]{animation-delay:1s}.pagine .blocco[data-b="4"]{animation-delay:1.5s}
.pagine .blocco.tel[data-b="1"]{animation-delay:.3s}.pagine .blocco.tel[data-b="2"]{animation-delay:.8s}
.pagine .blocco.tel[data-b="3"]{animation-delay:1.3s}.pagine .blocco.tel[data-b="4"]{animation-delay:1.8s}

/* ── Dove può esserti utile: ambiti a sinistra, schema che cambia a destra ── */
.ambiti{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(32px,4.5vw,64px);align-items:center}
.ambiti-lista{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:8px}
.ambito{position:relative;display:grid;grid-template-columns:30px 1fr;gap:14px;padding:13px 18px 14px;border-radius:14px;
  border:1px solid var(--bordo);background:rgba(10,35,41,.55);overflow:hidden;
  transition:border-color .4s,background .4s,transform .4s var(--esce)}
.js .ambito{cursor:pointer}
.ambito>svg{width:30px;height:30px;margin-top:2px}
.ambito h3{font-size:1.08rem;font-weight:650}
.ambito p{margin-top:2px;font-size:.93rem;color:var(--testo-2);line-height:1.45}
.ambito .etichette{margin-top:8px}
.ambito:hover{border-color:var(--bordo-forte)}
.ambito.attivo{border-color:rgba(0,196,224,.5);background:linear-gradient(160deg,rgba(0,151,178,.2),var(--pannello) 60%)}
.ambito.attivo .etichette li{border-color:rgba(0,196,224,.3);color:var(--testo)}
.ambito:focus-visible{outline:2px solid var(--accento);outline-offset:3px}
.avanza{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accento);transform:scaleX(0);transform-origin:left}
.ambiti.gira .ambito.attivo .avanza{animation:avanza 6s linear forwards}
@keyframes avanza{to{transform:none}}
.tavola-barra{position:relative;display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--bordo);background:var(--pannello-2)}
.tavola-barra .punto{width:10px;height:10px;border-radius:50%;background:var(--accento);box-shadow:0 0 0 4px var(--accento-tenue)}
.tavola-barra b{font-size:.95rem}
.tavola-barra small{margin-left:auto;font-size:.75rem;color:var(--testo-2);border:1px solid var(--bordo);border-radius:999px;padding:2px 10px}
.ambiti-tavola svg{padding:clamp(14px,1.8vw,22px)}
.scene .scena{opacity:0;visibility:hidden;transition:opacity .4s var(--esce),visibility 0s .4s}
.scene .scena.attiva{opacity:1;visibility:visible;transition:opacity .7s var(--esce)}
.scene .scena:not(.attiva) *{animation:none}
/* elementi che entrano in sequenza, ciclo di 10 s */
@keyframes entra-s{0%{opacity:0;transform:translateY(10px)}6%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
.scene .e{animation:entra-s 10s var(--esce) infinite backwards}
.scene .d1{animation-delay:.2s}.scene .d2{animation-delay:.7s}.scene .d3{animation-delay:1.2s}.scene .d4{animation-delay:1.9s}
.scene .d5{animation-delay:2.5s}.scene .d6{animation-delay:3.1s}.scene .d7{animation-delay:3.7s}.scene .d8{animation-delay:4.5s}
@keyframes pulsa{0%,100%{opacity:1}50%{opacity:.35}}
.scene .pulsa{animation:pulsa 1.6s ease-in-out infinite}
@keyframes suona{0%,70%,100%{transform:none}75%{transform:rotate(14deg)}85%{transform:rotate(-12deg)}92%{transform:rotate(6deg)}}
.scene .campanella{transform-origin:50% 0;animation:suona 2.6s ease-in-out infinite}
.scene .c-g1{--ax:65px;--ay:46px;--bx:153px;--by:46px;--cx:219px;--cy:-16px}
.scene .c-g2{--ax:65px;--ay:-40px;--bx:153px;--by:-40px;--cx:219px;--cy:38px;animation-delay:2.5s}
.scene .c-g3{--ax:65px;--ay:46px;--bx:153px;--by:46px;--cx:219px;--cy:54px;animation-delay:5s}
.scene .arrivo-c{fill:var(--accento);opacity:.14;animation:arrivo 7.5s ease-in-out infinite}
.scene .arrivo-c.a3{animation-delay:2.5s}.scene .arrivo-c.a2{animation-delay:5s}
.scene .fumetto{fill:#123840}
.scene .puntini circle{fill:var(--testo-2)}
@keyframes puntini{0%,9%{opacity:0}11%,18%{opacity:1}19%,100%{opacity:0}}
.scene .puntini{opacity:0;animation:puntini 10s linear infinite}
@keyframes faq{0%,14%{stroke:#C4D6DA;fill:transparent}19%,88%{stroke:var(--accento);fill:rgba(0,196,224,.1)}96%,100%{stroke:#C4D6DA;fill:transparent}}
.scene .faq-scelta{stroke:var(--accento);fill:rgba(0,196,224,.1);animation:faq 10s ease-in-out infinite}
.scene .copre{fill:#0C2A30;transform:scaleX(0);transform-origin:100% 50%;animation:scopre 10s steps(25,end) infinite}
@keyframes scopre{0%,3%{transform:scaleX(1)}25%,92%{transform:scaleX(0)}100%{transform:scaleX(1)}}
.scene .trovato{stroke:var(--accento);fill:rgba(0,196,224,.12);animation:trovato 10s ease-in-out infinite}
@keyframes trovato{0%,26%{stroke:#C4D6DA;fill:#0C2A30}31%,92%{stroke:var(--accento);fill:rgba(0,196,224,.12)}100%{stroke:#C4D6DA;fill:#0C2A30}}
.scene .freccia-doc{animation:entra-s 10s var(--esce) infinite backwards;animation-delay:3.1s}
.scene .evidenzia{fill:var(--accento-tenue);stroke:rgba(0,196,224,.5);stroke-width:1;transform-origin:0 50%;animation:evidenzia 10s var(--esce) infinite}
@keyframes evidenzia{0%,38%{transform:scaleX(0)}48%,90%{transform:none}97%,100%{transform:scaleX(0)}}
.scene .scena[data-scena="1"] .spunta-a.s1{animation-delay:4.2s}
.scene .scena[data-scena="1"] .spunta-a.s2{animation-delay:4.8s}
.scene .scena[data-scena="1"] .spunta-a.s3{animation-delay:5.4s}

/* ── Attenzione ai tuoi dati: disegno a due metà ────────── */
.dati{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(32px,4.5vw,64px);align-items:center}
.dati-tavola{padding:clamp(16px,2vw,24px)}
.strade-dati{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.dato{display:grid;grid-template-columns:34px 1fr;gap:14px;padding:18px 20px;border-radius:14px;border:1px solid var(--bordo);
  background:rgba(10,35,41,.55);transition:border-color .4s,background .4s}
.dato>svg{width:34px;height:34px}
.dato h3{font-size:1.15rem;font-weight:650}
.dato p{margin-top:4px;font-size:.95rem;color:var(--testo-2);line-height:1.5}
.dato .etichette{margin-top:10px}
.dato:hover{border-color:rgba(0,196,224,.5);background:linear-gradient(160deg,rgba(0,151,178,.18),var(--pannello) 60%)}
.custodia .meta{transition:opacity .5s var(--esce)}
.dati:has(.dato-azienda:hover) .meta-cloud,.dati:has(.dato-cloud:hover) .meta-azienda{opacity:.28}
.custodia .confine{fill:rgba(0,196,224,.04);stroke:rgba(0,196,224,.45);stroke-width:1.3;stroke-dasharray:5 6}
.custodia .cometa.giro{stroke-dasharray:18 82;stroke-dashoffset:0;animation:giro 4s linear infinite}
@keyframes giro{to{stroke-dashoffset:-100}}
@keyframes spillo{0%,100%{transform:none}50%{transform:translateY(-6px)}}
.custodia .spillo{animation:spillo 2.4s ease-in-out infinite}
.custodia .spunta-a.s1{animation-delay:1s}.custodia .spunta-a.s2{animation-delay:1.6s}.custodia .spunta-a.s3{animation-delay:2.2s}

/* ── Come lavoriamo: il percorso che si traccia, una tappa illustrata per passo ── */
.percorso{margin-top:22px}
.binario{display:block;width:100%;height:64px;overflow:visible}
.binario path{fill:none;stroke-linecap:round}
.binario-base{stroke:var(--bordo-forte);stroke-width:2;stroke-dasharray:3 6}
.binario-pieno{stroke:var(--accento);stroke-width:2.4;stroke-dasharray:1}
.js .binario-pieno{stroke-dashoffset:1;transition:stroke-dashoffset 2s var(--esce) .2s}
.js .percorso.visto .binario-pieno{stroke-dashoffset:0}
.binario-luce{stroke:#BFF6FF;stroke-width:4;stroke-dasharray:.04 1;stroke-dashoffset:.04;opacity:0;transition:opacity .6s 2s}
.percorso.visto .binario-luce{opacity:1;animation:luce 4.5s linear infinite}
@keyframes luce{from{stroke-dashoffset:.04}to{stroke-dashoffset:-1}}
.js main>section[data-vivo]:not(.in-vista) .binario-luce{animation-play-state:paused}
.passi.tappe{margin:6px 0 0;gap:16px}
.passi.tappe li{min-height:0;padding:16px 16px 20px}
.passi.tappe li::before{position:absolute;top:-52px;left:50%;margin:0 0 0 -16px;z-index:1;box-shadow:0 0 0 5px var(--fondo);
  transition:background .4s,color .4s,box-shadow .4s}
.percorso.visto .tappe li::before{background:var(--accento);color:var(--fondo);box-shadow:0 0 0 5px var(--fondo),0 0 0 10px var(--accento-tenue)}
.percorso.visto .tappe li:nth-child(1)::before{transition-delay:.3s}
.percorso.visto .tappe li:nth-child(2)::before{transition-delay:.8s}
.percorso.visto .tappe li:nth-child(3)::before{transition-delay:1.3s}
.percorso.visto .tappe li:nth-child(4)::before{transition-delay:1.8s}
.tappa-disegno{width:100%;height:auto;margin:0 0 14px;border-radius:12px;background:rgba(6,26,31,.45)}
.tappe h3{font-size:1.25rem}
@keyframes lente{0%,12%{transform:none}44%,56%{transform:translateX(86px)}88%,100%{transform:translateX(172px)}}
.analisi .lente{animation:lente 7s ease-in-out infinite alternate}
.analisi .vetro{fill:rgba(0,196,224,.08)}
.analisi .spunta-a.s1{animation-delay:1s}.analisi .spunta-a.s2{animation-delay:1.6s}.analisi .spunta-a.s3{animation-delay:2.2s}
@keyframes scrivi{0%{transform:scaleX(0)}10%,88%{transform:none}96%,100%{transform:scaleX(0)}}
.proposta .scrivi{transform-origin:0 50%;animation:scrivi 9s var(--esce) infinite backwards}
.proposta .w2{animation-delay:.4s}.proposta .w3{animation-delay:.8s}.proposta .w4{animation-delay:1.2s}.proposta .w5{animation-delay:1.6s}.proposta .w6{animation-delay:2s}
.proposta .firma{stroke-dasharray:1;stroke-dashoffset:0;animation:firma 9s ease-in-out infinite}
@keyframes firma{0%,30%{stroke-dashoffset:1}42%,88%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:1}}
@keyframes penna{0%,100%{transform:none}25%{transform:translate(-8px,6px)}50%{transform:translate(-2px,10px)}75%{transform:translate(-10px,2px)}}
.proposta .penna{animation:penna 1.8s ease-in-out infinite}
@keyframes monta-a{0%,6%{transform:translate(-22px,-18px);opacity:.25}20%,86%{transform:none;opacity:1}96%,100%{transform:translate(-22px,-18px);opacity:.25}}
@keyframes monta-b{0%,14%{transform:translate(26px,-18px);opacity:.25}28%,86%{transform:none;opacity:1}96%,100%{transform:translate(26px,-18px);opacity:.25}}
@keyframes monta-c{0%,22%{transform:translate(0,26px);opacity:.25}36%,86%{transform:none;opacity:1}96%,100%{transform:translate(0,26px);opacity:.25}}
.realizza .pezzo-a{animation:monta-a 8s var(--esce) infinite}
.realizza .pezzo-b{animation:monta-b 8s var(--esce) infinite}
.realizza .pezzo-c{animation:monta-c 8s var(--esce) infinite}
.realizza .interruttore{fill:var(--accento);stroke:var(--accento);stroke-width:1.5;animation:binario-on 8s ease-in-out infinite}
.realizza .manopola{fill:var(--fondo);transform:translateX(30px);animation:manopola 8s ease-in-out infinite}
@keyframes binario-on{0%,44%{fill:rgba(0,196,224,.08);stroke:#C4D6DA}50%,88%{fill:var(--accento);stroke:var(--accento)}94%,100%{fill:rgba(0,196,224,.08);stroke:#C4D6DA}}
@keyframes manopola{0%,44%{transform:none;fill:#C4D6DA}50%,88%{transform:translateX(30px);fill:var(--fondo)}94%,100%{transform:none;fill:#C4D6DA}}
.gestione .pulsa-g{animation:pulsa 1.6s ease-in-out infinite}
.gestione .battito{stroke-dasharray:1;stroke-dashoffset:0;animation:battito 3s linear infinite}
@keyframes battito{0%{stroke-dashoffset:1}60%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}}
.gestione .gira-freccia{transform-origin:50% 50%;animation:gira 4s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
@keyframes cresce{0%{transform:scaleY(0)}12%,86%{transform:none}96%,100%{transform:scaleY(0)}}
.gestione .cresce{transform-origin:50% 100%;animation:cresce 8s var(--esce) infinite backwards}
.gestione .k2{animation-delay:.8s}.gestione .k3{animation-delay:1.6s}

/* ── Primo incontro: tre momenti, sincronizzati con il disegno ── */
.incontro{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,4.5vw,64px);align-items:center}
.momenti{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:10px}
.momenti li{display:grid;grid-template-columns:28px 1fr;gap:2px 12px;padding:14px 18px;border-radius:14px;border:1px solid var(--bordo);
  background:rgba(10,35,41,.55)}
.momenti .spunta{grid-row:span 2;width:26px;height:26px;margin-top:1px}
.momenti .spunta circle{fill:var(--accento-tenue);stroke:rgba(0,196,224,.5);stroke-width:1.2}
.momenti .spunta path{fill:none;stroke:var(--accento);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.momenti b{font-weight:650;font-size:1.02rem}
.momenti span{font-size:.92rem;color:var(--testo-2);line-height:1.45}
.js .momenti .spunta path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .6s var(--esce)}
.js .momenti.visto .spunta path{stroke-dashoffset:0}
.js .momenti.visto li:nth-child(1) .spunta path{transition-delay:.4s}
.js .momenti.visto li:nth-child(2) .spunta path{transition-delay:.8s}
.js .momenti.visto li:nth-child(3) .spunta path{transition-delay:1.2s}
@keyframes momento-li{0%,30%{border-color:rgba(0,196,224,.55);background-color:rgba(0,151,178,.16)}34%,100%{border-color:var(--bordo);background-color:rgba(10,35,41,.55)}}
.momenti li{animation:momento-li 12s ease-in-out infinite}
.momenti li:nth-child(2){animation-delay:4s}.momenti li:nth-child(3){animation-delay:8s}
.incontro .azioni{margin-top:26px}
.incontro-tavola{padding:clamp(16px,2vw,24px)}
.incontro-disegno .cornice{fill:#0C2A30;stroke:rgba(255,255,255,.16);stroke-width:1.4;animation:cornice 12s ease-in-out infinite}
.incontro-disegno .m2 .cornice{animation-delay:4s}.incontro-disegno .m3 .cornice{animation-delay:8s}
@keyframes cornice{0%,30%{stroke:var(--accento);fill:#0E3038}34%,100%{stroke:rgba(255,255,255,.16);fill:#0C2A30}}
.incontro-disegno .schizzo{stroke-dasharray:1;stroke-dashoffset:0;animation:schizzo 12s ease-in-out infinite}
@keyframes schizzo{0%{stroke-dashoffset:1}22%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@keyframes matita{0%,100%{transform:none}30%{transform:translate(-30px,20px)}60%{transform:translate(-60px,4px)}}
.incontro-disegno .matita{animation:matita 3s ease-in-out infinite}
.incontro-disegno .gettone-m{fill:var(--accento);animation:passa 3.2s ease-in-out infinite}
@keyframes passa{0%{transform:none;opacity:0}8%{opacity:1}45%,55%{transform:translateX(79px);opacity:1}92%{transform:translateX(158px);opacity:1}100%{transform:translateX(158px);opacity:0}}
.incontro-disegno .viandante{fill:var(--accento);animation:cammina 6s var(--esce) infinite}
@keyframes cammina{0%{transform:none;opacity:0}8%{opacity:1}45%,90%{transform:translateX(220px);opacity:1}100%{transform:translateX(220px);opacity:0}}
.incontro-disegno .attesa-bivio{fill:none;stroke:var(--accento);stroke-width:2;transform-origin:50% 50%;animation:onda 1.8s ease-out infinite}
@keyframes onda{0%{transform:scale(1);opacity:.8}100%{transform:scale(2.6);opacity:0}}

.cornetta .onde{animation:onde 2s ease-in-out infinite}
@keyframes onde{0%,100%{opacity:.2}50%{opacity:1}}
a.recapito:hover .cornetta{animation:squilla .5s ease-in-out 2}
@keyframes squilla{25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}
.orologio .lancetta{transform-origin:50% 100%;animation:gira 12s linear infinite}
.segnaposto{animation:spillo 2.6s ease-in-out infinite}
/* ── Schermi a sezioni ma bassi (1440×900): si stringe quel tanto che basta ── */
@media (min-width:1025px) and (max-height:1000px){
  .ambito{padding:11px 16px 12px}
  .ambito .etichette{margin-top:6px}
  .area-ai .smista{padding-top:14px}
  .momenti li{padding:12px 16px}
}

/* ── Adattamento ───────────────────────────────────────── */
@media (max-width:1024px){
  .aree{grid-template-columns:1fr}
  .area-ai{grid-row:auto}
  .ambiti,.dati,.incontro{grid-template-columns:1fr}
  .dati-tavola{order:2}
  .ambiti-tavola,.dati-tavola,.incontro-tavola{max-width:680px}
  .binario{display:none}
  .passi.tappe{grid-template-columns:1fr 1fr}
  .passi.tappe li::before{position:static;margin:0 0 12px;box-shadow:none}
  .percorso.visto .tappe li::before{box-shadow:0 0 0 6px var(--accento-tenue)}
}
@media (max-width:600px){
  .h-testa{display:block}
  .h-testa p{margin-top:10px}
  .area-lato{grid-template-columns:1fr}
  .area-lato svg{max-width:240px}
  .servizio.area{padding:22px 20px}
  /* da telefono i quattro passi due a due: uno sotto l'altro erano lunghi tre schermi */
  .passi.tappe{grid-template-columns:1fr 1fr;gap:10px}
  .passi.tappe li{padding:12px 12px 14px}
  .tappa-disegno{margin-bottom:10px}
  .tappe h3{font-size:1.02rem}
  .tappe p{font-size:.86rem}
  .illu .nome{font-size:14px}
}

/* ── Riduci movimento: tutto fermo e completo ───────────── */
@media (prefers-reduced-motion:reduce){
  .illu *,.illu,.momenti li{animation:none!important}
  .illu .gettone,.illu .cometa,.scene .puntini,.binario-luce,.incontro-disegno .attesa-bivio,.incontro-disegno .gettone-m{display:none}
  .incontro-disegno .viandante{transform:translateX(220px)}
  .js .momenti .spunta path{stroke-dashoffset:0}
  .js .binario-pieno{stroke-dashoffset:0}
  .ambito:hover{transform:none}
}