/* bgroup-sito/pubblico/tema.css - il tema chiaro di bgroup-srl.com e il suo selettore (19/10/2026).
   Davide, 19/10/2026: «fai una versione chiara del sito e aggiungi il selettore chiaro scuro, deve essere fighissimo».

   COME FUNZIONA. sito.css è il tema scuro, quello di sempre, e non cambia. Il tema chiaro sta tutto qui, sotto l'attributo
   data-tema="chiaro" che lo script in testa a ogni pagina mette sull'<html> prima che il browser disegni (costruisci_sito.TESTA_TEMA:
   la scelta del visitatore, altrimenti quella del suo sistema). Senza JavaScript non c'è l'attributo e il sito resta scuro.
   I tasti stanno in tema.js; i loghi pensati per il fondo scuro hanno accanto l'originale (.t-scuro / .t-chiaro, costruisci_sito).

   IL DISEGNO DEL CHIARO. Non è il negativo dello scuro: è lo stesso sito alla luce del giorno. Fondo carta fredda (#f5f7fb),
   carte bianche con l'ombra blu notte appena accennata, le sezioni che di notte erano scure diventano un velo azzurro (#edf2fa)
   con gli stessi aloni di luce del blu B group, i titoli in inchiostro con la parola che risuona in blu, le sfumature dei titoli
   dal blu notte all'azzurro del logo. Ogni capitolo tiene il suo colore (Sellrapido, B group, investimenti, AI), in una versione
   più profonda che si legge sul bianco. Testi sempre sopra il contrasto AA (4,5:1) sui fondi su cui stanno.

   QUANDO SI AGGIUNGE UN PEZZO AL SITO su fondo scuro (colori bianchi, rgba(255,255,255,...), var(--notte...)), qui va aggiunta
   la sua versione chiara, nella sezione della pagina. Controllo: Chrome senza finestra con localStorage bg-tema=chiaro. */

/* ───────── il selettore: l'interruttore sole / luna nella barra (vale in tutti e due i temi) ─────────
   23/10/2026, Davide: «fallo doppio che si capisca che passa da chiaro a scuro, come un tasto che si sposta». Una pista con il
   sole a sinistra e la luna a destra, sempre in vista; il pallino scorre sopra quello acceso: blu notte con la luna nello scuro,
   giallo sole nel chiaro. Al passaggio il pallino scorre mentre la pagina cambia col cerchio: il tasto ha il suo nome nella View
   Transition (tema-tasto), così resta vivo sopra la pagina invece di finire nella fotografia, e il «tema-passa» che ferma tutte
   le transizioni per un attimo non vale per lui. Misure: pista 60 x 34, pallino 28; nella barra da pc il tedesco ci sta ancora
   (prima del ritocco restavano 26 px liberi, il tasto ne prende 20 in più del tondo). */
.tema-tasto{flex:none;position:relative;width:60px;height:34px;padding:0;border-radius:999px;cursor:pointer;color:#b3c2db;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px 3px rgba(0,0,0,.35);
  -webkit-tap-highlight-color:transparent;view-transition-name:tema-tasto;transition:background .35s,border-color .35s,box-shadow .35s}
.tema-tasto:hover{border-color:rgba(127,203,255,.55)}
.tema-tasto:focus-visible{outline:2px solid var(--celeste);outline-offset:3px}
.tema-tasto .tt-pallino{position:absolute;top:2px;left:2px;width:28px;height:28px;border-radius:50%;pointer-events:none;
  background:linear-gradient(145deg,#3b9bf0,#1d5c9c);box-shadow:0 3px 10px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.3);
  transform:translateX(26px);transition:transform .55s var(--molla),width .25s var(--molla),background .4s,box-shadow .4s}
.tema-tasto svg{position:absolute;top:8px;width:16px;height:16px;display:block;pointer-events:none;
  transition:color .35s,opacity .35s,transform .55s var(--molla)}
.tema-tasto .ic-sole{left:8px;transform:rotate(-90deg) scale(.9)}
.tema-tasto .ic-luna{left:34px;color:#fff}
/* chiaro: il pallino va a sinistra sul sole, la luna resta in vista a destra, più tenue */
[data-tema=chiaro] .tema-tasto .tt-pallino{transform:none;background:linear-gradient(145deg,#fde68a,#f59e0b);
  box-shadow:0 3px 9px rgba(180,83,9,.35),inset 0 1px 0 rgba(255,255,255,.6)}
[data-tema=chiaro] .tema-tasto .ic-sole{color:#7c2d12;opacity:1;transform:none}
[data-tema=chiaro] .tema-tasto .ic-luna{color:var(--l-testo-3);transform:rotate(40deg) scale(.9)}
/* il pallino accenna verso l'altra parte quando ci si passa sopra col mouse: si capisce che scorre */
@media (hover:hover){.tema-tasto:hover .tt-pallino{transform:translateX(21px)}[data-tema=chiaro] .tema-tasto:hover .tt-pallino{transform:translateX(5px)}}
.tema-tasto:active .tt-pallino{width:32px;transform:translateX(22px)}
[data-tema=chiaro] .tema-tasto:active .tt-pallino{transform:none}
/* durante il cambio (html.tema-passa ferma tutte le transizioni) il pallino e le icone scorrono lo stesso */
html.tema-passa .tema-tasto .tt-pallino{transition:transform .55s var(--molla),width .25s var(--molla),background .4s,box-shadow .4s!important}
html.tema-passa .tema-tasto svg{transition:color .35s,opacity .35s,transform .55s var(--molla)!important}
::view-transition-old(tema-tasto){display:none}
::view-transition-new(tema-tasto){animation:none}
/* sulle pagine che partono su fondo chiaro anche nel tema scuro (Contatti: barra «chiara» finché non si scorre) la pista è scura */
html:not(.menu-aperto) .barra.chiara:not(.scesa) .tema-tasto{color:var(--testo-2);background:rgba(10,20,40,.05);border-color:rgba(10,20,40,.16);
  box-shadow:inset 0 1px 3px rgba(10,20,40,.12)}
.m-tema svg,.f-tema svg{display:block}
/* nel menu del telefono: «Chiaro / Scuro» in una pista, lo sfondo blu della scelta scorre dall'una all'altra */
.menu-mobile .m-tema{position:relative;display:flex;gap:0;padding:4px;border-radius:15px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03)}
.m-tema::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:11px;background:var(--blu);
  box-shadow:0 6px 16px -6px rgba(33,129,205,.7);transform:translateX(100%);transition:transform .55s var(--molla)}
[data-tema=chiaro] .m-tema::before{transform:none}
.m-tema button{position:relative;z-index:1;flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:11px 0;
  border-radius:11px;cursor:pointer;border:0;background:transparent;color:#c8d4e8;font:600 15px/1 var(--font);transition:color .3s}
.m-tema button svg{width:18px;height:18px;flex:none}
.m-tema button[aria-pressed=true]{color:#fff}
/* nel piede, sotto le lingue: la stessa pista, più piccola */
footer .f-tema{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:15px;line-height:1.6}
footer .f-tema>span:first-child{color:#7f93b3;font-weight:500;margin-right:8px}
footer .f-tema .f-pista{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03)}
footer .f-tema .f-pista::before{content:"";position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;background:var(--blu);
  transform:translateX(100%);transition:transform .55s var(--molla)}
[data-tema=chiaro] footer .f-tema .f-pista::before{transform:none}
footer .f-tema button{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:4px 14px 4px 12px;
  border-radius:999px;cursor:pointer;border:0;background:transparent;color:#c8d4e8;font:500 14.5px/1.4 var(--font);transition:color .3s}
footer .f-tema button svg{width:16px;height:16px;flex:none}
footer .f-tema button:hover{color:#fff}
footer .f-tema button[aria-pressed=true]{color:#fff;font-weight:600}
html.tema-passa .m-tema::before,html.tema-passa footer .f-tema .f-pista::before{transition:transform .55s var(--molla)!important}
@media (prefers-reduced-motion:reduce){.tema-tasto .tt-pallino,.tema-tasto svg,.m-tema::before,footer .f-tema .f-pista::before,
  html.tema-passa .tema-tasto .tt-pallino,html.tema-passa .tema-tasto svg,html.tema-passa .m-tema::before,html.tema-passa footer .f-tema .f-pista::before{transition:none!important}}
/* senza JavaScript il tema non si cambia: i tasti non si mostrano */
html:not([data-tema]) .tema-tasto,html:not([data-tema]) .m-tema,html:not([data-tema]) .f-tema{display:none}
/* il posto del tondo nella barra. Da pc: il tondo prende 40 px + lo spazio, e inglese e tedesco non ci stavano più (la barra
   passava al menu a tendina, html.stretta): lo spazio fra le voci scende da 24 a 18 px e fra i blocchi da 22 a 14, così ogni
   lingua sta almeno come prima (it, en, de da 1280 px; fr ed es restano a tendina come prima). Da telefono sta fra le lingue e il
   menu; sotto i 400 px le lingue mostrano solo la bandierina, sotto i 370 il logo scende a 44 px; i tasti non si schiacciano mai */
.barra .menu-tasto,.barra .lingue{flex:none}
@media (min-width:1061px){.barra .dentro{gap:14px}.barra nav a{padding:9px 9px}.barra nav a::after{left:9px;right:9px}}
@media (max-width:640px){.barra .dentro{gap:10px}}
@media (max-width:400px){.barra .marchio img{height:50px}.barra .lingue summary span{display:none}.barra .lingue summary{padding:10px 11px}}
@media (max-width:370px){.barra .dentro{gap:8px}.barra .marchio img{height:44px}}

/* il passaggio: il tema nuovo si apre come un cerchio che parte dal tasto (tema.js anima ::view-transition-new) */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}
::view-transition-new(root){z-index:2}
html.tema-passa *,html.tema-passa *::before,html.tema-passa *::after{transition:none!important}

/* i loghi in coppia (costruisci_sito._coppie_tema): si vede quello del tema acceso */
:root:not([data-tema=chiaro]) .t-chiaro,[data-tema=chiaro] .t-scuro{display:none!important}

/* il tema scuro dice al browser che è scuro (barre di scorrimento e comandi nativi in tinta) */
[data-tema=scuro]{color-scheme:dark}


/* ═════════════════════════════════════════ IL TEMA CHIARO ═════════════════════════════════════════ */

[data-tema=chiaro]{
  color-scheme:light;
  --l-fondo:#f5f7fb;          /* la pagina */
  --l-velo:#edf2fa;           /* dove di notte c'era il blu notte: un velo azzurro */
  --l-piede:#e9eef6;
  --l-ink:#0a1428; --l-testo:#2b3650; --l-testo-2:#56637d; --l-testo-3:#5f6b84;
  --l-riga:#e1e7f1; --l-riga-2:#d3dcea;
  --l-blu:#196aab;            /* l'azzurro dei testi piccoli (≥ 4,8:1 su tutti i fondi chiari) */
  --l-blu-t:#1c74c4;          /* quello dei titoli grandi */
  --l-ombra:0 1px 2px rgba(16,32,64,.05),0 14px 34px -14px rgba(16,32,64,.16);
  --l-ombra-alta:0 2px 4px rgba(16,32,64,.04),0 30px 70px -24px rgba(16,40,90,.28);
  --l-griglia:rgba(16,42,86,.055);
}
/* i colori dei capitoli e delle aziende: sul bianco la versione profonda (stessa tinta, si legge come testo) */
[data-tema=chiaro] .c-sr{--c:#2459e6}
[data-tema=chiaro] .c-bg{--c:#196aab}
[data-tema=chiaro] .c-inv{--c:#0d7f6b}
[data-tema=chiaro] .c-brio,[data-tema=chiaro] .c-ai{--c:#6a52d6}
[data-tema=chiaro] .c-az-sr{--c:#2459e6}
[data-tema=chiaro] .c-az-bg{--c:#196aab}
[data-tema=chiaro] .c-az-aa{--c:#0e7c86}
[data-tema=chiaro] .c-az-area{--c:#14806e}
/* i colori scritti nelle pagine pensati per il blu notte (anelli delle quote, carta Sellrapido, pianeti...) */
[data-tema=chiaro] [style*="--c:#7fcbff"]{--c:#1c74c4!important}
[data-tema=chiaro] [style*="--c:#5ed3df"]{--c:#0e7c86!important}
[data-tema=chiaro] [style*="--c:#2bd4b4"]{--c:#14806e!important}
[data-tema=chiaro] [style*="--c:#38bdf8"]{--c:#0b78b5!important}
[data-tema=chiaro] [style*="--c:#ffcf3e"]{--c:#a16207!important}

[data-tema=chiaro] body{background:var(--l-fondo);color:var(--l-testo)}
[data-tema=chiaro] :focus-visible{outline-color:var(--blu)}
[data-tema=chiaro] em.s{color:var(--l-blu-t)}
[data-tema=chiaro] .grana::after{opacity:.035}

/* ───────── la tenda del primo arrivo ───────── */
[data-tema=chiaro] #avvio{background:var(--l-fondo)}
[data-tema=chiaro] .a-dentro img{box-shadow:0 20px 50px -10px rgba(33,129,205,.45)}
[data-tema=chiaro] .a-nome{color:var(--l-ink)}
[data-tema=chiaro] .a-linea{background:rgba(10,20,40,.1)}
[data-tema=chiaro] .a-linea::after{background:var(--blu)}

/* ───────── la barra: trasparente sulla testata chiara, vetro bianco quando si scorre ───────── */
[data-tema=chiaro] .barra .marchio .su-scuro{display:none}
[data-tema=chiaro] .barra .marchio .su-chiaro{display:block}
[data-tema=chiaro] .barra nav a,[data-tema=chiaro] .barra.chiara:not(.scesa) nav a{color:var(--l-testo-2)}
[data-tema=chiaro] .barra nav a:hover,[data-tema=chiaro] .barra nav a.qui{color:var(--l-ink)}
[data-tema=chiaro] .barra nav a::after{background:var(--blu)}
[data-tema=chiaro] .barra nav a.orbite{color:var(--l-blu)}
[data-tema=chiaro] .barra.scesa{background:rgba(250,251,254,.82);box-shadow:0 1px 0 rgba(10,20,40,.07),0 10px 30px -18px rgba(16,32,64,.25)}
[data-tema=chiaro] .barra .scrivimi{box-shadow:0 10px 24px -8px rgba(33,129,205,.55)}
[data-tema=chiaro] .lingue summary,[data-tema=chiaro] .barra.chiara:not(.scesa) .lingue summary{color:var(--l-ink);border-color:rgba(10,20,40,.14);background:rgba(255,255,255,.7)}
[data-tema=chiaro] .lingue summary:hover,[data-tema=chiaro] .lingue[open] summary{background:#fff;border-color:var(--blu)}
[data-tema=chiaro] .lingue .bandiera,[data-tema=chiaro] .m-lingue .bandiera,[data-tema=chiaro] .f-lingue .bandiera{box-shadow:0 0 0 1px rgba(10,20,40,.16)}
[data-tema=chiaro] .lingue .l-elenco{background:#fff;border-color:var(--l-riga);box-shadow:0 24px 60px -16px rgba(16,32,64,.3)}
[data-tema=chiaro] .lingue .l-elenco a{color:var(--l-testo)}
[data-tema=chiaro] .lingue .l-elenco a:hover{background:var(--l-fondo);color:var(--l-ink)}
[data-tema=chiaro] .lingue .l-elenco a[aria-current]{background:rgba(33,129,205,.1);color:var(--l-ink)}
[data-tema=chiaro] .tema-tasto,[data-tema=chiaro] .barra.chiara .tema-tasto{background:#e3e9f3;border-color:rgba(10,20,40,.14);box-shadow:inset 0 1px 3px rgba(10,20,40,.14)}
[data-tema=chiaro].menu-aperto .barra.chiara .marchio .su-scuro{display:none}
[data-tema=chiaro].menu-aperto .barra.chiara .marchio .su-chiaro{display:block}
[data-tema=chiaro].menu-aperto .barra.chiara .lingue summary{color:var(--l-ink);border-color:rgba(10,20,40,.14);background:rgba(255,255,255,.7)}
[data-tema=chiaro].menu-aperto .barra.chiara .lingue .bandiera{box-shadow:0 0 0 1px rgba(10,20,40,.16)}
[data-tema=chiaro] .tema-tasto:hover{border-color:var(--blu)}
[data-tema=chiaro] .menu-tasto{color:var(--l-ink);background:rgba(255,255,255,.7);border-color:rgba(10,20,40,.14)}
[data-tema=chiaro] .menu-tasto span{background:var(--l-ink)}
/* il menu a tutto schermo del telefono */
[data-tema=chiaro] .menu-mobile{background:var(--l-fondo)}
[data-tema=chiaro] .menu-mobile::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(520px 340px at 100% 0%,rgba(33,129,205,.14),transparent 70%),radial-gradient(420px 300px at 0% 100%,rgba(127,203,255,.2),transparent 70%)}
[data-tema=chiaro] .menu-mobile nav a{color:var(--l-ink);border-bottom-color:rgba(10,20,40,.08)}
[data-tema=chiaro] .menu-mobile nav a small{color:var(--l-blu)}
[data-tema=chiaro] .menu-mobile nav a.orbite{color:var(--l-blu)}
[data-tema=chiaro] .menu-mobile .m-piede a{color:var(--l-testo)}
[data-tema=chiaro] .menu-mobile .m-piede .tasto{color:#fff}
[data-tema=chiaro] .menu-mobile .m-lingue a{border-color:rgba(10,20,40,.12);background:rgba(255,255,255,.6)}
[data-tema=chiaro] .menu-mobile .m-lingue a[aria-current]{background:var(--blu);border-color:var(--blu);color:#fff}
[data-tema=chiaro] .menu-mobile .m-tema{border-color:rgba(10,20,40,.12);background:rgba(255,255,255,.6)}
[data-tema=chiaro] .m-tema button{color:var(--l-testo)}
[data-tema=chiaro] .m-tema button[aria-pressed=true]{color:#fff}

/* ───────── i tasti ───────── */
[data-tema=chiaro] .tasto.pieno{background:var(--l-ink);color:#fff;box-shadow:0 14px 30px -12px rgba(10,20,40,.55)}
[data-tema=chiaro] .tasto.pieno:hover{box-shadow:0 18px 40px -12px rgba(10,20,40,.6)}
[data-tema=chiaro] .tasto.vuoto{color:var(--l-ink);border:1px solid rgba(10,20,40,.16);background:rgba(255,255,255,.7)}
[data-tema=chiaro] .tasto.vuoto:hover{background:#fff;border-color:rgba(33,129,205,.45)}
[data-tema=chiaro] .tasto.blu{box-shadow:0 14px 30px -12px rgba(33,129,205,.6)}
[data-tema=chiaro] .social{color:var(--l-ink);border-color:rgba(10,20,40,.16);background:rgba(255,255,255,.7)}
[data-tema=chiaro] .social:hover{background:var(--l-ink);color:#fff}
/* dentro il riquadro blu dei contatti i tasti restano quelli del blu */
[data-tema=chiaro] .chiamata .tasto.pieno{background:#fff;color:var(--navy);box-shadow:0 14px 34px rgba(0,0,0,.22)}
[data-tema=chiaro] .chiamata .tasto.vuoto{color:#fff;border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.1)}
[data-tema=chiaro] .chiamata .tasto.vuoto:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.6)}

/* ───────── la home: il hero alla luce del giorno ───────── */
[data-tema=chiaro] .hero{color:var(--l-ink)}
[data-tema=chiaro] .hero .sfondo{background:linear-gradient(180deg,#f8fafd 0%,#f1f5fb 60%,#edf2fa 100%)}
[data-tema=chiaro] .hero .bolla{opacity:.2}
[data-tema=chiaro] .hero .b1{background:radial-gradient(circle,#2181cd 0%,transparent 62%);opacity:.24}
[data-tema=chiaro] .hero .b2{background:radial-gradient(circle,#6d7dff 0%,transparent 62%);opacity:.14}
[data-tema=chiaro] .hero .b3{background:radial-gradient(circle,#7fcbff 0%,transparent 62%);opacity:.38}
[data-tema=chiaro] .hero .griglia{background-image:linear-gradient(var(--l-griglia) 1px,transparent 1px),linear-gradient(90deg,var(--l-griglia) 1px,transparent 1px)}
[data-tema=chiaro] .etichetta{color:#1b3663;background:rgba(255,255,255,.72);border-color:rgba(10,20,40,.1);box-shadow:0 6px 20px -12px rgba(16,32,64,.3)}
[data-tema=chiaro] .etichetta i{background:#22c55e}
[data-tema=chiaro] .h-nome{color:var(--l-ink)}
[data-tema=chiaro] .h-nome .sfumata .l{background:linear-gradient(180deg,#0f2d63 8%,#1863b3 58%,#2a8be0 100%);-webkit-background-clip:text;background-clip:text}
[data-tema=chiaro] .h-frase{color:var(--l-ink)}
[data-tema=chiaro] .h-frase em.s{color:var(--l-blu-t)}
[data-tema=chiaro] .h-sotto{color:var(--l-testo-2)}
[data-tema=chiaro] .h-foto-box{background:#fff;box-shadow:0 40px 90px -30px rgba(16,40,90,.38),0 0 0 1px rgba(10,20,40,.06)}
[data-tema=chiaro] .h-foto{background:#e6ecf5}
[data-tema=chiaro] .h-cartiglio{background:#fff;border-top-color:var(--l-riga)}
[data-tema=chiaro] .h-cartiglio b{color:var(--l-ink)}
[data-tema=chiaro] .h-cartiglio span{color:var(--l-testo-2)}
[data-tema=chiaro] .h-social a{color:var(--l-ink);border-color:rgba(10,20,40,.14);background:var(--l-fondo)}
[data-tema=chiaro] .h-social a:hover{background:var(--l-ink);color:#fff}
[data-tema=chiaro] .ruolo-chip{color:var(--l-ink);background:rgba(255,255,255,.78);border-color:var(--l-riga);box-shadow:0 8px 24px -16px rgba(16,32,64,.3)}
[data-tema=chiaro] a.ruolo-chip:hover{background:#fff;border-color:rgba(33,129,205,.45)}
[data-tema=chiaro] .ruolo-chip small{color:var(--l-testo-2)}
[data-tema=chiaro] .ruolo-chip .pallino{box-shadow:0 0 0 1px var(--l-riga)}
[data-tema=chiaro] .nastro{border-top-color:rgba(10,20,40,.07);background:rgba(255,255,255,.6)}
[data-tema=chiaro] .nastro img{opacity:.88;filter:none}
[data-tema=chiaro] .nastro a:hover img{opacity:1}

/* ───────── i numeri ───────── */
[data-tema=chiaro] .numeri{background:#fff;color:var(--l-ink);border-top-color:var(--l-riga);border-bottom:1px solid var(--l-riga)}
[data-tema=chiaro] .numero{border-left-color:var(--l-riga)}
[data-tema=chiaro] .numero b{background:linear-gradient(180deg,#0a1428 25%,#1c5fa8 100%);-webkit-background-clip:text;background-clip:text}
[data-tema=chiaro] .numero span{color:var(--l-testo)}
[data-tema=chiaro] .numero small{color:var(--l-testo-2)}
@media (max-width:860px){[data-tema=chiaro] .numero:nth-child(n+3){border-top-color:var(--l-riga)}}

/* ───────── le sezioni ───────── */
[data-tema=chiaro] .scuro{background:var(--l-velo);color:var(--l-testo)}
[data-tema=chiaro] .scuro .occhiello{color:var(--l-blu)}
[data-tema=chiaro] .scuro h2.tit{color:var(--l-ink)}
[data-tema=chiaro] .scuro h2.tit em.s{color:var(--l-blu-t)}
[data-tema=chiaro] .scuro .intro{color:var(--l-testo-2)}
[data-tema=chiaro] .occhiello{color:var(--l-blu)}
[data-tema=chiaro] .cap-dida{color:var(--l-testo-2)}

/* la testata delle pagine interne: carta chiara con la griglia e gli aloni del blu B group */
[data-tema=chiaro] .testata-pagina{background:linear-gradient(180deg,#f8fafd 0%,#eef3fa 100%);color:var(--l-ink);border-bottom:1px solid var(--l-riga)}
[data-tema=chiaro] .testata-pagina::before{
  background:radial-gradient(720px 380px at 10% 0%,rgba(33,129,205,.17),transparent 62%),radial-gradient(600px 320px at 92% 100%,rgba(127,203,255,.3),transparent 62%),
  linear-gradient(var(--l-griglia) 1px,transparent 1px),linear-gradient(90deg,var(--l-griglia) 1px,transparent 1px);background-size:auto,auto,72px 72px,72px 72px}
[data-tema=chiaro] .testata-pagina .occhiello{color:var(--l-blu)}
[data-tema=chiaro] .testata-pagina h1{color:var(--l-ink)}
[data-tema=chiaro] .testata-pagina h1 em.s{color:var(--l-blu-t)}
[data-tema=chiaro] .testata-pagina .intro{color:var(--l-testo-2)}
/* aziende: il fatturato annuo 2025 nella testata */
[data-tema=chiaro] .volume-tot{background:linear-gradient(135deg,rgba(33,129,205,.12),rgba(127,203,255,.06)),#fff;border-color:rgba(33,129,205,.24);box-shadow:var(--l-ombra)}
[data-tema=chiaro] .vt-cifra .vt-etichetta{color:var(--l-blu)}
[data-tema=chiaro] .vt-cifra small{color:var(--l-testo-2)}
[data-tema=chiaro] .vt-cifra b{color:var(--l-ink)}
[data-tema=chiaro] .vt-parti a{background:rgba(255,255,255,.85);border-color:var(--l-riga)}
[data-tema=chiaro] .vt-parti a:hover{border-color:rgba(33,129,205,.4);background:#fff}
[data-tema=chiaro] .vt-parti span{color:var(--l-testo-2)}
[data-tema=chiaro] .vt-parti b{color:var(--l-blu)}
[data-tema=chiaro] .vt-parti small{color:var(--l-testo-3)}
[data-tema=chiaro] .vt-parti .vt-ric{color:var(--l-ink)}

/* ───────── home: le sei tessere «Dentro B group» e le loro anteprime ───────── */
[data-tema=chiaro] .scopri a{color:var(--l-ink);background:#fff;border-color:var(--l-riga);box-shadow:var(--l-ombra)}
[data-tema=chiaro] .scopri a:hover{border-color:rgba(33,129,205,.35);background:#fff;box-shadow:var(--l-ombra-alta)}
[data-tema=chiaro] .scopri .n{color:var(--l-testo-3)}
[data-tema=chiaro] .scopri p{color:var(--l-testo-2)}
[data-tema=chiaro] .scopri .freccia{color:var(--l-blu)}
[data-tema=chiaro] .scopri a.orbite{background:linear-gradient(135deg,rgba(33,129,205,.12),rgba(127,203,255,.05)),#fff;border-color:rgba(33,129,205,.28)}
[data-tema=chiaro] .scopri .vis{background:#f3f6fb;border-color:var(--l-riga)}
[data-tema=chiaro] .v-chi{background:radial-gradient(70% 100% at 0% 0%,rgba(33,129,205,.16),transparent 62%),radial-gradient(50% 80% at 50% 50%,rgba(127,203,255,.2),transparent 70%),
  linear-gradient(rgba(33,129,205,.08) 1px,transparent 1px) 0 0/18px 18px,linear-gradient(90deg,rgba(33,129,205,.08) 1px,transparent 1px) 0 0/18px 18px,#f4f8fd}
[data-tema=chiaro] .v-chi .fili .dentro{stroke:rgba(86,99,125,.45)}
[data-tema=chiaro] .v-chi .fili .fuori{stroke:var(--blu)}
[data-tema=chiaro] .v-chi i.pb{background:#fff;border-color:rgba(86,99,125,.25);color:var(--l-testo-3);box-shadow:0 4px 12px -6px rgba(16,32,64,.25)}
[data-tema=chiaro] .v-chi i.sv{box-shadow:0 0 0 2px rgba(33,129,205,.4),0 6px 16px -4px rgba(16,32,64,.3)}
[data-tema=chiaro] .v-chi i.sv.ico{background:var(--blu);color:#fff}
[data-tema=chiaro] .v-chi .hub{box-shadow:0 0 0 3px rgba(33,129,205,.25),0 0 30px rgba(33,129,205,.35)}
[data-tema=chiaro] .v-chi .hub::after{border-color:var(--blu)}
[data-tema=chiaro] .v-aziende .loghi img{box-shadow:0 0 0 2px #fff,0 6px 16px rgba(16,32,64,.25)}
[data-tema=chiaro] .scopri .v-cosa{background:#f3f6fb}
[data-tema=chiaro] .v-cosa .q{background:linear-gradient(135deg,color-mix(in srgb,var(--c) 14%,#fff),color-mix(in srgb,var(--c) 4%,#fff));border-color:color-mix(in srgb,var(--c) 26%,transparent)}
[data-tema=chiaro] .v-cosa .logo{box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 45%,transparent)}
[data-tema=chiaro] .v-cosa .pill,[data-tema=chiaro] .v-cosa .tondo,[data-tema=chiaro] .v-cosa .crm{box-shadow:0 0 0 1.5px color-mix(in srgb,var(--c) 35%,transparent)}
[data-tema=chiaro] .v-cosa .seg{color:#fff;box-shadow:0 0 0 1.5px color-mix(in srgb,var(--c) 30%,#fff),0 4px 12px -4px var(--c)}
[data-tema=chiaro] .v-percorso{background:radial-gradient(120% 90% at 100% 0%,rgba(33,129,205,.12),transparent 60%),#f3f6fb}
[data-tema=chiaro] .v-percorso .linea{background:linear-gradient(90deg,rgba(33,129,205,.15),var(--blu))}
[data-tema=chiaro] .v-percorso i{background:#fff;color:var(--blu);box-shadow:0 0 0 2px #f3f6fb,0 0 0 3px rgba(33,129,205,.32)}
[data-tema=chiaro] .v-percorso b{color:var(--l-testo-2)}
[data-tema=chiaro] .v-percorso .oggi i{box-shadow:0 0 0 2px #f3f6fb,0 0 0 3px var(--blu),0 0 22px rgba(33,129,205,.4)}
[data-tema=chiaro] .v-percorso .oggi b{color:var(--l-blu)}
[data-tema=chiaro] .v-team{background:linear-gradient(rgba(244,247,252,.5),rgba(244,247,252,.62)),url(/img/anteprime/mappa-1120.webp) center/cover}
[data-tema=chiaro] .v-team i{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--c),0 8px 18px -8px rgba(16,32,64,.45)}
[data-tema=chiaro] .v-team i.brio::after{border-color:#fff;background:#22c55e}
[data-tema=chiaro] .v-orbite{background:radial-gradient(60% 90% at 50% 50%,rgba(33,129,205,.13),transparent 70%),#f3f6fb}
[data-tema=chiaro] .v-orbite .giro{border-color:rgba(33,129,205,.32)}
[data-tema=chiaro] .v-orbite .giro i img{box-shadow:0 0 0 2px #fff,0 4px 12px rgba(16,32,64,.25)}
[data-tema=chiaro] .v-orbite .sole{box-shadow:0 0 0 3px rgba(33,129,205,.22),0 0 34px rgba(33,129,205,.4)}

/* ───────── chi siamo ───────── */
[data-tema=chiaro] .chiaro{background:var(--l-fondo)}
[data-tema=chiaro] .societa{background:#fff}

/* ───────── aziende: la pila delle carte ───────── */
[data-tema=chiaro] .aziende{background:var(--l-fondo)}
[data-tema=chiaro] .az{box-shadow:0 30px 70px -30px rgba(16,40,90,.25),0 0 0 1px rgba(10,20,40,.02)}
/* la carta Sellrapido (di notte blu notte) diventa una carta bianca col blu Sellrapido */
[data-tema=chiaro] .az.scura{--c:#2459e6!important;background:linear-gradient(150deg,#ffffff 0%,#f2f6fd 100%);color:var(--l-testo);border-color:var(--l-riga)}
[data-tema=chiaro] .az.scura .n{color:color-mix(in srgb,var(--c) 78%,#000);border-color:color-mix(in srgb,var(--c) 30%,transparent);background:color-mix(in srgb,var(--c) 6%,transparent)}
[data-tema=chiaro] .az.scura .ruolo{color:color-mix(in srgb,var(--c) 78%,#000);background:color-mix(in srgb,var(--c) 10%,transparent);border-color:color-mix(in srgb,var(--c) 24%,transparent)}
[data-tema=chiaro] .az.scura h3{color:var(--l-ink)}
[data-tema=chiaro] .az.scura p{color:var(--l-testo-2)}
[data-tema=chiaro] .az.scura .etichette span{background:var(--l-fondo);border-color:var(--l-riga);color:var(--l-testo)}
[data-tema=chiaro] .az.scura .dim{background:var(--l-fondo);border-color:var(--l-riga)}
[data-tema=chiaro] .az.scura .dim small{color:var(--l-testo)}
[data-tema=chiaro] .az.scura .dim b{color:var(--c)}
[data-tema=chiaro] .az.scura .apri{color:var(--l-ink)}
[data-tema=chiaro] .az.scura .vis{background:radial-gradient(70% 70% at 50% 45%,rgba(36,89,230,.08),transparent 70%),#f6f9fe;border-color:var(--l-riga)}
[data-tema=chiaro] .az .dim small{color:var(--l-testo-2)}
/* 01, l'orbita delle piattaforme */
[data-tema=chiaro] .orbita .centro{box-shadow:0 0 0 12px rgba(36,89,230,.07),0 0 0 1px var(--l-riga),0 18px 50px -10px rgba(36,89,230,.35)}
[data-tema=chiaro] .orbita .cerchio{border-color:rgba(36,89,230,.28)}
[data-tema=chiaro] .orbita .cerchio i{background:#fff;border-color:rgba(36,89,230,.3);color:#2459e6;box-shadow:0 4px 10px -4px rgba(16,32,64,.25)}
[data-tema=chiaro] .orbita .cerchio i.grande{background:#2459e6;color:#fff;border-color:#2459e6}
[data-tema=chiaro] .orbita-wrap .dida{color:var(--l-testo-2)}
/* l'intervista, dentro la pila: carta bianca col video */
[data-tema=chiaro] .intervista{background:radial-gradient(900px 600px at 12% 0%,rgba(33,129,205,.1),transparent 60%),radial-gradient(700px 500px at 100% 100%,rgba(127,203,255,.14),transparent 60%),#fff;color:var(--l-testo)}
[data-tema=chiaro] .intervista.carta{border:1px solid var(--l-riga);box-shadow:0 30px 70px -30px rgba(16,40,90,.25)}
[data-tema=chiaro] .iv-video{box-shadow:0 30px 70px -24px rgba(16,40,90,.4)}
[data-tema=chiaro] .iv-player figcaption{color:var(--l-testo-2)}
[data-tema=chiaro] .iv-player figcaption b{color:var(--l-ink)}
[data-tema=chiaro] .iv-player figcaption .pt::before{background:var(--blu)}
[data-tema=chiaro] .iv-capitoli button{background:var(--l-fondo);border-color:var(--l-riga);color:var(--l-ink)}
[data-tema=chiaro] .iv-capitoli button:hover{background:#fff;border-color:rgba(33,129,205,.38);box-shadow:var(--l-ombra)}
[data-tema=chiaro] .iv-capitoli button.ora{background:rgba(33,129,205,.09);border-color:rgba(33,129,205,.45)}
[data-tema=chiaro] .iv-capitoli .t{color:var(--l-blu)}
[data-tema=chiaro] .iv-capitoli b{color:var(--l-ink)}
[data-tema=chiaro] .iv-capitoli small{color:var(--l-testo-2)}
[data-tema=chiaro] .iv-cit{background:var(--l-fondo);border-color:var(--l-riga)}
[data-tema=chiaro] .iv-cit img{box-shadow:0 0 0 3px #fff,0 0 0 4px var(--l-riga)}
[data-tema=chiaro] .iv-cit p{color:var(--l-ink)}
[data-tema=chiaro] .iv-cit .iv-chi{color:var(--l-testo-2)}
[data-tema=chiaro] .iv-cit .iv-chi b{color:var(--l-testo)}
/* l'invito alle orbite in fondo alla pila */
[data-tema=chiaro] .orbite-invito{color:var(--l-ink);border-color:rgba(33,129,205,.22);box-shadow:var(--l-ombra);
  background:radial-gradient(700px 300px at 15% 0%,rgba(33,129,205,.16),transparent 60%),radial-gradient(500px 260px at 90% 100%,rgba(127,203,255,.3),transparent 60%),#fff}
[data-tema=chiaro] .orbite-invito::before{border-color:rgba(33,129,205,.25)}
[data-tema=chiaro] .orbite-invito::after{border-color:rgba(33,129,205,.2)}
[data-tema=chiaro] .orbite-invito .pianeti i{box-shadow:0 0 10px color-mix(in srgb,var(--c) 70%,transparent)}
[data-tema=chiaro] .orbite-invito p{color:var(--l-testo-2)}
/* la barra dei capitoli (aziende e cosa facciamo): vetro bianco */
[data-tema=chiaro] .capitoli{background:rgba(255,255,255,.86);border-color:rgba(10,20,40,.08);box-shadow:0 14px 36px -14px rgba(16,32,64,.28)}
[data-tema=chiaro] .capitoli a{color:var(--l-testo)}
[data-tema=chiaro] .capitoli a .n{color:var(--l-testo-3)}
[data-tema=chiaro] .capitoli a:hover{color:var(--l-ink);background:rgba(10,20,40,.05)}
[data-tema=chiaro] .capitoli a.qui{color:#fff}
[data-tema=chiaro] .capitoli a.qui .n{color:rgba(255,255,255,.85)}
[data-tema=chiaro] .capitoli a[class*="c-"] .n{color:var(--c)}
[data-tema=chiaro] .capitoli a[class*="c-"].qui{color:#fff;background:var(--c)}
[data-tema=chiaro] .capitoli a[class*="c-"].qui .n{color:rgba(255,255,255,.82)}
[data-tema=chiaro] .capitoli a img{box-shadow:0 0 0 1px var(--l-riga)}
[data-tema=chiaro] .capitoli a[class*="c-"].qui img{box-shadow:0 0 0 2px rgba(255,255,255,.7)}

/* ───────── cosa facciamo ───────── */
/* l'indice dei quattro capitoli: carte bianche col colore del capitolo che si accende dall'angolo */
[data-tema=chiaro] .ind{color:var(--l-ink);
  background:radial-gradient(280px 180px at 0% 0%,color-mix(in srgb,var(--c) 11%,transparent),transparent 70%),linear-gradient(180deg,#fff,#fbfcfe);
  box-shadow:0 1px 2px rgba(16,32,64,.05),0 18px 40px -26px rgba(16,32,64,.35)}
[data-tema=chiaro] .ind::after{background:linear-gradient(150deg,color-mix(in srgb,var(--c) 55%,transparent),rgba(10,20,40,.09) 38%,rgba(10,20,40,.06) 100%)}
[data-tema=chiaro] .ind::before{background:radial-gradient(360px circle at var(--mx,50%) var(--my,20%),color-mix(in srgb,var(--c) 12%,transparent),transparent 62%)}
[data-tema=chiaro] .ind:hover,[data-tema=chiaro] .ind:focus-visible{box-shadow:0 1px 2px rgba(16,32,64,.05),0 28px 56px -26px color-mix(in srgb,var(--c) 60%,transparent)}
[data-tema=chiaro] .ind:hover::after,[data-tema=chiaro] .ind:focus-visible::after{background:linear-gradient(150deg,var(--c),color-mix(in srgb,var(--c) 30%,transparent) 45%,rgba(10,20,40,.08) 100%)}
[data-tema=chiaro] .ind i{background:linear-gradient(150deg,color-mix(in srgb,var(--c) 72%,#fff),var(--c));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 12px 24px -12px color-mix(in srgb,var(--c) 80%,transparent)}
[data-tema=chiaro] .ind i.logo{background:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 45%,transparent),0 12px 24px -12px color-mix(in srgb,var(--c) 80%,transparent)}
[data-tema=chiaro] .ind i.doppio{background:none;box-shadow:none}
[data-tema=chiaro] .ind i.doppio img{box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 45%,transparent),0 8px 18px -8px color-mix(in srgb,var(--c) 80%,transparent)}
[data-tema=chiaro] .ind small{color:var(--l-testo-2)}
[data-tema=chiaro] .ind .fr{color:var(--l-testo-3)}
[data-tema=chiaro] .ind .fr::before{background:linear-gradient(90deg,var(--c),color-mix(in srgb,var(--c) 40%,transparent)) left/24% 100% no-repeat,rgba(10,20,40,.08)}
[data-tema=chiaro] .ind:hover .fr::before,[data-tema=chiaro] .ind:focus-visible .fr::before{background-size:100% 100%,auto}
[data-tema=chiaro] .ind .fr svg{color:var(--c);border-color:color-mix(in srgb,var(--c) 35%,transparent)}
[data-tema=chiaro] .ind:hover .fr svg,[data-tema=chiaro] .ind:focus-visible .fr svg{color:#fff}
/* i capitoli che di notte erano scuri: velo azzurro con l'alone del loro colore in alto, un filo che li separa */
[data-tema=chiaro] .capitolo.scuro{background:radial-gradient(1100px 620px at 0% 0%,color-mix(in srgb,var(--c,#2181cd) 9%,transparent),transparent 62%),
  radial-gradient(800px 520px at 100% 45%,rgba(127,203,255,.16),transparent 62%),var(--l-velo);border-top:1px solid var(--l-riga)}
[data-tema=chiaro] .chiaro.capitolo,[data-tema=chiaro] .ia-esempi{background:#fff;border-top:1px solid var(--l-riga)}
[data-tema=chiaro] .chiaro.capitolo[class*="c-"] .occhiello,[data-tema=chiaro] .chiaro.capitolo[class*="c-"] h2.tit em.s{color:var(--c)}
[data-tema=chiaro] .capitolo[class*="c-"] .occhiello,[data-tema=chiaro] .capitolo[class*="c-"] h2.tit em.s{color:var(--c)}
[data-tema=chiaro] .chiaro.capitolo[class*="c-"] .punti li::before{background-color:color-mix(in srgb,var(--c) 12%,transparent)}
[data-tema=chiaro] .chiaro.capitolo[class*="c-"] .punti li::after{background:var(--c)}
[data-tema=chiaro] .occ-logo{box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 45%,transparent)}
[data-tema=chiaro] .occ-logo.doppio{box-shadow:none}
[data-tema=chiaro] .occ-logo.doppio img{box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 45%,transparent)}
[data-tema=chiaro] .scuro .cap-testo>p{color:var(--l-testo)}
[data-tema=chiaro] .scuro .punti li{color:var(--l-testo)}
[data-tema=chiaro] .scuro .punti li::before{background-color:rgba(33,129,205,.12);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23196aab' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 7'/%3E%3C/svg%3E")}
[data-tema=chiaro] .capitolo[class*="c-"] .punti li::before{background-color:color-mix(in srgb,var(--c) 13%,transparent);background-image:none}
[data-tema=chiaro] .scuro .cap-testo .etichette span{background:#fff;border-color:var(--l-riga);color:var(--l-testo)}
[data-tema=chiaro] .chiaro .tasto.vuoto{border-color:var(--l-riga-2)}
/* 01, la sincronia: il catalogo e i canali */
[data-tema=chiaro] .sincronia{background:#fff;border-color:var(--l-riga);box-shadow:var(--l-ombra-alta)}
[data-tema=chiaro] .sn-catalogo{background:linear-gradient(180deg,#f7f9fd,#eff4fb);border-color:rgba(36,89,230,.16);box-shadow:0 18px 40px -24px rgba(16,40,90,.35)}
[data-tema=chiaro] .sn-testa{border-bottom-color:rgba(10,20,40,.07)}
[data-tema=chiaro] .sn-testa b{color:var(--l-ink)}
[data-tema=chiaro] .sn-testa span{color:var(--l-testo-2)}
[data-tema=chiaro] .sn-riga{background:#fff;box-shadow:0 0 0 1px var(--l-riga)}
[data-tema=chiaro] .sn-foto{box-shadow:0 0 0 1px var(--l-riga)}
[data-tema=chiaro] .sn-riga b{color:var(--l-ink)}
[data-tema=chiaro] .sn-riga span{color:var(--l-testo-2)}
[data-tema=chiaro] .sn-riga em{color:#15803d}
[data-tema=chiaro] .sn-ok{color:#166534;background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.32)}
[data-tema=chiaro] .sn-ok i{background:#22c55e}
[data-tema=chiaro] .sn-fili path{stroke:rgba(36,89,230,.42)}
[data-tema=chiaro] .sn-canale{background:#fff;border-color:var(--l-riga);color:var(--l-ink);box-shadow:0 4px 12px -8px rgba(16,32,64,.25)}
[data-tema=chiaro] .sn-canale img{box-shadow:0 0 0 1px var(--l-riga)}
[data-tema=chiaro] .sn-canale i{animation-name:sn-allinea-chiaro}
@keyframes sn-allinea-chiaro{0%{background:var(--blu);box-shadow:0 0 0 0 rgba(33,129,205,.5)}7%{background:#22c55e;box-shadow:0 0 0 7px rgba(34,197,94,0)}100%{background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,0)}}
[data-tema=chiaro] .sn-canale.altri{background:transparent;color:var(--l-testo-2);box-shadow:none;border-color:var(--l-riga-2)}
[data-tema=chiaro] .sn-canale.altri:hover{border-color:var(--blu);color:var(--l-ink)}
[data-tema=chiaro] .sn-canale.altri svg{color:var(--blu)}
/* 01, chi guida Sellrapido */
[data-tema=chiaro] .governo{background:#fff;border-color:var(--l-riga);box-shadow:var(--l-ombra)}
[data-tema=chiaro] .gv-org{background:var(--l-fondo);border-color:var(--l-riga)}
[data-tema=chiaro] .gv-org img{box-shadow:0 0 0 1px var(--l-riga)}
[data-tema=chiaro] .gv-org b{color:var(--l-ink)}
[data-tema=chiaro] .gv-org small{color:var(--l-testo-2)}
[data-tema=chiaro] .gv-org.si{background:linear-gradient(135deg,rgba(36,89,230,.1),rgba(127,203,255,.08)),#fff;border-color:rgba(36,89,230,.32)}
[data-tema=chiaro] .gv-linea{background:rgba(36,89,230,.28)}
/* 03, i quattro passi (se tornano) */
[data-tema=chiaro] .passi{background:#fff;border-color:var(--l-riga);box-shadow:var(--l-ombra-alta)}
[data-tema=chiaro] .ps-testa b,[data-tema=chiaro] .ps-elenco li b,[data-tema=chiaro] .ps-firma b{color:var(--l-ink)}
[data-tema=chiaro] .ps-testa span,[data-tema=chiaro] .ps-firma small{color:var(--l-testo-2)}
[data-tema=chiaro] .ps-elenco::before{background:var(--l-riga)}
[data-tema=chiaro] .ps-n{background:#fff;color:var(--l-ink);border-color:rgba(33,129,205,.4)}
[data-tema=chiaro] .ps-elenco li:last-child .ps-n{color:#fff}
[data-tema=chiaro] .ps-elenco li p{color:var(--l-testo-2)}
[data-tema=chiaro] .ps-firma{border-top-color:var(--l-riga)}
/* 03, il portafoglio: le due partecipazioni con l'anello della quota */
[data-tema=chiaro] .portafoglio{background:#fff;border-color:var(--l-riga);box-shadow:var(--l-ombra-alta)}
[data-tema=chiaro] .pf-testa b{color:var(--l-ink)}
[data-tema=chiaro] .pf-testa span{color:var(--l-testo-2)}
[data-tema=chiaro] .pf-riga{border-top-color:var(--l-riga)}
[data-tema=chiaro] .pf-riga .v-anello .f{stroke:var(--l-riga)}
[data-tema=chiaro] .pf-riga .v-anello b{color:var(--c,var(--l-ink))}
[data-tema=chiaro] .pf-riga>img{box-shadow:0 0 0 1px var(--l-riga)}
[data-tema=chiaro] .pf-testo b{color:var(--l-ink)}
[data-tema=chiaro] .pf-testo small{color:var(--l-testo-2)}
[data-tema=chiaro] .pf-cifra{color:var(--l-testo-2)}
[data-tema=chiaro] .pf-cifra b{color:var(--l-ink)}
[data-tema=chiaro] .pf-chip{color:var(--l-testo);background:var(--l-fondo);border-color:var(--l-riga)}
[data-tema=chiaro] .pf-link{color:var(--l-blu)}
[data-tema=chiaro] .pf-pie{border-top-color:var(--l-riga);color:var(--l-testo-2)}
[data-tema=chiaro] .pf-pie i{background:var(--c,var(--blu))}
/* 04, l'intelligenza artificiale: il metodo, le società, la bilancia */
[data-tema=chiaro] .ia-mini{background:#fff;border-color:var(--l-riga);box-shadow:var(--l-ombra-alta)}
[data-tema=chiaro] .ia-mini-testa b{color:var(--l-ink)}
[data-tema=chiaro] .ia-mini-testa span{color:var(--l-testo-2)}
[data-tema=chiaro] .ia-passo-m{background:var(--l-fondo);border-color:var(--l-riga)}
[data-tema=chiaro] .ia-passo-m i{background:color-mix(in srgb,var(--c) 12%,#fff)}
[data-tema=chiaro] .ia-passo-m b{color:var(--l-ink)}
[data-tema=chiaro] .ia-passo-m small{color:var(--l-testo-2)}
[data-tema=chiaro] .ia-loop{color:var(--l-testo-2)}
[data-tema=chiaro] .ia-dove-riga{background:var(--l-fondo);border-color:var(--l-riga)}
[data-tema=chiaro] .ia-dove-riga img{box-shadow:0 0 0 1px var(--l-riga)}
[data-tema=chiaro] .ia-dove-riga b{color:var(--l-ink)}
[data-tema=chiaro] .ia-dove-riga small{color:var(--l-testo-2)}
[data-tema=chiaro] .cap-largo{border-top-color:var(--l-riga)}
[data-tema=chiaro] .ia-largo-testa h3{color:var(--l-ink)}
[data-tema=chiaro] .ia-largo-testa p{color:var(--l-testo)}
[data-tema=chiaro] .ia-colonna{background:#fff;border-color:var(--l-riga);box-shadow:var(--l-ombra)}
[data-tema=chiaro] .ia-colonna.ai{background:linear-gradient(180deg,color-mix(in srgb,var(--c) 8%,#fff),#fff);border-color:color-mix(in srgb,var(--c) 32%,transparent)}
[data-tema=chiaro] .ia-col-testa i{background:color-mix(in srgb,var(--c) 12%,#fff)}
[data-tema=chiaro] .ia-colonna.noi .ia-col-testa i{background:rgba(33,129,205,.1);color:var(--blu)}
[data-tema=chiaro] .ia-col-testa b{color:var(--l-ink)}
[data-tema=chiaro] .ia-col-testa small{color:var(--l-testo-2)}
[data-tema=chiaro] .ia-colonna li{color:var(--l-testo)}
[data-tema=chiaro] .ia-colonna li::before{background:color-mix(in srgb,var(--c) 14%,transparent)}
[data-tema=chiaro] .ia-colonna.noi li::before{background:rgba(33,129,205,.12)}
[data-tema=chiaro] .ia-colonna.noi li::after{background:var(--blu)}
[data-tema=chiaro] .ia-tempo{background:linear-gradient(135deg,color-mix(in srgb,var(--c) 14%,#fff),rgba(127,203,255,.12));border-color:color-mix(in srgb,var(--c) 32%,transparent)}
[data-tema=chiaro] .ia-tempo i{box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 25%,transparent),0 6px 16px -8px color-mix(in srgb,var(--c) 70%,transparent)}
[data-tema=chiaro] .ia-tempo b{color:var(--l-ink)}
[data-tema=chiaro] .ia-tempo small{color:var(--l-testo)}
[data-tema=chiaro] .ia-esempi .occhiello,[data-tema=chiaro] .ia-esempi h2.tit em.s{color:var(--c)}

/* ───────── percorso: l'intelligenza artificiale ───────── */
[data-tema=chiaro] .ai{background:radial-gradient(1000px 600px at 0% 0%,rgba(33,129,205,.1),transparent 62%),radial-gradient(800px 500px at 100% 100%,rgba(127,203,255,.16),transparent 62%),var(--l-velo);border-top:1px solid var(--l-riga)}
[data-tema=chiaro] .ai .principio{background:#fff;border-color:var(--l-riga);box-shadow:var(--l-ombra)}
[data-tema=chiaro] .ai .principio:hover{border-color:rgba(33,129,205,.35);background:#fff;box-shadow:var(--l-ombra-alta)}
[data-tema=chiaro] .ai .principio .n{color:var(--l-blu)}
[data-tema=chiaro] .ai .principio h3{color:var(--l-ink)}
[data-tema=chiaro] .ai .principio p{color:var(--l-testo-2)}
[data-tema=chiaro] .ai .uso{background:#fff;border-color:var(--l-riga);box-shadow:var(--l-ombra)}
[data-tema=chiaro] .ai .uso i{background:rgba(33,129,205,.1);color:var(--blu)}
[data-tema=chiaro] .ai .uso b{color:var(--l-ink)}
[data-tema=chiaro] .ai .uso p{color:var(--l-testo-2)}
[data-tema=chiaro] .ai .coda{border-top-color:var(--l-riga)}
[data-tema=chiaro] .ai .coda p{color:var(--l-ink)}

/* ───────── Brio: la foto 3D nel cerchio, la chat che si scrive ───────── */
[data-tema=chiaro] .brio{background:radial-gradient(900px 600px at 20% 10%,rgba(33,129,205,.14),transparent 60%),radial-gradient(700px 500px at 90% 90%,rgba(127,203,255,.22),transparent 60%),var(--l-velo);color:var(--l-testo)}
[data-tema=chiaro] .brio.capitolo[class*="c-"]{background:radial-gradient(900px 600px at 20% 50%,color-mix(in srgb,var(--c) 11%,transparent),transparent 60%),radial-gradient(700px 500px at 90% 80%,rgba(127,203,255,.2),transparent 60%),var(--l-velo)}
/* il blocco di Brio continua il capitolo 04: niente filo e niente alone tagliato sulla giuntura */
[data-tema=chiaro] .brio-esempio{border-top:0}
[data-tema=chiaro] .b-vis .cerchio{border-color:rgba(33,129,205,.22)}
[data-tema=chiaro] .b-vis .cerchio.a::before,[data-tema=chiaro] .b-vis .cerchio.b::before{background:var(--blu);box-shadow:0 0 14px rgba(33,129,205,.6)}
[data-tema=chiaro] .b-vis .onda{border-color:rgba(33,129,205,.32)}
[data-tema=chiaro] .b-vis .faccia{box-shadow:0 0 0 8px rgba(255,255,255,.75),0 0 0 9px rgba(33,129,205,.14),0 40px 90px -20px rgba(16,40,90,.5)}
[data-tema=chiaro] .b-vis .stato{color:var(--l-ink);background:rgba(255,255,255,.92);border-color:var(--l-riga);box-shadow:0 10px 24px -12px rgba(16,32,64,.35)}
[data-tema=chiaro] .b-vis .stato i{background:#22c55e}
[data-tema=chiaro] .b-testo p{color:var(--l-testo)}
[data-tema=chiaro] .chat{background:#fff;border-color:var(--l-riga);box-shadow:var(--l-ombra-alta)}
[data-tema=chiaro] .chat .m{background:var(--l-fondo);border-color:var(--l-riga);color:var(--l-ink)}
[data-tema=chiaro] .chat .m.io{background:var(--blu);border-color:transparent;color:#fff}
[data-tema=chiaro] .b-chip span{color:var(--l-testo);background:#fff;border-color:var(--l-riga)}

/* ───────── contatti ───────── */
[data-tema=chiaro] .contatti{background:#fff}
[data-tema=chiaro] .chiamata{box-shadow:0 40px 90px -40px rgba(16,60,130,.55)}

/* ───────── il piede ───────── */
[data-tema=chiaro] footer{background:linear-gradient(180deg,#f0f4fa 0%,var(--l-piede) 100%);color:var(--l-testo-2);border-top:1px solid var(--l-riga)}
[data-tema=chiaro] footer .alto{border-bottom-color:rgba(10,20,40,.08)}
[data-tema=chiaro] footer .motto{color:var(--l-ink)}
[data-tema=chiaro] footer nav a{color:var(--l-testo)}
[data-tema=chiaro] footer nav a:hover{color:var(--l-blu)}
[data-tema=chiaro] footer .segno{opacity:.85}
[data-tema=chiaro] footer .f-lingue span,[data-tema=chiaro] footer .f-tema>span:first-child{color:var(--l-testo-2)}
[data-tema=chiaro] footer .f-lingue a{color:var(--l-testo)}
[data-tema=chiaro] footer .f-lingue a:hover{color:var(--l-ink)}
[data-tema=chiaro] footer .f-lingue a[aria-current]{color:var(--l-blu)}
[data-tema=chiaro] footer .f-tema .f-pista{border-color:rgba(10,20,40,.14);background:rgba(255,255,255,.6)}
[data-tema=chiaro] footer .f-tema button{color:var(--l-testo)}
[data-tema=chiaro] footer .f-tema button:not([aria-pressed=true]):hover{color:var(--l-ink)}
[data-tema=chiaro] footer .f-tema button[aria-pressed=true]{color:#fff}
[data-tema=chiaro] footer .bcons-pref{color:var(--l-testo)}
[data-tema=chiaro] footer .bcons-pref:hover{color:var(--l-blu)}

/* ───────── pagine semplici (privacy, 404) ───────── */
[data-tema=chiaro] .pagina{background:radial-gradient(800px 420px at 8% 0%,rgba(33,129,205,.1),transparent 62%),var(--l-fondo);color:var(--l-testo)}
[data-tema=chiaro] .pagina h1,[data-tema=chiaro] .pagina h2{color:var(--l-ink)}
[data-tema=chiaro] .pagina h1 em.s{color:var(--l-blu-t)}
[data-tema=chiaro] .pagina p,[data-tema=chiaro] .pagina li{color:var(--l-testo)}
[data-tema=chiaro] .pagina a{color:var(--l-blu)}
[data-tema=chiaro] .pagina .occhiello{color:var(--l-blu)!important}
[data-tema=chiaro] .pagina p[style*="#8ea2c4"]{color:var(--l-testo-2)!important}
[data-tema=chiaro] .pagina .tasto.pieno,[data-tema=chiaro] .pagina .tasto.blu{color:#fff}

/* ───────── il video di presentazione ───────── */
[data-tema=chiaro] .presentazione{background:radial-gradient(900px 600px at 85% 0%,rgba(33,129,205,.13),transparent 60%),radial-gradient(700px 500px at 0% 100%,rgba(127,203,255,.2),transparent 60%),var(--l-velo)}
[data-tema=chiaro] .vp-video{box-shadow:0 40px 90px -36px rgba(16,40,90,.55),0 0 0 1px rgba(10,20,40,.06)}
[data-tema=chiaro] .vp-lingue .f-lingue{color:var(--l-testo-2)}
[data-tema=chiaro] .vp-lingue .f-lingue a{border-color:var(--l-riga);color:var(--l-ink);background:#fff}
[data-tema=chiaro] .vp-lingue .f-lingue a[aria-current]{background:rgba(33,129,205,.1);border-color:rgba(33,129,205,.4)}
[data-tema=chiaro] .vp-nota a{color:var(--l-blu)}

/* ───────── la chat di Brio ───────── */
[data-tema=chiaro] .bchat-tondo{box-shadow:0 0 0 3px #fff,0 12px 30px -6px rgba(16,40,90,.45)}
[data-tema=chiaro] .bchat{box-shadow:0 0 0 1px rgba(16,32,64,.08),0 30px 70px -20px rgba(16,40,90,.4)}
[data-tema=chiaro] .bchat-testa{background:linear-gradient(120deg,#16305c 0%,#1d63ad 100%)}

/* ───────── il banner dei cookie (consenso.js) ───────── */
[data-tema=chiaro] .bcons{background:#fff;color:var(--l-ink);border-color:var(--l-riga);box-shadow:0 24px 60px -18px rgba(16,40,90,.4)}
[data-tema=chiaro] .bcons h2{color:var(--l-ink)}
[data-tema=chiaro] .bcons p{color:var(--l-testo)}
[data-tema=chiaro] .bcons a{color:var(--l-blu)}
[data-tema=chiaro] .bcons-tasti button{background:var(--l-ink);color:#fff}   /* Rifiuta e Accetta restano uguali, come nello scuro */
[data-tema=chiaro] .bcons-tasti button:hover{background:#1b3663}
[data-tema=chiaro] .bcons-x{background:var(--l-fondo);color:var(--l-ink)}
[data-tema=chiaro] .bcons-x:hover{background:var(--l-riga)}
[data-tema=chiaro] .bcons button:focus-visible,[data-tema=chiaro] .bcons a:focus-visible{outline-color:var(--blu)}