/* Marchio Kumula — stile comune delle pagine pubbliche (dalla v4.08, allineato alla home «Territorio ed energia»).
   Caricato in fondo all'<head> di ogni pagina pubblica, dopo gli stili della pagina: rimappa i colori delle pagine
   (nomi vecchi e nuovi) sui toni della home, porta i caratteri Bricolage Grotesque (titoli) e Public Sans (testi),
   e definisce fascia in testa, logo animato, pulsanti «Prenota una call» / «Area clienti» e piè di pagina chiaro. */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Public+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap");

html:root{
  /* i colori della home */
  --km-fondo:#fffdf8; --km-fondo2:#f4eee2; --km-testo:#29241e; --km-tenue:#675d50; --km-filo:#e3dac8;
  --km-giallo:#ffd500; --km-terra:#7a4b2a; --km-campo:#3e5a35; --km-blu:#232c38;
  --km-f-titolo:"Bricolage Grotesque",system-ui,"Segoe UI",Arial,sans-serif;
  --km-f-testo:"Public Sans",system-ui,"Segoe UI",Arial,sans-serif;
  /* nomi usati dalle pagine (articoli, eventi, notiziario, privacy, prenota, accesso) */
  --navy:#232c38; --navy2:#3a4656; --ink:#1b222b;
  --gold:#7a4b2a; --amber:#ffd500; --amber-l:#ffe14d; --amber-d:#e6bf00;
  --teal:#7a4b2a; --teal-l:#9a6a45;
  --bg:#fffdf8; --surface:#ffffff; --line:#e3dac8; --text:#29241e; --muted:#675d50; --mut:#675d50;
  --blu:#232c38; --giallo:#ffd500; --testo:#29241e; --grigio:#675d50; --linea:#e3dac8; --fondo:#f4eee2; --verde:#3e5a35;
  --disp:var(--km-f-titolo); --body:var(--km-f-testo);
}
body{background:var(--km-fondo);color:var(--km-testo);font-family:var(--km-f-testo)!important}
body input,body select,body textarea,body button{font-family:var(--km-f-testo)}
h1,h2,h3,h4,.eyebrow,.btn,.nav nav a,.bpgroup a.bp,.sec-head h2,summary{font-family:var(--km-f-titolo)!important}
h1,h2{font-weight:720;letter-spacing:-.02em;font-variation-settings:"opsz" 96;line-height:1.1!important}
h3{font-weight:650}
.eyebrow{color:var(--km-terra)!important;letter-spacing:.04em;text-transform:none;font-size:15px;font-weight:650}
a{text-underline-offset:3px}
:focus-visible{outline:3px solid var(--km-giallo);outline-offset:3px}
.btn{border-radius:999px!important}
.btn-gold,.btn.btn-gold{background:var(--km-giallo)!important;color:var(--km-testo)!important;box-shadow:none!important}
.btn-ghost{border-color:var(--km-testo)!important;color:var(--km-testo)!important;border-width:2px!important}

/* fascia in testa */
.km-fascia{background:var(--km-blu);color:#fff;font-family:var(--km-f-titolo);font-weight:500;font-size:15px;line-height:1.35;text-align:center;padding:10px 16px}
.km-fascia b{color:var(--km-giallo);font-weight:700}
@media(max-width:480px){.km-fascia{font-size:13.5px;padding:9px 14px}}

/* testata */
header{background:var(--km-fondo)!important}
.nav nav a{color:var(--km-testo)!important;font-weight:500!important}
.nav nav a:hover,.nav nav a.on{color:var(--km-testo)!important;text-decoration:underline;text-decoration-color:var(--km-giallo);text-decoration-thickness:3px;text-underline-offset:6px;border-bottom:0!important}
.nav nav a.evid{background:var(--km-fondo2)!important;border:0!important;color:var(--km-testo)!important;border-radius:999px!important}
.nav nav a.evid::before{background:var(--km-giallo)!important;box-shadow:0 0 0 3px rgba(255,213,0,.3)!important}
.navdrop>.submenu{background:#fff;border-color:var(--km-filo)!important}

/* logo come nella home: simbolo animato + «Kumula / STORAGE SOLUTION» */
.km-lockup{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--km-testo)}
.km-lockup svg{height:62px;width:46px;flex:none;overflow:visible}
.km-lockup span{display:grid;line-height:1}
.km-lockup b{font-family:var(--km-f-titolo);font-weight:800;font-size:38px;letter-spacing:.005em;color:var(--km-testo)}
.km-lockup small{font-family:var(--km-f-testo);font-size:12.5px;letter-spacing:.32em;color:var(--km-tenue);margin-top:4px}
.nav .km-lockup{margin-left:0}
@media(max-width:980px){.km-lockup svg{height:52px;width:39px}.km-lockup b{font-size:32px}.km-lockup small{font-size:10.5px}}
@media(max-width:400px){.km-lockup svg{height:44px;width:33px}.km-lockup b{font-size:27px}}
.km-m{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  .km .km-m1{animation:kmS .7s cubic-bezier(.2,.8,.2,1) both,kmBlu 6s 2s ease-in-out infinite}
  .km .km-m2{animation:kmS .7s .15s cubic-bezier(.2,.8,.2,1) both,kmBlu 6s 2.1s ease-in-out infinite}
  .km .km-m3{animation:kmD .7s .35s cubic-bezier(.2,.8,.2,1) both,kmRicarica 6s 2s ease-in-out infinite}
  .km .km-m4{animation:kmD .7s .5s cubic-bezier(.2,.8,.2,1) both,kmRicarica 6s 2.18s ease-in-out infinite}
  .km-lockup:hover .km .km-m3,.km-lockup:hover .km .km-m4{animation:kmRicarica 1.1s ease-in-out}
  @keyframes kmS{from{opacity:0;transform:translateX(-40%)}to{opacity:1;transform:none}}
  @keyframes kmD{from{opacity:0;transform:translateX(40%)}to{opacity:1;transform:none}}
  @keyframes kmRicarica{0%,70%,100%{transform:none;filter:none;opacity:1}78%{transform:translate(22%,-6%);opacity:.35}86%{transform:none;opacity:1;filter:brightness(1.12) drop-shadow(0 0 14px rgba(255,213,0,.85))}92%{filter:none}}
  @keyframes kmBlu{0%,72%,100%{transform:none}80%{transform:translateX(-5%)}88%{transform:none}}
}

/* pulsanti in alto a destra: Prenota una call (giallo), Richiedi informazioni, Area clienti */
.bpgroup a.bp{border-radius:999px!important;box-shadow:none!important;font-weight:650!important;font-size:15px!important}
.bpgroup a.bp1{background:#fff!important;border:2px solid var(--km-testo)!important;color:var(--km-testo)!important}
.bpgroup a.bp1:hover{background:var(--km-fondo2)!important}
.bpgroup a.bp.bp-prenota{background:var(--km-giallo)!important;border:2px solid var(--km-giallo)!important;color:var(--km-testo)!important;gap:8px}
.bpgroup a.bp.bp-prenota:hover{background:#ffe14d!important}
.bpgroup a.bp.bp-area{background:var(--km-fondo2)!important;border:2px solid var(--km-fondo2)!important;color:var(--km-testo)!important;gap:8px}
.bpgroup a.bp.bp-area:hover{border-color:var(--km-testo)!important}
.bpgroup a.bp svg{width:16px;height:16px;flex:none}
@media(max-width:980px){.navtop .menu-btn{top:30px!important}}
@media(max-width:480px){
  .bpgroup a.bp{flex:1 1 0!important;padding:10px 8px!important;font-size:13.5px!important;justify-content:center}
  .bpgroup a.bp.bp-prenota{flex-basis:100%!important}
  .navtop .menu-btn{top:24px!important}
}

/* riquadri e card: bordi caldi */
.card,.flowbox,.photo,.pg-banner,.callout,.cta,.box{border-color:var(--km-filo)!important}
.card .ic{background:var(--km-fondo2)!important;color:var(--km-terra)!important}

/* piè di pagina chiaro come nella home */
footer{background:var(--km-fondo2)!important;color:var(--km-tenue)!important;border-top:1px solid var(--km-filo)!important}
footer h4{color:var(--km-terra)!important;font-size:16px!important;letter-spacing:0!important;text-transform:none!important}
footer p,footer a,footer span{color:var(--km-testo)!important}
footer a:hover{text-decoration:underline}
footer .legal{border-top-color:var(--km-filo)!important;color:var(--km-tenue)!important}
footer .legal span,footer .legal a{color:var(--km-tenue)!important}
svg.km-ico{height:40px;width:auto;display:block}

/* foto delle batterie nell'apertura (vecchia home, se usata) */
.hero-art.km-foto{display:block;margin:0;position:relative}
.km-foto img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:16px}
.km-foto figcaption{margin-top:12px;font-size:14px;color:var(--km-tenue)}

/* avviso cookie */
#ckbanner{background:var(--km-blu)!important}
#ckbanner button{background:var(--km-giallo)!important;color:var(--km-testo)!important;border-radius:999px!important}

/* pagine d'accesso: «Torna al sito» leggibile sul fondo chiaro */
.home a,a.back{color:var(--km-tenue)!important}
.home a:hover,a.back:hover{color:var(--km-testo)!important}