/* NTS NEXT — sito. Fondo scuro unico, testo chiaro, il teal del marchio solo dove serve. */

@font-face{font-family:"Archivo";src:url("../font/archivo.woff2") format("woff2");
  font-weight:100 900;font-stretch:62% 125%;font-display:swap}

:root{
  color-scheme:dark;
  --fondo:#061A1F;
  --pannello:#0A2329;
  --pannello-2:#0D2A31;
  --bordo:rgba(255,255,255,.09);
  --bordo-forte:rgba(255,255,255,.18);
  --testo:#E9F1F3;
  --testo-2:#9DB3B8;           /* 8,1:1 sul fondo */
  --accento:#00C4E0;           /* teal chiaro del marchio */
  --accento-tenue:rgba(0,196,224,.12);
  --errore:#FF9C8F;
  --font:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --margine:clamp(20px,5vw,72px);
  --larghezza:1320px;
  --raggio:16px;
  --esce:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px;
  scrollbar-color:#24464E var(--fondo);background:var(--fondo)}
body{margin:0;background:var(--fondo);color:var(--testo);font-family:var(--font);font-stretch:100%;
  font-size:clamp(1rem,.97rem + .15vw,1.0625rem);line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;caret-color:var(--accento)}
::selection{background:var(--accento);color:var(--fondo)}
img,svg{display:block;max-width:100%}
a{color:var(--accento);text-underline-offset:.2em;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--accento);outline-offset:4px;border-radius:4px}
h1,h2,h3{font-family:var(--font);font-weight:700;letter-spacing:-.02em;line-height:1.12;margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
.sprite{position:absolute}
.salta{position:absolute;left:-999px;top:8px;background:var(--accento);color:var(--fondo);padding:10px 16px;z-index:50}
.salta:focus{left:8px}
.contenitore{max-width:var(--larghezza);margin:0 auto;padding:0 var(--margine)}

/* ── Testata ─────────────────────────────────────────────── */
.testata{position:fixed;top:0;left:0;right:0;z-index:30;transition:background .4s,border-color .4s,backdrop-filter .4s;
  border-bottom:1px solid transparent}
.testata.solida{background:rgba(6,26,31,.85);border-bottom-color:var(--bordo);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.testata .riga{max-width:var(--larghezza);margin:0 auto;padding:0 var(--margine);height:68px;display:flex;align-items:center;gap:32px}
.marchio{margin-right:auto;opacity:0;transition:opacity .4s}
.testata.con-marchio .marchio,.no-vetrina .marchio{opacity:1}
.marchio img{height:28px;width:auto}
.menu{display:flex;gap:28px;align-items:center}
.menu a{font-size:.9rem;font-weight:500;color:var(--testo-2);text-decoration:none;transition:color .2s}
.menu a:hover,.menu a[aria-current="page"],.menu a.attivo{color:var(--testo)}
/* la lineetta teal segna dove sei: la pagina, o nella home la sezione che stai guardando */
.menu a{position:relative}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;border-radius:2px;background:var(--accento);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--esce)}
.menu a[aria-current="page"]::after,.menu a.attivo::after{transform:none}
.menu-telefono nav a.attivo{color:var(--accento)}
.pulsante{display:inline-flex;align-items:center;gap:.6em;font:inherit;font-weight:600;font-size:.95rem;
  background:var(--accento);color:var(--fondo);text-decoration:none;padding:.8em 1.4em;border:0;border-radius:999px;cursor:pointer;
  transition:transform .3s var(--esce),background .2s,box-shadow .3s}
.pulsante:hover{background:#41DDF1;transform:translateY(-1px);box-shadow:0 10px 28px -12px rgba(0,196,224,.7)}
.pulsante .chevron{width:.8em;height:.8em;transition:transform .3s var(--esce)}
.pulsante:hover .chevron{transform:translateX(3px)}
.pulsante.contorno{background:transparent;color:var(--testo);box-shadow:inset 0 0 0 1px var(--bordo-forte)}
.pulsante.contorno:hover{box-shadow:inset 0 0 0 1px var(--testo);background:rgba(255,255,255,.04)}
.testata .pulsante{padding:.55em 1.1em;font-size:.88rem}
.menu-telefono{display:none}

/* ── Vetrina iniziale ────────────────────────────────────── */
.vetrina{position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;overflow:hidden;
  padding:110px var(--margine) 90px;isolation:isolate}
.vetrina .luce{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;z-index:-1;pointer-events:none}
.vetrina .luce.a{width:52vmax;height:52vmax;left:-14vmax;top:-18vmax;background:radial-gradient(circle,rgba(0,151,178,.55),transparent 65%);animation:deriva 22s ease-in-out infinite alternate}
.vetrina .luce.b{width:46vmax;height:46vmax;right:-16vmax;bottom:-20vmax;background:radial-gradient(circle,rgba(0,196,224,.35),transparent 65%);animation:deriva 26s ease-in-out infinite alternate-reverse}
.vetrina .trama{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:64px 64px;-webkit-mask-image:radial-gradient(60% 60% at 50% 50%,#000,transparent 80%);mask-image:radial-gradient(60% 60% at 50% 50%,#000,transparent 80%)}
@keyframes deriva{to{transform:translate(8vmax,6vmax) scale(1.08)}}
.vetrina .dentro{max-width:880px}
.vetrina .logo-grande{width:min(520px,78vw);height:auto;margin:0 auto}
.vetrina h1{font-size:clamp(1.9rem,1.3rem + 2.4vw,3.2rem);font-weight:600;letter-spacing:-.025em;line-height:1.1;margin-top:clamp(36px,5vw,56px)}
.vetrina h1 .riga{display:block;overflow:hidden;padding:.04em 0 .1em}
.vetrina h1 .riga>span{display:inline-block;transform:translateY(110%);animation:sale 1s var(--esce) forwards}
.vetrina h1 .riga.seconda>span{color:var(--testo-2);animation-delay:.18s}
@keyframes sale{to{transform:none}}
.vetrina .faro{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .6s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(0,196,224,.13),transparent 70%)}
.vetrina.puntata .faro{opacity:1}
.vetrina:not(.in-vista) .luce{animation-play-state:paused}
.vetrina .sotto{margin:20px auto 0;max-width:52ch;color:var(--testo-2);font-size:clamp(1rem,.95rem + .25vw,1.125rem)}
.vetrina .azioni{justify-content:center}
/* centrato con i margini, non con transform: l'animazione «entra» finisce su transform:none e lo spostava */
.scorri{position:absolute;left:0;right:0;width:max-content;margin:0 auto;bottom:28px;display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--testo-2);text-decoration:none}
.scorri i{width:1px;height:42px;background:linear-gradient(var(--accento),transparent);animation:scende 2.2s var(--esce) infinite;transform-origin:top}
@keyframes scende{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.entra{opacity:0;transform:translateY(16px);animation:entra 1s var(--esce) forwards}
.entra.d1{animation-delay:.15s}.entra.d2{animation-delay:.35s}.entra.d3{animation-delay:.55s}.entra.d4{animation-delay:.75s}
@keyframes entra{to{opacity:1;transform:none}}

.azioni{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin-top:34px}

/* ── Sezioni ─────────────────────────────────────────────── */
.sezione{padding:clamp(64px,8vw,104px) 0;position:relative}
.sezione+.sezione{border-top:1px solid var(--bordo)}
.intestazione{max-width:640px}
.intestazione h2{font-size:clamp(1.8rem,1.2rem + 2.2vw,3.25rem)}
.intestazione p{margin-top:14px;color:var(--testo-2);font-size:1.05rem}
.centrata{margin:0 auto;text-align:center}

/* Servizi */
.servizi{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:16px;margin-top:48px}
.servizio{position:relative;display:flex;flex-direction:column;padding:30px 28px 26px;border-radius:var(--raggio);
  background:var(--pannello);border:1px solid var(--bordo);color:var(--testo);text-decoration:none;overflow:hidden;
  transition:transform .4s var(--esce),border-color .3s,background .3s}
.servizio:hover{transform:translateY(-4px);border-color:var(--bordo-forte);background:var(--pannello-2)}
.servizio.primo{background:linear-gradient(160deg,rgba(0,151,178,.22),var(--pannello) 55%);border-color:rgba(0,196,224,.35)}
.servizio .icona{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--accento-tenue);margin-bottom:22px}
.servizio .icona svg{width:24px;height:24px}
.servizio h3{font-size:1.3rem;font-weight:650}
.servizio.primo h3{font-size:1.5rem}
.servizio p{margin-top:10px;color:var(--testo-2);font-size:.98rem}
.servizio ul{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.servizio li{font-size:.8rem;color:var(--testo-2);border:1px solid var(--bordo);border-radius:999px;padding:3px 10px}
.etichette{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.etichette li{font-size:.78rem;color:var(--testo-2);border:1px solid var(--bordo);border-radius:999px;padding:3px 10px}
.servizio .vai{margin-top:auto;padding-top:24px;font-size:.9rem;font-weight:600;color:var(--accento);display:inline-flex;align-items:center;gap:.5em}
.servizio .vai .chevron{width:.75em;height:.75em;transition:transform .3s var(--esce)}
.servizio:hover .vai .chevron{transform:translateX(4px)}
svg .tratto{fill:none;stroke:var(--testo);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
svg .tratto.acc,svg .acc{stroke:var(--accento)}

/* Come funziona: testo + esploso */
.funziona{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,80px);align-items:center}
.funziona .intestazione p{max-width:46ch}
.disegno{margin:0;padding:clamp(18px,2.4vw,28px);border-radius:20px;background:var(--pannello);border:1px solid var(--bordo)}
.esploso{width:100%;height:auto;overflow:visible}
.esploso .tratto{stroke:#C4D6DA;stroke-width:1.4}
.esploso .fondo{fill:#0C2A30}
.esploso .teal{stroke:var(--accento)}
.esploso .campo{fill:var(--accento)}
.esploso .guida{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.2;stroke-dasharray:4 7}
.esploso .flusso{fill:none;stroke:var(--accento);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:2 22;opacity:0}
.esploso .richiamo circle{fill:var(--fondo);stroke:rgba(255,255,255,.3);stroke-width:1.4;transition:fill .5s,stroke .5s}
.esploso .richiamo text{font-family:var(--font);font-weight:700;font-size:14px;fill:var(--testo);text-anchor:middle;dominant-baseline:central;transition:fill .5s}
.esploso .richiamo.acceso circle{fill:var(--accento);stroke:var(--accento)}
.esploso .richiamo.acceso text{fill:var(--fondo)}
.esploso .pezzo{transition:opacity .6s var(--esce),transform .9s var(--esce)}
.legenda{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.legenda li{padding:10px 12px;border-radius:10px;display:grid;grid-template-columns:28px 1fr;gap:2px 10px;transition:background .3s}
.legenda li.acceso{background:var(--accento-tenue)}
.intestazione .legenda{grid-template-columns:1fr;gap:4px;margin-top:30px;position:relative}
.intestazione .legenda::before{content:"";position:absolute;left:26px;top:22px;bottom:22px;width:1px;background:var(--bordo-forte)}
.intestazione .legenda li{position:relative;padding:12px 14px;cursor:default}
.intestazione .legenda .n{background:var(--fondo)}
.intestazione .legenda b{font-size:1rem}
.intestazione .legenda span.d{font-size:.92rem}
.legenda .n{grid-row:span 2;width:24px;height:24px;border-radius:50%;border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;font-size:.75rem;font-weight:700;margin-top:2px;transition:all .4s}
.legenda li.acceso .n{background:var(--accento);border-color:var(--accento);color:var(--fondo)}
.legenda b{font-size:.9rem;font-weight:600}
.legenda span.d{font-size:.86rem;color:var(--testo-2);line-height:1.45}
.disegno figcaption{margin-top:16px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:.82rem;color:var(--testo-2)}
.disegno figcaption span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rivedi{flex:none}
.rivedi{font:inherit;font-size:.8rem;font-weight:600;background:none;border:1px solid var(--bordo-forte);border-radius:999px;padding:5px 12px;color:var(--testo);cursor:pointer}
.rivedi:hover{border-color:var(--accento);color:var(--accento)}

/* Assistenti AI: tipi a sinistra, chat d'esempio a destra */
.assistenti{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,88px);align-items:center}
.tipi-assistente{margin-top:30px;display:grid;gap:10px}
.tipi-assistente button{font:inherit;text-align:left;color:var(--testo);background:var(--pannello);border:1px solid var(--bordo);border-radius:14px;
  padding:16px 18px;cursor:pointer;display:grid;gap:4px;transition:border-color .3s,background .3s}
.tipi-assistente button b{font-size:1.05rem;font-weight:650}
.tipi-assistente button span{font-size:.94rem;color:var(--testo-2);line-height:1.5}
.tipi-assistente button:hover{border-color:var(--bordo-forte)}
.tipi-assistente button[aria-selected="true"]{border-color:rgba(0,196,224,.5);background:linear-gradient(160deg,rgba(0,151,178,.2),var(--pannello) 60%)}
.chat{margin:0;border-radius:20px;background:var(--pannello);border:1px solid var(--bordo);overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.chat-barra{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--bordo);background:var(--pannello-2)}
.chat-barra .punto{width:10px;height:10px;border-radius:50%;background:var(--accento);box-shadow:0 0 0 4px var(--accento-tenue)}
.chat-barra b{font-size:.95rem}
.chat-barra small{margin-left:auto;font-size:.75rem;color:var(--testo-2);border:1px solid var(--bordo);border-radius:999px;padding:2px 10px}
.chat-righe[hidden]{display:none}
.chat-righe{list-style:none;margin:0;padding:22px 20px;display:flex;flex-direction:column;gap:12px;min-height:300px}
.chat-righe li{max-width:82%;padding:11px 15px;border-radius:16px;font-size:.96rem;line-height:1.5}
.chat-righe .io{align-self:flex-end;background:var(--accento);color:var(--fondo);border-bottom-right-radius:5px;font-weight:500}
.chat-righe .ai{align-self:flex-start;background:#123840;border-bottom-left-radius:5px}
.chat-righe li.scrive{color:transparent;width:64px;height:38px;position:relative}
.chat-righe li.scrive::after{content:"";position:absolute;left:16px;top:16px;width:6px;height:6px;border-radius:50%;background:var(--testo-2);
  box-shadow:12px 0 0 var(--testo-2),24px 0 0 var(--testo-2);animation:puntini 1s infinite}
@keyframes puntini{50%{opacity:.35}}
.js .chat-righe li.attesa{display:none}
.chat-righe li.arriva{animation:arriva .45s var(--esce)}
@keyframes arriva{from{opacity:0;transform:translateY(8px) scale(.98)}}
.chat figcaption{padding:0 20px 18px;font-size:.82rem;color:var(--testo-2)}

/* Griglia di schede semplici */
.schede{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:48px}
.scheda{padding:26px 24px;border-radius:var(--raggio);background:var(--pannello);border:1px solid var(--bordo)}
.scheda svg{width:30px;height:30px;margin-bottom:18px}
.scheda h3{font-size:1.08rem;font-weight:650}
.scheda p{margin-top:8px;color:var(--testo-2);font-size:.95rem;line-height:1.6}
.schede.due{grid-template-columns:1fr 1fr}
.schede.due .scheda{padding:clamp(30px,3.4vw,48px);min-height:260px;display:flex;flex-direction:column;justify-content:flex-end}
.schede.due .scheda svg{width:52px;height:52px;margin-bottom:auto;padding-bottom:28px;box-sizing:content-box}
.schede.due .scheda h3{font-size:clamp(1.3rem,1rem + .8vw,1.7rem)}
.schede.due .scheda p{font-size:1.02rem;max-width:46ch}

/* Primo incontro */
.invito{display:grid;grid-template-columns:minmax(0,1.2fr) auto;gap:40px;align-items:center;padding:clamp(32px,4.5vw,56px);
  border-radius:24px;border:1px solid rgba(0,196,224,.35);
  background:radial-gradient(80% 140% at 0% 0%,rgba(0,151,178,.28),transparent 60%),var(--pannello)}
.invito{position:relative;overflow:hidden;isolation:isolate}
.invito::after{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,196,224,.16),transparent) no-repeat;background-size:60% 160%;background-position:0% 0%}
.invito.in-vista::after{animation:spazza 10s ease-in-out infinite alternate}
@keyframes spazza{to{background-position:100% 100%}}
.invito h2{font-size:clamp(1.8rem,1.2rem + 2vw,3rem)}
.invito .pulsante{font-size:1.05rem;padding:1em 1.8em}
.invito p{margin-top:14px;color:var(--testo-2);max-width:56ch}

/* Passi */
.passi{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:passo}
.passi.rotaia{position:relative;padding-top:28px}
.passi.rotaia::before,.passi.rotaia::after{content:"";position:absolute;left:24px;right:24px;top:0;height:2px;border-radius:2px;background:var(--bordo-forte)}
.passi.rotaia::after{background:var(--accento);transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--esce) .2s}
.passi.rotaia.visto::after{transform:none}
.passi.rotaia li::before{transition:background .4s,color .4s,box-shadow .4s}
.passi.rotaia.visto li::before{background:var(--accento);color:var(--fondo);box-shadow:0 0 0 6px var(--accento-tenue)}
.passi.rotaia.visto li:nth-child(1)::before{transition-delay:.3s}.passi.rotaia.visto li:nth-child(2)::before{transition-delay:.7s}
.passi.rotaia.visto li:nth-child(3)::before{transition-delay:1.1s}.passi.rotaia.visto li:nth-child(4)::before{transition-delay:1.5s}
.passi li{counter-increment:passo;padding:26px 24px;border-radius:var(--raggio);background:var(--pannello);border:1px solid var(--bordo)}
.passi li::before{content:counter(passo);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:var(--accento-tenue);color:var(--accento);font-weight:700;font-size:.9rem;margin-bottom:18px}
.passi li{min-height:220px}
.passi h3{font-size:clamp(1.1rem,.95rem + .5vw,1.35rem);font-weight:650}
.passi p{margin-top:8px;color:var(--testo-2);font-size:.95rem;line-height:1.6}
.passi .riceve{margin-top:14px;padding-top:12px;border-top:1px solid var(--bordo);color:var(--testo);font-size:.92rem}
.passi .riceve b{display:block;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accento);font-weight:600;margin-bottom:2px}

/* Domande */
.domande{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;column-gap:40px}
.domande details{border-bottom:1px solid var(--bordo)}
.domande summary{list-style:none;cursor:pointer;padding:20px 36px 20px 0;position:relative;font-weight:600;font-size:1.02rem;transition:color .2s}
.domande summary:hover{color:var(--accento)}
.domande summary::-webkit-details-marker{display:none}
.domande summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;margin-top:-7px;
  border-right:1.5px solid var(--testo-2);border-bottom:1.5px solid var(--testo-2);transform:rotate(45deg);transition:transform .3s var(--esce)}
.domande details[open] summary::after{transform:rotate(225deg);margin-top:-2px}
.domande details p{padding:0 30px 22px 0;color:var(--testo-2);font-size:.96rem}

/* Contatti */
.h-intro{margin-top:12px;color:var(--testo-2);font-size:1.05rem;max-width:52ch}
.contatti-griglia{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(36px,6vw,80px);align-items:start}
.recapiti{margin:32px 0 0;display:grid;grid-template-columns:auto 1fr;font-size:.98rem}
.recapiti dt,.recapiti dd{margin:0;padding:12px 0;border-bottom:1px solid var(--bordo)}
.recapiti dt{padding-right:24px;color:var(--testo-2)}
.recapiti dd a{color:var(--testo);text-decoration:none;font-weight:500}
.recapiti dd a:hover{color:var(--accento)}
.modulo{padding:clamp(24px,3vw,36px);border-radius:20px;background:var(--pannello);border:1px solid var(--bordo)}
.modulo h2{font-size:1.5rem}
.modulo .premessa{margin-top:8px;color:var(--testo-2);font-size:.96rem}
.campo{margin-top:20px}
.campo label{display:block;margin-bottom:6px;font-size:.85rem;font-weight:500;color:var(--testo-2)}
.campo input,.campo textarea{width:100%;font:inherit;font-size:1rem;color:var(--testo);background:var(--fondo);
  border:1px solid var(--bordo-forte);border-radius:10px;padding:12px 14px;transition:border-color .2s,box-shadow .2s}
.campo textarea{min-height:130px;resize:vertical}
.campo input:hover,.campo textarea:hover{border-color:rgba(255,255,255,.3)}
.campo input:focus-visible,.campo textarea:focus-visible{outline:none;border-color:var(--accento);box-shadow:0 0 0 3px rgba(0,196,224,.2)}
.campo[data-errore] input,.campo[data-errore] textarea{border-color:var(--errore)}
.campo .errore{display:none;margin-top:6px;font-size:.88rem;color:var(--errore)}
.campo[data-errore] .errore{display:block}
.trappola{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.invio{margin-top:24px;display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center}
.invio small{color:var(--testo-2);font-size:.85rem}
.pulsante[aria-busy="true"]{opacity:.7;cursor:progress}
/* Esito dell'invio: l'etichetta sopra, il messaggio sotto, allineati sullo stesso bordo
   (accanto, l'etichetta piccola restava appesa in alto e il testo andava a capo male: Simone, 2026-10-15) */
.esito{margin-top:18px;padding:14px 18px 15px;border-radius:10px;border-left:3px solid;font-size:.95rem;line-height:1.5;display:none}
.esito.visibile{display:block}
.esito .stato{display:flex;align-items:center;gap:8px;margin-bottom:4px;font-weight:700;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;line-height:1.2}
.esito .stato::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.esito .testo-esito{display:block;color:var(--testo)}
.esito.ok{background:var(--accento-tenue);border-color:var(--accento)}.esito.ok .stato{color:var(--accento)}
.esito.ko{background:rgba(255,156,143,.1);border-color:var(--errore)}.esito.ko .stato{color:var(--errore)}

/* Piede */
.piede{border-top:1px solid var(--bordo);padding:56px 0 36px;background:#04151A}
.piede .griglia{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.piede img{height:26px;width:auto;margin-bottom:16px}
.piede p,.piede li{font-size:.9rem;color:var(--testo-2);line-height:1.7}
.piede .titoletto{font-size:.8rem;font-weight:600;color:var(--testo);margin-bottom:8px;display:block}
.piede ul{list-style:none;margin:0;padding:0}
.piede a{color:var(--testo-2);text-decoration:none}
.piede a:hover{color:var(--accento)}
.piede .legale{margin-top:40px;padding-top:20px;border-top:1px solid var(--bordo);font-size:.8rem;color:var(--testo-2);
  display:flex;flex-wrap:wrap;gap:4px 22px}


/* ── Pagine interne ──────────────────────────────────────── */
.testa-pagina{position:relative;overflow:hidden;isolation:isolate;padding:clamp(140px,16vw,190px) 0 clamp(64px,8vw,96px);border-bottom:1px solid var(--bordo)}
.testa-pagina .luce{position:absolute;border-radius:50%;filter:blur(80px);opacity:.45;z-index:-1;pointer-events:none;
  width:46vmax;height:46vmax;right:-14vmax;top:-22vmax;background:radial-gradient(circle,rgba(0,151,178,.55),transparent 65%)}
.testa-pagina .trama{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.45;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:64px 64px;-webkit-mask-image:radial-gradient(60% 90% at 80% 0%,#000,transparent 75%);mask-image:radial-gradient(60% 90% at 80% 0%,#000,transparent 75%)}
.briciole{font-size:.85rem;color:var(--testo-2);margin-bottom:18px}
.briciole a{color:var(--testo-2);text-decoration:none}
.briciole a:hover{color:var(--accento)}
.testa-pagina h1{font-size:clamp(2rem,1.3rem + 2.6vw,3.3rem);font-weight:650;max-width:18ch}
.testa-pagina p.sotto{margin-top:18px;max-width:56ch;color:var(--testo-2);font-size:clamp(1rem,.95rem + .3vw,1.15rem)}
.schede.tre{grid-template-columns:repeat(3,minmax(0,1fr))}
.punti{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.punti li{display:flex;gap:12px;align-items:flex-start;color:var(--testo)}
.punti li::before{content:"";flex:none;width:18px;height:18px;margin-top:4px;border-radius:50%;
  background:var(--accento-tenue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.6 2.5L13 6.5' fill='none' stroke='%2300C4E0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.invito .punti{margin-top:18px}

/* Testi legali */
.testo-legale{max-width:760px}
.testo-legale h2{font-size:1.3rem;margin:44px 0 12px}
.testo-legale h3{font-size:1.05rem;margin:26px 0 8px}
.testo-legale p,.testo-legale li{color:var(--testo-2);font-size:1rem}
.testo-legale p+p{margin-top:12px}
.testo-legale ul{padding-left:1.2em;margin:10px 0}
.testo-legale li{margin:6px 0}
.testo-legale strong{color:var(--testo);font-weight:600}
.testo-legale table{width:100%;border-collapse:collapse;margin:14px 0;font-size:.95rem}
.testo-legale th,.testo-legale td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--bordo);color:var(--testo-2)}
.testo-legale th{color:var(--testo);font-weight:600;background:var(--pannello)}
.aggiornata{color:var(--testo-2);font-size:.9rem;margin-top:12px}

/* Faretto: la luce segue il puntatore sulle schede */
.servizio,.scheda,.passi li{position:relative;isolation:isolate}
.servizio::after,.scheda::after,.passi li::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .35s;background:radial-gradient(320px circle at var(--px,50%) var(--py,50%),rgba(0,196,224,.12),transparent 70%)}
.servizio:hover::after,.scheda:hover::after,.passi li:hover::after{opacity:1}
.scheda,.passi li{transition:border-color .3s,transform .4s var(--esce)}
.scheda:hover,.passi li:hover{border-color:var(--bordo-forte);transform:translateY(-3px)}

/* Icone che si disegnano quando entrano in vista (solo con JavaScript) */
.js .disegna .tratto{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s var(--esce) .25s}
.js .visto .disegna .tratto,.js .disegna.visto .tratto{stroke-dashoffset:0}

/* Luce di fondo: ogni sezione ha la sua, a lato alterno, così lo schermo intero non resta piatto */
.sezione:not(:has(.testo-legale)){isolation:isolate;overflow:hidden}
.sezione:not(:has(.testo-legale))::before{content:"";position:absolute;z-index:-1;pointer-events:none;width:60vmax;height:60vmax;border-radius:50%;
  top:50%;left:-22vmax;transform:translateY(-50%);background:radial-gradient(circle,rgba(0,151,178,.13),transparent 62%)}
.sezione:not(:has(.testo-legale)):nth-of-type(even)::before{left:auto;right:-22vmax}

/* Ogni sezione occupa lo schermo e lo scorrimento si aggancia (solo schermi abbastanza grandi).
   «mandatory» + «always»: a ogni gesto si arriva esattamente alla sezione dopo, mai a metà
   (Simone, 2026-10-15: con «proximity» si fermava dove capitava). Il contenuto sta al centro
   dello spazio libero sotto la testata (68px): sopra 68 + 40, sotto 40. Una sezione più alta
   dello schermo si scorre comunque per intero: il browser lo permette anche in «mandatory». */
@media (min-width:821px) and (min-height:620px){
  html:not(:has(.testo-legale)){scroll-snap-type:y mandatory;scroll-padding-top:0}
  .vetrina,.sezione,.testa-pagina{scroll-snap-align:start;scroll-snap-stop:always}
  .piede{scroll-snap-align:end}
  .sezione:not(:has(.testo-legale)){min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:108px 0 40px}
  .sezione:not(:has(.testo-legale))>.contenitore{width:100%}
  /* anche la testata delle pagine interne è una sezione a schermo intero (non nelle pagine legali) */
  body:not(:has(.testo-legale)) .testa-pagina{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:108px 0 40px;border-bottom:0}
  body:not(:has(.testo-legale)) .testa-pagina>.contenitore{width:100%}
}

/* Telefono e schermi bassi: le sezioni sono più alte dello schermo, quindi niente «una per
   gesto». «mandatory» fa così: dentro una sezione che copre tutto lo schermo si scorre libero;
   se lo schermo resta a cavallo di due sezioni, la pagina si allinea all'inizio della più
   vicina, appena sotto la testata. Niente sezioni viste a metà (Simone, 2026-10-15). */
@media (max-width:820px),(max-height:619px){
  html:not(:has(.testo-legale)){scroll-snap-type:y mandatory;scroll-padding-top:68px}
  .vetrina,.sezione,.testa-pagina{scroll-snap-align:start}
  .piede{scroll-snap-align:end}
}

/* Testata interna con un disegno a destra: testo a sinistra, illustrazione animata a destra */
.testa-griglia{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,72px);align-items:center}
.testa-griglia .disegno-testa{width:100%;height:auto;overflow:visible}
@media (max-width:1024px){.testa-griglia{grid-template-columns:1fr}.testa-griglia .disegno-testa{max-width:560px}}

/* Comparsa al passaggio */
.js .appare{opacity:0;transform:translateY(18px);transition:opacity .8s var(--esce),transform .8s var(--esce)}
.js .appare.visto{opacity:1;transform:none}
.js .esploso.in-attesa .pezzo{opacity:0;transform:translateY(12px)}
@keyframes scorre{to{stroke-dashoffset:-48}}
.esploso.vivo .flusso{opacity:1;animation:scorre 1.6s linear infinite}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .entra{opacity:1;transform:none}
  .vetrina h1 .riga>span{transform:none}
  .js .disegna .tratto{stroke-dashoffset:0}
  .passi.rotaia::after{transform:none}
  .scheda:hover,.passi li:hover,.servizio:hover{transform:none}
  .js .appare{opacity:1;transform:none}
  .js .esploso.in-attesa .pezzo{opacity:1;transform:none}
}

/* ── Adattamento ─────────────────────────────────────────── */
@media (max-width:1024px){
  .servizi{grid-template-columns:1fr 1fr}
  .servizio.primo{grid-column:1 / -1}
  .schede,.passi,.schede.tre{grid-template-columns:1fr 1fr}
  .funziona,.assistenti{grid-template-columns:1fr}
  .piede .griglia{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .menu{display:none}
  .testata .pulsante{display:none}
  .menu-telefono{display:block}
  .menu-telefono summary{list-style:none;cursor:pointer;font-size:.9rem;font-weight:600;border:1px solid var(--bordo-forte);padding:7px 16px;border-radius:999px}
  .menu-telefono summary::-webkit-details-marker{display:none}
  .menu-telefono nav{position:absolute;left:0;right:0;top:68px;background:var(--fondo);border-bottom:1px solid var(--bordo);padding:8px var(--margine) 22px}
  .menu-telefono nav a{display:block;padding:14px 0;border-bottom:1px solid var(--bordo);font-weight:600;font-size:1.1rem;color:var(--testo);text-decoration:none}
  .invito{grid-template-columns:1fr}
  .domande,.contatti-griglia,.schede.due{grid-template-columns:1fr}
}
@media (max-width:600px){
  .servizi,.schede,.passi,.schede.tre{grid-template-columns:1fr}
  .legenda{grid-template-columns:1fr}
  .piede .griglia{grid-template-columns:1fr}
  .disegno figcaption{flex-direction:column;align-items:flex-start}
  /* Da telefono meno schemi da scorrere (Simone, 2026-10-15): via i disegni che ripetono il
     testo, e quelli che spiegano qualcosa restano ma più bassi. «main» davanti perché i fogli
     delle pagine, caricati dopo, fissano già alcune altezze. */
  main .servizio.area svg.illu,main .tappa-disegno,main .area-disegno,main .canali-figura{display:none}
  main svg.esploso,main svg.scene,main svg.custodia,main svg.incontro-disegno,
  main svg.disegno-testa,main svg.ciclo,main svg.cerca{max-height:210px;width:100%;margin-left:auto;margin-right:auto}
}