/* Sito pubblico di Soluzioni Per Te (2026-09-26): duplicato del sito WordPress www.soluzioniperte.it dentro il
   gestionale. Font Raleway, arancio del marchio #fb7a00/#f8902c, grigi del piè #5e6877 → #939dae (valori letti
   dal tema originale). Tutte le classi hanno il prefisso spt- e il foglio si carica solo dalle pagine del sito. */

:root {
    --spt-arancio: #fb7a00;
    --spt-arancio-chiaro: #f8902c;
    --spt-arancio-titoli: #f9a95a;
    --spt-testo: #333333;
    --spt-scuro: #1d1d1d;
    --spt-grigio-titoli: #b9c0c8;
    --spt-grigio-sfondo: #f9fafc;
    --spt-piede-a: #5e6877;
    --spt-piede-b: #939dae;
    --spt-larghezza: 1240px;
}

.spt-sito { font-family: 'Raleway', system-ui, sans-serif; color: var(--spt-testo); background: #fff; font-size: 14px; line-height: 1.75; min-height: 100vh; display: flex; flex-direction: column; }
.spt-sito * { box-sizing: border-box; }
.spt-sito img { max-width: 100%; height: auto; display: block; }
.spt-sito a { color: inherit; }
.spt-contenuto { flex: 1 0 auto; }
.spt-centro { max-width: var(--spt-larghezza); margin: 0 auto; padding: 0 24px; }

/* --- Intestazione --- */
.spt-testata { background: #fff; position: sticky; top: 0; z-index: 50; box-shadow: 0 1px 0 rgba(0, 0, 0, .04); }
.spt-testata-riga { max-width: 1340px; margin: 0 auto; padding: 0 40px; height: 96px; display: flex; align-items: center; gap: 24px; }
.spt-logo img { width: 210px; }
.spt-menu { margin-left: auto; display: flex; align-items: center; gap: 2px; list-style: none; padding: 0; margin-top: 0; margin-bottom: 0; }
.spt-menu > li { position: relative; }
.spt-menu > li > a { display: block; padding: 10px 11px; font-weight: 700; font-size: 13.5px; color: var(--spt-scuro); text-decoration: none; letter-spacing: .01em; }
.spt-menu > li > a:hover, .spt-menu > li.spt-attivo > a { color: var(--spt-arancio); }
.spt-menu > li.spt-attivo > a { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.spt-sottomenu { position: absolute; top: 100%; left: 0; min-width: 260px; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 12px 30px rgba(0, 0, 0, .12); border-top: 3px solid var(--spt-arancio); opacity: 0; visibility: hidden; transform: translateY(6px); transition: all .18s ease; }
.spt-menu > li:hover .spt-sottomenu, .spt-menu > li:focus-within .spt-sottomenu { opacity: 1; visibility: visible; transform: none; }
.spt-sottomenu a { display: block; padding: 8px 20px; font-size: 13px; font-weight: 600; color: var(--spt-scuro); text-decoration: none; }
.spt-sottomenu a:hover { color: var(--spt-arancio); background: #fff7ef; }
/* Fascia "Accesso al gestionale" sopra la testata (clienti e venditori; il personale entra da Infinito). */
.spt-barra-accesso { background: var(--spt-piede-a); color: #fff; }
.spt-barra-accesso-riga { max-width: var(--spt-larghezza); margin: 0 auto; padding: 7px 40px; display: flex; justify-content: flex-end; align-items: center; gap: 12px; font-size: 12.5px; }
.spt-accesso { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.spt-accesso-etichetta { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 11.5px; margin-right: 4px; }
.spt-accesso input { font: inherit; font-size: 13px; padding: 5px 10px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .12); color: #fff; border-radius: 3px; width: 190px; }
.spt-accesso input::placeholder { color: rgba(255, 255, 255, .75); }
.spt-accesso input:focus { outline: 2px solid var(--spt-arancio-chiaro); outline-offset: 0; background: rgba(255, 255, 255, .2); }
.spt-accesso button, .spt-accesso-bottone, .spt-accesso-esci button { font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 6px 16px; border: 0; border-radius: 3px; background: var(--spt-arancio); color: #fff !important; cursor: pointer; text-decoration: none; }
.spt-accesso button:hover, .spt-accesso-bottone:hover { background: var(--spt-arancio-chiaro); }
.spt-accesso-esci { margin: 0; }
.spt-accesso-esci button { background: transparent; border: 1px solid rgba(255, 255, 255, .5); }
.spt-accesso-dimenticata { color: #fff !important; font-size: 12px; opacity: .85; }
.spt-accesso-dimenticata:hover { opacity: 1; }
/* Nel menu del telefono il modulo va in colonna, su fondo bianco. */
.spt-menu-mobile-accesso { margin-top: 16px; padding-top: 14px; border-top: 1px solid #f0f0f0; }
.spt-accesso-menu { flex-direction: column; align-items: stretch; }
.spt-accesso-menu .spt-accesso-etichetta { color: var(--spt-scuro); }
.spt-accesso-menu input { width: 100%; color: var(--spt-testo); background: #f7f8fa; border-color: #dfe3e8; padding: 9px 12px; }
.spt-accesso-menu input::placeholder { color: #8a939e; }
.spt-accesso-menu .spt-accesso-dimenticata { color: var(--spt-arancio) !important; border: 0 !important; padding: 4px 0 0 !important; font-weight: 600 !important; }
.spt-menu-mobile-pannello .spt-accesso-menu button { padding: 10px; }
/* Sottomenu chiuso subito dopo il clic su una voce (lo imposta sito-spt.js finché il mouse non esce). */
.spt-menu > li.spt-chiuso .spt-sottomenu { opacity: 0; visibility: hidden; transform: translateY(6px); }
.spt-menu-mobile { display: none; margin-left: auto; }
.spt-menu-mobile > summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; }
.spt-menu-mobile > summary::-webkit-details-marker { display: none; }
.spt-menu-mobile > summary span { display: block; width: 26px; height: 2px; background: var(--spt-scuro); box-shadow: 0 8px 0 var(--spt-scuro), 0 -8px 0 var(--spt-scuro); }
.spt-menu-mobile-pannello { position: absolute; left: 0; right: 0; top: 76px; background: #fff; padding: 12px 24px 24px; box-shadow: 0 16px 30px rgba(0, 0, 0, .12); }
.spt-menu-mobile-pannello a { display: block; padding: 9px 0; font-weight: 700; color: var(--spt-scuro); text-decoration: none; border-bottom: 1px solid #f0f0f0; }
.spt-menu-mobile-pannello a.spt-sotto { padding-left: 16px; font-weight: 600; font-size: 13px; }
.spt-menu-mobile-pannello a.spt-attivo { color: var(--spt-arancio); }

/* --- Testate delle pagine --- */
.spt-testata-immagine { position: relative; width: 100%; aspect-ratio: 1920 / 853; background: #e9eef4 center / cover no-repeat; overflow: hidden; }
.spt-testata-immagine picture, .spt-testata-immagine img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Home: immagine con il testo dello slider originale */
.spt-hero { position: relative; min-height: 640px; height: calc(100vh - 96px); max-height: 900px; overflow: hidden; color: #fff; display: flex; align-items: center; }
.spt-hero > img, .spt-hero > picture, .spt-hero > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.spt-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 18, 40, .78) 0%, rgba(4, 18, 40, .45) 50%, rgba(4, 18, 40, .15) 100%); }
.spt-hero-testo { position: relative; z-index: 1; max-width: var(--spt-larghezza); width: 100%; margin: 0 auto; padding: 0 40px; }
.spt-hero-sopra { font-size: 14px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--spt-arancio-chiaro); }
.spt-hero h1 { font-size: clamp(30px, 4.2vw, 58px); line-height: 1.12; font-weight: 300; margin: 14px 0 12px; max-width: 900px; }
.spt-hero h1 b { font-weight: 800; }
.spt-hero-sotto { font-size: clamp(18px, 2.2vw, 28px); font-weight: 300; }
.spt-parole { display: inline-grid; vertical-align: bottom; height: 1.3em; overflow: hidden; }
/* Le tre parole come nel Revolution Slider dell'originale: FIORIRE entra da sotto e resta fino a 2,64 s,
   poi CRESCERE fino a 5,64 s, poi PROSPERARE entra e resta. */
.spt-parole > span { grid-area: 1 / 1; font-weight: 800; color: var(--spt-arancio); opacity: 0; }
.spt-parole > span:nth-child(1) { animation: spt-parola-entra 1s ease-out 0s both, spt-parola-esce .4s ease-in 2.64s forwards; }
.spt-parole > span:nth-child(2) { animation: spt-parola-entra 1s ease-out 2.64s both, spt-parola-esce .4s ease-in 5.64s forwards; }
.spt-parole > span:nth-child(3) { animation: spt-parola-entra 1s ease-out 5.65s both; }
@keyframes spt-parola-entra { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: none; } }
@keyframes spt-parola-esce { from { opacity: 1; } to { opacity: 0; } }
/* Ingresso della testata: titolo dall'alto (1 s), frase da sotto (1,5 s), etichette che si ingrandiscono
   con durate diverse (da 1,5 a 4 s), come i livelli del Revolution Slider. */
.spt-hero-testo h1 { animation: spt-dall-alto 1s ease-out both; }
.spt-hero-sotto { animation: spt-da-sotto 1.5s ease-out both; }
.spt-hero-sopra { animation: spt-ingrandisci 2s ease-out both; }
.spt-hero-punti li { animation: spt-ingrandisci 2.5s ease-out both; }
.spt-hero-punti li:nth-child(2) { animation-duration: 3s; }
.spt-hero-punti li:nth-child(3) { animation-duration: 3.5s; }
.spt-hero-punti li:nth-child(4) { animation-duration: 1.5s; }
.spt-hero-punti li:nth-child(5) { animation-duration: 4s; }
@keyframes spt-dall-alto { from { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: none; } }
@keyframes spt-da-sotto { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: none; } }
@keyframes spt-ingrandisci { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
.spt-hero-punti { list-style: none; padding: 0; margin: 34px 0 0; display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 14px; font-weight: 600; letter-spacing: .04em; }
.spt-hero-punti li { display: flex; align-items: center; gap: 8px; }
.spt-hero-punti li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--spt-arancio); }

/* --- Titoli di sezione (barra arancione + titolo grigio grande) --- */
.spt-sezione { padding: 90px 0; }
.spt-sezione-grigia { background: var(--spt-grigio-sfondo); }
.spt-sezione-sfondo { background-size: cover; background-position: center; }
.spt-titolo { text-align: center; margin-bottom: 50px; }
.spt-titolo::before { content: ""; display: block; width: 280px; max-width: 60%; height: 4px; margin: 0 auto 14px; background: var(--spt-arancio-chiaro); }
.spt-titolo h2 { margin: 0; font-size: clamp(28px, 3.2vw, 42px); font-weight: 300; color: var(--spt-grigio-titoli); text-transform: uppercase; letter-spacing: .02em; line-height: 1.2; }
.spt-titolo p { margin: 16px auto 0; font-size: clamp(17px, 1.7vw, 22px); font-weight: 400; color: #8a939e; max-width: 800px; }
.spt-titolo-pagina h2 { color: #8a939e; }

/* Titoletti arancioni dentro le pagine */
.spt-sotto-titolo { text-align: center; color: var(--spt-arancio-titoli); font-weight: 700; font-size: clamp(18px, 1.8vw, 22px); line-height: 1.35; text-transform: uppercase; margin: 0 auto 26px; max-width: 900px; }
.spt-sotto-titolo.spt-normale { text-transform: none; }
.spt-testo { max-width: 980px; margin: 0 auto; text-align: center; }
.spt-testo p { margin: 0 0 16px; }
.spt-testo-sinistra { text-align: left; }
.spt-testo b, .spt-testo strong { color: #111; }
.spt-blocco { padding: 40px 0; }

/* Due colonne: immagine con l'angolo arancione e testo */
.spt-due { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.spt-due.spt-invertito > :first-child { order: 2; }
.spt-foto-angolo { position: relative; }
.spt-foto-angolo::after { content: ""; position: absolute; top: -10px; right: -10px; width: 90px; height: 90px; border-top: 10px solid var(--spt-arancio-chiaro); border-right: 10px solid var(--spt-arancio-chiaro); }
.spt-due h4 { font-size: 26px; font-weight: 500; color: var(--spt-scuro); margin: 0 0 18px; }

/* Il nostro impegno: sei blocchi con icona */
.spt-impegno { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px 46px; }
.spt-impegno-voce { display: grid; grid-template-columns: 84px 1fr; gap: 18px; align-items: start; }
.spt-impegno-voce img { width: 84px; }
.spt-impegno-voce h5 { margin: 6px 0 8px; font-size: 18px; font-weight: 500; color: var(--spt-grigio-titoli); letter-spacing: .04em; }
.spt-impegno-voce p { margin: 0; font-size: 13.5px; }

/* I nostri numeri */
.spt-numeri { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; }
.spt-numero img { width: 86px; margin: 0 auto 16px; }
.spt-numero strong { display: block; font-size: 60px; font-weight: 800; color: var(--spt-arancio); line-height: 1; margin-bottom: 14px; }
.spt-numero span { font-size: 13.5px; }

/* Fascia "Contattaci per una consulenza" */
.spt-fascia-scura { position: relative; color: #fff; text-align: center; padding: 70px 0 60px; background-size: cover; background-position: center; }
.spt-fascia-scura h2 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 400; margin: 0 0 46px; }
.spt-tributi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; max-width: 1100px; margin: 0 auto 42px; }
.spt-tributo img { width: 92px; margin: 0 auto 14px; }
.spt-tributo span { font-weight: 800; font-size: 16px; line-height: 1.2; display: block; }
.spt-bottone { display: inline-block; padding: 16px 44px; background: var(--spt-arancio); color: #fff !important; font-weight: 800; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; text-decoration: none; border: 0; cursor: pointer; font-family: inherit; }
.spt-bottone:hover { background: #e26d00; }
.spt-bottone-vuoto { background: transparent; color: var(--spt-arancio) !important; border: 2px solid var(--spt-arancio); }
.spt-bottone-vuoto:hover { background: var(--spt-arancio); color: #fff !important; }

/* Servizi */
.spt-servizi-intro { text-align: center; margin: -20px auto 46px; font-size: 15px; }
.spt-servizi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 50px; max-width: 1100px; margin: 0 auto; }
.spt-servizio { display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: center; text-decoration: none; color: inherit; }
.spt-servizio img { width: 72px; }
.spt-servizio b { display: block; font-size: 14.5px; letter-spacing: .02em; color: var(--spt-scuro); }
.spt-servizio span { font-size: 13.5px; }
.spt-servizio:hover b { color: var(--spt-arancio); }

/* Alcuni clienti: carosello a scatti come quello di Elementor (3 loghi, 2 su tablet, 1 sul telefono),
   pallini sotto; lo muove sito-spt.js. Senza script resta una fila scorrevole a mano. */
.spt-carosello { overflow: hidden; }
.spt-carosello-binario { display: flex; overflow-x: auto; }
.spt-carosello-attivo .spt-carosello-binario { overflow: visible; }
.spt-carosello-binario > div { flex: 0 0 33.3333%; padding: 0 20px; display: flex; align-items: center; justify-content: center; }
.spt-carosello-binario img { max-height: 140px; width: auto; }
.spt-carosello-pallini { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 26px; }
.spt-carosello-pallini button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #000; opacity: .2; cursor: pointer; }
.spt-carosello-pallini button.spt-attivo { opacity: 1; }
@media (max-width: 1024px) { .spt-carosello-binario > div { flex-basis: 50%; } }
@media (max-width: 767px) { .spt-carosello-binario > div { flex-basis: 100%; } }

/* Entrate allo scorrimento (effetti di Elementor/animate.css, durata 1,25 s come "animated"): con lo script
   attivo l'elemento resta nascosto finché non entra nello schermo. Il titolo di sezione anima la barra
   (slideInLeft) e il testo (zoomInUp) separatamente. */
.spt-sito { overflow-x: clip; }
.spt-js .spt-sito [data-anima]:not(.spt-animato):not([data-anima="titolo"]),
.spt-js .spt-sito [data-anima="titolo"]:not(.spt-animato) h2,
.spt-js .spt-sito [data-anima="titolo"]:not(.spt-animato)::before { opacity: 0; }
.spt-animato:not(.spt-senza-movimento) { animation-duration: 1.25s; animation-fill-mode: backwards; }
.spt-animato[data-anima="titolo"] { animation: none; }
.spt-animato[data-anima="titolo"] h2 { animation: spt-zoomInUp 1.25s backwards; }
.spt-animato[data-anima="titolo"]::before { animation: spt-slideInLeft 1.25s backwards; }
.spt-animato[data-anima="zoomInUp"] { animation-name: spt-zoomInUp; }
.spt-animato[data-anima="slideInLeft"] { animation-name: spt-slideInLeft; }
.spt-animato[data-anima="fadeIn"] { animation-name: spt-fadeIn; }
.spt-animato[data-anima="fadeInLeft"] { animation-name: spt-fadeInLeft; }
.spt-animato[data-anima="fadeInRight"] { animation-name: spt-fadeInRight; }
.spt-animato[data-anima="fadeInDown"] { animation-name: spt-fadeInDown; }
.spt-animato[data-anima="fadeInUp"] { animation-name: spt-fadeInUp; }
.spt-animato[data-anima="bounceInLeft"] { animation-name: spt-bounceInLeft; }
@keyframes spt-zoomInUp {
    from { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); animation-timing-function: cubic-bezier(.55, .055, .675, .19); }
    60% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); animation-timing-function: cubic-bezier(.175, .885, .32, 1); }
    to { opacity: 1; transform: none; }
}
@keyframes spt-slideInLeft { from { transform: translate3d(-100%, 0, 0); visibility: visible; } to { transform: none; } }
@keyframes spt-fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes spt-fadeInLeft { from { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes spt-fadeInRight { from { opacity: 0; transform: translate3d(100%, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes spt-fadeInDown { from { opacity: 0; transform: translate3d(0, -100%, 0); } to { opacity: 1; transform: none; } }
@keyframes spt-fadeInUp { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; } }
@keyframes spt-bounceInLeft {
    from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(.215, .61, .355, 1); }
    0% { opacity: 0; transform: translate3d(-3000px, 0, 0); }
    60% { opacity: 1; transform: translate3d(25px, 0, 0); }
    75% { transform: translate3d(-10px, 0, 0); }
    90% { transform: translate3d(5px, 0, 0); }
    to { transform: none; }
}

/* Referenze: griglia di lettere */
.spt-referenze { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 26px; }
.spt-referenze a { display: block; border: 1px solid #e4e8ee; background: #fff; padding: 10px; transition: box-shadow .2s, transform .2s; }
.spt-referenze a:hover { box-shadow: 0 12px 26px rgba(0, 0, 0, .12); transform: translateY(-3px); }

/* Elenco di articoli (news, interviste) */
.spt-articoli { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 36px; }
.spt-articolo-scheda { background: #fff; text-decoration: none; color: inherit; display: flex; flex-direction: column; box-shadow: 0 6px 22px rgba(20, 30, 50, .08); }
.spt-articolo-scheda img { aspect-ratio: 840 / 473; object-fit: cover; width: 100%; }
.spt-articolo-scheda div { padding: 22px 24px 26px; }
.spt-articolo-scheda small { color: var(--spt-arancio); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 11px; }
.spt-articolo-scheda h3 { margin: 8px 0 10px; font-size: 18px; font-weight: 700; color: var(--spt-scuro); line-height: 1.3; }
.spt-articolo-scheda p { margin: 0 0 12px; font-size: 13.5px; }
.spt-articolo-scheda em { font-style: normal; font-weight: 700; color: var(--spt-arancio); font-size: 12px; letter-spacing: .15em; text-transform: uppercase; }

/* Testo lungo (articoli, seminari, privacy) */
.spt-articolo { max-width: 900px; margin: 0 auto; }
.spt-articolo h2, .spt-articolo h3, .spt-articolo h4 { color: var(--spt-scuro); line-height: 1.3; margin: 28px 0 12px; }
.spt-articolo h2 { font-size: 24px; } .spt-articolo h3 { font-size: 20px; } .spt-articolo h4 { font-size: 17px; }
.spt-articolo p { margin: 0 0 14px; }
.spt-articolo img { margin: 18px auto; }
.spt-articolo video { width: 100%; margin: 18px 0; background: #000; }
.spt-articolo a { color: var(--spt-arancio); }
.spt-articolo table { border-collapse: collapse; width: 100%; margin: 14px 0; }
.spt-articolo td, .spt-articolo th { border: 1px solid #e3e7ec; padding: 6px 10px; vertical-align: top; }
.spt-data { color: #8a939e; font-size: 13px; text-align: center; margin: -30px 0 34px; }

/* Riduzione dei costi: le due fasi */
.spt-fasi { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 1000px; margin: 30px auto; }
.spt-fase { text-align: center; }
.spt-fase img { width: 90px; margin: 0 auto 14px; }

/* Consulenza continuativa: tre benefici */
.spt-benefici { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 1100px; margin: 0 auto; text-align: center; }
.spt-benefici img { width: 110px; margin: 0 auto 16px; }
.spt-benefici h3 { color: var(--spt-arancio-chiaro); font-size: 19px; margin: 0 0 10px; }

/* Seminari */
.spt-seminari { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.spt-seminario { background: #fff; box-shadow: 0 6px 22px rgba(20, 30, 50, .08); text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.spt-seminario img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.spt-seminario div { padding: 18px 22px 22px; }
.spt-seminario small { color: var(--spt-arancio); font-weight: 700; letter-spacing: .12em; font-size: 11px; }
.spt-seminario h3 { margin: 6px 0 0; font-size: 17px; color: var(--spt-scuro); }

/* Contatti */
.spt-contatti-dati { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 44px; margin-bottom: 40px; font-weight: 600; }
.spt-contatti-dati span { display: inline-flex; align-items: center; gap: 10px; }
.spt-contatti-dati svg { width: 22px; height: 22px; fill: var(--spt-arancio-chiaro); }

/* Moduli */
.spt-modulo { max-width: 900px; margin: 0 auto; background: #fff; padding: 36px 40px; box-shadow: 0 10px 30px rgba(20, 30, 50, .08); }
.spt-campi { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.spt-campo-intero { grid-column: 1 / -1; }
.spt-campo label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5e6877; margin-bottom: 6px; }
.spt-campo input, .spt-campo textarea, .spt-campo select { width: 100%; padding: 12px 14px; border: 1px solid #d9dee5; background: #fbfcfd; font-family: inherit; font-size: 14px; color: var(--spt-testo); border-radius: 2px; }
.spt-campo input:focus, .spt-campo textarea:focus { outline: 2px solid rgba(251, 122, 0, .35); border-color: var(--spt-arancio); background: #fff; }
.spt-campo textarea { min-height: 120px; resize: vertical; }
.spt-scelte { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.spt-scelte label { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--spt-testo); display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; margin: 0; }
.spt-scelte input { width: auto; }
.spt-consenso { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.55; margin-top: 18px; }
.spt-consenso input { margin-top: 3px; }
.spt-consenso a { color: var(--spt-arancio); }
.spt-errore { color: #c62828; font-weight: 700; margin: 14px 0 0; }
.spt-esca { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.spt-modulo .validation-message { color: #c62828; font-size: 12px; }

/* Impegno sociale */
.spt-diritti { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }

/* Grazie */
.spt-grazie { text-align: center; padding: 60px 24px 90px; }
.spt-grazie h1 { font-size: clamp(26px, 3vw, 38px); font-weight: 300; color: #8a939e; margin: 10px 0; }

/* Torna alla homepage */
.spt-torna { text-align: center; padding: 10px 0 70px; }

/* --- Piè di pagina --- */
.spt-piede { flex-shrink: 0; }
.spt-piede-blocco { background: linear-gradient(100deg, var(--spt-piede-a) 0%, var(--spt-piede-b) 100%); color: #fff; text-align: center; padding: 44px 24px 40px; font-size: 13.5px; line-height: 1.7; }
.spt-piede-blocco h2 { font-size: 22px; font-weight: 700; margin: 0 0 12px; }
/* Le due sedi affiancate nel piè di pagina, ciascuna col suo titolo e la città sotto. */
.spt-piede-sedi { display: flex; justify-content: center; gap: 30px 90px; flex-wrap: wrap; margin-top: 18px; }
.spt-piede-sede { min-width: 230px; }
.spt-piede-sede h3 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.spt-piede-citta { display: block; margin: 2px 0 10px; font-size: 16px; font-weight: 300; }
.spt-piede-sede a.spt-piede-tel { font-weight: 500; }
.spt-piede-blocco a { color: #fff; font-weight: 700; text-decoration: none; }
.spt-piede-fondo { text-align: center; padding: 18px 24px 30px; font-size: 12.5px; }
.spt-piede-fondo p { margin: 0 0 14px; }
.spt-piede-fondo a { color: var(--spt-arancio); text-decoration: none; }
.spt-piede-fondo a:hover { text-decoration: underline; }

/* --- Schermi stretti --- */
@media (max-width: 1100px) {
    .spt-menu, .spt-barra-accesso { display: none; }
    .spt-menu-mobile { display: block; }
    .spt-testata-riga { height: 76px; padding: 0 20px; }
    .spt-logo img { width: 170px; }
}
@media (max-width: 900px) {
    .spt-sezione { padding: 60px 0; }
    .spt-due, .spt-diritti, .spt-fasi { grid-template-columns: 1fr; gap: 30px; }
    .spt-due.spt-invertito > :first-child { order: 0; }
    .spt-impegno { grid-template-columns: 1fr; }
    .spt-numeri, .spt-tributi { grid-template-columns: 1fr 1fr; }
    .spt-servizi, .spt-benefici, .spt-seminari { grid-template-columns: 1fr; }
    .spt-campi { grid-template-columns: 1fr; }
    .spt-modulo { padding: 24px 18px; }
    .spt-hero { height: auto; min-height: 560px; padding: 70px 0; }
    .spt-hero-testo { padding: 0 22px; }
    .spt-testata-immagine { aspect-ratio: 480 / 360; }
}
@media (prefers-reduced-motion: reduce) {
    .spt-parole > span, .spt-hero-testo *, .spt-animato { animation: none !important; }
    .spt-parole > span:last-child { opacity: 1; }
}

/* Ancore dell'informativa (#privacy, #cookie): il titolo non finisce sotto la testata fissa. */
.spt-articolo [id] { scroll-margin-top: 110px; }
/* Pagina /accesso: modulo stretto al centro. */
.spt-accesso-pagina { max-width: 480px; margin: 0 auto; }
.spt-accesso-nota { text-align: center; margin: 22px 0 0; font-size: 13px; }
.spt-accesso-nota a { color: var(--spt-arancio); font-weight: 600; }
.spt-accesso-pagina .spt-campo { margin-bottom: 16px; }
.spt-accesso-pagina .spt-errore { margin: 0 0 18px; text-align: center; }
/* Contatti: le due sedi affiancate con titolo, città, indirizzo, telefono ed email. */
.spt-contatti-sedi { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; margin-bottom: 26px; }
.spt-contatti-sede { background: #fff; padding: 22px 28px; min-width: 290px; box-shadow: 0 6px 22px rgba(20, 30, 50, .06); border-top: 3px solid var(--spt-arancio-chiaro); text-align: center; line-height: 1.8; }
.spt-contatti-sede h3 { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--spt-scuro); }
.spt-contatti-sede .spt-piede-citta { color: var(--spt-arancio); font-weight: 600; }
.spt-contatti-sede a { color: var(--spt-arancio); text-decoration: none; font-weight: 600; }

/* --- Riquadro "Tributaria Per Te" (home e Progetto futuro): nei colori blu di Tributaria --- */
.spt-tributaria { background: linear-gradient(120deg, #143f7a 0%, #1e5aa8 55%, #3a86d6 100%); color: #fff; padding: 80px 0; position: relative; overflow: hidden; }
.spt-tributaria::after { content: "∞"; position: absolute; right: -40px; bottom: -120px; font-size: 460px; line-height: 1; color: rgba(255, 255, 255, .06); pointer-events: none; }
.spt-tributaria-griglia { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: center; position: relative; z-index: 1; }
.spt-tributaria-novita { display: inline-block; background: var(--spt-arancio); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 5px 12px; border-radius: 2px; }
.spt-tributaria-logo { margin: 22px 0 6px; display: inline-block; background: #fff; padding: 8px 16px; border-radius: 4px; }
.spt-tributaria h2 { font-size: clamp(26px, 2.8vw, 38px); font-weight: 300; line-height: 1.2; margin: 10px 0 18px; }
.spt-tributaria p { font-size: 15px; margin: 0 0 14px; max-width: 640px; opacity: .95; }
.spt-tributaria ul { margin: 0 0 18px; padding-left: 20px; font-size: 14.5px; }
.spt-tributaria li { margin-bottom: 6px; }
.spt-tributaria li::marker { color: #f7a618; }
.spt-tributaria-libero { background: rgba(255, 255, 255, .1); border-left: 3px solid #f7a618; padding: 10px 14px; }
.spt-tributaria-azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.spt-bottone-tributaria { background: #fff !important; color: #143f7a !important; }
.spt-bottone-tributaria:hover { background: #f7a618 !important; color: #fff !important; }
.spt-bottone-vuoto-chiaro { background: transparent !important; border: 2px solid #fff; color: #fff !important; }
.spt-bottone-vuoto-chiaro:hover { background: rgba(255, 255, 255, .15) !important; }
.spt-tributaria-numeri { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.spt-tributaria-numeri div { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); padding: 20px; }
.spt-tributaria-numeri strong { display: block; font-size: 32px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.spt-tributaria-numeri span { font-size: 13px; opacity: .9; }

/* --- Pagina Progetto futuro --- */
.spt-progetto-testata { background: linear-gradient(120deg, #2b1a0a 0%, #5a3208 60%, #fb7a00 140%); color: #fff; padding: 90px 0 80px; }
.spt-progetto-sopra { font-size: 13px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--spt-arancio-chiaro); }
.spt-progetto-testata h1 { font-size: clamp(30px, 4vw, 52px); font-weight: 300; line-height: 1.15; margin: 14px 0 18px; max-width: 860px; }
.spt-progetto-testata h1 b { font-weight: 800; }
.spt-progetto-testata p { font-size: 17px; max-width: 780px; opacity: .92; margin: 0; }
.spt-progetto-pilastri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.spt-progetto-pilastri div { border-top: 3px solid var(--spt-arancio-chiaro); padding-top: 16px; }
.spt-progetto-pilastri h3 { margin: 0 0 8px; font-size: 18px; color: var(--spt-scuro); }
.spt-roadmap { list-style: none; padding: 0; margin: 0 auto; max-width: 900px; position: relative; }
.spt-roadmap::before { content: ""; position: absolute; left: 34px; top: 10px; bottom: 10px; width: 2px; background: #e0e4ea; }
.spt-roadmap > li { display: grid; grid-template-columns: 70px 1fr; gap: 24px; margin-bottom: 28px; position: relative; }
.spt-roadmap-numero { text-align: center; }
.spt-roadmap-numero span { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; background: #fff; border: 2px solid #d9dee5; font-size: 26px; font-weight: 800; color: #8a939e; position: relative; }
.spt-roadmap-numero small { display: block; margin-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8a939e; }
.spt-roadmap-oggi .spt-roadmap-numero span { background: var(--spt-arancio); border-color: var(--spt-arancio); color: #fff; }
.spt-roadmap-oggi .spt-roadmap-numero small { color: var(--spt-arancio); }
.spt-roadmap-corpo { background: #fff; padding: 22px 26px; box-shadow: 0 6px 22px rgba(20, 30, 50, .06); }
.spt-roadmap-oggi .spt-roadmap-corpo { border-left: 4px solid var(--spt-arancio); }
.spt-roadmap-corpo h3 { margin: 10px 0 8px; font-size: 19px; color: var(--spt-scuro); }
.spt-roadmap-corpo p { margin: 0 0 10px; }
.spt-roadmap-corpo ul { margin: 0 0 12px; padding-left: 20px; }
@media (max-width: 900px) {
    .spt-tributaria-griglia, .spt-progetto-pilastri { grid-template-columns: 1fr; gap: 30px; }
    .spt-roadmap::before { left: 24px; }
    .spt-roadmap > li { grid-template-columns: 50px 1fr; gap: 14px; }
    .spt-roadmap-numero span { width: 50px; height: 50px; font-size: 20px; }
}
/* Menu del telefono più alto dello schermo (con il modulo di accesso in fondo): il pannello scorre da sé. */
.spt-menu-mobile-pannello { max-height: calc(100vh - 76px); overflow-y: auto; }

/* =====================================================================================================
   REVISIONE DEL DESIGN (2026-09-26 notte, richiesta utente: "molte cose danno l'idea di scadente: il menu in
   alto, i riquadri non sono animati, le foto a tutta videata"). Regole che correggono quelle sopra.
   ===================================================================================================== */

/* --- Fascia di accesso: più scura e compatta, campi arrotondati --- */
.spt-barra-accesso { background: #1d242e; }
.spt-barra-accesso-riga { padding: 6px 40px; max-width: 1340px; }
.spt-accesso-etichetta { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .85); font-size: 11px; }
.spt-accesso-etichetta svg { width: 13px; height: 13px; fill: var(--spt-arancio-chiaro); }
.spt-accesso-barra input { width: 170px; height: 28px; padding: 0 14px; border-radius: 999px; border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .07); font-size: 12.5px; transition: background .2s, border-color .2s, width .25s; }
.spt-accesso-barra input:focus { width: 200px; outline: none; border-color: var(--spt-arancio-chiaro); background: rgba(255, 255, 255, .14); }
.spt-accesso-barra button, .spt-barra-accesso .spt-accesso-bottone, .spt-barra-accesso .spt-accesso-esci button { height: 28px; padding: 0 18px; border-radius: 999px; transition: background .2s, transform .2s; }
.spt-barra-accesso .spt-accesso-bottone { display: inline-flex; align-items: center; }
.spt-accesso-barra button:hover { transform: translateY(-1px); }
.spt-accesso-dimenticata { text-decoration: none; opacity: .7; transition: opacity .2s; }

/* --- Testata: più bassa, linea arancione che scorre sotto le voci, si stringe scorrendo --- */
.spt-testata { box-shadow: none; transition: box-shadow .3s; }
.spt-testata.spt-scorsa { box-shadow: 0 6px 24px rgba(20, 30, 50, .10); }
.spt-testata-riga { height: 80px; transition: height .3s; }
.spt-logo img { transition: width .3s; }
.spt-menu { gap: 4px; }
.spt-menu > li > a { position: relative; display: flex; align-items: center; gap: 5px; padding: 10px 12px; font-weight: 600; font-size: 14px; color: #2a2f36; letter-spacing: 0; transition: color .2s; }
.spt-menu > li > a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--spt-arancio); transform: scaleX(0); transform-origin: left; transition: transform .28s cubic-bezier(.2, .7, .2, 1); }
.spt-menu > li > a:hover::after, .spt-menu > li.spt-attivo > a::after { transform: scaleX(1); }
.spt-menu > li.spt-attivo > a { text-decoration: none; }
.spt-freccia { width: 10px; height: 10px; fill: none; opacity: .6; transition: transform .25s; }
.spt-menu > li:hover .spt-freccia { transform: rotate(180deg); }
.spt-sottomenu { top: calc(100% + 4px); padding: 8px; border-top: 0; border-radius: 12px; box-shadow: 0 18px 44px rgba(20, 30, 50, .16), 0 0 0 1px rgba(20, 30, 50, .04); transform: translateY(10px) scale(.98); transform-origin: top left; }
.spt-sottomenu::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.spt-sottomenu a { border-radius: 8px; padding: 9px 14px; transition: background .18s, color .18s, transform .18s; }
.spt-sottomenu a:hover { transform: translateX(3px); }
@media (min-width: 1101px) {
    .spt-testata.spt-scorsa .spt-testata-riga { height: 64px; }
    .spt-testata.spt-scorsa .spt-logo img { width: 178px; }
}

/* --- Immagini di testata: niente più tutto schermo --- */
.spt-hero { height: clamp(440px, 64vh, 600px); min-height: 0; }
.spt-hero > picture > img, .spt-hero > img { animation: spt-zoom-lento 14s ease-out both; }
/* Pagine interne: una fascia bassa al posto dell'immagine intera, con uno zoom lento. */
.spt-testata-immagine { aspect-ratio: auto; height: clamp(200px, 32vh, 330px); }
.spt-testata-immagine img { object-position: center 40%; animation: spt-zoom-lento 12s ease-out both; }
.spt-testata-immagine::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(0deg, rgba(0, 0, 0, .18), transparent); pointer-events: none; }
@keyframes spt-zoom-lento { from { transform: scale(1.08); } to { transform: scale(1); } }
.spt-sezione { padding: 76px 0; }

/* --- Pulsanti --- */
.spt-bottone { border-radius: 3px; transition: background .2s, transform .2s, box-shadow .2s; }
.spt-bottone:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(251, 122, 0, .28); }
.spt-bottone-tributaria:hover, .spt-bottone-vuoto-chiaro:hover { box-shadow: 0 10px 22px rgba(0, 0, 0, .2); }

/* --- Riquadri come schede: si sollevano al passaggio ed entrano uno dopo l'altro (data-anima="sali") --- */
.spt-impegno-voce { background: rgba(255, 255, 255, .88); padding: 26px 24px; border-radius: 12px; box-shadow: 0 6px 24px rgba(20, 30, 50, .06); }
.spt-numero { background: #fff; padding: 30px 18px 26px; border-radius: 14px; box-shadow: 0 6px 24px rgba(20, 30, 50, .06); }
.spt-servizio { padding: 18px; border-radius: 12px; border: 1px solid #edf0f4; background: #fff; }
.spt-tributo { padding: 22px 12px; border-radius: 14px; transition: background .25s, transform .3s; }
.spt-tributo:hover { background: rgba(255, 255, 255, .08); }
.spt-articolo-scheda { border-radius: 12px; overflow: hidden; }
.spt-articolo-scheda img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.spt-articolo-scheda:hover img { transform: scale(1.05); }
.spt-referenze a { border-radius: 10px; }
.spt-contatti-sede, .spt-roadmap-corpo { border-radius: 12px; }
.spt-impegno-voce, .spt-numero, .spt-servizio, .spt-articolo-scheda, .spt-contatti-sede, .spt-roadmap-corpo,
.spt-progetto-pilastri > div, .spt-tributaria-numeri > div, .spt-benefici > div, .spt-fasi > div {
    transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s, border-color .3s;
}
.spt-impegno-voce:hover, .spt-numero:hover, .spt-servizio:hover, .spt-articolo-scheda:hover, .spt-contatti-sede:hover,
.spt-roadmap-corpo:hover, .spt-tributo:hover, .spt-progetto-pilastri > div:hover, .spt-tributaria-numeri > div:hover,
.spt-benefici > div:hover, .spt-fasi > div:hover {
    transform: translateY(-6px);
}
.spt-impegno-voce:hover, .spt-numero:hover, .spt-servizio:hover, .spt-articolo-scheda:hover, .spt-contatti-sede:hover, .spt-roadmap-corpo:hover {
    box-shadow: 0 18px 40px rgba(20, 30, 50, .13);
}
.spt-servizio:hover { border-color: rgba(251, 122, 0, .45); }
.spt-impegno-voce img, .spt-numero img, .spt-servizio img, .spt-tributo img, .spt-benefici img { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.spt-impegno-voce:hover img, .spt-numero:hover img, .spt-servizio:hover img, .spt-tributo:hover img, .spt-benefici > div:hover img { transform: scale(1.08) rotate(-3deg); }
.spt-animato[data-anima="sali"] { animation: spt-sali .8s cubic-bezier(.2, .7, .2, 1) var(--ritardo, 0s) backwards; }
@keyframes spt-sali { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .spt-hero > picture > img, .spt-testata-immagine img, .spt-animato[data-anima="sali"] { animation: none !important; }
    .spt-impegno-voce:hover, .spt-numero:hover, .spt-servizio:hover, .spt-articolo-scheda:hover, .spt-tributo:hover { transform: none; }
}
@media (max-width: 900px) {
    .spt-hero { height: auto; min-height: 460px; padding: 60px 0; }
    .spt-testata-immagine { height: 190px; }
    .spt-sezione { padding: 56px 0; }
}
.spt-tributaria-logo { display: table; }
.spt-due p a { color: var(--spt-arancio); text-decoration: none; border-bottom: 1px solid rgba(251, 122, 0, .35); }
.spt-due p a:hover { border-bottom-color: var(--spt-arancio); }

/* --- Accesso al gestionale sul telefono (2026-09-27): in cima a tutto, riga compatta che si apre --- */
.spt-accesso-mobile { display: none; width: 100%; }
.spt-accesso-mobile > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 4px 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.spt-accesso-mobile > summary::-webkit-details-marker { display: none; }
.spt-accesso-mobile > summary svg { width: 14px; height: 14px; fill: var(--spt-arancio-chiaro); }
.spt-accesso-mobile > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid rgba(255, 255, 255, .7); border-bottom: 2px solid rgba(255, 255, 255, .7); transform: rotate(45deg) translateY(-2px); transition: transform .25s; }
.spt-accesso-mobile[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); margin-top: 6px; }
.spt-accesso-mobile .spt-accesso { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px 0 12px; }
.spt-accesso-mobile .spt-accesso-etichetta { display: none; }
.spt-accesso-mobile input { width: 100%; height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); color: #fff; font-size: 15px; }
.spt-accesso-mobile input:focus { outline: none; border-color: var(--spt-arancio-chiaro); background: rgba(255, 255, 255, .14); }
.spt-accesso-mobile button { height: 44px; border-radius: 999px; font-size: 13px; }
.spt-accesso-mobile .spt-accesso-dimenticata { text-align: center; }
@media (max-width: 1100px) {
    .spt-barra-accesso { display: block; }
    .spt-accesso-barra { display: none; }
    .spt-accesso-mobile { display: block; }
    .spt-barra-accesso-riga { padding: 6px 16px; justify-content: center; flex-wrap: wrap; }
    .spt-testata-riga { position: relative; }
    .spt-menu-mobile-pannello { top: 100%; max-height: calc(100vh - 120px); }
}