/* Sezione fluida (principi di design di Apple, WWDC "Designing Fluid Interfaces"): il gemello vivo resta fermo
   dietro la sezione e i capitoli lo raccontano mentre si scorre; la camera vola sulla parte di cui si parla, un filo
   lega le misure al punto da cui arrivano. Va con fluido.js. Classi fd-*, cosi' non si scontrano con il resto. */
.fd{--fd-notte:#07101d;--fd-scena:#0c1626;--fd-riga:rgba(255,255,255,.10);--fd-tenue:#9fb0c2;--fd-ciano:#7fe0ff;--fd-verde:#3fd69a;
  --fd-vetro:rgba(9,18,32,.58);--fd-vetro-forte:rgba(9,18,32,.8);
  --fd-titoli:"Barlow Semi Condensed","IBM Plex Sans",system-ui,sans-serif;
  position:relative;background:var(--fd-scena);isolation:isolate}
body[data-settore="agritech"] .fd [data-per]:not([data-per~="agritech"]),body[data-settore="building"] .fd [data-per]:not([data-per~="building"]),
body[data-settore="industrial"] .fd [data-per]:not([data-per~="industrial"]){display:none}

/* il palco: alto uno schermo, resta fermo per tutta la sezione */
/* il guscio occupa tutta la sezione e tiene il palco dentro i suoi bordi: finita la sezione, il palco se ne va con lei */
.fd-guscio{position:absolute;inset:0;z-index:0;pointer-events:none}
.fd-palco{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--fd-scena);--buio:0;pointer-events:auto}
.fd-palco iframe,.fd-palco img{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;transition:opacity .45s ease}
.fd-palco iframe{pointer-events:none}
@media(min-width:1100px){.fd-palco iframe,.fd-palco img{left:30%;width:70%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%);mask-image:linear-gradient(90deg,transparent,#000 14%)}
  .fd.esplora .fd-palco iframe{left:0;width:100%;-webkit-mask-image:none;mask-image:none}}
.fd.esplora .fd-palco iframe{pointer-events:auto}
.fd-velo{position:absolute;inset:0;pointer-events:none;transition:opacity .35s;
  background:linear-gradient(90deg,rgba(7,16,29,.9) 0%,rgba(7,16,29,.6) 32%,rgba(7,16,29,0) 46%),linear-gradient(0deg,rgba(7,16,29,.75),transparent 30%)}
.fd-scuro{position:absolute;inset:0;pointer-events:none;background:var(--fd-notte);opacity:calc(.3 * var(--buio))}
.fd.esplora .fd-velo{opacity:.25}.fd.esplora .fd-scuro{opacity:0}
.fd.esplora .fd-apertura>*,.fd.esplora .fd-capitoli{visibility:hidden}
.fd.esplora .fd-angolo{visibility:visible}
.fd.esplora .fd-apertura,.fd.esplora .fd-capitoli{pointer-events:none}.fd.esplora .fd-angolo{pointer-events:auto}
.fd-avvia{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2}
@media(max-width:760px){.fd-velo{background:linear-gradient(180deg,rgba(7,16,29,.88) 0%,rgba(7,16,29,.35) 46%,rgba(7,16,29,.2) 70%,rgba(7,16,29,.85))}}

/* apertura (solo home) */
.fd-apertura{position:relative;z-index:1;min-height:92svh;display:flex;align-items:center;padding:7.5rem 0 4rem}
.fd-apertura .container{width:min(calc(100% - 40px),var(--max,1240px))}
.fd-apertura .container>*{max-width:36rem}
.fd-titolo{margin:0;font-family:var(--fd-titoli);font-weight:600;font-size:clamp(2.6rem,6vw,5rem);line-height:.98;letter-spacing:-.022em;text-wrap:balance}
.fd-apertura .lead{max-width:34em;margin:1.1rem 0 0}
.fd-azioni{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.8rem}

/* selettore del settore: un pollice che si trascina e si posa a molla */
.fd-angolo{position:absolute;z-index:2;top:6.6rem;right:max(20px,calc((100vw - var(--max,1240px))/2));width:min(32rem,calc(100vw - 40px))}
.fd-angolo>p{margin:0 0 .5rem;text-align:right;font-size:.8rem;color:var(--fd-tenue)}
.fd-selettore{position:relative;display:grid;grid-template-columns:repeat(3,1fr);padding:4px;border-radius:16px;
  background:var(--fd-vetro);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  box-shadow:inset 0 0 0 1px var(--fd-riga);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.fd-selettore button{position:relative;z-index:1;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.55rem;align-items:center;
  text-align:left;border:0;background:none;padding:.55rem .6rem;border-radius:12px;cursor:pointer;color:#c3d0dd;font:inherit;-webkit-tap-highlight-color:transparent}
.fd-selettore img{grid-row:1/3;width:30px;height:30px;border-radius:8px;pointer-events:none}
.fd-selettore b{font-size:.9rem;font-weight:600;line-height:1.2;transition:color .2s}
.fd-selettore button span{font-size:.72rem;line-height:1.3;color:var(--fd-tenue);transition:color .2s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-selettore button[aria-selected="true"] b{color:#07101d}
.fd-selettore button[aria-selected="true"] span{color:#4a5a6c}
.fd-pollice{position:absolute;top:4px;bottom:4px;left:0;width:calc((100% - 8px)/3);border-radius:12px;background:#eef4f8;
  box-shadow:0 4px 14px rgba(0,0,0,.25);will-change:transform;cursor:grab}
.fd-pollice.preso{cursor:grabbing;box-shadow:0 8px 22px rgba(0,0,0,.32)}
.fd-sotto{margin-top:.6rem;display:flex;align-items:center;justify-content:flex-end;gap:.9rem;flex-wrap:wrap;font-size:.8rem;color:var(--fd-tenue)}
.fd-sotto a,.fd-esplora{background:none;border:0;padding:0;font:inherit;font-size:.82rem;color:var(--fd-ciano);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.fd-esplora .fd-torna,.fd.esplora .fd-esplora .fd-ruota{display:none}
.fd.esplora .fd-esplora .fd-torna{display:inline}
@media(max-width:860px){
  .fd-apertura{flex-direction:column;justify-content:center}
  .fd-angolo{position:relative;top:auto;right:auto;width:min(calc(100% - 40px),var(--max,1240px));margin:2rem auto 0}
  .fd-angolo>p,.fd-sotto{text-align:left;justify-content:flex-start}
}
@media(max-width:480px){.fd-selettore img{width:24px;height:24px;grid-row:auto}.fd-selettore button{grid-template-columns:1fr;justify-items:start;row-gap:.3rem}.fd-selettore button span{display:none}}

/* capitoli: un quadro fermo mentre si scorre; cambiano testo e misure, il gemello resta a destra */
.fd-capitoli{position:relative;z-index:1;height:300svh}
.fd-fisso{position:sticky;top:0;height:100svh;display:flex;align-items:center}
.fd-fisso>.container{margin-block:0}
.fd-colonna{width:min(100%,31rem);display:grid;gap:1.5rem;padding-top:3.5rem}
.fd-passi{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.fd-passi button{position:relative;border:0;background:none;padding:0 0 .65rem;text-align:left;cursor:pointer;
  font:600 .95rem/1.2 var(--fd-titoli);letter-spacing:.005em;color:var(--fd-tenue);transition:color .2s;-webkit-tap-highlight-color:transparent}
.fd-passi button:hover{color:#dce6ef}
.fd-passi button[aria-selected="true"]{color:#fff}
.fd-passi button:before,.fd-passi button i{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px}
.fd-passi button:before{background:rgba(255,255,255,.12)}
.fd-passi button i{background:var(--fd-ciano);transform-origin:left;transform:scaleX(0)}
/* i tre capitoli stanno uno sopra l'altro: quello attivo si vede, gli altri escono verso l'alto o il basso */
.fd-testi{display:grid}
.fd-cap{grid-area:1/1;opacity:0;visibility:hidden;translate:0 var(--fuori,14px);transition:opacity .2s ease,translate .3s cubic-bezier(.2,.8,.2,1),visibility 0s .3s}
.fd-cap.attivo{opacity:1;visibility:visible;translate:none;transition:opacity .3s ease .08s,translate .4s cubic-bezier(.2,.8,.2,1) .08s,visibility 0s}
.fd-cap h2{margin:0;font-family:var(--fd-titoli);font-weight:600;font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.02;letter-spacing:-.018em;text-wrap:balance}
.fd-cap p{color:#c6d3e0;font-size:1.08rem;margin:.8rem 0 0}
.fd-et{display:flex;flex-wrap:wrap;gap:.4rem;margin:1rem 0 0;padding:0;list-style:none}
.fd-et li{font-size:.78rem;padding:.3rem .65rem;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--fd-riga)}

/* pannello delle misure: vetro spesso, si materializza (sfocatura e scala insieme) */
.fd-misure{position:relative;z-index:6;border-radius:20px;background:var(--fd-vetro-forte);backdrop-filter:blur(30px) saturate(170%);-webkit-backdrop-filter:blur(30px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 0 1px rgba(255,255,255,.07),0 24px 60px rgba(0,0,0,.4);
  padding:1.1rem 1.2rem 1.2rem;opacity:0;filter:blur(8px);scale:.96;pointer-events:none;
  transition:opacity .35s ease,filter .35s ease,scale .45s cubic-bezier(.2,.8,.2,1)}
.fd-misure.su{opacity:1;filter:none;scale:1;pointer-events:auto}
.fd-maniglia{display:none}
.fd-mis{display:none}
.fd-mis.attivo{display:block;animation:fd-entra .3s ease}
@keyframes fd-entra{from{opacity:0}}
.fd-mis header{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.7rem}
.fd-mis header b{font-family:var(--fd-titoli);font-size:1.15rem;font-weight:600;letter-spacing:-.005em}
.fd-stato{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;color:#bfeedd;letter-spacing:.01em}
.fd-stato:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--fd-verde);box-shadow:0 0 0 4px rgba(63,214,154,.14)}
.fd-mis dl{margin:0;display:grid;gap:1px;border-radius:12px;overflow:hidden;background:var(--fd-riga)}
.fd-mis dl div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.62rem .75rem;background:rgba(10,20,34,.88)}
.fd-mis dt{font-size:.85rem;color:var(--fd-tenue)}
.fd-mis dd{margin:0;font-weight:600;font-size:.95rem;text-align:right;font-variant-numeric:tabular-nums;transition:color .6s}
.fd-mis dd.cambia{color:var(--fd-ciano);transition:none}
.fd-nota{margin:.75rem 0 0;font-size:.8rem;color:var(--fd-tenue)}.fd-nota a{color:var(--fd-ciano)}

/* su telefono il gemello e' un riquadro: sotto l'apertura, poi fermo in alto mentre sotto scorrono testo e misure.
   Niente sfocature sopra il 3D (su iPhone sono la cosa piu' costosa da disegnare). */
@media(max-width:760px){
  .fd{--alto:44svh;--cima:4.9rem}
  .fd-palco{top:var(--cima);height:var(--alto);margin:var(--sotto-apertura,0px) 16px 0;border-radius:20px;box-shadow:inset 0 0 0 1px var(--fd-riga)}
  .fd-velo,.fd-scuro{display:none}
  .fd-apertura{min-height:0;display:block;padding:6.2rem 0 1.5rem}
  .fd-apertura .container>*{max-width:none}
  .fd-angolo{margin:calc(var(--alto) + 1.4rem) auto 0}
  .fd-selettore{backdrop-filter:none;-webkit-backdrop-filter:none;background:#0d1929}
  .fd-fisso{align-items:flex-start;padding-top:calc(var(--cima) + var(--alto) + 1rem)}
  .fd-colonna{padding-top:0;gap:.8rem}
  .fd-cap h2{font-size:1.65rem}
  .fd-cap p{font-size:.98rem;margin-top:.45rem}
  .fd-et,.fd-nota,.fd-maniglia{display:none}
  .fd-misure{padding:.75rem .85rem;border-radius:16px;background:#0d1929;backdrop-filter:none;-webkit-backdrop-filter:none;filter:none;scale:1;transition:opacity .25s;box-shadow:inset 0 0 0 1px var(--fd-riga)}
  .fd-mis header{margin-bottom:.5rem}
  .fd-mis dl{grid-template-columns:1fr 1fr}
  .fd-mis dl div{flex-direction:column;gap:.1rem;padding:.5rem .6rem}
  .fd-mis dd{text-align:left;font-size:.9rem}
  .fd-mis dt{font-size:.75rem}
  .fd-mis dl div:last-child:nth-child(odd){grid-column:1/-1}
}

/* il filo che lega il pannello delle misure al punto del gemello da cui arrivano */
.fd-guida{position:fixed;inset:0;width:100%;height:100%;z-index:5;pointer-events:none;opacity:0;transition:opacity .4s}
.fd-guida.su{opacity:1}
.fd-guida path{fill:none;stroke:var(--fd-ciano);stroke-width:1.4;stroke-opacity:.75;stroke-dasharray:3 5}
.fd-guida .punto{fill:var(--fd-ciano)}
.fd-guida .alone{fill:none;stroke:var(--fd-ciano);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:fd-alone 1.8s ease-out infinite}
@keyframes fd-alone{from{opacity:.8;scale:.3}to{opacity:0;scale:1.6}}
@media(max-width:760px){.fd-guida{display:none}}

/* componi i pezzi */
.fd-componi{display:grid;grid-template-columns:minmax(0,22rem) 1fr;gap:1.2rem;align-items:stretch}
.fd-pezzi{display:grid;gap:.6rem;align-content:start}
.fd-pezzo{display:grid;grid-template-columns:2.4rem 1fr auto;align-items:center;gap:.85rem;text-align:left;padding:.9rem 1rem;border-radius:16px;
  border:0;background:#0e1a2b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);cursor:pointer;color:inherit;font:inherit;
  transition:transform .1s ease-out,box-shadow .2s,background-color .2s;-webkit-tap-highlight-color:transparent}
.fd-pezzo:active{transform:scale(.98)}
.fd-pezzo img{width:2.4rem;height:2.4rem}
.fd-pezzo b{display:block;font-family:"Barlow Semi Condensed","IBM Plex Sans",sans-serif;font-size:1.2rem;font-weight:600;letter-spacing:-.005em}
.fd-pezzo span span{display:block;font-size:.84rem;color:#9fb0c2;line-height:1.4}
.fd-spunta{width:1.5rem;height:1.5rem;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25);display:grid;place-items:center;transition:background-color .2s,box-shadow .2s}
.fd-spunta svg{width:.9rem;height:.9rem;stroke:#07101d;stroke-width:3;fill:none;opacity:0;transition:opacity .15s}
.fd-pezzo[aria-pressed="true"]{background:#122239;box-shadow:inset 0 0 0 1px rgba(127,224,255,.45)}
.fd-pezzo[aria-pressed="true"] .fd-spunta{background:#7fe0ff;box-shadow:none}
.fd-pezzo[aria-pressed="true"] .fd-spunta svg,.fd-pezzo.incluso .fd-spunta svg{opacity:1}
.fd-pezzo.incluso .fd-spunta{background:rgba(127,224,255,.35);box-shadow:none}
.fd-schema{border-radius:20px;background:#0e1a2b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);padding:1.4rem;display:flex;flex-direction:column;gap:1rem;min-width:0}
.fd-schema svg{width:100%;height:auto;display:block}
.fd-schema .nodo rect{fill:#0a1525;stroke:rgba(255,255,255,.14);stroke-width:1;transition:stroke .3s,fill .3s}
.fd-schema .nodo text{fill:#7f90a3;font:600 15px "IBM Plex Sans",sans-serif;transition:fill .3s}
.fd-schema .nodo.vivo rect{stroke:#7fe0ff;fill:#10243a}
.fd-schema .nodo.vivo text{fill:#fff}
.fd-schema .nodo image{opacity:.35;filter:grayscale(.6);transition:opacity .3s,filter .3s}.fd-schema .nodo.vivo image{opacity:1;filter:none}
.fd-schema .filo{stroke:rgba(255,255,255,.12);stroke-width:2;fill:none;stroke-dasharray:5 6;transition:stroke .3s}
.fd-schema .filo.vivo{stroke:#7fe0ff;stroke-dasharray:10 8;animation:fd-scorre 1.1s linear infinite}
@keyframes fd-scorre{to{stroke-dashoffset:-18}}
.fd-schema .legenda{fill:#5f7186;font:500 12px "IBM Plex Sans",sans-serif}
.fd-esiti p{display:none;margin:0;font-size:1.05rem;color:#d6e1ec;min-height:3.3em}
.fd-esiti p.attivo{display:block}
@media(max-width:860px){.fd-componi{grid-template-columns:1fr}}

/* chi chiede meno movimento: dissolvenze brevi, niente scala, niente flusso nei fili */
@media(prefers-reduced-motion:reduce){
  .fd-misure{transition:opacity .2s;filter:none;scale:1}
  .fd-cap,.fd-cap.attivo{translate:none}
  .fd-schema .filo.vivo,.fd-guida .alone{animation:none}
  .fd-pezzo:active{transform:none}
}
/* chi chiede meno trasparenza: superfici piene */
@media(prefers-reduced-transparency:reduce){.fd-selettore,.fd-misure{background:#0d1929;backdrop-filter:none;-webkit-backdrop-filter:none}}
/* chi chiede piu' contrasto: bordi netti */
@media(prefers-contrast:more){.fd{--fd-riga:rgba(255,255,255,.4);--fd-tenue:#d5dee8}.fd-selettore,.fd-misure{background:#0a1422}}

/* "Si collega": lo schema resta fermo e si costruisce mentre si scorre, in tre tempi (campo, rete, fuori).
   Ogni pezzo ha il suo momento (data-t, da 0 a 1); fluido.js gli passa --v da 0 a 1 e lui compare o si disegna. */
.fr.section{padding:0}
.fr-corsa{height:280svh}
.fr-fisso{position:sticky;top:0;height:100svh;display:flex;align-items:center}
.fr-fisso>.container{margin-block:0}
.fr-griglia{display:grid;grid-template-columns:minmax(0,21rem) minmax(0,1fr);gap:2.5rem;align-items:center;padding-top:4rem}
.fr-testo{display:grid;gap:1.2rem}
.fr-testo .headline{margin:0;font-size:clamp(2rem,3vw,2.8rem)}
.fr-intro{margin:0;color:#aebccc}
.fr .fd-cap h3{margin:0;font-family:"Barlow Semi Condensed","IBM Plex Sans",sans-serif;font-weight:600;font-size:1.55rem;letter-spacing:-.005em}
.fr .fd-cap p{font-size:1rem;margin:.5rem 0 0;color:#c6d3e0}
.fr-percorso{margin:0;min-height:3.2em;font-size:.88rem;color:#9fb0c2}
.fr-viaggio{display:none;color:#e6eef6}.fr-viaggio b{color:#7fe0ff;font-weight:600}
.fr.segue .fr-invito{display:none}.fr.segue .fr-viaggio{display:inline}
.fr-figura{margin:0;min-width:0}
.fr-svg.fr-verticale{display:none}     /* la versione verticale e' solo per il telefono */
.fr.fuori .fr-verticale .a1{--d:-112px}.fr.fuori .fr-verticale .a2{--d:-142px}.fr.fuori .fr-verticale .a3{--d:-102px}
.fr-svg{display:block;width:100%;height:auto;overflow:visible}
/* spento, lo schema e' un progetto in filigrana: solo contorni tenui; acceso, prende colore e i dati corrono */
.fr-svg [data-t]{opacity:calc(.22 + .78 * var(--v,0))}
.fr-svg .n[data-t] rect{stroke-dasharray:calc(6 * (1 - var(--v,0))) calc(4 * (1 - var(--v,0)));fill-opacity:calc(.15 + .85 * var(--v,0))}
.fr-svg .filo[data-t]{opacity:1;stroke-opacity:calc(.18 + .82 * var(--v,0))}
.fr-svg .dati[data-t],.fr-svg .attacchi[data-t],.fr-svg .lucchetto[data-t]{opacity:var(--v,0)}
.fr-svg .zona{fill:rgba(255,255,255,.025);stroke:rgba(255,255,255,.12)}
.fr-svg .zona-fuori{stroke-dasharray:6 5}
.fr-svg .zona-t{fill:#7fe0ff;font-size:13px;font-weight:700;letter-spacing:.14em}
.fr-svg .n rect{fill:#0d1a2b;stroke:rgba(255,255,255,.16);transition:stroke .25s,fill .25s}
.fr-svg .n text{fill:#e6eef6;font-size:15.5px;font-weight:600}
.fr-svg .sub{fill:#8fa1b5!important;font-size:12.5px!important;font-weight:500!important}
.fr-svg .et{fill:#ffc668!important;font-size:11px!important;font-weight:700!important;letter-spacing:.12em}
.fr-svg .n-suite rect{fill:rgba(255,198,104,.05);stroke:rgba(255,198,104,.6)}
.fr-svg .riga text{fill:#fff;font-size:17px;font-weight:600}
.fr-svg .n-fw rect{stroke:rgba(255,138,122,.75)}
.fr-svg .scudo{fill:none;stroke:#ff8a7a;stroke-width:1.6}
.fr-svg .filo{fill:none;stroke:rgba(127,224,255,.5);stroke-width:1.6;transition:stroke .25s,stroke-width .25s,stroke-opacity .25s}
.fr-svg .tunnel{stroke:#7fe0ff;stroke-width:3;stroke-opacity:.8}
.fr-svg .et-filo{fill:#8fa1b5;font-size:12px}
.fr-svg .lucchetto rect{fill:#7fe0ff}.fr-svg .lucchetto path{fill:none;stroke:#7fe0ff;stroke-width:1.8}
.fr-svg .dato{fill:#7fe0ff}.fr-svg .dato.giu{fill:#ffc668}
/* chi bussa da internet: le frecce arrivano al firewall, rimbalzano e spariscono */
.fr-svg .att{fill:none;stroke:#ff8a7a;stroke-width:1.8;stroke-linecap:round;opacity:0}
.fr.fuori .fr-svg .att{animation:fr-bussa 2.4s ease-in infinite}
.fr.fuori .fr-svg .a1{--d:-62px}.fr.fuori .fr-svg .a2{--d:-82px;animation-delay:.8s}.fr.fuori .fr-svg .a3{--d:-52px;animation-delay:1.6s}
@keyframes fr-bussa{0%{opacity:0;transform:translateX(0)}15%{opacity:1}55%{opacity:1;transform:translateX(var(--d))}75%{opacity:.5;transform:translateX(calc(var(--d) + 22px))}100%{opacity:0;transform:translateX(calc(var(--d) + 22px))}}
.fr.fuori .fr-svg .n-fw rect{animation:fr-allerta .8s ease-out infinite .45s}
@keyframes fr-allerta{0%{stroke:#ff8a7a;fill:rgba(255,138,122,.16)}100%{stroke:rgba(255,138,122,.75);fill:#0d1a2b}}
/* un dispositivo scelto: il suo percorso si accende, il resto si fa da parte */
.fr-svg .dev{cursor:pointer;outline:none}
.fr-svg .dev:hover rect,.fr-svg .dev:focus-visible rect{stroke:rgba(127,224,255,.7)}
.fr.segue .fr-svg .dev:not(.scelto){opacity:calc((.22 + .78 * var(--v,0)) * .4)}
.fr.segue .fr-svg .scelto rect{stroke:#7fe0ff;fill:#10243a}
.fr.segue .fr-svg .filo[data-via]:not(.via){stroke-opacity:.1}
.fr.segue .fr-svg .filo.via{stroke:#bff3ff;stroke-width:2.8;stroke-opacity:1}
.fr.segue .fr-svg .n.via rect{stroke:#7fe0ff}
.fr.segue .fr-svg .dati[data-via]:not(.via){display:none}
.fr.segue .fr-svg .dati.via .dato{r:5}
@media(max-width:860px){
  .fr-corsa{height:auto}
  .fr-fisso{position:static;height:auto;display:block;padding:5rem 0 2rem}
  .fr-griglia{grid-template-columns:1fr;gap:1.6rem;padding-top:0}
  .fr-svg.fr-orizzontale{display:none}.fr-svg.fr-verticale{display:block;max-width:460px;margin:0 auto}
  .fr .fd-testi{display:grid;gap:1rem}.fr .fd-cap{grid-area:auto;opacity:1;visibility:visible;translate:none}
  .fr .fd-passi{display:none}
}
@media(prefers-reduced-motion:reduce){.fr.fuori .fr-svg .att,.fr.fuori .fr-svg .n-fw rect{animation:none}.fr.fuori .fr-svg .a1{opacity:.8}}