/* Tema chiaro di Rayer Group (07/11/2026). Ripreso dal tema chiaro approvato da Riccardo su Digitalizziamo
   (digitalizziamo/agenzia-sito/tema-chiaro.css, stessa tavolozza), più i pezzi che ha solo questo sito:
   logo, rete luminosa, titoli che si accendono, guide (testo, tabelle, codice), filtri, moduli, prezzi.
   Vale solo con <html data-tema="chiaro">. Per toglierlo: cancellare questo file, il suo <link> e lo script del tema. */
html[data-tema="chiaro"]{
  --fondo:#eef1f7;
  --blu-testo:#0050e6;
  --testo:#12131a;
  --corpo:#535a6b;
  --chiaro:#2c3242;
  color-scheme:light;
}
html[data-tema="chiaro"] body{background:var(--fondo)}

/* sfere: blu leggero, il vetro bianco le attraversa */
html[data-tema="chiaro"] .s1{background:radial-gradient(circle,rgba(0,87,255,.20),rgba(0,87,255,0) 68%)}
html[data-tema="chiaro"] .s2{background:radial-gradient(circle,rgba(70,130,255,.18),rgba(70,130,255,0) 68%)}
html[data-tema="chiaro"] .s3{background:radial-gradient(circle,rgba(0,170,255,.14),rgba(0,170,255,0) 70%)}
html[data-tema="chiaro"] .fondo::after{opacity:.03;mix-blend-mode:multiply}
html[data-tema="chiaro"] .avviso{background:rgba(10,20,60,.05);border-bottom-color:rgba(10,20,60,.08)}

/* vetro bianco */
html[data-tema="chiaro"] .vetro{
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.6));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 24px 50px -30px rgba(20,40,110,.35)}
html[data-tema="chiaro"] .vetro::before{background:linear-gradient(135deg,rgba(0,87,255,.35),rgba(10,20,60,.08) 38%,rgba(10,20,60,.06) 62%,rgba(0,87,255,.28))}
html[data-tema="chiaro"] .evidenza{background:linear-gradient(180deg,rgba(0,87,255,.12),rgba(255,255,255,.7))}
html[data-tema="chiaro"] .luce::after{background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),rgba(0,87,255,.08),transparent 60%)}

/* logo bianco: diventa scuro */
html[data-tema="chiaro"] .logo img,
html[data-tema="chiaro"] .piede-sopra img{filter:brightness(0);opacity:.88}

/* rete luminosa: i punti chiari diventano blu scuri (negativo con la tinta riportata al blu) */
html[data-tema="chiaro"] .grafo,
html[data-tema="chiaro"] .grafo-pagina{filter:invert(1) hue-rotate(180deg)}

/* titoli che si accendono: dal testo scuro al blu (al buio vanno dal bianco al blu) */
html[data-tema="chiaro"] .lett{color:rgb(calc(18 - 18 * var(--v,0)),calc(19 + 68 * var(--v,0)),calc(26 + 229 * var(--v,0)));text-shadow:0 0 calc(22px * var(--v,0)) rgba(0,87,255,calc(.35 * var(--v,0)))}

/* menu */
html[data-tema="chiaro"] .voci a:hover,
html[data-tema="chiaro"] .voci a.attiva{color:var(--testo);text-shadow:none}
html[data-tema="chiaro"] .pillola{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.75));box-shadow:inset 0 0 0 1px rgba(0,87,255,.18),0 6px 18px -8px rgba(20,40,110,.35)}
html[data-tema="chiaro"] .luce-sotto{background:radial-gradient(closest-side,rgba(0,87,255,.22),rgba(0,87,255,0))}
html[data-tema="chiaro"] .foglio.vetro{background:rgba(255,255,255,.97)}
html[data-tema="chiaro"] .foglio a:hover,
html[data-tema="chiaro"] .foglio a:active{background:rgba(0,87,255,.07);color:var(--testo)}

/* pulsanti */
html[data-tema="chiaro"] .vetro-btn,
html[data-tema="chiaro"] .burger{color:var(--testo);background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px rgba(10,20,60,.14),0 6px 18px -10px rgba(20,40,110,.35)}
html[data-tema="chiaro"] .vetro-btn:hover{background:#fff}
html[data-tema="chiaro"] .burger span{background:var(--testo)}

/* testi che erano bianchi fissi */
html[data-tema="chiaro"] .indietro a:hover,
html[data-tema="chiaro"] .indice a:hover,
html[data-tema="chiaro"] .piede-link a:hover,
html[data-tema="chiaro"] .testo h2,
html[data-tema="chiaro"] .testo h3,
html[data-tema="chiaro"] .testo h4,
html[data-tema="chiaro"] .testo strong,
html[data-tema="chiaro"] .testo b,
html[data-tema="chiaro"] .gratis b,
html[data-tema="chiaro"] .riga-prezzo b,
html[data-tema="chiaro"] .passi-elenco strong{color:var(--testo)}
html[data-tema="chiaro"] .stato.spento i{background:#9aa0ae}

/* linee di separazione */
html[data-tema="chiaro"] .piede-sopra,
html[data-tema="chiaro"] .riga-prezzo{border-bottom-color:rgba(10,20,60,.1)}
html[data-tema="chiaro"] .testo hr{background:rgba(10,20,60,.12)}

/* guide: citazioni, codice, tabelle */
html[data-tema="chiaro"] .testo blockquote{background:linear-gradient(90deg,rgba(0,87,255,.08),rgba(255,255,255,.5))}
html[data-tema="chiaro"] .testo code{background:rgba(10,20,60,.07);color:#1a2b5c}
html[data-tema="chiaro"] .testo pre{background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px rgba(10,20,60,.1)}
html[data-tema="chiaro"] .testo pre code{background:none}
html[data-tema="chiaro"] .nota-chiara{background:rgba(0,87,255,.05)}
html[data-tema="chiaro"] .tabella{background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px rgba(10,20,60,.1)}
html[data-tema="chiaro"] .tabella th{border-bottom-color:rgba(10,20,60,.14)}
html[data-tema="chiaro"] .tabella td{border-bottom-color:rgba(10,20,60,.08)}
@media (max-width:640px){
  html[data-tema="chiaro"] .tabella{background:none;box-shadow:none}
  html[data-tema="chiaro"] .tabella tr{background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 1px rgba(10,20,60,.1)}
  html[data-tema="chiaro"] .tabella td{border-bottom-color:rgba(10,20,60,.07)}
}

/* filtri delle guide, etichette, moduli, esiti */
html[data-tema="chiaro"] .filtro,
html[data-tema="chiaro"] .fiducia li{background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px rgba(10,20,60,.13)}
html[data-tema="chiaro"] .filtro:hover{background:#fff}
html[data-tema="chiaro"] .filtro.attivo{background:var(--testo);color:#fff}
html[data-tema="chiaro"] .campo input,
html[data-tema="chiaro"] .campo select,
html[data-tema="chiaro"] .campo textarea{color:var(--testo);background:rgba(255,255,255,.8);box-shadow:inset 0 0 0 1px rgba(10,20,60,.18)}
html[data-tema="chiaro"] .campo input::placeholder,
html[data-tema="chiaro"] .campo textarea::placeholder{color:#7a8091}
html[data-tema="chiaro"] .campo input:focus,
html[data-tema="chiaro"] .campo select:focus,
html[data-tema="chiaro"] .campo textarea:focus{background:#fff}
html[data-tema="chiaro"] .esito-demo{background:rgba(0,87,255,.08);box-shadow:inset 0 0 0 1px rgba(0,87,255,.25);color:#14306e}

/* selettore del tema sul chiaro */
html[data-tema="chiaro"] .tema{background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 1px rgba(10,20,60,.14)}
/* passaggio morbido tra i due temi */
html{transition:background-color .35s}
body{transition:background-color .35s,color .35s}
/* carosello di «Cosa facciamo» sul chiaro */
html[data-tema="chiaro"] .freccia{color:var(--testo);background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px rgba(10,20,60,.14),0 6px 18px -10px rgba(20,40,110,.35)}
html[data-tema="chiaro"] .freccia.succ:not(:disabled){color:#fff;background:linear-gradient(180deg,rgba(72,140,255,.96),rgba(0,87,255,.94))}
/* bollino «chi lo eroga» sul chiaro */
html[data-tema="chiaro"] .erogato{background:rgba(255,255,255,.8);box-shadow:inset 0 0 0 1px rgba(10,20,60,.14)}
html[data-tema="chiaro"] .piede-gruppo{border-top-color:rgba(10,20,60,.1)}
html[data-tema="chiaro"] .tappa.acceso{background:linear-gradient(180deg,#3a7bff,#0057ff)}
/* 09/11/2026 elenco dei servizi in home */
html[data-tema="chiaro"] .indice-linee button{color:rgba(10,20,60,.25)}
html[data-tema="chiaro"] .indice-linee button:hover{color:rgba(10,20,60,.55)}
html[data-tema="chiaro"] .indice-linee button.acceso{color:var(--testo)}