/* Aggiunte di web2 al tema del portale storico.
   Valgono su tutte le pagine col tema storico: la vetrina (dove la sezione "Rilevatori" tiene insieme
   marcatempo, accessori e modalità dati) e le schede tecniche dei rilevatori. Stanno in un file e non
   in un <style> dentro i componenti perché servono a tutt'e due, e duplicarle vorrebbe dire tenerle
   allineate a mano. */

/* Solo le pagine separate: lì la barra del menu è fissa e senza questo margine il titolo ci finirebbe
   sotto. Sulla vetrina non serve, perché sopra c'è il video a tutta altezza. */
.pagina-vetrina { padding-top: 140px; }

/* I pannelli sono scuri col testo bianco: i link vanno in arancio come il resto degli accenti. */
.generale a { color: #ffba43; }
.generale .ritorno,
.generale .indice { font-size: 1.3em; margin-bottom: 0; }

/* ─────────────────────── Scala dei titoli e dei testi ───────────────────────
   Il tema mescola le unità: h2, h3 e i paragrafi sono in em, mentre gli h4 li fissa Bootstrap a
   18px ASSOLUTI e non li scala mai. Anche alla base per cui il tema è disegnato (14px, quella di
   Bootstrap) l'ordine non regge del tutto: già su desktop il capitolo (h4, 18px) usciva più piccolo
   del testo che introduce (1,6em = 22px).

   Sul portale storico andava peggio, perché la home pubblica caricava anche i fogli dell'area
   amministrativa (jQuery Layout, tolto a settembre 2026), che portavano la base a 10px: lì tutto
   tranne gli h4 si rimpiccioliva, e sotto i 480px il capitolo diventava più GRANDE del titolo di
   sezione (h2 15, h3 14, h4 18). La base fissata qui sotto resta: non costa nulla e tiene i due
   portali identici qualunque foglio arrivi in futuro.

   Si fa una cosa sola, alla radice: si fissa la base di queste sezioni al valore per cui il tema è
   disegnato — così i due portali calcolano gli stessi identici valori — e si riscrive la scala per
   intero, h2 > h3 > h4 > testo a ogni larghezza. Del tema si corregge anche il salto degli h2, che
   sotto i 900px tornavano a CRESCERE (2,2em → 2,5em) scavalcando la fascia precedente.

   Lo stesso problema si ripresenta sotto i titoli: gli elenchi puntati e le tabelle il tema non li
   scala affatto. Restavano a misura piena anche dove il testo scende, e un elenco finiva più grande
   del capitolo che lo introduce (sotto i 900px: elenco 22,4 contro h4 20,3; sotto i 480px, 17,5).
   Anche loro scendono insieme al testo, perché quello che conta non è la misura di ciascuno ma
   l'ordine fra tutti — per questo stanno tutte qui, una sotto l'altra, invece che sparse nel file.

   Valori risultanti, uguali sui due portali:
                 h2/h1   h3     h4     testo ed elenchi   specifiche   confronto e ritorno
     ≥1200       42      30,8   24,5   22,4               19,6         18,2
     ≤1199       36,4    28     24,5   22,4               19,6         18,2
     ≤899        36,4    28     20,3   16,1               15,4         14,7
     ≤480        25,2    21     17,5   16,1               15,4         14,7                    */
.generale {
    font-size: 14px;
}

.generale h2,
.generale h1.titolo-scheda {
    font-size: 3em;
}

.generale h4 {
    font-size: 1.75em;
}

/* I capitoli che si vedono come h4 ma non lo sono più (vedi .capitolo più sotto): stessa misura degli
   h4, a ogni larghezza. !important per lo stesso motivo di h3.sezione: il tema fissa gli h3 con
   "font-size: <n>px !important". */
.generale .capitolo {
    font-size: 1.75em !important;
}

/* Anche le due tabelle: la misura sta qui con le altre — se stesse in fondo, insieme al resto del
   loro aspetto, verrebbe DOPO le media query e le annullerebbe (successo, misurato). Là sotto
   restano solo colori, bordi e spaziature. */
.tabella-specifiche { font-size: 1.4em; }
.tabella-vetrina { font-size: 1.3em; }

/* Il titolo delle schede rilevatore è un h1 — è il nome del prodotto, cioè di che cosa parla la
   pagina — ma si vede come l'h2 di una sezione. */
.generale h1.titolo-scheda {
    font-weight: 100;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0.5em 0;
    line-height: 1.3;
    color: #fff;
}

/* Livello intermedio fra il titolo della pagina (h2) e i suoi capitoli (h4): serve alla sezione
   "Prodotti", che tiene insieme tre argomenti.

   Il corpo va imposto con !important, che di solito è da evitare: il tema fissa gli h3 con
   "font-size: <n>px !important" dentro le sue media query — li usa per il ticker della copertina —
   e un !important batte qualunque specificità, persino uno stile inline (provato). */
.generale h3.sezione {
    font-size: 2.2em !important;
    font-weight: 100;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    margin: 1.4em 0 0.6em;
    padding-top: 0.8em;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

/* Il primo titolo di sezione sta subito sotto quello della pagina: la riga di separazione, che fra
   una sezione e l'altra serve, lì diventerebbe un filo appiccicato al titolo. */
.generale h3.sezione:first-of-type {
    border-top: none;
    padding-top: 0;
    margin-top: 0.6em;
}

/* Capitoli con il tag giusto e l'aspetto di prima. Il livello dei titoli era scelto per la misura del
   carattere e saltava: sotto l'h2 "Come funziona" c'erano solo h4, sotto l'h1 delle schede pure, e il
   sottotitolo delle schede era un h4 anche lui. Ora i primi sono h3, i secondi h2, il sottotitolo un
   paragrafo, e questa classe dà a tutti quello che il tema dava agli h4: carattere, peso, interlinea,
   colore e margini (10px sopra da Bootstrap, mezza riga sotto dal tema). Toglie invece quello che il
   tema dà a h2, h3 e paragrafi — maiuscolo, spaziatura, giustificato, rientri. */
.generale .capitolo {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: normal;
    text-transform: none;
    text-align: inherit;
    color: #fff;
    margin: 10px 0 0.5em;
    padding: 0;
}

/* Il tema qui porta gli h2 a 2,2em ma lascia il testo a 1,6em: fra i due resterebbero 8px per
   DUE livelli, e titolo di sezione e capitolo verrebbero fuori praticamente uguali. Si allarga
   l'alto invece di comprimere il basso. */
@media (max-width: 1199px) {
    .generale h2,
    .generale h1.titolo-scheda { font-size: 2.6em; }
    .generale h3.sezione { font-size: 2em !important; }
}

/* Solo qui il tema rimpicciolisce il testo (1,6em -> 1,15em). Scendono con lui, non prima, sia il
   titolo di capitolo sopra sia tutto quello che il tema si era dimenticato di scalare: elenchi,
   tabelle e il link di ritorno. */
@media (max-width: 899px) {
    .generale h4 { font-size: 1.45em; }
    .generale .capitolo { font-size: 1.45em !important; }
    .generale ul li { font-size: 1.15em; }
    .generale .ritorno,
    .generale .indice { font-size: 1.05em; }
    .tabella-specifiche { font-size: 1.1em; }
    .tabella-vetrina { font-size: 1.05em; }
}

@media (max-width: 480px) {
    .generale h2,
    .generale h1.titolo-scheda { font-size: 1.8em; }
    .generale h3.sezione { font-size: 1.5em !important; }
    .generale h4 { font-size: 1.25em; }
    .generale .capitolo { font-size: 1.25em !important; }
}

.generale ul { margin-bottom: 2em; }

/* Riquadri prodotto: le foto dei rilevatori hanno il fondo bianco, che su pannello scuro va staccato
   con un angolo arrotondato invece di finire in un rettangolo netto. */
.prodottolettore .picture { background: #fff; border-radius: 4px; }
.infolettore { margin-top: 10px; }
.infolettore .iva { font-size: 12px; color: rgba(255, 255, 255, 0.7); }

/* Due colonne, voce e valore: le specifiche di targa nelle schede rilevatore. */
.tabella-specifiche {
    width: 100%;
    margin-bottom: 2em;
    color: #fff;
    font-weight: 100;
}

.tabella-specifiche th,
.tabella-specifiche td {
    padding: 8px 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    vertical-align: top;
}

.tabella-specifiche th { width: 34%; font-weight: 600; color: #ffba43; }

/* Più colonne, con intestazione: il confronto fra le modalità di scarico dati. */
.tabella-vetrina {
    width: 100%;
    margin-bottom: 2em;
    color: #fff;
    font-weight: 100;
}

.tabella-vetrina th,
.tabella-vetrina td {
    padding: 8px 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    vertical-align: top;
    text-align: left;
}

.tabella-vetrina thead th { color: #ffba43; font-weight: 600; border-top: none; }

/* Su schermo stretto la tabella scorre da sola invece di sfondare la pagina. */
.tabella-scorrevole { overflow-x: auto; margin-bottom: 2em; position: relative; }
/* position: relative perché il contenitore faccia da riferimento ai testi per i lettori di schermo (.sr-only, in
   posizione assoluta) delle spunte: senza, uscivano dal riquadro che scorre e allargavano la pagina su telefono. */
.tabella-scorrevole .tabella-vetrina { margin-bottom: 0; min-width: 560px; }

@media (max-width: 767px) {
    .tabella-specifiche th { width: 40%; }
}

/* ─────────────────────── Home: testi che non sono più titoli ───────────────────────
   Frasi del ticker, "Accedi" e nota sull'IVA erano h3 prima ancora del primo h2 della pagina, e i due
   titoli dei contatti erano due h2 di fila. Ora sono testo, o un titolo solo, con la resa di prima:
   la misura la dà la classe h3 di Bootstrap (che nei fogli del tema vale come il tag h3 anche nelle
   media query), qui c'è il resto. */

/* Le regole che il tema dava a "section h3", per la nota sotto la tabella delle versioni. */
section .nota-iva {
    font-size: 1em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* La tabella delle versioni ora scorre dentro il suo contenitore: su telefono è più larga dello
   schermo e prima trascinava di lato tutta la pagina. Lo spazio sotto lo dà già .table di Bootstrap. */
#versioni .tabella-scorrevole { margin-bottom: 18px; }

/* Contatti: un h2 solo al posto di due. La prima riga resta blu e lascia sotto lo spazio che
   lasciavano i margini dei due h2 separati, mezza riga ciascuno. */
#contatti .titolo-contatti-sezione {
    display: block;
    color: #0056a4;
    margin-bottom: 1em;
}

/* Pagina "non trovata" per chi arriva da fuori: poco testo, ma il piede resta in fondo allo schermo. */
.pagina-non-trovata { min-height: 75vh; }

/* Informativa privacy (solo web2 la serve con questo tema): il titolo è una frase lunga, non il nome di un
   modello, e alla misura dei titoli delle schede andava a capo anche su desktop. Scende a quella dei titoli
   di sezione, a ogni larghezza. */
.pagina-privacy .generale h1.titolo-scheda { font-size: 2.2em; }

@media (max-width: 1199px) {
    .pagina-privacy .generale h1.titolo-scheda { font-size: 2em; }
}

@media (max-width: 480px) {
    .pagina-privacy .generale h1.titolo-scheda { font-size: 1.5em; }
}

/* ─────────────────────── App Lettore Presenze (#10798) ───────────────────────
   Sezione in risalto subito dopo l'accesso: lo sfondo blu del marchio la stacca dalle sezioni fotografiche
   scure; i badge degli store si usano così come li danno Apple e Google (niente ricolorazioni). */
.sezione-app {
    background: linear-gradient(135deg, #1d2f5e 0%, #375299 55%, #4467c0 100%);
    color: #fff;
    padding: 60px 0 50px;
    text-align: left;   /* il tema centra tutto: gli elenchi centrati non si leggono */
    scroll-margin-top: 60px;   /* il menu fisso non copre il titolo arrivando da «App» */
}
.sezione-app h2 { color: #fff; margin-top: 6px; font-size: 2.6em; }
.sezione-app h3 { color: #ffba43; font-size: 1.35em; margin-top: 1.2em; }
.sezione-app p, .sezione-app li { font-size: 1.1em; line-height: 1.55; }
.sezione-app a:not(.badge-store a) { color: #ffd27f; text-decoration: underline; }
.sezione-app ul { padding-left: 1.2em; }
.sezione-app li { margin-bottom: 6px; }
.occhiello-app { display: inline-block; text-transform: uppercase; letter-spacing: 2px; font-size: .85em; color: #ffd27f; }
.sottotitolo-app { font-size: 1.3em !important; font-weight: 300; }
.privacy-app { margin: 22px 0 0; padding: 10px 14px; border-left: 3px solid #ffba43; background: rgba(255, 255, 255, .08); font-size: 1em !important; }
.accesso-app { margin-bottom: 1em; }

/* Le funzioni, sotto testo e telefoni: due riquadri a tutta larghezza, quello dei dipendenti più largo e con
   l'elenco su due colonne. Spunte gialle al posto dei pallini. */
.schede-app { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; margin-top: 40px; }
.scheda-app {
    padding: 20px 24px 14px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 14px;
    background: rgba(255, 255, 255, .07);
}
.sezione-app .scheda-app h3 { margin: 0 0 12px; font-size: 1.25em; }
.sezione-app .elenco-app { list-style: none; margin: 0; padding: 0; }
.sezione-app .elenco-app li {
    position: relative;
    margin: 0 0 10px;
    padding-left: 26px;
    font-size: 1em;
    line-height: 1.45;
    break-inside: avoid;
}
.sezione-app .elenco-app li::before {
    content: "";
    position: absolute; left: 2px; top: .3em;
    width: 12px; height: 7px;
    border-left: 2px solid #ffba43;
    border-bottom: 2px solid #ffba43;
    transform: rotate(-45deg);
}
.scheda-app-larga .elenco-app { column-count: 2; column-gap: 28px; }

.telefoni-app { display: flex; justify-content: center; align-items: flex-start; gap: 14px; padding-top: 10px; }
.telefono-app {
    width: 31%;
    max-width: 180px;
    height: auto;
    border: 6px solid #0f1830;
    border-radius: 22px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
    background: #fff;
}
.telefono-app:nth-child(2) { margin-top: 36px; }

.badge-store { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.badge-store a { display: inline-block; line-height: 0; }

/* ─────────────────────── Prima sezione: messaggi a sinistra, accesso a destra (14/11/2026) ───────────────────────
   custom.js scrive inline un'altezza pari alla finestra su #intro-video: qui la sezione è alta ALMENO quanto la
   finestra e cresce col contenuto (gli !important battono lo stile inline). Prima il riquadro dell'accesso stava
   in posizione assoluta dentro quell'altezza fissa e, su un portatile con lo zoom di Windows, la parte bassa
   veniva tagliata. Il riquadro resta semitrasparente come prima, ma è più piccolo e sta di lato. */
#intro-video.hero-vetrina {
    position: relative;
    overflow: hidden;
    height: auto !important;
    min-height: 100vh;
    display: flex;
    align-items: center;
}
.hero-vetrina .video-hero {
    position: absolute; top: 50%; left: 50%;
    min-width: 100%; min-height: 100%; width: auto; height: auto;
    transform: translate(-50%, -50%);
    z-index: 0;
}
/* Velo scuro, più fitto a sinistra dove c'è il testo bianco. */
.hero-vetrina .velo-hero {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, rgba(14, 22, 44, .86) 0%, rgba(14, 22, 44, .62) 55%, rgba(14, 22, 44, .38) 100%);
}
.hero-vetrina .contenuto-hero {
    position: relative; z-index: 2;
    height: auto;
    width: 100%;
    max-width: 1240px;      /* il .container di Bootstrap, che dentro la flex perderebbe la sua larghezza */
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 130px;     /* sotto il menu, che da telefono è alto 115 */
    padding-bottom: 50px;
}
.griglia-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, 380px);
    gap: 48px;
    align-items: center;
}

/* Colonna dei messaggi. */
.testo-hero { color: #fff; text-align: left; }
.hero-vetrina h1.titolo-home {
    margin: 0 0 18px;
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffba43;
}
.messaggi-hero { display: grid; }
.messaggio-hero {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s ease, visibility 0s linear .8s;
}
.messaggio-hero.attivo { opacity: 1; visibility: visible; transition: opacity .8s ease, visibility 0s; }
.testo-hero .messaggio-titolo {
    margin: 0 0 10px;
    font-family: "Montserrat", sans-serif;
    font-size: 2.5em;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}
.testo-hero .messaggio-testo {
    margin: 0;
    font-size: 1.25em;
    line-height: 1.5;
    color: #d5dcef;
}
.puntini-hero { display: flex; gap: 8px; margin: 22px 0 30px; min-height: 8px; }
.puntini-hero button {
    width: 8px; height: 8px; padding: 0;
    border: none; border-radius: 4px;
    background: rgba(255, 255, 255, .4);
    cursor: pointer;
    transition: width .3s ease, background .3s ease;
}
.puntini-hero button.attivo { width: 26px; background: #ffba43; }
.puntini-hero button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.badge-store-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; color: #d5dcef; font-size: 14px; }

/* Riquadro dell'accesso: semitrasparente come prima, compatto. Specificità alta e !important dove il tema
   (theme.css, anche nelle media query) mette padding e margini con !important. */
.colonna-accesso { width: 100%; }
.hero-vetrina #login-container {
    background: rgba(255, 255, 255, .84);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .35);
    padding: 24px 26px 18px !important;
    margin: 0 !important;
    text-align: left;
}
.hero-vetrina .titolo-accesso {
    margin: 0 0 14px;
    font-family: "Montserrat", sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #1d2f5e;
}
.hero-vetrina #login-container .form-group { margin-bottom: 0; }
.hero-vetrina #login-container .form-control {
    height: 42px;
    margin-bottom: 10px;
    padding: 8px 12px;
    font-size: 15px;
    border: 1px solid #cfd6e4;
    border-radius: 8px;
    box-shadow: none;
}
.hero-vetrina #login-container .form-control:focus { border-color: #375299; box-shadow: 0 0 0 3px rgba(55, 82, 153, .18); }
.riga-accedi { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 12px; }
.hero-vetrina .bottone-accedi {
    margin: 0;
    padding: 9px 30px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 8px;
    border: none;
    background: #ffba43;     /* il giallo che il tema dava al pulsante quando stava nel blocco centrato */
    color: #fff;
}
.hero-vetrina .bottone-accedi:hover,
.hero-vetrina .bottone-accedi:focus { background: #f5a623; color: #fff; }
.ricordami { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: normal; color: #333; cursor: pointer; white-space: nowrap; }
.link-accesso { margin-top: 4px; font-size: 13px; }
.link-accesso a { color: #1d2f5e; text-decoration: underline; }
.nota-privacy-accesso { margin-top: 6px; font-size: 12px; color: #555; }
.nota-privacy-accesso a { color: #0056a4; }
.hero-vetrina #login-error-container { margin: 4px 0 10px; text-align: left; }
.hero-vetrina #login-error-container .h4 { margin: 4px 6px; font-size: 14px; line-height: 1.4; }
.hero-vetrina #login-error-container.esito-ok { background: #dff0d8; color: #2b542c; border-color: #9fcf8f; }

/* Portale storico ancora raggiungibile dopo il passaggio (sezione PortalePrecedente della configurazione). */
.avviso-portale-precedente-accesso { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #fff7e0; border: 1px solid #f0c75e; color: #4a3800; font-size: 13px; line-height: 1.4; text-align: center; }
.avviso-portale-precedente-accesso a { display: inline-block; margin-top: 4px; color: #0056a4; font-weight: 700; text-decoration: underline; }

@media (max-width: 1199px) {
    .testo-hero .messaggio-titolo { font-size: 2.1em; }
}

/* Tablet e telefono: una colonna, l'accesso per primo. */
@media (max-width: 991px) {
    .griglia-hero { grid-template-columns: minmax(0, 1fr); gap: 34px; max-width: 560px; margin: 0 auto; }
    .colonna-accesso { order: -1; }
    .hero-vetrina .velo-hero { background: rgba(14, 22, 44, .72); }
    .testo-hero .messaggio-titolo { font-size: 1.8em; }
}

@media (max-width: 480px) {
    .hero-vetrina .contenuto-hero { padding-top: 120px; padding-bottom: 36px; }
    .hero-vetrina #login-container { padding: 20px 18px 14px !important; }
    .hero-vetrina h1.titolo-home { font-size: 12px; letter-spacing: 1px; }
    .testo-hero .messaggio-titolo { font-size: 1.5em; }
    .testo-hero .messaggio-testo { font-size: 1.05em; }
}

@media (prefers-reduced-motion: reduce) {
    .messaggio-hero, .messaggio-hero.attivo, .puntini-hero button { transition: none; }
}

/* Listino e app per versione, sotto la tabella delle versioni. */
.titolo-listino-app { color: #375299; margin-top: 2em; font-weight: 600; }   /* la sezione versioni ha lo sfondo chiaro */
.testo-listino-app, .esempi-listino-app { color: #333; font-size: 1.15em; }
.esempio-listino-app { display: inline-block; margin: 4px 14px 4px 0; padding: 2px 10px; border-radius: 12px; background: #e8edf8; color: #1d2f5e; }
.tabella-listino-app td { font-size: 1.05em; }
/* Promozione dell'app (09/11/2026): ben visibile sopra il listino, sparisce da sola dopo la data. */
.promozione-app { margin: 0.6em 0 1em; padding: 14px 18px; border: 2px solid #F2CD02; border-radius: 10px; background: #FFF8D6; color: #3a2f00; font-size: 1.2em; line-height: 1.45; }
.promozione-app strong { color: #8a5a00; }
.badge-store-versioni { margin: 1em 0 2em; }

@media (max-width: 991px) {
    .telefoni-app { padding-top: 24px; }
    .schede-app { grid-template-columns: minmax(0, 1fr); margin-top: 30px; }
}

@media (max-width: 767px) {
    .scheda-app-larga .elenco-app { column-count: 1; }
}

@media (max-width: 480px) {
    .sezione-app { padding: 50px 0 40px; }
    .sezione-app h2 { font-size: 2em; }
    .telefoni-app { gap: 8px; }
    .telefono-app { border-width: 4px; border-radius: 14px; }
}

/* Testo a sinistra e telefoni a destra: flex e non le colonne col-md-*, che nel Bootstrap della vetrina non ci sono. */
.griglia-app { display: flex; gap: 40px; align-items: center; }
.testo-app { flex: 1 1 58%; min-width: 0; }
.griglia-app .telefoni-app { flex: 1 1 38%; min-width: 0; }
@media (max-width: 991px) {
    .griglia-app { flex-direction: column; gap: 10px; }
    .griglia-app .telefoni-app { width: 100%; }
}

/* ─────────────────────── Telefono: testo a bandiera, parole lunghe che vanno a capo ───────────────────────
   Il tema giustifica i paragrafi delle sezioni e gli elenchi delle schede (section p, .generale ul li): su una
   colonna stretta la giustificazione apre buchi larghi fra le parole. Sotto i 768 px si allinea a sinistra.
   Nella privacy i nomi dei permessi dell'app (com.google.android...) sono parole lunghissime: senza a capo
   allargavano la pagina a 470 px su un telefono da 390 e tutto scorreva di lato. */
@media (max-width: 767px) {
    section p,
    .generale ul li { text-align: left; }
}
.pagina-privacy .generale { overflow-wrap: anywhere; }

/* ─────────────────────── Sezioni a schede: Come funziona, Prodotti, Versioni (14/11/2026) ───────────────────────
   Prima erano muri di testo sottile (il tema: section p a 1.6em, peso 100, giustificato) su un riquadro marrone
   sopra una foto, tutte uguali. Ora: sfondi alternati (chiaro, bianco con la fascia della foto, blu come l'app),
   un'intestazione con occhiello, capitoli in schede con icona. Regole sotto .sezione-vetrina, così le schede dei
   rilevatori e la privacy, che usano ancora .generale, restano come sono. */
.sezione-vetrina { padding: 64px 0; text-align: left; scroll-margin-top: 60px; }   /* il menu fisso non copre il titolo arrivando dalle voci */
.sezione-vetrina [id] { scroll-margin-top: 80px; }   /* idem per le ancore interne (#rilevatori, #api...) */
.sezione-vetrina.sezione-chiara { background: #f3f5fa; color: #2b3445; }
.sezione-vetrina.sezione-bianca { background: #fff; color: #2b3445; padding-top: 0; }
.sezione-vetrina.sezione-scura { background: linear-gradient(135deg, #1d2f5e 0%, #2c4483 60%, #375299 100%); color: #fff; }

.intestazione-sezione { margin: 0 0 36px; }
.occhiello-sezione {
    display: inline-block;
    font-size: .85em;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #b07400;
}
.sezione-scura .occhiello-sezione,
.fascia-foto .occhiello-sezione { color: #ffd27f; }
.sezione-vetrina h2 { margin: 6px 0 12px; font-size: 2.6em; color: #1d2f5e; }
.sezione-scura h2,
.fascia-foto h2 { color: #fff; }
.sezione-vetrina p {
    margin: 0 0 .8em;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    text-align: left;
}
.sezione-vetrina .introduzione-sezione { font-size: 1.25em; font-weight: 300; color: #4a5568; }
.sezione-scura .introduzione-sezione { color: #d5dcef; }
.sezione-vetrina a:not(.btn) { color: #2f5cc4; }
.sezione-scura a:not(.btn) { color: #ffd27f; }

/* Griglie di schede. */
.griglia-schede { display: grid; gap: 20px; margin-bottom: 28px; }
.griglia-schede.quattro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.griglia-schede.tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.griglia-schede.due { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.scheda-vetrina {
    padding: 22px 22px 14px;
    border: 1px solid #e3e8f2;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(29, 47, 94, .06);
}
.sezione-bianca .scheda-vetrina { background: #f8f9fc; }
.icona-scheda {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; margin-bottom: 12px;
    border-radius: 10px;
    background: #e8edf8;
    color: #375299;
    font-size: 20px;
}
.sezione-vetrina .scheda-vetrina h3.capitolo,
.sezione-vetrina .scheda-vetrina h4 {
    margin: 0 0 8px;
    font-family: "Montserrat", sans-serif;
    font-size: 1.1em !important;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
    color: #1d2f5e;
}
.sezione-vetrina .scheda-vetrina p { font-size: 15px; color: #4a5568; }
.sezione-vetrina .scheda-vetrina b { color: #2b3445; }
.sezione-vetrina .fa-per-me { padding-top: 8px; border-top: 1px solid #e3e8f2; }

/* Prodotti: la foto dei rilevatori come fascia del titolo, sotto sfondo bianco. */
.fascia-foto {
    margin-bottom: 40px;
    padding: 70px 0 46px;
    background: linear-gradient(90deg, rgba(14, 22, 44, .88), rgba(14, 22, 44, .55)), url('../img/rilevatori.jpg') center top repeat;
}
.fascia-foto h2 { margin-bottom: 0; }
.sezione-vetrina h3.sezione {
    margin: 46px 0 14px !important;
    padding: 0 0 0 14px !important;
    border: none !important;
    border-left: 4px solid #ffba43 !important;
    font-family: "Montserrat", sans-serif;
    font-size: 1.7em !important;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: #1d2f5e;
    text-align: left;
}
.sezione-vetrina h3.sezione#rilevatori { margin-top: 0 !important; }
.sezione-vetrina .titolo-gruppo { margin: 10px 0 4px; font-size: 1.2em; font-weight: 700; color: #1d2f5e; text-transform: none; letter-spacing: 0; }
.sezione-vetrina .testo-gruppo { color: #4a5568; }   /* a tutta larghezza, come le schede sotto (Antonio, 14/11) */

/* Le schede dei tre rilevatori: foto, nome, prezzo, rimando alla scheda tecnica. */
.scheda-prodotto { margin: 0; }
.scheda-prodotto a {
    display: block; height: 100%;
    padding: 16px 16px 18px;
    border: 1px solid #e3e8f2; border-radius: 14px;
    background: #fff;
    text-decoration: none !important;
    box-shadow: 0 6px 18px rgba(29, 47, 94, .06);
    transition: transform .2s ease, box-shadow .2s ease;
}
.scheda-prodotto a:hover,
.scheda-prodotto a:focus { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(29, 47, 94, .14); }
.scheda-prodotto .picture img { margin: 0 auto; border-radius: 8px; }
.scheda-prodotto .infolettore { margin-top: 12px; text-align: center; }
.scheda-prodotto .infolettore .nome { font-size: 19px; font-weight: 700; color: #1d2f5e; }
.scheda-prodotto .infolettore .prezzo { margin-top: 2px; font-size: 15px; font-weight: 400; color: #4a5568; }
.scheda-prodotto .vai-scheda { margin-top: 8px; font-size: 14px; font-weight: 700; color: #b07400; }
.punti-forza { margin-top: 8px; }

.scheda-con-foto img { margin: -6px auto 14px; border-radius: 8px; }

/* La tabella delle modalità: sul bianco, non più bianca su scuro. */
.tabella-in-scheda { margin-bottom: 24px; border: 1px solid #e3e8f2; border-radius: 14px; background: #fff; }
.sezione-vetrina .tabella-in-scheda .tabella-vetrina { font-size: 1em; color: #2b3445; font-weight: 400; }
.sezione-vetrina .tabella-in-scheda .tabella-vetrina th,
.sezione-vetrina .tabella-in-scheda .tabella-vetrina td { padding: 12px 14px; border-top: 1px solid #e3e8f2; }
.sezione-vetrina .tabella-in-scheda .tabella-vetrina thead th { color: #1d2f5e; background: #f3f5fa; border-top: none; }
.sezione-vetrina .tabella-in-scheda .tabella-vetrina tbody th a { font-weight: 700; }

/* Come si ordina: una fascia con il pulsante. */
.come-si-ordina {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    margin-top: 40px; padding: 26px 30px;
    border-radius: 14px;
    background: #1d2f5e;
    color: #fff;
}
.sezione-vetrina .come-si-ordina h3.sezione { margin: 0 0 8px !important; color: #fff; }
.sezione-vetrina .come-si-ordina p { color: #d5dcef; margin-bottom: .4em; }
.sezione-vetrina .come-si-ordina a:not(.btn) { color: #ffd27f; }
.sezione-vetrina .nota-prezzi { margin: 6px 0 0; font-size: .85em; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #ffd27f; }
.sezione-vetrina .bottone-ordina {
    flex: 0 0 auto;
    margin: 0;
    padding: 12px 34px;
    border: none;
    border-radius: 8px;
    background: #ffba43;
    color: #fff;
    font-size: 17px; font-weight: 700;
}
.sezione-vetrina .bottone-ordina:hover,
.sezione-vetrina .bottone-ordina:focus { background: #f5a623; color: #fff; }

/* Versioni: sfondo blu come l'app; le tabelle in riquadri bianchi. */
.sezione-versioni .tabella-scorrevole {
    margin-bottom: 18px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .25);
}
.sezione-versioni .tabella-scorrevole .table { margin-bottom: 0; color: #2b3445; }
.sezione-versioni .nota-iva { margin: 4px 0 30px; font-size: .95em; color: #ffd27f; }
.sezione-versioni .titolo-listino-app { margin-top: 1.6em; color: #fff; font-family: "Montserrat", sans-serif; font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 1.5em; }
.sezione-versioni .testo-listino-app,
.sezione-versioni .esempi-listino-app { color: #e6ebf7; }
.sezione-versioni .badge-store-versioni { margin: 24px 0 0; }

@media (max-width: 1199px) {
    .griglia-schede.quattro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
    .griglia-schede.tre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sezione-vetrina h2 { font-size: 2.1em; }
}
@media (max-width: 767px) {
    .sezione-vetrina { padding: 46px 0; }
    .sezione-vetrina.sezione-bianca { padding-top: 0; }
    .griglia-schede.quattro,
    .griglia-schede.tre,
    .griglia-schede.due { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .fascia-foto { padding: 50px 0 32px; margin-bottom: 30px; }
    .sezione-vetrina h2 { font-size: 1.8em; }
    .sezione-vetrina h3.sezione { font-size: 1.4em !important; }
    .come-si-ordina { flex-direction: column; align-items: flex-start; padding: 22px 20px; }
}

/* Versioni: prima l'app (testo e tabella affiancati), poi i riquadri delle quattro versioni, poi le tabelle. */
.numero-passo {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; margin-right: 8px;
    border-radius: 50%;
    background: #ffba43; color: #1d2f5e;
    font-size: .7em; font-weight: 700; vertical-align: 3px;
}
.sezione-versioni h3.titolo-listino-app:first-of-type { margin-top: 0; }
.griglia-listino-app { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; margin-bottom: 10px; }
.sezione-versioni .testo-listino-app strong { color: #fff; }
.sezione-versioni .esempio-listino-app { background: rgba(255, 255, 255, .14); color: #fff; }

.prezzi-versioni { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 6px 0 26px; }
.prezzo-versione {
    position: relative;
    padding: 22px 20px 16px;
    border-radius: 14px;
    background: #fff;
    color: #2b3445;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
    border-top: 6px solid #d9dee8;
}
.prezzo-versione.silver { border-top-color: #b8bec9; }
.prezzo-versione.gold { border-top-color: #f2cd02; }
.prezzo-versione.platinum { border-top-color: #8fa3c8; }
.nome-versione { font-family: "Montserrat", sans-serif; font-size: 1.15em; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #1d2f5e; }
.cifra-versione { margin: 8px 0 2px; font-family: "Montserrat", sans-serif; font-size: 2.1em; font-weight: 700; color: #1d2f5e; line-height: 1.1; }
.cifra-versione span { font-size: .42em; font-weight: 400; color: #6b7588; }
.compreso-versione { font-size: .95em; color: #2b3445; }
.aggiuntivo-versione { margin-top: 2px; font-size: .88em; color: #6b7588; }
.sezione-versioni .prezzo-versione ul { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid #e3e8f2; }
.sezione-versioni .prezzo-versione li { position: relative; margin: 0 0 6px; padding-left: 20px; font-size: .95em; line-height: 1.4; }
.sezione-versioni .prezzo-versione li::before {
    content: ""; position: absolute; left: 1px; top: .32em;
    width: 10px; height: 6px;
    border-left: 2px solid #2e9e5b; border-bottom: 2px solid #2e9e5b;
    transform: rotate(-45deg);
}
.sezione-versioni .prezzo-versione li:first-child { color: #6b7588; }

/* Le tabelle: testata pulita con il colore della fascia come filo, gruppi su fondo chiaro, spunte verdi piccole. */
.sezione-versioni .tabella-versioni,
.sezione-versioni .tabella-listino-app { font-size: 1em; border: none; }
.sezione-versioni .table > thead > tr > th,
.sezione-versioni .table > tbody > tr > td {
    padding: 11px 14px;
    border: none;
    border-top: 1px solid #edf0f6;
    vertical-align: middle;
}
.sezione-versioni .table > thead > tr > th { border-top: none; background: #1d2f5e; color: #fff; font-size: .85em; letter-spacing: 1px; }
.sezione-versioni .table > thead > tr > th.colonna-versione { text-align: center; border-bottom: 4px solid #d9dee8; }
.sezione-versioni .table > thead > tr > th.silver { border-bottom-color: #b8bec9; }
.sezione-versioni .table > thead > tr > th.gold { border-bottom-color: #f2cd02; }
.sezione-versioni .table > thead > tr > th.platinum { border-bottom-color: #8fa3c8; }
.sezione-versioni .tabella-versioni tr.gruppo td { background: #f3f5fa; color: #1d2f5e; font-size: .85em; font-weight: 700; letter-spacing: 1px; padding-top: 14px; }
.sezione-versioni .spiega-gruppo { font-weight: 400; font-style: italic; letter-spacing: 0; text-transform: none; color: #6b7588; }
.sezione-versioni .tdversioni { font-size: 1em !important; color: #2b3445; }
.sezione-versioni .cella-si,
.sezione-versioni .cella-no { text-align: center; width: 13%; }
.sezione-versioni .cella-si .fa { color: #2e9e5b; font-size: 18px; }
.sezione-versioni .cella-no .fa { color: #c4cad6; font-size: 14px; }
.sezione-versioni .tabella-versioni tr.riga-prezzo td { background: #fff8e1; color: #1d2f5e; font-weight: 700; text-align: center; border-top: 2px solid #f2cd02; }
.sezione-versioni .tabella-versioni tr.riga-prezzo td:first-child { text-align: left; font-size: .85em; }
.sezione-versioni .tabella-versioni tr.riga-prezzo + tr.riga-prezzo td { border-top: 1px solid #f3e3a8; font-weight: 400; }
.sezione-versioni .tabella-listino-app td:last-child { font-weight: 600; color: #1d2f5e; }

@media (max-width: 1199px) {
    .prezzi-versioni { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
    .griglia-listino-app { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 767px) {
    .prezzi-versioni { grid-template-columns: minmax(0, 1fr); }
}

/* Contatti nello stesso stile delle altre sezioni (14/11/2026): fondo chiaro al posto delle righe da busta
   postale (stripes.png), titolo come gli altri, modulo e recapiti in un riquadro bianco. */
section#contatti { background: #f3f5fa; padding: 64px 0; scroll-margin-top: 60px; }
#contatti #contact-details-wrapper { border: none; background: none; }
#contatti h2.titolo-contatti {
    margin: 0 0 28px;
    font-size: 2.6em;
    color: #1d2f5e;
    text-align: left;
}
#contatti .titolo-contatti-sezione {
    margin-bottom: 6px;
    font-size: .33em;
    letter-spacing: 2px;
    color: #b07400;
}
#contatti #contact-details {
    margin: 0;
    padding: 34px 0 10px;
    border: 1px solid #e3e8f2;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(29, 47, 94, .06);
}
#contatti .form-control { height: 42px; border: 1px solid #cfd6e4; border-radius: 8px; box-shadow: none; font-size: 15px; }
#contatti textarea.form-control { height: auto; }
#contatti .form-control:focus { border-color: #375299; box-shadow: 0 0 0 3px rgba(55, 82, 153, .18); }
#contatti .btn-primary { padding: 10px 34px; border: none; border-radius: 8px; background: #ffba43; color: #fff; }
#contatti .btn-primary:hover,
#contatti .btn-primary:focus { background: #f5a623; }
#contatti .media-body p { font-size: 15px; line-height: 1.6; text-align: left; }
#contatti .media-body a { color: #2f5cc4; }

@media (max-width: 767px) {
    section#contatti { padding: 46px 0; }
    #contatti h2.titolo-contatti { font-size: 1.8em; }
}

/* ─────────────────────── Rifiniture (14/11/2026 sera) ─────────────────────── */

/* Titoli di sezione: tutti in Montserrat grassetto, senza maiuscolo sottile, come le schede. */
.sezione-vetrina h2,
.sezione-app h2,
#contatti h2.titolo-contatti {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    text-transform: none;
    letter-spacing: -.3px;
    line-height: 1.2;
}

/* Menu: logo e voci alla larghezza del contenuto (prima il logo stava incollato al bordo sinistro e restava
   un gran vuoto prima della prima voce), voci più leggere, quella attiva sottolineata in giallo al posto del
   riquadro grigio, ombra quando si scorre. */
.cbp-af-header {
    background-color: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 1px 0 rgba(29, 47, 94, .08);
}
.cbp-af-header.cbp-af-header-shrink { border-bottom: none; box-shadow: 0 8px 24px rgba(29, 47, 94, .12); }
@media (min-width: 900px) {
    .cbp-af-header .navbar > .container2 {
        max-width: 1240px;
        margin: 0 auto;
        padding: 0 24px;
    }
    .cbp-af-header .navbar-nav > li > a {
        position: relative;
        padding: 10px 12px;
        font-size: 14px !important;
        font-weight: 500;
        letter-spacing: .8px;
        color: #1d2f5e;
    }
    .cbp-af-header .navbar-nav > li > a::after {
        content: "";
        position: absolute; left: 12px; right: 12px; bottom: 2px;
        height: 3px; border-radius: 2px;
        background: #ffba43;
        transform: scaleX(0);
        transition: transform .2s ease;
    }
    .cbp-af-header .navbar-nav > li > a:hover::after,
    .cbp-af-header .navbar-nav > li > a:focus-visible::after,
    .navbar .navbar-nav .current > a::after { transform: scaleX(1); }
    .navbar .navbar-nav .current > a { background-color: transparent !important; color: #1d2f5e !important; }
}
@media (min-width: 900px) and (max-width: 1099px) {
    .cbp-af-header .navbar-nav > li > a { padding: 10px 7px; font-size: 12.5px !important; letter-spacing: .3px; }
    .cbp-af-header .navbar-nav > li > a::after { left: 7px; right: 7px; }
}

/* Pagine separate (schede dei rilevatori, privacy, «non trovata», errore): fondo chiaro al posto del riquadro
   marrone sullo sfondo a ingranaggi, contenuto in un riquadro bianco, titoli come la home. */
section.pagina-vetrina.with-bg { background: #f3f5fa; padding: 130px 0 64px; }
section.pagina-vetrina .overlay-bg { display: none; }
section.pagina-vetrina .vertical-align { background: none; }
section.pagina-vetrina .generale {
    padding: 36px 40px 28px;
    border: 1px solid #e3e8f2;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(29, 47, 94, .07);
    color: #2b3445;
}
section.pagina-vetrina .generale p,
section.pagina-vetrina .generale li {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;
    color: #4a5568;
    text-align: left;
}
section.pagina-vetrina .generale a { color: #2f5cc4; }
section.pagina-vetrina .generale strong,
section.pagina-vetrina .generale b { color: #2b3445; }
section.pagina-vetrina .generale h1.titolo-scheda {
    margin: 4px 0 6px;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    text-transform: none;
    letter-spacing: -.3px;
    color: #1d2f5e;
    text-align: left;
}
section.pagina-vetrina .generale .capitolo {
    margin: 30px 0 10px;
    font-size: 1.3em !important;
    font-weight: 700;
    color: #1d2f5e;
}
section.pagina-vetrina .generale .sottotitolo-scheda {
    margin: 0 0 22px;
    font-size: 1.1em !important;
    font-weight: 600;
    color: #b07400;
}
section.pagina-vetrina .generale .ritorno { font-size: 14px; margin-bottom: 8px; }
section.pagina-vetrina .generale .ritorno a {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 14px;
    background: #e8edf8;
    color: #1d2f5e;
    text-decoration: none;
}
section.pagina-vetrina .generale .ritorno a:hover { background: #d9e1f3; }
section.pagina-vetrina .generale ul { list-style: none; padding-left: 0; }
section.pagina-vetrina .generale ul li { position: relative; padding-left: 26px; margin-bottom: 8px; }
section.pagina-vetrina .generale ul li::before {
    content: "";
    position: absolute; left: 2px; top: .45em;
    width: 12px; height: 7px;
    border-left: 2px solid #ffba43; border-bottom: 2px solid #ffba43;
    transform: rotate(-45deg);
}
section.pagina-vetrina .tabella-specifiche {
    font-size: 15px;
    font-weight: 400;
    color: #2b3445;
    border: 1px solid #e3e8f2;
    border-radius: 12px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}
section.pagina-vetrina .tabella-specifiche th,
section.pagina-vetrina .tabella-specifiche td { padding: 10px 14px; border-top: 1px solid #edf0f6; }
section.pagina-vetrina .tabella-specifiche tr:first-child th,
section.pagina-vetrina .tabella-specifiche tr:first-child td { border-top: none; }
section.pagina-vetrina .tabella-specifiche th { background: #f6f8fc; color: #1d2f5e; font-weight: 600; }
section.pagina-vetrina .prodottolettore .picture { padding: 10px; border: 1px solid #e3e8f2; border-radius: 12px; }
section.pagina-vetrina .prodottolettore .picture img { margin: 0 auto; }
section.pagina-vetrina .infolettore .nome { color: #1d2f5e; font-size: 18px; font-weight: 700; }
section.pagina-vetrina .infolettore .prezzo { color: #4a5568; font-size: 15px; font-weight: 400; }
section.pagina-vetrina .infolettore .iva { color: #6b7588; }
section.pagina-vetrina .prodottolettore > a {
    display: block;
    padding: 12px;
    border-radius: 14px;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}
section.pagina-vetrina .prodottolettore > a:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(29, 47, 94, .14); }
@media (max-width: 767px) {
    section.pagina-vetrina.with-bg { padding: 110px 0 40px; }
    section.pagina-vetrina .generale { padding: 24px 18px 18px; }
}

/* Piede: fascia blu scuro, tre colonne, riga in fondo. Il logo di 01bit è scuro: sta su un tondino bianco. */
footer.piede-vetrina {
    padding: 48px 0 22px;
    background: #121c38;
    color: #c3cbe0;
    text-align: left;
}
.griglia-piede { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.piede-vetrina p { margin: 0 0 8px; font-size: 14px; line-height: 1.6; color: #c3cbe0; text-align: left; }
.piede-vetrina a { color: #fff; }
.piede-vetrina a:hover,
.piede-vetrina a:focus { color: #ffd27f; }
.marchio-piede { margin-bottom: 10px; font-family: "Montserrat", sans-serif; font-size: 20px; font-weight: 700; color: #fff; }
.titolo-piede { margin-bottom: 10px; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #ffd27f; }
.logo-piede { display: inline-block; margin-bottom: 10px; padding: 6px 12px; border-radius: 8px; background: #fff; line-height: 0; }
.logo-piede img { height: 32px; width: auto; }
.fondo-piede {
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: 13px;
    color: #8f9ab5;
}
.fondo-piede a { color: #c3cbe0; }
.separatore-piede { margin: 0 8px; color: #56627f; }
@media (max-width: 767px) {
    .griglia-piede { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}

/* Banner dei cookie (lo crea cookies.js con il suo stile): riquadro arrotondato blu scuro, staccato dai bordi.
   "body #..." per battere lo stile che lo script inserisce dopo questo foglio. */
body #gdpr-cookie-banner {
    left: 16px; right: 16px; bottom: 16px;
    max-width: 980px;
    margin: 0 auto;
    padding: 16px 20px;
    border-radius: 14px;
    background: #1d2f5e;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
    font-size: 14px;
    line-height: 1.5;
}
body #gdpr-cookie-banner a { color: #ffd27f; }
body #gdpr-cookie-banner .btn-accept,
body #gdpr-cookie-banner .btn-reject { padding: 9px 20px; border-radius: 8px; font-weight: 700; }
body #gdpr-cookie-banner .btn-accept { background: #ffba43; border-color: #ffba43; color: #1d2f5e; }
body #gdpr-cookie-banner .btn-reject { background: transparent; border-color: rgba(255, 255, 255, .45); color: #fff; }
@media (max-width: 480px) {
    body #gdpr-cookie-banner { left: 10px; right: 10px; bottom: 10px; padding: 14px 16px; }
    body #gdpr-cookie-banner .gdpr-buttons { width: 100%; }
    body #gdpr-cookie-banner .gdpr-buttons button { flex: 1; }
}

/* Comparsa: la classe sulla radice la mette vetrina.js (solo con IntersectionObserver e senza la richiesta di
   meno movimento); ogni elemento riceve «comparso» quando entra nello schermo. */
.comparsa-attiva .scheda-vetrina,
.comparsa-attiva .scheda-prodotto,
.comparsa-attiva .prezzo-versione,
.comparsa-attiva .scheda-app {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease;
}
.comparsa-attiva .comparso {
    opacity: 1;
    transform: none;
}

/* Menu chiuso (sotto i 900 px, la soglia del Bootstrap del tema): pannello blu pieno al posto del grigio semitrasparente (sotto si leggeva la pagina), voci a
   sinistra separate da un filo, pulsante del menu chiaro con le tre barre blu. */
@media (max-width: 899px) {
    .cbp-af-header .navbar-toggle {
        background: #fff;
        border: 1px solid #d5dbe8;
        border-radius: 8px;
    }
    .cbp-af-header .navbar-toggle .icon-bar { background: #1d2f5e; }
    .cbp-af-header .navbar-collapse {
        background: #1d2f5e !important;
        border-top: none;
        box-shadow: 0 16px 30px rgba(0, 0, 0, .25);
    }
    .cbp-af-header .navbar-collapse .navbar-nav { margin: 6px 0 10px; text-align: left; }
    .cbp-af-header .navbar-collapse .navbar-nav > li > a {
        margin: 0;
        padding: 12px 8px;
        border-top: 1px solid rgba(255, 255, 255, .1);
        font-size: 15px !important;
        font-weight: 500;
        line-height: 1.4 !important;
        letter-spacing: .8px;
        color: #fff !important;
        text-align: left;
    }
    .cbp-af-header .navbar-collapse .navbar-nav > li:first-child > a { border-top: none; }
    .navbar .navbar-nav .current > a { background-color: transparent !important; color: #ffd27f !important; }
}

/* ─────────────────────── Ritocchi dopo la prova di Antonio (14/11/2026 notte) ─────────────────────── */

/* Meno vuoto sopra i titoli di sezione. */
.sezione-vetrina { padding-top: 44px; padding-bottom: 56px; }
.sezione-vetrina.sezione-bianca { padding-top: 0; }
.sezione-app { padding-top: 44px; }
section#contatti { padding-top: 44px; padding-bottom: 56px; }
.intestazione-sezione { margin-bottom: 28px; }

/* Più colore nella parte centrale. Come funziona: fondo azzurrino e schede con il filo e l'icona alternati
   giallo/blu; le schede di Prodotti su un azzurro appena accennato. */
.sezione-vetrina.sezione-chiara { background: linear-gradient(180deg, #e9effb 0%, #f4f7fd 100%); }
.sezione-chiara .scheda-vetrina { border-top: 4px solid #375299; }
.sezione-chiara .scheda-vetrina:nth-child(even) { border-top-color: #ffba43; }
.sezione-chiara .scheda-vetrina:nth-child(even) .icona-scheda { background: #fff1d6; color: #b07400; }
.icona-scheda { width: 46px; height: 46px; border-radius: 12px; font-size: 22px; }
.sezione-bianca .scheda-vetrina { background: #f4f7fd; border-color: #dfe6f3; }
.sezione-prodotti .punti-forza .scheda-vetrina:nth-child(even) .icona-scheda { background: #fff1d6; color: #b07400; }

/* Prodotti: ogni gruppo (Rilevatori, Tessere e portachiavi, Come arrivano i dati) apre con una fascia blu che
   porta scritto «Prodotti ›», così si vede che sta dentro Prodotti. */
.sezione-prodotti > .container > h3.sezione {
    margin: 44px 0 18px !important;
    padding: 14px 22px !important;
    border: none !important;
    border-radius: 12px;
    background: linear-gradient(90deg, #1d2f5e 0%, #375299 100%);
    color: #fff;
    font-size: 1.45em !important;
    box-shadow: 0 8px 20px rgba(29, 47, 94, .18);
}
.sezione-prodotti > .container > h3.sezione::before {
    content: "Prodotti \203A";
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffd27f;
}
.sezione-prodotti > .container > h3.sezione#rilevatori { margin-top: 0 !important; }

/* Versioni, passo 1: l'app in un riquadro unico, con le tre fasce di prezzo e i badge degli store. */
.riquadro-app-listino {
    margin-bottom: 34px;
    padding: 24px 26px;
    border-radius: 16px;
    background: #fff;
    color: #2b3445;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
}
.riquadro-app-listino .promozione-app { margin: 0 0 20px; font-size: 1.05em; }
.riquadro-app-listino .griglia-listino-app { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 30px; margin: 0; }
.sezione-versioni .riquadro-app-listino p { color: #4a5568; }
.sezione-versioni .riquadro-app-listino strong { color: #1d2f5e; }
.sezione-versioni .riquadro-app-listino .frase-app-listino { font-size: 1.2em; line-height: 1.5; color: #1d2f5e; }
.scarica-app { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; padding-top: 16px; border-top: 1px solid #e3e8f2; }
.scarica-app > span { font-weight: 700; color: #1d2f5e; }
.fasce-app { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fascia-app {
    padding: 14px 14px 12px;
    border: 1px solid #dfe6f3;
    border-top: 4px solid #375299;
    border-radius: 12px;
    background: #f4f7fd;
}
.fascia-app:first-child { border-top-color: #2e9e5b; }
.fascia-app:last-child { border-top-color: #ffba43; }
.posti-fascia { font-size: 13px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #6b7588; }
.prezzo-fascia { margin-top: 4px; font-family: "Montserrat", sans-serif; font-size: 17px; font-weight: 700; line-height: 1.3; color: #1d2f5e; }
.dettaglio-fascia { margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: #4a5568; }
.sezione-versioni .nota-fasce { margin: 12px 0 8px; font-size: 14px; }
.sezione-versioni .riquadro-app-listino .esempio-listino-app { background: #e8edf8; color: #1d2f5e; }

/* Passo 2: le versioni con la testata del colore della fascia. */
.prezzo-versione { padding: 0; overflow: hidden; border-top: none; }
.testata-versione { padding: 18px 20px 14px; background: linear-gradient(135deg, #f2f4f8 0%, #dde2ea 100%); }
.prezzo-versione.silver .testata-versione { background: linear-gradient(135deg, #eef0f4 0%, #b7bfcc 100%); }
.prezzo-versione.gold .testata-versione { background: linear-gradient(135deg, #fff1a8 0%, #f2c400 100%); }
.prezzo-versione.platinum .testata-versione { background: linear-gradient(135deg, #e9eef8 0%, #9cb0d4 100%); }
.corpo-versione { padding: 14px 20px 16px; }
.cifra-versione { margin-bottom: 0; }
.cifra-versione span { color: #3d475c; }

/* Tabelle: testata delle colonne piena del colore della fascia, gruppi ben marcati, spunte in un tondo verde. */
.sezione-versioni .table > thead > tr > th.colonna-versione { color: #1d2f5e; border-bottom: none; }
.sezione-versioni .table > thead > tr > th.basic { background: linear-gradient(135deg, #f2f4f8 0%, #dde2ea 100%); }
.sezione-versioni .table > thead > tr > th.silver { background: linear-gradient(135deg, #eef0f4 0%, #b7bfcc 100%); }
.sezione-versioni .table > thead > tr > th.gold { background: linear-gradient(135deg, #fff1a8 0%, #f2c400 100%); }
.sezione-versioni .table > thead > tr > th.platinum { background: linear-gradient(135deg, #e9eef8 0%, #9cb0d4 100%); }
.sezione-versioni .tabella-versioni tr.gruppo td {
    padding: 12px 14px;
    border-top: 2px solid #c9d3e8;
    border-left: 5px solid #375299;
    background: #e3e9f6;
    color: #1d2f5e;
    font-size: .9em;
}
.sezione-versioni .spiega-gruppo { display: inline-block; margin-left: 8px; color: #4a5568; }
.sezione-versioni .cella-si .fa {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: #2e9e5b;
    color: #fff;
    font-size: 13px;
}
.sezione-versioni .cella-no .fa { color: #b9c1d0; font-size: 14px; }
.sezione-versioni .tabella-versioni tr.riga-prezzo td { white-space: nowrap; font-size: 15px; }
.sezione-versioni .tabella-versioni tr.riga-prezzo td:first-child { white-space: normal; font-size: 12px; }

@media (max-width: 991px) {
    .riquadro-app-listino .griglia-listino-app { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 600px) {
    .fasce-app { grid-template-columns: minmax(0, 1fr); }
    .riquadro-app-listino { padding: 18px 16px; }
}

/* Piede: riga in fondo centrata, contatti uno per riga con l'icona e più aria. */
.fondo-piede { text-align: center; }
.contatti-piede { list-style: none; margin: 0; padding: 0; }
.contatti-piede li { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 14px; }
.contatti-piede .fa { width: 16px; text-align: center; color: #ffd27f; }

/* Listino dell'app come scala di totali al mese (14/11/2026): sei gradini, ognuno su una riga, niente prezzi per
   singolo posto. */
.scala-app { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gradino-app {
    padding: 12px 14px;
    border: 1px solid #dfe6f3;
    border-left: 4px solid #375299;
    border-radius: 10px;
    background: #f4f7fd;
}
.gradino-app:first-child { border-left-color: #2e9e5b; }
.posti-gradino { font-size: 13px; font-weight: 700; letter-spacing: .3px; color: #6b7588; white-space: nowrap; }
.totale-gradino { margin-top: 2px; font-family: "Montserrat", sans-serif; font-size: 20px; font-weight: 700; color: #1d2f5e; white-space: nowrap; }
.gradino-app:first-child .totale-gradino { color: #2e7d4f; }
.sezione-versioni .riquadro-app-listino .nota-fasce { margin: 12px 0 0; font-size: 13.5px; color: #6b7588; }
@media (max-width: 480px) {
    .scala-app { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Colori delle versioni ben distinti (Antonio: Basic, Silver e Platinum si confondevano): Basic verde acqua,
   Silver argento, Gold oro, Platinum blu notte con il testo bianco. Valgono per le testate dei riquadri e per le
   colonne delle tabelle. */
.prezzo-versione.basic .testata-versione,
.sezione-versioni .table > thead > tr > th.basic { background: linear-gradient(135deg, #d9f3ec 0%, #7fcdb8 100%); }
.prezzo-versione.silver .testata-versione,
.sezione-versioni .table > thead > tr > th.silver { background: linear-gradient(135deg, #f4f5f7 0%, #c3c9d3 100%); }
.prezzo-versione.gold .testata-versione,
.sezione-versioni .table > thead > tr > th.gold { background: linear-gradient(135deg, #fff1a8 0%, #f2c400 100%); }
.prezzo-versione.platinum .testata-versione,
.sezione-versioni .table > thead > tr > th.platinum { background: linear-gradient(135deg, #3b4b6b 0%, #18223a 100%); }
.prezzo-versione.platinum .nome-versione,
.prezzo-versione.platinum .cifra-versione,
.sezione-versioni .table > thead > tr > th.platinum { color: #fff; }
.prezzo-versione.platinum .cifra-versione span { color: #c9d2e6; }

/* Fasce dei posti app (5): la prima, "compresi", su tutta la riga; le altre due per riga. */
.scala-app { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gradino-app:first-child { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
@media (max-width: 480px) {
    .scala-app { grid-template-columns: minmax(0, 1fr); }
}

/* «Ogni rilevatore aggiuntivo» in risalto (Antonio, 14/11/2026): una targhetta con l'importo in grassetto. */
.aggiuntivo-versione {
    display: inline-block;
    margin-top: 8px;
    padding: 5px 10px;
    border-radius: 8px;
    background: #fff4d6;
    border: 1px solid #f3d27a;
    font-size: 13px;
    color: #5c4300;
}
.aggiuntivo-versione { display: block; }
.aggiuntivo-versione span { display: block; font-size: 12px; letter-spacing: .3px; }
.aggiuntivo-versione strong { display: block; font-family: "Montserrat", sans-serif; font-size: 17px; color: #1d2f5e; }
.aggiuntivo-versione small { font-family: "Open Sans", sans-serif; font-size: 12px; font-weight: 400; color: #5c4300; }

/* ─────────────────────── Ordine nuovo delle sezioni (14/11/2026 notte) ───────────────────────
   Accesso → Come funziona → App → Versioni → Prodotti → Contatti. App e Versioni sarebbero state due fasce blu
   di fila: Versioni passa su fondo chiaro. */
.sezione-versioni-chiara { background: linear-gradient(180deg, #f6f8fc 0%, #edf1f8 100%); color: #2b3445; }
.sezione-versioni-chiara .titolo-listino-app { color: #1d2f5e; }
.sezione-versioni-chiara .testo-listino-app { color: #4a5568; }
.sezione-versioni-chiara .nota-iva { color: #b07400; }
.sezione-versioni-chiara .riquadro-app-listino,
.sezione-versioni-chiara .prezzo-versione,
.sezione-versioni-chiara .tabella-scorrevole {
    border: 1px solid #e0e6f1;
    box-shadow: 0 10px 28px rgba(29, 47, 94, .10);
}

/* Come funziona: tre passi collegati da una linea, poi le funzioni del portale. */
.passi-funzionamento {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 6px 0 10px;
    padding: 0;
    list-style: none;
}
.passi-funzionamento::before {
    content: "";
    position: absolute;
    top: 36px; left: 16.6%; right: 16.6%;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #375299 0%, #ffba43 100%);
}
.passo-funzionamento { position: relative; text-align: center; padding: 0 10px; }
.cerchio-passo {
    display: inline-flex; align-items: center; justify-content: center;
    width: 72px; height: 72px;
    border: 6px solid #edf2fc;
    border-radius: 50%;
    background: linear-gradient(135deg, #1d2f5e 0%, #4467c0 100%);
    color: #fff;
    font-size: 26px;
    box-shadow: 0 10px 22px rgba(29, 47, 94, .25);
}
.passo-funzionamento:last-child .cerchio-passo { background: linear-gradient(135deg, #f5a623 0%, #ffcf6b 100%); }
.titolo-passo { margin: 12px 0 4px; font-family: "Montserrat", sans-serif; font-size: 18px; font-weight: 700; color: #1d2f5e; }
.sezione-vetrina .passo-funzionamento p { max-width: 280px; margin: 0 auto; text-align: center; font-size: 15px; color: #4a5568; }

.titolo-funzioni {
    margin: 46px 0 18px;
    font-family: "Montserrat", sans-serif;
    font-size: 1.35em;
    font-weight: 700;
    color: #1d2f5e;
}
.titolo-funzioni::after {
    content: "";
    display: block;
    width: 48px; height: 4px;
    margin-top: 8px;
    border-radius: 2px;
    background: #ffba43;
}

/* Le schede delle funzioni: niente filo in alto, icona in un tondo colorato (blu e giallo alternati), un leggero
   rialzo al passaggio del mouse. */
.sezione-chiara .scheda-vetrina,
.sezione-chiara .scheda-vetrina:nth-child(even) {
    border: 1px solid #e0e6f1;
    border-top: 1px solid #e0e6f1;
    transition: transform .2s ease, box-shadow .2s ease, opacity .6s ease;
}
.sezione-chiara .scheda-vetrina:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(29, 47, 94, .13); }
.sezione-chiara .icona-scheda {
    width: 50px; height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2c4483 0%, #5b7fd6 100%);
    color: #fff;
    font-size: 21px;
    box-shadow: 0 6px 14px rgba(55, 82, 153, .28);
}
.sezione-chiara .scheda-vetrina:nth-child(even) .icona-scheda {
    background: linear-gradient(135deg, #f5a623 0%, #ffcf6b 100%);
    color: #fff;
    box-shadow: 0 6px 14px rgba(245, 166, 35, .30);
}

@media (max-width: 767px) {
    .passi-funzionamento { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .passi-funzionamento::before { display: none; }
}

/* Prezzo di tessere e portachiavi (Antonio, 14/11/2026), sotto il nome. */
.prezzo-accessorio {
    display: inline-block;
    margin: 0 0 10px;
    padding: 4px 12px;
    border-radius: 8px;
    background: #fff4d6;
    border: 1px solid #f3d27a;
    font-family: "Montserrat", sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #1d2f5e;
}
.prezzo-accessorio small { font-family: "Open Sans", sans-serif; font-size: 12px; font-weight: 400; color: #5c4300; }

/* ─────────────────────── Versioni in quattro passi (14/11/2026 notte) ───────────────────────
   1. versione (canone); 2. come lo usi: solo rilevatori, solo app, entrambi; 3. aggiuntivi; 4. l'app per versione. */
.sezione-versioni .compreso-versione { font-weight: 600; color: #1d2f5e; }
.sezione-versioni .titolo-listino-app { margin-top: 2.2em; }
.sezione-versioni .titolo-listino-app:first-of-type { margin-top: 0; }

/* 2. Come lo usi */
.modi-uso { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.modo-uso {
    display: flex; flex-direction: column;
    padding: 22px 22px 18px;
    border: 1px solid #e0e6f1;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(29, 47, 94, .08);
}
.icona-modo {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; margin-bottom: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2c4483 0%, #5b7fd6 100%);
    color: #fff;
    font-size: 22px;
}
.modo-uso:nth-child(2) .icona-modo { background: linear-gradient(135deg, #f5a623 0%, #ffcf6b 100%); }
.modo-uso:nth-child(3) .icona-modo { background: linear-gradient(135deg, #2e9e5b 0%, #6fd09a 100%); }
.titolo-modo { margin-bottom: 4px; font-family: "Montserrat", sans-serif; font-size: 18px; font-weight: 700; color: #1d2f5e; }
.sezione-vetrina .modo-uso p { flex: 1; font-size: 15px; color: #4a5568; }
.costo-modo {
    margin-top: 6px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f4f7fd;
    border-left: 4px solid #375299;
    font-size: 14px;
    line-height: 1.45;
    color: #1d2f5e;
}
.modo-uso:nth-child(2) .costo-modo { border-left-color: #f5a623; }
.modo-uso:nth-child(3) .costo-modo { border-left-color: #2e9e5b; }

/* 3. Se ti serve di più: rilevatori e utenti app aggiuntivi, affiancati. */
.aggiuntivi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 18px; align-items: start; }
.riquadro-aggiuntivo {
    padding: 22px 24px 20px;
    border: 1px solid #e0e6f1;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(29, 47, 94, .08);
}
.titolo-aggiuntivo { margin-bottom: 6px; font-family: "Montserrat", sans-serif; font-size: 18px; font-weight: 700; color: #1d2f5e; }
.titolo-aggiuntivo .fa { margin-right: 6px; color: #375299; }
.sezione-vetrina .riquadro-aggiuntivo p { font-size: 14.5px; color: #4a5568; }
.righe-aggiuntivo { display: grid; gap: 8px; }
.riga-aggiuntivo {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    border: 1px solid #dfe6f3;
    border-radius: 10px;
    background: #f4f7fd;
}
.nome-aggiuntivo { flex: 1; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; font-size: 13px; color: #3d475c; }
.riga-aggiuntivo strong { font-family: "Montserrat", sans-serif; font-size: 18px; color: #1d2f5e; white-space: nowrap; }
.riga-aggiuntivo strong::after { content: " al mese"; font-family: "Open Sans", sans-serif; font-size: 12px; font-weight: 400; color: #6b7588; }
.pallino-versione { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, #d9f3ec 0%, #7fcdb8 100%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.riga-aggiuntivo.silver .pallino-versione { background: linear-gradient(135deg, #f4f5f7 0%, #c3c9d3 100%); }
.riga-aggiuntivo.gold .pallino-versione { background: linear-gradient(135deg, #fff1a8 0%, #f2c400 100%); }
.riga-aggiuntivo.platinum .pallino-versione { background: linear-gradient(135deg, #3b4b6b 0%, #18223a 100%); }
.riquadro-aggiuntivo .scala-app { margin-top: 10px; }
.sezione-versioni .riquadro-aggiuntivo .nota-fasce { margin: 10px 0 0; font-size: 13px; color: #6b7588; }
.sezione-versioni-chiara .nota-iva { margin-top: 18px; }

@media (max-width: 991px) {
    .modi-uso,
    .aggiuntivi { grid-template-columns: minmax(0, 1fr); }
}

/* Che cosa comprende il canone: due righe con l'icona; il rilevatore «se ti serve», perché chi usa solo l'app non
   deve pensare di pagarne uno (Antonio, 14/11/2026). */
.sezione-versioni .prezzo-versione ul.compreso-versione { margin: 0; padding: 0 0 10px; border-top: none; list-style: none; }
.sezione-versioni .prezzo-versione ul.compreso-versione li { margin: 0 0 4px; padding-left: 0; font-size: 13.5px; white-space: nowrap; font-weight: 600; color: #1d2f5e; }
.sezione-versioni .prezzo-versione ul.compreso-versione li::before { content: none; }
.sezione-versioni .prezzo-versione ul.compreso-versione .fa { width: 18px; text-align: center; color: #375299; }
.sezione-versioni .prezzo-versione ul.compreso-versione small { font-size: 11.5px; font-weight: 400; color: #6b7588; }
.sezione-versioni .corpo-versione { padding-left: 16px; padding-right: 16px; }

/* Scaglioni con il prezzo per utente (15/11/2026): sotto l'importo, a chi si applica. */
.totale-gradino small { font-family: "Open Sans", sans-serif; font-size: 12px; font-weight: 400; color: #6b7588; }
.dettaglio-gradino { margin-top: 2px; font-size: 12.5px; color: #4a5568; }

/* Nota sull'IVA in fondo a Versioni e a Prodotti, uguale nelle due sezioni. */
.sezione-vetrina .nota-iva { margin: 22px 0 0; font-size: .95em; color: #b07400; }