/* NTS NEXT — pagina Siti web. Si appoggia a sito.css: qui solo quello che è di questa pagina.
   I cicli girano solo quando la sezione si vede ([data-vivo].in-vista, messo da sito.js);
   senza JavaScript i disegni sono comunque completi, con «riduci movimento» restano fermi. */

/* ── Colori 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.scuro{stroke:var(--fondo);stroke-width:2}
.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 .conto{font-size:12px;font-weight:700;fill:var(--fondo);text-anchor:middle;dominant-baseline:central}
.illu .riga-doc{font-size:13px;font-weight:600;fill:var(--testo)}
.illu g,.illu rect,.illu circle,.illu path{transform-box:fill-box}

/* I blocchi di pagina che si compongono uno dopo l'altro, poi si svuotano e ricominciano */
@keyframes compone{
  0%{opacity:0;transform:translateY(12px)}
  8%,70%{opacity:1;transform:none}
  78%,100%{opacity:0;transform:translateY(-6px)}
}
.compone .blocco{animation:compone 10s var(--esce) infinite backwards}
.compone .blocco[data-b="2"]{animation-delay:.5s}
.compone .blocco[data-b="3"]{animation-delay:1s}
.compone .blocco[data-b="4"]{animation-delay:1.5s}
.compone .blocco[data-b="5"]{animation-delay:2s}
.compone .blocco.tel[data-b="1"]{animation-delay:.3s}
.compone .blocco.tel[data-b="2"]{animation-delay:.8s}
.compone .blocco.tel[data-b="3"]{animation-delay:1.3s}
.compone .blocco.tel[data-b="4"]{animation-delay:1.8s}
.compone .blocco.tel[data-b="5"]{animation-delay:2.3s}

/* ── 1. Testata ─────────────────────────────────────────── */
.testa-siti .testa-griglia{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.testa-siti .testa-testo h1{font-size:clamp(2.6rem,1.4rem + 4vw,5.2rem)}
.figura-testa{position:relative;isolation:isolate}
.figura-testa::before{content:"";position:absolute;inset:6% 4% 14%;z-index:-1;border-radius:50%;filter:blur(60px);
  background:radial-gradient(closest-side,rgba(0,196,224,.16),transparent)}
.tipi{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tipi a{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 12px;border-radius:999px;border:1px solid var(--bordo-forte);
  color:var(--testo);text-decoration:none;font-size:.92rem;font-weight:500;background:rgba(10,35,41,.6);
  transition:border-color .3s,background .3s,transform .4s var(--esce)}
.tipi a:hover{border-color:var(--accento);background:var(--accento-tenue);transform:translateY(-2px)}
.tipi .punto{width:8px;height:8px;border-radius:50%;background:var(--accento);box-shadow:0 0 0 4px var(--accento-tenue)}
.figura-testa{margin:0}
.figura-testa figcaption{margin-top:12px;font-size:.82rem;color:var(--testo-2);text-align:center}
.js .testa-siti:not(.in-vista) .blocco{animation-play-state:paused}

/* ── 2. Cosa realizziamo: tre righe alternate ───────────── */
/* titolo e frase uno sotto l'altra: la frase a destra restava isolata (Simone, 2026-10-15) */
.cosa-testa h2{font-size:clamp(1.8rem,1.2rem + 2.2vw,3.25rem)}
.cosa-testa p{margin-top:12px;max-width:56ch;color:var(--testo-2);font-size:1.05rem}
/* tre tipi affiancati: una frase e un disegno ciascuno */
.lavori{margin-top:clamp(24px,4vh,44px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.lavoro{display:grid;grid-template-rows:auto 1fr;gap:18px}
.lavoro-testo h3{font-size:clamp(1.3rem,1rem + .9vw,1.75rem);font-weight:650}
.lavoro-testo p{margin-top:8px;color:var(--testo-2);font-size:1rem;max-width:48ch}
.lavoro .scheda.lavoro-disegno{padding:18px;display:grid;align-items:center}
.lavoro .scheda.lavoro-disegno svg{width:100%;height:auto;margin:0}
.lavoro:hover .lavoro-disegno{border-color:var(--bordo-forte)}

/* il visitatore che passa da una pagina all'altra */
@keyframes visita{0%,8%{transform:translateX(0)}22%,30%{transform:translateX(150px)}44%,52%{transform:translateX(300px)}66%,100%{transform:translateX(450px)}}
@keyframes visita-luce{0%,70%{opacity:1}80%,92%{opacity:0}100%{opacity:1}}
.giro-sito .visita{fill:var(--accento);animation:visita 6s var(--esce) infinite,visita-luce 6s linear infinite}
/* il pacco che va dal prodotto alla spedizione */
@keyframes corriere{0%,8%{transform:translateX(0)}24%,32%{transform:translateX(148px)}48%,56%{transform:translateX(298px)}72%,100%{transform:translateX(450px)}}
.giro-negozio .corriere{fill:var(--accento);animation:corriere 6s var(--esce) infinite,visita-luce 6s linear infinite}
@keyframes conto{0%,26%{transform:scale(0)}32%{transform:scale(1.25)}38%,100%{transform:scale(1)}}
.giro-negozio .tinta[cx="240"],.giro-negozio .conto{transform-origin:center;animation:conto 6s var(--esce) infinite}
/* il lucchetto del portale che si apre */
@keyframes apre{0%,30%{transform:none}45%,80%{transform:translateY(-7px)}92%,100%{transform:none}}
.giro-portale .arco{animation:apre 5s var(--esce) infinite}
.js #cosa:not(.in-vista) .illu *{animation-play-state:paused}

/* ── 3. Farsi trovare: elenco che si spunta + pagina dei risultati ── */
.trovare{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.trovare h2{font-size:clamp(1.8rem,1.2rem + 2.2vw,3.1rem)}
.intro{margin-top:14px;color:var(--testo-2);font-size:1.05rem;max-width:52ch}
.spunte{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.spunte li{display:grid;grid-template-columns:28px 1fr;gap:2px 12px;padding:14px 16px;border-radius:14px;border:1px solid var(--bordo);
  background:rgba(10,35,41,.55);transition:border-color .5s,background .5s}
.spunte .spunta{grid-row:span 2;width:26px;height:26px;margin-top:1px}
.spunta circle{fill:var(--accento-tenue);stroke:rgba(0,196,224,.5);stroke-width:1.2;transition:fill .5s}
.spunta path{fill:none;stroke:var(--accento);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.spunte b{font-weight:650;font-size:1rem}
.spunte span{font-size:.9rem;color:var(--testo-2);line-height:1.45}
.js .spunte .spunta path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .6s var(--esce)}
.js .spunte.visto .spunta path{stroke-dashoffset:0}
.js .spunte li{border-color:var(--bordo)}
.js .spunte.visto li{border-color:rgba(0,196,224,.28)}
.js .spunte.visto li:nth-child(1) .spunta path,.js .spunte.visto li:nth-child(1){transition-delay:.4s}
.js .spunte.visto li:nth-child(2) .spunta path,.js .spunte.visto li:nth-child(2){transition-delay:.75s}
.js .spunte.visto li:nth-child(3) .spunta path,.js .spunte.visto li:nth-child(3){transition-delay:1.1s}
.js .spunte.visto li:nth-child(4) .spunta path,.js .spunte.visto li:nth-child(4){transition-delay:1.45s}
.js .spunte.visto li:nth-child(5) .spunta path,.js .spunte.visto li:nth-child(5){transition-delay:1.8s}
.js .spunte.visto li:nth-child(6) .spunta path,.js .spunte.visto li:nth-child(6){transition-delay:2.15s}

.scheda.ricerca{margin:0;padding:clamp(16px,2vw,24px)}
.scheda.ricerca svg{width:100%;height:auto;margin:0}
.ricerca figcaption{margin-top:10px;font-size:.82rem;color:var(--testo-2)}
.cerca .riquadro{fill:var(--accento-tenue);stroke:rgba(0,196,224,.55);stroke-width:1.2}
.cerca .carica{fill:var(--accento)}
.cerca .freccia{fill:var(--testo);stroke:var(--fondo);stroke-width:1.5;stroke-linejoin:round}
.cerca .clic{fill:none;stroke:var(--accento);stroke-width:2}
/* si scrive la ricerca */
@keyframes scrive{0%{transform:scaleX(0)}8%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.cerca .scrive{transform-origin:left center;animation:scrive 9s steps(14,end) infinite}
/* compaiono i risultati */
@keyframes risultato{0%,6%{opacity:0;transform:translateY(10px)}13%,90%{opacity:1;transform:none}97%,100%{opacity:0}}
.cerca .risultato{animation:risultato 9s var(--esce) infinite backwards}
.cerca .risultato[data-r="2"]{animation-delay:.25s}
.cerca .risultato[data-r="3"]{animation-delay:.5s}
.cerca .risultato[data-r="4"]{animation-delay:.75s}
/* si sceglie il risultato */
@keyframes puntatore{0%,30%{transform:translate(470px,450px);opacity:0}36%{opacity:1}48%,86%{transform:translate(250px,240px);opacity:1}94%,100%{transform:translate(250px,240px);opacity:0}}
.cerca .puntatore{animation:puntatore 9s var(--esce) infinite}
@keyframes clic{0%,49%{transform:scale(.2);opacity:0}52%{opacity:1}62%,100%{transform:scale(1.6);opacity:0}}
.cerca .clic{transform-origin:center;animation:clic 9s ease-out infinite}
@keyframes scelto{0%,50%{transform:none}55%{transform:scale(1.015)}62%,100%{transform:none}}
.cerca .scelto .riquadro{transform-origin:center;animation:scelto 9s var(--esce) infinite}
/* e la pagina si apre */
@keyframes carica{0%,54%{transform:scaleX(0);opacity:1}66%{transform:scaleX(1);opacity:1}74%,100%{transform:scaleX(1);opacity:0}}
.cerca .carica{transform-origin:left center;animation:carica 9s var(--esce) infinite}
.js .sezione:not(.in-vista) .cerca *{animation-play-state:paused}

/* ── Adattamento ───────────────────────────────────────── */
@media (max-width:1024px){
  .testa-siti .testa-griglia{grid-template-columns:1fr}
  .figura-testa{max-width:620px}
  .trovare{grid-template-columns:1fr}
  .lavori{grid-template-columns:1fr;gap:36px}
  .figura-testa{margin-top:8px}
}
@media (max-width:600px){
  .spunte{grid-template-columns:1fr}
  .illu .nome{font-size:15px}
}
/* Su schermi a sezioni ma bassi (1440×900) si stringe quel tanto che basta per stare in uno schermo */
@media (min-width:1025px) and (max-height:1000px){
  .spunte li{padding:12px 14px}
}

/* ── Riduci movimento: tutto fermo e completo ───────────── */
@media (prefers-reduced-motion:reduce){
  .illu *,.illu{animation:none!important}
  .js .spunte .spunta path{stroke-dashoffset:0}
  .cerca .puntatore,.cerca .clic,.cerca .carica,.giro-sito .visita,.giro-negozio .corriere{display:none}
  .tipi a:hover{transform:none}
}