/* =========================================================
   EnergEtica CER — redesign mockup
   Palette di brand invariata (petrolio, lime, verde chiaro,
   grigio testo, bianco). Type: Fraunces (display) + Inter (UI).
   ========================================================= */

/* I @font-face stanno in assets/fonts.css (generato da build-fonts.ps1).
   Va caricato PRIMA di questo file. Vedi CLAUDE.md 18. */

:root{
  /* brand (invariata) */
  --petrol:#004c59;
  --lime:#9ac73c;
  --mint:#e5fac5;
  --ink:#5a5a5a;
  --white:#ffffff;

  /* tinte/ombre derivate dalla palette */
  --petrol-900:#00363f;
  --petrol-700:#0a5c6a;
  --petrol-050:#eef5f6;
  --lime-700:#7ba32b;
  --lime-600:#86b32f;
  --mint-050:#f3fbe6;
  --ink-strong:#243033;
  --line:#dfe7e4;
  --line-dark:rgba(255,255,255,.14);

  /* type */
  /* i "ripiego" vanno subito dopo il font vero: sono le stesse misure,
     così un eventuale ripiego non sposta il layout (vedi @font-face sopra) */
  --display:'Fraunces','Fraunces ripiego','Fraunces ripiego 2',Georgia,serif;
  --sans:'Hanken Grotesk','Hanken ripiego','Hanken ripiego 2','Segoe UI',Arial,sans-serif;

  /* misura */
  --maxw:1140px;
  --gutter:clamp(20px,5vw,48px);
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 18px 44px -24px rgba(0,54,63,.45);
  --shadow-sm:0 8px 22px -16px rgba(0,54,63,.4);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Riquadro che i browser mobili disegnano sotto il dito al tocco.
   Il valore di sistema e' un celeste che non c'entra nulla con la
   palette: qui diventa il lime del sito, tenuto trasparente perche'
   deve leggersi come un riflesso, non come uno sfondo pieno.
   Si eredita, quindi basta metterlo sulla radice. */
html{-webkit-tap-highlight-color:rgba(154,199,60,.35)}

body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--white);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;display:block}
a{color:var(--petrol);text-decoration-color:rgba(0,76,89,.3);text-underline-offset:3px}
a:hover{text-decoration-color:var(--lime)}

h1,h2,h3,h4{
  font-family:var(--display);
  color:var(--ink-strong);
  font-weight:560;
  line-height:1.12;
  letter-spacing:-.01em;
  margin:0 0 .5em;
}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
h3{font-size:clamp(1.2rem,2vw,1.45rem);line-height:1.2}
p{margin:0 0 1rem}

.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}

.eyebrow{
  font-family:var(--sans);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--petrol-700);
  display:inline-flex;align-items:center;gap:.55em;
  margin:0 0 .9rem;
}
.eyebrow::before{
  content:"";width:22px;height:2px;background:var(--lime);border-radius:2px;
}
.on-dark .eyebrow{color:var(--lime)}

/* ---------- skip link ---------- */
.skip{
  position:absolute;left:-999px;top:8px;z-index:200;
  background:var(--lime);color:var(--petrol-900);font-weight:700;
  padding:.6em 1em;border-radius:8px;
}
.skip:focus{left:8px}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  --_bg:var(--lime);--_fg:var(--petrol-900);
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--sans);font-weight:700;font-size:.98rem;
  padding:.82em 1.5em;border-radius:999px;border:2px solid transparent;
  background:var(--_bg);color:var(--_fg);cursor:pointer;
  text-decoration:none;line-height:1;
  transition:transform .15s ease,background .15s ease,box-shadow .15s ease;
}
.btn:hover{background:var(--lime-600);transform:translateY(-2px);box-shadow:0 10px 20px -12px rgba(0,54,63,.5)}
.btn:active{transform:translateY(0)}
.btn--ghost{background:transparent;color:var(--petrol);border-color:rgba(0,76,89,.28)}
.btn--ghost:hover{background:var(--petrol-050);border-color:var(--petrol);transform:translateY(-2px);box-shadow:none}
.on-dark .btn--ghost{color:#eaf6ff;border-color:rgba(255,255,255,.5)}
.on-dark .btn--ghost:hover{background:rgba(255,255,255,.08);border-color:#fff}
.btn--lg{padding:1em 1.9em;font-size:1.05rem}
.btn svg{width:1.05em;height:1.05em}

/* focus visibile ovunque */
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,summary:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--lime);outline-offset:2px;border-radius:6px;
}
.on-dark a:focus-visible,.on-dark button:focus-visible{outline-color:var(--lime)}

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header{
  position:sticky;top:0;z-index:200;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(150%) blur(12px);-webkit-backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--line);
  transition:transform .34s cubic-bezier(.4,0,.2,1),box-shadow .25s ease,background .25s ease;
  /* l'header trasla durante lo scorrimento: tenerlo su un proprio livello
     evita che il browser lo ridisegni insieme al resto della pagina */
  will-change:transform;
}
/* Da fermi in cima il fondo è all'86%: la sfocatura si vede e serve.
   Appena si scorre il fondo va al 96%, cioè praticamente opaco, e la
   sfocatura non si distingue più — ma continuerebbe a essere ricalcolata
   a ogni fotogramma su tutto ciò che passa sotto l'header (sulla home
   anche la scena animata). Qui la spegniamo: stesso aspetto, un lavoro
   pesante in meno per tutta la durata dello scorrimento. */
.site-header.is-stuck{background:rgba(255,255,255,.96);box-shadow:0 8px 30px -20px rgba(0,54,63,.5);
  backdrop-filter:none;-webkit-backdrop-filter:none}
.site-header.is-hidden{transform:translateY(-100%)}
.nav{max-width:var(--maxw);margin-inline:auto;padding:.7rem var(--gutter);display:flex;align-items:center;gap:1.1rem;transition:padding .28s ease}
.brand{display:flex;align-items:center;flex:0 0 auto;margin-right:auto;z-index:1}
.brand img{height:68px;width:auto;transition:height .28s ease}
.site-header.is-stuck .nav{padding-top:.45rem;padding-bottom:.45rem}
.site-header.is-stuck .brand img{height:56px}

.nav-collapse{order:2}
.nav-links{display:flex;align-items:center;gap:.1rem;list-style:none;margin:0;padding:0;
  --voce-pad:.5em .78em}
/* La tipografia delle voci sta sul <li>, non sull'<a>: così la eredita anche
   la copia nascosta in grassetto (li::before) senza doverla ripetere. */
.nav-links li{display:grid;font-family:var(--display);font-size:1.02rem;font-weight:500}
.nav-links li > a{grid-area:1/1}
.nav-links a{position:relative;color:var(--ink-strong);text-decoration:none;padding:var(--voce-pad);border-radius:8px;white-space:nowrap;text-align:center;transition:color .2s ease}
.nav-links a::after{content:"";position:absolute;left:.8em;right:.8em;bottom:.3em;height:2px;border-radius:2px;background:var(--lime);transform:scaleX(0);transform-origin:center;transition:transform .26s cubic-bezier(.4,0,.2,1)}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--petrol)}
.nav-links a:hover::after,.nav-links a:focus-visible::after{transform:scaleX(1)}
.nav-links a[aria-current="page"]{color:var(--petrol);font-weight:700}
.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
/* RISERVA DELLO SPAZIO DEL GRASSETTO — non toglierla.
   La voce della pagina attiva e' in grassetto, e il grassetto e' piu' largo.
   Il blocco del menu e' ancorato a destra (.brand ha margin-right:auto),
   quindi la voce grassetta allargava il blocco e spingeva a sinistra TUTTE
   le altre: cambiando pagina il menu "saltava" in orizzontale fino a 5px.
   Era lo scatto segnalato dal cliente (non era un'animazione).
   Qui ogni voce riserva sempre la larghezza della propria versione in
   grassetto, con una copia nascosta sovrapposta al link: la larghezza del
   menu e' identica su tutte le pagine (570,28px, misurata).
   Richiede data-text sul <li> in _partials/header.html.

   PERCHE' SUL <li> E NON SULL'<a>: la copia deve stare FUORI dal link.
   Un primo tentativo la metteva dentro l'<a>, con il testo avvolto in
   <span>: cosi' pero' il link perdeva il nome accessibile (verificato
   nell'albero di accessibilita': le voci comparivano senza etichetta).
   Con data-text sul <li> il link resta un semplice nodo di testo.
   Altro tentativo fallito: ::before con display:block dentro l'<a>.
   L'<a> e' inline (i flex item sono i <li>), un figlio di blocco spezza
   il box inline e il menu e' passato da 553 a 477px. */
.nav-links li::before{
  grid-area:1/1;content:attr(data-text);
  padding:var(--voce-pad);font-weight:700;white-space:nowrap;
  visibility:hidden;pointer-events:none;
}

.nav-cta{order:3;flex:0 0 auto;margin-left:.6rem;box-shadow:0 8px 20px -12px rgba(122,163,43,.9);transition:transform .2s ease,box-shadow .2s ease}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(122,163,43,1)}

.nav-toggle{display:none;flex:0 0 auto;width:46px;height:46px;border:1px solid var(--line);background:var(--white);border-radius:12px;cursor:pointer;padding:0;z-index:130;align-items:center;justify-content:center;color:var(--petrol);transition:background .2s,border-color .2s,color .2s}
.nav-toggle svg{width:24px;height:24px}
.nav-toggle .ic-close{display:none}
.nav-toggle[aria-expanded="true"] .ic-open{display:none}
.nav-toggle[aria-expanded="true"] .ic-close{display:block}

.nav-backdrop{position:fixed;inset:0;z-index:110;background:rgba(0,44,52,.5);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
.nav-backdrop.show{opacity:1;visibility:visible}
body.nav-open{overflow:hidden}

/* Soglia dell'hamburger: 1100px.
   Storia: era 1200, poi 1300 perché con OTTO voci di menu la nav
   richiedeva ~1272px contro i 1044 offerti dal container, e fra 1201
   e ~1290px il bottone "Associati" usciva dallo schermo.
   Con la riduzione a SEI voci (agosto 2026) la nav sta in 936px:
   rientra nel container e il bottone torna allineato alla griglia,
   quindi la soglia può scendere e il menu esteso resta disponibile
   anche sui portatili da 1280.
   Se cambi questo valore aggiorna anche il matchMedia in main.js. */
@media (max-width:1100px){
  .brand img{height:52px}
  .site-header.is-stuck .brand img{height:48px}
  .nav-toggle{display:inline-flex;order:3}
  .nav-cta{order:2;margin-left:auto;margin-right:.7rem}
  .nav-collapse{position:fixed;top:0;right:0;height:100dvh;width:min(87vw,360px);order:4;
    background:linear-gradient(180deg,var(--petrol),var(--petrol-900));
    opacity:0;visibility:hidden;transform:translateY(-12px);
    transition:opacity .3s ease,transform .34s cubic-bezier(.4,0,.2,1),visibility .34s;
    z-index:120;box-shadow:-24px 0 70px -34px rgba(0,0,0,.65);display:flex;padding:5.4rem 1.2rem 1.6rem}
  .nav-collapse.open{opacity:1;visibility:visible;transform:translateY(0)}
  .nav-collapse > div{width:100%;overflow-y:auto}
  .nav-links{flex-direction:column;align-items:stretch;gap:.15rem}
  /* nel pannello le voci occupano tutta la riga e il testo va a sinistra;
     la riserva del grassetto (li::before) segue da sola, perche' prende
     tipografia dal <li> e spaziatura da --voce-pad */
  .nav-links{--voce-pad:.9em .8em}
  .nav-links li{font-size:1.16rem;font-weight:600}
  .nav-links a{color:#eaf6dd;border-radius:12px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left}
  .nav-links a::after{display:none}
  .nav-links a:hover,.nav-links a:focus-visible{background:rgba(255,255,255,.1);color:#fff}
  .nav-links a[aria-current="page"]{background:transparent;color:#b6de5c;box-shadow:inset 3px 0 0 var(--lime)}
  .nav-collapse .nav-links li{opacity:0;transform:translateX(16px)}
  .nav-collapse.open .nav-links li{animation:navIn .42s cubic-bezier(.2,.7,.2,1) forwards}
  .nav-collapse.open .nav-links li:nth-child(1){animation-delay:.06s}
  .nav-collapse.open .nav-links li:nth-child(2){animation-delay:.11s}
  .nav-collapse.open .nav-links li:nth-child(3){animation-delay:.16s}
  .nav-collapse.open .nav-links li:nth-child(4){animation-delay:.21s}
  .nav-collapse.open .nav-links li:nth-child(5){animation-delay:.26s}
  .nav-collapse.open .nav-links li:nth-child(6){animation-delay:.31s}
  .nav-collapse.open .nav-links li:nth-child(7){animation-delay:.36s}
  .nav-collapse.open .nav-links li:nth-child(8){animation-delay:.41s}
  .nav-toggle[aria-expanded="true"]{color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28)}
}
@keyframes navIn{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .nav-collapse{transition:none}
  .nav-collapse.open .nav-links li{animation:none;opacity:1;transform:none}
  .site-header{transition:box-shadow .2s ease,background .2s ease}
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  background:
    radial-gradient(120% 90% at 90% -10%,rgba(154,199,60,.10),transparent 60%),
    var(--white);
  padding:clamp(2.2rem,5vw,4rem) 0 clamp(2rem,4vw,3.2rem);
}
.hero h1{
  font-size:clamp(2.4rem,6vw,4.05rem);
  line-height:1.02;margin:.2rem 0 .9rem;color:var(--petrol);
}
.hero h1 .accent{color:var(--lime-700);font-style:italic}
.hero .lede{font-size:1.16rem;max-width:34ch;color:var(--ink);margin-bottom:1.6rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1.2rem}
.hero-note{font-size:.9rem;color:var(--ink);display:flex;gap:.5em;align-items:flex-start;max-width:38ch}
.hero-note svg{flex:0 0 auto;width:1.1em;height:1.1em;color:var(--lime-700);margin-top:.15em}

/* rotazione condivisa: sole della scena hero e sole mobile.
   (era definita due volte, qui e più sotto nella sezione HOME) */
@keyframes spin{to{transform:rotate(360deg)}}

@media (max-width:820px){
  .hero .lede{max-width:none}
}

/* =========================================================
   METRICHE (count-up)
   ========================================================= */
.metrics{background:var(--petrol);color:#fff}
.metrics .container{padding-block:clamp(1.6rem,3vw,2.2rem)}
.metrics-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line-dark);border-radius:var(--radius);overflow:hidden;
}
.metric{background:var(--petrol);padding:1.5rem 1.4rem;position:relative}
.metric .num{
  font-family:var(--display);font-weight:600;
  font-size:clamp(2.1rem,4.4vw,3rem);line-height:1;color:#fff;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.metric .num .plus{color:var(--lime)}
.metric .label{margin-top:.5rem;font-size:.92rem;color:#c6ddd7;font-weight:500}
.metric.is-soon{background:#013e49}
.metric .tag{
  position:absolute;top:1rem;right:1rem;font-size:.66rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--petrol-900);
  background:var(--lime);padding:.28em .6em;border-radius:999px;
}
.metric.is-soon .num{color:#bfe08f}
@media (max-width:720px){
  .metrics-grid{grid-template-columns:1fr}
}

/* =========================================================
   SECTIONS
   ========================================================= */
section{scroll-margin-top:90px}
.sec{padding:clamp(2.8rem,6vw,4.6rem) 0}
.sec--mint{background:var(--mint-050)}
.sec--petrol{background:var(--petrol);color:#eaf6ee}
.sec--petrol h2,.sec--petrol h3{color:#fff}
.sec-head{max-width:62ch;margin-bottom:2rem}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head p{font-size:1.08rem}

/* grid utilities */
.grid{display:grid;gap:clamp(1rem,2.4vw,1.6rem)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

/* card */
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.6rem;box-shadow:var(--shadow-sm);
}
.card h3{margin-bottom:.4rem}
.card p:last-child{margin-bottom:0}
.card .ico{
  width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:var(--mint);color:var(--petrol);margin-bottom:1rem;
}
.card .ico svg{width:26px;height:26px}
.sec--petrol .card{background:var(--petrol-900);border-color:var(--line-dark);color:#d8ebe2}
.sec--petrol .card .ico{background:rgba(154,199,60,.16);color:var(--lime)}

/* pillar card accent */
.pillar{border-top:3px solid var(--lime)}

/* chips / list of aderenti */
.chips{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;padding:0;margin:0}
.chips li{
  background:var(--white);border:1px solid var(--line);border-radius:999px;
  padding:.55em 1.1em;font-weight:600;color:var(--petrol);font-size:.95rem;
}
.sec--petrol .chips li{background:rgba(255,255,255,.06);border-color:var(--line-dark);color:#eaf6ee}

/* "Chi può aderire" + "Quali impianti" affiancati (home) */
.who-what{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(1.6rem,4vw,3rem);align-items:start}
.who-what .col-title{font-size:1.15rem;color:var(--petrol);margin-bottom:1rem}
.who-what .who-note{font-size:.92rem;margin:1.1rem 0 0}
@media (max-width:820px){.who-what{grid-template-columns:1fr;gap:2.2rem}}

/* numbered steps */
.steps{counter-reset:step;display:grid;gap:1.1rem}
.steps.g-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){.steps.g-3{grid-template-columns:1fr}}
.step{
  position:relative;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.5rem 1.5rem 1.4rem;
}
.step::before{
  counter-increment:step;content:counter(step);
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;background:var(--petrol);color:#fff;
  font-family:var(--display);font-weight:600;font-size:1.1rem;margin-bottom:.9rem;
}
.step h3{font-size:1.15rem}

/* feature row w/ check */
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.ticks li{display:flex;gap:.7em;align-items:flex-start;font-weight:500;color:var(--ink-strong)}
.sec--petrol .ticks li{color:#eaf6ee}
.ticks svg{flex:0 0 auto;width:1.35em;height:1.35em;color:var(--lime-700);margin-top:.15em}
.sec--petrol .ticks svg{color:var(--lime)}

/* =========================================================
   CTA BAND
   ========================================================= */
.cta-band{
  background:linear-gradient(120deg,var(--petrol),var(--petrol-900));
  color:#fff;text-align:center;padding:clamp(2.6rem,5vw,4rem) 0;
}
.cta-band h2{color:#fff;margin-bottom:.5rem}
.cta-band p{max-width:52ch;margin-inline:auto;color:#cfe6df;font-size:1.1rem}
.cta-band .hero-actions{justify-content:center;margin-top:1.6rem}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{background:var(--petrol-900);color:#c3dbd4;padding:clamp(2.4rem,5vw,3.4rem) 0 1.6rem}
/* Una SOLA colonna di navigazione. Prima ce n'erano due, "Naviga" e
   "Community", e tre delle quattro voci della seconda erano già nella
   prima. Lo spazio liberato ospita l'invito ad associarsi. */
.footer-grid{display:grid;grid-template-columns:1.4fr 1.1fr 1.05fr;gap:2rem 2.4rem;margin-bottom:2rem}
.site-footer img.flogo{height:72px;width:auto;margin-bottom:1rem}
.site-footer address{font-style:normal;line-height:1.75;font-size:.95rem}
.site-footer address strong{color:#fff}
.site-footer a{color:#d8ebe2}
/* i titoli delle colonne sono <h2> (erano <h4>: saltavano un livello
   di intestazione su tutte le pagine, WCAG 1.3.1). L'aspetto non cambia. */
.footer-col h2{color:#fff;font-family:var(--sans);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;margin:0 0 .9rem;line-height:1.3}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
/* le 8 voci su due colonne: l'unica lista di navigazione non deve
   allungare il footer più delle altre colonne */
.footer-col ul.two-up{grid-template-columns:1fr 1fr;gap:.5rem 1.2rem}
/* WCAG 2.2 AA 2.5.8 (24x24 px): le voci del footer erano alte 20px e
   "Privacy Policy" 18. Non sono link dentro una frase, quindi l'eccezione
   per i link in linea non vale. L'area cliccabile sale a 24px senza
   cambiare l'aspetto del testo. */
.footer-col a{text-decoration:none;font-size:.95rem;display:inline-flex;align-items:center;min-height:24px}
.footer-col a:hover{color:var(--lime)}

/* blocco d'invito nello spazio lasciato libero dalla colonna doppione */
.footer-cta p{font-size:.95rem;color:#b6d2cb;margin:0 0 1rem;max-width:30ch}
.footer-cta .btn{font-size:.92rem;padding:.72em 1.35em}
.footer-cta .social{margin-top:1.4rem}

.social{display:flex;gap:.6rem;margin-top:.4rem}
.social a{
  width:40px;height:40px;border-radius:10px;border:1px solid var(--line-dark);
  display:flex;align-items:center;justify-content:center;color:#d8ebe2;
}
.social a:hover{background:rgba(154,199,60,.18);color:var(--lime);border-color:transparent}
.social svg{width:20px;height:20px}
.footer-base{
  border-top:1px solid var(--line-dark);padding-top:1.3rem;
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;
  font-size:.85rem;color:#9dbcb3;
}
.footer-base a{color:#9dbcb3;display:inline-flex;align-items:center;min-height:24px}
/* AA2 — il pulsante nel footer deve tenere il proprio colore:
   .site-footer a{color:#d8ebe2} lo sovrascriveva e il testo chiaro
   su fondo lime dava 1,59:1 invece dei 4,5 richiesti (ora 6,6:1). */
.site-footer .btn{color:var(--petrol-900)}
.site-footer .btn:hover{color:var(--petrol-900)}
/* Badge dei servizi ("Gratuito", "A pagamento -20%", "Per installatori"...).
   Il testo era color:var(--lime) sul proprio fondo verde chiarissimo: 1,98:1,
   ben sotto i 4,5 richiesti da WCAG 1.4.3. Il verde resta come tinta di
   fondo, che e' il segnale visivo; il testo passa al petrolio, che sullo
   stesso fondo da' oltre 9:1. Non rimettere il lime sul testo. */
.mock-badge{
  display:inline-flex;gap:.5em;align-items:center;
  background:rgba(154,199,60,.18);color:var(--petrol);
  border:1px solid rgba(122,163,43,.45);border-radius:999px;
  padding:.3em .8em;font-size:.78rem;font-weight:700;
}
@media (max-width:820px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-col.wide{grid-column:1/-1}
}
@media (max-width:520px){
  .footer-grid{grid-template-columns:1fr}
  .footer-col ul.two-up{grid-template-columns:1fr 1fr}
}

/* =========================================================
   ACCORDION (FAQ)
   ========================================================= */
.accordion{display:grid;gap:.7rem;max-width:820px;margin-inline:auto}
.acc-item{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--white);overflow:hidden}
.acc-item summary{
  list-style:none;cursor:pointer;padding:1.15rem 1.3rem;
  font-family:var(--display);font-weight:560;font-size:1.1rem;color:var(--ink-strong);
  display:flex;align-items:center;gap:1rem;
}
.acc-item summary::-webkit-details-marker{display:none}
/* A4 — la domanda è un <h3> vero (navigabile per titoli dagli screen
   reader) ma resta identica a vedersi: eredita tutto dal summary. */
.acc-item summary .q{flex:1;font:inherit;color:inherit;margin:0;letter-spacing:inherit;line-height:inherit}
/* titolo dei gruppi di domande */
.faq-gruppo{margin-bottom:2.2rem}
.faq-gruppo > h2{font-size:clamp(1.25rem,2.4vw,1.6rem);max-width:820px;margin:0 auto .9rem;padding-left:.1rem}
.faq-gruppo + .faq-gruppo{margin-top:2.6rem}
.acc-item summary .plus{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  background:var(--mint);color:var(--petrol);position:relative;transition:transform .25s ease;
}
.acc-item summary .plus::before,.acc-item summary .plus::after{
  content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;
  background:var(--petrol);border-radius:2px;
}
.acc-item summary .plus::before{width:12px;height:2px}
.acc-item summary .plus::after{width:2px;height:12px;transition:transform .25s ease}
.acc-item[open] summary .plus::after{transform:scaleY(0)}
.acc-item[open] summary{color:var(--petrol)}
.acc-body{padding:0 1.3rem 1.3rem;color:var(--ink)}
.acc-body p:last-child{margin-bottom:0}
@media (prefers-reduced-motion:reduce){.acc-item summary .plus,.acc-item summary .plus::after{transition:none}}

/* =========================================================
   ARTICLES / TESTIMONI
   ========================================================= */
.article-list{display:grid;gap:1rem}
.article{
  display:flex;gap:1.1rem;align-items:flex-start;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem 1.4rem;
  box-shadow:var(--shadow-sm);
}
.article .src{
  flex:0 0 auto;width:52px;height:52px;border-radius:12px;background:var(--mint);
  display:flex;align-items:center;justify-content:center;color:var(--petrol);font-weight:800;
}
/* la colonna centrale deve poter rimpicciolire: senza min-width:0 il testo
   impone la sua larghezza minima e a 320px la scheda sfora il container */
.article > div{min-width:0;flex:1 1 auto}
.article h3{font-size:1.12rem;margin-bottom:.3rem;overflow-wrap:anywhere}
.article p{margin:0;font-size:.95rem}
.article a.read{font-weight:700;text-decoration:none;color:var(--petrol);white-space:nowrap}
/* su schermi molto stretti "Leggi →" va a capo sotto invece di stringere il testo */
@media (max-width:400px){
  .article{flex-wrap:wrap;gap:.8rem 1.1rem}
  .article a.read{margin-left:calc(52px + 1.1rem)}
}

/* =========================================================
   DOCS (statuto)
   ========================================================= */
.doc-list{display:grid;gap:.8rem}
.doc{
  display:flex;align-items:center;gap:1rem;padding:1.1rem 1.3rem;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius-sm);text-decoration:none;color:var(--ink-strong);
  transition:border-color .15s ease,transform .15s ease;
}
.doc:hover{border-color:var(--lime);transform:translateX(3px)}
.doc .fic{flex:0 0 auto;width:42px;height:42px;border-radius:10px;background:var(--mint);color:var(--petrol);display:flex;align-items:center;justify-content:center}
.doc b{display:block}
.doc small{color:var(--ink)}
.doc .ext{margin-left:auto;font-size:.75rem;font-weight:700;color:var(--petrol);border:1px solid var(--line);border-radius:6px;padding:.2em .5em;display:inline-flex;align-items:center;gap:.4em;white-space:nowrap}
/* freccetta "si apre in una nuova scheda" */
.doc .ext-ico{width:.95em;height:.95em;flex:0 0 auto;opacity:.75}
.doc:hover .ext{border-color:var(--lime);color:var(--lime-700)}

/* =========================================================
   FORM (associarsi / contatti)
   ========================================================= */
.form-wrap{max-width:720px;margin-inline:auto}
.stepper{display:flex;gap:.5rem;margin-bottom:2rem;list-style:none;padding:0;counter-reset:s}
.stepper li{
  flex:1;display:flex;flex-direction:column;gap:.5rem;font-size:.82rem;font-weight:600;color:var(--ink);
  text-align:center;
}
.stepper li .dot{
  height:6px;border-radius:6px;background:var(--line);transition:background .2s ease;
}
.stepper li.active{color:var(--petrol)}
.stepper li.active .dot,.stepper li.done .dot{background:var(--lime)}
.field{margin-bottom:1.15rem}
.field label{display:block;font-weight:600;color:var(--ink-strong);margin-bottom:.35rem;font-size:.95rem}
.field .req{color:var(--lime-700)}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--ink-strong);
  padding:.8em .9em;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  background:var(--white);transition:border-color .15s ease,box-shadow .15s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--petrol);box-shadow:0 0 0 3px rgba(0,76,89,.12);outline:none;
}
.field textarea{min-height:130px;resize:vertical}
.field .hint{font-size:.85rem;color:var(--ink);margin-top:.3rem}

/* =========================================================
   ERRORI DI COMPILAZIONE
   Prima la validazione impostava solo aria-invalid e non esisteva
   nessuna regola che ci reagisse: l'utente premeva "Invia" e non
   succedeva niente di visibile.
   ========================================================= */
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"]{
  border-color:#c0392b;
  background:#fdf7f6;
}
.field input[aria-invalid="true"]:focus,
.field select[aria-invalid="true"]:focus,
.field textarea[aria-invalid="true"]:focus{
  border-color:#c0392b;box-shadow:0 0 0 3px rgba(192,57,43,.14);
}
.field-error{
  display:flex;gap:.4em;align-items:flex-start;
  color:#a5281c;font-size:.87rem;font-weight:500;margin:.35rem 0 0;
}
.field-error svg{flex:0 0 auto;width:1.05em;height:1.05em;margin-top:.15em}

/* riepilogo in cima al modulo, per chi usa screen reader
   e per chi ha il campo fuori schermo */
.form-alert{
  display:flex;gap:.6em;align-items:flex-start;
  background:#fdf3f1;border:1px solid #eccdc7;border-left:3px solid #c0392b;
  border-radius:var(--radius-sm);padding:.85em 1em;margin-bottom:1.3rem;
  color:#8f2318;font-size:.92rem;
}
.form-alert[hidden]{display:none}
.form-alert svg{flex:0 0 auto;width:1.2em;height:1.2em;margin-top:.15em}
.form-alert b{color:#8f2318}

/* schede radio del modulo di adesione: i radio non stanno in un .field,
   quindi lo stato d'errore va sulla scheda che li contiene */
.radio-card:has(input[aria-invalid="true"]){border-color:#c0392b;background:#fdf7f6}
/* il messaggio è inserito subito DOPO la griglia delle schede */
.radio-cards + .field-error{margin-top:.6rem}

/* casella di spunta: il bordo su un checkbox nativo non si vede,
   serve un contorno */
.field input[type="checkbox"][aria-invalid="true"]{
  outline:2px solid #c0392b;outline-offset:2px;background:none;
}
.radio-cards{display:grid;gap:.7rem;grid-template-columns:repeat(3,1fr)}
@media (max-width:620px){.radio-cards{grid-template-columns:1fr}}
.radio-card{
  border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:1rem;cursor:pointer;
  display:block;transition:border-color .15s ease,background .15s ease;
}
.radio-card:hover{border-color:var(--lime)}
.radio-card input{position:absolute;opacity:0;width:0;height:0}
.radio-card:has(input:checked){border-color:var(--petrol);background:var(--mint-050);box-shadow:0 0 0 3px rgba(0,76,89,.1)}
.radio-card b{display:block;color:var(--ink-strong)}
.radio-card small{color:var(--ink)}

/* SCELTA DEL MODULO (pagina Associati)
   Erano tre schede radio di un modulo multi-passo. Da agosto 2026 il percorso
   online non c'è più: sono tre LINK che scaricano il PDF del profilo scelto.
   Stessa forma delle schede radio, più il riquadro "PDF" delle schede
   documento, così il fatto che sia uno scaricamento si vede prima di cliccare. */
.moduli-grid{display:grid;gap:.7rem;grid-template-columns:repeat(3,1fr);margin-top:1rem}
@media (max-width:620px){.moduli-grid{grid-template-columns:1fr}}
/* Verde pieno come il pulsante "Associati": sono la chiamata all'azione
   principale della pagina. Testo in petrolio scuro, non bianco: sul lime il
   bianco darebbe 1,9:1, il petrolio scuro dà 7,4:1. */
.modulo-card{
  border:1.5px solid var(--lime-700);border-radius:var(--radius-sm);padding:1rem;
  display:flex;flex-direction:column;gap:.15rem;text-decoration:none;
  background:var(--lime);color:var(--petrol-900);
  transition:background .15s ease,transform .15s ease,box-shadow .15s ease;
}
.modulo-card:hover{background:var(--lime-600);transform:translateY(-2px);box-shadow:0 10px 20px -12px rgba(0,54,63,.5)}
.modulo-card b{display:block;color:var(--petrol-900);font-size:1.05rem}
.modulo-card small{color:var(--petrol-900);opacity:.85}
.modulo-card .ext{
  margin-top:.7rem;align-self:flex-start;font-size:.75rem;font-weight:700;
  color:var(--petrol-900);background:rgba(255,255,255,.55);
  border:1px solid rgba(0,54,63,.25);border-radius:6px;padding:.2em .5em;
  display:inline-flex;align-items:center;gap:.4em;white-space:nowrap;
}
.modulo-card .ext svg{width:.95em;height:.95em;flex:0 0 auto}
.modulo-card:hover .ext{background:#fff;border-color:rgba(0,54,63,.4)}

/* Elenco dei moduli di adesione (pagina "Associati").
   Erano tre schede uguali in tre colonne, incastrate fra i tre passi
   sopra e i tre vantaggi sotto: tre griglie da tre di seguito, tutte
   con lo stesso ritmo. In riga i tre profili si distinguono, il tasto
   di scaricamento e' sempre nello stesso punto e sul telefono la
   colonna si impila senza schiacciare il testo. */
.moduli-lista{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.75rem}
.moduli-lista li{
  display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  background:var(--mint-050);border:1px solid var(--line);
  border-left:4px solid var(--lime);border-radius:var(--radius-sm);
  padding:1.05rem 1.3rem;
}
.moduli-lista .modulo-chi{min-width:0}
.moduli-lista b{
  display:block;font-family:var(--display);font-weight:600;
  font-size:1.16rem;line-height:1.25;color:var(--petrol);
}
.moduli-lista span{display:block;font-size:.95rem;margin-top:.15rem}
.moduli-lista .btn{flex:0 0 auto}
@media (max-width:560px){
  .moduli-lista li{flex-direction:column;align-items:flex-start;gap:.85rem}
  .moduli-lista .btn{align-self:stretch}
}
.form-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:1.6rem}
.form-panel[hidden]{display:none}
.form-done{text-align:center;padding:2rem 1rem}
.form-done .check{
  width:72px;height:72px;border-radius:50%;background:var(--mint);color:var(--petrol);
  display:flex;align-items:center;justify-content:center;margin:0 auto 1.2rem;
}
.form-done .check svg{width:38px;height:38px}
.demo-note{
  background:var(--mint-050);border:1px dashed var(--lime);border-radius:var(--radius-sm);
  padding:.8em 1em;font-size:.9rem;color:var(--petrol);margin-bottom:1.5rem;
  display:flex;gap:.6em;align-items:flex-start;
}
.demo-note svg{flex:0 0 auto;width:1.2em;height:1.2em;margin-top:.15em}

/* contatti */
.contact-cards{display:grid;gap:1rem}
.contact-card{display:flex;gap:1rem;align-items:flex-start;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem 1.3rem;box-shadow:var(--shadow-sm)}
.contact-card .ico{flex:0 0 auto;width:44px;height:44px;border-radius:12px;background:var(--mint);color:var(--petrol);display:flex;align-items:center;justify-content:center}
.contact-card .ico svg{width:22px;height:22px}
.contact-card b{display:block;color:var(--ink-strong)}
.contact-card a{text-decoration:none}

/* page hero (interne) */
.page-hero{background:linear-gradient(160deg,var(--petrol),var(--petrol-900));color:#fff;padding:clamp(2.6rem,5vw,3.8rem) 0}
.page-hero h1{color:#fff;font-size:clamp(2rem,4.6vw,3rem);margin-bottom:.5rem}
.page-hero p{color:#cfe6df;max-width:60ch;font-size:1.12rem;margin:0}
.page-hero .eyebrow{color:var(--lime)}
.breadcrumb{font-size:.85rem;color:#9fc4bb;margin-bottom:1rem;display:flex;gap:.5em;flex-wrap:wrap}
.breadcrumb a{color:#cfe6df;text-decoration:none}
.breadcrumb a:hover{color:var(--lime)}

/* misc */
.lead{font-size:1.15rem;color:var(--ink-strong)}
.muted{color:var(--ink)}
.center{text-align:center}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.stack>*+*{margin-top:1rem}

/* =========================================================
   REVEAL ON SCROLL — miglioramento progressivo.
   Contenuto SEMPRE visibile senza JS o con reduced-motion.
   ========================================================= */
html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
html.js .reveal.is-visible{opacity:1;transform:none}
html.js .reveal.d1{transition-delay:.08s}
html.js .reveal.d2{transition-delay:.16s}
html.js .reveal.d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1 !important;transform:none !important;transition:none}
}

/* ============ Pagina Cabine — mappa GIS ============ */
.map-toolbar{display:flex;flex-wrap:wrap;gap:.8rem;align-items:flex-end;margin-bottom:1rem}
.map-toolbar .field{margin:0;flex:1 1 240px}
.map-toolbar .field.small{flex:0 1 auto}
.map-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.map-file{display:inline-flex;align-items:center;gap:.5rem;border:1px dashed var(--line);border-radius:var(--radius-sm);padding:.7rem .9rem;background:var(--mint-050);cursor:pointer;font-weight:600;color:var(--petrol);font-size:.92rem}
.map-file:hover{border-color:var(--lime)}
.map-file input{display:none}
.map-shell{position:relative;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
#cabine-map{width:100%;height:min(70vh,620px);min-height:440px;background:#e8eef0}
.leaflet-container{font:inherit}
.map-legend{position:absolute;left:12px;top:12px;z-index:500;background:rgba(255,255,255,.94);backdrop-filter:blur(4px);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.7rem .85rem;box-shadow:var(--shadow-sm);max-width:230px;font-size:.82rem;line-height:1.35}
.map-legend .legend-title{margin:0 0 .45rem;font-size:.8rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-strong)}
.map-legend .row{display:flex;align-items:center;gap:.5rem;margin:.2rem 0}
.map-legend .sw{width:14px;height:14px;border-radius:3px;flex:0 0 auto;border:1px solid rgba(0,0,0,.15)}
.map-badge{position:absolute;left:12px;top:12px;z-index:500;background:var(--petrol);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:.3rem .6rem;border-radius:999px;box-shadow:var(--shadow-sm)}
.cabina-info{margin-top:1rem;border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem;background:var(--white)}
.cabina-info h3{margin:.1rem 0 .6rem}
/* L'etichetta e' contesto, il codice e' il dato: stesso rigo ma peso
   diverso, senno' "Il codice della tua cabina:" pesa quanto il codice.
   (Le vecchie regole dl/dt/dd stavano qui: il <dl> "Codice cabina"
   ripeteva il titolo ed e' stato tolto, vedi CLAUDE.md 26.) */
.cabina-info .cabina-etichetta{font-family:var(--sans);font-size:.95rem;font-weight:500;color:var(--ink);letter-spacing:0}
.cabina-info .cabina-spiega{margin:0;font-size:.95rem;color:var(--ink-strong);max-width:62ch}
.cabina-info .state-pill{display:inline-block;padding:.15rem .6rem;border-radius:999px;font-size:.82rem;font-weight:700}
.map-note{margin-top:1rem;display:flex;gap:.7rem;align-items:flex-start;font-size:.9rem;color:var(--ink);background:var(--mint-050);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.85rem 1rem}
.map-note svg{flex:0 0 auto;width:20px;height:20px;color:var(--petrol);margin-top:.1rem}
/* AA5 — attribuzione delle mappe: il blu di Leaflet (#0078a8) dava
   4,04–4,21:1 sul fondo chiaro, sotto i 4,5 richiesti, e su Servizi
   era anche a 9px. Petrolio del sito = 8,2:1, dimensione minima 11px. */
.leaflet-control-attribution{font-size:11px !important;line-height:1.5}
.leaflet-control-attribution,
.leaflet-control-attribution span{color:var(--ink-strong)}
.leaflet-control-attribution a{color:var(--petrol);text-decoration:underline;text-underline-offset:2px}
.leaflet-control-attribution a:hover{color:var(--petrol-900)}
.leaflet-popup-content{font:inherit;font-size:.9rem;line-height:1.45}
.leaflet-popup-content b{color:var(--petrol)}
.map-status{font-size:.9rem;color:var(--ink);min-height:1.2em;margin-top:.5rem}
@media(max-width:640px){.map-legend{position:static;max-width:none;margin-top:.6rem}.map-shell{border-radius:var(--radius)}}

/* =========================================================
   HOME — versione animata, più calda e con più palette.
   Tutto è scoping .home; movimenti solo se l'utente li consente.
   Contenuti sempre visibili senza JS e con reduced-motion.
   ========================================================= */
main{
  background:
    radial-gradient(55% 40% at 100% 0%, rgba(154,199,60,.07), transparent 60%),
    radial-gradient(45% 30% at 0% 8%, rgba(0,76,89,.045), transparent 60%);
}

/* ---------- HERO ----------
   Definito UNA volta sola. Prima stava qui e veniva ridefinito 180 righe
   più sotto, dove i due glow ::before/::after venivano spenti con
   display:none invece di essere tolti: i glow ora li dà la scena SVG. */
.home .hero{
  position:relative;overflow:hidden;
  min-height:clamp(580px,86vh,800px);
  display:flex;align-items:center;
  padding-top:2.4rem;padding-bottom:0;
  background:
    radial-gradient(85% 70% at 90% -20%, rgba(154,199,60,.18), transparent 55%),
    radial-gradient(70% 60% at -8% 130%, rgba(0,76,89,.09), transparent 60%),
    linear-gradient(180deg,#ffffff 0%, var(--mint-050) 100%);
}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(-24px,18px)}}

/* moti della scena hero */
@keyframes pulse{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:.8;transform:scale(1.1)}}
@keyframes flow{to{stroke-dashoffset:-19}}
@keyframes riseIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.home .flow{stroke-dasharray:.5 9}
.home .sun-rays,.home .sun-glow,.home .ring{transform-origin:1180px 150px}

/* entrata scaglionata del testo (solo con motion) */
@media (prefers-reduced-motion:no-preference){
  .home .hero-copy>*{opacity:0;animation:riseIn .7s cubic-bezier(.2,.7,.2,1) both}
  .home .hero-copy>.eyebrow{animation-delay:.05s}
  .home .hero-copy>h1{animation-delay:.16s}
  .home .hero-copy>.lede{animation-delay:.3s}
  .home .hero-copy>.hero-actions{animation-delay:.44s}
  .home .hero-copy>.hero-note{animation-delay:.58s}
}

/* ---------- METRICHE (banda più calda) ---------- */
.metrics{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--petrol) 0%,#013a44 100%)}
.metrics::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(46% 130% at 12% 0%,rgba(154,199,60,.16),transparent 62%)}
.metrics .metric,.metrics.metric{background:transparent}
.metrics .metric::after{content:"";display:block;width:34px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--lime),transparent);margin-top:.7rem}
.metrics .metric.is-soon{background:rgba(255,255,255,.05);border-radius:14px}

/* ---------- CARD più vive + hover ---------- */
.sec .card{position:relative;overflow:hidden;
  transition:transform .32s ease,box-shadow .32s ease,border-color .32s ease}
.sec .card::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--lime),var(--petrol));transform:scaleX(0);transform-origin:left;
  transition:transform .4s ease}
.sec .card:hover{transform:translateY(-6px);
  box-shadow:0 20px 44px -24px rgba(0,54,63,.5);border-color:rgba(154,199,60,.55)}
.sec .card:hover::before{transform:scaleX(1)}
.sec .card .ico{background:linear-gradient(150deg,var(--mint),rgba(154,199,60,.4));
  transition:transform .3s ease}
.sec .card:hover .ico{transform:scale(1.08) rotate(-4deg)}
.sec--petrol .card .ico{background:linear-gradient(150deg,rgba(154,199,60,.28),rgba(154,199,60,.12))}
.sec--petrol .card:hover{border-color:rgba(154,199,60,.5)}

/* pillars: sfumatura d'accento diversa per pilastro */
.pillar:nth-of-type(1) .ico{background:linear-gradient(150deg,#eaf7c8,#bfe081)}
.pillar:nth-of-type(2) .ico{background:linear-gradient(150deg,#d3f0d9,#8fd7a4)}
.pillar:nth-of-type(3) .ico{background:linear-gradient(150deg,#dfeef1,#a7d3d9)}

/* ---------- CHIPS: hover + entrata scaglionata ---------- */
.chips li{transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease;cursor:default}
.chips li:hover{transform:translateY(-3px);background:var(--lime);border-color:var(--lime);color:var(--petrol-900)}
@media (prefers-reduced-motion:no-preference){
  html.js .chips.pop li{opacity:0}
  html.js .chips.pop.is-visible li{animation:riseIn .5s ease both}
  .chips.pop.is-visible li:nth-child(1){animation-delay:.03s}
  .chips.pop.is-visible li:nth-child(2){animation-delay:.09s}
  .chips.pop.is-visible li:nth-child(3){animation-delay:.15s}
  .chips.pop.is-visible li:nth-child(4){animation-delay:.21s}
  .chips.pop.is-visible li:nth-child(5){animation-delay:.27s}
  .chips.pop.is-visible li:nth-child(6){animation-delay:.33s}
  .chips.pop.is-visible li:nth-child(7){animation-delay:.39s}
}

/* ---------- CTA band più ricca ---------- */
.cta-band{position:relative;overflow:hidden;
  background:linear-gradient(130deg,var(--petrol) 0%,#0a6272 55%,var(--petrol-900) 100%)}
.cta-band::before,.cta-band::after{content:"";position:absolute;border-radius:50%;
  filter:blur(50px);pointer-events:none}
.cta-band::before{width:320px;height:320px;background:radial-gradient(circle,rgba(154,199,60,.26),transparent 70%);top:-120px;right:-40px}
.cta-band::after{width:260px;height:260px;background:radial-gradient(circle,rgba(154,199,60,.14),transparent 70%);bottom:-120px;left:-30px}
@media (prefers-reduced-motion:no-preference){
  .cta-band::before{animation:drift 18s ease-in-out infinite}
}
.cta-band .container{position:relative;z-index:1}

/* =========================================================
   ANIMAZIONI SITO-WIDE — stesso linguaggio della home su tutte le pagine.
   ========================================================= */
/* wash caldo di sfondo su tutte le pagine */
body{background:
  radial-gradient(50% 34% at 100% 0%, rgba(154,199,60,.05), transparent 60%),
  radial-gradient(40% 26% at 0% 6%, rgba(0,76,89,.035), transparent 60%),
  var(--white);
}

/* page-hero interno: più caldo + entrata */
.page-hero{position:relative;overflow:hidden}
.page-hero::before,.page-hero::after{content:"";position:absolute;border-radius:50%;filter:blur(50px);pointer-events:none;z-index:0}
.page-hero::before{width:320px;height:320px;background:radial-gradient(circle,rgba(154,199,60,.22),transparent 70%);top:-120px;right:-40px}
.page-hero::after{width:240px;height:240px;background:radial-gradient(circle,rgba(154,199,60,.10),transparent 70%);bottom:-120px;left:-30px}
@media (prefers-reduced-motion:no-preference){
  .page-hero::before{animation:drift 18s ease-in-out infinite}
}
.page-hero .container{position:relative;z-index:1}
@media (prefers-reduced-motion:no-preference){
  .page-hero .container>*{opacity:0;animation:riseIn .6s cubic-bezier(.2,.7,.2,1) both}
  .page-hero .container>.breadcrumb{animation-delay:.02s}
  .page-hero .container>.eyebrow{animation-delay:.1s}
  .page-hero .container>h1{animation-delay:.2s}
  .page-hero .container>p{animation-delay:.32s}
}

/* glow morbidi nelle sezioni colorate (tutte le pagine) */
.sec--mint{position:relative;overflow:hidden}
.sec--mint::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;
  filter:blur(60px);background:radial-gradient(circle,rgba(154,199,60,.16),transparent 70%);
  top:-140px;right:-80px;pointer-events:none;z-index:0}
.sec--mint>.container{position:relative;z-index:1}
.sec--petrol{position:relative;overflow:hidden}
.sec--petrol::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(44% 120% at 12% 0%,rgba(154,199,60,.12),transparent 60%)}
.sec--petrol>.container{position:relative;z-index:1}

/* micro-interazioni condivise su blocchi extra */
.contact-card,.step{transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.contact-card:hover,.step:hover{
  transform:translateY(-4px);box-shadow:0 16px 36px -22px rgba(0,54,63,.42);border-color:rgba(154,199,60,.5)}

/* =========================================================
   HERO esteso e fuso con lo sfondo (niente riquadro)
   ========================================================= */
.home .hero .container{position:relative;z-index:2;width:100%}
.home .hero-copy{max-width:600px}
.home .hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.home .hero-bg svg{position:absolute;inset:0;width:100%;height:100%}
.home .hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(103deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.88) 26%,rgba(255,255,255,.52) 48%,rgba(255,255,255,.12) 64%,rgba(255,255,255,0) 74%)}

.home .turbine-1 .blades{transform-origin:176px 430px}
.home .turbine-2 .blades{transform-origin:606px 430px}
.home .turbine-3 .blades{transform-origin:1036px 430px}
.home .turbine-4 .blades{transform-origin:1380px 430px}

@keyframes cloudDrift{from{transform:translateX(-14px)}to{transform:translateX(26px)}}
@keyframes birdGlide{0%{transform:translate(0,0)}25%{transform:translate(42px,-14px)}50%{transform:translate(84px,-2px)}75%{transform:translate(42px,10px)}100%{transform:translate(0,0)}}
@keyframes ringPulse{0%{transform:scale(1);opacity:0}14%{opacity:.5}100%{transform:scale(3.8);opacity:0}}
@keyframes pulseMove{0%{offset-distance:0%;opacity:0}12%{opacity:1}85%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes moteFloat{0%{transform:translate(0,0);opacity:.5}50%{transform:translate(6px,-16px);opacity:.9}100%{transform:translate(0,0);opacity:.5}}
@keyframes pvGlint{0%{transform:translateX(-40px);opacity:0}6%{opacity:.6}22%{transform:translateX(40px);opacity:.55}30%,100%{transform:translateX(40px);opacity:0}}

/* stati di partenza: senza motion questi elementi restano invisibili */
.home .ring{opacity:0}
.home .pulse{opacity:0}
.home .pv-glint{opacity:0}

/* TUTTI i moti della scena hero in un blocco solo.
   Erano sparsi in cinque @media identici aggiunti in momenti diversi,
   alcuni dei quali contenevano solo i ritardi di due o tre particelle. */
@media (prefers-reduced-motion:no-preference){
  /* pale eoliche */
  .home .turbine-1 .blades{animation:spin 10s linear infinite}
  .home .turbine-2 .blades{animation:spin 8.4s linear infinite}
  .home .turbine-3 .blades{animation:spin 7.6s linear infinite}
  .home .turbine-4 .blades{animation:spin 6.6s linear infinite}

  /* nuvole */
  .home .cloud{animation:cloudDrift 26s ease-in-out infinite alternate}
  .home .cloud.c2{animation-duration:34s;animation-delay:-8s}

  /* uccelli */
  .home .bird{animation:birdGlide 12s ease-in-out infinite}
  .home .bird.b2{animation-duration:15s;animation-delay:-4s}
  .home .bird.b3{animation-duration:16s;animation-delay:-7s}
  .home .bird.b4{animation-duration:18s;animation-delay:-11s}
  .home .bird.b6{animation-duration:17.5s;animation-delay:-12s}

  /* anelli del sole e impulsi lungo la rete */
  .home .ring{animation:ringPulse 4.6s ease-out infinite}
  .home .ring.r2{animation-delay:-1.55s}
  .home .ring.r3{animation-delay:-3.1s}
  .home .pulse{animation:pulseMove 3s linear infinite}
  .home .pulse.p2{animation-duration:3.6s;animation-delay:-1.2s}

  /* particelle */
  .home .mote{animation:moteFloat 6s ease-in-out infinite}
  .home .mote.m2{animation-duration:7.5s;animation-delay:-2s}
  .home .mote.m3{animation-duration:8.5s;animation-delay:-4s}
  .home .mote.m4{animation-duration:6.8s;animation-delay:-1s}
  .home .mote.m5{animation-duration:7.8s;animation-delay:-3s}
  .home .mote.m6{animation-duration:9s;animation-delay:-5s}
  .home .mote.m7{animation-duration:6.4s;animation-delay:-1.5s}
  .home .mote.m8{animation-duration:8.2s;animation-delay:-2.5s}
  .home .mote.m9{animation-duration:9.4s;animation-delay:-6s}
  .home .mote.m10{animation-duration:7s;animation-delay:-3.5s}
  .home .mote.m11{animation-duration:8.8s;animation-delay:-1s}

  /* riflesso sui pannelli fotovoltaici */
  .home .pv-glint{animation:pvGlint 5.5s ease-in-out infinite}
  .home .pv2 .pv-glint{animation-delay:-1.9s}
  .home .pv3 .pv-glint{animation-delay:-3.7s}
}

@media (max-width:820px){
  .home .hero{min-height:660px;align-items:flex-start;padding-top:2.2rem}
  .home .hero-copy{max-width:none}
  .home .hero-veil{background:linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.96) 44%,rgba(255,255,255,.82) 58%,rgba(255,255,255,.35) 76%,rgba(255,255,255,0) 100%)}
}

/* Fallback senza JS: su mobile il menu è statico e visibile (nessun drawer) */
@media (max-width:1100px){
  html:not(.js) .nav-toggle{display:none}
  html:not(.js) .nav-collapse{position:static;height:auto;width:100%;order:4;flex-basis:100%;
    transform:none;background:transparent;box-shadow:none;padding:.4rem 0 1rem}
  html:not(.js) .nav-links a{color:var(--ink-strong);border-bottom-color:var(--line)}
  html:not(.js) .nav-links a[aria-current="page"]{background:var(--mint-050);color:var(--petrol)}
  html:not(.js) .nav-links li{opacity:1;transform:none}
}


/* --- Pulsante ghost leggibile sulle bande CTA (bianco) --- */
.cta-band .btn--ghost{color:#fff;border-color:rgba(255,255,255,.6)}
.cta-band .btn--ghost:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}

/* --- Fetta di sole animata su mobile + testo più leggibile --- */
.hero-sun-m{display:none}
.hero-sun-m .m-rays,.hero-sun-m .m-glow,.hero-sun-m .m-ring{transform-origin:110px 110px}
.hero-sun-m .m-ring{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .hero-sun-m .m-rays{animation:spin 40s linear infinite}
  .hero-sun-m .m-glow{animation:pulse 4.6s ease-in-out infinite}
  .hero-sun-m .m-ring{animation:ringPulse 4.6s ease-out infinite}
  .hero-sun-m .m-ring.r2{animation-delay:-2.3s}
}
@media (max-width:820px){
  .hero-sun-m{display:block;position:absolute;top:50px;right:-56px;width:184px;height:184px;z-index:2;pointer-events:none}
  .hero-sun-m svg{width:100%;height:100%;overflow:visible}
  .home .hero-bg .sun-glow,.home .hero-bg .sun-rays,.home .hero-bg .sun-core,.home .hero-bg .rings{display:none}
  .home .hero{min-height:600px}
  .home .hero-copy{max-width:68%}
  .home .hero .lede{font-size:1.08rem}
  .home .hero-veil{background:linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.97) 46%,rgba(255,255,255,.86) 60%,rgba(255,255,255,.42) 78%,rgba(255,255,255,0) 100%)}
}

/* utility: evita di spezzare su due righe (es. Power-In S.a.s., indirizzi email) */
.nowrap{white-space:nowrap}
/* link leggibili nei page-hero (fondo petrolio) */
.page-hero p a{color:#b6de5c;text-decoration:underline;text-underline-offset:2px;font-weight:600;transition:color .2s ease}
.page-hero p a:hover{color:#fff}

/* header compatto su schermi molto stretti (evita che l'hamburger sfori) */
@media (max-width:420px){
  .nav{gap:.55rem;padding-left:.85rem;padding-right:.85rem}
  .brand img{height:44px}
  .site-header.is-stuck .brand img{height:42px}
  .nav-cta{padding:.62em 1em;font-size:.9rem}
}


/* link leggibili nelle bande CTA scure (es. email) */
.cta-band p a{color:#b6de5c;text-decoration:underline;text-underline-offset:2px;font-weight:600;transition:color .2s ease}
.cta-band p a:hover{color:#fff}

/* =========================================================
   Riquadri icone a colori alternati (come "Tre modi in cui una CER fa bene")
   applicato a tutte le card delle sezioni chiare + schede contatti.
   Le sezioni petrolio (scure) mantengono l'icona lime su scuro.
   ========================================================= */
.sec:not(.sec--petrol) .card:nth-child(3n+1) .ico{background:linear-gradient(150deg,#eaf7c8,#bfe081);color:#3f5a10}
.sec:not(.sec--petrol) .card:nth-child(3n+2) .ico{background:linear-gradient(150deg,#d3f0d9,#8fd7a4);color:#1c5b3a}
.sec:not(.sec--petrol) .card:nth-child(3n+3) .ico{background:linear-gradient(150deg,#dfeef1,#a7d3d9);color:#0a4a54}

.contact-card:nth-child(3n+1) .ico{background:linear-gradient(150deg,#eaf7c8,#bfe081);color:#3f5a10}
.contact-card:nth-child(3n+2) .ico{background:linear-gradient(150deg,#d3f0d9,#8fd7a4);color:#1c5b3a}
.contact-card:nth-child(3n+3) .ico{background:linear-gradient(150deg,#dfeef1,#a7d3d9);color:#0a4a54}

/* --- Nota hero sempre leggibile (chip chiaro translucido) --- */
.home .hero-note{
  color:#2c4610;font-weight:500;display:block;
  background:linear-gradient(150deg,#eaf7c8,#c7e58a);
  border:1px solid rgba(122,163,43,.4);
  border-radius:16px;padding:.95rem 1.2rem;width:fit-content;
  box-shadow:0 14px 36px -26px rgba(0,54,63,.55);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}

/* --- Contatti: layout centrato (mappa rimossa) --- */
.contact-center{max-width:900px;margin-inline:auto;display:flex;flex-direction:column;gap:2.2rem}
.contact-center .contact-cards{grid-template-columns:repeat(3,1fr);gap:1rem}
.contact-center .contact-card{flex-direction:column;align-items:center;text-align:center;gap:.6rem}
.contact-center .contact-card b{display:block;margin-bottom:.15rem}
.contact-center .contact-form{width:100%;max-width:540px;margin-inline:auto}
.contact-center .contact-form h2{text-align:center}
.contact-center .contact-form .btn[type="submit"]{display:block;margin-inline:auto}
.contact-center .contact-social{text-align:center;max-width:560px;margin-inline:auto;width:100%}
.contact-center .contact-social .social{justify-content:center}
@media (max-width:640px){
  .contact-center .contact-cards{grid-template-columns:1fr;max-width:340px;margin-inline:auto}
}

/* header su schermi molto piccoli (<=360px) */
@media (max-width:360px){
  .nav{gap:.4rem;padding-left:.7rem;padding-right:.7rem}
  .brand img{height:40px}
  .site-header.is-stuck .brand img{height:38px}
  .nav-cta{padding:.55em .85em;font-size:.85rem}
}

/* Riquadro colorato per l'elenco (installatori: "Porta i tuoi clienti") */
.tick-box{
  background:linear-gradient(150deg,#eaf7c8,#c7e58a);
  border:1px solid rgba(122,163,43,.4);
  border-radius:16px;
  padding:1.5rem 1.7rem;
  box-shadow:0 14px 36px -26px rgba(0,54,63,.55);
}
.tick-box .ticks{margin:0}
.tick-box .ticks li{color:#2c4610}
.tick-box .ticks li svg{color:#5f8f1f}

/* Muro loghi installatori/partner */
/* I partner sono 10: su desktop devono stare su DUE RIGHE DA CINQUE (scelta
   del cliente). Griglia a colonne fisse, non auto-fill: con auto-fill il
   numero di colonne cambiava con la larghezza e l'ultima riga restava
   spaiata. Se un giorno i partner non sono più 10, rivedere questo numero. */
.logo-wall{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin-top:1.1rem}
/* Solo 5 o 2 colonne, mai 3 o 4: 10 loghi diviso 3 lascia una riga con un
   logo solo (3+3+3+1), che si vede subito. 5 colonne reggono fino a ~700px
   (tessere da ~125px, la stessa misura a cui i loghi si vedono oggi su
   desktop), sotto si passa a 2 colonne per 5 righe pari. */
@media (max-width:700px){.logo-wall{grid-template-columns:repeat(2,1fr)}}
.logo-tile{display:flex;align-items:center;justify-content:center;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:1rem 1.1rem;min-height:92px;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease}
.logo-tile:hover{transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(0,54,63,.35)}
.logo-tile a{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.logo-tile img{max-width:100%;max-height:56px;width:auto;height:auto;object-fit:contain;display:block}
@media (max-width:520px){.logo-wall{grid-template-columns:1fr 1fr}.logo-tile{min-height:80px;padding:.8rem}.logo-tile img{max-height:46px}}


/* =========================================================
   COMANDO "FERMA LE ANIMAZIONI"  (WCAG 2.2.2 — livello A)
   Il criterio chiede un comando NEL contenuto: rispettare
   prefers-reduced-motion non basta, perché è una preferenza di
   sistema che quasi nessuno sa di avere.
   Il comando vive nella riga finale del footer: è in flusso
   normale, quindi non si sovrappone mai a nulla.
   ========================================================= */
.motion-toggle{
  display:inline-flex;align-items:center;gap:.5em;
  background:transparent;border:1px solid var(--line-dark);
  color:#c3dbd4;font:inherit;font-size:.82rem;font-weight:600;
  padding:.42em 1em;border-radius:999px;cursor:pointer;
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.motion-toggle:hover{border-color:var(--lime);color:var(--lime);background:rgba(154,199,60,.1)}
.motion-toggle svg{width:1.05em;height:1.05em;flex:0 0 auto}
.motion-toggle .ic-stop{display:none}
.motion-toggle[aria-pressed="true"] .ic-play{display:none}
.motion-toggle[aria-pressed="true"] .ic-stop{display:block}
.motion-toggle[aria-pressed="true"]{border-color:var(--lime);color:var(--lime)}
html:not(.js) .motion-toggle{display:none}   /* senza JS non farebbe nulla */

/* Con le animazioni ferme si replica esattamente lo stato di
   prefers-reduced-motion: animazioni assenti, NON in pausa.
   Metterle in pausa lascerebbe invisibili gli elementi che partono
   da opacity:0 (testo della hero, chips, punti della mappa). */
html.no-motion *,
html.no-motion *::before,
html.no-motion *::after{
  animation:none !important;
}
/* elementi la cui visibilità dipendeva dall'animazione d'ingresso */
html.no-motion .home .hero-copy>*,
html.no-motion .page-hero .container>*,
html.no-motion .chips.pop li,
html.no-motion .nav-collapse .nav-links li{
  opacity:1 !important;transform:none !important;
}

/* Evita il "flash/scatto" dell'header al caricamento/navigazione:
   nessuna transizione finché la pagina non è pronta (html.ready via JS) */
html:not(.ready) .site-header,
html:not(.ready) .site-header *,
html:not(.ready) .nav,
html:not(.ready) .brand img,
html:not(.ready) .nav-links a,
html:not(.ready) .nav-links a::after{transition:none !important;animation:none !important}

/* i controlli devono usare i font del sito, non quelli di sistema
   (prima la × delle finestre modali e l'hamburger usavano Arial) */
button,input,select,textarea{font-family:inherit}

/* =========================================================
   Il widget "Quanta energia farà il sole domani" stava qui:
   ~120 righe che riguardano UNA sola sezione di UNA sola pagina
   e pesavano sul CSS di tutte le altre otto. Ora vive in
   assets/sole.css, caricato soltanto dalla home.
   I suoi token sono prefissati --pv-* : vedi il commento in
   testa a quel file prima di rinominarli.
   ========================================================= */

/* Avviso nella legenda della mappa cabine: compare quando i perimetri
   "Disponibile" sono nascosti perche' lo zoom e' troppo ampio (vedi
   ZOOM_PERIMETRI in cabine.js). Senza, l'utente vede quattro voci in
   legenda e tre colori in mappa e crede che manchino dei dati. */
.map-legend .legend-hint{
  margin:.55rem 0 0;padding-top:.5rem;border-top:1px solid var(--line);
  font-size:.76rem;line-height:1.3;color:var(--ink);
}

/* =========================================================
   A CAPO DECISI A MANO
   Un <br> si spegne con display:none: la stessa frase puo' cosi'
   avere un a capo sul desktop e uno diverso sul telefono, senza
   duplicare il testo (che finirebbe due volte nei lettori di schermo).
   901px e' la soglia sopra la quale le griglie stanno su tre colonne,
   620px quella sotto cui e' tutto incolonnato: sono le due forme per
   cui i tagli sono stati scelti. In mezzo il testo va a capo da solo,
   perche' nessuno dei due tagli e' pensato per quelle larghezze.
   ========================================================= */
br.solo-desktop{display:none}
@media (min-width:901px){br.solo-desktop{display:inline}}
br.solo-mobile{display:none}
@media (max-width:620px){br.solo-mobile{display:inline}}

/* --- Capoversi forzati: due misure che li facevano saltare -------------
   1) La nota dell'hero ha due a capo forzati da desktop (index.html). Con
      max-width:38ch il segmento centrale sbordava di una manciata di pixel
      e andava a capo da solo: quattro righe invece delle tre volute.
      width:fit-content resta, quindi il chip non diventa piu' largo del
      testo: cambia solo il punto in cui gli e' permesso spezzarsi.
   2) Sotto i 400 px gli h1 delle pagine interne sono gia' al minimo del
      clamp, e "Comunità Energetica:" (faq) sforava di 1 px: si spezzava in
      due e il titolo faceva tre righe invece di due. */
@media (min-width:901px){
  .home .hero-note{max-width:46ch}
}
@media (max-width:400px){
  .page-hero h1{font-size:1.9rem}
}

/* --- Muro di partner a testo -------------------------------------------
   Le tessere dei partner portano un nome, non un logo, e sono cinque: su
   tre colonne di griglia l'ultima riga lascerebbe un buco a destra. Con
   flex la riga incompleta si centra da sola. Niente flex-grow, cosi' le
   due tessere in fondo restano larghe quanto le tre sopra invece di
   allargarsi a meta' riga ciascuna. Il gap arriva da .logo-wall (1rem),
   percio' le tre colonne tolgono 2rem e le due ne tolgono 1. */
.logo-wall--testo{display:flex;flex-wrap:wrap;justify-content:center}
.logo-wall--testo .logo-tile{flex:0 0 calc((100% - 2rem) / 3);text-align:center;line-height:1.3}
@media (max-width:700px){.logo-wall--testo .logo-tile{flex-basis:calc((100% - 1rem) / 2)}}
@media (max-width:430px){.logo-wall--testo .logo-tile{flex-basis:100%}}