/* Pagine verticali travel nello stile del nuovo hub (travel/*.html, generate da
   scripts/genera_verticali_nuove.py). Si appoggia a css/hub-nuovo.css: stesse grandezze
   (--ht-h-prodotto, --ht-h-scheda), stessi grigi, stesse etichette, blocco nero degli strumenti,
   come lavoriamo, domande frequenti e aereo finale. Qui solo i pezzi propri delle verticali:
   testata con la foto della persona, schede testo + illustrazione, flusso dei documenti, confronto
   dei tempi, caso reale, regola dell'assistente, numeri.
   Le entrate sono quelle di js/hub-nuovo.js ([data-entra], [data-entra-gruppo]). */

/* il sito da' 30px di interlinea a tutto: nei componenti delle verticali le righe vanno strette */
.vn-tempi li, .vn-doc, .vn-nodo li, .vn-regola__riga, .vn-numero span, .vn-flusso__etichetta, .vn-mini { line-height: 1.45; }

/* ---------- Testata: testi a sinistra, foto della persona a destra con la mini schermata ---------- */
.vn-hero { padding: 150px 0 0; }
.vn-hero__griglia { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; }
/* stessa breadcrumb di superia.it (.breadcrumb in custom.css): Satoshi 1rem, link grigi, pagina in nero */
.vn-briciole { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 22px; padding: 0; list-style: none;
  font-family: 'Satoshi', sans-serif; font-size: 1rem; font-weight: 500; line-height: 1.5; color: #1a1a1a; }
.vn-briciole a { color: #999; text-decoration: none; transition: color 0.2s ease; }
.vn-briciole a:hover { color: #fe4a22; }
.vn-briciole [aria-current] { font-weight: 600; }
.vn-briciole li + li::before { content: "/"; margin: 0 10px; color: #b0b0b0; }
@media (max-width: 767px) { .vn-briciole { font-size: 0.9rem; margin-bottom: 18px; } .vn-briciole li + li::before { margin: 0 6px; } }
.vn-hero__titolo { margin: 0; font-family: 'Helvetica Now Display', 'Satoshi', sans-serif; font-size: 3.5rem; line-height: 1.08; font-weight: 500;
  -webkit-text-stroke: 0.4px currentColor; color: #1a1a1a; }
.vn-hero__testi .ht-testo { max-width: 540px; }
.vn-hero__testi .animated-btn { margin-top: 32px; }
.vn-hero__prova { display: flex; align-items: baseline; gap: 12px; margin: 28px 0 0; padding-top: 22px; max-width: 460px; border-top: 1px solid #d9dad7; }
.vn-hero__prova b { flex: none; font-family: 'Helvetica Now Display', 'Satoshi', sans-serif; font-size: var(--ht-h-prodotto); font-weight: 500; color: #1a1a1a; }
.vn-hero__prova span { font-size: 16px; line-height: 1.45; color: #454643; }
/* entrata al caricamento, come i template Framer: i testi salgono uno dopo l'altro, la foto
   si apre da un leggero zoom */
.vn-hero__testi > * { animation: vn-sale 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.vn-hero__testi > :nth-child(2) { animation-delay: 0.06s; }
.vn-hero__testi > :nth-child(3) { animation-delay: 0.12s; }
.vn-hero__testi > :nth-child(4) { animation-delay: 0.18s; }
.vn-hero__testi > :nth-child(5) { animation-delay: 0.24s; }
.vn-hero__testi > :nth-child(6) { animation-delay: 0.3s; }
@keyframes vn-sale { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.vn-hero__foto { position: relative; }
.vn-hero__cornice { overflow: hidden; aspect-ratio: 4 / 5; max-height: 76vh; margin-left: auto; border-radius: 1.5rem; background: #f9f9f9;
  animation: vn-apre 1s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.vn-hero__cornice img { width: 100%; height: 100%; object-fit: cover; animation: vn-zoom 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes vn-apre { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes vn-zoom { from { transform: scale(1.08); } to { transform: none; } }
.vn-hero__carta { position: absolute; left: -48px; bottom: 40px; width: min(320px, 80%); animation: vn-sale 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.45s both; }
@media (prefers-reduced-motion: reduce) { .vn-hero__testi > *, .vn-hero__cornice, .vn-hero__cornice img, .vn-hero__carta { animation: none; } }

/* ---------- Mini schermata dello strumento (sulla foto e nei pannelli) ---------- */
.vn-mini { padding: 14px; border-radius: 12px; background: #fff; border: 1px solid #d9dad7; box-shadow: 0 18px 40px rgba(26, 26, 26, 0.12); font-size: 13px; color: #1a1a1a; }
.vn-mini__testa { display: flex; align-items: center; gap: 5px; margin-bottom: 10px; font-size: 12px; font-weight: 700; color: #a6a8a4; }
.vn-mini__testa i { width: 7px; height: 7px; border-radius: 50%; background: #d9dad7; }
.vn-mini__testa span { margin-left: 6px; }
.vn-mini__riga { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-top: 6px; border-radius: 8px; border: 1px solid #ececea; }
.vn-mini__riga b { flex: none; min-width: 38px; padding: 2px 6px; border-radius: 4px; text-align: center; font-size: 10px; background: #f9f9f9; color: #454643; }
.vn-mini__riga span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vn-mini__riga em { margin-left: auto; flex: none; font-style: normal; font-weight: 700; color: #8b5cff; }
.vn-mini__pronto { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 12px; border-radius: 10px; border: 1px solid #ececea; }
.vn-mini__pronto > i { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 8px; background: rgba(139, 92, 255, 0.12); color: #8b5cff; font-style: normal; font-weight: 700; }
.vn-mini__pronto span { min-width: 0; }
.vn-mini__pronto b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; }
.vn-mini__pronto small { display: block; font-size: 12px; color: #a6a8a4; }
.vn-mini__pronto em { margin-left: auto; flex: none; padding: 3px 8px; border-radius: 6px; font-style: normal; font-size: 12px; font-weight: 700; background: #8b5cff; color: #fff; }
.vn-mini__nota { padding: 10px 12px; border-radius: 8px; border: 1px solid #ececea; line-height: 1.7; color: #454643; }
.vn-mini__nota span { display: block; }
/* La mini schermata lavora da sola, a giri di 8 s: le righe entrano una dopo l'altra, la spunta
   scatta, poi compare il file pronto. Fuori dallo schermo si ferma (.ht-ferma). */
.vn-mini > :nth-child(2) { --vn-d: 0.7s; }
.vn-mini > :nth-child(3) { --vn-d: 1.2s; }
.vn-mini > :nth-child(4) { --vn-d: 1.7s; }
.vn-mini > :nth-child(5) { --vn-d: 2.2s; }
.vn-mini > .vn-mini__riga, .vn-mini > .vn-mini__pronto, .vn-mini__nota span { animation: vn-riga 8s cubic-bezier(0.2, 0.7, 0.2, 1) infinite both; animation-delay: var(--vn-d, 0.7s); }
.vn-mini__riga em, .vn-mini__pronto em { animation: vn-spunta 8s ease-out infinite both; animation-delay: calc(var(--vn-d, 0.7s) + 0.35s); }
.vn-mini__nota span:nth-child(2) { --vn-d: 1.3s; }
.vn-mini__nota span:nth-child(3) { --vn-d: 1.9s; }
@keyframes vn-riga { 0% { opacity: 0; transform: translateY(8px); } 6%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes vn-spunta { 0%, 4% { opacity: 0; transform: scale(0.6); } 8% { opacity: 1; transform: scale(1.15); } 11%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vn-mini *, .vn-flusso *, .vn-flusso *::before { animation: none !important; } }
/* nei pannelli neri la mini schermata e' la finestra chiara dentro il riquadro */
.ht-lista__schermata .vn-mini { width: 100%; max-width: 420px; margin: auto; filter: none; box-shadow: none; }

/* ---------- Testo + illustrazione (come Saro: una colonna di testo, un riquadro accanto) ---------- */
.vn-split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center; }
.vn-split--inverso > :first-child { order: 2; }
.vn-split h3 { margin: 0; font-family: 'Helvetica Now Display', 'Satoshi', sans-serif; font-size: var(--ht-h-prodotto); line-height: 1.15; font-weight: 500;
  -webkit-text-stroke: 0.3px currentColor; color: #1a1a1a; }
.vn-split p { margin: 16px 0 0; font-size: 16px; line-height: 1.6; color: #454643; }
.vn-split .animated-btn { margin-top: 28px; }
.vn-visivo { position: relative; display: flex; align-items: center; justify-content: center; min-height: 460px; padding: 28px; border-radius: 1.25rem; overflow: hidden; }
.vn-visivo > :not(.agt-prova__luci) { position: relative; z-index: 1; }
/* accanto a un testo lungo l'illustrazione si allunga fino in fondo alla colonna (WhatsApp: il riquadro
   delle prenotazioni scende sotto i messaggi invece di coprirli) */
.vn-split > .vn-visivo { align-self: stretch; }
.vn-visivo .agv-anim { flex: 1; align-self: stretch; height: auto; min-height: 400px; aspect-ratio: auto; border-radius: 1rem; }
/* niente fondo bianco tra il riquadro nero e la finestra dell'illustrazione: un riquadro in meno */
.vn-visivo .agv-anim { background: transparent; border: 0; box-shadow: none; padding: 0; }
.vn-visivo .vn-mini { width: 100%; max-width: 380px; }
.vn-visivo--video { padding: 0; background: #0b0b0b; }
.vn-visivo--video video { width: 100%; height: 100%; min-height: 460px; object-fit: cover; }

/* ---------- Flusso: come arrivano i documenti -> lo strumento -> cosa esce ---------- */
.vn-flusso { display: grid; grid-template-columns: 1fr auto 1.1fr auto 1fr; gap: 20px; align-items: center; padding: 40px; border-radius: 1.5rem;
  background: #f9f9f9; border: 1px solid rgba(0, 0, 0, 0.06); }
.vn-flusso__col { display: flex; flex-direction: column; gap: 10px; }
.vn-flusso__etichetta { margin-bottom: 4px; font-size: 13px; font-weight: 700; color: #a6a8a4; }
.vn-doc { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid #d9dad7; font-size: 15px; color: #1a1a1a; }
.vn-doc b { flex: none; min-width: 46px; padding: 3px 6px; border-radius: 6px; text-align: center; font-size: 12px; background: #f9f9f9; color: #454643; }
.vn-flusso__col--out .vn-doc b { background: rgba(139, 92, 255, 0.12); color: #8b5cff; }
/* il filo fra le colonne: tratteggio viola che scorre verso lo strumento (si muove solo lo sfondo
   di un elemento di 3px), con la punta */
.vn-filo { position: relative; width: 64px; height: 3px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, #8b5cff 0 8px, transparent 8px 14px) 0 0 / 14px 100%; animation: vn-filo-scorre 0.7s linear infinite; }
.vn-filo::after { content: ""; position: absolute; top: -5px; right: -3px; width: 10px; height: 10px; border-top: 3px solid #8b5cff; border-right: 3px solid #8b5cff; border-radius: 2px; transform: rotate(45deg); }
@keyframes vn-filo-scorre { to { background-position: 14px 0; } }
@keyframes vn-filo-scende { to { background-position: 0 14px; } }
.vn-nodo { position: relative; padding: 26px 24px; border-radius: 1.25rem; overflow: hidden; color: #fff; }
.vn-nodo > :not(.agt-prova__luci) { position: relative; z-index: 1; }
.vn-nodo__nome { display: block; font-family: 'Helvetica Now Display', 'Satoshi', sans-serif; font-size: var(--ht-h-scheda); font-weight: 500; }
.vn-nodo ol { margin: 16px 0 0; padding: 0; list-style: none; counter-reset: passo; }
.vn-nodo li { counter-increment: passo; display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 15px; color: rgba(255, 255, 255, 0.85); }
.vn-nodo li::before { content: counter(passo); flex: none; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: rgba(255, 255, 255, 0.14); }
.vn-nodo p { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.66); }

/* Il flusso lavora a giri di 8 s, da quando e' davanti (.ht-attesa fino ad allora): i documenti in
   entrata si accendono uno dopo l'altro, lo strumento spunta i suoi passi, i file escono */
.vn-flusso__col--in .vn-doc { animation: vn-doc-in 8s ease-in-out infinite both; }
.vn-flusso__col--in .vn-doc:nth-of-type(2) { animation-delay: 0.3s; }
.vn-flusso__col--in .vn-doc:nth-of-type(3) { animation-delay: 0.6s; }
.vn-flusso__col--in .vn-doc:nth-of-type(4) { animation-delay: 0.9s; }
.vn-flusso__col--in .vn-doc:nth-of-type(5) { animation-delay: 1.2s; }
/* in entrata si vede che arrivano in ordine sparso, ma senza confusione: appena inclinati e
   sfalsati di poco, ognuno al suo posto, nessuno sopra l'altro */
.vn-flusso__col--in .vn-doc { box-shadow: 0 4px 12px rgba(26, 26, 26, 0.05); }
.vn-flusso__col--in .vn-doc:nth-of-type(odd) { rotate: -1.2deg; translate: -6px 0; }
.vn-flusso__col--in .vn-doc:nth-of-type(even) { rotate: 1.2deg; translate: 6px 0; }
@keyframes vn-doc-in { 0%, 12%, 100% { border-color: #d9dad7; transform: none; } 4%, 8% { border-color: #8b5cff; transform: translateX(6px); } }
.vn-nodo li::before { animation: vn-passo 8s ease-out infinite both; }
.vn-nodo li { animation: vn-passo-testo 8s ease-out infinite both; }
.vn-nodo li:nth-child(2) { animation-delay: 0.4s; }
.vn-nodo li:nth-child(3) { animation-delay: 0.8s; }
.vn-nodo li:nth-child(4) { animation-delay: 1.2s; }
@keyframes vn-passo-testo { 0%, 26%, 100% { color: rgba(255, 255, 255, 0.55); } 30%, 92% { color: #fff; } }
.vn-nodo li:nth-child(2)::before { animation-delay: 0.4s; }
.vn-nodo li:nth-child(3)::before { animation-delay: 0.8s; }
.vn-nodo li:nth-child(4)::before { animation-delay: 1.2s; }
@keyframes vn-passo { 0%, 26%, 100% { background: rgba(255, 255, 255, 0.14); } 30%, 92% { background: #8b5cff; } }
.vn-flusso__col--out .vn-doc { animation: vn-doc-out 8s ease-out infinite both; }
.vn-flusso__col--out .vn-doc:nth-of-type(2) { animation-delay: 0.25s; }
.vn-flusso__col--out .vn-doc:nth-of-type(3) { animation-delay: 0.5s; }
.vn-flusso__col--out .vn-doc:nth-of-type(4) { animation-delay: 0.75s; }
.vn-flusso__col--out .vn-doc:nth-of-type(5) { animation-delay: 1s; }
@keyframes vn-doc-out { 0%, 48%, 100% { opacity: 0.35; transform: translateX(-6px); } 54%, 94% { opacity: 1; transform: none; } }

/* ---------- Tempi: oggi contro lo strumento ---------- */
.vn-tempi { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.vn-tempi__lato { position: relative; display: flex; flex-direction: column; padding: 32px; border-radius: 1.5rem; overflow: hidden; }
/* l'elenco prende lo spazio libero: totale e barra stanno sempre in fondo, alla stessa altezza nei due riquadri */
.vn-tempi__lato ul { flex: 1 0 auto; }
.vn-tempi__lato > :not(.agt-prova__luci) { position: relative; z-index: 1; }
.vn-tempi__lato--oggi { background: #f9f9f9; border: 1px solid rgba(0, 0, 0, 0.06); color: #1a1a1a; }
.vn-tempi__lato--dopo { color: #fff; }
.vn-tempi__nome { color: inherit; margin: 0 0 12px; font-family: 'Helvetica Now Display', 'Satoshi', sans-serif; font-size: var(--ht-h-scheda); font-weight: 500; }
.vn-tempi ul { margin: 0; padding: 0; list-style: none; }
.vn-tempi li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid #d9dad7; font-size: 16px; }
.vn-tempi li b { flex: none; font-weight: 700; }
.vn-tempi__lato--oggi li span { color: #454643; }
.vn-tempi__lato--dopo li { border-color: rgba(255, 255, 255, 0.14); }
.vn-tempi__lato--dopo li span { color: rgba(255, 255, 255, 0.8); }
.vn-tempi__totale { display: flex; justify-content: space-between; align-items: baseline; margin-top: 20px; padding-top: 18px; border-top: 2px solid currentColor; }
.vn-tempi__totale > span:first-child { font-size: 16px; font-weight: 700; }
/* il "Fatto" sta accanto al numero del totale */
.vn-tempi__valore { display: inline-flex; align-items: center; }
.vn-tempi__totale b { font-family: 'Helvetica Now Display', 'Satoshi', sans-serif; font-size: var(--ht-h-prodotto); font-weight: 500; }
/* barra del tempo: piena per oggi, corta per lo strumento; si riempie quando la scheda entra */
.vn-tempi__barra { height: 8px; margin-top: 18px; border-radius: 4px; overflow: hidden; background: #d9dad7; }
.vn-tempi__barra i { display: block; height: 100%; border-radius: 4px; background: #1a1a1a; transform-origin: left center; transform: scaleX(var(--quota, 1));
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.4s; }
.vn-tempi__lato--dopo .vn-tempi__barra { background: rgba(255, 255, 255, 0.14); }
.vn-tempi__lato--dopo .vn-tempi__barra i { background: #8b5cff; }
.vn-tempi__lato.ht-entra:not(.is-entrato) .vn-tempi__barra i { transform: scaleX(0); }
/* Tempi come due timer (js/verticale-nuova.js): corrono alla stessa velocita', le righe si fanno
   una dopo l'altra (in corso, poi spuntate) e chi finisce mostra "Fatto". Senza script restano
   i valori finali scritti nell'HTML. */
.vn-tempi.is-timer li { transition: color 0.3s; }
/* pallino e spunta occupano lo stesso spazio (18px): il pallino e' il centro di 8px, il bordo trasparente fa il resto */
.vn-tempi.is-timer li span::before { content: ""; display: inline-block; box-sizing: content-box; width: 8px; height: 8px; border: 5px solid transparent; margin-right: 8px;
  border-radius: 50%; background-clip: content-box; background-color: #d9dad7; background-repeat: no-repeat; background-position: center; background-size: 12px;
  vertical-align: -4px; transition: background-color 0.3s; }
.vn-tempi.is-timer .vn-tempi__lato--dopo li span::before { background-color: rgba(255, 255, 255, 0.2); }
.vn-tempi.is-timer li.is-in-corso span::before { background-color: #fe4a22; }
/* attivita' completata: tondo pieno con la spunta (nero a mano, viola con lo strumento) */
.vn-tempi.is-timer li.is-fatta span::before { width: 18px; height: 18px; border-width: 0; background-clip: border-box; background-color: #1a1a1a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.vn-tempi.is-timer .vn-tempi__lato--dopo li.is-fatta span::before { background-color: #8b5cff; }
.vn-tempi.is-timer li:not(.is-in-corso):not(.is-fatta) { opacity: 0.45; }
.vn-tempi__totale b { font-variant-numeric: tabular-nums; }
/* "Fatto" a sinistra del numero: spunta grande in un tondo pieno, poi la parola */
.vn-tempi__fatto { display: inline-flex; align-items: center; gap: 8px; margin-right: 16px; font-family: 'Satoshi', sans-serif; font-size: 16px; font-weight: 700;
  color: #8b5cff; opacity: 0; transform: scale(0.6); transition: opacity 0.35s, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1.5); }
.vn-tempi__fatto svg { flex: none; width: 34px; height: 34px; padding: 7px; box-sizing: border-box; border-radius: 50%; background: #8b5cff;
  fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.vn-tempi__lato--dopo .vn-tempi__fatto { color: #fff; }
.vn-tempi__lato--oggi .vn-tempi__fatto { color: #1a1a1a; }
.vn-tempi__lato--oggi .vn-tempi__fatto svg { background: #1a1a1a; }
.vn-tempi__lato.is-finito .vn-tempi__fatto { opacity: 1; transform: none; }
.vn-tempi.is-timer .vn-tempi__barra i { transition: none; }
.vn-tempi__nota { margin: 20px 0 0; text-align: center; font-size: 13px; color: #a6a8a4; }

/* ---------- Caso reale: il numero nel riquadro nero, la storia accanto ---------- */
.vn-caso { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; }
.vn-caso__numero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 360px; padding: 36px; border-radius: 1.5rem; overflow: hidden; color: #fff; }
.vn-caso__numero > :not(.agt-prova__luci) { position: relative; z-index: 1; }
.vn-caso__numero .agt-caso__tag { align-self: flex-start; padding: 4px 10px; font-size: 13px; line-height: 1.3; }
.vn-caso__numero b { margin-top: 18px; font-family: 'Helvetica Now Display', 'Satoshi', sans-serif; font-size: 3.5rem; line-height: 1; font-weight: 500; }
.vn-caso__numero small { margin-top: 10px; font-size: 16px; color: rgba(255, 255, 255, 0.8); }
.vn-caso__testo p { margin: 0 0 16px; font-size: 18px; line-height: 1.6; color: #454643; }
.vn-caso__testo p:first-child { color: #1a1a1a; }

/* ---------- Regola dell'assistente: cosa fa e cosa non fa ---------- */
.vn-regola__righe { display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: 1.5rem; background: #f9f9f9; border: 1px solid rgba(0, 0, 0, 0.06); }
.vn-regola__riga { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; background: #fff; border: 1px solid #d9dad7; font-size: 16px; color: #1a1a1a; }
.vn-regola__riga::before { content: "\2713"; flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-weight: 700; background: rgba(139, 92, 255, 0.12); color: #8b5cff; }
.vn-regola__riga--no { color: #454643; }
.vn-regola__riga--no::before { content: "\2715"; background: rgba(254, 74, 34, 0.12); color: #fe4a22; }

/* ---------- Vetrina: testata al centro con il video sotto (Smistant, che ha un sito suo) ---------- */
.vn-vetrina { padding: 160px 0 0; text-align: center; }
.vn-vetrina .vn-briciole { justify-content: center; }
.vn-vetrina .vn-hero__titolo { max-width: 900px; margin: 0 auto; }
.vn-vetrina .ht-testo { margin: 24px auto 32px; max-width: 640px; }
.vn-vetrina__video { margin-top: 56px; border-radius: 1.5rem; overflow: hidden; background: #0b0b0b; }
.vn-vetrina__video video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 991px) { .vn-vetrina { padding-top: 110px; } .vn-vetrina__video { margin-top: 36px; border-radius: 1rem; } }

/* ---------- Illustrazione grande al centro con tre punti sotto (catalogatore) ---------- */
.vn-largo { max-width: 1040px; margin: 0 auto; }
.vn-largo .vn-visivo { min-height: 540px; }
.vn-largo .vn-visivo .agv-anim { min-height: 480px; }
.vn-punti { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1040px; margin: 32px auto 0; padding: 0; list-style: none; }
.vn-punti li { display: flex; align-items: center; gap: 14px; font-size: 16px; font-weight: 700; color: #1a1a1a; }
.vn-punti li::before { content: ""; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: #8b5cff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 20px no-repeat; }
@media (max-width: 991px) { .vn-punti { grid-template-columns: minmax(0, 1fr); gap: 14px; } .vn-largo .vn-visivo, .vn-largo .vn-visivo .agv-anim { min-height: 0; } }

/* ---------- 74-ter: l'abbinamento fatture/pratiche sta direttamente sul riquadro nero ----------
   via la finestra bianca intorno, che faceva tre riquadri uno dentro l'altro */
.vn-visivo .agt-anim--iva, .vn-visivo .agt-anim--iva .agv-panel { background: transparent; border: 0; box-shadow: none; }
.vn-visivo .agt-anim--iva .agv-panel__head { display: none; }

/* logo del prodotto in testa alla vetrina (il file e' bianco: sul fondo bianco diventa scuro) */
.vn-vetrina__logo { display: block; height: 40px; width: auto; margin: 0 auto 28px; filter: invert(1) hue-rotate(180deg); }

/* ---------- CTA arancio al centro, sotto Come funziona e sotto i tempi ---------- */


/* Titolo che deve stare su una riga sola (da desktop; su telefono va a capo) */
@media (min-width: 992px) {
  .ht-testata--centro:has(.vn-una-riga), .ht-titolo:has(.vn-una-riga) { max-width: none; }
  /* sotto i 1280px il titolo piu' lungo (catalogo, ~19 volte la grandezza) resta dentro */
  .ht-titolo:has(.vn-una-riga) { font-size: min(3.5rem, 4vw); }
  .vn-una-riga { white-space: nowrap; }
}

/* ---------- Controllo e sicurezza: titolo a sinistra, lo strumento che lavora a destra ----------
   Le righe entrano una dopo l'altra quando il blocco entra; l'icona si accende dopo la riga.
   Si: spunta viola. No (non invia da solo): croce arancio. Dati: lucchetto nero. */
.vn-controllo .ht-titolo { max-width: none; }
/* ogni riga del titolo resta intera (la seconda e' sempre "tu decidi"); la grandezza scala con la colonna */
.vn-riga { white-space: nowrap; }
@media (min-width: 992px) { .vn-controllo .ht-titolo { font-size: min(3.5rem, 3.8vw); } }
.vn-controllo .ht-spunte { margin-top: 20px; }
/* le spunte a sinistra come le icone a destra: tondo viola pieno con la spunta bianca */
.vn-controllo .ht-spunte li::before { width: 32px; height: 32px; border-radius: 50%;
  background: #8b5cff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 20px no-repeat; }
.vn-controllo__riga { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 12px; background: #fff; border: 1px solid #d9dad7; font-size: 16px; color: #1a1a1a; }
/* icone disegnate in svg (il carattere della spunta veniva piccolo e fuori centro) */
.vn-controllo__riga::before { content: ""; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: #8b5cff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 22px no-repeat; }
.vn-controllo__riga--no::before { background: #fe4a22 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / 20px no-repeat; }
.vn-controllo__riga--dati { margin-top: 8px; background: #1a1a1a; border-color: #1a1a1a; color: #fff; font-weight: 700; }
.vn-controllo__riga--dati::before { content: ""; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / 18px no-repeat; }
.vn-controllo .vn-controllo__riga { opacity: 0; transform: translateY(14px); }
.vn-controllo .vn-controllo__riga::before { transform: scale(0); }
.vn-controllo.is-entrato .vn-controllo__riga { animation: vn-c-riga 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
.vn-controllo.is-entrato .vn-controllo__riga::before { animation: vn-c-icona 0.45s cubic-bezier(0.2, 0.7, 0.2, 1.5) forwards; }
.vn-controllo__riga:nth-child(1), .vn-controllo__riga:nth-child(1)::before { --vn-d: 0.4s; }
.vn-controllo__riga:nth-child(2), .vn-controllo__riga:nth-child(2)::before { --vn-d: 1.1s; }
.vn-controllo__riga:nth-child(3), .vn-controllo__riga:nth-child(3)::before { --vn-d: 1.8s; }
.vn-controllo__riga:nth-child(4), .vn-controllo__riga:nth-child(4)::before { --vn-d: 2.7s; }
.vn-controllo__riga:nth-child(5), .vn-controllo__riga:nth-child(5)::before { --vn-d: 3.5s; }
.vn-controllo.is-entrato .vn-controllo__riga { animation-delay: var(--vn-d); }
.vn-controllo.is-entrato .vn-controllo__riga::before { animation-delay: calc(var(--vn-d) + 0.35s); }
@keyframes vn-c-riga { to { opacity: 1; transform: none; } }
@keyframes vn-c-icona { to { transform: none; } }

/* ---------- PROVA stile squilloo.com (solo preventivi, blocco "Per ogni gruppo") ----------
   Palco chiaro dentro il blocco nero: la richiesta del cliente in alto a sinistra, il filo
   tratteggiato, il preventivo pronto in basso a destra e l'avviso di chi l'ha inviato. Carte
   bianche che galleggiano con ombre morbide. Parte una volta quando la voce si accende. */
/* il palco prende l'altezza dell'elenco a sinistra (js/hub-nuovo.js): con tre voci circa 400px,
   quindi richiesta a sinistra, preventivo a destra piu' in basso, avviso sotto la richiesta */
.vn-scena { position: relative; flex: 1; font-size: 13px; line-height: 1.35; color: #1a1a1a; }
.vn-scena p, .vn-scena ul { line-height: inherit; }
.vn-scena__richiesta, .vn-scena__preventivo, .vn-scena__avviso { position: absolute; background: #fff; border-radius: 16px;
  box-shadow: 0 1px 2px rgba(26, 26, 26, 0.06), 0 18px 44px rgba(26, 26, 26, 0.10); }
.vn-scena__richiesta { top: 0; left: 0; width: 40%; min-width: 220px; padding: 16px; box-sizing: border-box; }
.vn-scena__chi { display: flex; align-items: center; gap: 10px; }
.vn-scena__chi b { display: block; font-size: 14px; }
.vn-scena__chi small { display: block; font-size: 12px; color: #a6a8a4; }
.vn-scena__avatar { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; font-size: 13px; font-weight: 700; color: #fff; }
.vn-scena__avatar--giallo { background: #ffd026; color: #1a1a1a; }
.vn-scena__avatar--viola { background: #8b5cff; }
.vn-scena__avatar--arancio { background: #fe4a22; }
.vn-scena__oggetto { margin: 12px 0 6px; font-size: 15px; font-weight: 700; }
.vn-scena__righe { margin: 0; padding: 0; list-style: none; }
.vn-scena__righe li { display: flex; align-items: center; gap: 8px; padding: 4px 0; color: #454643; }
.vn-scena__righe i { flex: none; width: 18px; height: 18px; border-radius: 50%; background: #d9dad7; }
.vn-scena__righe svg { display: block; width: 100%; height: 100%; padding: 3px; box-sizing: border-box; fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.vn-scena__filo { position: absolute; top: 24%; left: 40%; width: 14%; height: 30%; overflow: visible; }
.vn-scena__tratto { fill: none; stroke: #8b5cff; stroke-width: 1.8; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke; }
/* la maschera scopre il tratteggio lungo il percorso, da un capo all'altro e a velocita' costante */
.vn-scena__traccia { fill: none; stroke: #fff; stroke-width: 28; stroke-dasharray: 100; stroke-dashoffset: 100; }
.vn-scena__preventivo { right: 0; top: 11%; width: 46%; min-width: 250px; padding: 16px; box-sizing: border-box; }
.vn-scena__testa { display: flex; align-items: center; gap: 10px; }
.vn-scena__testa b { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; }
.vn-scena__pdf { flex: none; padding: 4px 6px; border-radius: 6px; font-size: 10px; font-weight: 700; background: rgba(254, 74, 34, 0.12); color: #fe4a22; }
.vn-scena__pronto { position: absolute; top: -14px; right: 16px; padding: 5px 10px; border-radius: 6px; font-size: 12px; font-weight: 700; white-space: nowrap; background: #8b5cff; color: #fff; }
.vn-scena__pronto--arancio { background: #fe4a22; }
.vn-scena__scintilla { position: absolute; width: 10px; height: 10px; background: #fe4a22;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.vn-scena__scintilla--1 { top: -12px; left: -8px; }
.vn-scena__scintilla--2 { top: -16px; right: 10px; width: 7px; height: 7px; }
.vn-scena__scintilla--3 { bottom: -10px; right: -10px; }
.vn-scena__scintilla--4 { bottom: -8px; left: 18px; width: 6px; height: 6px; background: #ffd026; }
.vn-scena__costi { margin: 14px 0 0; padding: 0; list-style: none; }
.vn-scena__costi li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid #ececea; color: #454643; }
.vn-scena__costi b { color: #8b5cff; }
.vn-scena__prezzo { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 2px solid #1a1a1a; }
.vn-scena__prezzo b { font-family: 'Helvetica Now Display', 'Satoshi', sans-serif; font-size: 2rem; font-weight: 500; line-height: 1; }
.vn-scena__prezzo small { font-size: 12px; color: #a6a8a4; }
.vn-scena__avviso { left: 5%; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 10px 28px 10px 10px; border-radius: 12px; }
.vn-scena__logo { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 8px; background: #1a1a1a; }
.vn-scena__logo img { width: 18px; height: auto; }
.vn-scena__avviso b { display: block; font-size: 13px; }
.vn-scena__avviso small { display: block; font-size: 12px; color: #a6a8a4; }
.vn-scena__avviso::after { content: ""; position: absolute; top: 10px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: #8b5cff; }

/* Palco alto (4-5 voci nell'elenco): le carte crescono con il palco invece di restare piccole */
.vn-scena { container-type: size; }
@container (min-height: 430px) {
  .vn-scena__richiesta { width: 44%; padding: 22px; }
  .vn-scena__avatar { width: 46px; height: 46px; font-size: 15px; }
  .vn-scena__chi b { font-size: 16px; }
  .vn-scena__chi small, .vn-scena__avviso small { font-size: 13px; }
  .vn-scena__oggetto { margin: 16px 0 8px; font-size: 18px; }
  .vn-scena__righe li { padding: 7px 0; font-size: 15px; }
  .vn-scena__righe i { width: 22px; height: 22px; }
  .vn-scena__preventivo { top: 18%; width: 50%; padding: 22px; }
  .vn-scena__testa b { font-size: 15px; }
  .vn-scena__pronto { top: -16px; padding: 6px 12px; font-size: 13px; }
  .vn-scena__costi li { padding: 11px 0; font-size: 15px; }
  .vn-scena__prezzo b { font-size: 2.75rem; }
  .vn-scena__prezzo small { font-size: 13px; }
  .vn-scena__avviso { bottom: 4%; padding: 14px 32px 14px 14px; }
  .vn-scena__avviso b { font-size: 15px; }
  .vn-scena__logo { width: 40px; height: 40px; }
  .vn-scena__logo img { width: 22px; }
  .vn-scena__filo { top: 30%; left: 44%; width: 6%; height: 34%; }
}
@container (min-height: 560px) {
  .vn-scena__richiesta { top: 3%; }
  .vn-scena__preventivo { top: 22%; }
  .vn-scena__avviso { bottom: 7%; }
  .vn-scena__costi li { padding: 13px 0; }
  .vn-scena__prezzo b { font-size: 3.25rem; }
}

/* animazione: richiesta, righe spuntate, filo che si disegna, preventivo, scintille, avviso */
.vn-scena > * { opacity: 0; }
.ht-lista__schermata.is-attiva .vn-scena__richiesta { animation: vn-s-entra 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s forwards; }
.ht-lista__schermata.is-attiva .vn-scena__righe li:nth-child(1) i { animation: vn-s-spunta 0.3s ease-out 0.8s forwards; }
.ht-lista__schermata.is-attiva .vn-scena__righe li:nth-child(2) i { animation: vn-s-spunta 0.3s ease-out 1.1s forwards; }
.ht-lista__schermata.is-attiva .vn-scena__righe li:nth-child(3) i { animation: vn-s-spunta 0.3s ease-out 1.4s forwards; }
.ht-lista__schermata.is-attiva .vn-scena__filo { animation: vn-s-filo 0.01s linear 1.7s forwards; }
.ht-lista__schermata.is-attiva .vn-scena__traccia { animation: vn-s-traccia 0.9s linear 1.7s forwards; }
.ht-lista__schermata.is-attiva .vn-scena__preventivo { animation: vn-s-pop 0.6s cubic-bezier(0.2, 0.7, 0.2, 1.3) 2.4s forwards; }
.vn-scena__costi li, .vn-scena__pronto, .vn-scena__scintilla { opacity: 0; }
.ht-lista__schermata.is-attiva .vn-scena__costi li { animation: vn-s-entra 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
.ht-lista__schermata.is-attiva .vn-scena__costi li:nth-child(1) { animation-delay: 2.8s; }
.ht-lista__schermata.is-attiva .vn-scena__costi li:nth-child(2) { animation-delay: 3s; }
.ht-lista__schermata.is-attiva .vn-scena__costi li:nth-child(3) { animation-delay: 3.2s; }
.ht-lista__schermata.is-attiva .vn-scena__pronto { animation: vn-s-pop 0.5s cubic-bezier(0.2, 0.7, 0.2, 1.6) 3.5s forwards; }
.ht-lista__schermata.is-attiva .vn-scena__scintilla { animation: vn-s-scintilla 0.9s ease-out 3.7s forwards; }
.ht-lista__schermata.is-attiva .vn-scena__avviso { animation: vn-s-entra 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 4.4s forwards; }
@keyframes vn-s-entra { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes vn-s-pop { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes vn-s-spunta { to { background: #8b5cff; } }
@keyframes vn-s-filo { to { opacity: 1; } }
@keyframes vn-s-traccia { to { stroke-dashoffset: 0; } }
@keyframes vn-s-scintilla { 0% { opacity: 0; transform: scale(0) rotate(0); } 50% { opacity: 1; transform: scale(1.3) rotate(45deg); } 100% { opacity: 1; transform: scale(1) rotate(90deg); } }
@media (prefers-reduced-motion: reduce) {
  .vn-scena > *, .vn-scena__costi li, .vn-scena__pronto, .vn-scena__scintilla, .vn-controllo .vn-controllo__riga { opacity: 1 !important; animation: none !important; transform: none !important; }
  .vn-scena__righe i { background: #8b5cff; }
  .vn-scena__traccia { stroke-dashoffset: 0; }
  .vn-controllo .vn-controllo__riga::before { transform: none; animation: none; }
}

/* ---------- Numeri ---------- */
.vn-numeri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.vn-numero { padding: 28px; border-radius: 1.25rem; background: #f9f9f9; border: 1px solid rgba(0, 0, 0, 0.06); }
.vn-numero b { display: block; font-family: 'Helvetica Now Display', 'Satoshi', sans-serif; font-size: var(--ht-h-prodotto); font-weight: 500; color: #1a1a1a; }
.vn-numero span { display: block; margin-top: 10px; font-size: 16px; line-height: 1.5; color: #454643; }

@media (max-width: 991px) {
  .vn-hero { padding-top: 110px; }
  .vn-hero__griglia, .vn-split, .vn-caso, .vn-tempi, .vn-numeri { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .vn-split--inverso > :first-child { order: 0; }
  .vn-hero__titolo { font-size: 32px; }
  .vn-hero__cornice { max-height: none; aspect-ratio: 4 / 4.4; }
  .vn-hero__carta { position: relative; left: auto; bottom: auto; width: auto; margin: -110px 16px 0; }
  .vn-visivo { min-height: 0; padding: 16px; }
  .vn-visivo .agv-anim { min-height: 0; height: 410px; zoom: 0.7; }
  .vn-visivo--video video { min-height: 260px; height: 260px; }
  .vn-flusso { grid-template-columns: minmax(0, 1fr); padding: 20px; gap: 14px; }
  .vn-filo { width: 3px; height: 36px; margin: 0 auto; background: repeating-linear-gradient(180deg, #8b5cff 0 8px, transparent 8px 14px) 0 0 / 100% 14px; animation-name: vn-filo-scende; }
  .vn-filo::after { top: auto; bottom: -3px; right: auto; left: -4px; transform: rotate(135deg); }
  .vn-tempi__lato, .vn-caso__numero { padding: 24px; }
  .vn-caso__numero { min-height: 240px; }
  .vn-caso__numero b { font-size: 32px; }
  .vn-caso__testo p { font-size: 16px; }
}

/* ---------- Riquadro grigio chiaro attorno a un blocco testo + illustrazione (portale passeggeri) ---------- */
.vn-riquadro { padding: 56px; border-radius: 2rem; background: #f9f9f9; border: 1px solid rgba(0, 0, 0, 0.06); }
@media (max-width: 991px) { .vn-riquadro { padding: 24px 20px; border-radius: 1.5rem; } }