/* I caratteri: serviti dal nostro dominio, vedi car.py per il perche`. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(caratteri/archivo-400-900-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(caratteri/archivo-400-900-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(caratteri/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(caratteri/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(caratteri/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(caratteri/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==================================================================
   De Masi Impianti — foglio unico per tutte le pagine.
   Palette del blocco 1. Unità 8 px. Angoli a zero. Nessuna ombra.
   ================================================================== */
:root{
  --navy:#0b1f2e; --navy-scuro:#071620; --navy-2:#0f2b3d; --navy-3:#123449; --navy-4:#17445e;
  --rame:#9a5430; --rame-scuro:#5c2f18; --rame-chiaro:#e0a078;
  --verde:#2f6b4f; --verde-chiaro:#86c9a6;
  /* `carta` e `bianco` erano a tre punti di distanza: le fasce chiare e quelle
     bianche si leggevano come un unico blocco. Ora la carta ha un tono freddo
     riconoscibile, imparentato con il navy, e le schede bianche dentro
     staccano davvero. */
  --carta:#e6ecf0; --bianco:#fff; --filo:#cbd8e1; --filo-tenue:#dde7ee;
  --testo:#0b1f2e; --testo-2:#3d5568; --testo-3:#6a8296;
  --errore:#a4271c;
  --ease:cubic-bezier(.22,.61,.36,1);
  --barra-h:68px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--carta);color:var(--testo);
  font-family:Archivo,system-ui,sans-serif;font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
.mono{font-family:"IBM Plex Mono",monospace}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--rame);outline-offset:3px;border-radius:2px}
.su-scuro :focus-visible{outline-color:var(--rame-chiaro)}
.salta{position:absolute;left:12px;top:-64px;z-index:100;background:var(--rame);color:#fff;
  padding:12px 18px;font-weight:700;text-decoration:none;transition:top .2s var(--ease)}
.salta:focus{top:12px}

.w{width:100%;max-width:1560px;margin:0 auto;padding:0 20px}
@media (min-width:800px){.w{padding:0 48px}}
@media (min-width:1400px){.w{padding:0 72px}}
.stretto{max-width:1160px}

/* ---------------- moto ---------------- */
[data-velo]{--rit:0ms}
@media (prefers-reduced-motion:no-preference){
  /* Il ritaglio sta su un involucro INTERNO, non sull'elemento.
     Ritagliando l'elemento stesso la sua area visibile va a zero, e
     IntersectionObserver calcola l'intersezione proprio su quell'area: il
     titolo restava nascosto perche` era nascosto. Si vedeva come una fascia
     blu vuota sopra le chiusure di pagina. L'involucro lo inserisce moto.js. */
  .js [data-velo] > .velo-i{display:block;clip-path:inset(0 0 102% 0);opacity:.001;
    transition:clip-path .9s cubic-bezier(.2,.75,.2,1) var(--rit),
               opacity .7s ease var(--rit)}
  .js [data-velo].dentro > .velo-i{clip-path:inset(0 0 -2% 0);opacity:1}
  .js [data-sale]{transform:translateY(22px);opacity:0;
    transition:transform .85s var(--ease) var(--rit),opacity .65s ease var(--rit)}
  .js [data-sale].dentro{transform:none;opacity:1}
}
@media (prefers-reduced-motion:reduce){[data-velo],[data-sale]{clip-path:none;opacity:1;transform:none}}

/* ---------------- intestazione ---------------- */
.barra{position:fixed;inset:0 0 auto;z-index:60;color:#fff;transition:transform .4s var(--ease)}
.barra::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(7,22,32,.82),rgba(7,22,32,0))}
.barra.solida::before{background:var(--navy-scuro);border-bottom:1px solid var(--navy-3)}
.barra.via{transform:translateY(-110%)}
.barra .w{display:flex;align-items:center;gap:16px;min-height:var(--barra-h)}
.barra .logo{display:inline-flex;align-items:center;min-height:52px;flex:0 0 auto}
/* Il logo era servito a 600 px e disegnato a 34: non si poteva ingrandire
   senza sgranare. Ora la sorgente e` a 1400 px e la misura a schermo sale. */
/* Il disegno riempiva solo il 73% dell'altezza del file: il resto era vuoto
   sopra e sotto, e a 42 px la scritta IMPIANTI non si leggeva. Il viewBox ora
   stringe sul disegno, e la misura a schermo sale. */
.barra .logo img{height:48px;width:auto}
@media (min-width:800px){.barra .logo img{height:58px}}
.barra nav{display:none;margin-left:auto}
@media (min-width:1080px){.barra nav{display:block}}
.barra nav ul{display:flex;align-items:center;gap:26px;margin:0;padding:0;list-style:none}
.barra nav a{display:inline-flex;align-items:center;min-height:48px;font-size:14.5px;font-weight:500;
  text-decoration:none;color:#dbe6ee;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.barra nav a:hover{color:#fff;border-bottom-color:var(--rame-chiaro)}
/* con la voce Home le voci sono sette: nessuna deve andare a capo. Fra 1080
   e 1279 px le voci si stringono un poco e ci stanno tutte, numero compreso
   (misurato a 1080, 1180, 1280, 1440). */
.barra nav a,.barra .tel,.barra .cta{white-space:nowrap}
@media (min-width:1080px) and (max-width:1279px){
  .barra nav ul{gap:18px}
  .barra nav a{font-size:14px}}
.barra nav a[aria-current]{color:#fff;border-bottom-color:var(--rame-chiaro)}
.barra .destra{margin-left:auto;display:flex;align-items:center;gap:14px}
@media (min-width:1080px){.barra .destra{margin-left:26px}}
.barra .tel{display:none;align-items:center;gap:8px;font-weight:700;font-size:15px;
  text-decoration:none;min-height:48px}
@media (min-width:560px){.barra .tel{display:inline-flex}}
.barra .cta{display:none;align-items:center;min-height:46px;padding:0 18px;background:var(--rame-chiaro);
  color:var(--navy-scuro);font-weight:800;font-size:14.5px;text-decoration:none;transition:background .2s}
.barra .cta:hover{background:#fff}
@media (min-width:1080px){.barra .cta{display:inline-flex}}
.barra .apri{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;
  background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;font-size:19px;cursor:pointer}
@media (min-width:1080px){.barra .apri{display:none}}
/* pannello del menu su schermo piccolo */
.pannello{position:fixed;inset:0;z-index:70;background:var(--navy-scuro);color:#fff;
  display:flex;flex-direction:column;padding:20px;transform:translateY(-100%);
  transition:transform .35s var(--ease);overflow-y:auto}
.pannello[data-aperto]{transform:none}
.pannello .capo{display:flex;align-items:center;justify-content:space-between;min-height:48px}
.pannello .capo img{height:44px;width:auto}
.pannello .chiudi{width:48px;height:48px;background:transparent;border:1px solid rgba(255,255,255,.35);
  color:#fff;font-size:19px;cursor:pointer}
.pannello ul{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column}
.pannello ul a{display:block;padding:18px 0;border-bottom:1px solid var(--navy-3);
  font-size:26px;font-weight:800;letter-spacing:-.03em;text-decoration:none}
.pannello ul a[aria-current]{color:var(--rame-chiaro)}
.pannello .sotto{margin-top:auto;padding-top:28px;display:grid;gap:12px}
.pannello .sotto a{display:flex;align-items:center;justify-content:center;min-height:56px;font-weight:800;
  text-decoration:none;border:1px solid var(--navy-4)}
.pannello .sotto a.pieno{background:var(--rame-chiaro);color:var(--navy-scuro);border-color:var(--rame-chiaro)}

/* ---------------- apertura ---------------- */
.apre{position:relative;overflow:hidden;background:var(--navy-scuro)}
/* `min-height`, non `height`: con l'altezza fissa il blocco di testo — che era
   ancorato in basso in posizione assoluta — cresceva verso l'ALTO quando non
   ci stava, e finiva sotto la barra fissa. Si vedeva al primo caricamento, con
   l'occhiello "Tortona (AL) · dal 1995" addosso al logo, e su ogni finestra
   bassa. Ora l'apertura e` un contenitore flessibile allineato in basso: se il
   contenuto chiede piu` spazio, la sezione cresce invece di sbordare. */
.apre.alta{min-height:100svh;display:flex;align-items:flex-end}
.apre.media{min-height:min(74svh,640px);display:flex;align-items:flex-end}
.apre .sfondo{position:absolute;inset:0;overflow:hidden}
.apre .sfondo img{position:absolute;left:0;top:-9%;width:100%;height:118%;object-fit:cover;
  transform-origin:50% 50%}
@media (prefers-reduced-motion:no-preference){.apre .sfondo img{will-change:transform}}
/* Due veli sovrapposti, non uno.
   Quello verticale da solo scendeva a .2 al 58% dell'altezza, ed e` esattamente
   la fascia dove sta il titolo: sull'apertura della home l'occhiello rame sul
   cielo al tramonto misurava 1,62:1. Il secondo velo e` orizzontale e tiene
   scura la META` SINISTRA, dove il testo sta sempre, lasciando leggibile la
   fotografia a destra: e` l'unico modo di alzare il contrasto senza spegnere
   l'immagine sotto. I valori sono quelli che fanno passare tutte e 30 le
   aperture al controllo in `audit.txt`, che li rimodella per misurarli. */
.apre::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(7,22,32,.94) 0%,rgba(7,22,32,.72) 30%,rgba(7,22,32,.42) 58%,rgba(7,22,32,.62) 100%)}
.apre::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to right,rgba(7,22,32,.8) 0%,rgba(7,22,32,.62) 40%,rgba(7,22,32,0) 78%)}
/* Fino a 1000 px il testo occupa tutta la larghezza: il velo che sfuma a
   destra non lo coprirebbe, e a 900 px tre aperture dei cantieri si fermavano
   a 4,15:1. Sotto quella soglia resta pieno, e la fotografia la si guarda
   comunque per intero perche` il titolo le sta sopra e non accanto. */
@media (max-width:1000px){
  .apre::before{background:linear-gradient(to right,rgba(7,22,32,.74) 0%,rgba(7,22,32,.68) 100%)}}
.apre .dentro-testo{position:relative;z-index:2;color:#fff;width:100%;
  padding:calc(var(--barra-h) + clamp(24px,4vh,40px)) 0 clamp(32px,6vh,72px)}
.apre.alta .dentro-testo{position:relative}
.apre h1{font-size:clamp(38px,7.6vw,110px);font-weight:900;letter-spacing:-.05em;line-height:.96;max-width:17ch}
.apre.alta h1{font-size:clamp(40px,8.6vw,132px)}
.apre h1 span{display:block;overflow:hidden}
.apre h1 b{display:block;font-weight:900}
.apre .occhio{display:inline-flex;align-items:center;gap:10px;font:500 11.5px/1 "IBM Plex Mono",monospace;
  letter-spacing:.16em;text-transform:uppercase;color:var(--rame-chiaro);margin-bottom:20px}
.apre .occhio i{display:block;width:26px;height:2px;background:var(--rame-chiaro)}
.apre .sotto{margin:clamp(18px,2.6vh,30px) 0 0;max-width:56ch;font-size:clamp(16px,1.5vw,20px);
  line-height:1.5;color:#dbe6ee}
.apre .azioni{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,3vh,34px)}
/* Su telefono e tablet lo zoccolo dei contatti (62 px) sta fisso in basso:
   un'apertura alta tutto lo schermo con il testo appoggiato sul fondo finiva
   con i pulsanti sotto lo zoccolo. L'apertura si ferma sopra lo zoccolo e il
   testo sale al centro dello spazio libero. Il titolo scende di misura sui
   telefoni stretti, altrimenti quattro righe da 50 px spingono giu` tutto. */
@media (max-width:1079px){
  .apre.alta{min-height:calc(100svh - 62px);align-items:center}
  .apre.media{align-items:center}
  .apre .dentro-testo{padding-bottom:clamp(28px,5vh,48px)}
  .apre .azioni .btn{flex:1 1 auto}
  /* il numero c'e` gia` nello zoccolo sempre visibile: nell'apertura era un
     doppione che spingeva il pulsante principale verso il bordo */
  .apre .azioni .btn-2[href^="tel:"]{display:none}}
@media (max-width:560px){
  .apre.alta h1{font-size:clamp(36px,10.4vw,52px)}
  .apre .azioni .btn{min-height:52px;padding:0 18px;font-size:15px}
}
/* telefoni bassi (SE, Android piccoli): stesso contenuto, spazi e titolo piu`
   raccolti, perche' i pulsanti restino sopra lo zoccolo al primo sguardo */
@media (max-width:560px) and (max-height:760px){
  .apre h1,.apre.alta h1{font-size:clamp(28px,8.4vw,40px);line-height:1}
  .apre .occhio{margin-bottom:12px}
  .apre .sotto{margin-top:12px;font-size:15px;line-height:1.45}
  .apre .azioni{margin-top:16px;gap:8px}
  .apre .azioni .btn{min-height:48px}
  .apre .dentro-testo{padding-top:calc(var(--barra-h) + 12px);padding-bottom:20px}
  .briciole + main .apre .dentro-testo{padding-top:16px}}

/* ---------------- bottoni ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 26px;
  font-family:inherit;font-weight:800;font-size:15.5px;text-decoration:none;border:2px solid transparent;
  cursor:pointer;transition:background .22s var(--ease),color .22s,border-color .22s,gap .28s var(--ease)}
.btn:hover{gap:16px}
.btn-1{background:var(--rame-chiaro);color:var(--navy-scuro);border-color:var(--rame-chiaro)}
.btn-1:hover{background:#fff;border-color:#fff}
.btn-2{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn-2:hover{background:rgba(255,255,255,.1);border-color:#fff}
.btn-scuro{background:var(--rame);color:#fff;border-color:var(--rame)}
.btn-scuro:hover{background:var(--rame-scuro);border-color:var(--rame-scuro)}
.btn-filo{background:transparent;color:var(--testo);border-color:var(--filo)}
.btn-filo:hover{border-color:var(--testo);background:#fff}

/* ---------------- testata di sezione ---------------- */
.sez{padding:clamp(56px,8vw,112px) 0}
.sez.chiara{background:var(--carta)}
.sez.bianca{background:var(--bianco)}
.sez.scura{background:var(--navy);color:#fff}
.sez.notte{background:var(--navy-scuro);color:#fff}
.testata{display:grid;gap:18px;margin-bottom:clamp(30px,4vw,54px)}
@media (min-width:1000px){.testata{grid-template-columns:minmax(0,1fr) minmax(0,44ch);gap:56px;align-items:end}}
.testata .occhio{display:flex;align-items:center;gap:10px;font:500 11px/1 "IBM Plex Mono",monospace;
  letter-spacing:.17em;text-transform:uppercase;color:var(--rame);margin-bottom:16px}
.testata .occhio i{display:block;width:24px;height:2px;background:var(--rame)}
.sez.scura .testata .occhio,.sez.notte .testata .occhio{color:var(--rame-chiaro)}
.sez.scura .testata .occhio i,.sez.notte .testata .occhio i{background:var(--rame-chiaro)}
.testata h1,.testata h2{font-size:clamp(28px,4.4vw,62px);max-width:17ch}
/* sotto-testata: stessa impaginazione, un gradino sotto come misura */
.testata h3{font-size:clamp(24px,3vw,40px);max-width:18ch;margin:0;
  font-weight:800;letter-spacing:-.035em;line-height:1.04}
.testata .sub{margin:0;font-size:clamp(16px,1.35vw,18.5px);line-height:1.6;color:var(--testo-2)}
.sez.scura .testata .sub,.sez.notte .testata .sub{color:#a9cade}
.testata .sub b{color:var(--testo);font-weight:700}
.sez.scura .testata .sub b,.sez.notte .testata .sub b{color:#fff}

/* ---------------- cifre, centrate ---------------- */
/* Il reticolo e` lo stesso disegno tecnico delle icone, portato al fondo:
   maglia da 46px, tratto navy-3, sfumato ai bordi cosi` non chiude la fascia
   in una scatola. Serve a dare un piano d'appoggio alle quattro cifre, che
   prima galleggiavano su una lastra vuota. */
.sez.scura{position:relative;isolation:isolate}
.sez.scura::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--navy-3) 1px,transparent 1px),
                   linear-gradient(90deg,var(--navy-3) 1px,transparent 1px);
  background-size:46px 46px;opacity:.22;
  -webkit-mask-image:radial-gradient(120% 70% at 50% 40%,#000 10%,transparent 72%);
          mask-image:radial-gradient(120% 70% at 50% 40%,#000 10%,transparent 72%)}
/* Sul telefono la fascia e` alta e stretta: la stessa maglia copriva tutto
   lo schermo e leggeva come carta millimetrata. Cresce con la larghezza. */
@media (min-width:640px){.sez.scura::before{background-size:56px 56px;opacity:.34}}
@media (min-width:1080px){.sez.scura::before{background-size:64px 64px;opacity:.5}}

.cifre-g{display:grid;gap:clamp(28px,3.4vw,44px);justify-items:center;text-align:center}
@media (min-width:640px){.cifre-g{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.cifre-g{grid-template-columns:repeat(4,1fr)}
  /* Undici pagine (i dieci cantieri e termosifoni) hanno tre cifre, non
     quattro: con la griglia fissa restava una colonna vuota a destra e
     l'ultima etichetta andava a capo. La griglia si adatta al numero vero. */
  .cifre-g:has(> .cifra:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
  .cifre-g:has(> .cifra:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}
  /* Con tre cifre il filetto della quarta non esiste: resta quello fra 2 e 3. */}
@media (min-width:640px) and (max-width:1079px){
  .cifre-g:has(> .cifra:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}}
/* `container-type` per poter dimensionare la cifra sulla SUA colonna e non
   sulla finestra: con `6.6vw` il "-55%" veniva 262px in una colonna da 253 e
   scavalcava il filetto. Il `min()` e` il tetto che glielo impedisce. */
/* `container-type:inline-size` toglie all'elemento la larghezza data dal
   contenuto: senza `width:100%` la cifra collassava a 44px e il carattere
   andava a zero. La larghezza deve arrivare dalla colonna della griglia. */
.cifra{width:100%;max-width:26ch;display:flex;flex-direction:column;align-items:center;
  container-type:inline-size}
.cifra{position:relative;padding:0 clamp(10px,1.6vw,22px)}
/* Filetto fra una cifra e l'altra: tiene insieme la riga senza aggiungere
   scatole. Compare solo dove le cifre sono affiancate davvero. */
@media (min-width:640px){
  .cifre-g > .cifra:nth-child(2)::before,
  .cifre-g > .cifra:nth-child(4)::before{content:"";position:absolute;
    left:0;top:6%;bottom:22%;width:1px;background:var(--navy-3)}}
@media (min-width:1080px){
  .cifre-g > .cifra:nth-child(3)::before{content:"";position:absolute;
    left:0;top:6%;bottom:22%;width:1px;background:var(--navy-3)}}
/* La stella accanto al 5,0: il voto senza il simbolo non si legge come voto.
   La regola e` legata alla classe e non a `.v`, altrimenti il flex apriva
   uno spazio anche fra il meno, il 55 e il per cento della quarta cifra. */
.cifra .v.voto{display:flex;align-items:baseline;justify-content:center;gap:.16em}
.cifra .v.voto .ico{width:.36em;height:.36em;align-self:center;
  color:var(--rame-chiaro);stroke-width:2}
.cifra .v{margin-bottom:18px;text-wrap:balance;font-weight:900;letter-spacing:-.06em;
  line-height:.88;font-variant-numeric:tabular-nums;
  font-size:min(clamp(54px,6.6vw,104px), 44cqi)}
/* Segni e unita` (il meno, il per cento, i gradi, "kW") vanno piu` piccoli: e`
   la convenzione tipografica dei numeri grandi, e recupera la larghezza che
   faceva sbordare la cifra. */
.cifra .v .u{font-size:.58em;letter-spacing:-.02em}
/* Valori a parola ("full electric", "caldo + freddo"): a 95px sarebbero larghi
   il doppio della colonna. */
.cifra .v.m{font-size:min(clamp(34px,4.2vw,62px), 26cqi)}
.cifra .v.l{font-size:min(clamp(24px,2.8vw,40px), 15cqi)}
.cifra .v.ris{color:var(--verde-chiaro)}
/* `margin-top:auto` invece di una misura fissa: quando una cifra va su due
   righe ("2 anni") la sua etichetta scendeva sotto le altre. Cosi` le
   etichette restano allineate sulla stessa base, comunque vada il testo. */
.cifra .e{margin-top:auto;padding-top:14px;border-top:1px solid var(--navy-3);
  font-size:14.5px;line-height:1.45;color:#a9cade;width:100%;max-width:24ch}

/* ---------------- cosa facciamo: due porte e una striscia ---------------- */
/* Si chiamavano `.via`/`.vie`, ma `.barra.via` esiste gia` da prima: e` lo stato
   dell'intestazione che si ritira scorrendo. La barra ritirata prendeva anche
   fondo bianco e bordo da questo componente. Rinominate in `porta`/`porte`. */
/* La sezione era tre schede di solo testo su fondo bianco. Divise in due,
   perche` il titolo dice "due modi" e i modi sono due: il fotovoltaico e la
   pompa di calore. Il terzo riquadro non era un modo, era un rimando ai
   lavori, e ora e` una striscia a se`. La striscia e` scura: riprende la
   fascia dei numeri e toglie alla sezione il bianco continuo. */
.porte{display:grid;gap:clamp(16px,2vw,26px)}
@media (min-width:860px){.porte{grid-template-columns:repeat(2,1fr)}}
.porta{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:var(--bianco);
  border:1px solid var(--filo);overflow:hidden;transition:border-color .3s}
.porta:hover,.porta:focus-visible{border-color:var(--navy)}
.porta .ph{overflow:hidden;background:var(--filo);aspect-ratio:16/10}
.porta .ph img{width:100%;height:100%;object-fit:cover;display:block}
@media (prefers-reduced-motion:no-preference){
  .porta .ph img{transition:transform .7s cubic-bezier(.2,.7,.3,1)}
  .porta:hover .ph img{transform:scale(1.05)}}
.porta .testo{padding:clamp(22px,2.6vw,34px)}
.porta .ico{color:var(--rame);margin-bottom:14px}
.porta .n{display:block;font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rame);margin-bottom:12px}
.porta h2,.porta h3{margin:0 0 12px;font-size:clamp(22px,2.3vw,32px);letter-spacing:-.03em;line-height:1.1}
.porta p{margin:0;font-size:16px;line-height:1.6;color:var(--testo-2);max-width:46ch}
/* La riga finale andava a capo in una scheda e non nell'altra, e finiva ad
   altezze diverse perche` i titoli occupano una o due righe. Ora la scheda e`
   una colonna flessibile e la riga si appoggia al fondo: le tre si allineano
   comunque vada il testo. E il dato sta sempre sopra il comando, cosi` la
   struttura e` identica in tutte. */
.porta .testo{display:flex;flex-direction:column;flex:1 1 auto}
.porta .riga{display:grid;gap:9px;justify-items:start;
  margin-top:auto;padding-top:16px;border-top:1px solid var(--filo-tenue)}
.porta .dato{font-size:clamp(26px,2.6vw,38px);font-weight:900;letter-spacing:-.04em}
.porta .dato.ris{color:var(--verde)}
.vai{font:500 13.5px/1 "IBM Plex Mono",monospace;color:var(--rame);white-space:nowrap}
.striscia{display:grid;gap:clamp(18px,2.4vw,34px);align-items:center;
  margin-top:clamp(16px,2vw,26px);padding:clamp(18px,2.2vw,26px);
  background:var(--navy);color:#fff;text-decoration:none;transition:background .3s}
.striscia:hover,.striscia:focus-visible{background:var(--navy-2)}
@media (min-width:980px){.striscia{grid-template-columns:auto 1fr auto}}
.striscia .mini{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-width:300px}
.striscia .mini img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.striscia .n{display:block;font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rame-chiaro);margin-bottom:10px}
.striscia h3{margin:0 0 8px;font-size:clamp(20px,2vw,27px);letter-spacing:-.03em}
.striscia p{margin:0;font-size:15.5px;line-height:1.55;color:#a9cade;max-width:56ch}
/* La cifra e il comando incolonnati: affiancati si toccavano. */
.striscia .coda{display:grid;gap:9px;white-space:nowrap}
@media (min-width:980px){.striscia .coda{justify-items:end;text-align:right}}
.striscia .coda .dato{font-size:clamp(22px,2.2vw,30px);font-weight:900;letter-spacing:-.04em}
.striscia .vai{color:var(--rame-chiaro)}

.elenco-fitto{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:2px 18px;margin:14px 0 0;padding:0;list-style:none}
.elenco-fitto li{display:block}
/* padding 12px: 21px di riga + 24 = 45, sopra i 44 richiesti */
.elenco-fitto a{display:block;padding:12px 0;font-size:15.5px;color:var(--rame);
  text-decoration:none;border-bottom:1px solid var(--filo-tenue)}
.elenco-fitto a:hover{color:var(--navy)}

/* ---------------- calcolatore del risparmio ---------------- */
/* Sostituisce il "configuratore" del vecchio sito, che era uno shortcode di
   un plugin e oggi non renderizza piu` nemmeno la`. Qui il conto e` scritto
   in chiaro sotto il risultato: una stima che non mostra da dove esce non
   vale niente, e queste vanno poi verificate in sopralluogo. */
.calcolo{display:grid;gap:clamp(22px,3vw,40px)}
@media (min-width:920px){.calcolo{grid-template-columns:minmax(0,420px) minmax(0,1fr);
  align-items:start}}
.calcolo .campi{display:grid;gap:18px;background:var(--bianco);border:1px solid var(--filo);
  padding:clamp(20px,2.4vw,30px)}
.calcolo .campo{display:flex;flex-direction:column;gap:7px}
.calcolo label{font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.13em;
  text-transform:uppercase;color:var(--testo-2)}
.calcolo input[type=number],.calcolo select{font:400 16.5px/1.3 Archivo,sans-serif;
  padding:12px 13px;border:1px solid var(--filo);background:var(--bianco);color:var(--testo)}
.calcolo input:focus-visible,.calcolo select:focus-visible{outline:3px solid var(--rame);
  outline-offset:2px}
.esito{background:var(--navy);color:#fff;padding:clamp(24px,3vw,38px)}
.esito .capo{font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rame-chiaro)}
.esito .grande{font-size:clamp(46px,7vw,92px);font-weight:900;letter-spacing:-.05em;
  line-height:.95;margin:16px 0 4px;font-variant-numeric:tabular-nums}
.esito .sotto-grande{font-size:16px;color:#a9cade;margin:0 0 clamp(20px,2.6vw,30px)}
.esito .righe{display:grid;gap:0;border-top:1px solid var(--navy-3)}
.esito .righe div{display:flex;justify-content:space-between;gap:20px;padding:13px 0;
  border-bottom:1px solid var(--navy-3);font-size:15.5px;color:#dbe6ee}
.esito .righe b{font-weight:700;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.esito .conto{margin:clamp(20px,2.6vw,30px) 0 0;font:400 13.5px/1.7 "IBM Plex Mono",monospace;
  color:#a9cade}
.esito .conto b{color:#dbe6ee;font-weight:500}
.esito .btn{margin-top:clamp(22px,2.8vw,32px)}

/* ---------------- apertura con il modulo ---------------- */
/* Su `preventivo.html` il modulo stava sotto un'apertura alta 74svh: chi
   arriva dal comando "Preventivo gratuito" vedeva una fotografia e doveva
   scorrere per trovare i campi. Qui il modulo e` la prima cosa in pagina. */
.apre-modulo{position:relative;overflow:hidden;background:var(--navy-scuro);color:#fff;
  padding:calc(var(--barra-h) + clamp(28px,4vh,56px)) 0 clamp(44px,6vw,84px)}
.apre-modulo .sfondo{position:absolute;inset:0;overflow:hidden}
.apre-modulo .sfondo img{width:100%;height:100%;object-fit:cover;display:block}
.apre-modulo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to right,rgba(7,22,32,.94) 0%,rgba(7,22,32,.86) 46%,rgba(7,22,32,.72) 100%)}
.apre-modulo > .w{position:relative;z-index:2;display:grid;gap:clamp(28px,4vw,56px);
  align-items:start}
@media (min-width:980px){.apre-modulo > .w{grid-template-columns:minmax(0,1fr) minmax(0,520px)}}
.apre-modulo .occhio{display:inline-flex;align-items:center;gap:10px;
  font:500 11.5px/1 "IBM Plex Mono",monospace;letter-spacing:.16em;text-transform:uppercase;
  color:var(--rame-chiaro);margin-bottom:20px}
.apre-modulo .occhio i{display:block;width:26px;height:2px;background:var(--rame-chiaro)}
.apre-modulo h1{font-size:clamp(32px,4.6vw,62px);font-weight:900;letter-spacing:-.045em;
  line-height:1.02;margin:0 0 clamp(16px,2vh,24px);max-width:16ch}
.apre-modulo .sotto{margin:0;font-size:clamp(16px,1.4vw,19px);line-height:1.55;
  color:#dbe6ee;max-width:48ch}
.apre-modulo .garanzie{display:grid;gap:12px;margin:clamp(24px,3vh,36px) 0 0;padding:0;list-style:none}
.apre-modulo .garanzie li{display:flex;gap:13px;font-size:15.5px;line-height:1.5;color:#dbe6ee}
.apre-modulo .garanzie li::before{content:"";flex:0 0 auto;width:18px;height:2px;
  background:var(--rame-chiaro);margin-top:11px}
/* `padding` verticale per portare l'area toccabile a 44px: la riga di testo
   da sola ne misurava 34. */
.apre-modulo .tel-riga{display:inline-flex;align-items:center;gap:12px;
  margin-top:clamp(16px,2.4vh,26px);padding:11px 0;color:#fff;text-decoration:none;
  font:900 clamp(24px,2.6vw,34px)/1 Archivo,sans-serif;letter-spacing:-.04em}
.apre-modulo .tel-riga .ico{width:26px;height:26px;color:var(--rame-chiaro)}
.apre-modulo .tel-riga:hover{color:var(--rame-chiaro)}
/* la scheda bianca del modulo */
.modulo-carta{background:var(--bianco);color:var(--testo);
  padding:clamp(22px,2.6vw,34px);border:1px solid var(--filo)}
.modulo-carta .capo{font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rame);margin-bottom:18px;display:block}

/* ---------------- incentivi in forma compatta ---------------- */
/* Erano tre schede alte quanto quelle dei servizi, per dire tre numeri.
   Qui diventano tre colonne di una tabella: stessa informazione, meno di
   meta` dell'altezza. */
.incentivi{display:grid;gap:0;border-top:1px solid var(--filo)}
@media (min-width:820px){.incentivi{grid-template-columns:repeat(3,1fr)}}
.incentivi > div{display:flex;flex-direction:column;gap:9px;
  padding:clamp(20px,2.2vw,28px) 0;border-bottom:1px solid var(--filo)}
@media (min-width:820px){
  .incentivi > div{padding:clamp(20px,2.2vw,28px) clamp(20px,2.4vw,34px) clamp(20px,2.2vw,28px) 0}
  .incentivi > div + div{border-left:1px solid var(--filo);
    padding-left:clamp(20px,2.4vw,34px)}}
/* Quattro voci invece di tre: a due colonne il bordo sinistro andrebbe
   anche sulla prima di ogni riga, e si vedrebbe come un filetto staccato. */
@media (min-width:820px) and (max-width:1099px){
  .incentivi.quattro{grid-template-columns:repeat(2,1fr)}
  .incentivi.quattro > div:nth-child(2n+1){border-left:0;padding-left:0}}
@media (min-width:1100px){.incentivi.quattro{grid-template-columns:repeat(4,1fr)}}
.incentivi .ico{color:var(--rame)}
.incentivi .n{font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rame)}
.incentivi h3{margin:0;font-size:clamp(18px,1.7vw,22px);letter-spacing:-.025em;line-height:1.15}
.incentivi p{margin:0;font-size:15px;line-height:1.55;color:var(--testo-2)}
.incentivi .dato{margin-top:auto;padding-top:12px;font-size:clamp(30px,3.2vw,44px);
  font-weight:900;letter-spacing:-.05em;line-height:1}
.incentivi .dato.ris{color:var(--verde)}

/* ---------------- azienda ---------------- */
/* Rifatta in simmetria: due colonne di testo uguali, tre numeri uguali, tre
   fotografie uguali a tutta larghezza. Prima erano una foto grande a sinistra
   e due rimpicciolite dentro una griglia annidata a destra — larghe meta` della
   prima e allineate a niente. */
.due-uguali{display:grid;gap:clamp(20px,2.6vw,44px)}
@media (min-width:820px){.due-uguali{grid-template-columns:repeat(2,1fr)}}
.due-uguali p{margin:0;font-size:17px;line-height:1.7;color:var(--testo-2)}
.due-uguali p b,.due-uguali p strong{color:var(--testo);font-weight:700}
/* i tre numeri dell'azienda */
.fatti{display:grid;gap:0;margin:clamp(28px,3.4vw,46px) 0 0;padding:0;
  border-top:1px solid var(--filo)}
@media (min-width:560px){.fatti{grid-template-columns:repeat(3,1fr)}}
.fatti > div{padding:16px 20px 18px 0;border-bottom:1px solid var(--filo)}
@media (min-width:560px){
  .fatti > div + div{border-left:1px solid var(--filo);padding-left:20px}}
.fatti dt{font:900 clamp(30px,3.4vw,48px)/1 Archivo,sans-serif;letter-spacing:-.045em}
.fatti dd{margin:9px 0 0;font-size:14px;line-height:1.45;color:var(--testo-2)}
.mezzo{margin-top:clamp(24px,3vw,38px)}
/* le tre fotografie, a tutta larghezza in terzi uguali */
.terzine{display:grid;gap:2px;margin-top:clamp(30px,4vw,56px);background:var(--filo)}
@media (min-width:700px){.terzine{grid-template-columns:repeat(3,1fr)}}
.terzine figure{margin:0}
.terzine .ph{overflow:hidden;background:var(--filo);aspect-ratio:1/1}
@media (min-width:700px){.terzine .ph{aspect-ratio:4/3}}
.terzine img{width:100%;height:100%;object-fit:cover;display:block}
.terzine figcaption{background:var(--navy);color:#a9cade;padding:15px 18px;
  font:500 11.5px/1.45 "IBM Plex Mono",monospace;min-height:62px;
  display:flex;align-items:center}

/* ---------------- scala delle temperature di mandata ---------------- */
/* Sostituisce il confronto prima/dopo trascinabile. Il punto della sezione non
   e` "guarda che belli i termosifoni nuovi": e` che una pompa di calore rende
   tanto piu` quanto piu` bassa e` la temperatura dell'acqua, e che su un
   impianto a radiatori quella temperatura si abbassa cambiando il radiatore,
   non il pavimento. Un diagramma lo dice, due fotografie no. */
.scala{position:relative;padding:clamp(30px,4vw,54px) 0 0}
.scala .asse{position:relative;height:3px;background:var(--filo);margin:0 0 clamp(72px,8vw,108px)}
.scala .tacca{position:absolute;top:-7px;width:1px;height:17px;background:var(--filo-tenue)}
.scala .tacca b{position:absolute;top:56px;left:50%;transform:translateX(-50%);
  font:500 11px/1 "IBM Plex Mono",monospace;color:var(--ink-2,var(--testo-2));letter-spacing:.06em}
/* le tre campate: pavimento, tubolari, ghisa */
.scala .campo{position:absolute;top:-3px;height:9px;border-radius:0}
.scala .campo::after{content:attr(data-et);position:absolute;left:0;top:-34px;white-space:nowrap;
  font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.13em;text-transform:uppercase}
.scala .campo.pav{background:var(--filo);}
.scala .campo.pav::after{color:var(--testo-2)}
.scala .campo.ghisa{background:var(--rame-chiaro)}
.scala .campo.ghisa::after{color:var(--rame)}
.scala .campo.noi{background:var(--verde);height:15px;top:-6px}
.scala .campo.noi::after{color:var(--verde);font-weight:700}
/* i due valori grandi, ancorati alla loro posizione sull'asse */
.scala .valore{position:absolute;top:82px;transform:translateX(-50%);text-align:center}
.scala .valore .v{font-size:clamp(40px,5.4vw,76px);font-weight:900;letter-spacing:-.05em;line-height:.9}
.scala .valore .e{margin-top:10px;font-size:14px;line-height:1.4;color:var(--testo-2);max-width:20ch}
.scala .valore.noi .v{color:var(--verde)}
.scala .valore.ghisa .v{color:var(--testo)}
/* la freccia fra i due: e` il movimento che racconta l'intervento */
/* La freccia sta SOTTO l'asse, non sopra: sull'asse litigava con le campate.
   Il selettore e` `.scala.dentro`, non `.dentro .scala`: la classe la mette
   l'osservatore sulla figura stessa, non su un antenato. */
.scala .salto{position:absolute;top:38px;height:3px;background:var(--verde);
  transform-origin:right center;transform:scaleX(0)}
.scala.dentro .salto{transform:scaleX(1)}
@media (prefers-reduced-motion:no-preference){
  .scala .salto{transition:transform 1.1s cubic-bezier(.2,.7,.2,1) .25s}}
.scala .salto::before{content:"";position:absolute;left:0;top:50%;width:12px;height:12px;
  border-left:3px solid var(--verde);border-bottom:3px solid var(--verde);
  transform:translateY(-50%) rotate(45deg)}
/* L'etichetta va centrata SOPRA la freccia: allineata a destra finiva
   addosso alla tacca dei 70 gradi. */
.scala .salto::after{content:"si abbassa la mandata";position:absolute;
  left:50%;transform:translateX(-50%);top:-17px;
  font:500 10.5px/1 "IBM Plex Mono",monospace;letter-spacing:.11em;text-transform:uppercase;
  color:var(--verde);white-space:nowrap}
.scala .nota{margin:clamp(30px,4vw,48px) 0 0;max-width:62ch;font-size:16.5px;line-height:1.65;
  color:var(--testo-2)}
.scala .nota b{color:var(--testo)}
/* Sotto i 720 px la scala orizzontale non ha spazio: diventa un elenco. */
@media (max-width:719px){
  .scala .asse,.scala .salto{display:none}
  .scala{padding-top:8px}
  .scala .gradi{display:grid;gap:22px}
  .scala .valore{position:static;transform:none;text-align:left;
    padding-left:16px;border-left:4px solid var(--filo)}
  .scala .valore.noi{border-left-color:var(--verde)}
  .scala .valore.ghisa{border-left-color:var(--rame-chiaro)}
  .scala .valore .e{max-width:none}}
@media (min-width:720px){.scala .gradi{position:relative;height:clamp(150px,17vw,210px)}}

/* ---------------- lastra fotografica ---------------- */
/* Fascia a tutta larghezza fra la prosa e le domande frequenti: le pagine
   di servizio avevano una sola immagine (l'apertura) in 4000 px di pagina.
   La didascalia non e` ornamento: dice cosa si sta guardando, ed e` il
   registro documentario del resto del sito. */
.lastra{position:relative;margin:0;background:var(--navy)}
/* Rapporto d'aspetto invece di un'altezza fissa: con l'altezza fissa il
   ritaglio mangiava un terzo dell'inquadratura e i soggetti verticali
   (il termosifone, la colonna dei tubi) restavano a meta`. */
.lastra img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
@media (min-width:900px){.lastra img{aspect-ratio:21/9}}
/* Variante a foto intera: per gli scatti reali di cantiere, che non si ritagliano. */
.lastra.intera{padding-top:clamp(20px,3vw,40px)}
.lastra.intera img{aspect-ratio:auto;width:min(100%,1195px);margin:0 auto;object-fit:contain}
.lastra figcaption{background:var(--navy-scuro);color:#a9cade}
.lastra figcaption span{display:block;padding:16px 0;
  font:500 12.5px/1.5 "IBM Plex Mono",monospace;letter-spacing:.02em;max-width:78ch}
.lastra figcaption b{color:#dbe6ee;font-weight:500}

/* ---------------- lavori ---------------- */
.pista{position:relative}
@media (min-width:800px){.pista{height:300vh}}
.fisso{display:flex;flex-direction:column;justify-content:center;overflow:hidden}
@media (min-width:800px){.fisso{position:sticky;top:0;height:100svh}}
.nastro{display:flex;gap:clamp(12px,1.6vw,26px);will-change:transform}
@media (max-width:799px){.nastro{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:16px;
  margin:0 -20px;padding-left:20px;padding-right:20px}}
/* frecce del nastro: servono solo dove il nastro si scorre col dito */
.frecce{display:flex;gap:10px;margin-top:22px}
.frecce + .w{margin-top:22px !important}
@media (min-width:800px){.frecce{display:none}}
.freccia{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;padding:0;
  background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff;cursor:pointer;
  transition:background .2s,border-color .2s,opacity .2s}
.freccia svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square}
.freccia:hover{background:rgba(255,255,255,.1);border-color:#fff}
.freccia:disabled{opacity:.3;cursor:default;background:transparent}
.opera{flex:0 0 clamp(236px,31vw,420px);text-decoration:none;color:inherit;scroll-snap-align:start}
.opera .ph{aspect-ratio:3/4;overflow:hidden;background:var(--navy-2)}
.opera .ph img{width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:no-preference){
  .opera .ph img{transition:transform 1.1s var(--ease)}
  .opera:hover .ph img{transform:scale(1.04)}}
.opera .bd{padding-top:16px;display:flex;flex-direction:column;gap:7px}
.opera .meta{font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:#7d9bad}
.opera h3{font-size:clamp(17px,1.5vw,22px);font-weight:700;letter-spacing:-.025em;line-height:1.12}
.opera .es{font-size:clamp(25px,2.5vw,38px);font-weight:900;letter-spacing:-.05em;margin-top:2px}
.opera .es.ris{color:var(--verde-chiaro)}
.opera:hover h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;
  text-decoration-color:var(--rame-chiaro)}

/* ---------------- fasce fotografiche ---------------- */
.fascia{position:relative;display:grid;min-height:86svh;align-items:center;overflow:hidden}
.fascia .ph{position:absolute;inset:0;overflow:hidden}
.fascia .ph img{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;will-change:transform}
.fascia::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(7,22,32,.92) 0%,rgba(7,22,32,.64) 45%,rgba(7,22,32,.52) 100%)}
@media (min-width:1000px){
  .fascia::after{background:linear-gradient(to right,rgba(7,22,32,.93) 0%,rgba(7,22,32,.85) 34%,rgba(7,22,32,.48) 62%,rgba(7,22,32,.3) 100%)}
  .fascia.destra::after{background:linear-gradient(to left,rgba(7,22,32,.93) 0%,rgba(7,22,32,.85) 34%,rgba(7,22,32,.48) 62%,rgba(7,22,32,.3) 100%)}
}
.fascia .txt{position:relative;z-index:2;color:#fff;padding:clamp(52px,8vw,110px) 0}
@media (min-width:1000px){.fascia .txt{width:min(56%,760px)}.fascia.destra .txt{margin-left:auto}}
.fascia h2{font-size:clamp(30px,5.2vw,82px);max-width:14ch}
.fascia .occhio{display:flex;align-items:center;gap:10px;font:500 11px/1 "IBM Plex Mono",monospace;
  letter-spacing:.17em;text-transform:uppercase;color:var(--rame-chiaro);margin-bottom:18px}
.fascia .occhio i{display:block;width:24px;height:2px;background:var(--rame-chiaro)}
.fascia p{margin:clamp(16px,2vw,26px) 0 0;max-width:48ch;font-size:clamp(16px,1.35vw,18.5px);
  line-height:1.55;color:#dbe6ee}
.fascia ul{margin:clamp(20px,2.4vw,30px) 0 0;padding:0;list-style:none;display:grid;gap:11px;max-width:46ch}
.fascia li{display:flex;gap:14px;font-size:15.5px;line-height:1.5;color:#dbe6ee}
.fascia li::before{content:"";flex:0 0 auto;width:20px;height:2px;background:var(--rame-chiaro);margin-top:11px}
.fascia .azioni{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,38px)}

/* ---------------- griglie generiche ---------------- */
.griglia{display:grid;gap:clamp(16px,2vw,26px)}
@media (min-width:700px){.griglia.due{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.griglia.tre{grid-template-columns:repeat(3,1fr)}}
@media (min-width:700px) and (max-width:899px){.griglia.tre{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.griglia.quattro{grid-template-columns:repeat(4,1fr)}}
@media (min-width:640px) and (max-width:999px){.griglia.quattro{grid-template-columns:repeat(2,1fr)}}

/* ---------------- icone ---------------- */
/* Lo sprite sta in pagina e non fuori: `<use>` verso un file esterno non
   viene risolto da Chrome. Il costo e` 2,7 kB, compressi molto meno. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
/* `<use>` clona dentro l'svg che lo richiama, quindi gli attributi di tratto
   dello sprite non arrivano: vanno rimessi qui. */
.ico{display:block;flex:none;width:32px;height:32px;
  fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter}
.scheda .ico{color:var(--rame);margin-bottom:2px}
.sez.scura .scheda .ico,.sez.notte .scheda .ico{color:var(--rame-chiaro)}

.scheda{background:var(--bianco);border:1px solid var(--filo);padding:clamp(20px,2.4vw,30px);
  display:flex;flex-direction:column;gap:12px}
.sez.scura .scheda,.sez.notte .scheda{background:var(--navy-2);border-color:var(--navy-3)}
.scheda h3{font-size:clamp(19px,1.8vw,24px);letter-spacing:-.025em;line-height:1.14}
.scheda p{margin:0;font-size:15.5px;line-height:1.6;color:var(--testo-2)}
.sez.scura .scheda p,.sez.notte .scheda p{color:#a9cade}
.scheda .n{font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--rame)}
.sez.scura .scheda .n,.sez.notte .scheda .n{color:var(--rame-chiaro)}
.scheda .dato{margin-top:auto;padding-top:14px;border-top:1px solid var(--filo-tenue);
  font-size:clamp(24px,2.4vw,34px);font-weight:900;letter-spacing:-.04em}
.sez.scura .scheda .dato,.sez.notte .scheda .dato{border-top-color:var(--navy-3)}
.scheda .dato.ris{color:var(--verde)}
.sez.scura .scheda .dato.ris,.sez.notte .scheda .dato.ris{color:var(--verde-chiaro)}

/* scheda lavoro con foto */
.lav{display:flex;flex-direction:column;background:var(--bianco);border:1px solid var(--filo);
  text-decoration:none;color:inherit;transition:border-color .2s;min-width:0}
.lav:hover{border-color:var(--rame)}
.lav .ph{aspect-ratio:4/3;overflow:hidden;background:var(--filo-tenue)}
.lav .ph img{width:100%;height:100%;object-fit:cover}
.lav .bd{padding:18px;display:flex;flex-direction:column;gap:9px;flex:1}
.lav .meta{font:500 10.5px/1 "IBM Plex Mono",monospace;letter-spacing:.13em;text-transform:uppercase;color:var(--testo-2)}
.lav h3{font-size:19px;letter-spacing:-.025em;line-height:1.2}
.lav:hover h3{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;
  text-decoration-color:var(--rame)}
.lav p{margin:0;font-size:14.5px;line-height:1.5;color:var(--testo-2)}
.lav .es{margin-top:auto;padding-top:14px;border-top:1px solid var(--filo-tenue);
  display:flex;align-items:baseline;gap:10px}
.lav .es .v{font-size:28px;font-weight:900;letter-spacing:-.04em}
.lav .es .v.ris{color:var(--verde)}
.lav .es .t{font-size:12.5px;line-height:1.35;color:var(--testo-2)}
/* Schede lavoro su fascia scura (Cantieri in zona, pagine provincia): la
   scheda resta chiara, quindi titolo e cifra riprendono il colore del testo. */
.scura .lav,.scura .lav h3,.scura .lav .es .v:not(.ris){color:var(--testo)}

/* ---------------- testo lungo ---------------- */
.prosa{max-width:68ch}
/* Blocco di prosa affiancato: il titolo va nella colonna di sinistra, il testo
   resta nella sua misura di lettura a destra. Serve a usare i 354 px che
   restavano vuoti a destra di ogni blocco su tutte le pagine di servizio:
   il limite di 68ch e` giusto, era il contenitore a essere piu` largo. */
@media (min-width:1040px){
  .prosa.affiancata{display:grid;max-width:none;
    grid-template-columns:minmax(0,1fr) minmax(0,64ch);
    column-gap:clamp(40px,4vw,72px)}
  .prosa.affiancata > h3{grid-column:1;grid-row:1 / span 20;
    margin:0;align-self:start;position:sticky;top:calc(var(--barra-h) + 26px);
    padding-right:20px;border-top:2px solid var(--rame);padding-top:16px}
  .prosa.affiancata > :not(h3){grid-column:2}
  .prosa.affiancata > :first-child:not(h3){grid-column:2;grid-row:1}}
.prosa p{margin:0 0 18px;font-size:17.5px;line-height:1.72;color:var(--testo-2)}
.prosa p b,.prosa strong{color:var(--testo);font-weight:700}
.sez.scura .prosa p,.sez.notte .prosa p{color:#a9cade}
.prosa h3{font-size:clamp(21px,2.2vw,28px);margin:34px 0 14px;letter-spacing:-.03em}
.prosa ul{margin:0 0 18px;padding:0;list-style:none;display:grid;gap:11px}
.prosa li{display:flex;gap:14px;font-size:16.5px;line-height:1.55;color:var(--testo-2)}
.prosa li::before{content:"";flex:0 0 auto;width:20px;height:2px;background:var(--rame);margin-top:12px}
.prosa a{color:var(--rame);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}

/* ---------------- briciole ---------------- */
/* Le briciole stanno sotto l'intestazione fissa, quindi devono lasciarle
   lo spazio: senza il padding finivano dietro al menu. Fondo scuro perché
   il testo della barra è bianco. */
.briciole{background:var(--navy-scuro);color:#a9cade;padding-top:var(--barra-h)}
.briciole ol{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:3px 0;list-style:none;align-items:center;
  font-size:13.5px;color:#7d9bad}
.briciole a{color:var(--rame-chiaro);text-decoration:none;padding:11px 0;display:inline-block}
.briciole a:hover{text-decoration:underline;text-underline-offset:3px}
.briciole [aria-current]{color:#dbe6ee}
/* sul telefono il percorso sta su una riga: il nome lungo della pagina si
   tronca (e` gia` scritto per intero nel titolo subito sotto) invece di
   andare a capo tre volte e spingere l'apertura sotto lo zoccolo */
@media (max-width:560px){
  .briciole ol{flex-wrap:nowrap;white-space:nowrap}
  .briciole li{flex:0 0 auto}
  .briciole li:last-child{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}}
/* con le briciole l'apertura non deve più scavalcare l'intestazione */
.briciole + main .apre .dentro-testo{padding-top:clamp(28px,4vh,56px)}

/* ---------------- domande ---------------- */
.faq{border-top:1px solid var(--filo)}
.faq details{border-bottom:1px solid var(--filo)}
.faq summary{list-style:none;cursor:pointer;padding:22px 0;display:flex;gap:20px;justify-content:space-between;
  align-items:flex-start;font-size:clamp(17px,1.7vw,21px);font-weight:700;letter-spacing:-.02em;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pi{flex:0 0 auto;color:var(--rame);font-family:"IBM Plex Mono",monospace;font-size:22px;
  line-height:1;transition:transform .22s var(--ease)}
.faq details[open] summary .pi{transform:rotate(45deg)}
.faq p{margin:0 0 22px;max-width:70ch;font-size:16.5px;line-height:1.65;color:var(--testo-2)}

/* ---------------- modulo ---------------- */
.modulo{display:grid;gap:16px;max-width:760px}
@media (min-width:640px){.modulo{grid-template-columns:1fr 1fr}}
.campo{display:flex;flex-direction:column;gap:7px;min-width:0}
.campo.largo{grid-column:1/-1}
.campo label{font:500 10.5px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;
  color:var(--testo-2)}
.campo input,.campo select,.campo textarea{font-family:inherit;font-size:16px;min-height:56px;padding:0 14px;
  border:1px solid var(--filo);background:var(--bianco);color:var(--testo)}
.campo textarea{min-height:120px;padding:14px;line-height:1.55}
.campo input:hover,.campo select:hover,.campo textarea:hover{border-color:var(--testo-3)}
.campo .aiuto{font-size:13px;line-height:1.5;color:var(--testo-2)}

/* ---------------- fascia finale ---------------- */
/* Chiusura e piede erano tutti e due navy scuro, separati da un filetto:
   si leggevano come un unico blocco alto mille pixel. La chiusura sale di un
   tono e il piede resta il fondo del sito, cosi` il salto si vede. */
/* Ridotta: con il titolo grande e il padding vecchio la chiusura arrivava a
   mille pixel di altezza, buona parte dei quali vuoti. */
.finale{background:var(--navy);color:#fff;padding:clamp(44px,5.4vw,76px) 0 clamp(48px,6vw,86px)}
.finale .occhio{display:inline-flex;align-items:center;gap:10px;
  font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.17em;text-transform:uppercase;
  color:var(--rame-chiaro);margin-bottom:16px}
.finale .occhio i{display:block;width:24px;height:2px;background:var(--rame-chiaro)}
.finale h2{font-size:clamp(30px,4.2vw,60px);max-width:20ch;letter-spacing:-.04em;line-height:1.02;margin:0}
.finale .g{display:grid;gap:30px;margin-top:clamp(20px,2.4vw,32px);align-items:end}
@media (min-width:1000px){.finale .g{grid-template-columns:minmax(0,46ch) auto;gap:60px}}
.finale p{margin:0;font-size:clamp(16px,1.35vw,19px);line-height:1.55;color:#a9cade}
/* Senza questo l'ancora riempiva tutta la colonna: un bottone largo 500px. */
.finale .g > .btn{justify-self:start;align-self:end}
/* I tre passi del sopralluogo: riempiono il vuoto a destra con una risposta
   ("e poi cosa succede?") invece che con decorazione. */
.passi{display:grid;gap:0;margin-top:clamp(30px,3.6vw,46px);
  border-top:1px solid var(--navy-3)}
@media (min-width:760px){.passi{grid-template-columns:repeat(3,1fr)}}
.passi > div{padding:20px clamp(16px,2vw,28px) 4px 0;border-bottom:1px solid var(--navy-3)}
@media (min-width:760px){
  .passi > div{border-bottom:0;padding-bottom:22px}
  .passi > div + div{border-left:1px solid var(--navy-3);padding-left:clamp(16px,2vw,28px)}}
.passi .p-n{font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.16em;
  text-transform:uppercase;color:var(--rame-chiaro);display:block;margin-bottom:10px}
.passi .p-t{margin:0;font-size:clamp(15px,1.15vw,17px);line-height:1.5;color:#dbe6ee}
.passi .p-t b{color:#fff;font-weight:700}
.tel-grande{display:inline-block;padding:10px 0;font-size:clamp(32px,5vw,78px);font-weight:900;
  letter-spacing:-.05em;text-decoration:none;color:#fff;line-height:.92;transition:color .25s}
.tel-grande:hover{color:var(--rame-chiaro)}

/* ---------------- piede ---------------- */
.piede{background:var(--navy-scuro);color:#fff;padding:clamp(20px,2.6vw,36px) 0 clamp(34px,4vw,56px)}
.piede-g{display:grid;gap:26px;padding-top:clamp(34px,4vw,56px)}
@media (min-width:760px){.piede-g{grid-template-columns:repeat(2,1fr);gap:40px}}
@media (min-width:1080px){.piede-g{grid-template-columns:1.3fr 1fr 1fr 1fr}}
.piede h3{margin:0 0 14px;font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.16em;
  text-transform:uppercase;color:#7d9db1;font-weight:500}
.piede a{color:#dbe6ee;text-decoration:none;display:block;line-height:1.5;padding:12px 0;font-size:14.5px}
.piede a:hover{color:var(--rame-chiaro)}
.piede p{margin:0;color:#a9cade;font-size:14.5px;line-height:1.8}
.piede .logo img{height:56px;width:auto;margin-bottom:18px}
.piede .legale{margin-top:clamp(28px,3.4vw,46px);padding-top:22px;border-top:1px solid var(--navy-3);
  display:flex;flex-wrap:wrap;gap:8px 26px;font-size:13px;color:#7d9db1}

/* ---------------- zoccolo su telefono ---------------- */
.zoccolo{position:fixed;inset:auto 0 0;z-index:55;display:grid;grid-template-columns:1fr 1fr;
  background:var(--navy-scuro);border-top:1px solid var(--navy-3)}
@media (min-width:1080px){.zoccolo{display:none}}
.zoccolo a{display:flex;align-items:center;justify-content:center;gap:9px;min-height:62px;
  font-weight:800;font-size:15px;text-decoration:none;color:#fff}
.zoccolo a+a{background:var(--rame-chiaro);color:var(--navy-scuro)}
@media (max-width:1079px){body{padding-bottom:62px}}

/* ---------------- puntatore ---------------- */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .punta{position:fixed;top:0;left:0;width:12px;height:12px;border-radius:50%;background:var(--rame-chiaro);
    pointer-events:none;z-index:200;mix-blend-mode:difference;opacity:0;
    transition:width .25s var(--ease),height .25s var(--ease),opacity .25s}
  .punta.viva{opacity:1} .punta.larga{width:52px;height:52px}
}
@media not all and (hover:hover){.punta{display:none}}

/* --- modulo: consenso, esca anti-robot, esito --- */
/* L'esca deve essere invisibile a chi guarda ma raggiungibile per chi legge
   il sorgente: niente display:none, che alcuni robot riconoscono. */
.esca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.campo label abbr{color:var(--rame);text-decoration:none;font-weight:700;margin-left:3px}

/* Le etichette del modulo sono in maiuscoletto da 10,5 px: giusto per
   "NOME E COGNOME", illeggibile per una frase di consenso. E .campo input
   impone 56 px di altezza, che su una casella di spunta la stirava.
   Servono due selettori piu` forti, non un'aggiunta in coda al foglio. */
.campo label.consenso{display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  font:400 15px/1.45 Archivo,system-ui,sans-serif;letter-spacing:normal;
  text-transform:none;color:var(--testo)}
.campo label.consenso input[type=checkbox]{width:20px;height:20px;min-width:20px;min-height:0;
  margin:1px 0 0;padding:0;accent-color:var(--rame);cursor:pointer;border:0;background:none}
.campo label.consenso a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.campo label.consenso a:hover{color:var(--rame)}

/* L'esito del modulo preventivo. Nome proprio, .esito-modulo: .esito era gia`
   il riquadro del calcolatore, con color:#fff — da li` veniva il testo bianco
   su verde chiaro, e queste regole a loro volta rompevano il calcolatore.
   display:flex vince sull'attributo hidden, quindi hidden va ribadito. */
.esito-modulo{display:flex;gap:14px;align-items:flex-start;margin:18px 0 0;padding:16px 18px;
  border:1px solid var(--filo);border-left-width:4px;font-size:15.5px;line-height:1.55}
.esito-modulo[hidden]{display:none}
.modulo-carta .esito-modulo,.modulo-carta .esito-modulo .esito-t{color:var(--testo)}
.modulo-carta .esito-modulo b{color:inherit;font-weight:800}
.modulo-carta .esito-modulo a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.esito-ico{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;margin-top:-2px}
.esito-ico svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.4;
  stroke-linecap:square;stroke-linejoin:miter}
.esito-modulo.bene{border-color:#2f7d4f;background:#edf6f0}
.esito-modulo.bene .esito-ico{background:#2f7d4f}
.esito-modulo.male{border-color:#a3323c;background:#fbf0f1}
.esito-modulo.male .esito-ico{background:#a3323c}
@media (prefers-reduced-motion:no-preference){
  .esito-modulo:not([hidden]){animation:esito-entra .35s ease both}
  @keyframes esito-entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}}

/* --- avviso in evidenza --- */
/* Serve quando una riga di testo vale piu` di tutto il blocco che la
   circonda: il vincolo del fotovoltaico stava in fondo a un elenco puntato
   e non lo leggeva nessuno. */
.avviso{margin-top:clamp(26px,3vw,40px);padding:clamp(20px,2.4vw,30px) clamp(22px,2.6vw,34px);
  border-left:3px solid var(--rame);background:var(--carta)}
.avviso p{margin:0;font-size:clamp(17px,1.5vw,20px);line-height:1.62;color:var(--testo)}
.avviso p+p{margin-top:12px}
.avviso b{font-weight:800;color:var(--testo)}
.sez.bianca .avviso{background:var(--carta)}
.sez.chiara .avviso{background:var(--bianco)}
p.coda{margin:clamp(20px,2.4vw,30px) 0 0;max-width:70ch;
  font-size:16.5px;line-height:1.65;color:var(--testo-2)}
p.coda b{color:var(--testo);font-weight:700}

/* --- piede: i link legali stanno in riga --- */
/* .piede a e` display:block con 12 px di padding, giusto per le colonne di
   navigazione: nella riga legale spezzava i due link su due righe e lasciava
   il punto di separazione orfano in mezzo. */
.piede .legale a{display:inline;padding:0;font-size:inherit;color:#a9cade;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.piede .legale a:hover{color:var(--rame-chiaro)}

/* ---------------- banner dei cookie ---------------- */
/* Scheda in basso a sinistra su schermo largo, fascia intera su telefono
   appoggiata sopra lo zoccolo dei contatti (62 px), che non deve coprire.
   Non blocca la pagina: niente velo, niente cookie wall. */
.banner-cookie{position:fixed;z-index:70;left:clamp(12px,2vw,24px);bottom:clamp(12px,2vw,24px);
  width:min(460px,calc(100% - 24px));max-height:calc(100vh - 120px);overflow:auto;
  background:var(--navy);color:#dbe6ee;border:1px solid var(--navy-4);
  box-shadow:0 18px 50px rgba(3,10,16,.45);padding:clamp(20px,2.4vw,28px)}
.banner-cookie[hidden]{display:none}
@media (max-width:1079px){.banner-cookie{left:12px;right:12px;width:auto;bottom:calc(62px + 12px);
  max-height:calc(100vh - 62px - 100px)}}
.bc-chiudi{position:absolute;top:10px;right:10px;width:44px;height:44px;display:grid;place-items:center;
  background:none;border:0;color:#a9cade;cursor:pointer}
.bc-chiudi:hover{color:#fff}
.bc-chiudi svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:square}
.bc-occhio{display:flex;align-items:center;gap:10px;margin:0 0 12px;
  font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--rame-chiaro)}
.bc-occhio i{display:block;width:22px;height:1px;background:var(--rame-chiaro)}
.bc-titolo{margin:0 44px 10px 0;font-size:clamp(21px,1.9vw,25px);font-weight:800;
  letter-spacing:-.03em;line-height:1.12;color:#fff}
.bc-testo{margin:0;font-size:15px;line-height:1.6;color:#b9d2e2}
.bc-testo b{color:#fff;font-weight:700}
.bc-testo a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.bc-testo a:hover{color:var(--rame-chiaro)}
.bc-scelte{display:grid;gap:2px;margin:18px 0 0;border-top:1px solid var(--navy-3)}
.bc-scelte[hidden]{display:none}
.bc-voce{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--navy-3);
  cursor:pointer;font-size:14px;line-height:1.5;color:#a9cade}
.bc-voce b{display:block;color:#fff;font-weight:700;font-size:15px;margin-bottom:2px}
.bc-voce input{width:20px;height:20px;min-width:20px;margin:1px 0 0;accent-color:var(--rame-chiaro);cursor:pointer}
.bc-voce input:disabled{cursor:not-allowed;opacity:.7}
.bc-azioni{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
/* stessa misura per accetta e rifiuta: il Garante vuole che rifiutare
   costi quanto accettare */
.bc-azioni .btn{min-height:50px;padding:0 16px;font-size:15px;width:100%}
.bc-azioni .btn[hidden]{display:none}
.bc-azioni [data-azione=salva]{grid-column:1/-1}
.bc-link{grid-column:1/-1;justify-self:start;min-height:44px;padding:0;background:none;border:0;
  color:#dbe6ee;font:inherit;font-size:14.5px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.bc-link:hover{color:var(--rame-chiaro)}
.bc-link[hidden]{display:none}
/* il collegamento nel piede, per cambiare idea */
.piede .legale .bc-riapri{padding:0;background:none;border:0;font:inherit;color:#a9cade;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.piede .legale .bc-riapri:hover{color:var(--rame-chiaro)}
@media (prefers-reduced-motion:no-preference){
  .banner-cookie:not([hidden]){animation:bc-sale .45s cubic-bezier(.2,.75,.2,1) both}
  @keyframes bc-sale{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}}

/* ---------------- dove lavoriamo: quattro rotte da Tortona ----------------
   Al posto di 32 link in fila (4 province x 8 servizi), che si leggevano come
   un elenco per i motori di ricerca, una scheda per provincia che porta alla
   pagina della citta`: da li` partono i servizi. La barretta in alto e` la
   distanza vera, in scala sui 70 km della piu` lontana. */
.rotte{display:grid;gap:clamp(14px,1.6vw,22px);grid-template-columns:1fr}
@media (min-width:640px){.rotte{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1240px){.rotte{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* righe allineate fra le schede: titoli, testi e link alla stessa altezza */
.rotte > .rotta{display:grid;grid-row:span var(--righe,5);grid-template-rows:subgrid;row-gap:12px}
.rotta .vai{align-self:end}
.rotta{display:flex;flex-direction:column;gap:12px;padding:26px 24px 24px;background:var(--carta);
  color:var(--testo);text-decoration:none;border-top:2px solid var(--rame);
  transition:background .25s var(--ease),transform .25s var(--ease)}
.rotta:hover{background:var(--navy);color:#fff;transform:translateY(-3px)}
.rotta .tratta{position:relative;display:block;height:10px;margin-bottom:6px}
.rotta .tratta::before{content:"";position:absolute;left:0;right:0;top:4px;border-top:2px dotted var(--filo)}
.rotta .tratta i,.rotta .tratta b{position:absolute;top:0;width:10px;height:10px;border-radius:50%}
.rotta .tratta i{left:0;background:var(--testo)}
.rotta .tratta b{left:calc(var(--km) / 70 * (100% - 10px));background:var(--rame)}
.rotta .km{font:500 12px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--rame)}
.rotta .km em{font-style:normal;color:var(--testo-3)}
.rotta h3{font-size:clamp(21px,1.8vw,25px);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:0}
.rotta p{margin:0;font-size:15.5px;line-height:1.55;color:var(--testo-2);flex:1}
.rotta .vai{font-weight:700;font-size:15px;color:var(--rame);display:inline-flex;gap:8px;
  transition:gap .25s var(--ease)}
.rotta:hover .vai{gap:14px;color:var(--rame-chiaro)}
.rotta:hover p,.rotta:hover .km em{color:#b9cddb}
.rotta:hover .km{color:var(--rame-chiaro)}
.rotta:hover .tratta i{background:#fff}
.rotta:hover .tratta::before{border-top-color:var(--navy-4)}
.rotta:focus-visible{outline:3px solid var(--rame);outline-offset:3px}

/* schede con la stessa struttura (numero, titolo, testo, nota, pulsante):
   le righe si allineano fra le schede, cosi` i pulsanti stanno tutti alla
   stessa altezza anche quando un testo e` piu` lungo dell'altro */
.griglia.allineate > .scheda{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:12px;align-content:start}
.scheda .nota{margin:4px 0 0;padding-top:12px;border-top:1px solid var(--filo-tenue);font-size:14px;color:var(--testo-2)}
.griglia.allineate > .scheda > .btn{align-self:end;margin-top:8px}
.rotta h3 small{font-size:.62em;font-weight:600;letter-spacing:-.01em;color:var(--testo-3)}
.rotta:hover h3 small{color:#b9cddb}
.rotta{min-width:0}.rotta .vai{flex-wrap:wrap}

/* ---------------- continua da qui: servizi, province, resto del sito ----------------
   Sostituisce le liste di link sottolineati (.elenco-fitto) in fondo alle
   pagine locali, nelle pagine citta` e nella 404. Stessi link, ma ognuno e`
   un oggetto che si tocca: tessera con icona per i servizi, rotta con la
   distanza per le province, pulsante per il resto. */
.tessere{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.tessera{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;min-height:72px;
  padding:14px 18px;background:var(--bianco);border:1px solid var(--filo);color:var(--testo);
  text-decoration:none;font-weight:700;font-size:15.5px;line-height:1.3;letter-spacing:-.01em;
  transition:background .22s var(--ease),border-color .22s,color .22s,transform .22s var(--ease)}
.sez.bianca .tessera{background:var(--carta);border-color:transparent}
.tessera .ico{width:28px;height:28px;color:var(--rame)}
.tessera i{font-style:normal;color:var(--rame);transition:transform .22s var(--ease)}
.tessera:hover{background:var(--navy);border-color:var(--navy);color:#fff;transform:translateY(-2px)}
.tessera:hover .ico,.tessera:hover i{color:var(--rame-chiaro)}
.tessera:hover i{transform:translateX(4px)}
.tessera:focus-visible{outline:3px solid var(--rame);outline-offset:3px}
.prosegui-t{font-size:clamp(19px,1.6vw,22px);font-weight:800;letter-spacing:-.025em;
  margin:clamp(34px,4vw,52px) 0 16px}
.prosegui .testata + .tessere{margin-top:0}
.rotte.tre{grid-template-columns:1fr}
@media (min-width:640px){.rotte.tre{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:980px){.rotte.tre{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:640px){.rotte.quattro{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.rotte.quattro{grid-template-columns:repeat(4,minmax(0,1fr))}}
.rotta.corta{--righe:4;padding:22px 22px 20px}
.sez.bianca .rotta{background:var(--carta)}
.sez.chiara .rotta{background:var(--bianco)}
.vie{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.vie .btn{flex:0 1 auto}
@media (max-width:560px){.vie .btn{flex:1 1 100%}}
.sez .rotta:hover,.sez .tessera:hover{background:var(--navy);border-color:var(--navy)}
.rotta h3 small{white-space:nowrap}

/* ---------------- finale: la foto dei titolari a destra ----------------
   Da 1000 px in su la meta` destra della fascia "Sopralluogo gratuito" era
   vuota. Ci va la pinza che misura sul pannello: e` quello che il testo
   promette ("veniamo a misurare"). La foto dei titolari tagliava le persone.
   Decorativa (il testo dice gia` tutto): ogni pagina passa la sua foto con
   --foto-finale sulla sezione (richiesta del cliente, call del 15/10/2026). Sotto i 1000 px la
   fascia e` una colonna sola e non c'e` vuoto da riempire. */
.finale{position:relative;overflow:hidden}
.finale > .w{position:relative;z-index:1}
@media (min-width:1000px){
  .finale::before{content:"";position:absolute;top:0;right:0;bottom:0;width:46%;
    background:var(--foto-finale,url(foto/b-manutenzione-2000.webp)) 50% 50%/cover no-repeat;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 34%);
    mask-image:linear-gradient(to right,transparent 0,#000 34%)}
  .finale > .w > *{max-width:54%}
  .finale .g{grid-template-columns:1fr}
  .finale .passi{max-width:54%}}
@media (min-width:1300px){.finale .g{grid-template-columns:minmax(0,40ch) auto;gap:40px}}
.rotta > *{min-width:0}.rotta .vai{display:block}.rotta .vai > span{margin-left:6px;display:inline-block;transition:transform .25s var(--ease)}.rotta:hover .vai > span{transform:translateX(5px)}
.rotta{overflow:hidden}.rotta .vai > span{display:inline;margin-left:4px}.rotta:hover .vai > span{transform:none}

/* ---------------- sfondo delle sezioni con le province ----------------
   Un piano in prospettiva con il reticolo che scorre verso chi guarda, e
   sopra le quattro rotte da Tortona che si disegnano e pulsano. Sta dietro
   al testo, a bassa intensita`: da` profondita` senza togliere leggibilita`.
   Con "riduci movimento" resta fermo. Il puntatore lo inclina appena. */
.con-rotte{position:relative;overflow:hidden;isolation:isolate}
.con-rotte > .w{position:relative;z-index:1}
.sfondo-rotte{position:absolute;inset:0;z-index:0;pointer-events:none;perspective:900px;
  --rx:0deg;--ry:0deg}
.sfondo-rotte .piano{position:absolute;left:-30%;right:-30%;bottom:-38%;height:120%;
  transform-origin:50% 100%;
  transform:rotateX(calc(64deg + var(--rx))) rotateZ(var(--ry));
  background-image:
    linear-gradient(to right,rgba(11,31,46,.16) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(11,31,46,.16) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(to top,#000 20%,transparent 82%);
  mask-image:linear-gradient(to top,#000 20%,transparent 82%);
  transition:transform .6s var(--ease)}
.sez.bianca .sfondo-rotte .piano{background-image:
    linear-gradient(to right,rgba(11,31,46,.13) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(11,31,46,.13) 1px,transparent 1px)}
.sfondo-rotte .archi{position:absolute;left:8%;right:-12%;bottom:-38%;height:120%;width:auto;
  transform-origin:50% 100%;transform:rotateX(calc(64deg + var(--rx))) rotateZ(var(--ry));
  transition:transform .6s var(--ease);
  -webkit-mask-image:linear-gradient(to top,#000 20%,transparent 70%);mask-image:linear-gradient(to top,#000 20%,transparent 70%)}
.sfondo-rotte .archi path{fill:none;stroke:var(--rame);stroke-width:2.2;stroke-dasharray:6 9;opacity:.75}
.sfondo-rotte .archi circle{fill:var(--rame);opacity:.8;transform-box:fill-box;transform-origin:center}
.sfondo-rotte .archi circle.base{fill:var(--navy)}
@media (max-width:760px){.sfondo-rotte .archi{left:-30%;right:-30%}}
@media (prefers-reduced-motion:no-preference){
  .sfondo-rotte .piano{animation:piano-scorre 7s linear infinite}
  .sfondo-rotte .archi path{animation:rotta-corre 3.2s linear infinite}
  .sfondo-rotte .archi path:nth-child(2){animation-duration:2.6s}
  .sfondo-rotte .archi path:nth-child(3){animation-duration:4.4s}
  .sfondo-rotte .archi path:nth-child(4){animation-duration:3.8s}
  .sfondo-rotte .archi circle:not(.base){animation:tappa 2.8s var(--ease) infinite}
  .sfondo-rotte .archi circle:nth-of-type(3){animation-delay:.5s}
  .sfondo-rotte .archi circle:nth-of-type(4){animation-delay:1s}
  .sfondo-rotte .archi circle:nth-of-type(5){animation-delay:1.5s}}
@keyframes piano-scorre{to{background-position:0 64px,0 64px}}
@keyframes rotta-corre{to{stroke-dashoffset:-44}}
@keyframes tappa{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.9);opacity:.25}}
/* le schede restano piene: lo sfondo si vede fra una e l'altra */
.con-rotte .testata .sub{position:relative}
.testata .sub.testo-lungo p{margin:0}.testata .sub.testo-lungo p + p{margin-top:14px}
/* v2: pavimento piu` alto (si vede fra le schede), rotte piu` leggibili,
   due aloni di luce che derivano lenti e danno profondita` al piano */
.sfondo-rotte .piano{bottom:-18%;height:130%;
  -webkit-mask-image:linear-gradient(to top,#000 30%,transparent 92%);mask-image:linear-gradient(to top,#000 30%,transparent 92%)}
.sfondo-rotte .archi{bottom:-18%;height:130%;left:0;right:-20%;
  -webkit-mask-image:linear-gradient(to top,#000 35%,transparent 85%);mask-image:linear-gradient(to top,#000 35%,transparent 85%)}
.sfondo-rotte .archi path{stroke-width:3;opacity:.9}
.sfondo-rotte .archi circle{opacity:1}
.sfondo-rotte::before,.sfondo-rotte::after{content:"";position:absolute;border-radius:50%;filter:blur(60px)}
.sfondo-rotte::before{width:520px;height:520px;right:-120px;top:10%;background:rgba(224,160,120,.30)}
.sfondo-rotte::after{width:620px;height:620px;left:-180px;bottom:-240px;background:rgba(23,68,94,.16)}
@media (prefers-reduced-motion:no-preference){
  .sfondo-rotte::before{animation:alone-a 16s ease-in-out infinite alternate}
  .sfondo-rotte::after{animation:alone-b 20s ease-in-out infinite alternate}}
@keyframes alone-a{to{transform:translate3d(-260px,120px,0) scale(1.15)}}
@keyframes alone-b{to{transform:translate3d(320px,-80px,0) scale(.9)}}
.con-rotte .btn-filo{background:var(--bianco)}.con-rotte .btn-filo:hover{background:#fff;border-color:var(--testo)}

/* ---------------- sfondo "Il territorio" (pagine citta`) ----------------
   Curve di livello come su una carta topografica: due rilievi che ruotano
   piano su se stessi, le linee che scorrono, un segnaposto che pulsa dove
   sta il testo di destra. Tenue, dietro al testo; fermo con riduci movimento. */
.con-territorio{position:relative;overflow:hidden;isolation:isolate}
.con-territorio > .w{position:relative;z-index:1}
.sfondo-territorio{position:absolute;inset:0;z-index:0;pointer-events:none}
.sfondo-territorio svg{width:100%;height:100%}
.sfondo-territorio .quote path{fill:none;stroke:var(--navy-4);stroke-width:1.3;opacity:.34;vector-effect:non-scaling-stroke}
.sfondo-territorio .quote path:nth-child(3n){stroke:var(--rame);opacity:.35}
.sfondo-territorio .q1{transform-origin:640px 170px}
.sfondo-territorio .q2{transform-origin:180px 330px}
.sfondo-territorio .punto{fill:var(--rame)}
.sfondo-territorio .onda{fill:none;stroke:var(--rame);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  .sfondo-territorio .q1{animation:quota-gira 60s linear infinite}
  .sfondo-territorio .q2{animation:quota-gira 80s linear infinite reverse}
  .sfondo-territorio .quote path{stroke-dasharray:14 10;animation:quota-scorre 9s linear infinite}
  .sfondo-territorio .quote path:nth-child(2n){animation-direction:reverse;animation-duration:12s}
  .sfondo-territorio .onda{animation:spillo 3.2s var(--ease) infinite}
  .sfondo-territorio .onda.o2{animation-delay:1.6s}}
@keyframes quota-gira{to{transform:rotate(360deg)}}
@keyframes quota-scorre{to{stroke-dashoffset:-240}}
@keyframes spillo{0%{transform:scale(1);opacity:.7}100%{transform:scale(7);opacity:0}}
@media (max-width:760px){.sfondo-territorio .quote path{opacity:.16}.sfondo-territorio .quote path:nth-child(3n){opacity:.26}}
.con-rotte .btn-filo{background:var(--bianco)}.con-rotte .btn-filo:hover{background:#fff;border-color:var(--testo)}
@media (max-width:999px){.sfondo-territorio .spillo{display:none}}

/* ---------------- partner: i marchi, su fondo bianco ----------------
   I loghi hanno forme diverse (impilati, lunghi, ovali): l'altezza di
   ciascuno e` tarata a mano (--h) perche' a occhio pesino uguale, dentro
   riquadri tutti della stessa misura. Colori originali dei marchi. */
.sez.partner{background:#fff}
.marchi{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--filo-tenue);
  border:1px solid var(--filo-tenue);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:760px){.marchi{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1000px){.marchi{grid-template-columns:repeat(4,minmax(0,1fr))}}
.marchio{background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  gap:18px;padding:clamp(26px,3vw,40px) 18px clamp(20px,2.4vw,28px);text-align:center;transition:background .25s var(--ease)}
.marchio .logo-box{display:flex;align-items:center;justify-content:center;height:96px;width:100%}
.marchio img{height:var(--h);width:auto;max-width:82%;object-fit:contain;
  transition:transform .35s var(--ease)}
.marchio p{margin:0;display:grid;gap:4px}
.marchio p b{font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--testo)}
.marchio p span{font:500 11px/1.4 "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--testo-3)}
.marchio:hover{background:var(--carta)}
.marchio:hover img{transform:scale(1.05)}
@media (max-width:759px){.marchio .logo-box{height:72px}.marchio img{height:calc(var(--h) * .78)}}

/* Pompe di calore: riquadro Comfort Store Daikin I.Q. sotto le schede di "Come installiamo". */
.daikin-iq{display:flex;align-items:center;gap:clamp(18px,3vw,36px);margin-top:clamp(26px,3vw,40px);
  padding:clamp(18px,2.4vw,28px);border:1px solid var(--filo);background:var(--bianco)}
.daikin-iq img{height:clamp(30px,3vw,40px);width:auto;max-width:100%;flex:none}
.daikin-iq p{margin:0;font-size:16.5px;line-height:1.6;color:var(--testo-2);max-width:70ch}
.daikin-iq p b{color:var(--testo)}
@media (max-width:640px){.daikin-iq{flex-direction:column;align-items:flex-start}}

/* Foto dei lavori intere, senza ritaglio (richiesta del cliente, 23/10/2026).
   Gallerie: proporzione naturale. Schede e nastro: foto contenuta nel riquadro. */
.foto-intera{background:var(--filo)}
.foto-intera img{display:block;width:100%;height:auto}
.griglia.galleria{align-items:start}
.lav .ph img{object-fit:contain}
.opera .ph img{object-fit:contain}

/* Social nel piede (23/10/2026): YouTube in evidenza, Facebook e Instagram come icone. */
.piede .social{margin-top:18px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.piede .social a{display:inline-flex;align-items:center;gap:10px;padding:10px 0}
.piede .social svg{width:22px;height:22px;flex:none}
.piede .social .yt{color:#fff;font-weight:700}
.piede .social .yt svg{width:28px;height:28px;color:#ff3d2e}
.piede .social .altri{display:inline-flex;gap:6px}
.piede .social .altri a{width:44px;height:44px;justify-content:center;border:1px solid var(--navy-3);padding:0}
/* Video YouTube in home: copertina locale, l'iframe parte solo al clic. */
.video-yt{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;max-width:1100px}
.video-yt button{all:unset;cursor:pointer;display:block;width:100%;height:100%;position:relative}
.video-yt button:focus-visible{outline:3px solid var(--rame-chiaro);outline-offset:3px}
.video-yt img{display:block;width:100%;height:100%;object-fit:cover}
.video-yt .play{position:absolute;inset:0;display:grid;place-items:center}
.video-yt .play svg{width:clamp(64px,9vw,104px);height:auto;color:#ff3d2e;filter:drop-shadow(0 6px 18px rgba(0,0,0,.5));transition:transform .25s var(--ease)}
.video-yt button:hover .play svg{transform:scale(1.08)}
.video-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-nota{margin:12px 0 0;font:500 12px/1.5 "IBM Plex Mono",monospace;color:#a9cade}