/* =============================================================================
   enerdata · stili dei blocchi del compositore.
   Sta accanto a ed.css e ne usa le variabili: qui ci sono solo i blocchi che
   ed.css non ha gia' (hero a pannello, card a cavallo, scambio oggi/dopo,
   tessere dei dati) piu' i pochi ritocchi che la landing 7 teneva nel proprio
   foglio di stile. Le pagine esportate caricano prima ed.css, poi questo.
   ========================================================================== */

/* ---- hero a pannello: il grande riquadro scuro con gli angoli tondi ------- */
.hero.pannello{position:relative;overflow:hidden;background:var(--navy-x);padding:10.5rem 0 9.5rem;
  min-height:82vh;display:flex;align-items:center;margin:1rem 1rem 0;border-radius:26px;box-shadow:var(--ombra)}
.hero.pannello canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:.9}
.hero.pannello .cielo{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(41,171,226,.2),transparent 62%),
             linear-gradient(90deg,rgba(4,16,31,.8) 0%,rgba(4,16,31,.55) 45%,rgba(4,16,31,.15) 100%),
             linear-gradient(180deg,rgba(4,16,31,0) 70%,rgba(4,16,31,.6) 100%)}
.hero.pannello .dentro{position:relative;z-index:3;width:100%}
/* niente larghezza massima sul titolo: usa lo spazio che ha e va a capo solo
   dove lo si chiede con /n. Il limite in caratteri lo spezzava da sé, e il
   segno di a capo diventava inutile. */
.hero.pannello .h1{margin-top:1.2rem}
.hero.pannello .p{margin-top:1.4rem}
/* con la hero a pannello la barra scende e rientra, come il pannello stesso */
body:has(.hero.pannello) .nav{top:1rem;left:1rem;right:1rem;height:auto;padding-top:1rem;
  transition:background .25s,border-color .25s,box-shadow .25s,top .25s,left .25s,right .25s,padding-top .25s}
body:has(.hero.pannello) .nav .wrap{height:68px}
body:has(.hero.pannello) .nav.giu{top:0;left:0;right:0;padding-top:0}

/* ---- la card che scavalca il bordo della hero ---------------------------- */
/* Il ponte risale per scavalcare il bordo della hero. La risalita pero' non
   deve valere sempre: senza una hero sopra lascia un buco nella sezione
   precedente, e la fascia sembra sospesa in mezzo al nulla. Vale quindi solo
   quando la sezione del ponte segue davvero una hero. */
.ponte{position:relative;z-index:4}
/* la risalita e' marcata dal renderitore con .alza, che sa se sopra c'e'
   davvero una hero: un selettore di fratello non basta, perche' fra la hero e
   il ponte puo' esserci un'altra sezione */
.ponte.alza{margin-top:-5.2rem}
/* la sezione del ponte non porta spazio proprio: sopra lo da' la hero che
   scavalca, sotto ci pensa il blocco che segue */
.sez:has(.ponte){padding-bottom:0}
/* la sezione che riprende dopo una fascia a ponte: serve solo a rimettere i
   blocchi dentro il .wrap, quindi porta poco spazio sopra */
.sez.dopo-ponte{padding-top:2.6rem}
/* Il vuoto sopra il ponte non e' suo: viene dalla sezione precedente, che
   chiude con 96px di padding piu' i 48 di stacco della propria testata
   (misurato: 144px in tutto). I badge devono attaccarsi al testo, non
   galleggiare a mezza pagina.
   Invece di togliere il respiro alla sezione di sopra — che vorrebbe dire
   riconoscerla, e :has() non puo' contenere un altro :has() — lo si recupera
   dal basso: la fascia a ponte risale di quella misura. Il risultato a
   schermo e' lo stesso e la regola sta tutta qui. */
/* La risalita vale solo quando il ponte NON scavalca una hero: li' ci pensa
   gia' .ponte.alza, e sommandosi le due il blocco finirebbe troppo in su. */
.sez:has(.ponte:not(.alza)){margin-top:-7.5rem}
@media(max-width:700px){.sez:has(.ponte:not(.alza)){margin-top:-4.5rem}}
.ponte .dolori{background:#fff;border:1px solid var(--riga);border-radius:var(--r);padding:.9rem;
  box-shadow:var(--ombra);gap:.6rem}
.ponte .dolore{background:#fdf2f1;border-color:#f6dedb}
/* lo SCAMBIO a ponte: le tessere salgono sopra il bordo della hero come i
   badge dello STRIP, ma non vanno chiuse in un riquadro bianco — sono gia'
   schede con il loro fondo, e un contenitore intorno farebbe una cornice
   dentro la cornice. Serve solo che la prima stacchi dal fondo scuro. */
.ponte .scambio > article{box-shadow:var(--ombra)}
@media(max-width:960px){.ponte.alza{margin-top:-3rem}}

/* ---- testa della fascia STRIP: etichetta e titolo sopra i badge ----------
   .dolori e' una griglia a quattro colonne, quindi la testa deve scavalcarle
   tutte, altrimenti si infila accanto al primo badge come fosse una tessera. */
.dolori .strip-testa{grid-column:1/-1;margin-bottom:.2rem}
.dolori .strip-testa .eti{display:block;margin-bottom:.35rem}
.dolori .strip-testa h3{margin:0;font:600 1.24rem var(--sans);color:var(--testo);line-height:1.3}
.dolori .strip-testa h3 em{font-style:normal;color:var(--cyan-p)}
@media(max-width:960px){.dolori .strip-testa h3{font-size:1.12rem}}

/* ---- scambio: il problema di oggi e la risposta di enerdata --------------
   Misure allineate alla miniatura .m-sc del catalogo: era il doppio piu' grande
   di li', e a schermo pieno una sola voce occupava mezza pagina. */
.scambio{display:grid;gap:.8rem}
.scambio > article{display:grid;grid-template-columns:minmax(0,1fr) 2rem minmax(0,1fr);align-items:stretch;
  background:#fff;border:1px solid var(--riga);border-radius:var(--r2);overflow:hidden;box-shadow:var(--ombra2)}
.scambio .male,.scambio .bene{padding:1rem}
.scambio .male{background:#fdf6f6;border-right:1px solid var(--riga)}
.scambio .bene{border-left:1px solid var(--riga)}
.scambio .k{display:block;font:700 .62rem var(--sans);letter-spacing:.14em;text-transform:uppercase;margin-bottom:.35rem}
.scambio .male .k{color:#c2404f}
.scambio .bene .k{color:var(--cyan-p)}
.scambio h4{margin:0 0 .25rem;font:600 .9rem var(--sans);color:var(--testo);line-height:1.35}
.scambio p{margin:0;font-size:.82rem;line-height:1.5;color:var(--testo2)}
.scambio .bene p b{color:var(--testo)}
.scambio .mezzo{display:grid;place-items:center;background:linear-gradient(180deg,#fdf6f6,#f3fbf6);
  border-right:1px solid var(--riga)}
.scambio .mezzo i{font-size:1rem;color:var(--cyan-p)}
.scambio .costo,.scambio .vinto{display:block;margin-top:.5rem;font:700 .74rem var(--sans)}
.scambio .costo{color:#c2404f}
.scambio .vinto{color:var(--cyan-p)}

/* il flusso che attraversa la tessera: una luce corre lungo il bordo da
   sinistra a destra, rossa finche' sta sulla meta' "oggi", azzurra su quella
   "con enerdata". Stessa tecnica dei badge .dolore di ed.css: un gradiente
   dipinge il bordo (border-box) e una maschera scava via il centro; qui pero'
   il gradiente e' orizzontale e trasla, invece di ruotare.
   --luce e' la posizione della luce, da -35% a 135% cosi' entra ed esce fuori
   dai bordi invece di apparire dal nulla. */
@property --luce{syntax:'<percentage>';inherits:false;initial-value:-45%}
.scambio > article{position:relative;--luce:-45%}
.scambio > article::after{content:'';position:absolute;inset:0;border-radius:inherit;
  border:2px solid transparent;
  background:
    linear-gradient(90deg,
      transparent calc(var(--luce) - 22%),
      rgba(224,96,126,.16) calc(var(--luce) - 15%),
      rgba(224,96,126,.5) calc(var(--luce) - 7%),
      #e0607e var(--luce),
      rgba(224,96,126,.5) calc(var(--luce) + 7%),
      rgba(224,96,126,.16) calc(var(--luce) + 15%),
      transparent calc(var(--luce) + 22%)) border-box;
  -webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:destination-out;
  mask:linear-gradient(#fff 0 0) padding-box exclude,linear-gradient(#fff 0 0);
  /* la luce rossa vive solo sulla meta' "oggi", altrimenti resterebbe accesa
     anche sotto quella azzurra e i due colori si sovrapporrebbero */
  clip-path:inset(0 calc(50% - 1rem) 0 0);
  pointer-events:none;animation:scambio-luce 4.5s linear infinite}
/* la seconda luce e' la stessa, azzurra, ritagliata sulla meta' di destra:
   cosi' il colore cambia esattamente dove cambia il lato */
.scambio > article::before{content:'';position:absolute;inset:0;border-radius:inherit;
  border:2px solid transparent;z-index:1;
  background:
    linear-gradient(90deg,
      transparent calc(var(--luce) - 22%),
      rgba(41,171,226,.16) calc(var(--luce) - 15%),
      rgba(41,171,226,.5) calc(var(--luce) - 7%),
      var(--cyan) var(--luce),
      rgba(41,171,226,.5) calc(var(--luce) + 7%),
      rgba(41,171,226,.16) calc(var(--luce) + 15%),
      transparent calc(var(--luce) + 22%)) border-box;
  -webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:destination-out;
  mask:linear-gradient(#fff 0 0) padding-box exclude,linear-gradient(#fff 0 0);
  /* il confine e' dove finisce la colonna della freccia: meta' tessera
     meno la meta' dei 2rem della colonna centrale */
  clip-path:inset(0 0 0 calc(50% + 1rem));
  pointer-events:none;animation:scambio-luce 4.5s linear infinite}
/* le tessere partono sfalsate: la luce scende lungo l'elenco invece di
   accendersi tutta insieme */
.scambio > article:nth-child(2)::before,.scambio > article:nth-child(2)::after{animation-delay:-.9s}
.scambio > article:nth-child(3)::before,.scambio > article:nth-child(3)::after{animation-delay:-1.8s}
.scambio > article:nth-child(4)::before,.scambio > article:nth-child(4)::after{animation-delay:-2.7s}
.scambio > article:nth-child(5)::before,.scambio > article:nth-child(5)::after{animation-delay:-3.6s}
@keyframes scambio-luce{to{--luce:145%}}
@media(prefers-reduced-motion:reduce){
  .scambio > article::before,.scambio > article::after{animation:none;opacity:0}}
@media(max-width:860px){.scambio > article{grid-template-columns:1fr}
  .scambio .male{border-right:0;border-bottom:1px solid var(--riga)}
  .scambio .bene{border-left:0}
  .scambio .mezzo{display:none}}

/* ---- i dati trattati: tessere con la fonte in coda ----------------------- */
.dati{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.dato{position:relative;background:#fff;border:1px solid var(--riga);border-radius:var(--r);padding:1.7rem 1.6rem;
  box-shadow:var(--ombra2);transition:border-color .2s,transform .2s}
.dato:hover{border-color:#cfe3f2;transform:translateY(-2px)}
.dato .alto{display:flex;align-items:center;gap:.8rem;margin-bottom:.9rem}
.dato .alto i{font-size:1.3rem;color:var(--cyan-p)}
.dato h4{margin:0;font:600 1.04rem var(--sans)}
.dato p{margin:0;font-size:.93rem;line-height:1.6;color:var(--testo2)}
.dato .fonte{display:block;margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--riga);
  font:600 .74rem var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--testo3)}
.dato .fonte b{color:var(--cyan-p);font-weight:700}
/* una luce azzurra risale il bordo in diagonale, dal basso a sinistra verso
   l'alto a destra. Come nelle tessere .scambio: il gradiente dipinge il bordo
   (border-box) e la maschera scava via il centro, cosi' resta acceso solo il
   contorno. Qui il gradiente e' a 45 gradi e --scia lo fa scorrere.
   La partenza a -30% tiene la luce fuori campo finche' non e' il suo turno. */
@property --scia{syntax:'<percentage>';inherits:false;initial-value:-40%}
.dato{--scia:-40%}
.dato::after{content:'';position:absolute;inset:0;border-radius:inherit;
  /* 2px come nelle tessere .scambio: con 1px la luce restava quasi invisibile */
  border:2px solid transparent;
  /* scia lunga: il tratto acceso copre circa un quarto del perimetro, con una
     coda sfumata che lo precede e lo segue. Con valori stretti si vedeva solo
     un puntino che scattava da un angolo all'altro. */
  background:
    linear-gradient(45deg,
      transparent calc(var(--scia) - 26%),
      rgba(41,171,226,.18) calc(var(--scia) - 18%),
      rgba(41,171,226,.55) calc(var(--scia) - 8%),
      var(--cyan) var(--scia),
      rgba(41,171,226,.55) calc(var(--scia) + 8%),
      rgba(41,171,226,.18) calc(var(--scia) + 18%),
      transparent calc(var(--scia) + 26%)) border-box;
  -webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:destination-out;
  mask:linear-gradient(#fff 0 0) padding-box exclude,linear-gradient(#fff 0 0);
  pointer-events:none;animation:dato-scia 5s linear infinite}
/* sfalsate, cosi' la luce attraversa la griglia invece di accendersi tutta
   insieme: sei ritardi coprono le due righe da tre */
.dato:nth-child(2)::after{animation-delay:-.8s}
.dato:nth-child(3)::after{animation-delay:-1.6s}
.dato:nth-child(4)::after{animation-delay:-2.4s}
.dato:nth-child(5)::after{animation-delay:-3.2s}
.dato:nth-child(6)::after{animation-delay:-4s}
@keyframes dato-scia{to{--scia:140%}}
@media(prefers-reduced-motion:reduce){.dato::after{animation:none;opacity:0}}
@media(max-width:960px){.dati{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.dati{grid-template-columns:1fr}}
/* ---- PRIMA / DOPO: due scene sovrapposte, un cursore le svela ------------
   Copia fedele del blocco [PRIMA]/[DOPO] della brochure: tre colonne
   (44mm · resto · 44mm), righe alte 7,4mm con 2,6 di stacco, e i tracciati
   disegnati SOLO nella colonna centrale, che sborda di 6mm sotto le schede.
   Qui le quote millimetriche diventano rem mantenendo le proporzioni.
   ----------------------------------------------------------------------- */
.pd{position:relative;border:1px solid var(--riga);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--ombra);background:#fff;--x:50%;--scena:clamp(300px,30vw,346px)}
/* l'altezza segue il contenuto: le quattro righe più i margini della fascia */
.pd .scena2{position:relative;height:var(--scena)}
.pd .faccia{position:absolute;inset:0;display:flex;flex-direction:column}
/* i due veli: rosso chiaro sul "prima", azzurro sul "dopo" — come .cfx.caldo */
/* i veli della brochure sono traslucidi, ma qui le due scene sono sovrapposte:
   serve una base piena sotto, altrimenti la pila di fogli del "prima" resta
   visibile anche nella metà scoperta del "dopo" */
.pd .faccia.prima{background:linear-gradient(rgba(217,83,79,.07),rgba(217,83,79,.07)),#fff;z-index:1}
.pd .faccia.dopo{background:linear-gradient(rgba(41,171,226,.07),rgba(41,171,226,.07)),#fff;z-index:4;
  clip-path:inset(0 0 0 var(--x));transition:clip-path .05s linear}
.pd .tit{display:flex;align-items:center;gap:.55rem;padding:.7rem 1.1rem;font:700 .7rem var(--sans);
  letter-spacing:.14em;text-transform:uppercase;flex:0 0 auto}
.pd .faccia.prima .tit{color:#8d3230;background:rgba(217,83,79,.1)}
.pd .faccia.dopo .tit{color:var(--cyan-p);background:rgba(41,171,226,.12);justify-content:flex-end}

/* tre colonne, come .cfx-tratta: 44mm di 190 = 23% per lato */
.pd .tratta{flex:1;min-height:0;display:grid;grid-template-columns:27% 1fr 27%;
  gap:1.5rem;padding:1.2rem 1.5rem;align-items:center}
/* righe basse e compatte: 7,4mm di altezza, 2,6 di stacco */
/* riga 2,2rem e stacco proporzionale (2,6/7,4 come in brochure): così i centri
   delle quattro righe cadono esattamente a 37 · 137 · 237 · 337 su 374, che
   sono le coordinate dei tracciati. Cambiando una delle due, le linee si
   staccano dalle schede. */
.pd .colonna{display:grid;grid-template-rows:repeat(4,2.8rem);gap:.984rem;align-content:center;min-width:0}
.pd .colonna.tre{grid-template-rows:repeat(3,2.8rem)}

/* la scheda: una pastiglia su una riga, icona a sinistra, etichetta a destra */
.pd .nodo{display:flex;align-items:center;gap:.6rem;background:#fff;border:1px solid var(--riga);
  border-left:3px solid var(--cyan);border-radius:8px;padding:0 .85rem;
  font:700 .82rem var(--sans);color:var(--navy);white-space:nowrap;overflow:hidden;
  box-shadow:0 2px 6px -3px rgba(13,36,73,.25)}
.pd .nodo b{font-weight:700;overflow:hidden;text-overflow:ellipsis}
.pd .nodo span{margin-left:auto;font:600 .64rem var(--mono);color:#89a4bd;flex:0 0 auto}
/* l'icona non si comprime mai: in una riga stretta deve sparire il testo, non
   il simbolo che dice di che fonte si tratta. Piena, non velata: a questa
   dimensione l'opacità ridotta la faceva sparire. */
.pd .nodo i{flex:0 0 auto;width:1.15em;font-size:1rem;color:var(--cyan-p);line-height:1}
/* le uscite del "prima": fondo rosato, come .cfx-f.uscita */
.pd .nodo.ko{background:#fbe9e8;border-color:#f3d3d1;border-left-color:#e8833a;color:#8d3230}
.pd .nodo.ko span{color:#b08483}
.pd .nodo.ko i{color:#c2705c}
/* le uscite del "dopo": navy piene, il punto di arrivo del flusso */
.pd .nodo.out{background:var(--navy);border-color:var(--navy);border-left-color:var(--cyan);color:#eaf6fd}
.pd .nodo.out span{color:#9fc0e0}
.pd .nodo.out i{color:#7fc6ef}

/* la tela sborda di 6mm sui 5 di stacco: l'ultimo tratto finisce sotto la scheda */
/* la tela è alta quanto le quattro righe (14,151rem) e centrata come loro:
   solo così le coordinate fisse dei tracciati cadono sui centri delle schede */
.pd .mid{position:relative;min-width:0;height:14.151rem;align-self:center}
.pd .mid svg{position:absolute;top:0;left:-1.8rem;width:calc(100% + 3.6rem);height:100%;overflow:visible}

/* la pila di fogli: sopra il tratteggio */
/* la pila è un gruppo centrato nella tela: i fogli si dispongono attorno al suo
   centro, così restano insieme invece di sparpagliarsi verso l'alto */
.pd .pila{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(14rem,88%);height:11rem;z-index:2;pointer-events:none}
.pd .foglio{position:absolute;width:min(11.5rem,82%);background:#fff;border:1px solid #dfe6ee;
  border-radius:3px;box-shadow:0 6px 16px rgba(20,57,111,.2);padding:.42rem .55rem .6rem;
  font:700 .68rem var(--mono);color:#5a6478;line-height:1.35}
.pd .foglio::before{content:'';display:block;height:4px;background:#1f7a4d;
  margin:-.42rem -.55rem .36rem}
/* i fogli ondeggiano sempre, piano: è quello che dà l'idea della pila instabile.
   Trascinando il cursore l'oscillazione si fa più ampia e veloce (.muove, messa
   da ed.js). Ogni foglio ha la sua durata, altrimenti si muoverebbero
   all'unisono come un blocco solo. L'inclinazione di partenza sta in --r, così
   l'oscillazione le gira attorno invece di azzerarla. */
.pd .foglio{transform:rotate(var(--r,0deg));transform-origin:50% 120%;
  animation:pd-onda var(--d,3.6s) ease-in-out infinite}
.pd.muove .foglio{animation-duration:calc(var(--d,3.6s) / 2.2)}
.pd .foglio:nth-child(2){--d:4.3s}
.pd .foglio:nth-child(3){--d:3.1s}
@keyframes pd-onda{
  0%,100%{transform:rotate(var(--r,0deg)) translateY(0)}
  50%    {transform:rotate(calc(var(--r,0deg) + 1.2deg)) translateY(-2.5px)}}
@media(prefers-reduced-motion:reduce){.pd .foglio{animation:none}}

/* le linee scorrono da sinistra a destra: sul "prima" è il tratteggio che
   avanza, sul "dopo" un segmento luminoso che percorre il tracciato. */
/* il tratteggio del "prima" avanza verso destra: passo e corsa coincidono,
   così il ciclo si chiude senza scatti */
.pd .faccia.prima path{stroke-dasharray:11 9;animation:pd-scorre 1.4s linear infinite}
@keyframes pd-scorre{to{stroke-dashoffset:-20}}
.pd .faccia.dopo path{stroke-dasharray:1 0}
/* il segmento luminoso che percorre il tracciato. I percorsi sono lunghi fra
   350 e 420 unità: un ciclo di 460 li copre tutti, e il tratto resta visibile
   per intero prima di ripartire. */
.pd .faccia.dopo .flusso path{stroke-dasharray:60 400;stroke-dashoffset:460;
  animation:pd-corre 2.4s linear infinite}
@keyframes pd-corre{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){
  .pd .faccia.prima path,.pd .faccia.dopo .flusso path{animation:none}
  .pd .faccia.dopo .flusso path{stroke-dasharray:1 0;stroke-dashoffset:0}}
.pd .foglio.posta::before{background:#2a6fc9}
/* il titolo con l'icona quadrata del tipo di file */
.pd .foglio b{display:flex;align-items:flex-start;gap:.28em;font-weight:700;
  overflow:hidden;white-space:nowrap}
/* il tipo di file è un solo segno colorato, senza riquadro dietro: la X verde
   per il foglio di calcolo, la chiocciola blu per il messaggio */
.pd .foglio b::before{content:'X';flex:0 0 auto;width:1.25em;height:1.25em;
  color:#1f7a4d;font:800 .95em var(--sans);
  display:flex;align-items:center;justify-content:center}
/* il messaggio di posta porta la chiocciola, come il foglio di calcolo porta
   la X: senza un segno dentro restava un quadratino cieco */
.pd .foglio.posta b::before{content:'@';color:#2a6fc9;font-size:1.05em}
.pd .foglio i{display:block;font-style:normal;font-size:.55rem;color:#a9b4c2;margin-top:.12rem}
/* le righe finte del contenuto */
.pd .foglio .rr{margin-top:.3rem;display:grid;gap:1.5px}
.pd .foglio .rr span{height:2.5px;background:#eef2f7}
.pd .foglio .rr span:nth-child(2n){background:#e4ebf3}

/* il nodo di arrivo, col marchio */
.pd .hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  text-align:center;padding:.9rem 1.1rem;border-radius:3px;
  background:linear-gradient(150deg,#153a6e,#0a2344);border:1px solid rgba(159,192,224,.3);
  box-shadow:0 10px 26px rgba(4,16,38,.4);width:min(11rem,74%)}
.pd .hub img{display:block;width:100%;height:auto;margin:0 auto .35rem}
.pd .hub span{display:block;font:700 .6rem var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:#7fc6ef}

/* la maniglia: non arriva al bordo, altrimenti a fondo corsa esce dal ritaglio */
/* la divisoria attraversa le due scene e si ferma dove comincia la didascalia.
   Nessun limite laterale: il cursore deve poter arrivare a filo dei due bordi,
   così una delle due scene si vede per intero. */
.pd .maniglia{position:absolute;top:0;bottom:0;left:var(--x);
  width:2px;background:var(--cyan);z-index:6;transform:translateX(-1px);pointer-events:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.6)}
.pd .maniglia::after{content:'';position:absolute;top:50%;left:50%;
  width:40px;height:40px;transform:translate(-50%,-50%);border-radius:50%;background:var(--cyan);
  box-shadow:0 6px 18px -6px rgba(41,171,226,.9)}
.pd .maniglia i{position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);z-index:2;color:#04203f;font-size:1.1rem}
.pd input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;
  cursor:ew-resize;z-index:7}
/* la didascalia sotto, come .cfx-cap */
.pd .piede2{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;padding:.85rem 1.2rem;
  border-top:1px solid var(--riga);background:#fff;font-size:.84rem;color:#7f97ae}
.pd .piede2 b{color:var(--testo)}
/* l'invito sta nella fascia dei titoli, al centro fra i due: resta fuori dalle
   due scene, che sono sovrapposte e ritagliate, e si allinea alla loro altezza */
.pd .sug{position:absolute;top:.42rem;left:50%;transform:translateX(-50%);z-index:5;
  display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;
  background:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.9);border-radius:999px;
  padding:.3rem .75rem;font:600 .68rem var(--sans);letter-spacing:.02em;color:var(--testo2);
  backdrop-filter:blur(8px);pointer-events:none}
.pd .sug i{font-size:.9rem;color:var(--cyan-p)}
@media(max-width:760px){.pd .tratta{grid-template-columns:32% 1fr 32%;gap:.7rem;padding:.8rem}
  .pd .nodo span{display:none}}

/* ---- MODULO: il contatto classico ----------------------------------------
   Due colonne: a sinistra il perche' scrivere e i recapiti, a destra i campi.
   I campi non spediscono da soli: al salvataggio si mette l'indirizzo del
   proprio servizio nell'attributo action del form. --------------------- */
.contatto{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:2.5rem;align-items:start;
  background:#fff;border:1px solid var(--riga);border-radius:var(--r);padding:2.2rem;box-shadow:var(--ombra2)}
.contatto .lato h3{font:400 1.5rem/1.2 var(--head);color:var(--navy);margin:0 0 .7rem}
.contatto .lato h3 em{font-style:normal;color:var(--cyan-p)}
.contatto .lato p{margin:0 0 1.4rem;font-size:.96rem;color:var(--testo2);line-height:1.65}
.contatto .recapiti{display:grid;gap:.7rem;margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid var(--riga)}
.contatto .recapiti a,.contatto .recapiti span{display:flex;align-items:center;gap:.6rem;text-decoration:none;
  font-size:.92rem;color:var(--testo2)}
.contatto .recapiti i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  background:var(--cyan-t);color:var(--cyan-p);font-size:1rem}
.contatto .recapiti a:hover{color:var(--cyan-p)}
.campi{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.campi .lungo{grid-column:1/-1}
.campi label{display:block;font:600 .76rem var(--sans);color:var(--testo2);margin-bottom:.35rem}
.campi input,.campi select,.campi textarea{width:100%;padding:.75rem .85rem;border:1px solid var(--riga);
  border-radius:9px;background:#fff;color:var(--testo);font:400 .95rem var(--sans);transition:border-color .15s,box-shadow .15s}
.campi input:focus,.campi select:focus,.campi textarea:focus{outline:0;border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(41,171,226,.15)}
.campi textarea{resize:vertical;min-height:5.5rem}
.campi .privacy{display:flex;gap:.6rem;align-items:flex-start;font-size:.85rem;color:var(--testo2);line-height:1.5}
.campi .privacy input{width:auto;margin-top:.15rem}
.campi .invio{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.campi .invio .btn{flex:0 0 auto}
.campi .invio span{font-size:.82rem;color:var(--testo3)}
@media(max-width:860px){.contatto{grid-template-columns:1fr;padding:1.6rem}.campi{grid-template-columns:1fr}}

/* ---- CALENDARIO: scelta del giorno e dell'ora per la call -----------------
   Il mese si costruisce da solo a partire da oggi; i giorni liberi sono quelli
   feriali entro la finestra indicata. Scelta la data si aprono le fasce orarie,
   poi i dati di contatto. Non prenota davvero: raccoglie la richiesta. ---- */
.prenota{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;background:#fff;
  border:1px solid var(--riga);border-radius:var(--r);overflow:hidden;box-shadow:var(--ombra2)}
.prenota .cal{padding:1.8rem;border-right:1px solid var(--riga)}
/* la colonna di destra e' un blocco semplice: senza display:block erediterebbe
   la griglia del contenitore e titolo, orario e durata finirebbero affiancati */
.prenota .dati{padding:1.8rem;background:var(--bg2);display:block}
.prenota .mese{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.1rem}
.prenota .mese b{font:600 1rem var(--sans);color:var(--testo);text-transform:capitalize}
.prenota .mese button{width:32px;height:32px;border-radius:50%;border:1px solid var(--riga);background:#fff;
  color:var(--testo2);cursor:pointer;display:grid;place-items:center;font-size:1rem}
.prenota .mese button:hover:not(:disabled){border-color:var(--cyan);color:var(--cyan-p)}
.prenota .mese button:disabled{opacity:.35;cursor:default}
.prenota .griglia{display:grid;grid-template-columns:repeat(7,1fr);gap:.3rem}
.prenota .gs{text-align:center;font:600 .68rem var(--sans);letter-spacing:.06em;text-transform:uppercase;
  color:var(--testo3);padding:.3rem 0}
.prenota .gg{aspect-ratio:1;border:1px solid transparent;border-radius:9px;background:transparent;cursor:pointer;
  font:500 .88rem var(--sans);color:var(--testo);display:grid;place-items:center;transition:all .15s}
.prenota .gg:hover:not(:disabled){background:var(--cyan-t);border-color:#bfe3f5}
.prenota .gg:disabled{color:var(--testo3);opacity:.4;cursor:default}
.prenota .gg.on{background:var(--cyan);border-color:var(--cyan);color:#04203f;font-weight:700}
.prenota .gg.vuoto{visibility:hidden}
.prenota .ore{margin-top:1.3rem;padding-top:1.3rem;border-top:1px solid var(--riga)}
.prenota .ore b{display:block;font:600 .74rem var(--sans);letter-spacing:.08em;text-transform:uppercase;
  color:var(--testo2);margin-bottom:.7rem}
.prenota .fasce{display:flex;flex-wrap:wrap;gap:.4rem}
.prenota .fascia{border:1px solid var(--riga);border-radius:999px;background:#fff;padding:.45rem .9rem;
  font:600 .84rem var(--sans);color:var(--testo2);cursor:pointer;transition:all .15s}
.prenota .fascia:hover{border-color:var(--cyan);color:var(--cyan-p)}
.prenota .fascia.on{background:var(--cyan);border-color:var(--cyan);color:#04203f}
.prenota .vuoto2{font-size:.88rem;color:var(--testo3);font-style:italic}
.prenota .dati h4{font:600 1.05rem var(--sans);margin:0 0 .4rem;display:block}
.prenota .dati > p{display:block}
.prenota .dati .scelto{display:block;font-size:.88rem;color:var(--cyan-p);font-weight:600;
  margin:0 0 1rem;min-height:1.3em}
.prenota .dati .scelto.no{color:var(--testo3);font-weight:400;font-style:italic}
.prenota .dati .campi{display:grid;grid-template-columns:1fr;gap:.8rem}
.prenota .dati .campi .privacy,.prenota .dati .campi .invio{grid-column:auto}
.prenota .durata{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--testo2);margin-bottom:1.2rem}
.prenota .durata i{color:var(--cyan-p)}
@media(max-width:860px){.prenota{grid-template-columns:1fr}.prenota .cal{border-right:0;border-bottom:1px solid var(--riga)}}

/* ---- casi a righe alternate ---------------------------------------------- */
.caso{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:3.5rem;align-items:center;
  padding:3.4rem 0;scroll-margin-top:150px}
.caso + .caso{border-top:1px solid var(--riga)}
.caso.rov .testo{order:-1}
@media(max-width:960px){.caso{grid-template-columns:1fr}.caso.rov .testo{order:0}}

/* ---- ORBITA: il centro e i satelliti che gli girano intorno --------------
   Il posizionamento radiale vuole due elementi distinti: .o-sat colloca
   (angolo --a, raggio --raggio) e .o-dritto contro-ruota per tenere dritte le
   scritte. Se la contro-rotazione finisse sullo stesso nodo che colloca,
   l'animazione sovrascriverebbe la transform di posizionamento e i satelliti
   si ammasserebbero tutti al centro.
   --lato regge tutto: raggio e diametro del centro si calcolano da li'.
   ----------------------------------------------------------------------- */
/* Torna il cerchio che gira: l'ellisse abbassava il blocco ma sfasava gli
   anelli e costringeva a togliere la rotazione. L'altezza si riduce nel modo
   giusto, stringendo il raggio: --lato e' la misura del sistema e i satelliti
   stanno al 38% di esso, non piu' al 41%, con la palla al 19%. */
.orbita{--lato:min(620px,90vw);--raggio:calc(var(--lato) * .38);
  position:relative;display:grid;place-items:center;
  width:var(--lato);aspect-ratio:1;
  /* Il riquadro resta quadrato, perche' serve al cerchio e agli anelli, ma le
     schede non arrivano ai suoi bordi: misurato su un lato di 620, occupano
     453px in verticale e ne avanzano 44 sopra e 65 sotto. Li ritaglio con due
     margini negativi diversi (7% e 10% del lato), lasciando un filo d'aria. */
  margin:calc(var(--lato) * -.06) auto calc(var(--lato) * -.09)}
/* gli anelli: il primo passa esattamente per i centri dei satelliti (38% di
   raggio = 76% di diametro), gli altri due dentro, come sfondo */
/* il fondo: un disco azzurro chiaro che ingloba tutto il blocco, satelliti
   compresi, cosi' l'insieme si stacca dal bianco della pagina. Sta dietro a
   ogni cosa e sborda un poco oltre le schede. */
/* Il disco sta dentro il blocco: 96% della larghezza, quindi non sborda mai
   nella sezione vicina, che ha un fondo proprio e lo coprirebbe. Le schede
   sporgono un poco oltre il suo bordo, ma li' la sfumatura e' gia' quasi
   trasparente e il passaggio non si nota. Il pieno arriva all'86% del raggio:
   con la sfumatura che svaniva al 55% restava azzurro solo il centro. */
.orbita::before{content:'';position:absolute;left:50%;top:50%;
  width:96%;height:96%;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    #e4f2fc 0%,#e8f4fd 60%,#edf7fe 86%,rgba(237,247,254,0) 100%);
  /* z-index 0 e non -1: negativo lo manda dietro anche al fondo della
     sezione, che ha un colore proprio, e il disco sparisce del tutto.
     A 0 sta sopra quel fondo e sotto al contenuto del blocco; la nota, che
     risale sul disco per via del margine negativo di .orbita, si alza a sua
     volta con un z-index proprio. */
  pointer-events:none;z-index:0}
/* Gli anelli non stanno fermi: si stringono verso il centro come nella
   PLANCIA. Non si possono animare le fermate di un gradiente, quindi ogni
   anello e' un elemento vero che si riduce di scala e svanisce; i quattro
   partono sfalsati di un quarto di ciclo, cosi' ne arriva sempre uno. */
.orbita .o-anelli{position:absolute;inset:0;display:grid;place-items:center;
  pointer-events:none;z-index:0}
.orbita .o-anelli i{position:absolute;width:96%;aspect-ratio:1;border-radius:50%;
  border:1.5px solid rgba(41,171,226,.75);
  animation:orbita-onda 6s linear infinite}
.orbita .o-anelli i:nth-child(2){animation-delay:-1.5s}
.orbita .o-anelli i:nth-child(3){animation-delay:-3s}
.orbita .o-anelli i:nth-child(4){animation-delay:-4.5s}
@keyframes orbita-onda{
  from{transform:scale(1);opacity:0}
  12%{opacity:.65}
  75%{opacity:.3}
  to{transform:scale(.06);opacity:0}}

/* il centro chiaro: qui al centro sta il cliente, non il prodotto, e un
   cerchio blu notte continuerebbe a leggersi come "la piattaforma".
   La misura viene dal lato, non in percentuale, cosi' resta tonda. */
.orbita .o-centro{position:relative;z-index:3;width:calc(var(--lato) * .19);
  height:calc(var(--lato) * .19);border-radius:50%;
  display:grid;place-items:center;text-align:center;padding:.9rem;
  background:radial-gradient(120% 120% at 30% 24%,#fff,#dfeefb);
  border:2px solid #bfdcf2;
  box-shadow:0 26px 60px -26px rgba(13,36,73,.35),0 0 0 10px rgba(41,171,226,.05)}
.orbita .o-chi{display:block;font:400 1.12rem var(--head);color:var(--navy);line-height:1.15}
.orbita .o-chi em{font-style:normal;color:var(--cyan-p)}
/* la qualifica sta sotto la palla, non dentro: con un cerchio di questa
   misura finiva su tre righe e lo riempiva fino al bordo */
.orbita .o-ruolo{position:absolute;top:calc(50% + var(--lato) * .115);left:50%;
  transform:translateX(-50%);z-index:3;text-align:center;line-height:1.5;
  /* niente nowrap: con il /n la qualifica puo' andare su piu' righe */
  font:600 .56rem var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan-p)}
.orbita .o-centro::after{content:'';position:absolute;inset:-5%;border-radius:50%;
  border:1px solid rgba(41,171,226,.35);animation:orbita-respiro 3.4s ease-out infinite}
@keyframes orbita-respiro{
  0%{transform:scale(1);opacity:.65}
  70%,100%{transform:scale(1.2);opacity:0}}

/* la giostra gira e ogni scheda contro-ruota per restare dritta: due compiti
   su due elementi, altrimenti l'animazione sovrascrive il posizionamento */
.orbita .o-giro{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;
  animation:orbita-gira 52s linear infinite}
@keyframes orbita-gira{to{transform:rotate(360deg)}}
/* Il satellite e' un punto sul cerchio; la scheda ci si appende centrata.
   Con place-items:center su un riquadro 0x0 il centraggio dipende dalla forma
   della scheda, e quelle piu' larghe finivano scostate dal proprio raggio
   (misurato: fino a 8 unita' su 100), staccandosi dal filo. */
.orbita .o-sat{position:absolute;top:50%;left:50%;width:0;height:0;z-index:2;
  transform:rotate(var(--a)) translateY(calc(var(--raggio) * -1))}
/* due rotazioni da annullare: il giro continuo e l'angolo fisso di
   collocamento, altrimenti le schede in basso restano capovolte. Il valore
   sta anche fuori dai fotogrammi, per quando l'animazione e' spenta. */
.orbita .o-dritto{position:absolute;top:0;left:0;
  transform:translate(-50%,-50%) rotate(calc(var(--a) * -1));
  animation:orbita-contro 52s linear infinite}
@keyframes orbita-contro{
  from{transform:translate(-50%,-50%) rotate(calc(var(--a) * -1))}
  to{transform:translate(-50%,-50%) rotate(calc(var(--a) * -1 - 360deg))}}

.orbita .o-scheda{width:max-content;max-width:190px;background:#fff;
  border:1px solid var(--riga);border-radius:14px;padding:.65rem .8rem;
  box-shadow:var(--ombra2);transition:border-color .2s,transform .2s,box-shadow .2s}
.orbita .o-alto{display:flex;align-items:center;gap:.5rem}
.orbita .o-scheda i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--cyan-t);color:var(--cyan-p);font-size:.88rem;flex:0 0 auto}
.orbita .o-scheda b{font:600 .8rem var(--sans);color:var(--testo);line-height:1.25}
.orbita .o-scheda p{margin:.3rem 0 0;font:500 .7rem/1.4 var(--sans);color:var(--testo3)}
.orbita .o-sat:hover .o-scheda{border-color:var(--cyan);transform:scale(1.05);box-shadow:var(--ombra)}

/* i fili sotto, le schede sopra: senza z-index esplicito sui satelliti
   l'ordine dipende dal documento e i tratti passavano davanti */
.orbita .o-fili{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;
  overflow:visible;pointer-events:none}
.orbita .o-fili line{stroke:var(--cyan);stroke-width:.34;opacity:.5;
  stroke-dasharray:1.4 3.4;animation:orbita-filo 1.7s linear infinite}
@keyframes orbita-filo{to{stroke-dashoffset:4.8}}

.o-nota{position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  margin:1.8rem auto 0;max-width:70ch;text-align:center;
  font:500 .92rem var(--sans);color:var(--testo2)}
.o-nota b{font:400 1.05rem var(--head);color:var(--navy)}

@media(max-width:820px){
  .orbita .o-scheda{max-width:132px;padding:.5rem .6rem}
  .orbita .o-scheda p{display:none}
  .orbita .o-scheda b{font-size:.74rem}
  .orbita .o-scheda i{width:22px;height:22px;font-size:.8rem}
  .orbita .o-chi{font-size:.92rem}
  .o-nota{font-size:.82rem}
}
@media(prefers-reduced-motion:reduce){
  .orbita .o-giro,.orbita .o-dritto,.orbita .o-fili line,
  .orbita .o-anelli i,.orbita .o-centro::after{animation:none}
}

/* ---- PLANCIA: centro grande e tessere intorno, senza rotazione -----------
   Le tessere circondano il centro su tre lati: due colonne a sinistra e una
   fascia sotto. Fluttuano sfalsate di un secondo l'una dall'altra, cosi'
   l'insieme respira senza che niente giri.
   ----------------------------------------------------------------------- */
/* niente max-width: con un limite proprio e margin:auto il blocco si centrava
   dentro il .wrap e rientrava di 58px per lato rispetto al titolo della
   sezione (misurato su schermo largo). La larghezza la detta il .wrap, come
   per tutti gli altri blocchi. */
.plancia{position:relative;display:grid;gap:1rem;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-flow:dense}
.plancia .pl-perno{grid-column:3/5;grid-row:1/3;
  position:relative;display:grid;place-items:center;text-align:center;
  padding:2.6rem 2rem;border-radius:var(--r);overflow:hidden;
  background:radial-gradient(130% 120% at 25% 15%,#1b508f,var(--navy-x));
  box-shadow:var(--ombra)}
/* I cerchi concentrici dietro si stringono verso il centro, come un'onda che
   rientra. Non si possono animare le fermate di un gradiente, quindi ogni
   anello e' un elemento vero che si riduce di scala e svanisce; i tre partono
   sfalsati, cosi' ne arriva uno di continuo. */
.plancia .pl-onde{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  display:grid;place-items:center}
/* partono larghe quanto il riquadro e si stringono fino a sparire al centro;
   quattro sfalsate di un quarto del ciclo, cosi' ne arriva sempre una */
.plancia .pl-onde i{position:absolute;width:130%;aspect-ratio:1;border-radius:50%;
  border:1.5px solid rgba(41,171,226,.75);
  animation:plancia-onda 5.2s linear infinite}
.plancia .pl-onde i:nth-child(2){animation-delay:-1.3s}
.plancia .pl-onde i:nth-child(3){animation-delay:-2.6s}
.plancia .pl-onde i:nth-child(4){animation-delay:-3.9s}
@keyframes plancia-onda{
  from{transform:scale(1);opacity:0}
  12%{opacity:.5}
  75%{opacity:.22}
  to{transform:scale(.06);opacity:0}}
.plancia .pl-dentro{position:relative;z-index:2}
.plancia .pl-marchio{font:400 2.1rem var(--head);color:#fff;letter-spacing:-.01em}
.plancia .pl-marchio em{font-style:normal;color:var(--cyan-c)}
/* il marchio come immagine: scritto "enerdata" senza altro, il renderitore
   usa il logo della brochure invece del testo */
.plancia .pl-marchio img{display:block;width:min(210px,62%);margin:0 auto}

/* Il respiro intorno al riquadro. Un pseudo-elemento che si espande qui non
   si vedrebbe: .pl-perno ha overflow:hidden per contenere le onde, e l'alone
   verrebbe tagliato sul bordo. L'ombra invece si disegna fuori dal riquadro e
   il ritaglio non la tocca, quindi il respiro si anima su box-shadow. */
.plancia .pl-perno{animation:plancia-respiro 4s ease-in-out infinite}
/* un alone morbido di misura fissa, che va e viene d'intensita': un anello
   che si allarga e svanisce leggeva come un'onda, non come un respiro */
@keyframes plancia-respiro{
  0%,100%{box-shadow:var(--ombra),0 0 16px rgba(41,171,226,.12)}
  50%{box-shadow:var(--ombra),0 0 26px rgba(41,171,226,.42)}}
.plancia .pl-claim{margin:.7rem 0 0;font-size:.98rem;line-height:1.6;color:var(--chiaro)}
.plancia .pl-claim b{color:#fff;font-weight:600}
.plancia .pl-stato{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.3rem;
  background:rgba(41,171,226,.14);border:1px solid rgba(41,171,226,.3);
  border-radius:999px;padding:.4rem .9rem;font:600 .72rem var(--sans);color:var(--cyan-c)}
.plancia .pl-stato em{font-style:normal;width:7px;height:7px;border-radius:50%;
  background:#3ddc84;animation:plancia-battito 1.8s ease-in-out infinite}
@keyframes plancia-battito{50%{opacity:.25}}

.plancia .pl-t{position:relative;background:#fff;border:1px solid var(--riga);
  /* lo stesso raggio del riquadro enerdata: con 12 contro 18 i lati sembravano
     sfalsati, pur avendo i bordi allineati al pixel */
  border-radius:var(--r);padding:1.1rem 1.2rem;box-shadow:var(--ombra2);
  transition:border-color .2s,transform .25s,box-shadow .25s;
  animation:plancia-fluttua 7s ease-in-out infinite}
@keyframes plancia-fluttua{50%{transform:translateY(-6px)}}
.plancia .pl-t:hover{border-color:var(--cyan);box-shadow:var(--ombra);transform:translateY(-6px)}
.plancia .pl-alto{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}
.plancia .pl-t i{font-size:1.1rem;color:var(--cyan-p)}
.plancia .pl-t b{font:600 .92rem var(--sans);color:var(--testo)}
.plancia .pl-t p{margin:0;font-size:.83rem;line-height:1.5;color:var(--testo2)}
.plancia .pl-cifra{display:block;margin-top:.7rem;font:400 1.5rem var(--head);color:var(--navy)}
.plancia .pl-cifra small{font:600 .68rem var(--sans);color:var(--testo3);margin-left:.3rem}
/* L'ultima tessera chiude la fascia in basso occupando due colonne.
   Prima era nth-of-type(7), che pero' conta tutti i div fratelli e quindi
   anche .pl-perno: con un numero di tessere diverso da sette la regola
   colpiva quella sbagliata e la fascia restava spaiata. :last-child non ha
   questo problema, e vale solo quando le tessere sono dispari. */
.plancia .pl-t:nth-child(even):last-child{grid-column:span 2}

/* Su schermo stretto il riquadro enerdata prende tutta la larghezza e le
   tessere gli vanno sotto. Tre cose vanno annullate insieme, non solo la
   colonna: grid-row, che altrimenti lo tiene incastrato sulle prime due righe;
   grid-auto-flow:dense, che infilerebbe una tessera nello spazio rimasto al
   suo fianco (misurato: a 496px il perno restava largo meta' blocco con una
   tessera accanto); e la regola dell'ultima tessera larga due colonne, che a
   una colonna sola non ha piu' senso. */
@media(max-width:900px){
  .plancia{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row}
  .plancia .pl-perno{grid-column:1/-1;grid-row:auto;padding:2rem 1.4rem}
  .plancia .pl-marchio{font-size:1.7rem}
  .plancia .pl-t:nth-child(even):last-child{grid-column:1/-1}
}
@media(max-width:560px){
  .plancia{grid-template-columns:minmax(0,1fr)}
  .plancia .pl-perno,.plancia .pl-t{grid-column:1/-1}
  .plancia .pl-perno{padding:1.7rem 1.2rem}
  .plancia .pl-marchio{font-size:1.5rem}
}
@media(prefers-reduced-motion:reduce){
  .plancia .pl-t,.plancia .pl-stato em,
  .plancia .pl-onde i,.plancia .pl-perno{animation:none}
}

/* ---- LOGHI: il nastro di chi ci ha gia' scelto --------------------------
   I marchi non stanno in un badge: scorrono in una fila continua, per dare
   movimento senza chiedere attenzione. Il nastro e' la lista ripetuta e fatta
   scorrere esattamente di una copia: a fine corsa la seconda e' dove stava la
   prima, quindi il ritorno a capo non si vede.
   Le regole stanno qui e non in ed.css perche' li' .clienti e' la fila di
   badge di testo che usano le landing gia' pubblicate: si riconosce il nastro
   dalla presenza di .cl-nastro, cosi' le due forme convivono.
   ---------------------------------------------------------------------- */
.clienti:has(.cl-nastro){display:block;overflow:hidden;position:relative;
  /* i marchi sfumano ai due lati invece di essere tagliati di netto */
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
/* --cl-durata e non --giro: quel nome e' gia' registrato con @property in
   ed.css come <angle>, per il bagliore rotante dei badge. Una durata in
   secondi non e' un angolo valido, quindi veniva scartata, l'animazione
   restava senza durata e il nastro non si muoveva affatto. */
.cl-nastro{display:flex;align-items:center;gap:clamp(2.4rem,5vw,4.5rem);
  width:max-content;animation:cl-scorre var(--cl-durata,24s) linear infinite}
/* Si trasla di una copia sola (1 / numero di copie della larghezza totale) e
   in negativo, cioe' verso sinistra: i marchi entrano da destra ed escono a
   sinistra, come i titoli di coda. */
@keyframes cl-scorre{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-100% / var(--copie,2)))}}
.clienti:hover .cl-nastro{animation-play-state:paused}

/* i marchi: niente nero pieno, ma il blu notte della pagina. Il filtro porta
   l'immagine in scala di grigi e poi la tinge, cosi' vale per qualunque logo
   senza doverne preparare una versione monocromatica. */
/* I marchi vanno tinti del blu di casa, non resi neri, e non serve preparare
   una versione monocromatica di ogni file. La catena parte da
   brightness(0) saturate(100%): porta qualunque logo — bianco, nero, a colori —
   a una silhouette nera pulita, che e' l'unico punto di partenza da cui
   sepia+hue-rotate producono davvero una tinta. Senza quella normalizzazione i
   filtri restituiscono grigio neutro (misurato: 38,38,38 invece di blu).
   Risultato verificato: #1e3965, il navy della pagina. */
.cl-nastro img{height:clamp(26px,3.4vw,38px);width:auto;flex:0 0 auto;
  filter:brightness(0) saturate(100%) invert(18%) sepia(38%) saturate(1400%)
         hue-rotate(184deg) brightness(95%) contrast(92%);
  opacity:.78;transition:opacity .25s,filter .25s}
/* Al passaggio il marchio torna ai suoi colori veri, con un'ombra dietro:
   senza, un logo chiaro su fondo bianco sparirebbe. L'ombra deve stare nella
   stessa catena di filtri e non in box-shadow, che disegnerebbe un rettangolo
   intorno all'immagine invece di seguire il contorno del marchio. */
.cl-nastro img:hover{opacity:1;
  filter:drop-shadow(0 1px 4px rgba(13,36,73,.2))
         drop-shadow(0 0 1px rgba(13,36,73,.28))}
/* le voci scritte a parola, per chi non ha il file del marchio */
/* ed.css veste .clienti span da pastiglia (bordo, fondo, padding): qui i nomi
   devono stare nudi come i marchi, quindi si annulla quella veste */
/* :not(.cl-logo) e' necessario: il marchio mascherato e' anch'esso uno span, e
   il background:none di questa regola gli toglierebbe il fondo che la maschera
   deve ritagliare, facendolo sparire del tutto */
.clienti .cl-nastro span:not(.cl-logo){flex:0 0 auto;padding:0;border:0;background:none;
  border-radius:0;text-transform:none;
  font:600 1.06rem var(--sans);letter-spacing:.04em;
  color:var(--navy);opacity:.45;white-space:nowrap;transition:opacity .25s}
.clienti .cl-nastro span:not(.cl-logo):hover{opacity:.85}

@media(prefers-reduced-motion:reduce){.cl-nastro{animation:none}}

/* ---- visibilita' per dispositivo ----------------------------------------
   Si dichiara nel codice del blocco: [PRIMA-DOPO;solo-mobile]. Il blocco viene
   comunque prodotto e qui viene nascosto, perche' l'export e' un file solo che
   deve funzionare su entrambi i dispositivi: deciderlo in fase di generazione
   vorrebbe dire due pagine diverse.
   La soglia e' 820px, la stessa che i blocchi usano gia' per riorganizzarsi.
   display:none e non visibility: lo spazio non deve restare occupato, e le
   animazioni dentro un blocco nascosto non devono girare a vuoto. */
@media(max-width:820px){[data-vista="solo-desktop"]{display:none!important}}
@media(min-width:821px){[data-vista="solo-mobile"]{display:none!important}}
/* nell'anteprima del compositore il blocco nascosto resta visibile ma smorzato
   e con una fascetta che dice per chi e': altrimenti chi scrive lo crederebbe
   sparito per errore */
.ed-anteprima [data-vista]{position:relative;display:block!important;opacity:.45}
.ed-anteprima [data-vista]::after{content:attr(data-vista);position:absolute;
  top:.5rem;right:.5rem;z-index:40;
  background:var(--navy);color:#fff;border-radius:999px;padding:.2rem .6rem;
  font:700 .6rem var(--sans);letter-spacing:.08em;text-transform:uppercase;
  pointer-events:none}

/* =============================================================================
   PRIMA / DOPO · versione verticale
   Il blocco orizzontale mette le fonti a sinistra, i tracciati in mezzo e gli
   esiti a destra: su uno schermo stretto quelle tre colonne diventano
   illeggibili. Qui la stessa scena e' ruotata di 90 gradi — le fonti in alto,
   il flusso che scende, gli esiti in fondo — e il cursore che svela e'
   orizzontale e scorre dall'alto verso il basso.
   Resta tutto il resto: due scene sovrapposte, clip-path che ne scopre una,
   tracciati che scorrono, pila di fogli nel "prima", hub nel "dopo".
   ========================================================================== */
.pdv{position:relative;border:1px solid var(--riga);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--ombra);background:#fff;
  /* --y e' la posizione del cursore: 0% mostra tutto il "prima", 100% il "dopo" */
  --y:50%;max-width:min(520px,100%);margin:0 auto}

/* piu' alta di prima: i badge sono cresciuti e la fascia centrale, dove
   stanno la pila e i tracciati, si era ridotta troppo */
/* la scena non tocca il gesto: la pagina si scorre passandoci sopra come
   ovunque. Solo la divisoria prende il dito, e la prende per intero. */
.pdv .scena{position:relative;height:clamp(660px,132vw,780px)}
.pdv .faccia{position:absolute;inset:0;display:flex;flex-direction:column}
/* base opaca sotto il velo: le due scene sono sovrapposte, e senza fondo pieno
   la pila di fogli del "prima" resterebbe visibile attraverso il "dopo" */
.pdv .faccia.prima{background:linear-gradient(rgba(217,83,79,.07),rgba(217,83,79,.07)),#fff;z-index:1}
.pdv .faccia.dopo{background:linear-gradient(rgba(41,171,226,.07),rgba(41,171,226,.07)),#fff;z-index:4;
  /* si taglia dall'alto invece che da sinistra: e' l'unica differenza vera
     rispetto alla versione orizzontale */
  clip-path:inset(var(--y) 0 0 0);transition:clip-path .05s linear}

.pdv .tit{display:flex;align-items:center;gap:.5rem;padding:.7rem 1rem;
  font:700 .68rem var(--sans);letter-spacing:.13em;text-transform:uppercase;flex:0 0 auto}
.pdv .faccia.prima .tit{color:#8d3230;background:rgba(217,83,79,.1)}
.pdv .faccia.dopo .tit{color:var(--cyan-p);background:rgba(41,171,226,.12);
  justify-content:flex-end}

/* tre fasce impilate invece di tre colonne affiancate */
.pdv .tratta{flex:1;min-height:0;display:grid;
  /* la colonna va dichiarata: senza, le tre fasce si adattano al contenuto e
     restano larghe meta' blocco invece di distendersi (misurato) */
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto 1fr auto;gap:.5rem;padding:.9rem .9rem 1rem}

/* le fonti e gli esiti: due per riga, cosi' quattro voci stanno in due righe
   basse invece di una colonna lunga */
.pdv .fascia{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;min-width:0}
.pdv .nodo{display:flex;align-items:center;gap:.45rem;background:#fff;
  border:1px solid var(--riga);border-left:3px solid var(--cyan);border-radius:8px;
  padding:.72rem .7rem;min-height:2.9rem;min-width:0}
.pdv .nodo i{font-size:.9rem;color:var(--cyan-p);flex:0 0 auto}
.pdv .nodo b{font:700 .72rem var(--sans);color:var(--navy);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdv .nodo span{margin-left:auto;font:600 .6rem var(--sans);color:var(--testo3);
  white-space:nowrap;flex:0 1 auto;overflow:hidden}
/* sotto i 380px l'etichetta cede il posto al nome, che conta di piu' */
@media(max-width:380px){.pdv .nodo span{display:none}}
.pdv .nodo.ko{border-left-color:#d9534f}
.pdv .nodo.ko span{color:#c2404f}
.pdv .nodo.out{border-left-color:var(--verde)}
.pdv .nodo.out span{color:var(--verde)}

/* la parte centrale: i tracciati scendono da una fascia all'altra */
.pdv .mid{position:relative;min-height:0}
.pdv .mid svg{position:absolute;inset:-.5rem 0;width:100%;height:calc(100% + 1rem);
  overflow:visible}
/* il tratteggio che scorre: da' il verso senza bisogno di frecce */
.pdv .faccia.prima path{stroke-dasharray:6 7;animation:pdv-scorre 1.5s linear infinite}
@keyframes pdv-scorre{to{stroke-dashoffset:-13}}
.pdv .faccia.dopo .flusso path{stroke-dasharray:14 86;
  animation:pdv-corre 2.6s linear infinite}
@keyframes pdv-corre{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}

/* La pila di fogli del "prima", identica a quella del blocco orizzontale:
   carattere monospace, banda verde in cima (blu per il messaggio di posta),
   la X del foglio di calcolo accanto al nome, i metadati piccoli sotto e le
   righe finte del contenuto. Il riquadro e' centrato in altezza e i tre fogli
   si dispongono al suo interno in percentuale, non a misure fisse. */
/* la pila sta nella parte alta del riquadro centrale, non al suo centro: a
   meta' corsa il cursore taglia proprio li', e i fogli sotto sparirebbero
   (misurato: due su tre finivano oltre la linea) */
.pdv .pila{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);
  width:min(15rem,86%);height:9.4rem;z-index:2;pointer-events:none}
.pdv .foglio{position:absolute;width:min(11.5rem,84%);background:#fff;
  border:1px solid #dfe6ee;border-radius:3px;
  box-shadow:0 6px 16px rgba(20,57,111,.2);padding:.42rem .55rem .6rem;
  font:700 .68rem var(--mono);color:#5a6478;line-height:1.35;
  transform:rotate(var(--r,0deg));transform-origin:50% 120%;
  animation:pdv-onda var(--d,3.6s) ease-in-out infinite}
.pdv .foglio::before{content:'';display:block;height:4px;background:#1f7a4d;
  margin:-.42rem -.55rem .36rem}
.pdv .foglio.posta::before{background:#2a6fc9}
.pdv .foglio:nth-child(2){--d:4.3s}
.pdv .foglio:nth-child(3){--d:3.1s}
@keyframes pdv-onda{
  0%,100%{transform:rotate(var(--r,0deg)) translateY(0)}
  50%    {transform:rotate(calc(var(--r,0deg) + 1.2deg)) translateY(-2.5px)}}
/* il nome con il segno del tipo di file: la X verde per il foglio di calcolo,
   la chiocciola blu per il messaggio */
.pdv .foglio b{display:flex;align-items:flex-start;gap:.28em;font-weight:700;
  overflow:hidden;white-space:nowrap}
.pdv .foglio b::before{content:'X';flex:0 0 auto;width:1.25em;height:1.25em;
  color:#1f7a4d;font:800 .95em var(--sans);
  display:flex;align-items:center;justify-content:center}
.pdv .foglio.posta b::before{content:'@';color:#2a6fc9;font-size:1.05em}
.pdv .foglio i{display:block;font-style:normal;font-size:.55rem;color:#a9b4c2;
  margin-top:.12rem}
.pdv .foglio .rr{margin-top:.3rem;display:grid;gap:1.5px}
.pdv .foglio .rr span{height:2.5px;background:#eef2f7}
.pdv .foglio .rr span:nth-child(2n){background:#e4ebf3}

/* l'hub del "dopo": il marchio dove tutto converge */
/* l'hub scende sotto la meta': al centro esatto cadrebbe proprio sulla linea
   del cursore quando questo sta a meta' corsa, e verrebbe tagliato in due */
.pdv .hub{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  width:max-content;height:max-content;
  display:grid;place-items:center;gap:.25rem;padding:.7rem 1.1rem;border-radius:12px;
  background:radial-gradient(120% 120% at 30% 25%,#1a4d8f,var(--navy-x));
  box-shadow:0 14px 30px -14px rgba(13,36,73,.6);pointer-events:none}
.pdv .hub img{width:96px;height:auto;display:block}
.pdv .hub span{font:600 .54rem var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--cyan-c)}

/* il cursore: una barra orizzontale che si trascina su e giu' */
/* La divisoria e' la sola presa del cursore: tenendola premuta si trascina
   il velo, dappertutto altrove la pagina scorre normalmente. Con la presa su
   tutta la scena il blocco diventava una zona morta in cui non si scorreva
   piu' niente. La riga visibile resta di 2px, ma l'area sensibile e' alta
   44px — quanto un dito — grazie allo pseudo-elemento sotto. */
/* La presa e' alta quanto un dito, non quanto la riga: l'area sensibile la
   da' il riquadro dell'elemento, e con height:2px non si colpiva col dito.
   L'elemento e' quindi alto 44px e trasparente, tirato su di meta' altezza con
   margin-top e non con transform — una transform qui verrebbe sovrascritta da
   quella della pallina e sposterebbe la riga fuori posto. */
.pdv .maniglia{position:absolute;left:0;right:0;top:var(--y);margin-top:-22px;
  height:44px;background:none;
  z-index:6;cursor:ns-resize;touch-action:none;pointer-events:auto}
/* la riga azzurra a meta' del riquadro, dove cade davvero il taglio del velo */
.pdv .maniglia::after{content:'';position:absolute;left:0;right:0;top:21px;
  height:2px;background:var(--cyan);box-shadow:0 0 0 1px rgba(255,255,255,.7)}
.pdv .maniglia i{position:absolute;left:50%;top:22px;transform:translate(-50%,-50%);
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--cyan);color:#fff;font-size:1rem;
  box-shadow:0 4px 14px -4px rgba(13,36,73,.6)}
/* il campo vero: invisibile, ruotato, copre tutta la scena perche' su un dito
   la presa deve essere larga quanto il blocco, non quanto la barra */
/* sotto la maniglia (z-index 6): il campo e' invisibile e non prende
   eventi, ma sopra le ruberebbe comunque il posto nella pila */
.pdv input[type=range]{position:absolute;left:50%;top:50%;z-index:5;margin:0;
  height:46px;transform:translate(-50%,-50%) rotate(90deg);
  transform-origin:center;opacity:0;cursor:ns-resize;
  /* il dito passa attraverso e arriva alla scena, dove lo script lo
     interpreta; il campo resta cliccabile col mouse */
  pointer-events:none;
  /* niente touch-action qui: il campo ruotato copre tutta la scena, e
     bloccando il gesto si impedirebbe di scorrere la pagina ovunque dentro il
     blocco. Il trascinamento col dito lo gestisce ed.js, che distingue il
     gesto verticale (il velo) da quello della pagina. Col dito il campo e'
     trasparente ai tocchi; resta valido per mouse e tastiera. */
  touch-action:auto;
  /* la larghezza del campo ruotato e' l'altezza della scena */
  width:clamp(660px,132vw,780px)}

.pdv .sug{position:absolute;top:.5rem;left:50%;transform:translateX(-50%);z-index:5;
  display:flex;align-items:center;gap:.35rem;
  background:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.9);
  border-radius:999px;padding:.28rem .7rem;
  font:600 .64rem var(--sans);color:var(--testo2);pointer-events:none;
  transition:opacity .3s}
.pdv.muove .sug{opacity:0}

/* le due didascalie in fondo, una sotto l'altra */
.pdv .piede{display:grid;gap:.4rem;padding:.8rem 1rem;
  border-top:1px solid var(--riga);background:var(--bg2)}
.pdv .piede span{font-size:.76rem;line-height:1.45;color:var(--testo2)}
.pdv .piede b{color:var(--testo);font-weight:600}

@media(prefers-reduced-motion:reduce){
  .pdv path,.pdv .foglio{animation:none}
}

/* ---- menu a scomparsa su schermo stretto --------------------------------
   Sotto i 1000px ed.css nasconde le voci del menu. Qui non spariscono: si
   aprono da un pulsante a tre righe. Lo stato sta in una casella di spunta
   nascosta invece che in uno script, cosi' il menu funziona anche nella pagina
   esportata — che non porta codice proprio — e resta raggiungibile da tastiera.
   ---------------------------------------------------------------------- */
.nav .nav-stato{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.nav .nav-tasto{display:none;margin-left:auto;cursor:pointer;
  width:42px;height:42px;border-radius:10px;
  flex-direction:column;justify-content:center;gap:5px;padding:0 9px;
  transition:background .2s}
.nav .nav-tasto span{display:block;height:2px;border-radius:2px;background:var(--testo);
  transition:transform .25s,opacity .2s}
.nav.scura .nav-tasto span{background:#fff}
/* aperto: le tre righe diventano una croce */
.nav .nav-stato:checked ~ .nav-tasto span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav .nav-stato:checked ~ .nav-tasto span:nth-child(2){opacity:0}
.nav .nav-stato:checked ~ .nav-tasto span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:1000px){
  /* Su schermo piccolo la barra non sfoca piu' quello che le passa sotto:
     backdrop-filter deve ricampionare lo sfondo a ogni fotogramma e sui
     telefoni lascia scie e strisce mentre si scorre. Un fondo pieno costa
     nulla e si vede uguale, visto che dietro passa il contenuto della pagina.
     Il contorno netto dell'elemento evita che il browser ridisegni la fascia
     sotto la barra insieme ad essa. */
  /* .nav.nav.giu: lo stesso selettore ripetuto alza la specificita' quanto
     basta a superare .nav.giu di ed.css, senza ricorrere a !important */
  .nav.nav.giu{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}
  .nav.nav.scura.giu{backdrop-filter:none;-webkit-backdrop-filter:none;
    background:var(--navy-x)}
  /* niente contain:paint sulla barra: confinerebbe il disegno al suo
     riquadro e il pannello del menu, che sporge sotto, sparirebbe */

  .nav .nav-tasto{display:flex}
  /* le voci scendono sotto la barra come un pannello a tutta larghezza */
  .nav .voci{position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;
    /* Chiuso il pannello e' alto zero ma resta un elemento posizionato: con
       l'ombra e il bordo sempre attivi lasciava una striscia che il browser
       ridipingeva male mentre si scorre, ed e' da li' che venivano le scie.
       Da chiuso quindi e' del tutto assente — niente ombra, niente bordo,
       display:none — e ricompare solo all'apertura. */
    border-bottom:0;box-shadow:none;
    /* content-visibility e non display:none: toglie il pannello dal disegno
       come farebbe display, ma senza spezzare la transizione di max-height,
       che con display non parte e il menu resterebbe chiuso. */
    max-height:0;overflow:hidden;visibility:hidden;content-visibility:hidden;
    transition:max-height .3s ease}
  .nav .nav-stato:checked ~ .voci{max-height:70vh;
    visibility:visible;content-visibility:visible;overflow:auto;
    border-bottom:1px solid var(--riga);box-shadow:var(--ombra)}
  /* la regola di ed.css nasconde le voci sotto i 1000px: qui vanno rimesse,
     ma dentro il pannello, una per riga */
  .nav .voci a:not(.cta){display:block;padding:.95rem 1.4rem;
    border-bottom:1px solid var(--riga);color:var(--testo);font-weight:600}
  .nav .voci a:not(.cta):hover{background:var(--bg2);color:var(--cyan-p)}
  .nav .voci .cta{margin:.9rem 1.4rem 1.1rem;text-align:center;justify-content:center}
  /* il pannello e' sempre chiaro, anche quando la barra e' scura: sovrapposto
     alla pagina deve leggersi da solo */
  .nav.scura .voci a:not(.cta){color:var(--testo)}
}

/* ---- TITOLO: una testata da sola --------------------------------------
   Riusa .testa, ma con lo stacco sopra: [SEZ] apre una fascia e il respiro
   glielo da' la sezione, qui invece il titolo casca fra due blocchi e senza
   un margine proprio si appiccicherebbe a quello di sopra. */
.testa.titolo-solo{margin-top:3.4rem;margin-bottom:1.8rem}
/* il primo di una sezione non ha niente sopra da cui staccarsi */
.wrap > .testa.titolo-solo:first-child{margin-top:0}
/* Il titolo di gruppo prende l'aspetto dell'etichetta di sezione (.eti):
   maiuscoletto ciano, 600 di peso, .76rem con la spaziatura larga. Cosi'
   scandisce i gruppi restando un segno di servizio, senza competere col
   titolo della sezione. */
.testa.titolo-solo .h3{font:600 .76rem var(--sans);letter-spacing:.1em;
  text-transform:uppercase;color:var(--cyan-p);margin:.4rem 0 .3rem}
.testa.titolo-solo .h3 em{font-style:normal;color:var(--cyan-p)}
/* Il pallino davanti, come nelle etichette di sezione, ma disegnato nel flusso
   del testo e non come elemento a fianco: con un flex le righe si allineano
   alla piu' lunga e su due righe il segno restava staccato dalla prima.
   Cosi' invece segue la parola, e il /n puo' spezzare dove si vuole. */
.testa.titolo-solo .h3{display:block}
.testa.titolo-solo .h3::before{content:'';display:inline-block;
  width:8px;height:8px;border-radius:50%;background:var(--cyan);
  margin-right:.55rem;vertical-align:.1em}
/* centrato il pallino non serve: li' il titolo sta da solo sull'asse della
   pagina, e il segno davanti lo spingerebbe fuori centro */
.testa.titolo-solo.centro .h3{text-align:center}
.testa.titolo-solo.centro .h3::before{content:none}
@media(max-width:700px){.testa.titolo-solo{margin-top:2.4rem;margin-bottom:1.4rem}}

/* ---- il logo enerdata nella barra --------------------------------------
   Prende il posto della parola "enerdata" accanto al marchio smart ways. Il
   file e' bianco su trasparente: sulla barra chiara va invertito e scurito,
   come gia' si fa col logo smart ways, e torna bianco quando la barra e'
   scura. Un filo piu' alto dell'altro, perche' il segno e' piu' compatto.
   ---------------------------------------------------------------------- */
.nav .marchio img.ed{height:17px;width:auto;
  filter:invert(1) brightness(.25);transition:filter .25s}
.nav.scura .marchio img.ed{filter:none}
/* su schermo stretto spariva la parola: ora sparisce il logo, per lasciare
   spazio al pulsante del menu */
@media(max-width:1000px){.nav .marchio img.ed,.nav .marchio i{display:none}}

/* ---- il pulsante di contatto nella barra: respira -----------------------
   Un alone ciano che va e viene d'intensita', piu' una scala appena
   percettibile: attira l'occhio sull'unica azione della barra senza diventare
   un lampeggio. Si anima su box-shadow e transform, le due proprieta' che il
   browser sa muovere senza ridisegnare il resto della pagina.
   Al passaggio del mouse l'animazione si ferma: chi ci sta puntando sopra non
   ha piu' bisogno di essere richiamato, e un bersaglio che pulsa da' fastidio.
   ---------------------------------------------------------------------- */
/* stesso trattamento del pulsante pieno: testo bianco e rilievo, cosi' i due
   si riconoscono come la stessa chiamata all'azione */
.nav .voci a.cta{color:#fff;
  background:linear-gradient(180deg,#54c4ee,var(--cyan) 52%,#1b96cc);
  animation:cta-respiro 2.8s ease-in-out infinite;
  will-change:transform,box-shadow}
.nav .voci a.cta:hover{color:#fff;
  background:linear-gradient(180deg,#6bcff5,#37b5e8 52%,#1f9fd6)}
.nav .voci a.cta:active{transform:translateY(1px)}
/* il respiro porta con se' la lumeggiatura e lo spessore, altrimenti il
   pulsante tornerebbe piatto a ogni ciclo dell'animazione */
@keyframes cta-respiro{
  0%,100%{transform:scale(1);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.55),
               inset 0 -2px 4px rgba(4,32,63,.22),
               0 0 0 0 rgba(41,171,226,.42),0 6px 14px -7px rgba(41,171,226,.6)}
  50%    {transform:scale(1.035);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.55),
               inset 0 -2px 4px rgba(4,32,63,.22),
               0 0 0 7px rgba(41,171,226,0),0 10px 22px -8px rgba(41,171,226,.75)}}
.nav .voci a.cta:hover{animation-play-state:paused;transform:scale(1.04)}
@media(prefers-reduced-motion:reduce){.nav .voci a.cta{animation:none}}

/* =============================================================================
   PRIMA / DOPO · impilato
   Le due scene non sono piu' sovrapposte con un cursore che le svela: stanno
   una sopra l'altra, "oggi" in alto e "con enerdata" sotto, cosi' si leggono
   insieme senza dover trascinare niente. Ogni scena tiene l'impianto
   orizzontale — fonti a sinistra, tracciati in mezzo, esiti a destra — e su
   schermo stretto si riorganizza in verticale.
   Le coordinate dei tracciati sono quelle del blocco originale, su una tela
   600x374: i centri delle quattro righe cadono a 37, 137, 237, 337.
   ========================================================================== */
.pdi{position:relative;border:1px solid var(--riga);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--ombra);background:#fff}
/* PRIMA e DOPO sono due blocchi a se: messi uno sotto l'altro devono staccarsi,
   altrimenti i due riquadri si toccano e sembrano uno diviso male */
.pdi + .pdi{margin-top:1.2rem}
/* la scena non porta piu' il bordo in cima: ce l'ha gia' il blocco */
.pdi .scena.dopo{border-top:0}

/* ---- la singola scena --------------------------------------------------- */
.pdi .scena{position:relative;display:flex;flex-direction:column}
.pdi .scena.prima{background:linear-gradient(rgba(217,83,79,.07),rgba(217,83,79,.07)),#fff}
.pdi .scena.dopo{background:linear-gradient(rgba(41,171,226,.07),rgba(41,171,226,.07)),#fff;
  border-top:1px solid var(--riga)}

.pdi .tit{display:flex;align-items:center;gap:.55rem;padding:.7rem 1.1rem;
  font:700 .7rem var(--sans);letter-spacing:.14em;text-transform:uppercase;flex:0 0 auto}
.pdi .scena.prima .tit{color:#8d3230;background:rgba(217,83,79,.1)}
.pdi .scena.dopo .tit{color:var(--cyan-p);background:rgba(41,171,226,.12)}
/* la dicitura di servizio a destra: dice cosa cambia fra le due fasce */
.pdi .tit em{margin-left:auto;font-style:normal;font-weight:600;
  letter-spacing:.04em;text-transform:none;opacity:.75}

/* tre colonne, come nel blocco originale */
.pdi .tratta{flex:1;min-height:0;display:grid;grid-template-columns:27% 1fr 27%;
  gap:1.5rem;padding:1.2rem 1.5rem;align-items:center}
/* righe alte 2,8rem con 0,984 di stacco: e' questo rapporto a far cadere i
   centri sulle quote dei tracciati. Cambiandone uno, le linee si staccano. */
.pdi .colonna{display:grid;grid-template-rows:repeat(4,2.8rem);gap:.984rem;
  align-content:center;min-width:0}

.pdi .nodo{display:flex;align-items:center;gap:.6rem;background:#fff;
  border:1px solid var(--riga);border-left:3px solid var(--cyan);border-radius:8px;
  padding:0 .85rem;font:700 .82rem var(--sans);color:var(--navy);
  white-space:nowrap;overflow:hidden;box-shadow:0 2px 6px -3px rgba(13,36,73,.25)}
.pdi .nodo b{font-weight:700;overflow:hidden;text-overflow:ellipsis}
.pdi .nodo span{margin-left:auto;font:600 .64rem var(--mono);color:#89a4bd;flex:0 0 auto}
.pdi .nodo i{flex:0 0 auto;width:1.15em;font-size:1rem;color:var(--cyan-p);line-height:1}
.pdi .nodo.ko{background:#fbe9e8;border-color:#f3d3d1;border-left-color:#e8833a;color:#8d3230}
.pdi .nodo.ko span{color:#b08483}
.pdi .nodo.ko i{color:#c2705c}
.pdi .nodo.out{background:var(--navy);border-color:var(--navy);
  border-left-color:var(--cyan);color:#eaf6fd}
.pdi .nodo.out span{color:#9fc0e0}
.pdi .nodo.out i{color:#7fc6ef}

/* la tela dei tracciati: alta quanto le quattro righe e centrata come loro */
.pdi .mid{position:relative;min-width:0;height:14.151rem;align-self:center}
.pdi .mid svg{position:absolute;top:0;left:-1.8rem;width:calc(100% + 3.6rem);
  height:100%;overflow:visible}
/* di base si vede la tela orizzontale; la verticale entra nella media query.
   Va dichiarato qui e non dopo: a parita' di specificita' vince l'ultima
   regola scritta, e messa in fondo annullava quella della media query. */
.pdi .mid .vert{display:none}

/* il tratteggio del "prima" avanza: passo e corsa coincidono, cosi' il ciclo
   si chiude senza scatti */
.pdi .scena.prima path{stroke-dasharray:11 9;animation:pdi-scorre 1.4s linear infinite}
@keyframes pdi-scorre{to{stroke-dashoffset:-20}}
.pdi .scena.dopo path{stroke-dasharray:1 0}
/* sul "dopo" un segmento luminoso percorre il tracciato e da' il verso */
.pdi .scena.dopo .flusso path{stroke-dasharray:60 400;stroke-dashoffset:460;
  animation:pdi-corre 3s linear infinite}
@keyframes pdi-corre{to{stroke-dashoffset:0}}

/* la pila di fogli del "prima" */
.pdi .pila{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(14rem,88%);height:11rem;z-index:2;pointer-events:none}
.pdi .foglio{position:absolute;width:min(11.5rem,82%);background:#fff;
  border:1px solid #dfe6ee;border-radius:3px;box-shadow:0 6px 16px rgba(20,57,111,.2);
  padding:.42rem .55rem .6rem;font:700 .68rem var(--mono);color:#5a6478;line-height:1.35;
  transform:rotate(var(--r,0deg));transform-origin:50% 120%;
  animation:pdi-onda var(--d,3.6s) ease-in-out infinite}
.pdi .foglio::before{content:'';display:block;height:4px;background:#1f7a4d;
  margin:-.42rem -.55rem .36rem}
.pdi .foglio.posta::before{background:#2a6fc9}
.pdi .foglio:nth-child(2){--d:4.3s}
.pdi .foglio:nth-child(3){--d:3.1s}
@keyframes pdi-onda{
  0%,100%{transform:rotate(var(--r,0deg)) translateY(0)}
  50%    {transform:rotate(calc(var(--r,0deg) + 1.2deg)) translateY(-2.5px)}}
/* il nome del file col segno del tipo: la X verde per il foglio di calcolo,
   la chiocciola blu per il messaggio */
.pdi .foglio b{display:flex;align-items:flex-start;gap:.28em;font-weight:700;
  overflow:hidden;white-space:nowrap}
.pdi .foglio b::before{content:'X';flex:0 0 auto;width:1.25em;height:1.25em;
  color:#1f7a4d;font:800 .95em var(--sans);display:flex;align-items:center;
  justify-content:center}
.pdi .foglio.posta b::before{content:'@';color:#2a6fc9;font-size:1.05em}
.pdi .foglio i{display:block;font-style:normal;font-size:.55rem;color:#a9b4c2;
  margin-top:.12rem}
.pdi .foglio .rr{margin-top:.3rem;display:grid;gap:1.5px}
.pdi .foglio .rr span{height:2.5px;background:#eef2f7}
.pdi .foglio .rr span:nth-child(2n){background:#e4ebf3}

/* l'hub del "dopo": il marchio dove tutto converge */
.pdi .hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  text-align:center;padding:.9rem 1.1rem;border-radius:3px;width:min(11rem,74%);
  background:linear-gradient(150deg,#153a6e,#0a2344);
  border:1px solid rgba(159,192,224,.3);box-shadow:0 10px 26px rgba(4,16,38,.4)}
.pdi .hub img{display:block;width:100%;height:auto;margin:0 auto .35rem}
.pdi .hub span{display:block;font:700 .6rem var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:#7fc6ef}


/* ---- responsive --------------------------------------------------------
   Sotto i 900px le tre colonne non ci stanno piu': la scena si impila —
   fonti in alto, tracciati in mezzo, esiti in fondo — e i tracciati ruotano
   di 90 gradi con una tela verticale propria. Le voci vanno a due per riga,
   cosi' quattro fonti stanno in due righe basse.
   ---------------------------------------------------------------------- */
@media(max-width:900px){
  .pdi .tratta{grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto 1fr auto;gap:.6rem;padding:1rem}
  .pdi .colonna{grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:none;gap:.5rem}
  .pdi .nodo{padding:.6rem .7rem;min-height:2.8rem;white-space:normal}
  .pdi .nodo b{white-space:nowrap}
  .pdi .mid{height:11rem}
  /* la tela orizzontale sparisce, entra quella verticale */
  .pdi .mid .oriz{display:none}
  .pdi .mid .vert{display:block}
  .pdi .mid svg{left:0;width:100%}
  .pdi .pila{width:min(13rem,92%);height:9rem}
}
/* Anche sul telefono le voci restano a due per riga: quattro fonti in due
   righe basse invece di una colonna lunga che allunga il blocco. A sparire e'
   l'etichetta di destra ("a mano", "auto"), che e' un dettaglio: il nome della
   fonte no, e va comunque a capo se serve. */
@media(max-width:560px){
  .pdi .colonna{gap:.4rem}
  .pdi .nodo span{display:none}
  .pdi .nodo{padding:.5rem .55rem;gap:.4rem;font-size:.74rem;line-height:1.25}
  .pdi .nodo b{white-space:normal}
  .pdi .nodo i{font-size:.9rem}
}
@media(prefers-reduced-motion:reduce){
  .pdi path,.pdi .foglio{animation:none}
}

/* ---- CASO a carosello: piu' schermate dello stesso caso ------------------
   Lo stato sta in caselle di scelta nascoste invece che in uno script: cosi'
   il carosello funziona anche nella pagina esportata, che non porta codice
   proprio, e si governa da tastiera.
   Le lastre sono impilate e quella scelta e' l'unica opaca: cambiando scelta
   la nuova sfuma sopra la precedente. Impilate e non affiancate perche' le
   schermate hanno proporzioni diverse, e una fascia che scorre le taglierebbe.
   ---------------------------------------------------------------------- */
.schermo.carosello{position:relative}
.schermo.carosello input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.schermo.carosello .lastre{position:relative}
/* la prima lastra detta l'altezza, le altre le si sovrappongono */
.schermo.carosello .lastra{position:absolute;inset:0;opacity:0;
  transition:opacity .35s ease;pointer-events:none}
.schermo.carosello .lastra:first-child{position:relative}
.schermo.carosello .lastra img{width:100%;display:block}
/* la barra della finestra sta dentro ogni lastra: la dicitura cambia con
   la schermata */
.schermo.carosello .lastra .barra{display:flex;align-items:center;gap:.4rem;
  padding:.55rem .9rem;background:#f1f5f9;border-bottom:1px solid var(--riga)}
.schermo.carosello .lastra .barra i{width:9px;height:9px;border-radius:50%;
  background:#cfd8e3;display:block}
.schermo.carosello .lastra .barra span{margin-left:.6rem;font:500 .72rem var(--sans);
  color:var(--testo3)}

/* l'accoppiata fra la casella spuntata e la sua lastra: la prima casella
   accende la prima lastra, la seconda la seconda, e cosi' via fino a sei */
.schermo.carosello input:nth-of-type(1):checked ~ .lastre .lastra:nth-child(1),
.schermo.carosello input:nth-of-type(2):checked ~ .lastre .lastra:nth-child(2),
.schermo.carosello input:nth-of-type(3):checked ~ .lastre .lastra:nth-child(3),
.schermo.carosello input:nth-of-type(4):checked ~ .lastre .lastra:nth-child(4),
.schermo.carosello input:nth-of-type(5):checked ~ .lastre .lastra:nth-child(5),
.schermo.carosello input:nth-of-type(6):checked ~ .lastre .lastra:nth-child(6){
  opacity:1;pointer-events:auto;z-index:2}

/* i punti sotto: uno per schermata, quello attivo si allunga */
.schermo.carosello .punti-c{position:absolute;left:0;right:0;bottom:.7rem;z-index:3;
  display:flex;justify-content:center;gap:.4rem}
.schermo.carosello .punti-c label{width:8px;height:8px;border-radius:999px;
  background:rgba(13,36,73,.25);cursor:pointer;
  box-shadow:0 0 0 1px rgba(255,255,255,.6);
  transition:width .25s,background .25s}
.schermo.carosello .punti-c label:hover{background:rgba(13,36,73,.45)}
.schermo.carosello input:nth-of-type(1):checked ~ .punti-c label:nth-child(1),
.schermo.carosello input:nth-of-type(2):checked ~ .punti-c label:nth-child(2),
.schermo.carosello input:nth-of-type(3):checked ~ .punti-c label:nth-child(3),
.schermo.carosello input:nth-of-type(4):checked ~ .punti-c label:nth-child(4),
.schermo.carosello input:nth-of-type(5):checked ~ .punti-c label:nth-child(5),
.schermo.carosello input:nth-of-type(6):checked ~ .punti-c label:nth-child(6){
  width:22px;background:var(--cyan)}
/* il contorno quando si arriva col tasto di tabulazione */
.schermo.carosello input:focus-visible ~ .punti-c label{outline:2px solid var(--cyan);
  outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  .schermo.carosello .lastra{transition:none}
}

/* [BOTTONI:centro]: i pulsanti sull'asse della pagina invece che a sinistra */
.btns.centro{justify-content:center}

/* ---- il pulsante pieno fra i blocchi: respira come quello nella barra -----
   Vale solo per il primo di una coppia — quello pieno, che e' la chiamata
   all'azione — e non per il secondo, che e' un rimando secondario e non deve
   competere. Stessa animazione della barra, cosi' i due si riconoscono.
   ---------------------------------------------------------------------- */
/* ---- il pulsante pieno: in rilievo, non piatto ---------------------------
   Tre cose lo fanno sembrare un oggetto e non un rettangolo colorato: un
   gradiente dall'alto in basso, che da' il verso della luce; una lumeggiatura
   sul bordo superiore e un'ombra interna sotto, come uno spessore; e l'ombra
   proiettata che lo stacca dalla pagina. Premendolo rientra di un pixel e
   l'ombra si accorcia, come un tasto vero.
   Il testo passa a bianco: sul ciano il blu notte di prima aveva poco stacco.
   ---------------------------------------------------------------------- */
.btn.pieno{color:#fff;
  background:linear-gradient(180deg,#54c4ee,var(--cyan) 52%,#1b96cc);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),
             inset 0 -2px 4px rgba(4,32,63,.22),
             0 8px 18px -8px rgba(41,171,226,.75)}
.btn.pieno:hover{color:#fff;
  background:linear-gradient(180deg,#6bcff5,#37b5e8 52%,#1f9fd6)}
/* premuto: rientra e perde spessore */
.btn.pieno:active{transform:translateY(1px);
  box-shadow:inset 0 2px 5px rgba(4,32,63,.3),
             0 3px 8px -5px rgba(41,171,226,.6)}

/* Ogni pulsante pieno respira, ovunque si trovi: nella hero, fra i blocchi e
   nella sezione finale. Prima la regola valeva solo dentro .btns, e nel
   blocco [CTA] — dove il pulsante sta in un contenitore diverso — restava
   fermo (verificato: animation none). */
.btn.pieno{animation:cta-respiro 2.8s ease-in-out infinite;
  will-change:transform,box-shadow}
.btn.pieno:hover{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.btn.pieno{animation:none}}

/* ---- PASSI: le colonne arrivano da --col -------------------------------
   Il compositore non scrive piu' grid-template-columns nello style inline,
   perche' vincerebbe su ogni media query: passa il numero in --col e qui lo
   si usa, cosi' sotto i 900px si puo' tornare a una colonna sola.
   ---------------------------------------------------------------------- */
.passi{grid-template-columns:repeat(var(--col,3),minmax(0,1fr))}
@media(max-width:900px){
  .passi{grid-template-columns:1fr}
  .passo .freccia{display:none}
}

/* ---- PROFILI: icona affiancata a ruolo e titolo -------------------------
   Prima l'icona stava sopra e il testo sotto, in colonna: la scheda diventava
   alta e stretta. Qui icona e intestazione stanno sulla stessa riga, e la
   descrizione corre sotto per tutta la larghezza.
   ---------------------------------------------------------------------- */
.profilo .alto{display:flex;align-items:center;gap:.85rem;margin-bottom:.7rem}
.profilo .alto .icona{flex:0 0 auto;margin:0}
.profilo .chi{min-width:0}
/* nell'intestazione le due righe si stringono: il respiro lo da' il .alto */
.profilo .chi .ruolo{margin-bottom:.15rem}
.profilo .chi h4{margin:0}

/* ---- CARTE: icona affiancata al titolo ----------------------------------
   Come nei profili: icona e titolo sulla stessa riga, descrizione sotto per
   tutta la larghezza. L'icona qui e' piu' grande (54px), quindi si rimpicciolisce
   un poco per non dominare la riga.
   ---------------------------------------------------------------------- */
.carta .alto{display:flex;align-items:center;gap:.9rem;margin-bottom:.7rem}
.carta .alto .icona{flex:0 0 auto;width:44px;height:44px;border-radius:13px;
  font-size:1.25rem;margin:0}
.carta .alto h4{margin:0;min-width:0}

/* ---- PASSI: numero affiancato al titolo ---------------------------------
   Come nelle carte e nei profili. Il numero era grande e sopra: ora sta di
   fianco, un po' piu' contenuto, e la descrizione corre sotto.
   ---------------------------------------------------------------------- */
.passo .alto{display:flex;align-items:center;gap:.8rem;margin-bottom:.7rem}
.passo .alto .n{flex:0 0 auto;margin:0;font-size:2rem;line-height:1}
.passo .alto h4{margin:0;min-width:0}

/* ---- le frecce del carosello dei casi ----------------------------------
   Una coppia per schermata, ma visibile solo quella della schermata attiva:
   una casella di scelta non conosce il concetto di "precedente", quindi ogni
   coppia punta gia' alle due schermate giuste. Si accoppiano alle caselle con
   lo stesso criterio dei punti, fino a sei schermate.
   ---------------------------------------------------------------------- */
.schermo.carosello .frecce-c{position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);z-index:4;display:none;
  justify-content:space-between;padding:0 .7rem;pointer-events:none}
/* l'accoppiata passa da data-i e non dalla posizione: nth-of-type conta tutti
   i div fratelli, lastre comprese, e non tornava mai */
.schermo.carosello input:nth-of-type(1):checked ~ .frecce-c[data-i="0"],
.schermo.carosello input:nth-of-type(2):checked ~ .frecce-c[data-i="1"],
.schermo.carosello input:nth-of-type(3):checked ~ .frecce-c[data-i="2"],
.schermo.carosello input:nth-of-type(4):checked ~ .frecce-c[data-i="3"],
.schermo.carosello input:nth-of-type(5):checked ~ .frecce-c[data-i="4"],
.schermo.carosello input:nth-of-type(6):checked ~ .frecce-c[data-i="5"]{display:flex}
.schermo.carosello .fre{width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;pointer-events:auto;
  background:rgba(255,255,255,.88);color:var(--navy);
  border:1px solid rgba(13,36,73,.12);
  box-shadow:0 4px 12px -6px rgba(13,36,73,.5);
  transition:background .2s,transform .2s}
.schermo.carosello .fre:hover{background:#fff;transform:scale(1.08)}
.schermo.carosello .fre i{font-size:1.05rem}
/* sul telefono restano, ma piu' piccole: il dito ci arriva lo stesso e non
   coprono meta' schermata */
@media(max-width:700px){
  .schermo.carosello .fre{width:28px;height:28px}
  .schermo.carosello .fre i{font-size:.9rem}
}

/* ---- i collegamenti legali nel piede ------------------------------------
   Privacy e cookie policy: piu' piccoli e smorzati del resto, perche' devono
   esserci ma non competere con i contatti. Iubenda ci aggiunge un suo stile:
   qui si riporta il colore a quello del piede.
   ---------------------------------------------------------------------- */
.piede .legale{font-size:.8rem;opacity:.7}
.piede .legale a,
.piede .legale a.iubenda-black{color:inherit;text-decoration:none;
  background:none;border:0;padding:0;font:inherit}
.piede .legale a:hover{text-decoration:underline}

/* ---- l'esito dell'invio del modulo --------------------------------------
   Il messaggio che arriva dal servizio, sotto ai campi: la conferma cordiale
   quando e' andata, il motivo quando no. Sul pulsante non ci starebbe.
   ---------------------------------------------------------------------- */
.campi .esito{grid-column:1/-1;margin:.2rem 0 0;padding:.75rem .9rem;
  border-radius:var(--r2);background:var(--bg2);border:1px solid var(--riga);
  font-size:.88rem;line-height:1.5;color:var(--testo2)}