/* NTS NEXT — pagina Infrastruttura IT. Solo quello che serve a questa pagina; il sistema sta in sito.css. */

/* ── 1. Testata con lo schema di rete ───────────────────── */
.infra-parole{margin-top:30px;max-width:46ch}
.rete-figura{margin:0}
.rete-figura figcaption{margin-top:10px;font-size:.84rem;color:var(--testo-2);text-align:center}
.rete{overflow:visible}
.rete .perimetro{fill:rgba(255,255,255,.018);stroke:var(--bordo-forte);stroke-width:1.2;stroke-dasharray:4 8}
.rete text{font-family:var(--font)}
.rete .nome-zona{fill:var(--testo-2);font-size:14px;font-weight:600}
.rete .nome{fill:var(--testo-2);font-size:14px;font-weight:600;text-anchor:middle}
.rete .nome-cavo{fill:var(--accento);font-size:12px;font-weight:700;text-anchor:middle}
.rete .cavo{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1.5;stroke-linejoin:round}
.rete .cavo.vpn{stroke:var(--accento);stroke-opacity:.75;stroke-dasharray:6 6}
.rete .corpo{fill:#0C2A30;stroke:#C4D6DA;stroke-width:1.5;stroke-linejoin:round}
.rete .tratto{stroke:#C4D6DA;stroke-width:1.3}
.rete .led{fill:var(--accento);opacity:.55}
.rete .pacchetto{fill:none;stroke:var(--accento);stroke-width:7;stroke-linecap:round;stroke-dasharray:.01 99.99;opacity:0}

/* in ciclo solo mentre lo schema si vede (sito.js mette .in-vista) */
.rete-figura.in-vista .corpo{animation:nodo-lume 6s var(--esce) infinite}
.rete-figura.in-vista .led{animation:lampeggia 1.6s steps(2,jump-none) infinite}
.rete-figura.in-vista .pacchetto{animation:viaggia 6s linear infinite}
.rete-figura.in-vista .n2 .corpo{animation-delay:.7s}
.rete-figura.in-vista .n3 .corpo{animation-delay:1.4s}
.rete-figura.in-vista .n4 .corpo{animation-delay:2.1s}
.rete-figura.in-vista .n5 .corpo{animation-delay:2.2s}
.rete-figura.in-vista .n6 .corpo{animation-delay:2.3s}
.rete-figura.in-vista .n7 .corpo{animation-delay:2.4s}
.rete-figura.in-vista .n8 .corpo{animation-delay:2.5s}
.rete-figura.in-vista .p1{animation-delay:.05s}
.rete-figura.in-vista .p2,.rete-figura.in-vista .p3{animation-delay:.75s}
.rete-figura.in-vista .p4{animation-delay:1.45s}
.rete-figura.in-vista .p5{animation-delay:1.5s}
.rete-figura.in-vista .p6{animation-delay:1.55s}
.rete-figura.in-vista .p7{animation-delay:1.6s}
.rete-figura.in-vista .p8{animation-delay:1.65s}
.rete-figura.in-vista .led:nth-of-type(2n){animation-delay:.8s}
@keyframes nodo-lume{
  0%,100%{stroke:#C4D6DA;fill:#0C2A30}
  8%,34%{stroke:var(--accento);fill:#0F3842}
  50%{stroke:#C4D6DA;fill:#0C2A30}
}
@keyframes viaggia{
  0%{stroke-dashoffset:0;opacity:1}
  11%{stroke-dashoffset:-100;opacity:1}
  11.5%,100%{stroke-dashoffset:-100;opacity:0}
}
@keyframes lampeggia{50%{opacity:1}}

/* ── 2. Cosa comprende: elenco a sinistra, dettaglio a destra ── */
.aree-testa{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 56px;flex-wrap:wrap}
.aree-testa h2,.modo-testa h2{font-size:clamp(1.8rem,1.2rem + 2.2vw,3.25rem)}
.aree-testa p{max-width:50ch;color:var(--testo-2);font-size:1.05rem}
.aree{display:grid;grid-template-columns:minmax(240px,300px) minmax(0,1fr);gap:28px;margin-top:36px;align-items:start}
.aree.attive{align-items:stretch}
.aree.attive .aree-elenco{grid-auto-rows:1fr}
.aree-elenco{list-style:none;margin:0;padding:0 0 0 2px;position:relative;display:grid;gap:4px}
.aree-elenco li{display:flex}
.aree-elenco li>*{flex:1}
.aree-elenco::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--bordo-forte)}
.aree-elenco a,.aree-tab{display:grid;grid-template-columns:34px 1fr;align-items:center;width:100%;text-align:left;
  font:inherit;font-size:1.02rem;font-weight:600;color:var(--testo-2);text-decoration:none;background:none;border:0;
  border-radius:12px;padding:12px 14px 12px 18px;cursor:pointer;transition:color .3s,background .3s}
.aree-elenco .n{font-size:.78rem;font-weight:700;color:var(--testo-2);font-variant-numeric:tabular-nums;transition:color .3s}
.aree-elenco a:hover,.aree-tab:hover{color:var(--testo);background:rgba(255,255,255,.03)}
.aree-tab:focus-visible{outline-offset:-2px}
.aree-tab[aria-selected="true"]{color:var(--testo);background:var(--accento-tenue)}
.aree-tab[aria-selected="true"] .n{color:var(--accento)}
.aree.attive .aree-elenco::after{content:"";position:absolute;left:-1px;top:0;width:3px;border-radius:3px;background:var(--accento);
  height:var(--h,48px);transform:translateY(var(--y,0));transition:transform .5s var(--esce),height .5s var(--esce)}

.aree-pannelli{display:grid;gap:16px;counter-reset:area}
.area{counter-increment:area;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,3vw,48px);align-items:center;
  padding:clamp(28px,3.4vw,48px);border-radius:20px;border:1px solid var(--bordo);position:relative;overflow:hidden;isolation:isolate;
  background:radial-gradient(70% 90% at 100% 100%,rgba(0,151,178,.16),transparent 65%),var(--pannello)}
.area[hidden]{display:none}
.area::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:32px 32px;-webkit-mask-image:radial-gradient(60% 80% at 80% 50%,#000,transparent 75%);mask-image:radial-gradient(60% 80% at 80% 50%,#000,transparent 75%)}
.area-testo::before{content:counter(area,decimal-leading-zero) " / 08";display:block;font-size:.85rem;font-weight:600;color:var(--testo-2);margin-bottom:18px;font-variant-numeric:tabular-nums}
.area h3{font-size:clamp(1.6rem,1.1rem + 1.5vw,2.5rem);font-weight:650}
.area p{margin-top:16px;color:var(--testo-2);font-size:1.06rem;max-width:44ch}
.area .etichette{margin-top:24px}
.area .etichette li{font-size:.84rem;color:var(--testo);padding:5px 12px;background:rgba(255,255,255,.03)}
.area-disegno{width:100%;max-width:400px;height:auto;margin:0 auto;overflow:visible}
.area-disegno .tratto{stroke-width:1.6}

/* con JavaScript: un pannello alla volta, il disegno si traccia e il testo sale */
.aree.attive .aree-pannelli{display:block}
.aree.attive .area{min-height:clamp(452px,calc(100svh - 340px),570px)}
.aree.attive .area:not([hidden]) .area-testo>*{animation:sale-un-po .6s var(--esce) both}
.aree.attive .area:not([hidden]) .area-testo>p{animation-delay:.06s}
.aree.attive .area:not([hidden]) .area-testo>ul{animation-delay:.12s}
.aree.attive .area:not([hidden]) .area-disegno .tratto{stroke-dasharray:1;animation:traccia 1.1s var(--esce) .1s both}
.aree.attive .area:not([hidden]) .area-disegno .tratto.acc{animation-delay:.3s}
@keyframes sale-un-po{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes traccia{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
/* senza JavaScript l'elenco resta fermo mentre scorrono tutti i pannelli */
.aree:not(.attive) .aree-elenco{position:sticky;top:96px}

/* ── 3. Manifesto del backup ────────────────────────────── */
.backup-griglia{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(36px,5vw,72px);align-items:center}
.manifesto{font-size:clamp(2.5rem,1.3rem + 3.6vw,5.2rem);font-weight:700;letter-spacing:-.035em;line-height:1.02;max-width:12ch}
.manifesto span{display:block;color:var(--accento)}
.backup-righe{list-style:none;margin:40px 0 0;padding:0;max-width:56ch}
.backup-righe li{padding:14px 0;border-top:1px solid var(--bordo);color:var(--testo-2);font-size:1rem;line-height:1.55}
.backup-righe li:last-child{border-bottom:1px solid var(--bordo)}
.backup-righe b{color:var(--testo);font-weight:600;margin-right:.3em}
.ciclo-figura{margin:0}
.ciclo{width:100%;height:auto;max-height:calc(100svh - 190px);margin:0 auto;overflow:visible}
.ciclo text{font-family:var(--font)}
.ciclo-guida{fill:none;stroke:var(--bordo-forte);stroke-width:1.5;stroke-dasharray:3 9}
.ciclo-scia{fill:none;stroke:var(--accento);stroke-width:3;stroke-linecap:round;stroke-opacity:.55;stroke-dasharray:14 86;stroke-dashoffset:14}
.ciclo-punto{fill:none;stroke:var(--accento);stroke-width:13;stroke-linecap:round;stroke-dasharray:.01 99.99}
.ciclo-centro .tratto{stroke:var(--testo-2);stroke-width:1.5}
.tappa-fondo{fill:var(--fondo);stroke:var(--bordo-forte);stroke-width:1.5}
.tappa .tratto{stroke:var(--testo);stroke-width:2}
.tappa.t3 .tratto{stroke:var(--accento)}
.tappa-nome{fill:var(--testo-2);font-size:18px;font-weight:600;text-anchor:middle}
.ciclo-figura.in-vista .ciclo-punto{animation:giro 7.5s linear infinite}
.ciclo-figura.in-vista .ciclo-scia{animation:giro-scia 7.5s linear infinite}
.ciclo-figura.in-vista .tappa-fondo{animation:lume-cerchio 7.5s linear infinite}
.ciclo-figura.in-vista .tappa .tratto{animation:lume-tratto 7.5s linear infinite}
.ciclo-figura.in-vista .tappa-nome{animation:lume-nome 7.5s linear infinite}
.ciclo-figura.in-vista .t2 *{animation-delay:-5s}
.ciclo-figura.in-vista .t3 *{animation-delay:-2.5s}
@keyframes giro{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}}
@keyframes giro-scia{from{stroke-dashoffset:14}to{stroke-dashoffset:-86}}
@keyframes lume-cerchio{0%,26%{stroke:var(--accento);fill:#0F3842;stroke-width:2.5}34%,100%{stroke:rgba(255,255,255,.18);fill:var(--fondo);stroke-width:1.5}}
@keyframes lume-tratto{0%,26%{stroke:var(--accento)}34%,100%{stroke:var(--testo)}}
@keyframes lume-nome{0%,26%{fill:var(--testo)}34%,100%{fill:var(--testo-2)}}

/* ── Colori dei disegni a linee (gli stessi di Siti web) ── */
.illu{overflow:visible}
.illu .tenue{fill:rgba(157,179,184,.34)}
.illu .fondo{fill:#0C2A30}
.illu .fondo2{fill:#0F3138}
.illu .tratto{stroke:#C4D6DA;stroke-width:1.5}
.illu .tratto.acc{stroke:var(--accento)}
.illu .guida{fill:none;stroke:rgba(255,255,255,.25);stroke-width:1.3;stroke-dasharray:4 7}
.illu .cavo{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1.5;stroke-linejoin:round}
.illu .pacchetto{fill:none;stroke:var(--accento);stroke-width:7;stroke-linecap:round;stroke-dasharray:.01 99.99;opacity:0}
.illu .led-l{fill:var(--accento);opacity:.6}
.illu text{font-family:var(--font)}
.illu .nome{font-size:13px;font-weight:500;fill:var(--testo-2);text-anchor:middle}
.illu g,.illu rect,.illu circle,.illu path{transform-box:fill-box}
@keyframes corre{0%{stroke-dashoffset:0;opacity:1}30%{stroke-dashoffset:-100;opacity:1}31%,100%{stroke-dashoffset:-100;opacity:0}}

/* ── 4. In sede e da remoto: affiancati, una frase e un disegno ciascuno ── */
.modo-testa{display:flex;justify-content:space-between;align-items:baseline;gap:12px 40px;flex-wrap:wrap}
.modo-testa p{color:var(--testo-2);font-size:1.05rem;max-width:58ch}
.modi{margin-top:clamp(24px,4vh,44px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px)}
.modo{display:grid;gap:18px;align-content:start}
.modo-testo h3{font-size:clamp(1.3rem,1rem + .9vw,1.75rem);font-weight:650}
.modo-testo>p{margin-top:8px;color:var(--testo-2);font-size:1rem;max-width:46ch}
.scheda.modo-disegno{padding:14px 18px 8px;
  background:radial-gradient(70% 90% at 100% 100%,rgba(0,151,178,.12),transparent 65%),var(--pannello)}
.scheda.modo-disegno svg{width:100%;height:auto;margin:0}
.modo:hover .modo-disegno{border-color:var(--bordo-forte)}

/* In sede: la bobina srotola il cavo, le bretelle si collegano una alla volta e i led dello switch si accendono */
.cabla .giri{fill:none;stroke:rgba(196,214,218,.3);stroke-width:1.2}
.cabla .cavo-posa{fill:none;stroke:var(--accento);stroke-width:2;stroke-linecap:round;stroke-dasharray:8 6}
.cabla .porta{fill:var(--fondo);stroke:rgba(196,214,218,.6);stroke-width:1}
.cabla .cordone{fill:none;stroke:#C4D6DA;stroke-width:2.2;stroke-linecap:round}
.cabla .cordone.acc{stroke:var(--accento)}
.cabla .led-p{fill:var(--accento)}
.cabla .onda-w{fill:none;stroke:var(--accento);stroke-width:1.8;stroke-linecap:round}
.cabla .cacciavite{transform-origin:0 0}
.modo-disegno.in-vista .cordone{stroke-dasharray:1;animation:collega 10s var(--esce) infinite both}
.modo-disegno.in-vista .led-p{animation:si-accende 10s linear infinite both}
.modo-disegno.in-vista .c2,.modo-disegno.in-vista .l2{animation-delay:.4s}
.modo-disegno.in-vista .c3,.modo-disegno.in-vista .l3{animation-delay:.8s}
.modo-disegno.in-vista .c4,.modo-disegno.in-vista .l4{animation-delay:1.2s}
.modo-disegno.in-vista .c5,.modo-disegno.in-vista .l5{animation-delay:1.6s}
.modo-disegno.in-vista .c6,.modo-disegno.in-vista .l6{animation-delay:2s}
.modo-disegno.in-vista .c7,.modo-disegno.in-vista .l7{animation-delay:2.4s}
.modo-disegno.in-vista .c8,.modo-disegno.in-vista .l8{animation-delay:2.8s}
.modo-disegno.in-vista .cavo-posa{animation:srotola 1.2s linear infinite}
.modo-disegno.in-vista .onda-w{animation:onda-wifi 2.4s ease-in-out infinite}
.modo-disegno.in-vista .w2{animation-delay:.3s}
.modo-disegno.in-vista .w3{animation-delay:.6s}
.modo-disegno.in-vista .cacciavite{animation:avvita 3.6s var(--esce) infinite}
.modo-disegno.in-vista .pacchetto{animation:corre 3s linear infinite}
.modo-disegno.in-vista .q2,.modo-disegno.in-vista .r2{animation-delay:1.5s}
.modo-disegno.in-vista .led-l{animation:lampeggia 1.6s steps(2,jump-none) infinite}
@keyframes collega{0%{stroke-dashoffset:1;opacity:0}1%{stroke-dashoffset:.95;opacity:1}7%{stroke-dashoffset:0;opacity:1}84%{stroke-dashoffset:0;opacity:1}92%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes si-accende{0%,6%{opacity:.15}8%,84%{opacity:1}92%,100%{opacity:.15}}
@keyframes srotola{to{stroke-dashoffset:-28}}
@keyframes onda-wifi{0%,100%{opacity:.2}35%{opacity:1}}
@keyframes avvita{0%,55%,100%{transform:none}68%{transform:translate(-4px,-4px)}80%{transform:translate(2px,2px)}}

/* Da remoto: le operazioni avanzano una dopo l'altra e si spuntano, mentre il collegamento va e viene */
.remoto .titolino{font-size:11.5px;font-weight:600;fill:var(--testo-2)}
.remoto .binario{fill:rgba(157,179,184,.22)}
.remoto .avanza{fill:var(--accento);transform-origin:left center}
.remoto .ok-fondo{fill:var(--accento-tenue);stroke:rgba(0,196,224,.5);stroke-width:1.2}
.remoto .ok{fill:none;stroke:var(--accento);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.remoto .led-r{fill:var(--accento);opacity:.6}
.remoto .gira{fill:none;stroke:var(--accento);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform-box:view-box;transform-origin:564px 175px}
.modo-disegno.in-vista .avanza.a1{animation:avanza-1 9s var(--esce) infinite both}
.modo-disegno.in-vista .avanza.a2{animation:avanza-2 9s var(--esce) infinite both}
.modo-disegno.in-vista .avanza.a3{animation:avanza-3 9s var(--esce) infinite both}
.modo-disegno.in-vista .ok{stroke-dasharray:1}
.modo-disegno.in-vista .ok.k1{animation:ok-1 9s var(--esce) infinite both}
.modo-disegno.in-vista .ok.k2{animation:ok-2 9s var(--esce) infinite both}
.modo-disegno.in-vista .ok.k3{animation:ok-3 9s var(--esce) infinite both}
.modo-disegno.in-vista .led-r{animation:lampeggia 1.2s steps(2,jump-none) infinite}
.modo-disegno.in-vista .e2{animation-delay:.4s}
.modo-disegno.in-vista .e3{animation-delay:.8s}
.modo-disegno.in-vista .gira{animation:gira 2s linear infinite}
@keyframes avanza-1{0%,5%{transform:scaleX(0)}19%,88%{transform:scaleX(1);opacity:1}95%{opacity:0}100%{transform:scaleX(0);opacity:0}}
@keyframes avanza-2{0%,30%{transform:scaleX(0)}44%,88%{transform:scaleX(1);opacity:1}95%{opacity:0}100%{transform:scaleX(0);opacity:0}}
@keyframes avanza-3{0%,55%{transform:scaleX(0)}69%,88%{transform:scaleX(1);opacity:1}95%{opacity:0}100%{transform:scaleX(0);opacity:0}}
@keyframes ok-1{0%,19%{stroke-dashoffset:1;opacity:0}20%{stroke-dashoffset:.9;opacity:1}25%,88%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes ok-2{0%,44%{stroke-dashoffset:1;opacity:0}45%{stroke-dashoffset:.9;opacity:1}50%,88%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes ok-3{0%,69%{stroke-dashoffset:1;opacity:0}70%{stroke-dashoffset:.9;opacity:1}75%,88%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes gira{to{transform:rotate(360deg)}}

/* ── Movimento ridotto: tutto fermo, tutto visibile ─────── */
@media (prefers-reduced-motion:reduce){
  .rete-figura.in-vista *,.ciclo-figura.in-vista *,.aree.attive .area:not([hidden]) *,.illu *{animation:none!important}
  .rete .pacchetto,.illu .pacchetto{display:none}
}

/* ── Adattamento ─────────────────────────────────────────── */
@media (max-width:1024px){
  .backup-griglia{grid-template-columns:1fr}
  .ciclo{max-width:440px}
  .rete-figura{max-width:600px}
  .modi{grid-template-columns:1fr;gap:36px}
}
@media (max-width:900px){
  .aree{grid-template-columns:1fr}
  .aree-elenco,.aree.attive .aree-elenco{grid-template-columns:1fr 1fr;grid-auto-rows:auto;padding:0}
  .aree-elenco::before,.aree.attive .aree-elenco::after{display:none}
  .aree:not(.attive) .aree-elenco{position:static}
  .aree-elenco a,.aree-tab{font-size:.92rem;padding:10px 12px;grid-template-columns:28px 1fr;border:1px solid var(--bordo)}
  .area{grid-template-columns:1fr}
  .aree.attive .area{min-height:0}
  .area-disegno{max-width:170px;order:-1;margin:0}
}
@media (max-width:600px){
  .modo-testa{display:block}
  .modo-testa p{margin-top:10px}
  .illu .nome{font-size:16px}
}