/* =========================================================
   ELIOS SRLS — Fotovoltaico Padova
   Foglio di stile principale
   Palette "luce di mezzogiorno": bianchi, verde logo, ambra sole
   ========================================================= */

:root{
  /* colore */
  --verde:        #87AB42;
  --verde-scuro:  #55702A;
  --verde-chiaro: #B9D17E;
  --sole:         #F2B33D;
  --inchiostro:   #14170F;
  --grafite:      #5C6353;
  --bianco:       #FFFFFF;
  --luce:         #F4F7EE;
  --nebbia:       #E7EDDC;
  --linea:        rgba(20,23,15,.12);
  --linea-forte:  rgba(20,23,15,.28);

  /* tipografia */
  --display: "Archivo", system-ui, sans-serif;
  --testo:   "Instrument Sans", system-ui, sans-serif;
  --dati:    "Azeret Mono", ui-monospace, monospace;

  --t--1: clamp(.78rem, .74rem + .18vw, .875rem);
  --t-0:  clamp(1rem, .96rem + .22vw, 1.125rem);
  --t-1:  clamp(1.2rem, 1.1rem + .5vw, 1.5rem);
  --t-2:  clamp(1.5rem, 1.3rem + 1vw, 2.2rem);
  --t-3:  clamp(2rem, 1.5rem + 2.2vw, 3.4rem);
  --t-4:  clamp(2.6rem, 1.6rem + 5.4vw, 6.4rem);

  /* spazio */
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --sezione: clamp(4.5rem, 9vw, 9rem);
  --max: 1320px;

  --ombra-1: 0 1px 2px rgba(20,23,15,.05), 0 8px 24px rgba(20,23,15,.06);
  --ombra-2: 0 2px 4px rgba(20,23,15,.06), 0 20px 60px rgba(20,23,15,.10);
  --raggio: 18px;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  overflow-x:hidden;
  overflow-x:clip;
}
body{
  margin:0;
  width:100%;
  max-width:100%;
  overscroll-behavior-x:none;
  background:var(--luce);
  color:var(--inchiostro);
  font-family:var(--testo);
  font-size:var(--t-0);
  line-height:1.6;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-x:clip;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:700; line-height:1.02; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

:focus-visible{
  outline:3px solid var(--verde-scuro);
  outline-offset:3px;
  border-radius:6px;
}

::selection{ background:var(--verde); color:#fff; }

/* ---------- utilità tipografiche ---------- */
.eyebrow{
  font-family:var(--dati);
  font-size:var(--t--1);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--verde-scuro);
  display:flex; align-items:center; gap:.7rem;
  margin:0 0 1.4rem;
}
.eyebrow::before{
  content:"";
  width:12px; height:12px; flex:none;
  border:2.5px solid var(--verde);
  border-radius:50%;
}
.titolo{
  font-size:var(--t-3);
  font-stretch:112%;
  letter-spacing:-.015em;
  text-transform:uppercase;
}
.occhiello{ font-size:var(--t-2); font-stretch:105%; line-height:1.1; }
.lead{ font-size:var(--t-1); line-height:1.45; color:var(--grafite); }
.muto{ color:var(--grafite); }
.dati{ font-family:var(--dati); font-variant-numeric:tabular-nums; }

/* cerchio verde tracciato attorno a una parola: eco del marchio */
.ringed{ position:relative; display:inline-block; line-height:1; padding:0 .12em; }
.ringed svg{
  position:absolute; left:50%; top:50%;
  width:126%; height:112%;
  transform:translate(-50%, -57%) rotate(-2deg);
  overflow:visible; pointer-events:none;
}
.ringed ellipse{
  fill:none; stroke:var(--verde); stroke-width:5; stroke-linecap:round;
  stroke-dasharray:640; stroke-dashoffset:640;
  animation:traccia 1.5s cubic-bezier(.65,0,.35,1) .7s forwards;
}
@keyframes traccia{ to{ stroke-dashoffset:0; } }

/* ---------- layout ---------- */
.wrap{ width:min(100% - var(--gutter)*2, var(--max)); margin-inline:auto; }
section{ position:relative; }
.solida{
  background:var(--bianco);
  z-index:2;
  padding-block:var(--sezione);
}
.solida.crema{ background:var(--luce); }
.palco{ z-index:2; position:relative; }        /* sezione sopra la scena 3D */

/* ---------- canvas 3D ---------- */
#scena{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(120% 80% at 70% 0%, #EAF3FB 0%, #F4F7EE 55%, #EDF1E4 100%);
}
.no-webgl #scena{ display:none; }

/* zona in cui il puntatore ruota la scena */
.trascina{
  position:absolute; inset:0; z-index:1;
  cursor:grab; touch-action:pan-y;
}
.trascina.attivo{ cursor:grabbing; }

/* ---------- header ---------- */
.testata{
  position:fixed; top:0; left:0; right:0; z-index:60;
  transition:background .35s ease, box-shadow .35s ease, padding .35s ease;
  padding-block:1.1rem;
}
.testata::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  opacity:0; transition:opacity .35s ease;
  border-bottom:1px solid var(--linea);
}
.testata.compatta{ padding-block:.6rem; }
.testata.compatta::before{ opacity:1; }
.testata .wrap{ display:flex; align-items:center; gap:2rem; }
.marchio img{ height:34px; width:auto; }
.nav{ margin-left:auto; display:flex; align-items:center; gap:clamp(1rem,2vw,2rem); }
.nav a{
  text-decoration:none; font-size:var(--t--1);
  font-family:var(--dati); letter-spacing:.12em; text-transform:uppercase;
  padding:.4rem 0; position:relative; white-space:nowrap;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--verde); transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
.nav a:hover::after, .nav a[aria-current="true"]::after{ transform:scaleX(1); }

/* ---------- bottoni ---------- */
.btn{
  --bg:var(--inchiostro); --fg:#fff;
  display:inline-flex; align-items:center; gap:.7rem;
  background:var(--bg); color:var(--fg);
  border:1px solid var(--bg);
  padding:.85rem 1.5rem; border-radius:999px;
  text-decoration:none; cursor:pointer;
  font-family:var(--dati); font-size:var(--t--1);
  letter-spacing:.1em; text-transform:uppercase;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), background .25s, color .25s, border-color .25s;
}
.btn:hover{ transform:translateY(-2px); }
.btn--verde{ --bg:var(--verde); --fg:#12200a; border-color:var(--verde); }
.btn--verde:hover{ --bg:var(--verde-scuro); --fg:#fff; }
.btn--vuoto{ --bg:transparent; --fg:var(--inchiostro); border-color:var(--linea-forte); }
.btn--vuoto:hover{ --bg:var(--inchiostro); --fg:#fff; }
.btn .freccia{ transition:transform .25s ease; }
.btn:hover .freccia{ transform:translateX(4px); }

/* menu mobile */
.hamburger{ display:none; background:none; border:0; padding:.5rem; cursor:pointer; }
.hamburger span{ display:block; width:24px; height:2px; background:var(--inchiostro); margin:5px 0; transition:transform .3s, opacity .3s; }
.testata.aperto .hamburger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.testata.aperto .hamburger span:nth-child(2){ opacity:0; }
.testata.aperto .hamburger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  min-height:100svh;
  display:flex; align-items:flex-end;
  padding-top:clamp(7rem,14vh,10rem);
  padding-bottom:clamp(1.5rem,4vh,3rem);
}
.hero .wrap{ position:relative; z-index:2; width:min(100% - var(--gutter)*2, var(--max)); }
.hero-testo{ max-width:min(100%, 46rem); }
.hero h1{
  font-size:var(--t-4);
  font-stretch:118%;
  text-transform:uppercase;
  letter-spacing:-.02em;
  line-height:.94;
  margin-bottom:1.4rem;
}
.hero h1 .riga{ display:block; overflow:hidden; padding:.06em .12em .06em 0; margin-left:-.02em; }
.hero h1.pronto .riga{ overflow:visible; }
.hero h1 .riga > span{ display:block; transform:translateY(105%); animation:sali .9s cubic-bezier(.16,1,.3,1) forwards; }
.hero h1 .riga:nth-child(2) > span{ animation-delay:.09s; }
.hero h1 .riga:nth-child(3) > span{ animation-delay:.18s; }
@keyframes sali{ to{ transform:translateY(0); } }

.hero-sotto{ font-size:var(--t-1); color:var(--grafite); max-width:44ch; margin-bottom:2rem; opacity:0; animation:sfuma .8s ease .6s forwards; }
.hero-azioni{ display:flex; flex-wrap:wrap; gap:.8rem; opacity:0; animation:sfuma .8s ease .75s forwards; }
@keyframes sfuma{ to{ opacity:1; } }

/* pannello controllo sole + lettura dati */
.plancia{
  margin-top:clamp(2rem,5vh,3.5rem);
  display:grid; gap:1px;
  grid-template-columns:minmax(260px,1.4fr) repeat(3, minmax(120px,1fr));
  background:var(--linea);
  border:1px solid var(--linea);
  border-radius:var(--raggio);
  overflow:hidden;
  box-shadow:var(--ombra-2);
  opacity:0; animation:sfuma .8s ease .9s forwards;
}
.plancia > *{ background:rgba(255,255,255,.86); backdrop-filter:blur(10px); padding:1.1rem 1.25rem; }
.plancia-lab{
  font-family:var(--dati); font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--grafite); margin-bottom:.35rem;
}
.plancia-val{ font-family:var(--dati); font-size:clamp(1.1rem,2.4vw,1.6rem); font-weight:600; line-height:1; }
.plancia-val small{ font-size:.6em; font-weight:400; color:var(--grafite); margin-left:.25rem; }

.sole-ctrl label{ display:flex; justify-content:space-between; align-items:baseline; }
.sole-ctrl .ora{ font-family:var(--dati); font-size:1.1rem; font-weight:600; }

input[type="range"]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:26px; background:transparent; cursor:pointer; margin:.35rem 0 0;
}
input[type="range"]::-webkit-slider-runnable-track{
  height:4px; border-radius:99px;
  background:linear-gradient(90deg,#C9D6E8 0%, var(--sole) 50%, #C9D6E8 100%);
}
input[type="range"]::-moz-range-track{
  height:4px; border-radius:99px;
  background:linear-gradient(90deg,#C9D6E8 0%, var(--sole) 50%, #C9D6E8 100%);
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background:var(--bianco); border:3px solid var(--verde);
  margin-top:-9px; box-shadow:0 2px 8px rgba(20,23,15,.25);
  transition:transform .2s;
}
input[type="range"]::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%; border:3px solid var(--verde);
  background:var(--bianco); box-shadow:0 2px 8px rgba(20,23,15,.25);
}
input[type="range"]:active::-webkit-slider-thumb{ transform:scale(1.15); }

.suggerimento{
  position:absolute; right:var(--gutter); bottom:2.5rem; z-index:2;
  font-family:var(--dati); font-size:.68rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--grafite);
  display:flex; align-items:center; gap:.5rem;
  animation:respiro 3s ease-in-out infinite;
}
@keyframes respiro{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } }

/* =========================================================
   ANATOMIA — hotspot sulla scena 3D
   ========================================================= */
.anatomia{ padding-block:var(--sezione); min-height:100svh; display:flex; align-items:center; }
.anatomia .wrap{ position:relative; z-index:2; }
.anatomia-testo{ max-width:38ch; }
.nodi{ display:grid; gap:.5rem; margin-top:2rem; max-width:520px; }
.nodo{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1rem;
  width:100%; text-align:left; cursor:pointer;
  background:rgba(255,255,255,.82); backdrop-filter:blur(10px);
  border:1px solid var(--linea); border-radius:14px;
  padding:.95rem 1.1rem;
  transition:border-color .25s, transform .25s, box-shadow .25s, background .25s;
}
.nodo:hover{ transform:translateX(5px); border-color:var(--verde); box-shadow:var(--ombra-1); }
.nodo[aria-pressed="true"]{ border-color:var(--verde); background:#fff; box-shadow:var(--ombra-2); }
.nodo .num{ font-family:var(--dati); font-size:.7rem; letter-spacing:.15em; color:var(--verde-scuro); }
.nodo .nome{ font-family:var(--display); font-stretch:110%; text-transform:uppercase; font-size:1rem; letter-spacing:.02em; }
.nodo .desc{ display:block; font-size:.85rem; color:var(--grafite); line-height:1.35; margin-top:.15rem; }
.nodo .punto{ width:9px; height:9px; border-radius:50%; background:var(--nebbia); border:2px solid var(--linea-forte); transition:.25s; }
.nodo[aria-pressed="true"] .punto{ background:var(--verde); border-color:var(--verde); box-shadow:0 0 0 5px rgba(135,171,66,.22); }

/* etichette 3D proiettate */
.etichette{ position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.etichetta{
  position:absolute; transform:translate(-50%,-50%);
  font-family:var(--dati); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  background:rgba(255,255,255,.92); border:1px solid var(--linea);
  padding:.32rem .6rem; border-radius:99px; white-space:nowrap;
  box-shadow:var(--ombra-1);
  opacity:0; transition:opacity .4s ease;
}
.etichetta.visibile{ opacity:1; }
.etichetta b{ color:var(--verde-scuro); font-weight:600; }

/* =========================================================
   CONFIGURATORE
   ========================================================= */
.config{ padding-block:var(--sezione); min-height:100svh; display:flex; align-items:center; }
.config .wrap{ position:relative; z-index:2; }
.config-griglia{ display:grid; gap:clamp(1.5rem,3vw,3rem); grid-template-columns:minmax(0,1fr) minmax(0,420px); align-items:start; }

.consolle{
  background:rgba(255,255,255,.9); backdrop-filter:blur(16px);
  border:1px solid var(--linea); border-radius:var(--raggio);
  padding:clamp(1.25rem,2.5vw,2rem);
  box-shadow:var(--ombra-2);
}
.campo{ margin-bottom:1.6rem; }
.campo:last-child{ margin-bottom:0; }
.campo-testa{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.campo-testa span:first-child{
  font-family:var(--dati); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--grafite);
}
.campo-val{ font-family:var(--dati); font-size:1.15rem; font-weight:600; }
.campo-nota{ font-size:.8rem; color:var(--grafite); margin-top:.3rem; }

.segmenti{ display:flex; gap:.4rem; margin-top:.5rem; flex-wrap:wrap; }
.segmenti button{
  flex:1 1 auto; min-width:74px; padding:.6rem .5rem; cursor:pointer;
  background:transparent; border:1px solid var(--linea); border-radius:10px;
  font-family:var(--dati); font-size:.8rem; transition:.2s;
}
.segmenti button:hover{ border-color:var(--verde); }
.segmenti button[aria-pressed="true"]{ background:var(--inchiostro); color:#fff; border-color:var(--inchiostro); }

.risultati{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--linea); border:1px solid var(--linea); border-radius:14px; overflow:hidden; margin-top:1.6rem; }
.risultati > div{ background:#fff; padding:1rem; }
.risultati .plancia-val{ color:var(--verde-scuro); }
.disclaimer{ font-size:.72rem; color:var(--grafite); margin-top:.9rem; line-height:1.45; }

/* barra confronto autoconsumo */
.barra{ height:10px; border-radius:99px; background:var(--nebbia); overflow:hidden; margin-top:.5rem; }
.barra i{ display:block; height:100%; background:linear-gradient(90deg,var(--verde),var(--sole)); width:0; transition:width .6s cubic-bezier(.16,1,.3,1); }

/* =========================================================
   SEZIONI CONTENUTO
   ========================================================= */
.testa-sezione{ max-width:60ch; margin-bottom:clamp(2rem,4vw,3.5rem); }

.griglia-servizi{ display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.servizio{
  position:relative; overflow:hidden;
  border:1px solid var(--linea); border-radius:var(--raggio);
  padding:1.6rem 1.5rem 1.4rem;
  background:var(--bianco);
  display:flex; flex-direction:column; gap:.6rem; min-height:270px;
  text-decoration:none;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s;
}
.servizio::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:var(--verde); transform:scaleX(0); transform-origin:left; transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.servizio:hover{ transform:translateY(-6px); box-shadow:var(--ombra-2); border-color:transparent; }
.servizio:hover::after{ transform:scaleX(1); }
.servizio .icona{ width:44px; height:44px; color:var(--verde-scuro); }
.servizio h3{ font-size:1.25rem; font-stretch:110%; text-transform:uppercase; letter-spacing:.01em; }
.servizio p{ color:var(--grafite); font-size:.94rem; }
.servizio .link{ margin-top:auto; font-family:var(--dati); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--verde-scuro); display:flex; align-items:center; gap:.4rem; }

/* garanzie */
.garanzie{ display:grid; gap:clamp(1.5rem,3vw,3rem); grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.garanzia{ border-top:2px solid var(--inchiostro); padding-top:1.1rem; }
.garanzia .cifra{ font-family:var(--display); font-size:clamp(2rem,4vw,3rem); font-stretch:115%; line-height:1; letter-spacing:-.02em; }
.garanzia h3{ font-size:1rem; text-transform:uppercase; font-stretch:110%; margin:.6rem 0 .4rem; }
.garanzia p{ font-size:.92rem; color:var(--grafite); }

/* marchi */
.marchi{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(2rem,6vw,5rem); justify-content:center; padding-top:clamp(2rem,4vw,3rem); margin-top:clamp(2rem,4vw,3rem); border-top:1px solid var(--linea); }
.marchi span{
  font-family:var(--display); font-stretch:120%; font-weight:700;
  font-size:clamp(1.1rem,2.4vw,1.7rem); letter-spacing:.02em;
  color:var(--grafite); opacity:.55; transition:opacity .3s, color .3s;
}
.marchi span:hover{ opacity:1; color:var(--inchiostro); }

/* installazioni */
.griglia-lavori{ display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.lavoro{
  border:1px solid var(--linea); border-radius:var(--raggio); overflow:hidden;
  background:var(--bianco); text-decoration:none; display:flex; flex-direction:column;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.lavoro:hover{ transform:translateY(-6px); box-shadow:var(--ombra-2); }
.lavoro-visual{ aspect-ratio:4/3; position:relative; background:linear-gradient(160deg,#DCE7F2,#EFF3E6); overflow:hidden; }
.lavoro-visual canvas, .lavoro-visual svg{ position:absolute; inset:0; width:100%; height:100%; }
.lavoro-corpo{ padding:1.25rem 1.35rem 1.5rem; display:flex; flex-direction:column; gap:.45rem; }
.lavoro h3{ font-size:1.15rem; text-transform:uppercase; font-stretch:110%; }
.lavoro .spec{ font-family:var(--dati); font-size:.78rem; color:var(--verde-scuro); letter-spacing:.06em; }
.lavoro p{ font-size:.9rem; color:var(--grafite); }

/* fasi */
.fasi{ display:grid; gap:0; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); counter-reset:fase; }
.fase{ padding:1.75rem clamp(1rem,2vw,2rem) 1.5rem; border-top:2px solid var(--inchiostro); position:relative; }
.fase + .fase{ border-left:1px solid var(--linea); }
.fase .n{ font-family:var(--dati); font-size:.75rem; letter-spacing:.2em; color:var(--verde-scuro); }
.fase h3{ font-size:1.2rem; text-transform:uppercase; font-stretch:110%; margin:.7rem 0 .5rem; }
.fase p{ font-size:.92rem; color:var(--grafite); }

/* recensioni */
.rec-testa{ display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem; margin-bottom:2.5rem; }
.punteggio{ display:flex; align-items:baseline; gap:.6rem; }
.punteggio strong{ font-family:var(--display); font-size:3rem; font-stretch:115%; line-height:1; }
.stelle{ color:var(--sole); font-size:1.1rem; letter-spacing:.1em; }
.griglia-rec{ display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.rec{ background:var(--bianco); border:1px solid var(--linea); border-radius:var(--raggio); padding:1.5rem; display:flex; flex-direction:column; gap:.9rem; }
.rec blockquote{ margin:0; font-size:.96rem; line-height:1.6; }
.rec figcaption{ font-family:var(--dati); font-size:.75rem; letter-spacing:.1em; color:var(--grafite); margin-top:auto; }

/* faq */
.faq-lista{ border-top:1px solid var(--linea); max-width:900px; }
.faq-voce{ border-bottom:1px solid var(--linea); }
.faq-voce button{
  width:100%; background:none; border:0; cursor:pointer;
  display:flex; justify-content:space-between; align-items:flex-start; gap:1.5rem;
  padding:1.4rem 0; text-align:left;
  font-family:var(--display); font-size:clamp(1rem,1.6vw,1.2rem); font-stretch:106%; line-height:1.3;
}
.faq-voce .piu{ flex:none; width:22px; height:22px; position:relative; margin-top:.25rem; }
.faq-voce .piu::before, .faq-voce .piu::after{
  content:""; position:absolute; inset:50% 0 auto 0; height:2px; background:var(--verde-scuro);
  transition:transform .3s ease;
}
.faq-voce .piu::after{ transform:rotate(90deg); }
.faq-voce[open] .piu::after, .faq-voce button[aria-expanded="true"] .piu::after{ transform:rotate(0); }
.faq-risposta{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s cubic-bezier(.2,.8,.2,1); }
.faq-voce.aperta .faq-risposta{ grid-template-rows:1fr; }
.faq-risposta > div{ overflow:hidden; }
.faq-risposta p{ color:var(--grafite); padding-bottom:1.4rem; max-width:75ch; }

/* contatti */
.contatti-griglia{ display:grid; gap:clamp(2rem,4vw,4rem); grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); align-items:start; }
.rubrica{ display:grid; gap:1.25rem; margin-top:2rem; }
.voce-rubrica{ display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start; text-decoration:none; }
.voce-rubrica .ico{ width:38px; height:38px; border-radius:50%; border:1px solid var(--linea); display:grid; place-items:center; color:var(--verde-scuro); flex:none; transition:.25s; }
.voce-rubrica:hover .ico{ background:var(--verde); color:#fff; border-color:var(--verde); }
.voce-rubrica dt{ font-family:var(--dati); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--grafite); }
.voce-rubrica dd{ margin:.1rem 0 0; font-size:1.05rem; }

form{ display:grid; gap:1rem; }
.riga-form{ display:grid; gap:1rem; grid-template-columns:1fr 1fr; }
label.campo-form{ display:grid; gap:.35rem; }
label.campo-form > span{ font-family:var(--dati); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--grafite); }
input[type="text"], input[type="email"], input[type="tel"], select, textarea{
  font:inherit; font-size:.98rem; color:var(--inchiostro);
  background:var(--bianco); border:1px solid var(--linea); border-radius:12px;
  padding:.85rem 1rem; width:100%; transition:border-color .25s, box-shadow .25s;
}
textarea{ min-height:130px; resize:vertical; }
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--verde); box-shadow:0 0 0 4px rgba(135,171,66,.16); }
.privacy-check{ display:flex; gap:.7rem; align-items:flex-start; font-size:.82rem; color:var(--grafite); }
.privacy-check input{ margin-top:.25rem; accent-color:var(--verde); width:18px; height:18px; flex:none; }

/* footer */
.pie{ background:var(--inchiostro); color:#EDEFE8; padding-block:clamp(3rem,6vw,5rem) 2rem; position:relative; z-index:2; }
.pie a{ text-decoration:none; }
.pie-griglia{ display:grid; gap:2.5rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.pie img{ height:44px; width:auto; margin-bottom:1.2rem; }
.pie h4{ font-family:var(--dati); font-weight:400; font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:#9AA48C; margin:0 0 1rem; }
.pie li{ margin-bottom:.55rem; }
.pie li a:hover{ color:var(--verde-chiaro); }
.pie-basso{ margin-top:3rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.14); display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.78rem; color:#9AA48C; }

/* whatsapp / azione fissa */
.azione-fissa{
  position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); z-index:50;
  display:flex; flex-direction:column; gap:.6rem;
}
.bolla{
  width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center; text-decoration:none;
  background:var(--bianco); color:var(--inchiostro);
  box-shadow:var(--ombra-2); border:1px solid var(--linea);
  transition:transform .25s cubic-bezier(.2,.8,.2,1);
}
.bolla:hover{ transform:scale(1.08); }
.bolla--wa{ background:#25D366; color:#fff; border-color:#25D366; }

/* rivelazione allo scroll */
.rivela{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.rivela.dentro{ opacity:1; transform:none; }
.rivela.d1{ transition-delay:.08s; } .rivela.d2{ transition-delay:.16s; }
.rivela.d3{ transition-delay:.24s; } .rivela.d4{ transition-delay:.32s; }

/* schermo di caricamento */
#loader{
  position:fixed; inset:0; z-index:200; background:var(--luce);
  display:grid; place-items:center; gap:1rem;
  transition:opacity .8s ease, visibility .8s;
}
#loader.via{ opacity:0; visibility:hidden; }
#loader .sole-load{ width:64px; height:64px; border-radius:50%; border:4px solid var(--nebbia); border-top-color:var(--verde); animation:gira 1s linear infinite; }
@keyframes gira{ to{ transform:rotate(360deg); } }
#loader p{ font-family:var(--dati); font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--grafite); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px){
  .config-griglia{ grid-template-columns:1fr; }
  .contatti-griglia{ grid-template-columns:1fr; }
  .plancia{ grid-template-columns:1fr 1fr; }
  .plancia .sole-ctrl{ grid-column:1 / -1; }
}
@media (max-width: 820px){
  .hamburger{ display:block; margin-left:auto; }
  .nav{
    position:fixed; inset:0; z-index:-1;
    background:var(--bianco);
    flex-direction:column; justify-content:center; align-items:flex-start;
    gap:1.2rem; padding:0 var(--gutter);
    clip-path:circle(0% at calc(100% - 3rem) 2.5rem);
    transition:clip-path .6s cubic-bezier(.16,1,.3,1);
  }
  .testata.aperto .nav{ clip-path:circle(150% at calc(100% - 3rem) 2.5rem); }
  .nav a{ font-family:var(--display); font-size:1.9rem; font-stretch:112%; letter-spacing:0; text-transform:uppercase; }
  .nav .btn{ font-family:var(--dati); font-size:.85rem; }
  .hero{ align-items:flex-end; }
  .hero h1{ font-size:clamp(2.5rem,12vw,4rem); }
  .suggerimento{ display:none; }
  .anatomia, .config{ min-height:auto; }
  .fase + .fase{ border-left:0; }
  .riga-form{ grid-template-columns:1fr; }
}
@media (max-width: 560px){
  .plancia{ grid-template-columns:1fr; }
  .risultati{ grid-template-columns:1fr; }
  .marchio img{ height:26px; }
}

/* movimento ridotto */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .rivela{ opacity:1; transform:none; }
  .hero h1 .riga > span{ transform:none; }
  .hero-sotto, .hero-azioni, .plancia{ opacity:1; }
  .ringed ellipse{ stroke-dashoffset:0; }
}

/* stampa */
@media print{
  #scena, .azione-fissa, .testata, .etichette, #loader{ display:none !important; }
  body{ background:#fff; }
}

/* ---------------------------------------------------------
   Interazione con la scena 3D: nelle sezioni "palco" il
   contenitore lascia passare il puntatore verso la zona di
   trascinamento, mentre i blocchi di contenuto restano attivi.
   --------------------------------------------------------- */
.palco > .wrap{ pointer-events:none; }
.palco .colonna,
.palco .plancia,
.palco .consolle,
.palco .risultati,
.palco .nodi,
.palco a,
.palco button,
.palco input,
.palco label{ pointer-events:auto; }


/* ---------------------------------------------------------
   Paragrafi guida sopra la scena 3D: testo bianco su vetro
   scuro, leggibile sia sul cielo chiaro sia sulla casa.
   --------------------------------------------------------- */
.lead--chiaro{
  color:#FFFFFF;
  background:rgba(18,22,14,.56);
  backdrop-filter:blur(12px) saturate(1.2);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
  border-left:3px solid var(--verde);
  border-radius:0 16px 16px 0;
  padding:1rem 1.35rem;
  box-shadow:0 12px 34px rgba(20,23,15,.20);
}
.hero-sotto.lead--chiaro{ max-width:46ch; }

/* pulsante della testata: cornice piu ampia */
.btn--testata{
  padding:1.05rem 1.9rem;
  font-size:.82rem;
  letter-spacing:.13em;
  flex:none;
}

/* ---------------------------------------------------------
   CHI SIAMO
   --------------------------------------------------------- */
.ritratto{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,4.5rem);
  align-items:start;
  margin-bottom:clamp(3rem,5vw,4.5rem);
}
.ritratto-citazione{
  margin:0;
  border-left:3px solid var(--verde);
  padding-left:clamp(1.2rem,2.5vw,2.4rem);
}
.ritratto-citazione blockquote{
  margin:0;
  font-family:var(--display);
  font-size:clamp(1.15rem,1.9vw,1.6rem);
  font-stretch:104%;
  line-height:1.38;
  letter-spacing:-.005em;
}
.ritratto-citazione blockquote p + p{ margin-top:1.1rem; }
.ritratto-citazione figcaption{ margin-top:1.6rem; display:flex; flex-direction:column; gap:.25rem; }
.firma{ font-family:var(--display); font-size:1.15rem; font-stretch:112%; text-transform:uppercase; letter-spacing:.02em; }
.ruolo{ font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--verde-scuro); }

.ritratto-fatti{ display:grid; gap:1.6rem; }
.ritratto-fatti > div{ border-top:2px solid var(--inchiostro); padding-top:1rem; }
.fatto{
  font-family:var(--display); font-stretch:115%; line-height:1;
  font-size:clamp(1.7rem,3vw,2.3rem); letter-spacing:-.02em;
  margin:.25rem 0 .5rem;
}
.ritratto-fatti .muto{ font-size:.9rem; line-height:1.5; }

.valori{ display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.valore{
  background:var(--bianco);
  border:1px solid var(--linea);
  border-radius:var(--raggio);
  padding:1.5rem 1.4rem 1.6rem;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.valore:hover{ transform:translateY(-4px); box-shadow:var(--ombra-1); }
.valore h3{ font-size:1.05rem; text-transform:uppercase; font-stretch:110%; margin-bottom:.55rem; }
.valore p{ font-size:.92rem; color:var(--grafite); }

@media (max-width: 900px){
  .ritratto{ grid-template-columns:1fr; }
}


/* ---------------------------------------------------------
   CHI SIAMO — impaginazione con il ritratto
   --------------------------------------------------------- */
.ritratto{
  grid-template-columns:minmax(210px,.72fr) minmax(0,1.7fr);
  align-items:stretch;
}

/* la fotografia si allunga fino all'altezza del testo accanto,
   invece di imporre lei l'altezza della riga */
.ritratto-foto{ margin:0; display:flex; flex-direction:column; height:100%; }
.ritratto-foto img{
  flex:1 1 0; min-height:320px; height:auto; aspect-ratio:auto;
  width:100%; object-fit:cover; object-position:50% 18%;
  border-radius:var(--raggio);
  box-shadow:var(--ombra-2);
}
.ritratto-foto figcaption{
  margin-top:1.2rem; padding-left:1rem;
  border-left:3px solid var(--verde);
  display:flex; flex-direction:column; gap:.2rem;
}

.ritratto-corpo{ display:grid; gap:clamp(1.8rem,3vw,2.6rem); }

.ritratto-citazione{
  margin:0; border-left:0; padding-left:0;
  font-family:var(--display);
  font-size:clamp(1.1rem,1.75vw,1.5rem);
  font-stretch:104%; line-height:1.42; letter-spacing:-.005em;
  color:var(--inchiostro);
}
.ritratto-citazione p + p{ margin-top:1.1rem; }

.ritratto-fatti{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; }

@media (max-width: 1100px){
  .ritratto-fatti{ grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }
}
@media (max-width: 900px){
  .ritratto{ grid-template-columns:1fr; }
  .ritratto-foto{ max-width:420px; height:auto; }
  .ritratto-foto img{ flex:none; aspect-ratio:4/3; min-height:0; object-position:50% 16%; }
}

/* ---------------------------------------------------------
   Pulsante della testata: cornice piu ampia
   --------------------------------------------------------- */
.btn--testata{
  padding:1.2rem 2.3rem;
  font-size:.86rem;
  letter-spacing:.14em;
  border-width:1.5px;
}
.testata.compatta .btn--testata{ padding:1.05rem 2.1rem; }

/* ---------------------------------------------------------
   Ritocchi per schermi stretti: nulla deve sporgere di lato
   --------------------------------------------------------- */
@media (max-width: 820px){
  .hero h1{ font-size:clamp(2.1rem, 10.5vw, 3.6rem); }
  .ringed svg{ width:120%; }
  .btn--testata{ padding:1.05rem 1.9rem; }
  .plancia, .consolle, .risultati, .griglia-servizi, .valori{ max-width:100%; }
  .titolo{ overflow-wrap:break-word; }
}