/* Pagine soluzione che usano i componenti delle pagine di settore (body.so-tech).
   css/hub-nuovo.css porta con se' anche la chiamata finale e il footer delle pagine di settore
   (fondo bianco, foto di paesaggio, link bianchi): qui tornano quelli delle pagine soluzione,
   con i valori che hanno su automazione-operativa.html senza hub-nuovo.css. */
body.so-tech section.section-8 { position: static; z-index: auto; margin-top: 120px !important; background: transparent; display: block; }
body.so-tech .section-8 > .bg-step-section { display: block; margin-top: 120px !important; padding-top: 0 !important; background: none !important; }
body.so-tech .section-8 .footer-link-3, body.so-tech .section-8 .footer-component a { color: rgb(156, 156, 156) !important; }

/* Passaggio scuro/chiaro delle pagine soluzione col carosello (automazione operativa e
   amministrativa, agenti AI, CRM, preventivi): bg-mode.js sfuma il fondo in 400 ms, ma titoli e
   testi cambiavano colore di colpo e il passaggio sembrava a scatti. Ora sfumano con il fondo,
   come i titoli delle pagine nuove. Solo il colore: gli ingressi e le animazioni non cambiano. */
.heading-10, .box-servi, .step-accordion-title, .libraries-usecases_text-label,
.accordion-title, .accordion-divider, .integration-section-title {
  transition: color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease; }

/* Le sezioni lontane dallo schermo non si ricalcolano al passaggio: il browser lavora solo su
   quello che si vede (all'uscita dalle domande il ricalcolo scendeva da 32 a 16 ms). Restano
   fuori il carosello e Approfondisci, che hanno script che misurano le schede. */
.section_libraries-usecases, .caso-successo-section, .integration-section.inthe, .bg-faqs-section, section.section-8 {
  content-visibility: auto; contain-intrinsic-size: auto 900px; }

/* Domande frequenti: titolo e sottotitolo sul bordo sinistro delle domande, non al centro */
body.so-tech .bg-faqs-section .split-faqs-content-wrap { align-items: flex-start; text-align: left; }
body.so-tech .bg-faqs-section .split-faqs-content-wrap > * { margin-left: 0; margin-right: 0; text-align: left; }

/* Approfondisci sulle pagine col fondo scuro: il blocco nero sta direttamente sul fondo della pagina */
.ht-pagina.so-appro { background: transparent; }

/* Sezioni sul nero prima della pagina bianca (manifesto e come funziona), come il "Cosa fa" del
   centralino: testi chiari e riquadri scuri del sito (#141414, bordo #262626). Quando bg-mode.js
   accende il bianco mettono .pagina-chiara e tornano come sulle pagine di settore. */
.so-scura { position: relative; z-index: 1; font-family: 'Satoshi', sans-serif; }
/* le due misure dei titoli (manifesto, passi di come funziona) stanno su .ht-pagina: queste sezioni
   sono fuori, e senza le misure il manifesto scendeva a 16px. Stessi valori di css/hub-nuovo.css */
.so-scura { --ht-h-prodotto: 2rem; --ht-h-scheda: 1.5rem; }
@media (max-width: 991px) { .so-scura { --ht-h-prodotto: 24px; --ht-h-scheda: 20px; } }
.so-scura .ht-titolo, .so-scura .ht-testo, .so-scura .ht-etichetta, .so-scura .ht-passo h3, .so-scura .ht-passo p,
.so-scura .ht-passo__ui, .so-scura .ht-ui__riga, .so-scura .ht-ui__riga--testa b, .so-scura .ht-manifesto__testo span {
  transition: color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease; }
.so-scura:not(.pagina-chiara) .ht-titolo, .so-scura:not(.pagina-chiara) .ht-passo h3, .so-scura:not(.pagina-chiara) .ht-ui__riga--testa b { color: #fff; }
.so-scura:not(.pagina-chiara) .ht-testo, .so-scura:not(.pagina-chiara) .ht-passo p { color: rgba(255, 255, 255, 0.7); }
.so-scura:not(.pagina-chiara) .ht-etichetta { background: rgba(139, 92, 255, 0.2); color: #c9b6ff; }
/* manifesto: le parole si accendono dal grigio scuro al bianco */
.so-scura:not(.pagina-chiara) .ht-manifesto__testo span { color: #3a3a3a; }
.so-scura:not(.pagina-chiara) .ht-manifesto__testo span.is-accesa { color: #fff; }
/* come funziona: linea, riquadri e finestre scuri */
.so-scura:not(.pagina-chiara) .ht-come__linea path:not(.ht-come__scia) { stroke: #262626; }
.so-scura:not(.pagina-chiara) .ht-passo__visivo::before { background: #141414; border-color: #262626; }
.so-scura:not(.pagina-chiara) .ht-passo__ui { background: #1a1a1a; border-color: #262626; box-shadow: none; }
.so-scura:not(.pagina-chiara) .ht-ui__riga { border-top-color: #262626; color: rgba(255, 255, 255, 0.7); }
.so-scura:not(.pagina-chiara) .ht-ui__ok { background: rgba(139, 92, 255, 0.2); color: #c9b6ff !important; }

/* Schede che si fermano al centro dello schermo: la seconda sale sopra la prima (come le schede
   dei servizi della home su telefono, con sticky e senza script) */
.so-pila .vn-riquadro { position: sticky; top: max(96px, calc(50vh - 270px)); box-shadow: 0 -12px 30px -20px rgba(26, 26, 26, 0.35); }
.so-pila .vn-riquadro + .vn-riquadro { margin-top: 30vh; }
@media (max-width: 767px) {
  .so-pila .vn-riquadro { top: 84px; }
  .so-pila .vn-riquadro + .vn-riquadro { margin-top: 20vh; }
}