/* Hub travel (agenzie-di-viaggio.html).
Impostazione dai template Framer (Trova, Uncharted, Wayfare) e dalle foto di SIAP, ma con il
design system di Superia: Helvetica Now Display per i titoli (500 con contorno sottile = semibold),
Satoshi per i testi, arancio solo sui bottoni, viola per le etichette, angoli di 6px sulle
etichette e niente gradienti di colore. Pagina bianca; la testata e' una foto a tutto schermo.
Le animazioni (testata, parole del manifesto, aereo) sono in js/hub-nuovo.js e muovono solo
transform, opacity e clip-path. */
/* Il sito mette overflow-x: hidden su html e body: cosi' il body diventa il contenitore che scorre
e position: sticky (scena dell'aereo) non si ferma mai. clip taglia allo stesso modo quello che
esce di lato senza creare un contenitore di scorrimento. */
html, body { overflow-x: clip !important; overflow-y: visible !important; }
/* Scala delle grandezze della pagina (navbar, footer e finte schermate a parte): 56 titoli grandi,
32 titoli degli strumenti, 24 schede, 18 testi introduttivi, 16 testi, 15 selettori, 13 etichette,
12 etichette piccole.
Due sole misure per i titoli dentro le sezioni: --ht-h-prodotto per i titoli che presentano uno
strumento (compilatore, altri strumenti, piattaforme, WhatsApp), --ht-h-scheda per le schede
piu' piccole (per chi e', come lavoriamo) */
.ht-pagina { --ht-h-prodotto: 2rem; --ht-h-scheda: 1.5rem; }
.ht-pagina { position: relative; z-index: 1; background: #fff; color: #1a1a1a; font-family: 'Satoshi', sans-serif; }
.ht-contenitore { width: min(1280px, 100% - 10vw); margin: 0 auto; }
.ht-sezione { padding: 120px 0 0; }
.ht-etichetta { display: inline-block; margin-bottom: 18px; padding: 5px 10px; border-radius: 6px; font-family: 'Satoshi', sans-serif;
font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: 0.02em; background: rgba(139, 92, 255, 0.12); color: #8b5cff; }
.ht-titolo { margin: 0; max-width: 760px; font-family: 'Helvetica Now Display', 'Satoshi', sans-serif; font-size: 3.5rem; line-height: 1.1;
font-weight: 500; -webkit-text-stroke: 0.4px currentColor; color: #1a1a1a; }
.ht-testo { margin: 24px 0 0; max-width: 520px; font-size: 18px; line-height: 1.55; color: #454643; }
/* ---------- Testata: foto a tutto schermo, titolo in basso (Trova) ----------
Parallax completo: la testata e' sticky, resta ferma e la pagina bianca (che viene dopo, con
fondo pieno e z-index sopra) ci sale sopra fino a coprirla. Niente animazioni da calcolare a
ogni fotogramma: spostando la foto con lo scroll, risalendo veloce la testata scattava.
Tutto quello che segue la testata ha fondo pieno e sta sopra (z-index 1), footer compreso.
La navbar e' fuori dalla testata, se no la pagina bianca coprirebbe anche lei.
La foto dell'agente e' provvisoria (presa da SIAP per prova): va sostituita con la nostra. */
.ht-hero { position: sticky; top: 0; z-index: 0; display: flex; align-items: center; height: 100vh; height: 100svh; overflow: hidden; background: #1a1a1a; }
/* Foto orizzontale a tutto schermo, senza sfumature (generata con Figma, 24/10): la parete scura
a sinistra (grigio antracite neutro, che sta bene con la navbar nera) tiene i testi bianchi;
l'agente in cuffia sta nel terzo destro e guarda verso i testi. */
.ht-hero__foto { position: absolute; inset: 0; }
.ht-hero__foto picture { display: block; width: 100%; height: 100%; }
.ht-hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
/* Niente velo sulla foto: a sinistra c'e' la finestra in piena luce e qualsiasi velatura la
rendeva un grigio lattiginoso (effetto fumo). La foto resta com'e' e i testi stanno in un
riquadro scuro pieno, come i riquadri neri del sito. */
.ht-hero__velo { display: none; }
/* Dopo l'aereo solo il footer: niente margine sopra (era lo stacco del riquadro CTA, tolto),
altrimenti nel vuoto si vedeva la testata ferma dietro. */
body section.section-8 { position: relative; z-index: 1; margin-top: 0 !important; background: #fff; }
/* flow-root: il margine sopra del primo blocco del footer resta dentro la sezione nera invece di
uscirne sopra (si vedeva come una fascia vuota con la testata dietro) */
body section.section-8, .section-8 > .bg-step-section { display: flow-root; }
.section-8 > .bg-step-section { margin-top: 0 !important; }
/* Footer come Uncharted: foto di paesaggio a tutta larghezza, i link in bianco sopra, in basso.
Il velo scurisce la parte bassa dove stanno i testi. */
body .section-8 > .bg-step-section { padding-top: 52vh !important; background:
linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 30%),
linear-gradient(180deg, rgba(8, 8, 8, 0) 40%, rgba(8, 8, 8, 0.72) 62%, rgba(8, 8, 8, 0.9) 100%),
url(../images/travel/footer-montagne-hd.webp) center 35% / cover no-repeat !important; }
/* telefono: meno cielo bianco sopra il footer, che arrivava quasi uno schermo dopo l'aereo */
@media (max-width: 991px) { body:not(.ht-hotel) .section-8 > .bg-step-section { padding-top: 30vh !important; } }
.section-8 .footer-link-3, .section-8 .email, .section-8 .text-size-large, .section-8 .footer-component,
.section-8 .footer-component a { color: rgba(255, 255, 255, 0.9) !important; }
/* testi centrati in verticale; i 60px sopra compensano la navbar, cosi' il blocco sembra al centro
dello spazio libero sotto di lei */
.ht-hero__contenuto { position: relative; z-index: 1; padding-top: 60px; }
/* testi larghi, dal bordo del contenuto: il titolo sta su due righe e finisce dove finisce la
parete scura (per questo cresce con lo schermo fino a 3.6rem) */
/* un'anticchia a destra: quanto basta per superare lo stipite chiaro della finestra nella foto */
.ht-hero__testi { max-width: 820px; margin-left: 16px; }
/* parete scura: testi bianchi direttamente sopra, senza velo ne' riquadro */
.ht-hero__occhio { display: block; margin-bottom: 18px; font-size: 16px; font-weight: 700; color: rgba(255, 255, 255, 0.72); }
.ht-hero__titolo { margin: 0; font-family: 'Helvetica Now Display', 'Satoshi', sans-serif; font-size: clamp(2.8rem, 4vw, 3.5rem); line-height: 1.08;
font-weight: 500; -webkit-text-stroke: 0.5px currentColor; color: #fff; }
.ht-hero__testi p { margin: 24px 0 32px; max-width: 580px; font-size: 18px; line-height: 1.55; color: #fff; }
/* ---------- Manifesto: le parole si accendono mentre si scorre (Uncharted) ---------- */
.ht-manifesto__testo { margin: 0; max-width: 1180px; font-family: 'Helvetica Now Display', 'Satoshi', sans-serif; font-size: var(--ht-h-prodotto); line-height: 1.3;
font-weight: 500; letter-spacing: -0.01em; color: #1a1a1a; }
.ht-manifesto__testo span { color: #d9dad7; transition: color 0.25s; }
.ht-manifesto__testo span.is-accesa { color: #1a1a1a; }
/* Testate delle sezioni: al centro, come nei SaaS (Qarin) */
.ht-testata--centro { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0 auto 48px; max-width: 860px; }
.ht-testata--centro .ht-titolo { max-width: 860px; }
.ht-testata--centro .ht-testo { max-width: 640px; }
/* ---------- Il compilatore: binario con le schede (riferimento able-task) ----------
Binario grigio chiaro, bottone acceso bianco che scorre sotto il nome (cursore), e sotto il
nome una barra viola che si carica: piena, passa da sola alla scheda dopo (js/hub-nuovo.js).
Sotto, testo e animazione del documento: i pannelli stanno in fila e scorrono di lato. */
.ht-binario { position: relative; display: flex; width: max-content; max-width: 100%; margin: 0 auto 20px; padding: 4px; border-radius: 14px; background: #f9f9f9; border: 1px solid rgba(0, 0, 0, 0.06); }
.ht-binario__cursore { position: absolute; top: 4px; bottom: 4px; left: 0; width: var(--ht-cursore-w, 0); border-radius: 10px; background: #fff;
border: 1px solid rgba(0, 0, 0, 0.06); transform: translateX(var(--ht-cursore-x, 4px)); transition: transform 0.45s cubic-bezier(0.3, 0.7, 0.2, 1), width 0.45s cubic-bezier(0.3, 0.7, 0.2, 1); }
.ht-binario__scheda { all: unset; box-sizing: border-box; position: relative; z-index: 1; cursor: pointer; overflow: hidden; height: 44px; padding: 0 22px; border-radius: 10px;
font-family: 'Satoshi', sans-serif; font-size: 15px; font-weight: 700; line-height: 44px; white-space: nowrap; color: #454643; transition: color 0.3s; }
.ht-binario__scheda:hover, .ht-binario__scheda.is-attiva { color: #1a1a1a; }
.ht-binario__scheda:focus-visible { outline: 2px solid #8b5cff; outline-offset: 2px; }
.ht-binario__carica { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: #8b5cff; transform: scaleX(0); transform-origin: left center; }
.ht-binario__scheda.is-attiva .ht-binario__carica, .ht-wa__scheda.is-attiva .ht-binario__carica { animation: ht-carica var(--ht-durata, 7s) linear forwards; }
.ht-binario.is-fermo .ht-binario__carica { animation-play-state: paused !important; }
@keyframes ht-carica { to { transform: scaleX(1); } }
.ht-stack__fondo { padding: 40px; border-radius: 1.5rem; background: #f9f9f9; border: 1px solid rgba(0, 0, 0, 0.06); }
.ht-stack__finestra { overflow: hidden; }
/* i pannelli scorrono staccati di 64px, non attaccati uno all'altro */
.ht-stack__treno { display: flex; gap: 64px; transform: translateX(calc(var(--ht-pannello, 0) * (-100% - 64px))); transition: transform 0.7s cubic-bezier(0.3, 0.7, 0.2, 1); }
.ht-stack__pannello { flex: 0 0 100%; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; align-items: center; }
.ht-stack__testo 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; }
.ht-stack__testo p { margin: 16px 0 0; font-size: 16px; line-height: 1.6; color: #454643; }
.ht-stack__testo ul { margin: 24px 0 0; padding: 0; list-style: none; }
.ht-spunte { margin: 24px 0 0; padding: 0; list-style: none; }
.ht-stack__testo li, .ht-spunte li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid #d9dad7; font-size: 16px; color: #1a1a1a; }
.ht-stack__testo li::before, .ht-spunte li::before { content: ""; flex: none; width: 30px; height: 30px; border-radius: 8px;
background: rgba(139, 92, 255, 0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b5cff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 18px no-repeat; }
/* Bottone secondario: lo stesso bottone del sito ma nero, che si riempie di viola al passaggio.
L'arancio resta solo per le chiamate importanti (consulenza). */
.animated-btn.ht-btn-scuro { margin-top: 28px; background: #1a1a1a; }
.ht-stack__pannello .agv-anim { height: 440px; aspect-ratio: auto; border-radius: 1rem; }
.ht-stack__prova { margin: 28px 0 0; text-align: center; font-size: 16px; color: #454643; }
.ht-stack__prova b { font-family: 'Helvetica Now Display', 'Satoshi', sans-serif; font-size: 18px; font-weight: 500; color: #1a1a1a; }
/* ---------- Gli altri strumenti: riquadro nero che si allarga (Qarin "core features") ----------
Il fondo nero e' uno strato a se' (::before) che si allarga con transform scaleX mentre la
sezione entra (animation-timeline): il browser lo muove senza ridisegnare il contenuto. Prima
il clip-path su tutta la sezione la ridisegnava a ogni fotogramma, animazioni comprese, e
scattava. Dove animation-timeline non c'e' resta largo. */
.ht-funzioni__fondo { position: relative; isolation: isolate; padding: 120px 0; color: #fff; }
.ht-funzioni__fondo::before { content: ""; position: absolute; inset: 0 16px; z-index: -1; border-radius: 1.5rem; background: #0b0b0b; }
@supports (animation-timeline: view()) {
.ht-funzioni__fondo::before { animation: ht-allarga linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
}
@keyframes ht-allarga { from { transform: scaleX(0.9); } to { transform: none; } }
@keyframes ht-allarga-telefono { from { transform: scaleX(0.96); } to { transform: none; } }
/* il contenuto sta sempre dentro il fondo nero, anche quando e' ancora stretto: prima era largo come
la pagina e, scorrendo veloce, testi e schede uscivano dal riquadro sul bianco (si vedeva spaccato) */
.ht-funzioni__fondo { --ht-allarga-da: 0.9; --ht-allarga-margine: 32px; }
.ht-funzioni__fondo .ht-contenitore { width: min(1280px, var(--ht-allarga-da) * (100% - 32px) - 2 * var(--ht-allarga-margine)); }
/* --ht-allarga-da deve valere quanto la scala di partenza dell'animazione (0.9, al telefono 0.96) */
@media (max-width: 991px) {
.ht-funzioni__fondo { --ht-allarga-da: 0.96; --ht-allarga-margine: 12px; }
.ht-funzioni__fondo::before { animation-name: ht-allarga-telefono; }
}
/* telefono: l'allargamento dipende solo da dove entra la sezione, non dalla sua altezza. Aprendo una
voce dell'elenco (o tornando indietro dalla pagina dello strumento) la sezione cambia altezza e il
riquadro si stringeva e si riallargava. */
@supports (animation-timeline: view()) {
@media (max-width: 991px) { .ht-funzioni__fondo::before { animation-range: entry 0px entry 480px; } }
}
.ht-funzioni .ht-titolo { color: #fff; }
.ht-funzioni .ht-testo { color: rgba(255, 255, 255, 0.66); }
.ht-etichetta--scura { background: rgba(139, 92, 255, 0.2); color: #c9b6ff; }
/* Elenco a sinistra, schermata vera a destra (come "Power pack" di Qarin). La voce accesa si apre
con il testo e il link e ha la barra che si carica: piena, passa alla successiva; con il mouse
sopra si ferma (js/hub-nuovo.js). Le schermate sono le animazioni dell'hub: sul nero vanno nella
versione scura del sito (finestre invertite, niente palline), come nelle verticali. */
.ht-funzione__icona { width: 32px; height: 32px; fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* align-items: start e altezza fissa del palco: aprendo e chiudendo le voci l'elenco cambia
altezza, la schermata a destra no (prima si stirava in verticale a ogni cambio) */
.ht-lista { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 32px; align-items: start; }
.ht-lista__voci { display: flex; flex-direction: column; gap: 6px; }
.ht-lista__voce { position: relative; overflow: hidden; border-radius: 14px; border: 1px solid transparent; transition: background-color 0.3s, border-color 0.3s; }
.ht-lista__voce.is-attiva { background: #141414; border-color: #262626; }
.ht-lista__testa { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 16px; width: 100%; padding: 18px 22px; cursor: pointer; }
.ht-lista__testa:focus-visible { outline: 2px solid #8b5cff; outline-offset: -2px; border-radius: 14px; }
.ht-lista__testa .ht-funzione__icona { flex: none; width: 26px; height: 26px; margin: 0; opacity: 0.5; transition: opacity 0.3s; }
.ht-lista__testa small { display: block; margin-bottom: 3px; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: #c9b6ff; }
/* niente contorno qui: bianco su nero il titolo sembrava molto piu' pesante che sul bianco */
.ht-lista__testa b { display: block; font-family: 'Helvetica Now Display', 'Satoshi', sans-serif; font-size: var(--ht-h-prodotto); line-height: 1.15; font-weight: 500;
color: rgba(255, 255, 255, 0.55); transition: color 0.3s; }
.ht-lista__voce.is-attiva .ht-funzione__icona, .ht-lista__testa:hover .ht-funzione__icona { opacity: 1; }
.ht-lista__voce.is-attiva .ht-lista__testa b, .ht-lista__testa:hover b { color: #fff; }
.ht-lista__corpo p { margin: 0; padding: 0 22px 0 64px; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.66); }
/* "Scopri come funziona": un bottone arancio vero, non un link bianco che si perdeva sul nero */
.ht-lista__vai { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin: 16px 22px 22px 64px; padding: 11px 18px; border-radius: 6px;
font-size: 15px; font-weight: 700; color: #fff; text-decoration: none; background: #fe4a22; transition: background-color 0.25s; }
.ht-lista__vai:hover { background: #8b5cff; }
/* solo la voce accesa e' aperta: il corpo si apre con grid-template-rows (0fr -> 1fr) */
/* La voce accesa si apre a un'altezza precisa, uguale per tutte (--ht-corpo, il testo piu' lungo,
calcolata da js/hub-nuovo.js): apertura e chiusura si animano insieme e allo stesso modo, quindi
l'elenco non cambia mai altezza e le voci sotto non saltano. Prima l'altezza era "automatica"
piu' un minimo che scattava di colpo, e le voci si alzavano e abbassavano a strappi. */
.ht-lista__corpo { height: 0; overflow: hidden; transition: height 0.5s cubic-bezier(0.3, 0.7, 0.2, 1); }
.ht-lista__corpo > div { display: flex; flex-direction: column; }
.ht-lista__voce.is-attiva .ht-lista__corpo { height: var(--ht-corpo, auto); }
/* voci senza il link "Scopri come funziona": il testo non deve toccare il bordo sotto del riquadro */
.ht-lista__corpo > div > p:last-child { padding-bottom: 20px; }
.ht-lista__carica { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #8b5cff; transform: scaleX(0); transform-origin: left center; }
.ht-lista__voce.is-attiva .ht-lista__carica { animation: ht-carica var(--ht-durata, 9s) linear forwards; }
.ht-lista.is-fermo .ht-lista__carica { animation-play-state: paused !important; }
.ht-lista__palco { position: relative; height: 585px; border-radius: 1.25rem; background: #141414; border: 1px solid #262626; overflow: hidden; }
.ht-lista__schermata { position: absolute; inset: 0; display: flex; padding: 28px; opacity: 0; visibility: hidden;
transition: opacity 0.45s ease, visibility 0s linear 0.45s; }
.ht-lista__schermata.is-attiva { opacity: 1; visibility: visible; transition: opacity 0.45s ease, visibility 0s; }
.ht-lista__schermata .agv-anim { flex: 1; height: auto; aspect-ratio: auto; background: transparent; border: 0; box-shadow: none; padding: 0; }
.ht-lista__schermata .agv-panel { filter: invert(0.9) hue-rotate(180deg); box-shadow: none; }
.ht-lista__schermata .agt-pv__core { filter: invert(1) hue-rotate(180deg); }
/* ---------- Versione chiara del blocco nero (hub "altri strumenti" e pagine verticali) ----------
Palco grigio chiaro dentro il riquadro nero: le schermate restano coi loro colori (niente invert),
il contenuto sta direttamente sul palco, senza gradienti ne' palline. */
.ht-lista--chiara .ht-lista__palco { background: #f9f9f9; border-color: #262626; }
.ht-lista--chiara .ht-lista__schermata .agv-panel, .ht-lista--chiara .ht-lista__schermata .agt-pv__core { filter: none; }
/* niente finestra bianca intorno (era un riquadro nel riquadro): il contenuto sta sul palco colorato, piu' grande */
.ht-lista--chiara .ht-lista__schermata .agv-panel { background: transparent; border: 0; box-shadow: none; display: flex; flex-direction: column; justify-content: center; }
.ht-lista--chiara .ht-lista__schermata .agv-panel__head { display: none; }
.ht-lista--chiara .ht-lista__schermata .agv-panel > :not(.agv-panel__head) { zoom: 1.15; }
.ht-lista--chiara .ht-lista__schermata > :not(.agt-prova__luci) { position: relative; z-index: 1; }
/* ---------- Manifesto al centro (hub e verticali) ---------- */
.ht-manifesto .ht-contenitore { text-align: center; }
.ht-manifesto__testo { margin: 0 auto; }
/* ---------- Come lavoriamo: l'elemento di Qarin "How it works" ----------
Tre riquadri uguali; sopra, il tracciato SVG di Qarin (884x51) che parte dal centro del primo,
fa un arco fino al centro del secondo e un altro fino al terzo: linea grigia sottile e un
trattino viola che la percorre. Titoli e testi sotto i riquadri, allineati. */
.ht-come__passi { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-top: 51px; }
.ht-come__linea { position: absolute; top: 0; left: calc((100% - 48px) / 6); width: calc((100% - 48px) / 3 * 2 + 48px); height: 51px; overflow: visible; }
.ht-come__linea path { fill: none; stroke: #d9dad7; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* il trattino compare a 4 s (dopo il primo riquadro), corre dal primo al terzo in 3 s e sparisce */
.ht-come__linea .ht-come__scia { stroke: #8b5cff; stroke-width: 2; stroke-dasharray: 5 100; stroke-dashoffset: 105; animation: ht-scia 12s linear infinite both; }
@keyframes ht-scia { 0%, 33.2% { stroke-dashoffset: 105; opacity: 0; } 33.3% { stroke-dashoffset: 105; opacity: 1; } 58.3% { stroke-dashoffset: 5; opacity: 1; } 61%, 100% { stroke-dashoffset: 5; opacity: 0; } }
.ht-passo { display: flex; flex-direction: column; }
/* Fondo e bordino stanno su uno strato dietro (::before) che sfuma verso il basso: cosi' scompare
anche il bordo, come il fondo, mentre l'interfaccia sopra resta piena */
/* interfaccia in alto e riquadro piu' basso: il fondo sfuma e i testi sotto restano vicini */
.ht-passo__visivo { position: relative; isolation: isolate; display: flex; align-items: flex-start; justify-content: center; height: 260px; margin-bottom: 40px; padding: 32px; }
.ht-passo__visivo::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 1rem; background: #f9f9f9; border: 1px solid rgba(0, 0, 0, 0.06);
-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, transparent 100%); }
/* tutte e tre alte uguali: la call ha meno righe e il suo riquadro restava piu' basso */
.ht-passo__ui { display: flex; flex-direction: column; justify-content: space-between; height: 232px; width: 100%; max-width: 320px; padding: 14px; border-radius: 0.75rem; background: #fff; border: 1px solid #d9dad7;
box-shadow: 0 14px 30px rgba(26, 26, 26, 0.06); font-size: 13px; }
.ht-ui__riga { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 4px; border-top: 1px solid #d9dad7; color: #454643; }
.ht-ui__riga em { font-style: normal; font-size: 12px; color: #a6a8a4; white-space: nowrap; }
.ht-ui__riga--testa { border-top: 0; padding-top: 2px; }
.ht-ui__riga--testa b { font-size: 14px; color: #1a1a1a; }
.ht-ui__ok { padding: 3px 8px; border-radius: 6px; font-weight: 700; background: rgba(139, 92, 255, 0.12); color: #8b5cff !important; }
.ht-ui__calendario { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 10px 4px; }
.ht-ui__calendario span { padding: 8px 0; border-radius: 6px; text-align: center; font-weight: 700; background: #f9f9f9; color: #a6a8a4; }
.ht-ui__calendario .is-scelto { background: #1a1a1a; color: #fff; }
/* Le tre interfacce si muovono a giri di 12 s. Prima si anima il primo riquadro (la call si
conferma verso i 3,7 s); a 4 s compare il trattino viola sulla linea e porta al secondo riquadro
(5,5 s) e al terzo (7 s), che partono quando arriva (--ht-passo). Prima della partenza
(.ht-attesa) tutto e' fermo al primo fotogramma, trattino nascosto. Fuori dallo schermo tutto
e' fermo (.ht-ferma). Solo opacity, transform e colori di fondo. */
.ht-passo:nth-of-type(2) { --ht-passo: 5.5s; }
.ht-passo:nth-of-type(3) { --ht-passo: 7s; }
.ht-come .ht-ui__giorno, .ht-come .is-scelto, .ht-come .ht-ui__appare, .ht-come .ht-ui__riga--entra, .ht-come .ht-ui__barra {
animation-duration: 12s; animation-iteration-count: infinite; animation-fill-mode: both; animation-delay: var(--ht-passo, 0s); }
.ht-come .ht-ui__giorno { animation-name: ht-giorno; }
.ht-come .ht-ui__giorno:nth-child(2) { animation-delay: calc(var(--ht-passo, 0s) + 0.45s); }
@keyframes ht-giorno { 0%, 12% { background: #f9f9f9; color: #a6a8a4; } 4%, 8% { background: #d9dad7; color: #1a1a1a; } }
.ht-come .is-scelto { animation-name: ht-scelto; }
@keyframes ht-scelto { 0%, 16% { background: #f9f9f9; color: #a6a8a4; } 20%, 94% { background: #1a1a1a; color: #fff; } 100% { background: #f9f9f9; color: #a6a8a4; } }
.ht-come .ht-ui__appare { animation-name: ht-appare; }
@keyframes ht-appare { 0%, 26% { opacity: 0; transform: scale(0.8); } 31% { opacity: 1; transform: scale(1.08); } 35%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
.ht-come .ht-ui__riga--entra { animation-name: ht-riga-entra; }
.ht-come .ht-ui__riga--entra:nth-child(3) { animation-delay: calc(var(--ht-passo, 0s) + 0.5s); }
.ht-come .ht-ui__riga--entra:nth-child(4) { animation-delay: calc(var(--ht-passo, 0s) + 1s); }
@keyframes ht-riga-entra { 0% { opacity: 0; transform: translateY(8px); } 8%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
.ht-come .ht-ui__riga--entra .ht-ui__appare { animation-name: ht-appare-presto; }
.ht-come .ht-ui__riga--entra:nth-child(3) .ht-ui__appare { animation-delay: calc(var(--ht-passo, 0s) + 0.5s); }
@keyframes ht-appare-presto { 0%, 10% { opacity: 0; transform: scale(0.8); } 15% { opacity: 1; transform: scale(1.08); } 19%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
.ht-ui__riga--file { position: relative; }
.ht-ui__barra { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: #8b5cff; transform: scaleX(0); transform-origin: left center; }
.ht-come .ht-ui__barra { animation-name: ht-barra-file; }
@keyframes ht-barra-file { 0% { transform: scaleX(0); opacity: 1; } 16% { transform: scaleX(1); opacity: 1; } 22%, 100% { transform: scaleX(1); opacity: 0; } }
.ht-come .ht-ui__riga--file .ht-ui__appare { animation-name: ht-appare-presto; animation-delay: calc(var(--ht-passo, 0s) + 0.6s); }
.ht-come .ht-ui__riga--file:nth-child(3) .ht-ui__barra { animation-delay: calc(var(--ht-passo, 0s) + 1s); }
.ht-come .ht-ui__riga--file:nth-child(3) .ht-ui__appare { animation-delay: calc(var(--ht-passo, 0s) + 1.6s); }
.ht-come .ht-ui__riga--file:nth-child(4) .ht-ui__barra { animation-delay: calc(var(--ht-passo, 0s) + 2s); }
.ht-come .ht-ui__riga--file:nth-child(4) .ht-ui__appare { animation-delay: calc(var(--ht-passo, 0s) + 2.6s); }
@media (prefers-reduced-motion: reduce) { .ht-come * { animation: none !important; } }
.ht-passo h3, .ht-passo p { padding: 0 20px; }
.ht-passo h3 { margin: 0; font-family: 'Helvetica Now Display', 'Satoshi', sans-serif; font-size: var(--ht-h-scheda); line-height: 1.2; font-weight: 500; color: #1a1a1a; }
.ht-passo p { margin: 10px 0 0; font-size: 16px; line-height: 1.55; color: #454643; }
/* WhatsApp e casi studio, ripresi dall'hub: 120px sopra come le altre sezioni */
.ht-pagina .agt-casi { width: min(1280px, 100% - 10vw); margin: 120px auto 0; padding-left: 0; padding-right: 0; }
/* testata dei casi con lo stile delle altre sezioni (etichetta, titolo marcato, seconda parte in
grigio) ma allineata a sinistra, sopra le schede che scorrono */
.ht-pagina .agt-casi .ht-testata--centro { align-items: flex-start; margin: 0 0 48px; text-align: left; }
.ht-pagina .agt-casi .ht-testata--centro .ht-testo { margin-top: 16px; }
/* WhatsApp: binario a due schede, sotto il pannello acceso */
/* titolo, testo e selettore vicini */
.ht-wa .ht-testata--centro, .ht-stack .ht-testata--centro { margin-bottom: 28px; }
.ht-wa .ht-testata--centro .ht-testo, .ht-stack .ht-testata--centro .ht-testo { margin-top: 16px; }
.ht-wa__binario { margin-bottom: 24px; }
.ht-wa__scheda { all: unset; box-sizing: border-box; position: relative; z-index: 1; cursor: pointer; overflow: hidden; height: 44px; padding: 0 26px; border-radius: 10px;
font-family: 'Satoshi', sans-serif; font-size: 15px; font-weight: 700; line-height: 44px; color: #454643; transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; }
.ht-wa__scheda:hover { color: #1a1a1a; }
.ht-wa__scheda.is-attiva { color: #1a1a1a; }
.ht-wa__scheda:focus-visible { outline: 2px solid #8b5cff; outline-offset: 2px; }
/* i due pannelli stanno in fila e scorrono di lato come quelli del compilatore (.ht-stack__treno) */
.ht-wa__treno > .ht-wa__pannello { flex: 0 0 100%; }
.ht-wa__sottotitolo { 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; }
.ht-wa__testo .ht-testo { margin-top: 16px; }
.ht-wa .ht-testata--centro .ht-titolo { font-size: 3.5rem; }
/* agente AI: il riquadro in basso dice a chi e' passata la richiesta */
.agt-wa__smistata b { font-size: 12px; color: #1a1a1a; }
.agt-wa__smistata small { display: block; margin-top: 4px; font-size: 10px; line-height: 1.4; color: #454643; }
/* WhatsApp marketing: fondo grigio come il compilatore, la chat nel riquadro nero con le palline
verdi (le palline stanno solo nei riquadri neri appoggiati sul bianco) */
.ht-wa__fondo { display: grid; grid-template-columns: 1.3fr 0.9fr; gap: 56px; align-items: center; padding: 56px; border-radius: 1.5rem; background: #f9f9f9; border: 1px solid rgba(0, 0, 0, 0.06); }
.ht-wa__testo .ht-testo { max-width: 640px; }
.ht-wa__marchio { white-space: nowrap; }
.ht-wa__marchio svg { display: inline-block; width: 1.05em; height: 1.05em; margin-left: 0.2em; vertical-align: -0.18em; }
.ht-wa__visivo { position: relative; display: flex; align-items: center; justify-content: center; min-height: 440px; padding: 24px; border-radius: 1.25rem; }
.ht-wa__visivo > :not(.agt-prova__luci) { position: relative; z-index: 1; }
.ht-wa__visivo .agt-anim--whatsapp { width: 100%; max-width: 440px; min-height: 380px; border-radius: 1rem; overflow: hidden; box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35); }
/* Casi studio sul bianco: schede grigio chiaro come quelle della home; il riquadro del numero resta nero
con le palline */
.ht-pagina .agt-casi .feature-slide.magix { background: #f9f9f9 !important; border: 1px solid rgba(0, 0, 0, 0.06) !important; }
.ht-pagina .agt-casi .feature-slide-title-2 { color: #1a1a1a !important; }
.ht-pagina .agt-casi .agt-caso__num { font-size: 3.5rem; white-space: nowrap; }
/* l'etichetta dei casi ha le misure di .ht-etichetta (senza line-height prendeva i 30px della
pagina ed era alta 40px); i colori restano bianchi perche' sta sul riquadro nero */
.ht-pagina .agt-casi .agt-caso__tag { display: inline-block; align-self: flex-start; padding: 4px 10px; font-size: 13px; line-height: 1.3; letter-spacing: 0.02em; }
.ht-pagina .agt-casi .feature-description-2 { color: #454643 !important; opacity: 1; }
/* Le piattaforme (Smistant, gestionale): sezione sul bianco, schede grigio chiaro del sito con
l'illustrazione dell'hub (fondo nero con le palline) in alto */
.ht-piattaforme { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ht-piattaforma { display: flex; flex-direction: column; align-items: flex-start; padding: 24px 24px 32px; border-radius: 1.25rem; background: #f9f9f9;
border: 1px solid rgba(0, 0, 0, 0.06); color: #1a1a1a; text-decoration: none; }
.ht-piattaforma__schermo { display: flex; width: 100%; height: 340px; margin-bottom: 28px; }
.ht-piattaforma__schermo--video { overflow: hidden; border-radius: 1rem; background: #0b0b0b; }
.ht-piattaforma__schermo--video video { width: 100%; height: 100%; object-fit: cover; }
.ht-piattaforma__schermo .agv-anim { flex: 1; height: auto; aspect-ratio: auto; border-radius: 1rem; }
/* gestionale nella scheda (alta 340px): con cinque righe e il grafico da 64px le righe restavano
alte 21px, le etichette di stato toccavano i bordi e il grafico finiva sopra l'ultima riga.
Quattro righe, un po' piu' di aria e il grafico piu' basso, che resta nel suo spazio. */
.ht-piattaforma .agt-gest__riga:nth-child(5) { display: none; }
.ht-piattaforma .agt-gest__riga { min-height: 28px; }
.ht-piattaforma .agt-gest__grafico { flex-basis: 44px; overflow: hidden; }
.ht-piattaforma .ht-etichetta { margin-bottom: 12px; }
.ht-piattaforma 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; }
.ht-piattaforma p { margin: 10px 0 0; font-size: 16px; line-height: 1.6; color: #454643; }
/* Per chi e': i tre tipi di cliente con la foto (provvisoria, da SIAP) e gli strumenti che usano */
.ht-persone__griglia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ht-persona { display: flex; flex-direction: column; align-items: flex-start; color: #1a1a1a; text-decoration: none; }
.ht-persona__foto { width: 100%; aspect-ratio: 16 / 10; margin-bottom: 22px; overflow: hidden; border-radius: 1rem; background: #f9f9f9; border: 1px solid rgba(0, 0, 0, 0.06); }
.ht-persona__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.ht-persona:hover .ht-persona__foto img { transform: scale(1.03); }
.ht-persona .ht-etichetta { margin-bottom: 12px; }
.ht-persona h3 { margin: 0; font-family: 'Helvetica Now Display', 'Satoshi', sans-serif; font-size: var(--ht-h-scheda); line-height: 1.2; font-weight: 500; color: #1a1a1a; }
.ht-persona p { margin: 10px 0 0; font-size: 16px; line-height: 1.55; color: #454643; }
/* Domande frequenti dentro la pagina bianca */
.ht-pagina .bg-faqs-section.magi { margin-top: 120px !important; padding-bottom: 40px; }
/* FAQ nella scala della pagina: titolo come gli altri titoli di sezione, risposte come i testi */
.ht-pagina .bg-faqs-section .heading-10 { font-size: 3.5rem !important; }
/* Colori fissi e pieni: il testo partiva bianco e si scuriva solo quando lo script aggiungeva
faq-light (ora e' gia' nell'HTML), e le risposte restavano al 70%: grigio chiaro, poco leggibile */
.ht-pagina .bg-faqs-section .accordion-title, .ht-pagina .bg-faqs-section .heading-10 { color: #1a1a1a !important; transition: none !important; }
.ht-pagina .bg-faqs-section .accordion-description { font-size: 16px !important; line-height: 1.6 !important; color: #454643 !important; opacity: 1 !important; transition: none !important; }
.ht-pagina .bg-faqs-section .bold-text-20 { font-size: 18px !important; font-weight: 500; color: #454643 !important; }
.ht-pagina .agt-casi .agt-caso__unita { font-size: 13px; line-height: 1.35; }
/* ---------- L'aereo di Superia: la scena resta ferma mentre si scorre, l'aereo la attraversa
e dietro di lui la frase di oggi diventa quella di domani (Uncharted "Getting there") ---------- */
.ht-volo { position: relative; z-index: 1; height: 260vh; background: #fff; color: #1a1a1a; font-family: 'Satoshi', sans-serif; }
/* al refresh la scena aspetta il primo calcolo di aereo e frasi (.ht-volo--attesa, da js) e poi compare */
.ht-volo--attesa .ht-volo__scena { opacity: 0; }
.ht-volo__scena { transition: opacity 0.35s ease; }
.ht-volo__scena { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
/* oggi e domani stanno nella stessa cella: il riquadro e' alto quanto il piu' lungo. Il taglio
lascia 20px sopra e sotto, se no le lettere con la gamba restavano tagliate. */
.ht-volo__frasi { position: relative; display: grid; width: var(--W); }
/* Il taglio fra oggi e domani: ogni lato e' una "finestra" con il bordo a punta come le ali
(clip-path fisso, --ht-freccia), che scorre con transform fino al punto del taglio, mentre il
suo contenuto scorre al contrario e resta fermo. Solo transform: lo muove il motore grafico
insieme all'aereo, quindi taglio e aereo non si scollano nemmeno scorrendo veloce o tornando
indietro (prima il taglio passava da una variabile ricalcolata a ogni fotogramma e su telefono
restava indietro). --ht-taglio: punto del taglio misurato dal bordo sinistro delle frasi. */
.ht-volo__frasi { --W: min(1100px, 90vw); --f: var(--ht-freccia, 0px); }
.ht-volo__lato { grid-area: 1 / 1; will-change: transform; }
.ht-volo__dentro { display: flex; flex-direction: column; align-items: center; will-change: transform; }
.ht-volo__lato--prima { transform: translateX(var(--ht-taglio, -9999px));
clip-path: polygon(calc(0px - var(--f)) -20px, 300vw -20px, 300vw calc(100% + 20px), calc(0px - var(--f)) calc(100% + 20px), 0 50%); }
.ht-volo__lato--prima > .ht-volo__dentro { transform: translateX(calc(-1 * var(--ht-taglio, -9999px))); }
.ht-volo__lato--dopo { transform: translateX(calc(var(--ht-taglio, -9999px) - var(--W)));
clip-path: polygon(-300vw -20px, calc(100% - var(--f)) -20px, 100% 50%, calc(100% - var(--f)) calc(100% + 20px), -300vw calc(100% + 20px)); }
.ht-volo__lato--dopo > .ht-volo__dentro { transform: translateX(calc(var(--W) - var(--ht-taglio, -9999px))); }
.ht-volo__frase { margin: 0; font-family: 'Helvetica Now Display', 'Satoshi', sans-serif; font-size: 3.5rem; line-height: 1.12; font-weight: 500;
-webkit-text-stroke: 0.4px currentColor; color: #1a1a1a; }
/* Etichetta diversa prima e dopo: oggi grigia con la clessidra, domani viola con le scintille */
.ht-volo__quando { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 28px; padding: 12px 20px 12px 16px; border-radius: 10px;
font-size: 18px; font-weight: 700; line-height: 1.3; }
.ht-volo__quando svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ht-volo__quando--oggi { background: #f9f9f9; border: 1px solid rgba(0, 0, 0, 0.06); color: #454643; }
.ht-volo__quando--domani { background: rgba(139, 92, 255, 0.12); border: 1px solid transparent; color: #8b5cff; }
.ht-volo__quando--domani svg { fill: currentColor; stroke: none; overflow: visible; }
/* Nelle pastiglie: l'orologio di oggi ha le lancette che corrono (il tempo che se ne va), le
stelline di domani brillano una dopo l'altra */
.ht-volo__orologio { overflow: visible; }
.ht-volo__orologio .ht-volo__minuti { transform-origin: 16px 18px; animation: ht-gira 2s linear infinite; }
.ht-volo__orologio .ht-volo__consumo { animation: ht-consumo 2s linear infinite; }
@keyframes ht-gira { to { transform: rotate(360deg); } }
@keyframes ht-consumo { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.ht-volo__stelline path { transform-box: fill-box; transform-origin: center; animation: ht-brilla 1.6s ease-in-out infinite alternate; }
.ht-volo__stelline path:nth-child(2) { animation-delay: -0.55s; }
.ht-volo__stelline path:nth-child(3) { animation-delay: -1.1s; }
@keyframes ht-brilla { from { transform: scale(0.45); opacity: 0.5; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ht-volo__orologio *, .ht-volo__stelline path { animation: none; } }
/* l'aereo e' l'immagine dall'alto, ruotata con il muso a destra; il marchio sta sulla fusoliera */
.ht-volo { --ht-aereo: min(1100px, 120vw); }
.ht-volo__aereo { position: absolute; top: 50%; left: 0; width: var(--ht-aereo); aspect-ratio: 1369 / 1400;
transform: translate(var(--ht-x, -110%), -50%); will-change: transform; pointer-events: none; }
/* Aereo e taglio legati allo scroll direttamente dal CSS (animation-timeline): li muove il browser
insieme allo scroll, senza aspettare lo script, quindi niente ritardi e scatti. Stessi conti
di js/hub-nuovo.js: l'aereo parte tutto fuori a sinistra (-larghezza) ed esce a destra (100vw)
mentre la sezione e' ferma sullo schermo (contain 0%-100%); il taglio sta a 0,5906 della
larghezza dell'aereo, misurato dal bordo sinistro delle frasi (larghe min(1100px, 90vw)).
Dove animation-timeline non c'e' lo fa lo script. */
@supports (animation-timeline: view()) {
.ht-volo { view-timeline: --ht-volo block; }
.ht-volo__aereo, .ht-volo__lato, .ht-volo__dentro { animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --ht-volo; animation-range: contain 0% contain 100%; }
.ht-volo__aereo { animation-name: ht-vola; }
.ht-volo__frasi { --T0: calc(var(--ht-aereo) * -0.4094 - (100vw - var(--W)) / 2); --T1: calc(100vw + var(--ht-aereo) * 0.5906 - (100vw - var(--W)) / 2); }
.ht-volo__lato--prima { animation-name: ht-taglio-prima; }
.ht-volo__lato--prima > .ht-volo__dentro { animation-name: ht-taglio-prima-dentro; }
.ht-volo__lato--dopo { animation-name: ht-taglio-dopo; }
.ht-volo__lato--dopo > .ht-volo__dentro { animation-name: ht-taglio-dopo-dentro; }
}
@keyframes ht-vola { from { transform: translate(calc(var(--ht-aereo) * -1), -50%); } to { transform: translate(100vw, -50%); } }
@keyframes ht-taglio-prima { from { transform: translateX(var(--T0)); } to { transform: translateX(var(--T1)); } }
@keyframes ht-taglio-prima-dentro { from { transform: translateX(calc(-1 * var(--T0))); } to { transform: translateX(calc(-1 * var(--T1))); } }
@keyframes ht-taglio-dopo { from { transform: translateX(calc(var(--T0) - var(--W))); } to { transform: translateX(calc(var(--T1) - var(--W))); } }
@keyframes ht-taglio-dopo-dentro { from { transform: translateX(calc(var(--W) - var(--T0))); } to { transform: translateX(calc(var(--W) - var(--T1))); } }
.ht-volo__aereo > img { width: 100%; height: 100%; transform: rotate(90deg); filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.12)); }
/* Marchio dipinto sulla fusoliera: lungo quasi meta' aereo, alto quanto la fusoliera e tagliato ai
bordi. Grigio piu' chiaro in alto e in basso: si legge come scritto su una superficie tonda. */
.ht-volo__marchio { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; gap: 0.18em; height: calc(var(--ht-aereo) * 0.072); overflow: hidden;
transform: translate(-46%, -50%);
font-family: 'Helvetica Now Display', 'Satoshi', sans-serif; font-size: calc(var(--ht-aereo) * 0.084); line-height: 1; font-weight: 700; letter-spacing: -0.01em;
--ht-tondo: linear-gradient(180deg, #b9b9b4 0%, #454643 26%, #1a1a1a 50%, #454643 74%, #b9b9b4 100%);
background: var(--ht-tondo); -webkit-background-clip: text; background-clip: text; color: transparent;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%); }
.ht-volo__logo { flex: none; width: 0.95em; height: 0.95em; background: var(--ht-tondo); -webkit-background-clip: border-box; background-clip: border-box;
-webkit-mask: url(../images/logo-superia-bianco.svg) center / contain no-repeat; mask: url(../images/logo-superia-bianco.svg) center / contain no-repeat; }
.ht-volo__cta { margin-top: 40px; }
/* Fuori dallo schermo ogni sezione e' ferma: animazioni e timer (le barre che si caricano) ripartono
quando la sezione entra nello schermo (.ht-ferma, da js/hub-nuovo.js) */
.ht-ferma, .ht-ferma *, .ht-ferma *::before, .ht-ferma *::after { animation-play-state: paused !important; }
/* prima della partenza del blocco (.ht-attesa, da js/hub-nuovo.js) tutto resta fermo al primo fotogramma */
.ht-attesa, .ht-attesa *, .ht-attesa *::before, .ht-attesa *::after { animation-play-state: paused !important; }
/* Entrata delle sezioni (classi messe da js/hub-nuovo.js) */
.ht-entra { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--ht-ritardo, 0ms), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--ht-ritardo, 0ms); }
.ht-entra.is-entrato { opacity: 1; transform: none; }
/* finche' aspetta di entrare il blocco ha gia' il suo livello grafico: all'entrata il browser
lo sposta e basta, invece di ridisegnarlo a ogni fotogramma (su telefono scattava) */
.ht-entra:not(.is-entrato) { will-change: opacity, transform; }
@media (max-width: 991px) {
.ht-entra { transform: translate3d(0, 16px, 0); transition-duration: 0.55s, 0.55s; }
.ht-entra.is-entrato { transform: none; }
}
@media (max-width: 991px) {
.ht-sezione { padding-top: 80px; }
/* Scala da telefono: 32 titoli grandi, 24 titoli degli strumenti, 20 schede, 16 testi,
15 selettori, 13 etichette, 12 etichette piccole */
.ht-pagina { --ht-h-prodotto: 24px; --ht-h-scheda: 20px; }
.ht-titolo, .ht-volo__frase, .ht-hero__titolo, .ht-wa .ht-testata--centro .ht-titolo,
.ht-pagina .bg-faqs-section .heading-10, .ht-pagina .agt-casi .agt-caso__num { font-size: 32px !important; }
/* i ritorni a capo dei titoli sono pensati per il desktop: su telefono il titolo va a capo da se' */
.ht-titolo br, .ht-pagina .bg-faqs-section .heading-10 br { display: none; }
/* margini laterali uguali ovunque: 20px */
.ht-contenitore, .ht-pagina .agt-casi { width: calc(100% - 40px); }
/* il CSS comune azzera i margini delle FAQ su telefono (.bg-faqs-section.magi .container-small) */
.ht-pagina .bg-faqs-section.magi .container-small.w-container { padding-left: 20px !important; padding-right: 20px !important; }
/* casi: il blocco di testo (figlio flex con min-width auto) era piu' largo della scheda e finiva tagliato */
.ht-pagina .agt-casi .feature-slide-item > * { min-width: 0; flex-shrink: 1; max-width: 100%; }
/* riquadro nero: bordo a 8px dallo schermo e testi a 24px dal bordo del riquadro */
.ht-funzioni__fondo::before { inset: 0 8px; }
.ht-funzioni .ht-contenitore { width: calc(100% - 64px); }
.ht-binario.ht-wa__binario { width: max-content; overflow: visible; }
.ht-testo, .ht-hero__testi p, .ht-stack__prova b, .ht-pagina .bg-faqs-section .bold-text-20 { font-size: 16px !important; }
.ht-pagina .bg-faqs-section .accordion-title, .ht-pagina .agt-casi .feature-slide-title-2 { font-size: 20px !important; }
.ht-volo__quando { font-size: 16px; }
.ht-volo__quando svg { width: 28px; height: 28px; }
/* Testata da telefono: la foto verticale (picture) a tutta pagina, appoggiata in basso;
i testi bianchi stanno in alto sulla parete grigia */
.ht-hero { align-items: flex-start; background: #2f362f; }
/* foto verticale intera, a tutta pagina: la ragazza alla scrivania sta in basso (testa al 73%
dell'immagine) e sopra c'e' la parete che tiene testi, sottotitolo e bottone, anche sui telefoni bassi */
.ht-hero__foto img { object-position: 50% 100%; }
.ht-hero__contenuto { padding-top: 96px; }
.ht-hero__testi { margin-left: 0; }
.ht-hero__occhio { margin-bottom: 12px; }
.ht-hero__testi p { margin: 16px 0 24px; }
.ht-manifesto__testo { font-size: var(--ht-h-scheda); }
/* minmax(0, 1fr): con 1fr la colonna non si stringeva sotto il contenuto e a 320px usciva dallo schermo */
.ht-lista, .ht-come__passi, .ht-persone__griglia, .ht-piattaforme { grid-template-columns: minmax(0, 1fr); }
.ht-passo__visivo { padding: 20px; }
.ht-piattaforma { padding: 16px 16px 24px; }
.ht-piattaforma__schermo { height: 260px; }
.ht-lista__palco { height: 420px; }
.ht-come__linea { display: none; }
.ht-come__passi { padding-top: 0; }
.ht-binario { width: auto; overflow-x: auto; scrollbar-width: none; }
.ht-binario__scheda { flex: none; padding: 0 14px; }
.ht-stack__fondo { padding: 20px; }
.ht-stack__pannello { grid-template-columns: 1fr; gap: 24px; align-items: start; }
.ht-stack__pannello .agv-anim { height: auto; min-height: 380px; }
.ht-funzioni__fondo { padding: 80px 0; }
.ht-wa__fondo { grid-template-columns: 1fr; gap: 32px; padding: 24px; }
.ht-wa__visivo { min-height: 0; padding: 20px; }
.ht-volo { height: 220vh; }
/* altri strumenti: su telefono solo l'elenco, la schermata sotto non aggiungeva niente */
.ht-lista__palco { display: none; }
/* illustrazioni degli strumenti basse come le schede delle piattaforme (260px) */
/* zoom 0.7: l'illustrazione resta intera (alta 410 al suo interno, quanto serve a navi e MePA) ma occupa 287px */
.ht-stack__pannello .agv-anim { height: 410px; min-height: 0; zoom: 0.7; }
.ht-wa__visivo { padding: 0; }
/* la chat e' disegnata per 400px: a 300 il riquadro "Passata a Marco" copriva l'ultimo messaggio */
.ht-wa__visivo .agt-anim--whatsapp { min-height: 0; height: 400px; zoom: 0.78; }
.ht-spunte li { line-height: 1.4; }
/* gestionale nella scheda stretta: niente colonna del menu ne' grafico, righe su una riga sola */
.ht-piattaforma .agt-gest { grid-template-columns: 1fr; }
.ht-piattaforma .agt-gest__menu, .ht-piattaforma .agt-gest__grafico { display: none; }
.ht-piattaforma .agt-gest__kpi small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ht-piattaforma .agt-gest__riga span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ht-piattaforma .agt-gest__stato { flex: none; margin-left: 8px; }
/* casi: il riquadro del numero occupa tutta l'immagine, cosi' "Oltre 10.000 euro" ci sta con margini uguali */
.ht-pagina .agt-casi .feature-slide-image-2 { padding: 0 !important; }
.ht-pagina .agt-casi .agt-caso { width: 100%; }
/* ogni scheda alta quanto il suo testo: allineate alla piu' alta restava spazio vuoto in fondo */
.ht-pagina .agt-casi .uc-slider-track { align-items: flex-start; }
/* aereo intero nello schermo; il taglio a punta segue le ali, basta che l'apertura alare (0,86 della
larghezza) superi l'altezza del blocco di testo */
.ht-volo { --ht-aereo: max(560px, 165vw); }
}
/* telefoni molto bassi: la foto si allunga di 26px oltre il bordo di sotto (li' la testata taglia),
cosi' la ragazza scende e la testa non tocca il bottone, ma la foto parte sempre dal bordo in alto */
@media (max-width: 991px) and (max-height: 700px) {
.ht-hero__foto img { height: calc(100% + 26px); }
}
/* telefoni alti: c'e' spazio, la ragazza torna un po' piu' grande (la foto si allarga oltre i bordi,
ai lati c'e' solo parete) */
@media (max-width: 991px) and (min-height: 701px) {
.ht-hero__foto picture { overflow: hidden; }
.ht-hero__foto img { position: relative; left: 50%; width: 118%; max-width: none; transform: translateX(-50%); }
}
@media (max-width: 991px) and (min-height: 780px) {
.ht-hero__foto img { width: 132%; }
}
/* ---------- Catalogo: una pagina vera (foto, titolo, testo, programma, quote, piede) ----------
Le parti entrano una dopo l'altra, poi la quota del 3 maggio cambia (il prezzo vecchio si
cancella, quello nuovo appare) e il bottone di esportazione pulsa. Giro di 10 s. */
.agt-pag { background: #fff; border-radius: 14px; box-shadow: 0 1px 2px rgba(26, 26, 26, 0.06), 0 14px 36px rgba(26, 26, 26, 0.1); display: grid; grid-template-columns: 1.05fr 1fr; grid-template-rows: repeat(5, auto); align-content: center; gap: 10px 16px; padding: 14px; font-size: 12px; color: #1a1a1a; }
.agt-pag__foto { position: relative; overflow: hidden; border-radius: 10px; }
.agt-pag__foto svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.agt-pag__foto--grande { grid-column: 1; grid-row: 1 / 4; min-height: 150px; background: #8b5cff; }
.agt-pag__foto--grande svg circle { fill: #ffd026; }
.agt-pag__foto--grande svg path { fill: rgba(255, 255, 255, 0.85); }
.agt-pag__foto--a, .agt-pag__foto--b { grid-row: 4 / 6; height: 100%; min-height: 70px; }
.agt-pag__foto--a { grid-column: 1; width: calc(50% - 5px); background: #ffd026; }
.agt-pag__foto--b { grid-column: 1; justify-self: end; width: calc(50% - 5px); background: #fe4a22; }
.agt-pag__foto--a svg path { fill: rgba(255, 255, 255, 0.8); }
.agt-pag__foto--b svg circle { fill: #ffd026; }
.agt-pag__foto--b svg path { fill: rgba(255, 255, 255, 0.8); }
.agt-pag__testa { grid-column: 2; display: flex; flex-direction: column; gap: 6px; }
.agt-pag__tag { align-self: flex-start; padding: 3px 8px; border-radius: 6px; font-size: 10px; font-weight: 700; background: rgba(139, 92, 255, 0.12); color: #8b5cff; }
.agt-pag__testa b { font-size: 16px; line-height: 1.2; }
.agt-pag__testo { grid-column: 2; display: flex; flex-direction: column; gap: 6px; }
.agt-pag__testo i { display: block; height: 7px; border-radius: 4px; background: #d9dad7; }
.agt-pag__testo .agt-pag__corta { width: 60%; }
.agt-pag__programma { grid-column: 2; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.agt-pag__programma li { display: flex; align-items: center; gap: 8px; color: #454643; }
.agt-pag__programma span { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; font-size: 10px; font-weight: 700; background: #ffd026; color: #1a1a1a; }
.agt-pag__quote { grid-column: 2; padding: 8px 10px; border-radius: 10px; background: #f9f9f9; border: 1px solid rgba(0, 0, 0, 0.06); }
.agt-pag__quote b { display: block; margin-bottom: 4px; font-size: 11px; }
.agt-pag__riga { display: flex; justify-content: space-between; padding: 3px 0; color: #454643; }
.agt-pag__riga em { font-style: normal; font-weight: 700; color: #fe4a22; }
.agt-pag__riga s { margin-right: 6px; color: #a6a8a4; font-weight: 500; }
.agt-pag__riga ins { text-decoration: none; }
.agt-pag__piede { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.agt-pag__pdf { padding: 6px 12px; border-radius: 6px; font-size: 11px; font-weight: 700; background: #1a1a1a; color: #fff; }
.agt-pag__piede small { font-size: 10px; color: #a6a8a4; }
/* La pagina si compila quando la si guarda: nell'hub quando la voce si accende (.is-attiva),
nelle pagine travel quando l'illustrazione entra in vista (.is-visible, da agv-animations.js).
Parte bianca; entrano le foto, si scrivono etichetta e titolo, crescono le righe, poi programma,
quote, il prezzo che cambia e il bottone. Una volta sola, poi resta compilata. */
.vn-visivo .agv-anim:not(.is-visible) .agt-pag > * { opacity: 0; }
:is(.ht-lista__schermata.is-attiva, .vn-visivo .agv-anim.is-visible) .agt-pag__foto { animation: agt-pag-foto 0.7s cubic-bezier(0.3, 0.7, 0.2, 1) both; }
:is(.ht-lista__schermata.is-attiva, .vn-visivo .agv-anim.is-visible) .agt-pag__foto--grande { animation-delay: 0.2s; }
:is(.ht-lista__schermata.is-attiva, .vn-visivo .agv-anim.is-visible) .agt-pag__foto--a { animation-delay: 0.55s; }
:is(.ht-lista__schermata.is-attiva, .vn-visivo .agv-anim.is-visible) .agt-pag__foto--b { animation-delay: 0.75s; }
:is(.ht-lista__schermata.is-attiva, .vn-visivo .agv-anim.is-visible) :is(.agt-pag__tag, .agt-pag__testa b, .agt-pag__programma li, .agt-pag__quote, .agt-pag__piede) { animation: agt-pag-scrivi 0.55s steps(14, end) both; }
:is(.ht-lista__schermata.is-attiva, .vn-visivo .agv-anim.is-visible) .agt-pag .agt-pag__tag { animation-delay: 1.1s; }
:is(.ht-lista__schermata.is-attiva, .vn-visivo .agv-anim.is-visible) .agt-pag__testa b { animation-delay: 1.4s; animation-duration: 0.8s; animation-timing-function: steps(24, end); }
:is(.ht-lista__schermata.is-attiva, .vn-visivo .agv-anim.is-visible) .agt-pag__testo i { animation: agt-pag-riga 0.45s ease-out both; transform-origin: left center; }
:is(.ht-lista__schermata.is-attiva, .vn-visivo .agv-anim.is-visible) .agt-pag__testo i:nth-child(1) { animation-delay: 2.2s; }
:is(.ht-lista__schermata.is-attiva, .vn-visivo .agv-anim.is-visible) .agt-pag__testo i:nth-child(2) { animation-delay: 2.4s; }
:is(.ht-lista__schermata.is-attiva, .vn-visivo .agv-anim.is-visible) .agt-pag__testo i:nth-child(3) { animation-delay: 2.6s; }
:is(.ht-lista__schermata.is-attiva, .vn-visivo .agv-anim.is-visible) .agt-pag__testo i:nth-child(4) { animation-delay: 2.8s; }
:is(.ht-lista__schermata.is-attiva, .vn-visivo .agv-anim.is-visible) .agt-pag__programma li:nth-child(1) { animation-delay: 3.1s; }
:is(.ht-lista__schermata.is-attiva, .vn-visivo .agv-anim.is-visible) .agt-pag__programma li:nth-child(2) { animation-delay: 3.4s; }
:is(.ht-lista__schermata.is-attiva, .vn-visivo .agv-anim.is-visible) .agt-pag__programma li:nth-child(3) { animation-delay: 3.7s; }
:is(.ht-lista__schermata.is-attiva, .vn-visivo .agv-anim.is-visible) .agt-pag .agt-pag__quote { animation-delay: 4s; }
:is(.ht-lista__schermata.is-attiva, .vn-visivo .agv-anim.is-visible) .agt-pag__riga--cambia s { animation: agt-pag-barra 0.4s ease-out 5s both; }
:is(.ht-lista__schermata.is-attiva, .vn-visivo .agv-anim.is-visible) .agt-pag__riga--cambia ins { animation: agt-pag-nuovo 0.4s ease-out 5.3s both; }
:is(.ht-lista__schermata.is-attiva, .vn-visivo .agv-anim.is-visible) .agt-pag__riga--cambia { border-radius: 4px; animation: agt-pag-evidenzia 1.6s ease-out 4.8s both; }
:is(.ht-lista__schermata.is-attiva, .vn-visivo .agv-anim.is-visible) .agt-pag .agt-pag__piede { animation-delay: 5.9s; }
:is(.ht-lista__schermata.is-attiva, .vn-visivo .agv-anim.is-visible) .agt-pag__pdf { animation: agt-pag-pulsa 0.5s ease-in-out 6.5s both; }
@keyframes agt-pag-foto { from { clip-path: inset(0 100% 0 0 round 10px); } to { clip-path: inset(0 0 0 0 round 10px); } }
@keyframes agt-pag-scrivi { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes agt-pag-riga { from { transform: scaleX(0); } to { transform: none; } }
@keyframes agt-pag-barra { from { text-decoration: none; color: #fe4a22; } to { text-decoration: line-through; color: #a6a8a4; } }
@keyframes agt-pag-nuovo { from { opacity: 0; } to { opacity: 1; } }
@keyframes agt-pag-evidenzia { 0% { background: transparent; } 20%, 70% { background: rgba(139, 92, 255, 0.12); } 100% { background: transparent; } }
@keyframes agt-pag-pulsa { 0%, 100% { transform: none; } 50% { transform: scale(1.08); } }
@keyframes agt-pag-entra { 0% { opacity: 0; transform: translateY(8px); } 8%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* ---------- Fatture -> pratiche, versione fresca: carte bianche con le iniziali colorate del
fornitore e l'importo, pratiche viola chiaro, filo tratteggiato, avviso arancio e riepilogo ---------- */
.agt-match--fresco { grid-template-columns: 1fr 56px 1fr; grid-template-rows: 1fr auto; row-gap: 14px; padding: 14px; }
.agt-match--fresco .agt-match__col { gap: 12px; }
.agt-match--fresco .agt-match__card { flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 0;
background: #fff; font-size: 12px; font-weight: 700; color: #1a1a1a; box-shadow: 0 1px 2px rgba(26, 26, 26, 0.06), 0 10px 24px rgba(26, 26, 26, 0.08); }
.agt-match--fresco .agt-match__card span { display: flex; flex-direction: column; min-width: 0; }
.agt-match--fresco .agt-match__card small { font-size: 10px; font-weight: 500; color: #a6a8a4; }
.agt-match--fresco .agt-match__card b { margin-left: auto; font-size: 12px; }
.agt-match--fresco .agt-match__card em { margin-left: auto; padding: 3px 8px; border-radius: 6px; font-style: normal; font-size: 10px; font-weight: 700; background: #8b5cff; color: #fff; }
.agt-match__av { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; font-style: normal; font-size: 10px; font-weight: 700; color: #fff; }
.agt-match__av--viola { background: #8b5cff; }
.agt-match__av--giallo { background: #ffd026; color: #1a1a1a; }
.agt-match__av--verde { background: #25d366; }
.agt-match__av--arancio { background: #fe4a22; }
.agt-match--fresco .agt-match__card--pratica { background: #f3eeff; box-shadow: none; }
.agt-match--fresco .agt-match__card--vuota { visibility: hidden; }
.agt-match--fresco .agt-match__card--dubbio { background: #fff4f1; box-shadow: none; color: #fe4a22; }
.agt-match--fresco .agt-match__card--dubbio em { background: #fe4a22; }
.agt-match--fresco .agt-match__linee path { stroke-width: 1.6; }
.agt-match__esito { grid-column: 1 / -1; justify-self: center; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; background: #fff;
font-size: 12px; font-weight: 700; color: #1a1a1a; box-shadow: 0 1px 2px rgba(26, 26, 26, 0.06), 0 10px 24px rgba(26, 26, 26, 0.08); animation: agt-pag-entra 10s cubic-bezier(0.2, 0.7, 0.2, 1) 2.6s infinite both; }
.agt-match__esito i { width: 8px; height: 8px; border-radius: 50%; background: #8b5cff; }
@media (prefers-reduced-motion: reduce) { .agt-pag *, .agt-pag > *, .agt-match__esito { animation: none !important; } }
/* ---------- Pagina hotel (hotel-e-strutture-ricettive.html) ---------- */
/* Per chi e' senza foto: un riquadro grigio chiaro con il segno colorato del tipo di struttura */
.ht-persona--icona { padding: 32px; border-radius: 1.25rem; background: #f9f9f9; border: 1px solid rgba(0, 0, 0, 0.06); }
.ht-persona__segno { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 22px; border-radius: 50%; }
.ht-persona__segno svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ht-persona__segno--viola { background: #8b5cff; }
.ht-persona__segno--giallo { background: #ffd026; }
.ht-persona__segno--giallo svg { stroke: #1a1a1a; }
.ht-persona__segno--arancio { background: #fe4a22; }
/* una piattaforma sola: al centro, non mezza griglia vuota */
.ht-piattaforme--una { grid-template-columns: minmax(0, 860px); justify-content: center; }
/* chat del sito: le battute della telefonata senza l'onda della voce */
.agt-call--chat { justify-content: center; gap: 12px; }
/* il sito di una struttura: testata con il pulsante, barra di ricerca, tre camere */
.agt-sito { display: flex; flex-direction: column; gap: 10px; padding: 14px; font-size: 12px; color: #1a1a1a; background: #fff; border-radius: 14px;
box-shadow: 0 1px 2px rgba(26, 26, 26, 0.06), 0 14px 36px rgba(26, 26, 26, 0.1); }
.agt-sito__hero { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 190px; padding: 22px; overflow: hidden;
border-radius: 10px; background: #8b5cff; color: #fff; }
.agt-sito__hero svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.agt-sito__hero svg circle { fill: #ffd026; }
.agt-sito__hero svg path { fill: rgba(255, 255, 255, 0.18); }
.agt-sito__hero > :not(svg) { position: relative; }
.agt-sito__hero b { font-size: 26px; color: #fff; }
.agt-sito__hero small { font-size: 11px; opacity: 0.85; }
.agt-sito__btn { margin-top: 8px; padding: 6px 12px; border-radius: 6px; font-size: 11px; font-weight: 700; background: #fe4a22; color: #fff; animation: agt-pag-pulsa 0.6s ease-in-out 1.5s 3 both; }
.agt-sito__barra { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: #f9f9f9; border: 1px solid rgba(0, 0, 0, 0.06); }
.agt-sito__barra span { display: flex; flex-direction: column; font-size: 10px; color: #a6a8a4; }
.agt-sito__barra b { font-size: 12px; color: #1a1a1a; }
.agt-sito__barra em { padding: 6px 10px; border-radius: 6px; font-style: normal; font-weight: 700; background: #1a1a1a; color: #fff; }
.agt-sito__camere { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.agt-sito__camera { display: flex; flex-direction: column; gap: 3px; }
.agt-sito__camera b { font-size: 11px; }
.agt-sito__camera small { font-size: 10px; font-weight: 700; color: #fe4a22; }
.agt-sito__foto { display: block; height: 96px; border-radius: 8px; }
.agt-sito__foto--a { background: #ffd026; }
.agt-sito__foto--b { background: #25d366; }
.agt-sito__foto--c { background: #fe4a22; }
.agt-sito > * { animation: agt-pag-entra 10s cubic-bezier(0.2, 0.7, 0.2, 1) infinite both; }
.agt-sito > :nth-child(2) { animation-delay: 0.3s; }
.agt-sito > :nth-child(3) { animation-delay: 0.6s; }
@media (prefers-reduced-motion: reduce) { .agt-sito > *, .agt-sito__btn { animation: none !important; } }
/* testata con una foto chiara (provvisoria): velo scuro a sinistra, sotto i testi bianchi */
.ht-hero--velata .ht-hero__velo { display: block; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 10, 10, 0.82) 0%, rgba(10, 10, 10, 0.6) 45%, rgba(10, 10, 10, 0.1) 75%); }
@media (max-width: 991px) { .ht-hero--velata .ht-hero__velo { background: rgba(10, 10, 10, 0.6); } }
/* footer della pagina hotel: la costa al tramonto al posto delle montagne del travel, stesso velo */
body.ht-hotel .section-8 > .bg-step-section { background:
linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 30%),
linear-gradient(180deg, rgba(8, 8, 8, 0) 40%, rgba(8, 8, 8, 0.72) 62%, rgba(8, 8, 8, 0.9) 100%),
url(../images/hotel/footer-mare-hd.webp) center 40% / cover no-repeat !important; }
/* Marquee dei clienti sotto "Perche' Superia" (stesso componente della home): loghi scuri sul bianco,
il giro scorre di un set intero di loghi (11) */
.ht-clienti { margin-top: 64px; }
.ht-clienti .hn-marquee__item img { filter: grayscale(100%) brightness(0); opacity: 0.45; }
.ht-clienti .hn-marquee__track { animation-name: ht-clienti-giro; }
@keyframes ht-clienti-giro { to { transform: translateX(calc(-11 * var(--hn-item-w) - 12 * var(--hn-gap))); } }
/* pagina hotel da telefono: la foto e' orizzontale, il taglio va sulla receptionist (a destra) */
@media (max-width: 991px) {
body.ht-hotel .ht-hero__foto img { object-position: 84% center; }
/* i testi stanno sopra la foto: velo scuro in alto, la receptionist resta chiara in basso */
body.ht-hotel .ht-hero__velo { display: block; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(10, 10, 10, 0.82) 0%, rgba(10, 10, 10, 0.7) 50%, rgba(10, 10, 10, 0) 78%); }
}
.ht-clienti .hn-marquee__track { animation-duration: 48s; }
/* i bottoni delle due piattaforme in fondo alla scheda, alla stessa altezza anche se i testi sono diversi */
.ht-piattaforma .animated-btn { margin-top: auto !important; }
.ht-piattaforma p { margin-bottom: 24px; }
/* Come funziona della pagina hotel, come la sezione di Smistant Base su smistant.com (riferimento
Wispr Flow): a sinistra la scheda colorata resta ferma e cambia (colore e contenuto) con lo
scatto, a destra le voci scorrono, lontane, e si accende quella arrivata a meta' schermo
(js/hub-nuovo.js). Su telefono ogni voce ha la sua scheda fra titolo e testo. */
.ht-scorre__fermo { display: none; }
.ht-scorre__voce { padding: 28px 0; }
.ht-scorre__voce h3 { margin: 0; font-family: 'Helvetica Now Display', 'Satoshi', sans-serif; font-size: var(--ht-h-prodotto); line-height: 1.15; font-weight: 500; color: #1a1a1a; transition: color 0.4s; }
.ht-scorre__voce p { margin: 16px 0 0; max-width: 44ch; font-size: 18px; line-height: 1.55; color: #454643; transition: color 0.4s; }
.ht-scorre__scheda { position: relative; width: 100%; aspect-ratio: 13 / 10; overflow: hidden; border-radius: 1.5rem; background: var(--campo, #8b5cff); transition: background-color 0.4s; }
.ht-scorre__scheda--voce { margin-top: 20px; aspect-ratio: auto; }
.ht-scorre__quadro { position: absolute; inset: 0; display: grid; place-items: center; padding: 32px; opacity: 0; transition: opacity 0.22s linear; }
.ht-scorre__quadro.on { opacity: 1; }
.ht-scorre__quadro > div { width: 100%; max-width: 400px; }
.ht-scorre__scheda--voce .ht-scorre__quadro { position: relative; padding: 24px 16px; }
.ht-scorre__scheda.scatto { animation: ht-scatto 0.72s cubic-bezier(0.3, 0.7, 0.2, 1); }
@keyframes ht-scatto { 0% { transform: none; } 28% { transform: translateX(-26px); } 100% { transform: none; } }
@media (min-width: 992px) {
.ht-scorre { display: grid; grid-template-columns: 1.1fr 1fr; gap: 96px; margin-top: 40px; }
.ht-scorre__fermo { display: block; }
.ht-scorre__fermo .ht-scorre__scheda { position: sticky; top: calc(50vh - 230px); }
.ht-scorre__voce { padding: 0 0 300px; }
.ht-scorre__voce:first-child { padding-top: 120px; }
.ht-scorre__voce:last-child { padding-bottom: 160px; }
.ht-scorre__scheda--voce { display: none; }
.ht-scorre__voce h3, .ht-scorre__voce p { color: #d9dad7; }
.ht-scorre__voce.on h3 { color: #1a1a1a; }
.ht-scorre__voce.on p { color: #454643; }
}
@media (prefers-reduced-motion: reduce) { .ht-scorre__scheda.scatto { animation: none; } }
/* Le schermate dentro la scheda: fogli bianchi con un'ombra morbida */
.ht-foglio { padding: 20px; border-radius: 14px; background: #fff; box-shadow: 0 2px 4px rgba(26, 26, 26, 0.06), 0 22px 48px rgba(26, 26, 26, 0.18); font-size: 13px; line-height: 1.45; color: #454643; }
.ht-foglio__titolo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; font-size: 14px; font-weight: 700; color: #1a1a1a; }
.ht-foglio__ok { padding: 3px 8px; border-radius: 6px; font-style: normal; font-size: 11px; font-weight: 700; background: rgba(37, 211, 102, 0.14); color: #128c4a; }
.ht-foglio__riga { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid #ececea; }
.ht-foglio__riga b { color: #1a1a1a; }
.ht-foglio__da { display: flex; align-items: center; gap: 10px; }
.ht-foglio__da i { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; font-style: normal; font-size: 12px; font-weight: 700; background: #8b5cff; color: #fff; }
.ht-foglio__da b { display: block; font-size: 14px; color: #1a1a1a; }
.ht-foglio__da small { display: block; font-size: 12px; color: #a6a8a4; }
.ht-foglio__ogg { margin: 14px 0 12px; font-size: 15px; font-weight: 700; color: #1a1a1a; }
.ht-foglio__chip { display: flex; flex-wrap: wrap; gap: 6px; }
.ht-foglio__chip span { padding: 5px 9px; border-radius: 6px; font-size: 12px; font-weight: 700; background: rgba(139, 92, 255, 0.1); color: #8b5cff; }
.ht-foglio__voi { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(139, 92, 255, 0.08); color: #1a1a1a; }
.ht-foglio__voi b { flex: none; padding: 2px 7px; border-radius: 6px; font-size: 11px; background: #8b5cff; color: #fff; }
.ht-foglio__si { margin-left: auto; padding: 5px 10px; border-radius: 6px; font-size: 12px; font-weight: 700; background: #1a1a1a; color: #fff; }
.ht-foglio__tot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; padding-top: 10px; border-top: 2px solid #1a1a1a; }
.ht-foglio__tot b { font-family: 'Helvetica Now Display', 'Satoshi', sans-serif; font-size: 1.75rem; font-weight: 500; color: #1a1a1a; }
.ht-foglio__versione { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 14px; border-radius: 10px; border: 1px solid #ececea; }
.ht-foglio__versione + .ht-foglio__versione { margin-top: 8px; }
.ht-foglio__versione.on { border: 2px solid #8b5cff; }
.ht-foglio__versione small { grid-column: 1 / -1; font-size: 11px; font-weight: 700; color: #a6a8a4; }
.ht-foglio__versione b { color: #1a1a1a; }
.ht-foglio__versione em { font-style: normal; font-weight: 700; color: #fe4a22; }
.ht-foglio__passo { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #ececea; color: #a6a8a4; }
.ht-foglio__passo i { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #d9dad7; }
.ht-foglio__passo.fatto { color: #1a1a1a; }
.ht-foglio__passo.fatto i { border: 0; 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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat; }
/* Chiusura della pagina hotel come WeRoad: solo titolo e bottone, nessun riquadro, sulla parte
alta della foto del footer (dove la foto sfuma nel bianco) */
body.ht-hotel .section-8 > .bg-step-section { padding-top: 0 !important; }
.ht-chiusura { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 120px 0 38vh; }
.ht-chiusura .ht-titolo { margin-bottom: 32px; }
@media (max-width: 991px) { .ht-chiusura { padding: 80px 0 28vh; } }
/* testata hotel: il partner sotto il bottone */
.ht-hero__partner { display: flex; align-items: center; gap: 10px; margin: 28px 0 0 !important; font-size: 16px !important; font-weight: 700; color: #fff; }
.ht-hero__partner span { padding: 3px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; background: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.8); }
/* bollino Tech Provider di Meta nei box di WhatsApp: lo stesso del footer (logo Meta, due righe),
in chiaro sul grigio del box, sopra il titolo */
.ht-bollino-meta { display: flex; align-items: center; gap: 10px; width: max-content; max-width: 100%; margin: 0 0 20px; padding: 8px 14px 8px 10px;
border-radius: 8px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); color: #1a1a1a; line-height: 1.15; }
.ht-bollino-meta svg { flex: none; width: 26px; height: 26px; }
.ht-bollino-meta svg path { fill: #0866ff; }
.ht-bollino-meta small { display: block; font-size: 10px; font-weight: 700; color: #a6a8a4; }
.ht-bollino-meta b { display: block; font-size: 13px; font-weight: 700; }
/* Smistant sulla pagina hotel: testo al centro, il video a tutta larghezza */
.ht-piatt__bottone { margin-top: 28px; }
.ht-video-largo { overflow: hidden; border-radius: 1.5rem; background: #0b0b0b; }
.ht-video-largo video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 991px) { .ht-video-largo { border-radius: 1rem; } }
/* ---------- Pagina centralino AI ---------- */
.ht-funz__lista { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; }
.ht-funz__voce { display: flex; gap: 14px; }
.ht-funz__voce h3 { margin: 6px 0 0; font-family: 'Helvetica Now Display', 'Satoshi', sans-serif; font-size: 18px; line-height: 1.25; font-weight: 500; color: #1a1a1a; }
.ht-funz__voce p { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: #454643; }
/* Sicurezza e conformita': riquadro nero, testo e bollini (gli stessi del footer) a sinistra, tre punti a destra */
.ht-sicuro { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; gap: 28px 56px; padding: 48px 56px; border-radius: 2rem; background: #0b0b0b; color: #fff; }
.ht-sicuro .ht-titolo { color: #fff; max-width: none; font-size: 2.5rem; }
.ht-sicuro .ht-testo { margin-top: 16px; color: rgba(255, 255, 255, 0.72); max-width: 560px; }
.ht-sicuro .ht-sicuro__norme { margin: 24px 0 0; gap: 10px; }
.ht-sicuro__punti { display: grid; gap: 10px; }
.ht-sicuro__punto { padding: 16px 20px; border-radius: 1rem; background: #141414; border: 1px solid #262626; }
.ht-sicuro__punto h3 { margin: 0; font-family: 'Helvetica Now Display', 'Satoshi', sans-serif; font-size: 17px; font-weight: 500; color: #fff; }
.ht-sicuro__punto p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.7); }
.ht-sicuro__nota { grid-column: 1 / -1; margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.45); }
@media (max-width: 991px) {
.ht-sicuro { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 32px 20px; border-radius: 1.5rem; }
.ht-sicuro .ht-titolo { font-size: 2rem; }
.ht-funz__lista { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
.ht-hero__partner img { display: block; height: 22px; width: auto; }
/* CTA arancio al centro sotto una sezione (pagine travel, hotel, centralino) */
.vn-cta { display: flex; justify-content: center; margin-top: 48px; }
/* Testate: i testi entrano uno dopo l'altro (occhiello, titolo, testo, bottone, partner), solo CSS,
cosi' non c'e' il lampo prima dello script */
.ht-hero__testi > * { animation: ht-entra-testata 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.ht-hero__testi > :nth-child(1) { animation-delay: 0.1s; }
.ht-hero__testi > :nth-child(2) { animation-delay: 0.22s; }
.ht-hero__testi > :nth-child(3) { animation-delay: 0.38s; }
.ht-hero__testi > :nth-child(4) { animation-delay: 0.52s; }
.ht-hero__testi > :nth-child(5) { animation-delay: 0.66s; }
@keyframes ht-entra-testata { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ht-hero__testi > * { animation: none; } }
/* La scheda del Come funziona: nera, con i pallini sfocati nel colore del passo (niente fondi pieni
colorati: come le altre schede scure del sito). La schermata prende quasi tutta la larghezza e a
ogni cambio di passo le sue parti entrano una dopo l'altra. */
.ht-scorre__scheda { background: #0b0b0b; --p1: color-mix(in srgb, var(--campo) 60%, transparent); --p2: color-mix(in srgb, var(--campo) 25%, transparent); --p3: color-mix(in srgb, var(--campo) 40%, transparent); }
.ht-scorre__scheda .agt-prova__luci i { transition: background-color 0.4s; }
.ht-scorre__quadro { z-index: 1; padding: 40px; }
.ht-scorre__quadro > div { max-width: none; width: 100%; }
.ht-scorre__quadro .ht-foglio { padding: 26px; font-size: 14px; }
.ht-scorre__quadro.on .ht-foglio > * { animation: ht-foglio-entra 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.ht-scorre__quadro.on .ht-foglio > :nth-child(2) { animation-delay: 0.12s; }
.ht-scorre__quadro.on .ht-foglio > :nth-child(3) { animation-delay: 0.24s; }
.ht-scorre__quadro.on .ht-foglio > :nth-child(4) { animation-delay: 0.36s; }
.ht-scorre__quadro.on .ht-foglio > :nth-child(5) { animation-delay: 0.48s; }
.ht-scorre__quadro.on .ht-foglio > :nth-child(6) { animation-delay: 0.6s; }
@keyframes ht-foglio-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ht-scorre__quadro.on .ht-foglio > * { animation: none; } }
/* Chi prepara e chi decide (come la pagina Lypso di smistant.com): tre riquadri grigi Superia,
quello di mezzo nero con una sola luce viola che si muove; fra i riquadri la freccia curva di smistant.com */
.ht-decide__schema { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 72px; margin: 0; padding: 0; list-style: none;
--sito-freccia-curva: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 24C13 8 29 4 42 14'/%3E%3Cpath d='M38.9 5.6 42 14l-8.9-1.5'/%3E%3C/svg%3E"); }
.ht-decide__passo { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 32px; border-radius: 1.5rem;
background: #f9f9f9; border: 1px solid rgba(0, 0, 0, 0.06); }
.ht-decide__passo > small { font-size: 13px; font-weight: 700; color: #a6a8a4; }
.ht-decide__passo > b { font-family: 'Helvetica Now Display', 'Satoshi', sans-serif; font-size: var(--ht-h-scheda); line-height: 1.15; font-weight: 500; color: #1a1a1a; }
.ht-decide__passo > span { font-size: 16px; line-height: 1.55; color: #454643; }
.ht-decide__passo--prepara { background: #0b0b0b; border-color: #0b0b0b; --p1: rgba(139, 92, 255, 0.6); --p2: transparent; --p3: transparent; }
.ht-decide__passo--prepara .agt-prova__luci { overflow: hidden; border-radius: inherit; }
.ht-decide__passo--prepara > :not(.agt-prova__luci) { position: relative; z-index: 1; }
.ht-decide__passo--prepara > small { color: #c9b6ff; }
.ht-decide__passo--prepara > b { color: #fff; }
.ht-decide__passo--prepara > span { color: rgba(255, 255, 255, 0.75); }
.ht-decide__gestionale { align-self: stretch; display: grid; gap: 2px; margin-top: 20px; padding: 16px; border-radius: 12px; font-size: 15px; line-height: 1.45;
background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.75); }
.ht-decide__gestionale b { color: #fff; }
.ht-decide__lettura { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 13px; font-style: normal; font-weight: 700; color: #c9b6ff; }
.ht-decide__lettura::before { content: "\2195"; font-size: 15px; }
.ht-decide__modi { align-self: stretch; display: grid; gap: 8px; margin-top: 8px; }
.ht-decide__modi p { margin: 0; padding: 12px 14px; border-radius: 10px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.06); font-size: 15px; line-height: 1.45; color: #454643; }
.ht-decide__modi b { display: block; margin-bottom: 2px; color: #1a1a1a; }
.ht-decide__nota { margin-top: auto; padding-top: 12px; font-size: 14px; font-weight: 700; color: #1a1a1a; }
.ht-decide__passo + .ht-decide__passo::before { content: ""; position: absolute; top: 50%; left: -60px; width: 48px; height: 32px; margin-top: -16px;
background: #8b5cff; -webkit-mask: var(--sito-freccia-curva) center / contain no-repeat; mask: var(--sito-freccia-curva) center / contain no-repeat; }
@media (max-width: 991px) {
.ht-decide__schema { grid-template-columns: minmax(0, 1fr); gap: 56px; }
.ht-decide__passo { padding: 24px; }
.ht-decide__passo + .ht-decide__passo::before { top: -44px; left: 50%; margin: 0 0 0 -24px; transform: rotate(90deg); }
}
/* Testata del centralino: scura con le luci delle pagine generaliste (.main-lights-holder),
impaginata come i siti dei centralini AI: tutto al centro, il numero per farsi chiamare, sotto la telefonata
d'esempio, alta. Niente sticky: la pagina scorre normale. */
.ht-cc { overflow: hidden; padding: 180px 0 0; color: #fff; }
.ht-cc__contenuto { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.ht-cc__testi { display: flex; flex-direction: column; align-items: center; max-width: 880px; }
.ht-cc__testi > *, .ht-cc__chiamata { animation: ht-entra-testata 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.ht-cc__testi > :nth-child(2) { animation-delay: 0.1s; }
.ht-cc__testi > :nth-child(3) { animation-delay: 0.2s; }
.ht-cc__testi > :nth-child(n+4) { animation-delay: 0.3s; }
.ht-cc__chiamata { animation-delay: 0.5s; }
.ht-cc .breadcrumb { margin-bottom: 28px; }
.ht-cc__titolo { margin: 0; font-family: 'Helvetica Now Display', 'Satoshi', sans-serif; font-size: clamp(2.6rem, 5vw, 4.5rem); line-height: 1.05; font-weight: 500;
-webkit-text-stroke: 0.5px currentColor; color: #fff; }
.ht-cc__sotto { margin: 24px 0 0; max-width: 640px; font-size: 18px; line-height: 1.55; color: rgba(255, 255, 255, 0.75); }
.ht-cc__prova { display: grid; gap: 10px; width: min(420px, 100%); margin-top: 40px; padding: 10px; border-radius: 1rem;
background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); }
.ht-cc__prova input { width: 100%; height: 52px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; background: rgba(255, 255, 255, 0.06);
font: inherit; font-size: 16px; color: #fff; }
.ht-cc__prova input::placeholder { color: rgba(255, 255, 255, 0.5); }
.ht-cc__prova input:focus { outline: none; border-color: #8b5cff; }
.ht-cc__chiama { display: flex; align-items: center; justify-content: center; gap: 10px; height: 52px; border: 0; border-radius: 10px; background: #fe4a22;
font: inherit; font-size: 16px; font-weight: 700; color: #fff; cursor: pointer; transition: background-color 0.25s; }
.ht-cc__chiama:hover { background: #8b5cff; }
.ht-cc__chiama:disabled { opacity: 0.6; cursor: default; }
.ht-cc__chiama svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ht-cc__esito { margin: 0; font-size: 14px; color: rgba(255, 255, 255, 0.85); }
.ht-cc__esito:empty { display: none; }
.ht-cc__esito.is-errore { color: #ffd026; }
.ht-cc__nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ht-cc__consenso { margin: 14px 0 0; max-width: 420px; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.5); }
.ht-cc__consenso a { color: rgba(255, 255, 255, 0.75); text-decoration: underline; }
.ht-cc__demo { margin-top: 18px; font-size: 16px; font-weight: 700; color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.ht-cc__demo:hover { color: #c9b6ff; }
.ht-cc__partner { justify-content: center; }
/* la telefonata d'esempio: larga e alta, con i testi leggibili */
.ht-cc__chiamata { width: min(880px, 100%); margin-top: 72px; text-align: left; }
/* la telefonata: un riquadro bianco senza la barra della finestra, sopra le schede dei quattro casi */
.cc-telefonata { --agv-soft: #eeeeea; display: flex; flex-direction: column; min-height: 470px; border-radius: 1.5rem; background: #fff; color: #1a1a1a;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.cc-casi { margin: 0 auto 20px; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.14); }
.cc-casi .ht-binario__scheda { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.7); }
.cc-casi .ht-binario__scheda:hover { color: #fff; }
.cc-casi .ht-binario__scheda.is-attiva { color: #1a1a1a; }
.ht-cc__chiamata .agt-call { flex: 1; justify-content: flex-start; gap: 20px; padding: 28px 32px; }
.ht-cc__chiamata .agt-call__onda { height: 72px; gap: 7px; }
.ht-cc__chiamata .agt-call__onda i { width: 7px; }
.ht-cc__chiamata .agt-call__b { max-width: 70%; padding: 14px 18px; border-radius: 16px; font-size: 16px; line-height: 1.45; }
.ht-cc__chiamata .agt-call__nota { padding: 8px 12px; font-size: 14px; }
/* la testata non ha un fondo suo: sul nero la sfumatura di background-dissolvenza (che va a #080808, lo stesso
colore della pagina) non si vedeva, e quando la pagina passa al bianco (velo di bg-mode.js) restava sopra il
velo: la testata diventava piu' scura di Cosa fa e, risalendo veloci, si vedeva la riga fra le due. Cosi' il
colore e' quello del velo per tutta la pagina; le luci sfumano insieme al velo (.pagina-chiara, data-bg-scuro). */
.ht-cc.background-dissolvenza { background-image: none; }
.ht-cc > .main-lights-holder { transition: opacity 0.4s ease; }
.ht-cc.pagina-chiara > .main-lights-holder { opacity: 0; }
/* l'onda della voce: barre di altezze diverse anche da ferme (telefono, movimento ridotto) */
.agt-call__onda i { transform: scaleY(0.5); }
.agt-call__onda i:nth-child(12n+1) { transform: scaleY(0.35); }
.agt-call__onda i:nth-child(12n+2) { transform: scaleY(0.7); }
.agt-call__onda i:nth-child(12n+3) { transform: scaleY(1); }
.agt-call__onda i:nth-child(12n+4) { transform: scaleY(0.55); }
.agt-call__onda i:nth-child(12n+5) { transform: scaleY(0.85); }
.agt-call__onda i:nth-child(12n+6) { transform: scaleY(0.4); }
.agt-call__onda i:nth-child(12n+7) { transform: scaleY(0.95); }
.agt-call__onda i:nth-child(12n+8) { transform: scaleY(0.6); }
.agt-call__onda i:nth-child(12n+9) { transform: scaleY(0.3); }
.agt-call__onda i:nth-child(12n+10) { transform: scaleY(0.75); }
.agt-call__onda i:nth-child(12n+11) { transform: scaleY(0.5); }
.agt-call__onda i:nth-child(12n+12) { transform: scaleY(0.25); }
/* la telefonata su quattro casi (js/centralino.js): quando se ne sceglie uno, le battute entrano una alla volta */
/* i casi stanno tutti nella stessa cella: il riquadro prende l'altezza del piu' lungo */
.cc-pila { display: grid; flex: 1; }
.cc-caso { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 12px; visibility: hidden; }
.cc-caso.is-attivo { visibility: visible; }
.ht-cc__chiamata .cc-caso .agt-call__b { padding: 11px 16px; font-size: 15px; } .cc-caso .agt-call__b--in { align-self: flex-start; }
@keyframes cc-battuta { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* una battuta ogni 1,4 secondi, come in una telefonata vera */
.cc-caso.is-attivo > * { animation: cc-battuta 0.5s ease-out both; animation-delay: calc(var(--i, 0) * 1.4s); }
@media (prefers-reduced-motion: reduce) { .cc-caso.is-attivo > * { animation: none; } }
@media (max-width: 991px) {
.ht-cc { padding-top: 140px; }
.ht-cc__chiamata { margin-top: 48px; }
.cc-telefonata { min-height: 430px; border-radius: 1.25rem; }
/* al telefono le quattro schede su due righe, senza cursore: la scheda accesa e' bianca */
.cc-casi { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 4px; overflow: visible; }
.cc-casi .ht-binario__cursore { display: none; }
.cc-casi .ht-binario__scheda { justify-content: center; padding: 0 10px; font-size: 14px; }
.cc-casi .ht-binario__scheda.is-attiva { background: #fff; }
.ht-cc__chiamata .agt-call { padding: 20px; }
.ht-cc__chiamata .agt-call__b { max-width: 88%; font-size: 15px; }
.ht-cc__chiamata .cc-caso { gap: 8px; }
.ht-cc__chiamata .cc-caso .agt-call__b { max-width: 90%; padding: 9px 13px; font-size: 14px; line-height: 1.4; }
.ht-cc__chiamata .agt-call__onda { height: 48px; }
}
/* Cosa fa, sul nero subito dopo la testata */
.ht-funz--scura { position: relative; z-index: 1; padding-bottom: 40px; }
.ht-funz--scura .ht-titolo { color: #fff; }
.ht-funz--scura .ht-funz__voce h3 { color: #fff; }
.ht-funz--scura .ht-funz__voce p { color: rgba(255, 255, 255, 0.7); }
/* quando la pagina diventa bianca (bg-mode.js accende .pagina-chiara) i testi diventano scuri */
.ht-funz--scura .ht-titolo, .ht-funz--scura h3, .ht-funz--scura p, .ht-funz--scura .ht-etichetta { transition: color 0.4s ease, background-color 0.4s ease; }
.ht-funz--scura.pagina-chiara .ht-titolo, .ht-funz--scura.pagina-chiara .ht-funz__voce h3 { color: #1a1a1a; }
.ht-funz--scura.pagina-chiara .ht-funz__voce p { color: #454643; }
.ht-funz--scura.pagina-chiara .ht-etichetta--scura { background: rgba(139, 92, 255, 0.12); color: #8b5cff; }
/* Da Per chi e' in poi: niente fondo pieno, il bianco lo da' il velo di bg-mode.js. Finche' il
fondo e' ancora nero i titoli sono bianchi, e diventano scuri insieme al bianco. */
.ht-pagina--scorre { background: transparent; }
.ht-pagina--scorre .ht-titolo, .ht-pagina--scorre .ht-testata .ht-testo, .ht-pagina--scorre .ht-etichetta { transition: color 0.4s ease, background-color 0.4s ease; }
.ht-pagina--scorre:not(.bg-light) .ht-titolo { color: #fff; }
.ht-pagina--scorre:not(.bg-light) .ht-testata .ht-testo { color: rgba(255, 255, 255, 0.7); }
.ht-pagina--scorre:not(.bg-light) .ht-etichetta:not(.ht-etichetta--scura) { background: rgba(139, 92, 255, 0.2); color: #c9b6ff; }
/* Cosa fa: le sei funzioni su tre colonne */
.ht-funz__lista--larga { grid-template-columns: repeat(3, 1fr); gap: 40px 48px; }
@media (max-width: 991px) { .ht-funz__lista--larga { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
/* ogni funzione ha la sua mini schermata scura con un esempio concreto (riquadri scuri del sito:
sul nero si vedono come finestre, sul bianco come riquadri neri) */
.ht-funz__voce--figura { flex-direction: column; gap: 0; }
.ht-funz__voce--figura h3 { margin-top: 20px; }
.cc-fig { display: flex; flex-direction: column; justify-content: center; gap: 8px; height: 200px; padding: 18px; box-sizing: border-box; overflow: hidden;
border-radius: 1rem; background: #141414; border: 1px solid #262626; font-size: 13px; line-height: 1.35; color: rgba(255, 255, 255, 0.85); }
/* i testi delle schermate restano chiari anche quando la pagina diventa bianca (la schermata resta scura) */
.ht-funz__voce .cc-fig p { margin: 0; font-size: 13px; line-height: 1.35; color: inherit !important; }
.ht-funz__voce .cc-fig .cc-sopra { font-size: 11px; font-weight: 700; color: #a6a8a4 !important; }
.cc-riga { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid #262626; }
.cc-riga b { flex: none; font-weight: 700; color: #fff; }
.cc-riga span { flex: 1; min-width: 0; color: rgba(255, 255, 255, 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-riga em { flex: none; padding: 2px 7px; border-radius: 6px; font-style: normal; font-size: 11px; font-weight: 700; background: rgba(139, 92, 255, 0.2); color: #c9b6ff; }
.cc-riga em.cc-ok { background: rgba(37, 211, 102, 0.14); color: #4fe08a; }
.cc-riga--scelta, .cc-riga--nuova { border-color: #8b5cff; background: rgba(139, 92, 255, 0.1); }
.cc-riga--nuova em { background: rgba(255, 208, 38, 0.16); color: #ffd026; }
.cc-riga--piena span { color: rgba(255, 255, 255, 0.4); }
.cc-fumetto { align-self: flex-start; max-width: 88%; padding: 9px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.08); }
.ht-funz__voce .cc-fig .cc-fumetto--ai { align-self: flex-end; background: rgba(139, 92, 255, 0.28); color: #fff !important; }
.cc-dati { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; padding: 10px 12px; border-radius: 8px; border-left: 3px solid #8b5cff; background: rgba(255, 255, 255, 0.04); }
.cc-dati span { color: #a6a8a4; }
.cc-dati b { font-weight: 700; color: #fff; }
@media (max-width: 991px) { .cc-fig { height: auto; min-height: 180px; } }
/* le righe delle schermate entrano una dopo l'altra e ripartono a ciclo, come le illustrazioni
del resto del sito; js/centralino.js accende .cc-anima (non su telefono ne' con movimento ridotto)
e .is-visible quando la schermata e' sullo schermo */
@keyframes cc-giro { 0% { opacity: 0; transform: translateY(8px); } 5% { opacity: 1; transform: none; } 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
.cc-anima .cc-fig > * { opacity: 0; }
.cc-anima .cc-fig.is-visible > * { animation: cc-giro 10s ease-out infinite both; }
.cc-anima .cc-fig.is-visible > :nth-child(2) { animation-delay: 0.6s; }
.cc-anima .cc-fig.is-visible > :nth-child(3) { animation-delay: 1.2s; }
.cc-anima .cc-fig.is-visible > :nth-child(4) { animation-delay: 1.8s; }
/* Per chi e': quattro riquadri, i primi due portano alla pagina del settore */
.ht-perchi__griglia { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ht-perchi__voce { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 1.25rem; background: #f9f9f9; border: 1px solid rgba(0, 0, 0, 0.06);
color: #1a1a1a; text-decoration: none; transition: border-color 0.25s; }
a.ht-perchi__voce:hover { border-color: #8b5cff; }
.ht-perchi__voce b { font-family: 'Helvetica Now Display', 'Satoshi', sans-serif; font-size: 20px; line-height: 1.2; font-weight: 500; }
.ht-perchi__voce span { font-size: 15px; line-height: 1.55; color: #454643; }
.ht-perchi__griglia--tre { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 991px) { .ht-perchi__griglia { grid-template-columns: minmax(0, 1fr); } }
/* la foto in cima al riquadro, con gli angoli del riquadro */
.ht-perchi__voce { padding: 10px 10px 24px; }
.ht-perchi__voce b, .ht-perchi__voce > span { padding: 0 14px; }
.ht-perchi__voce b { margin-top: 10px; }
.ht-perchi__foto { overflow: hidden; border-radius: 0.875rem; aspect-ratio: 3 / 2; background: #d9dad7; }
.ht-perchi__foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
a.ht-perchi__voce:hover .ht-perchi__foto img { transform: scale(1.04); }
/* Telefono: i contenuti larghi quanto la navbar (15px dai bordi, come lei). Il blocco nero degli
altri strumenti resta com'e', ha il suo effetto. */
@media (max-width: 479px) {
.ht-contenitore, .ht-pagina .agt-casi { width: calc(100% - 30px); }
.ht-pagina .bg-faqs-section .w-layout-blockcontainer { padding-left: 15px; padding-right: 15px; }
}
/* testata ferma coperta da piu' di uno schermo (hub-nuovo.js): nascosta, e sotto la pagina c'e' il
bianco. Sul telefono, risalendo veloce, nei pezzi non ancora disegnati si vedeva la foto. */
.ht-hero.is-coperta { visibility: hidden; }
.body-content:has(> .ht-hero.is-coperta) { background-color: #fff; }
/* Angoli: le luci sfocate e animate stanno su un livello a parte e su telefono (Safari, Chrome)
uscivano dall'arrotondamento del riquadro proprio in alto a destra, dove c'e' la prima luce.
Il contenitore delle luci ritaglia da se', con gli stessi angoli del riquadro. */
.agt-prova__luci { border-radius: inherit; overflow: hidden; isolation: isolate; -webkit-mask-image: -webkit-radial-gradient(white, black); mask-image: radial-gradient(white, black); }
/* Prezzi del centralino: tre piani, il piu' scelto in nero; sotto preparazione e integrazioni */
.ht-prezzi__griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.ht-prezzo { display: flex; flex-direction: column; padding: 28px; border-radius: 1.25rem; background: #f9f9f9; border: 1px solid rgba(0, 0, 0, 0.06); color: #1a1a1a; }
.ht-prezzo__testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ht-prezzo h3 { margin: 0; font-family: 'Helvetica Now Display', 'Satoshi', sans-serif; font-size: 24px; font-weight: 500; color: inherit; }
.ht-prezzo__testa span { padding: 3px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; background: #8b5cff; color: #fff; }
.ht-prezzo p { margin: 0; }
.ht-prezzo__per { margin-top: 6px !important; font-size: 15px; color: #454643; }
.ht-prezzo__cifra { display: flex; align-items: baseline; gap: 6px; margin-top: 24px !important; }
.ht-prezzo__cifra b { font-family: 'Helvetica Now Display', 'Satoshi', sans-serif; font-size: 44px; line-height: 1; font-weight: 700; }
.ht-prezzo__cifra small { font-size: 15px; color: #454643; }
.ht-prezzo__nota { margin-top: 8px !important; font-size: 13px; line-height: 1.45; color: #a6a8a4; }
.ht-prezzo ul { display: grid; gap: 10px; margin: 24px 0 0; padding: 20px 0 0; border-top: 1px solid #d9dad7; list-style: none; }
.ht-prezzo li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.45; color: #454643; }
.ht-prezzo li::before { content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; 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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat; }
.ht-prezzo--scelto { background: #0b0b0b; border-color: #0b0b0b; color: #fff; }
.ht-prezzo--scelto .ht-prezzo__per, .ht-prezzo--scelto .ht-prezzo__cifra small, .ht-prezzo--scelto li { color: rgba(255, 255, 255, 0.72); }
.ht-prezzo--scelto .ht-prezzo__nota { color: rgba(255, 255, 255, 0.5); }
.ht-prezzo--scelto ul { border-top-color: #262626; }
/* selettore Mensile/Annuale (js/prezzi-centralino.js) e garanzia, sopra i piani */
.ht-prezzi__comandi { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: -8px 0 32px; }
/* il selettore e' il binario del compilatore (fondo grigio, cursore bianco); qui senza margine */
.ht-binario.ht-prezzi__periodo { margin: 0; }
.ht-prezzi__periodo em { margin-left: 6px; vertical-align: 1px; line-height: 1.4; padding: 2px 6px; border-radius: 6px; font-style: normal; font-size: 12px; background: #8b5cff; color: #fff; }
.ht-prezzi[data-periodo="anno"] .ht-prezzi__mese, .ht-prezzi[data-periodo="mese"] .ht-prezzi__anno { display: none; }
.ht-prezzi__garanzia { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 700; color: #1a1a1a; }
.ht-prezzi__garanzia::before { content: ""; width: 18px; height: 18px; 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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat; }
/* preparazione e integrazioni: una fascia sola sotto i piani, titolo a sinistra e testo a destra */
.ht-prezzi__integrazioni { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: 16px 48px; margin-top: 16px;
padding: 32px 36px; border-radius: 1.25rem; background: #f9f9f9; border: 1px solid rgba(0, 0, 0, 0.06); }
.ht-prezzi__integrazioni h3 { margin: 0; font-family: 'Helvetica Now Display', 'Satoshi', sans-serif; font-size: 26px; line-height: 1.2; font-weight: 500; color: #1a1a1a; }
.ht-prezzi__integrazioni p { margin: 0; font-size: 16px; line-height: 1.6; color: #454643; }
@media (max-width: 991px) {
.ht-prezzi__griglia, .ht-prezzi__integrazioni { grid-template-columns: minmax(0, 1fr); }
.ht-prezzi__integrazioni { padding: 24px 20px; }
.ht-prezzo { padding: 24px 20px; }
}
/* Centralino di settore (agenzie, hotel): impaginato come la pagina madre. Le telefonate sono fatte come il
compilatore: sopra il binario grigio e bianco con la barra del conto alla rovescia (i casi girano da soli,
js/centralino.js), sotto il riquadro grigino con la telefonata. La prova al telefono sta nella testata
con la foto, al posto del bottone. */
.cc-cornice { padding: 48px; border-radius: 1.5rem; background: #f9f9f9; border: 1px solid rgba(0, 0, 0, 0.06); }
.cc-cornice .cc-telefonata { box-shadow: 0 20px 50px rgba(26, 26, 26, 0.1); }
.cc-casi.cc-casi--chiaro { margin: 0 auto 20px; background: #f9f9f9; border-color: rgba(0, 0, 0, 0.06); }
.cc-casi.cc-casi--chiaro .ht-binario__scheda { color: #454643; }
.cc-casi.cc-casi--chiaro .ht-binario__scheda:hover, .cc-casi.cc-casi--chiaro .ht-binario__scheda.is-attiva { color: #1a1a1a; }
.cc-casi .ht-binario__carica { --ht-durata: 14s; }
/* titolo su una riga da desktop (la pagina agenzie non carica verticale-nuova.css, dove sta .vn-una-riga) */
@media (min-width: 992px) {
.cc-telefonate .ht-testata--centro, .cc-telefonate .ht-titolo { max-width: none; }
.cc-telefonate .vn-una-riga { white-space: nowrap; }
.cc-telefonate .ht-testata .ht-testo { max-width: none; white-space: nowrap; }
/* titolo delle domande frequenti del centralino su una riga: la colonna di sinistra si allarga quanto serve */
.cc-una-riga { white-space: nowrap; }
.split-faqs-content-wrap:has(.cc-una-riga) { flex: none; max-width: none; }
}
.cc-cornice .ht-cc__chiamata { margin: 0 auto; animation: none; }
.cc-prova--testata { margin-top: 0; }
/* la foto del centralino di settore: la persona sta a destra, al telefono si tiene lei al centro */
@media (max-width: 991px) { .ht-hero__foto.cc-foto img { width: 100%; left: auto; transform: none; object-position: 72% center; } }
.ht-hero__testi .ht-cc__consenso { margin: 14px 0 0; max-width: 420px; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.55); }
.ht-hero__testi .ht-cc__esito { margin: 0; font-size: 14px; }
.ht-hero__testi .ht-cc__demo { display: inline-block; }
@media (max-width: 991px) {
.cc-cornice { padding: 14px; border-radius: 1.25rem; }
.cc-casi.cc-casi--chiaro .ht-binario__scheda.is-attiva { background: #fff; }
}
/* footer: la foto grande (3072 px) solo dove serve, al telefono quella da 1536 */
@media (max-width: 991px) {
body .section-8 > .bg-step-section { background:
linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 30%),
linear-gradient(180deg, rgba(8, 8, 8, 0) 40%, rgba(8, 8, 8, 0.72) 62%, rgba(8, 8, 8, 0.9) 100%),
url(../images/travel/footer-montagne-hd-1536.webp) center 35% / cover no-repeat !important; }
body.ht-hotel .section-8 > .bg-step-section { background:
linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 30%),
linear-gradient(180deg, rgba(8, 8, 8, 0) 40%, rgba(8, 8, 8, 0.72) 62%, rgba(8, 8, 8, 0.9) 100%),
url(../images/hotel/footer-mare-hd-1536.webp) center 40% / cover no-repeat !important; }
}