/* ==========================================================================
   Non prendermi per il Kilowatt — foglio di stile unico
   Palette presa dal marchio: verde #6BA635 (luce) e blu #074C86 (gas).
   Nessuna risorsa esterna: niente Google Fonts, niente CDN, niente iframe di
   terze parti. Per uno studio che difende i consumatori, il sito non deve
   cedere l'IP dei visitatori a nessuno prima del consenso.
   ========================================================================== */

:root{
  /* --- colori del marchio --- */
  --verde:       #6ba635;   /* verde logo, campionato dal file originale */
  --verde-t:     #4f8226;   /* verde scurito: usarlo per testo su bianco (contrasto AA) */
  --verde-luce:  #8fc855;   /* verde chiaro: accenti su fondo scuro */
  --blu:         #074c86;   /* blu logo */
  --blu-t:       #063d6c;
  --blu-luce:    #2b81c4;

  /* --- fondali --- */
  --notte:       #042a49;   /* fondo delle sezioni scure */
  --notte-2:     #063a63;
  --notte-3:     #0a4a7a;
  --neutro:      #f6f8f9;
  --neutro-2:    #eaf0f2;
  --bordo:       #d9e2e7;

  /* --- testo --- */
  --testo-scuro: #14212b;
  --grigio:      #5c6b76;
  --grigio-c:    #8a99a3;
  --su-scuro:    #c3d5e2;   /* testo secondario sopra il blu notte */
  --su-scuro-2:  #93aec2;

  --ok:          #2e7d46;
  --ko:          #c0392b;

  --grad:      linear-gradient(100deg, var(--verde) 0%, #3d8f5e 48%, var(--blu) 100%);
  --grad-luce: linear-gradient(100deg, var(--verde-luce) 0%, #55a883 50%, var(--blu-luce) 100%);

  /* --- tipografia --- */
  --display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --testo:   system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* --- misure --- */
  --max: 1180px;
  --gap: clamp(1.25rem, 3vw, 2.5rem);
  --r: 14px;
  --ombra: 0 18px 40px -22px rgba(4,42,73,.45);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
}

body{
  margin:0;
  font-family:var(--testo);
  font-size:clamp(1rem,.97rem + .18vw,1.08rem);
  line-height:1.68;
  color:var(--testo-scuro);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; height:auto; display:block}
a{color:inherit}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:900;
  line-height:1.06;
  letter-spacing:-.026em;
  margin:0 0 .5em;
  color:var(--blu);
  text-wrap:balance;
}
h1{font-size:clamp(2.3rem,1.45rem + 3.9vw,4.2rem); text-transform:uppercase}
h2{font-size:clamp(1.85rem,1.3rem + 2.4vw,2.95rem)}
h3{font-size:clamp(1.2rem,1.05rem + .7vw,1.5rem); letter-spacing:-.018em}
p{margin:0 0 1.15em; text-wrap:pretty}
p:last-child{margin-bottom:0}

.wrap{width:100%; max-width:var(--max); margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2rem)}
.sezione{padding-block:clamp(3.5rem,7vw,6.5rem)}
.sezione--scura{background:var(--notte); color:#fff}
.sezione--scura h2,.sezione--scura h3,.sezione--scura h4{color:#fff}
.sezione--panna{background:var(--neutro)}
.centro{text-align:center}
.stretta{max-width:63ch; margin-inline:auto}

/* occhiello sopra i titoli */
.occhiello{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.775rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--verde-t); margin-bottom:1rem;
}
.occhiello::before{content:""; width:26px; height:3px; background:var(--grad); border-radius:2px}
.sezione--scura .occhiello{color:var(--verde-luce)}
.sezione--scura .occhiello::before{background:var(--grad-luce)}

.sottotitolo{font-size:clamp(1.03rem,.98rem + .3vw,1.2rem); color:var(--grigio); max-width:60ch}
.sezione--scura .sottotitolo{color:var(--su-scuro)}

/* -------------------------------------------------------------- bottoni -- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--display); font-weight:800; font-size:.95rem;
  letter-spacing:.01em; text-decoration:none; cursor:pointer;
  padding:.95rem 1.6rem; border-radius:999px; border:2px solid transparent;
  transition:transform .16s ease, box-shadow .16s ease, background-color .16s ease, color .16s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible{outline:3px solid var(--verde-luce); outline-offset:3px}
.btn--primo{background:var(--grad); color:#fff; box-shadow:0 12px 26px -12px rgba(7,76,134,.8)}
.btn--primo:hover{box-shadow:0 18px 34px -14px rgba(7,76,134,.95)}
.btn--verde{background:var(--verde); color:#fff; box-shadow:0 12px 26px -12px rgba(107,166,53,.9)}
.btn--verde:hover{background:#5f9530}
.btn--fantasma{border-color:currentColor; color:inherit; background:transparent}
.btn--fantasma:hover{background:rgba(255,255,255,.12)}
.sezione--panna .btn--fantasma:hover{background:rgba(7,76,134,.07)}
.btn--blu{background:var(--blu); color:#fff}
.btn--blu:hover{background:#053a68}
.btn-riga{display:flex; flex-wrap:wrap; gap:.8rem}
.btn .fr{font-size:1.15em; line-height:1}

/* ------------------------------------------------------------ intestazione */
.barra-top{background:var(--notte); color:var(--su-scuro); font-size:.86rem}
.barra-top .wrap{display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; align-items:center; justify-content:space-between; padding-block:.55rem}
.barra-top a{color:var(--su-scuro); text-decoration:none}
.barra-top a:hover{color:var(--verde-luce)}
.barra-top ul{display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; margin:0; padding:0; list-style:none}
.barra-top li{display:flex; align-items:center; gap:.45rem}
.ico{width:15px; height:15px; flex:0 0 auto; fill:none; stroke:var(--verde-luce); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
@media (max-width:700px){ .barra-top .wrap ul:first-child{display:none} }

.testata{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.96); backdrop-filter:blur(10px); border-bottom:1px solid var(--bordo)}
.testata .wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.6rem}
.marchio{display:flex; align-items:center; gap:.65rem; text-decoration:none; min-width:0; flex:0 1 auto}
.marchio img{height:52px; width:52px; flex:0 0 auto}
.marchio .nome{display:block; font-family:var(--display); font-weight:900; line-height:1.02; letter-spacing:-.02em; font-size:.98rem; text-transform:uppercase}
.marchio .nome .v{color:var(--verde)}
.marchio .nome .b{color:var(--blu)}
.marchio .paga{display:block; font-size:.58rem; letter-spacing:.1em; color:var(--grigio); font-weight:700; text-transform:uppercase; margin-top:.18rem; white-space:nowrap}
.marchio .nome{white-space:nowrap}
@media (max-width:1470px){ .marchio .paga{display:none} }
@media (max-width:620px){ .marchio .nome{font-size:.84rem} .marchio .paga{display:none} .marchio img{height:44px; width:44px} }
@media (max-width:360px){ .marchio .nome{display:none} }

.menu{display:flex; align-items:center; gap:.15rem; list-style:none; margin:0; padding:0}
.menu a{
  display:block; padding:.55rem .7rem; border-radius:8px; text-decoration:none; white-space:nowrap;
  color:var(--blu); font-weight:700; font-size:.9rem; letter-spacing:.005em;
  transition:color .15s ease, background-color .15s ease;
}
.menu a:hover{background:var(--neutro-2)}
.menu a[aria-current="page"]{color:var(--verde-t)}
.menu a[aria-current="page"]::after{content:""; display:block; height:2px; margin-top:3px; background:var(--grad); border-radius:2px}
.testata .btn{padding:.68rem 1.15rem; font-size:.87rem; white-space:nowrap}
@media (max-width:1120px){ .testata .btn{white-space:normal} }

.hamburger{display:none; background:none; border:0; color:var(--blu); padding:.5rem; cursor:pointer; border-radius:8px; flex:0 0 auto}
.hamburger:focus-visible{outline:3px solid var(--verde); outline-offset:2px}
.hamburger svg{display:block}

@media (max-width:1220px){
  .hamburger{display:block}
  .nav-collassabile{
    position:absolute; inset:100% 0 auto 0; background:#fff;
    border-bottom:1px solid var(--bordo); box-shadow:0 18px 30px -20px rgba(4,42,73,.4);
    padding:1rem clamp(1.1rem,4vw,2rem) 1.5rem;
    display:none; flex-direction:column; gap:1rem;
  }
  .nav-collassabile.aperto{display:flex}
  .menu{flex-direction:column; align-items:stretch; gap:.15rem}
  .menu a{padding:.8rem .9rem; font-size:1.05rem}
  .menu a[aria-current="page"]::after{display:none}
  .testata .wrap{position:relative}
}
@media (min-width:1221px){
  .nav-collassabile{display:flex !important; align-items:center; gap:1.1rem}
  /* il marchio non si stringe: il payoff è a riga unica e, se il blocco
     si restringe, finisce sotto le voci di menu */
  .marchio{flex:0 0 auto}
}

/* -------------------------------------------------------------------- hero */
.hero{position:relative; background:var(--notte); color:#fff; overflow:hidden; isolation:isolate}
.hero::before{
  content:""; position:absolute; inset:-30% -10% auto -20%; height:150%;
  background:radial-gradient(56% 46% at 18% 30%, rgba(107,166,53,.34), transparent 68%),
             radial-gradient(50% 46% at 84% 16%, rgba(43,129,196,.34), transparent 70%);
  z-index:-1;
}
.hero .wrap{
  display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(2rem,5vw,4.5rem);
  align-items:center; padding-block:clamp(3rem,7vw,6rem);
}
@media (max-width:900px){ .hero .wrap{grid-template-columns:1fr; padding-block:3rem} }

.hero h1{margin-bottom:.55rem; color:#fff}
.hero .evidenza{
  background:var(--grad-luce); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-occhiello{
  display:inline-flex; align-items:center; gap:.55rem; margin-bottom:1.4rem;
  padding:.42rem .95rem; border:1px solid rgba(255,255,255,.28); border-radius:999px;
  font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#e6f0f6;
}
.hero-occhiello .punto{width:8px; height:8px; border-radius:50%; background:var(--verde-luce); flex:0 0 auto}
.hero-testo{font-size:clamp(1.05rem,1rem + .4vw,1.28rem); color:var(--su-scuro); max-width:52ch; margin-bottom:1.9rem}
.hero .btn-riga{margin-bottom:2.2rem}

.hero-prove{display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; list-style:none; margin:0; padding:0; font-size:.92rem; color:var(--su-scuro)}
.hero-prove li{display:flex; align-items:center; gap:.5rem}
.hero-prove .spunta{color:var(--verde-luce); font-weight:900}

.hero-foto{position:relative; margin:0}
.hero-foto img{border-radius:var(--r); box-shadow:0 30px 60px -30px rgba(0,0,0,.75)}
.hero-foto figcaption{margin-top:.85rem; font-size:.86rem; color:var(--su-scuro-2); line-height:1.5}
.hero-bollino{
  position:absolute; right:-14px; bottom:70px; background:#fff; color:var(--blu);
  border-radius:12px; padding:.8rem 1.1rem; box-shadow:0 18px 34px -16px rgba(0,0,0,.6);
  max-width:210px; border-left:5px solid var(--verde);
}
.hero-bollino b{display:block; font-family:var(--display); font-size:1.55rem; line-height:1; letter-spacing:-.025em; color:var(--blu)}
.hero-bollino span{font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--grigio)}
@media (max-width:560px){ .hero-bollino{position:static; margin-top:1rem; max-width:none} }

/* ------------------------------------------------------------ barra numeri */
.numeri{background:var(--notte-2)}
.numeri .wrap{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1.5rem; padding-block:2.4rem}
.numero b{display:block; font-family:var(--display); font-weight:900; font-size:clamp(1.9rem,1.4rem + 1.9vw,2.7rem);
  letter-spacing:-.03em; color:var(--verde-luce)}
.numero span{display:block; color:var(--su-scuro); font-size:.9rem; line-height:1.45; margin-top:.2rem}

/* ------------------------------------------------------------------ griglie */
.griglia{display:grid; gap:var(--gap)}
.g-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g-3{grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.g-4{grid-template-columns:repeat(auto-fit,minmax(228px,1fr))}

.scheda{
  background:#fff; border:1px solid var(--bordo); border-radius:var(--r); padding:1.7rem;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.scheda:hover{transform:translateY(-4px); box-shadow:var(--ombra); border-color:#bfd0da}
.scheda h3{margin-bottom:.45rem}
.scheda p{color:var(--grigio); font-size:.98rem}
.scheda .num{
  font-family:var(--display); font-weight:900; font-size:.85rem; letter-spacing:.1em;
  color:var(--verde-t); display:block; margin-bottom:.7rem;
}
.sezione--scura .scheda{background:var(--notte-2); border-color:var(--notte-3)}
.sezione--scura .scheda p{color:var(--su-scuro)}
.sezione--scura .scheda .num{color:var(--verde-luce)}
.sezione--scura .scheda:hover{border-color:var(--verde)}

.icona{
  width:52px; height:52px; border-radius:13px; background:var(--grad);
  display:grid; place-items:center; margin-bottom:1.1rem; flex:0 0 auto;
}
.icona svg{width:26px; height:26px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* ------------------------------------------------------- problema / rimedio */
.problema{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:var(--gap)}
.colonna-p{border-radius:var(--r); padding:1.8rem; border:1px solid var(--bordo); background:#fff}
.colonna-p--male{border-left:5px solid var(--ko)}
.colonna-p--bene{border-left:5px solid var(--verde)}
.colonna-p h3{font-size:1.15rem}
.colonna-p ul{list-style:none; margin:0; padding:0; display:grid; gap:.85rem}
.colonna-p li{display:flex; gap:.7rem; align-items:flex-start; font-size:.98rem; color:#37474f}
.colonna-p .segno{font-weight:900; flex:0 0 auto; line-height:1.5}
.colonna-p--male .segno{color:var(--ko)}
.colonna-p--bene .segno{color:var(--verde-t)}

/* -------------------------------------------------------------- servizi img */
.servizio{border-radius:var(--r); overflow:hidden; background:#fff; border:1px solid var(--bordo); display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease}
.servizio:hover{transform:translateY(-4px); box-shadow:var(--ombra)}
.servizio img{aspect-ratio:16/10; object-fit:cover; width:100%}
.servizio .corpo{padding:1.5rem; display:flex; flex-direction:column; gap:.5rem; flex:1}
.servizio h3{margin:0}
.servizio p{color:var(--grigio); font-size:.97rem; margin:0}
.servizio .approfondisci{
  margin-top:auto; padding-top:.9rem; font-weight:800; font-size:.9rem; color:var(--verde-t);
  text-decoration:none; display:inline-flex; gap:.4rem; align-items:center;
}
.servizio .approfondisci:hover{gap:.7rem}

/* --------------------------------------------------------------- citazioni */
.muro{columns:3 288px; column-gap:1.2rem}
.citazione{
  break-inside:avoid; background:#fff; border:1px solid var(--bordo); border-radius:var(--r);
  padding:1.35rem 1.45rem; margin-bottom:1.2rem;
}
.citazione p{font-size:.98rem; color:#2b3a44; margin-bottom:.9rem}
.citazione footer{display:flex; align-items:center; gap:.65rem; font-size:.86rem; color:var(--grigio)}
.citazione .iniziale{
  width:34px; height:34px; border-radius:50%; background:var(--grad); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:.9rem; flex:0 0 auto;
}
.citazione cite{font-style:normal; font-weight:700; color:var(--blu)}
.citazione--forte{background:var(--notte); border-color:var(--notte)}
.citazione--forte p{color:#eef5f9; font-size:1.06rem}
.citazione--forte cite{color:#fff}
.citazione--forte footer{color:var(--su-scuro-2)}

/* -------------------------------------------------------------------- form */
.modulo{display:grid; gap:1.05rem}
.campo{display:grid; gap:.4rem}
.campo label{font-weight:700; font-size:.9rem; color:var(--blu)}
.campo .aiuto{font-size:.82rem; color:var(--grigio); font-weight:400}
.campo input,.campo textarea,.campo select{
  font:inherit; font-size:1rem; padding:.85rem 1rem; border:1.5px solid var(--bordo);
  border-radius:10px; background:#fff; color:var(--testo-scuro); width:100%;
}
.campo textarea{min-height:140px; resize:vertical}
.campo input:focus,.campo textarea:focus,.campo select:focus{
  outline:none; border-color:var(--verde); box-shadow:0 0 0 3px rgba(107,166,53,.22);
}
.campo-2{display:grid; grid-template-columns:1fr 1fr; gap:1.05rem}
@media (max-width:600px){ .campo-2{grid-template-columns:1fr} }
.consenso{display:flex; gap:.7rem; align-items:flex-start; font-size:.88rem; color:var(--grigio); line-height:1.5}
.consenso input{width:20px; height:20px; margin-top:.15rem; flex:0 0 auto; accent-color:var(--verde)}
.nota-privacy{font-size:.84rem; color:var(--grigio); border-left:3px solid var(--verde); padding-left:.9rem}

.riquadro-contatti{background:var(--notte); color:#fff; border-radius:var(--r); padding:1.9rem; height:fit-content}
.riquadro-contatti h3{color:#fff}
.riquadro-contatti dl{margin:0; display:grid; gap:1.2rem}
.riquadro-contatti dt{font-size:.76rem; text-transform:uppercase; letter-spacing:.12em; color:var(--verde-luce); font-weight:800; margin-bottom:.25rem}
.riquadro-contatti dd{margin:0; font-size:1.02rem; line-height:1.5; color:#eaf2f7}
.riquadro-contatti a{color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35)}
.riquadro-contatti a:hover{border-color:var(--verde-luce); color:var(--verde-luce)}

/* ------------------------------------------------------------------- blog */
.articolo-card{background:#fff; border:1px solid var(--bordo); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease}
.articolo-card:hover{transform:translateY(-4px); box-shadow:var(--ombra)}
.articolo-card .corpo{padding:1.5rem; display:flex; flex-direction:column; gap:.55rem; flex:1}
.articolo-card h3{margin:0; font-size:1.22rem}
.articolo-card h3 a{text-decoration:none}
.articolo-card h3 a:hover{color:var(--verde-t)}
.meta{font-size:.8rem; color:var(--grigio-c); text-transform:uppercase; letter-spacing:.08em; font-weight:700}
.etichetta{display:inline-block; background:var(--neutro-2); color:var(--verde-t); border-radius:999px; padding:.25rem .75rem; font-size:.76rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; width:fit-content}

.prosa{max-width:70ch}
.prosa h2{margin-top:2.4rem; font-size:clamp(1.5rem,1.25rem + 1vw,2rem)}
.prosa h3{margin-top:1.8rem}
.prosa ul,.prosa ol{padding-left:1.3rem; display:grid; gap:.6rem; margin-bottom:1.3rem}
.prosa li{padding-left:.2rem}
.prosa blockquote{margin:1.8rem 0; padding:1.1rem 1.4rem; border-left:4px solid var(--verde); background:var(--neutro); border-radius:0 10px 10px 0}
.prosa blockquote p{margin:0; font-size:1.02rem}
.prosa a{color:var(--verde-t); font-weight:600}
.prosa mark{background:#fff3cd; padding:.1em .35em; border-radius:4px}

/* -------------------------------------------------------------- richiamo */
.richiamo{background:var(--grad); color:#fff; border-radius:var(--r); padding:clamp(2rem,4vw,3.2rem); text-align:center}
.richiamo h2{color:#fff; margin-bottom:.6rem}
.richiamo p{max-width:56ch; margin-inline:auto; margin-bottom:1.6rem; font-size:1.06rem; opacity:.97}
.richiamo .btn--blu{background:#fff; color:var(--blu)}
.richiamo .btn--blu:hover{background:var(--neutro)}
.richiamo .btn--fantasma{border-color:rgba(255,255,255,.8); color:#fff}

/* --------------------------------------------------------------- briciole */
.briciole{background:var(--neutro); color:var(--grigio); font-size:.85rem; padding-block:.85rem; border-bottom:1px solid var(--bordo)}
.briciole ol{display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; margin:0; padding:0}
.briciole a{color:var(--blu); text-decoration:none}
.briciole a:hover{color:var(--verde-t)}
.briciole li+li::before{content:"›"; margin-right:.5rem; color:var(--grigio-c)}

.intestazione-pagina{background:var(--notte); color:#fff; padding-block:clamp(2.6rem,5vw,4.2rem)}
.intestazione-pagina h1{color:#fff}
.intestazione-pagina p{color:var(--su-scuro); max-width:62ch; margin:0}

/* ------------------------------------------------------------------- piede */
.piede{background:var(--notte); color:var(--su-scuro); padding-top:clamp(2.8rem,5vw,4rem)}
.piede .colonne{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:2rem}
@media (max-width:860px){ .piede .colonne{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} }
.piede h4{color:#fff; font-size:.82rem; text-transform:uppercase; letter-spacing:.13em; margin-bottom:1.1rem}
.piede ul{list-style:none; margin:0; padding:0; display:grid; gap:.6rem; font-size:.93rem}
.piede a{color:var(--su-scuro); text-decoration:none}
.piede a:hover{color:var(--verde-luce)}
.piede .logo-piede{background:#fff; border-radius:10px; padding:.6rem .8rem; width:fit-content; max-width:230px; margin-bottom:1rem}
.piede .chiusura{
  margin-top:2.6rem; border-top:1px solid var(--notte-3); padding-block:1.4rem;
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; justify-content:space-between;
  font-size:.83rem; color:var(--su-scuro-2);
}
.piede .chiusura a{color:var(--su-scuro-2)}

/* accessibilità */
.salta{position:absolute; left:-9999px; top:0; background:var(--verde); color:#fff; padding:.8rem 1.2rem; font-weight:800; z-index:200; border-radius:0 0 8px 0}
.salta:focus{left:0}
:focus-visible{outline:3px solid var(--verde); outline-offset:2px; border-radius:4px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ==========================================================================
   SIMULATORE DELLA BOLLETTA  (pagina simulatore-bolletta.html)
   Nessun grafico esterno: le barre di confronto sono div, i colori sono
   quelli del marchio. Verde = luce, blu = gas, rosso = quello che paghi in più.
   ========================================================================== */

/* Le classi qui sotto usano display:grid o :flex, che vincono sull'attributo
   hidden: senza questa riga i pannelli nascosti resterebbero a video. */
[hidden]{display:none !important}

/* --- guida e fonte dei dati --- */
.sim-guida{display:grid; grid-template-columns:1.5fr .9fr; gap:clamp(1.5rem,4vw,3rem); align-items:start}
@media (max-width:900px){ .sim-guida{grid-template-columns:1fr} }
.sim-passi{list-style:none; margin:1.6rem 0 0; padding:0; display:grid; gap:1rem}
.sim-passi li{display:flex; gap:.9rem; align-items:flex-start}
.sim-passi > li > b{
  flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:var(--grad); color:#fff;
  display:grid; place-items:center; font-family:var(--display); font-size:.95rem;
}
.sim-passi span{color:var(--grigio); font-size:.98rem}

.sim-fonte{background:var(--neutro); border:1px solid var(--bordo); border-radius:var(--r); padding:1.5rem}
.sim-fonte h3{font-size:1.05rem; margin-bottom:1rem}
.sim-fonte dl{margin:0; display:grid; gap:.9rem}
.sim-fonte dt{font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--verde-t); font-weight:800}
.sim-fonte dd{margin:0; font-size:.93rem; color:var(--grigio); line-height:1.45}
.sim-fonte dd b{color:var(--blu)}
.sim-fonte p{margin:1.2rem 0 0; font-size:.85rem; color:var(--grigio-c)}
.sim-fonte a{color:var(--verde-t); font-weight:600}

/* --- scatola del modulo --- */
.sim-scatola{background:#fff; border:1px solid var(--bordo); border-radius:var(--r); box-shadow:var(--ombra); overflow:hidden}
.sim-schede{display:flex; border-bottom:1px solid var(--bordo); background:var(--neutro)}
.sim-schede button{
  flex:1 1 0; display:flex; align-items:center; justify-content:center; gap:.6rem;
  background:none; border:0; border-bottom:3px solid transparent; cursor:pointer;
  font-family:var(--display); font-weight:800; font-size:1rem; color:var(--grigio);
  padding:1.1rem .8rem; transition:color .16s ease, background-color .16s ease;
}
.sim-schede button svg{fill:currentColor}
.sim-schede button:hover{background:var(--neutro-2); color:var(--blu)}
.sim-schede button[aria-selected="true"]{background:#fff; color:var(--blu); border-bottom-color:var(--verde)}
.sim-schede button[aria-selected="true"] svg{color:var(--verde)}

.sim-pannello{padding:clamp(1.4rem,3.5vw,2.4rem); display:grid; gap:1.4rem}
.sim-campi{display:grid; grid-template-columns:1fr 1fr; gap:1.3rem}
.sim-campi--3{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
@media (max-width:680px){ .sim-campi{grid-template-columns:1fr} }

.sim-unita{position:relative; display:flex; align-items:center}
.sim-unita input{
  width:100%; padding:.95rem 4.2rem .95rem 1rem; border:2px solid var(--bordo); border-radius:10px;
  font:inherit; font-size:1.35rem; font-weight:800; font-family:var(--display); color:var(--blu);
  background:#fff; letter-spacing:-.02em;
}
.sim-unita input:focus{outline:0; border-color:var(--verde)}
.sim-unita span{
  position:absolute; right:1rem; font-weight:800; font-size:.92rem; color:var(--grigio-c);
  pointer-events:none; text-transform:none;
}
.sim-pannello select{
  width:100%; padding:.7rem .9rem; border:2px solid var(--bordo); border-radius:10px;
  font:inherit; font-size:.95rem; background:#fff; color:var(--testo-scuro);
}
.sim-pannello select:focus{outline:0; border-color:var(--verde)}
.sim-pannello .campo{gap:.55rem}

.sim-link{
  background:none; border:0; padding:0; text-align:left; cursor:pointer; width:fit-content;
  font-size:.87rem; font-weight:700; color:var(--verde-t); text-decoration:underline;
  text-underline-offset:3px;
}
.sim-link:hover{color:var(--blu)}
.sim-eco{margin:0; font-size:.85rem; color:var(--grigio); background:var(--neutro); padding:.6rem .8rem; border-radius:8px; border-left:3px solid var(--verde)}

.sim-stima{background:var(--neutro); border:1px solid var(--bordo); border-radius:12px; padding:1.4rem; display:grid; gap:1rem}
.sim-stima h4{margin:0; font-size:1.05rem}
.sim-stima > p{margin:0; font-size:.9rem; color:var(--grigio)}
.sim-spunte{border:0; margin:0; padding:0; display:grid; gap:.55rem; align-content:start}
.sim-spunte legend{font-weight:700; font-size:.9rem; color:var(--blu); padding:0; margin-bottom:.35rem}
.sim-spunte label{display:flex; gap:.6rem; align-items:center; font-size:.92rem; color:#37474f; cursor:pointer}
.sim-spunte input{width:19px; height:19px; accent-color:var(--verde); flex:0 0 auto}

.sim-avanzate{border:1px solid var(--bordo); border-radius:12px; padding:0 1.2rem}
.sim-avanzate summary{cursor:pointer; font-weight:700; font-size:.93rem; color:var(--blu); padding:1rem 0; list-style-position:inside}
.sim-avanzate summary:hover{color:var(--verde-t)}
.sim-avanzate[open] summary{border-bottom:1px solid var(--bordo); margin-bottom:1.2rem}
.sim-avanzate > *:last-child{margin-bottom:1.2rem}

.sim-invio{display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.4rem}
.sim-invio .btn{font-size:1.02rem; padding:1.05rem 2rem}
.sim-invio p{margin:0; font-size:.84rem; color:var(--grigio-c)}

.sim-errore{
  margin:0; padding:1rem 1.2rem; background:#fdecea; border-left:4px solid var(--ko);
  color:#8c2c22; font-size:.94rem; line-height:1.55;
}

/* --- risultato --- */
.sim-risultato{margin-top:2.2rem; display:grid; gap:1.6rem}
.sim-esito{border-radius:var(--r); padding:clamp(1.5rem,3.5vw,2.4rem); color:#fff; background:var(--notte)}
.sim-esito--male{background:linear-gradient(100deg,#b3382a 0%,#8c2c22 100%)}
.sim-esito--medio{background:linear-gradient(100deg,var(--blu) 0%,var(--notte) 100%)}
.sim-esito--bene{background:var(--grad)}
.sim-esito__occhiello{display:block; font-size:.74rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; opacity:.85; margin-bottom:.5rem}
.sim-esito h3{color:#fff; font-size:clamp(1.5rem,1.2rem + 1.8vw,2.4rem); margin-bottom:.5rem}
.sim-esito p{margin:0; opacity:.95; max-width:60ch}

.sim-confronto{background:#fff; border:1px solid var(--bordo); border-radius:var(--r); padding:clamp(1.3rem,3vw,2rem)}
.sim-confronto h4{font-size:1.1rem; margin-bottom:1.4rem}
.sim-barra + .sim-barra{margin-top:1.2rem}
.sim-barra__testa{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:.4rem}
.sim-barra__testa span{font-size:.94rem; color:var(--grigio); font-weight:600}
.sim-barra__testa b{font-family:var(--display); font-size:1.25rem; color:var(--blu); letter-spacing:-.02em}
.sim-barra__pista{height:14px; background:var(--neutro-2); border-radius:999px; overflow:hidden}
.sim-barra__pista span{display:block; height:100%; border-radius:999px; background:var(--grigio-c); transition:width .5s ease}
.sim-barra--tua .sim-barra__pista span{background:linear-gradient(90deg,#c0392b,#e05a49)}
.sim-barra--tua .sim-barra__testa b{color:#b3382a}
.sim-barra--tutela .sim-barra__pista span{background:var(--grad)}
.sim-barra--mercato .sim-barra__pista span{background:var(--blu-luce)}
.sim-barra__nota{margin:.4rem 0 0; font-size:.82rem; color:var(--grigio-c)}

.sim-due{display:grid; grid-template-columns:1.25fr .85fr; gap:1.6rem; align-items:start}
@media (max-width:860px){ .sim-due{grid-template-columns:1fr} }

.sim-tabella{width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--bordo); border-radius:var(--r); overflow:hidden}
.sim-tabella caption{text-align:left; font-family:var(--display); font-weight:900; color:var(--blu); font-size:1.1rem; padding:1.1rem 1.2rem .6rem; caption-side:top}
.sim-tabella th,.sim-tabella td{padding:.85rem 1.2rem; text-align:left; font-size:.95rem; border-top:1px solid var(--bordo)}
.sim-tabella th{font-weight:700; color:var(--testo-scuro)}
.sim-tabella td{text-align:right; font-family:var(--display); font-weight:800; color:var(--blu); white-space:nowrap}
.sim-tabella .sim-quota{color:var(--grigio-c); font-weight:700; width:4.5rem}
.sim-tabella tfoot th,.sim-tabella tfoot td{background:var(--neutro); border-top:2px solid var(--bordo)}
.sim-tag{display:block; font-size:.75rem; font-weight:600; color:var(--grigio-c); text-transform:uppercase; letter-spacing:.06em; margin-top:.15rem}
.sim-tabella tbody tr:first-child .sim-tag{color:var(--verde-t)}

.sim-chiave{background:var(--notte); color:#fff; border-radius:var(--r); padding:1.6rem}
.sim-chiave h4{color:#fff; font-size:1.02rem; margin-bottom:.6rem}
.sim-chiave__numero{font-family:var(--display); font-weight:900; font-size:2.6rem; line-height:1; letter-spacing:-.03em; color:var(--verde-luce); margin:0 0 1.1rem}
.sim-chiave__numero span{font-size:1rem; font-weight:700; color:var(--su-scuro-2); letter-spacing:0}
.sim-chiave ul{list-style:none; margin:0 0 1rem; padding:0; display:grid; gap:.55rem; font-size:.92rem; color:var(--su-scuro)}
.sim-chiave ul b{color:#fff; font-family:var(--display)}
.sim-chiave__nota{margin:0; font-size:.83rem; color:var(--su-scuro-2); border-top:1px solid var(--notte-3); padding-top:.9rem}

.sim-diagnosi{background:#fff; border:1px solid var(--bordo); border-radius:var(--r); padding:clamp(1.3rem,3vw,2rem)}
.sim-diagnosi h4{font-size:1.1rem; margin-bottom:1.1rem}
.sim-diagnosi ul{list-style:none; margin:0; padding:0; display:grid; gap:.9rem}
.sim-nota{display:flex; gap:.85rem; align-items:flex-start; font-size:.97rem; line-height:1.6; color:#37474f}
.sim-nota > span{flex:0 0 auto; width:22px; height:22px; border-radius:50%; margin-top:.15rem; display:grid; place-items:center; font-weight:900; font-size:.8rem; color:#fff}
.sim-nota--ko > span{background:var(--ko)}
.sim-nota--ko > span::before{content:"!"}
.sim-nota--attenzione > span{background:#e8a020}
.sim-nota--attenzione > span::before{content:"!"}
.sim-nota--ok > span{background:var(--verde)}
.sim-nota--ok > span::before{content:"✓"}
.sim-nota--nota > span{background:var(--blu-luce)}
.sim-nota--nota > span::before{content:"i"}

.sim-azione{background:var(--neutro); border:1px solid var(--bordo); border-radius:var(--r); padding:clamp(1.4rem,3vw,2.2rem)}
.sim-azione h4{font-size:1.25rem; margin-bottom:.6rem}
.sim-azione p{color:var(--grigio); max-width:62ch}
.sim-azione .btn-riga{margin-top:1.4rem}
.sim-azione__nota{font-size:.84rem; color:var(--grigio-c); margin-top:1.1rem}

/* --- modulo di contatto sotto il risultato --- */
.sim-contatto{
  margin-top:1.6rem; display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(1.5rem,4vw,3rem);
  background:#fff; border:2px solid var(--verde); border-radius:var(--r);
  padding:clamp(1.5rem,3.5vw,2.6rem);
}
@media (max-width:820px){ .sim-contatto{grid-template-columns:1fr} }
.sim-contatto h3{font-size:clamp(1.3rem,1.15rem + .8vw,1.8rem)}
.sim-contatto__testo p{color:var(--grigio)}
.sim-contatto__punti{list-style:none; margin:1.2rem 0 0; padding:0; display:grid; gap:.6rem; font-size:.93rem; color:#37474f}
.sim-contatto__punti li{display:flex; gap:.6rem; align-items:center}
.sim-contatto__punti span{color:var(--verde-t); font-weight:900}
.sim-contatto textarea{min-height:190px; font-size:.93rem}
.sim-modulo-esito{margin:0; padding:.9rem 1.1rem; border-radius:10px; font-size:.93rem; background:var(--neutro); color:var(--grigio)}
.sim-modulo-esito--bene{background:#e7f4ea; color:#1e5c30; border-left:4px solid var(--verde)}
.sim-modulo-esito--male{background:#fdecea; color:#8c2c22; border-left:4px solid var(--ko)}

.sim-faq h3{font-size:1.12rem; margin-top:1.8rem}
.sim-faq h3:first-child{margin-top:0}
.sim-faq p{font-size:.97rem; color:#37474f}
.sim-spunta-riga{display:flex; gap:.6rem; align-items:center; font-size:.87rem; color:var(--grigio); cursor:pointer}
.sim-spunta-riga input{width:18px; height:18px; accent-color:var(--verde); flex:0 0 auto}
.sim-nota-piccola{margin:0; font-size:.85rem; color:var(--grigio-c); line-height:1.5}

/* --- invito al simulatore, in home --- */
.invito-sim{
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.5rem,4vw,3rem); align-items:center;
  background:var(--neutro); border:1px solid var(--bordo); border-radius:var(--r);
  padding:clamp(1.6rem,4vw,3rem);
}
@media (max-width:820px){ .invito-sim{grid-template-columns:1fr} }
.invito-sim p{color:var(--grigio); max-width:56ch}
.invito-sim ul{list-style:none; margin:1.3rem 0 0; padding:0; display:grid; gap:.5rem; font-size:.93rem; color:#37474f}
.invito-sim li{display:flex; gap:.6rem; align-items:center}
.invito-sim li span{color:var(--verde-t); font-weight:900}
.invito-sim__scheda{background:#fff; border:1px solid var(--bordo); border-radius:12px; padding:1.5rem; box-shadow:var(--ombra)}
.etichetta-sim{font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--grigio-c); margin:0 0 1rem}
.riga-sim{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:.35rem}
.riga-sim span{font-size:.85rem; color:var(--grigio)}
.riga-sim b{font-family:var(--display); font-size:1.15rem; color:var(--blu)}
.pista-sim{height:10px; background:var(--neutro-2); border-radius:999px; overflow:hidden; margin-bottom:1.1rem}
.pista-sim i{display:block; height:100%; border-radius:999px}
.esito-sim{margin:1.2rem 0 0 !important; padding-top:1.1rem; border-top:1px solid var(--bordo);
  font-family:var(--display); font-weight:800; color:var(--ko); font-size:1.02rem; line-height:1.35}