/* ══════════════════════════════════════════════════════════════
   AURALINK — sito (V2)
   Due pagine con la stessa grafica. La landing parla solo della
   rete e scende dal buio alla luce: la rete sul fondo scuro, chi
   siamo sul chiaro. AURA ha una pagina sua (aura.html), chiara
   dall'inizio, raggiungibile con un tasto solo.
   La scala di colore è quella del marchio letta dal logo: il
   nastro va dal teal al blu al viola, e l'oro resta il nostro
   accento caldo. Nessun font remoto, nessuna libreria, nessuna
   risorsa di terzi — è la stessa scelta che rende vera la
   pagina cookie.
   ══════════════════════════════════════════════════════════════ */
/* Il carattere: Manrope, servito da questo stesso server (assets/fonts,
   licenza SIL OFL in OFL.txt). Un solo file variabile copre tutti i pesi
   dal 200 all'800; la parte latina basta per l'italiano. */
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(fonts/manrope.woff2) format('woff2')}
:root{
  --scuro:#040507;
  --scuro2:#080B10;
  --chiaro:#FFFFFF;
  --chiaro2:#F2F6F9;

  --tx:#F2F6F8;
  --tx2:#8B9AA7;
  --tx3:#5B6874;

  --in:#0B1822;
  --in2:#4C606E;
  --in3:#8398A6;

  /* la scala del marchio */
  --oro:#C9A227;
  --oro2:#E0BE55;
  --ciano2:#9FE3F0;
  --ciano:#5FC8DC;
  --teal:#2E93A8;
  --blu:#4A78C8;
  --viola:#6A7BD4;
  --indaco:#4B4E9E;

  --filo:rgba(255,255,255,.08);
  --filo2:rgba(255,255,255,.16);
  --filoc:rgba(11,24,34,.10);

  --ff:'Manrope','Segoe UI',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --mono:'SF Mono',SFMono-Regular,ui-monospace,Menlo,Consolas,monospace;
  --e:cubic-bezier(.22,1,.36,1);
  /* the soft curve: starts and ends gently (FAQ ball, page scrolling) */
  --fluida:cubic-bezier(.65,0,.35,1);
  --col:1220px;
}

*{margin:0;padding:0;box-sizing:border-box}
/* every jump to an anchor (menu, buttons, article index) stops below the
   floating bar, with some air: bar 16px from the top + about 64px tall */
html{scroll-padding-top:6.5rem;-webkit-text-size-adjust:100%}
/* Niente può allargare la pagina oltre lo schermo: su telefono un
   alone troppo largo bastava a creare una striscia vuota a destra. */
html,body{overflow-x:clip}
body{background:var(--scuro);color:var(--tx);font-family:var(--ff);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:rgba(106,123,212,.3)}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
.wrap{max-width:var(--col);margin:0 auto;padding:0 28px;position:relative;z-index:2}

/* ══ TIPOGRAFIA ══════════════════════════════════════════════ */
h1{font-size:clamp(2.4rem,6vw,4.3rem);font-weight:600;line-height:1.04;
  letter-spacing:-.035em}
h2{font-size:clamp(1.9rem,4.3vw,3.1rem);font-weight:600;line-height:1.08;
  letter-spacing:-.032em}
h3{font-size:1.5rem;font-weight:600;letter-spacing:-.022em;line-height:1.22}

/* La seconda riga del titolo corre lungo la scala fredda del logo:
   teal, ciano, viola, indaco. L'oro non entra qui — fra viola e
   oro il gradiente passa da un grigio fangoso, e si vede. */
.iride{background:linear-gradient(100deg,var(--teal),var(--ciano) 28%,
  #8FA0EA 60%,var(--viola) 80%,var(--indaco));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent}
.smorz{color:var(--tx2);font-weight:500}
.chiaro .smorz{color:var(--in3)}

/* ══ ETICHETTE ═══════════════════════════════════════════════ */
.eti{display:inline-flex;align-items:center;gap:.62rem;font-size:.92rem;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:.58rem 1.35rem .58rem 1rem;border-radius:999px;
  border:1px solid var(--filo2);background:rgba(255,255,255,.045);
  color:var(--tx2)}
.eti b{color:var(--ciano);font-weight:700}
.chiaro .eti{border-color:var(--filoc);background:#fff;color:var(--in2);
  box-shadow:0 1px 3px rgba(11,24,34,.05)}
.chiaro .eti b{color:var(--teal)}
.eti i{width:18px;height:18px;border-radius:50%;flex:0 0 auto;
  background:conic-gradient(var(--oro),var(--ciano),var(--viola),var(--indaco),var(--oro));
  box-shadow:inset 0 0 0 4.5px var(--scuro)}
.chiaro .eti i{box-shadow:inset 0 0 0 4.5px #fff}

/* ══ PULSANTI ════════════════════════════════════════════════ */
.bt{display:inline-flex;align-items:center;gap:.6rem;font-size:.88rem;
  font-weight:600;padding:.78rem 1.45rem;border-radius:999px;
  transition:transform .25s var(--e),box-shadow .25s var(--e),
    background .25s var(--e),border-color .25s var(--e),color .25s var(--e);
  white-space:nowrap}
.bt span{font-size:1.02em;line-height:1}
.bt.pieno{background:var(--tx);color:#07090B}
.bt.pieno:hover{background:#fff;transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(106,123,212,.26)}
.bt.vuoto{border:1px solid var(--filo2);color:var(--tx2)}
.bt.vuoto:hover{border-color:var(--tx2);color:var(--tx)}
.chiaro .bt.pieno{background:var(--in);color:#fff}
.chiaro .bt.pieno:hover{background:#07121a;box-shadow:0 12px 30px rgba(11,24,34,.18)}
.chiaro .bt.vuoto{border-color:var(--filoc);color:var(--in2)}
.chiaro .bt.vuoto:hover{border-color:var(--in2);color:var(--in)}
/* il pulsante a nastro: uno solo in tutta la pagina */
.bt.nastro{background:linear-gradient(95deg,var(--teal),var(--blu) 42%,var(--viola) 78%,var(--indaco));
  color:#fff;box-shadow:0 8px 24px rgba(106,123,212,.28)}
.bt.nastro:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(106,123,212,.42)}

/* ══ LA BARRA FLOTTANTE ══════════════════════════════════════ */
.barra{position:fixed;top:16px;left:50%;transform:translateX(-50%);
  z-index:50;width:calc(100% - 32px);max-width:1000px}
.barra .in{display:flex;align-items:center;gap:1.2rem;position:relative;
  background:linear-gradient(104deg,#0B1220 0%,#111A26 46%,#171633 100%);
  border:1px solid rgba(255,255,255,.10);border-radius:999px;
  padding:.5rem .5rem .5rem 1.15rem;
  box-shadow:0 10px 34px rgba(0,0,0,.42),0 0 0 1px rgba(106,123,212,.14) inset}
/* Il filo di luce sul bordo: è il nastro del logo, ridotto a una
   riga. Serve a staccare la barra sia dal buio della copertina
   sia dal bianco delle sezioni sotto. */
.barra .in::before{content:'';position:absolute;inset:-1px;border-radius:999px;
  padding:1px;pointer-events:none;
  background:linear-gradient(104deg,var(--teal),var(--ciano) 28%,var(--viola) 66%,var(--indaco));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);mask-composite:exclude;opacity:.55}
.barra img{height:34px;width:auto}
.barra nav{display:flex;gap:.3rem;margin-left:auto}
.barra nav a{font-size:.82rem;font-weight:500;color:#9FB0BE;
  padding:.42rem .8rem;border-radius:999px;transition:.2s var(--e)}
.barra nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.barra .bt{padding:.55rem 1.15rem;font-size:.82rem}
.barra .bt:hover{transform:none}
#menu{display:none;margin-left:auto;background:none;border:0;cursor:pointer;
  width:36px;height:32px;position:relative}
#menu span{position:absolute;left:8px;right:8px;height:1.6px;border-radius:2px;
  background:#DCE6EC;transition:.25s var(--e)}
#menu span:nth-child(1){top:11px}#menu span:nth-child(2){top:16px}
#menu span:nth-child(3){top:21px}
.aperto #menu span:nth-child(1){top:16px;transform:rotate(45deg)}
.aperto #menu span:nth-child(2){opacity:0}
.aperto #menu span:nth-child(3){top:16px;transform:rotate(-45deg)}

/* ══ COPERTINA ═══════════════════════════════════════════════
   Il film copre tutta la sezione. Sotto c'è un fondo di riserva
   con gli aloni del marchio: si vede finché il video non c'è,
   mentre si carica, e se il file manca. */
#apertura{position:relative;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;text-align:center;
  padding:150px 0 4.6rem;overflow:hidden}
.film{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:
    radial-gradient(58% 48% at 50% 44%,rgba(106,123,212,.24),transparent 70%),
    radial-gradient(38% 34% at 24% 62%,rgba(95,200,220,.15),transparent 72%),
    radial-gradient(34% 30% at 78% 30%,rgba(75,78,158,.20),transparent 70%),
    var(--scuro)}
.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block}
.senza-film .film video{display:none}
/* Il velo. Con i coni bastava togliere luce ai bordi; con un video
   non sappiamo cosa passerà dietro al titolo, quindi il centro va
   scurito abbastanza da reggere anche un fotogramma chiaro. */
#apertura::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(60% 46% at 50% 50%,rgba(4,5,7,.62),rgba(4,5,7,.34) 62%,
    rgba(4,5,7,.12) 88%),
    linear-gradient(180deg,rgba(4,5,7,.66) 0%,transparent 20%,transparent 74%,
    rgba(4,5,7,.80) 92%,var(--scuro) 100%)}
#apertura .wrap{z-index:2;max-width:960px;flex:0 0 auto}
.occhio{font-size:.94rem;font-weight:600;letter-spacing:-.01em;margin-bottom:1.5rem;
  filter:drop-shadow(0 1px 14px rgba(4,5,7,.9))}
#apertura h1{margin:0 auto;max-width:19ch;color:#fff;
  text-shadow:0 2px 30px rgba(4,5,7,.92),0 1px 6px rgba(4,5,7,.8)}
#apertura p.sotto{margin:1.7rem auto 2.4rem;max-width:56ch;color:#C3D0DA;
  font-size:1.04rem;line-height:1.68;text-shadow:0 1px 18px rgba(4,5,7,.95)}
.bottoni{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}

/* La pausa. Un video che si muove per più di cinque secondi deve
   potersi fermare: sta nell'angolo in basso a destra del film,
   e compare solo quando il video è davvero partito. */
.pausa{position:absolute;right:28px;bottom:26px;z-index:3;width:40px;height:40px;
  border-radius:50%;display:grid;place-items:center;cursor:pointer;
  color:#DCE6EC;background:rgba(8,11,16,.55);border:1px solid var(--filo2);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .2s var(--e),border-color .2s var(--e)}
.pausa[hidden]{display:none}
.pausa:hover{background:rgba(22,28,44,.85);border-color:rgba(255,255,255,.3)}
.pausa:focus-visible{outline:2px solid var(--ciano);outline-offset:3px}
.pausa svg{width:14px;height:14px}
.pausa .riparti{display:none}
.pausa[aria-pressed="true"] .ferma{display:none}
.pausa[aria-pressed="true"] .riparti{display:block}

/* ══ SEZIONI ═════════════════════════════════════════════════ */
.sez{position:relative;padding:5rem 0}
.sez.chiaro{background:var(--chiaro);color:var(--in)}
.sez.chiaro h2,.sez.chiaro h3{color:var(--in)}
.testata{text-align:center;max-width:840px;margin:0 auto 2.8rem}
.testata h2{margin-top:1.3rem}
.testata p{margin-top:1.3rem;color:var(--tx2);font-size:.98rem;max-width:56ch;
  margin-left:auto;margin-right:auto}
.chiaro .testata p{color:var(--in2)}

/* ══ I QUADRI DELLA RETE ═════════════════════════════════════
   Angoli larghi, fondo che schiarisce verso l'alto, e sul primo
   un alone viola: è il riquadro che tiene lo sguardo. */
/* L'alone sta dietro la fila, non dentro il primo riquadro: è
   quello che nel riferimento tiene insieme le quattro schede
   invece di farle sembrare quattro cose separate. */
.quadri{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;
  position:relative}
/* L'alone sfuma su tutti e quattro i lati: il taglio netto in alto
   faceva sembrare un rettangolo appoggiato sopra le schede. */
.quadri::before{content:'';position:absolute;left:-8%;right:-8%;top:-26%;
  height:162%;pointer-events:none;z-index:0;border-radius:50%/22%;
  background:radial-gradient(52% 48% at 18% 34%,rgba(106,123,212,.30),transparent 68%),
    radial-gradient(46% 42% at 76% 24%,rgba(95,200,220,.16),transparent 70%);
  filter:blur(26px)}
.quadri>*{position:relative;z-index:1}
.quadro{position:relative;overflow:hidden;border-radius:24px;
  background:linear-gradient(168deg,rgba(30,36,52,.92) 0%,rgba(13,17,24,.96) 44%,
    rgba(7,9,13,.98) 100%);
  border:1px solid rgba(255,255,255,.07);padding:1.6rem 1.6rem 1.8rem;
  display:flex;flex-direction:column;
  transition:transform .3s var(--e),border-color .3s var(--e)}
.quadro::after{content:'';position:absolute;inset:-1px;border-radius:26px;
  padding:1px;pointer-events:none;opacity:0;transition:opacity .4s var(--e);
  background:linear-gradient(150deg,var(--ciano),transparent 40%,transparent 64%,var(--viola));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);mask-composite:exclude}
/* Il LED che percorre il bordo è un conico che ruota, ritagliato a
   cornice da una maschera. Decorativo soltanto: chi tocca lo schermo
   non ha il passaggio del mouse, e nessuna informazione sta lì. */
.quadro .led{position:absolute;inset:-1px;border-radius:24px;pointer-events:none;
  opacity:0;transition:opacity .3s var(--e);padding:1.4px;
  background:conic-gradient(from var(--giro,0deg),transparent 0deg,
    transparent 300deg,#DFF6FF 342deg,#FFFFFF 352deg,#DFF6FF 358deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);mask-composite:exclude}
@property --giro{syntax:'<angle>';initial-value:0deg;inherits:false}
@media (hover:hover){
  .quadro:hover{transform:translateY(-5px) scale(1.02);
    border-color:rgba(126,140,228,.55);
    box-shadow:0 22px 60px -18px rgba(106,123,212,.55),
      0 0 0 1px rgba(159,196,255,.22) inset}
  .quadro:hover::after{opacity:1}
  .quadro:hover .pannello{border-color:rgba(159,196,255,.30);
    background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03))}
  .quadro:hover .led{opacity:1;animation:giraLed 2.6s linear infinite}
}
@keyframes giraLed{to{--giro:360deg}}
/* l'alone del primo riquadro */
.quadro.acceso{background:
  radial-gradient(128% 84% at 4% -4%,rgba(120,136,226,.40),transparent 56%),
  linear-gradient(168deg,rgba(32,34,62,.94) 0%,rgba(14,17,28,.96) 48%,
    rgba(7,9,13,.98) 100%);
  border-color:rgba(126,140,228,.34)}
.quadro .cima{display:inline-flex;align-items:center;gap:.5rem;font-size:.68rem;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tx2);
  background:rgba(255,255,255,.05);border:1px solid var(--filo2);
  border-radius:999px;padding:.34rem .8rem .34rem .5rem;align-self:center}
.quadro.acceso .cima{color:#C7CCF2;border-color:rgba(159,168,238,.34);
  background:rgba(106,123,212,.14)}
.quadro .cima i{width:13px;height:13px;border-radius:50%;
  background:conic-gradient(var(--ciano),var(--viola),var(--oro2),var(--ciano));
  box-shadow:inset 0 0 0 3.2px #0B0F14}
.quadro.acceso .cima i{box-shadow:inset 0 0 0 3.2px #14182A}
/* il pannellino: non un disegno appeso al vuoto ma un oggetto */
.pannello{margin:1.4rem 0 1.8rem;border-radius:16px;padding:1rem 1.05rem;
  background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  border:1px solid rgba(255,255,255,.055);
  min-height:126px;display:flex;align-items:center}
.quadro.acceso .pannello{background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.02));
  border-color:rgba(159,168,238,.22)}
.pannello svg{width:100%;height:auto}
/* Con la foto il pannello perde l'imbottitura e la foto va a filo:
   il plastico deve riempire il riquadro, non galleggiarci dentro. */
.pannello.foto{padding:0;overflow:hidden;aspect-ratio:16/9;min-height:0;display:block}
.pannello.foto picture,.pannello.foto img{display:block;width:100%;height:100%}
.pannello.foto img{object-fit:cover;transition:transform .7s var(--e)}
/* Le onde del Wi-Fi sopra i plastici: anelli sottili che partono
   dall'access point e si allargano sul piano dell'ambiente, tre per
   sorgente, sfasati. Più sorgenti nella stessa scheda partono una dopo
   l'altra (--r). Il riquadro SVG ha le stesse proporzioni della foto,
   così le coordinate sono quelle dell'immagine a 800×450. */
.pannello.foto{position:relative}
.onde-wifi{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  transition:transform .7s var(--e);
  filter:drop-shadow(0 0 3px rgba(95,200,220,.9)) drop-shadow(0 0 10px rgba(95,200,220,.45))}
.onde-wifi ellipse{fill:none;stroke:#BFF1F8;stroke-width:1.5;vector-effect:non-scaling-stroke;
  transform-box:fill-box;transform-origin:center;opacity:0;
  animation:ondaWifi 3s cubic-bezier(.2,.6,.35,1) infinite backwards;
  animation-delay:var(--r,0s)}
.onde-wifi ellipse:nth-of-type(2){animation-delay:calc(var(--r,0s) + 1s)}
.onde-wifi ellipse:nth-of-type(3){animation-delay:calc(var(--r,0s) + 2s)}
.onde-wifi circle{fill:#E6FBFF;animation:puntoWifi 1s ease-in-out infinite alternate;
  animation-delay:var(--r,0s)}
@keyframes ondaWifi{0%{transform:scale(.12);opacity:0}14%{opacity:.95}
  70%{opacity:.35}100%{transform:scale(1);opacity:0}}
@keyframes puntoWifi{from{opacity:.55}to{opacity:1}}
@media (hover:hover){.quadro:hover .pannello.foto img,
  .quadro:hover .pannello.foto .onde-wifi{transform:scale(1.035)}}
.pan-eti{font:600 7.4px var(--ff);letter-spacing:.14em;fill:#5B6874}
.pan-txt{font:500 9.4px var(--ff);fill:#C9D3DA}
.pan-num{font:600 11px var(--ff);fill:#F2F6F8}
.quadro h3{margin:0 auto 1.1rem;max-width:18ch;text-align:center;text-wrap:balance}
.quadro ul{list-style:none;margin-top:auto}
.quadro li{display:flex;gap:.6rem;align-items:flex-start;font-size:.82rem;
  color:var(--tx2);line-height:1.55;margin-bottom:.5rem}
.quadro li::before{content:'';flex:0 0 auto;width:13px;height:13px;margin-top:.24em;
  border-radius:50%;background:conic-gradient(var(--ciano),var(--viola),var(--ciano));
  box-shadow:inset 0 0 0 3.4px #0B0F14}
.quadro.acceso li::before{box-shadow:inset 0 0 0 3.4px #10131F}
.quadro .cosa{font-size:.86rem;line-height:1.62;color:#AEB9C4;text-align:center;
  max-width:34ch;margin:0 auto 1.4rem;text-wrap:pretty}
.quadro.acceso .cosa{color:#BEC6E6}

/* ══ L'USCITA VERSO AURA ═════════════════════════════════════
   Un tasto solo, in fondo alla rete: chi ha un hotel trova la
   porta, chi non ce l'ha non si distrae. Il piccolo orb dice già
   che dall'altra parte c'è un'altra cosa. */
.uscita-aura{display:flex;align-items:center;gap:1.1rem;margin:3.2rem auto 0;
  max-width:860px;padding:.85rem .85rem .85rem 1.1rem;border-radius:999px;
  border:1px solid var(--filo2);background:rgba(255,255,255,.035);
  transition:border-color .3s var(--e),background .3s var(--e)}
.uscita-aura:hover{border-color:rgba(106,123,212,.5);background:rgba(106,123,212,.07)}
.uscita-aura:focus-visible{outline:2px solid var(--ciano);outline-offset:4px}
/* Il marchio di AURA che parla: lo stesso globo della pagina AURA,
   in piccolo, con le barre della voce al centro e due onde che
   escono. Il ritmo delle barre è irregolare apposta, come una frase. */
.ua-voce{position:relative;flex:0 0 auto;width:46px;height:46px;
  display:grid;place-items:center}
.uv-nucleo{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 44%),
    radial-gradient(circle at 74% 76%,var(--viola) 0%,rgba(106,123,212,0) 58%),
    radial-gradient(circle at 50% 50%,#BFEFF7 0%,var(--ciano) 40%,var(--teal) 72%,#1B2A52 100%);
  box-shadow:0 0 0 4px rgba(95,200,220,.10),0 0 24px rgba(95,200,220,.42),
    inset -5px -7px 14px rgba(18,30,66,.45);
  animation:respira 4.2s ease-in-out infinite}
.uv-onda{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  border:1px solid rgba(95,200,220,.6);
  animation:uvOnda 2.4s cubic-bezier(.25,.6,.3,1) infinite}
.uv-onda+.uv-onda{animation-delay:1.2s;border-color:rgba(106,123,212,.55)}
@keyframes uvOnda{0%{transform:scale(.92);opacity:0}18%{opacity:.85}
  100%{transform:scale(1.5);opacity:0}}
.uv-eq{position:relative;display:flex;gap:2.5px;align-items:center;height:20px}
.uv-eq b{width:3px;height:100%;border-radius:2px;background:#fff;
  box-shadow:0 0 6px rgba(255,255,255,.7);transform:scaleY(.3);
  animation:parla 1.2s ease-in-out infinite}
.uv-eq b:nth-child(1){height:45%;animation-duration:1.05s}
.uv-eq b:nth-child(2){height:75%;animation-duration:.85s;animation-delay:.15s}
.uv-eq b:nth-child(3){height:100%;animation-duration:1.25s;animation-delay:.05s}
.uv-eq b:nth-child(4){height:70%;animation-duration:.95s;animation-delay:.3s}
.uv-eq b:nth-child(5){height:42%;animation-duration:1.1s;animation-delay:.42s}
@keyframes parla{0%,100%{transform:scaleY(.25)}16%{transform:scaleY(.9)}
  30%{transform:scaleY(.4)}48%{transform:scaleY(1)}64%{transform:scaleY(.3)}
  80%{transform:scaleY(.78)}}
.ua-testo{flex:1 1 auto;font-size:.92rem;color:var(--tx2);line-height:1.5}
.ua-testo b{color:var(--tx);font-weight:600;margin-right:.25rem}
.uscita-aura .bt{flex:0 0 auto}
.uscita-aura:hover .bt{box-shadow:0 14px 34px rgba(106,123,212,.42)}

/* il collegamento ad AURA nel menu: stesso peso degli altri, ma
   un filo di colore dice che porta fuori da questa pagina */
.barra nav a.verso-aura{color:var(--ciano2)}
.barra nav a.verso-aura span{font-size:.9em;opacity:.8}

/* Spazi fra le sezioni: la fascia di passaggio dal buio al chiaro è
   stata tolta, il chiaro di «Chi siamo» comincia subito dopo la rete. */
#rete,#cambia{padding-top:3rem;padding-bottom:2.4rem}
#noi,#funziona{padding-top:4.6rem;padding-bottom:2.2rem}
/* La sfumatura corta fra la rete e «Chi siamo»: 56 pixel, dentro la
   sezione chiara, così il blu scuro non finisce con un taglio netto. */
#noi::before,#funziona::before{content:'';position:absolute;left:0;right:0;top:0;height:56px;
  pointer-events:none;
  background:linear-gradient(180deg,var(--scuro) 0%,#141A30 22%,#4A5578 48%,
    #A3B0C8 74%,#DCE4EE 90%,var(--chiaro2) 100%)}
#parliamone{padding-top:3rem}

/* ══ AURA — il confronto ═════════════════════════════════════ */
.confronto{display:grid;grid-template-columns:1fr auto 1fr;gap:2.2rem;
  align-items:center}
.colonna{display:flex;flex-direction:column;gap:.65rem}
.voce{display:flex;gap:.85rem;align-items:flex-start;background:var(--chiaro2);
  border:1px solid var(--filoc);border-radius:14px;padding:.85rem 1rem;
  font-size:.83rem;line-height:1.5;color:#5A6F7E}
.colonna.si .voce{background:#fff;border-color:rgba(106,123,212,.2);
  color:var(--in);box-shadow:0 3px 14px rgba(11,24,34,.055)}
/* i segni: due anelli, non una crocetta e una spunta.
   A sinistra il cerchio è interrotto, a destra è chiuso e colorato. */
.segno{flex:0 0 auto;width:18px;height:18px;margin-top:.08em}
.eti-col{font-size:.64rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--in3);margin-bottom:.2rem;padding-left:.2rem}
.colonna.si .eti-col{color:var(--viola)}



/* ══ L'ORB DI AURA ═══════════════════════════════════════════
   Ripreso dalla pagina alberghi della prima versione, ritinto
   sulla scala del marchio. La pulsazione è a onde concentriche e
   non un semplice ingrandire: una cosa che ascolta si annuncia
   come si annuncia un suono. Tutto in CSS, nessuno script. */
.orbo{position:relative;width:var(--od,190px);aspect-ratio:1;
  display:grid;place-items:center;margin:0 auto}
.onda{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  border:1px solid rgba(95,200,220,.42);
  animation:onda 4.2s cubic-bezier(.25,.6,.3,1) infinite}
.onda:nth-of-type(2){animation-delay:1.4s;border-color:rgba(106,123,212,.36)}
.onda:nth-of-type(3){animation-delay:2.8s}
@keyframes onda{
  0%  {transform:scale(.40);opacity:0}
  14% {opacity:.62}
  100%{transform:scale(1.34);opacity:0}}
.alone{position:absolute;inset:-14%;border-radius:50%;filter:blur(26px);
  background:radial-gradient(circle,rgba(95,200,220,.34) 0%,
    rgba(106,123,212,.20) 44%,transparent 70%);
  animation:alone 4.2s ease-in-out infinite}
.anello{position:absolute;inset:-6%;border-radius:50%;
  border:1px solid rgba(106,123,212,.20);animation:gira 44s linear infinite reverse}
.nucleo{position:absolute;inset:26%;border-radius:50%;
  background:
    radial-gradient(circle at 32% 28%,#fff 0%,rgba(255,255,255,0) 44%),
    radial-gradient(circle at 74% 76%,var(--viola) 0%,rgba(106,123,212,0) 58%),
    radial-gradient(circle at 50% 50%,#EAF8FC 0%,var(--ciano) 46%,var(--teal) 74%,#1B2A52 100%);
  background-size:200% 200%,200% 200%,180% 180%;
  box-shadow:0 18px 48px -16px rgba(74,120,200,.50),
    inset -10px -14px 32px rgba(18,30,66,.42), inset 10px 12px 26px rgba(255,255,255,.45);
  animation:respira 4.2s ease-in-out infinite, deriva 11s ease-in-out infinite}
.eq{position:absolute;bottom:3%;left:50%;transform:translateX(-50%);
  display:flex;gap:calc(var(--od,190px)*.018);align-items:center;
  height:calc(var(--od,190px)*.125)}
.eq b{width:calc(var(--od,190px)*.013);border-radius:2px;transform-origin:center;
  background:linear-gradient(var(--ciano2),var(--viola));animation:eq 1.1s ease-in-out infinite}
.eq b:nth-child(1){height:34%;animation-duration:1.10s}
.eq b:nth-child(2){height:62%;animation-delay:.2s;animation-duration:.90s}
.eq b:nth-child(3){height:100%;animation-delay:.08s;animation-duration:1.25s}
.eq b:nth-child(4){height:66%;animation-delay:.3s;animation-duration:.95s}
.eq b:nth-child(5){height:32%;animation-delay:.4s;animation-duration:1.05s}
@keyframes gira{to{transform:rotate(360deg)}}
@keyframes eq{0%,100%{transform:scaleY(.3);opacity:.5}50%{transform:scaleY(1);opacity:1}}
@keyframes alone{0%,100%{opacity:.55;transform:scale(1)}46%{opacity:1;transform:scale(1.10)}}
@keyframes respira{0%,100%{transform:scale(1)}46%{transform:scale(1.055)}}
@keyframes deriva{0%{background-position:0% 0%,100% 100%,50% 50%}
  50%{background-position:100% 60%,0% 40%,60% 45%}
  100%{background-position:0% 0%,100% 100%,50% 50%}}

/* ══ AURA ════════════════════════════════════════════════════
   Il destinatario dichiarato sotto l'etichetta: senza, la sezione
   non dice a chi parla. I vantaggi hanno preso il posto del
   paragrafo sul limite dell'integrazione — quello si dice a voce
   quando serve, qui si dice cosa si sa fare. */
.destinatario{font-size:.86rem;font-weight:600;letter-spacing:.02em;
  color:#26798A; /* il teal del marchio scurito: a questa misura il teal pieno sul chiaro non si legge (3,3:1) */margin-top:1.1rem;margin-bottom:-.5rem}
.vantaggi{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:3rem}
.vantaggi>div{border:1px solid var(--filoc);border-radius:18px;background:#fff;
  padding:1.35rem 1.4rem;transition:box-shadow .3s var(--e),transform .3s var(--e)}
@media (hover:hover){.vantaggi>div:hover{transform:translateY(-3px);
  box-shadow:0 16px 36px rgba(11,24,34,.09)}}
.vantaggi b{display:block;font-size:1.02rem;font-weight:600;color:var(--in);
  letter-spacing:-.016em;margin-bottom:.45rem}
.vantaggi span{font-size:.81rem;line-height:1.6;color:#5A6F7E}

/* ══ IL PERCORSO — una fibra sola dal sopralluogo al collaudo ══
   La linea in salita si leggeva come un grafico di crescita. Qui
   c'è una fibra orizzontale che attraversa le cinque fasi: la luce
   la percorre mentre scorri (motore.js imposta --p da 0 a 1), e ogni
   ghiera si accende quando la luce la raggiunge. */
.percorso{position:relative;--p:0;margin-top:.4rem}
.fibra{position:absolute;left:10%;right:10%;top:26px;height:4px;border-radius:4px;
  background:rgba(11,24,34,.09)}
.fibra .accesa{position:absolute;left:0;top:0;bottom:0;border-radius:4px;
  width:calc(var(--p) * 100%);overflow:hidden;
  background:linear-gradient(90deg,var(--teal),var(--ciano) 28%,var(--blu) 55%,
    var(--viola) 80%,var(--indaco));
  box-shadow:0 0 14px rgba(95,200,220,.35)}
/* il bagliore che continua a correre dentro la parte accesa */
.fibra .accesa::after{content:'';position:absolute;top:0;bottom:0;width:140px;
  left:-140px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  animation:bagliore 3.6s var(--e) infinite}
@keyframes bagliore{0%{left:-140px}70%,100%{left:100%}}
/* la testa: il punto dove sta arrivando la luce */
.testa{position:absolute;top:28px;left:calc(10% + var(--p) * 80%);
  width:14px;height:14px;border-radius:50%;transform:translate(-50%,-50%);
  background:#fff;box-shadow:0 0 0 4px rgba(95,200,220,.28),0 0 22px 6px rgba(95,200,220,.55);
  opacity:calc(1 - var(--fine,0));transition:opacity .4s}

.fasi{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;
  text-align:center;list-style:none}
.fase{display:flex;flex-direction:column;align-items:center;gap:.26rem}
/* la ghiera: il connettore che si accende quando la luce arriva */
.ghiera{position:relative;width:30px;height:16px;border-radius:5px;margin:20px 0 1.4rem;
  background:var(--chiaro2);border:2px solid rgba(11,24,34,.16);
  transition:border-color .5s var(--e),box-shadow .5s var(--e),background .5s var(--e)}
.ghiera::after{content:'';position:absolute;left:50%;top:50%;width:6px;height:6px;
  border-radius:50%;transform:translate(-50%,-50%) scale(.4);background:var(--tinta);
  opacity:0;transition:transform .5s var(--e),opacity .5s var(--e)}
.fase.accesa .ghiera{border-color:var(--tinta);background:#fff;
  box-shadow:0 0 0 6px color-mix(in srgb,var(--tinta) 16%,transparent),
             0 6px 18px color-mix(in srgb,var(--tinta) 30%,transparent)}
.fase.accesa .ghiera::after{opacity:1;transform:translate(-50%,-50%) scale(1)}
.fase:nth-child(1){--tinta:var(--teal)}
.fase:nth-child(2){--tinta:var(--ciano)}
.fase:nth-child(3){--tinta:var(--blu)}
.fase:nth-child(4){--tinta:var(--viola)}
.fase:nth-child(5){--tinta:var(--indaco)}
.fase b{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;font-weight:600;
  color:var(--in3);transition:color .5s var(--e)}
.fase.accesa b{color:#26798A}
.fase strong{font-size:.98rem;font-weight:600;letter-spacing:-.014em;color:var(--in)}
.fase em{font-style:normal;font-size:.8rem;color:var(--in2);line-height:1.5;
  max-width:22ch;margin-top:.1rem}

.fatti{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2.6rem}
.fatto{border:1px solid var(--filoc);border-radius:22px;padding:1.7rem 1.7rem 1.6rem;
  background:var(--chiaro);transition:box-shadow .32s var(--e),transform .32s var(--e)}
@media (hover:hover){.fatto:hover{transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(11,24,34,.09)}}
.fatto .n{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;
  color:var(--in3);margin-bottom:1rem}
.fatto h3{margin-bottom:.7rem;font-size:1.1rem}
.fatto p{font-size:.85rem;line-height:1.68;color:var(--in2)}
.fatto{display:flex;flex-direction:column}
.ancora{display:inline-flex;align-items:center;gap:.45rem;margin-top:auto;
  padding-top:1.1rem;font-size:.83rem;font-weight:600;color:#3B67B8;
  transition:gap .25s var(--e),color .25s var(--e)}
.ancora:hover{gap:.8rem;color:#5A5FC0}

.visura{display:grid;grid-template-columns:repeat(3,1fr);margin-top:2.6rem;
  border:1px solid var(--filoc);border-radius:18px;overflow:hidden}
.visura div{padding:1.2rem 1.4rem;border-right:1px solid var(--filoc)}
.visura div:last-child{border-right:0}
.visura dt{font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--in3);margin-bottom:.42rem}
.visura dd{font-size:.87rem;color:var(--in);font-weight:500}


/* ══ DOMANDE ═════════════════════════════════════════════════
   Sei pillole. Quando una riga entra nello schermo (motore.js le dà
   .piena) la palla rotola da sinistra a destra e si lascia dietro il
   colore della riga; in fondo diventa il «+» che apre la risposta.
   Il colore di ogni riga sta in --tinta, nell'HTML. Senza script
   (html senza .js) le righe sono già piene e le risposte aperte. */
#domande{background:var(--chiaro);padding-top:4.4rem;padding-bottom:3.4rem}
.faq{list-style:none;max-width:920px;margin:0 auto;display:grid;gap:.8rem}
.faq-h{font:inherit;margin:0;color:inherit}
.faq-testa{--h:64px;--p:52px;position:relative;display:flex;align-items:center;
  width:100%;min-height:var(--h);padding:.9rem 4.7rem;border-radius:999px;
  border:1px solid rgba(11,24,34,.12);background:#fff;overflow:hidden;cursor:pointer;
  font:600 1.06rem/1.38 var(--ff);letter-spacing:-.012em;color:var(--in);text-align:left;
  transition:border-color .4s var(--e),box-shadow .3s var(--e)}
.faq-fondo{position:absolute;inset:0;border-radius:inherit;background:var(--tinta);
  clip-path:inset(0 calc(100% - 6px - var(--p) / 2) 0 0 round 999px);
  transition:clip-path 1.05s var(--fluida)}
.faq-fondo::after{content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 60%)}
.faq-domanda{position:relative;z-index:1;flex:1 1 auto;text-wrap:balance}
.faq-palla{position:absolute;z-index:2;top:50%;left:6px;width:var(--p);height:var(--p);
  margin-top:calc(var(--p) / -2);border-radius:50%;background:var(--in);color:var(--tinta);
  display:grid;place-items:center;
  box-shadow:0 8px 18px -6px rgba(11,24,34,.45),inset 0 1px 0 rgba(255,255,255,.12);
  transition:left 1.05s var(--fluida),transform 1.05s var(--fluida)}
.faq-palla svg{grid-area:1/1;width:22px;height:22px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  transition:opacity .3s var(--e) .7s,transform .4s var(--e)}
.faq-piu{opacity:0;color:#fff}
.piena .faq-testa{border-color:transparent;
  box-shadow:0 10px 28px -14px rgba(11,24,34,.35)}
.piena .faq-fondo{clip-path:inset(0 0 0 0 round 999px)}
.piena .faq-palla{left:calc(100% - 6px - var(--p));transform:rotate(360deg)}
.piena .faq-ico{opacity:0;transition-delay:.55s}
.piena .faq-piu{opacity:1}
.aperta .faq-piu{transform:rotate(45deg);transition-delay:0s}
@media (hover:hover){.piena .faq-testa:hover{box-shadow:0 16px 34px -14px rgba(11,24,34,.45)}}
.faq-testa:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.faq-risposta{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--e)}
.faq-risposta>div{overflow:hidden}
.faq-risposta p{padding:1rem 4.7rem .5rem;color:var(--in2);font-size:.95rem;line-height:1.7;
  max-width:72ch}
.aperta .faq-risposta{grid-template-rows:1fr}
.faq-risposta .ancora{margin:0 0 .7rem 4.7rem;padding-top:.3rem}
html:not(.js) .faq-testa{color:var(--in);border-color:transparent}
html:not(.js) .faq-fondo{clip-path:none}
html:not(.js) .faq-palla{left:calc(100% - 6px - var(--p))}
html:not(.js) .faq-ico{display:none}
html:not(.js) .faq-piu{opacity:1}
html:not(.js) .faq-risposta{grid-template-rows:1fr}


/* ══ AURA · LE SCENE DELLE SCHEDE ════════════════════════════
   Nella pagina della rete le schede hanno i plastici; qui, finché non
   arrivano le immagini definitive, ogni scheda ha una piccola scena
   disegnata in CSS attorno al globo di AURA: la notte, le lingue, i
   servizi, il collegamento al gestionale. */
.quadro .pannello.scena{background:
  radial-gradient(60% 70% at 50% 50%,rgba(106,123,212,.22),transparent 70%),
  radial-gradient(40% 50% at 30% 70%,rgba(95,200,220,.12),transparent 70%),
  linear-gradient(160deg,#0B1020,#06080D)}
.sorb{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;
  display:flex;align-items:center;justify-content:center;gap:2.5px;border-radius:50%;z-index:2}
.sorb i{position:absolute;inset:0;border-radius:50%;z-index:-1;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 44%),
    radial-gradient(circle at 74% 76%,var(--viola) 0%,rgba(106,123,212,0) 58%),
    radial-gradient(circle at 50% 50%,#BFEFF7 0%,var(--ciano) 40%,var(--teal) 72%,#1B2A52 100%);
  box-shadow:0 0 0 6px rgba(95,200,220,.08),0 0 34px rgba(95,200,220,.45);
  animation:respira 4.2s ease-in-out infinite}
.sorb::before,.sorb::after{content:'';position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(95,200,220,.55);animation:uvOnda 2.8s cubic-bezier(.25,.6,.3,1) infinite}
.sorb::after{animation-delay:1.4s;border-color:rgba(106,123,212,.5)}
.sorb b{width:3px;height:22px;border-radius:2px;background:#fff;
  box-shadow:0 0 6px rgba(255,255,255,.7);transform:scaleY(.3);
  animation:parla 1.2s ease-in-out infinite}
.sorb b:nth-child(2){height:12px;animation-duration:1.05s}
.sorb b:nth-child(3){height:18px;animation-duration:.85s;animation-delay:.15s}
.sorb b:nth-child(4){height:24px;animation-duration:1.25s;animation-delay:.05s}
.sorb b:nth-child(5){height:17px;animation-duration:.95s;animation-delay:.3s}
.sorb b:nth-child(6){height:11px;animation-duration:1.1s;animation-delay:.42s}
/* la notte */
.quadro .pannello.scena-notte{background:
  radial-gradient(1px 1px at 12% 20%,#fff,transparent),radial-gradient(1px 1px at 28% 64%,#cfe,transparent),
  radial-gradient(1.4px 1.4px at 44% 14%,#fff,transparent),radial-gradient(1px 1px at 82% 58%,#fff,transparent),
  radial-gradient(1.2px 1.2px at 70% 82%,#dff,transparent),radial-gradient(1px 1px at 18% 86%,#fff,transparent),
  radial-gradient(60% 70% at 50% 50%,rgba(75,78,158,.28),transparent 70%),
  linear-gradient(170deg,#090C1C,#04060B)}
.scena .luna{position:absolute;right:12%;top:14%;width:30px;height:30px;border-radius:50%;
  box-shadow:inset -8px 3px 0 0 #E8EEFF;filter:drop-shadow(0 0 8px rgba(200,215,255,.5))}
.scena .ora{position:absolute;left:9%;top:12%;font:600 .78rem var(--mono);letter-spacing:.12em;
  color:#9FE3F0;opacity:.85}
/* lingue e servizi: le nuvolette che galleggiano */
.scena .bolla{position:absolute;left:var(--x);top:var(--y);font-size:.7rem;font-weight:600;
  padding:.26rem .62rem;border-radius:999px;color:#D9F5FA;white-space:nowrap;
  background:rgba(255,255,255,.06);border:1px solid rgba(159,227,240,.32);
  box-shadow:0 6px 18px -8px rgba(0,0,0,.6);
  animation:galleggia 4.8s ease-in-out infinite;animation-delay:var(--r,0s)}
@keyframes galleggia{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(-6px);opacity:1}}
.scena .avviso{display:inline-flex;align-items:center;gap:.4rem;color:#EEF2FF;
  background:rgba(106,123,212,.16);border-color:rgba(159,168,238,.4)}
.scena .avviso i{width:7px;height:7px;border-radius:50%;background:var(--ciano);
  box-shadow:0 0 8px var(--ciano)}
/* il gestionale: il globo a sinistra, un filo, la finestra a destra */
.scena-gestionale .sorb{left:28%}
.scena-gestionale .filo{position:absolute;left:calc(28% + 34px);right:calc(22% + 44px);top:50%;
  height:1px;background:repeating-linear-gradient(90deg,rgba(159,227,240,.55) 0 6px,transparent 6px 11px)}
.scena-gestionale .filo i{position:absolute;top:-3px;left:0;width:7px;height:7px;border-radius:50%;
  background:#E6FBFF;box-shadow:0 0 10px var(--ciano);animation:viaggia 2.6s ease-in-out infinite alternate}
@keyframes viaggia{to{left:calc(100% - 7px)}}
.scena-gestionale .finestra{position:absolute;right:12%;top:50%;width:21%;aspect-ratio:4/3;
  transform:translateY(-50%);border-radius:8px;padding:9% 2% 2%;
  background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.16);display:flex;flex-direction:column;gap:12%}
.scena-gestionale .finestra b{position:absolute;left:8%;top:9%;width:20%;height:6%;border-radius:4px;
  background:rgba(159,227,240,.6)}
.scena-gestionale .finestra s{display:block;height:9%;border-radius:4px;margin-top:12%;
  background:rgba(255,255,255,.18)}
.scena-gestionale .finestra s:nth-of-type(2){width:72%}
.scena-gestionale .finestra s:nth-of-type(3){width:48%;background:rgba(106,123,212,.5)}
/* il rimando alla rete: al posto della voce, un capo di fibra acceso */
.ua-fibra{position:relative;flex:0 0 auto;width:46px;height:46px;border-radius:50%;
  background:radial-gradient(circle,#0E1A26 0%,#060A10 70%);border:1px solid rgba(95,200,220,.35)}
.ua-fibra::before{content:'';position:absolute;left:-6px;right:50%;top:50%;height:2px;margin-top:-1px;
  background:linear-gradient(90deg,transparent,var(--teal),var(--ciano))}
.ua-fibra i{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;
  background:#E6FBFF;box-shadow:0 0 12px 3px rgba(95,200,220,.8);animation:respira 2.4s ease-in-out infinite}
.verso-rete:hover{border-color:rgba(95,200,220,.5);background:rgba(95,200,220,.06)}

/* ══ CHIUSURA ════════════════════════════════════════════════ */
#parliamone,#prova{text-align:center;padding-bottom:3rem;background:var(--chiaro2)}
#parliamone .wrap,#prova .wrap{max-width:760px}
#parliamone p,#prova p{margin:1.5rem auto 2.3rem;color:var(--in2);font-size:1rem;max-width:52ch}

/* ══ LA PAGINA AURA ══════════════════════════════════════════
   Stessa grafica della landing, ma chiara dall'inizio: la rete
   vive nel buio dei cavedi, AURA nella camera. L'orb, che sulla
   landing stava in mezzo al confronto, qui apre la pagina. */
.pagina-aura{background:var(--chiaro2);color:var(--in)}
.marchio-aura{display:inline-flex;align-items:center;gap:.6rem;color:#fff;
  padding:.2rem 0}
.mini-orb{flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff 0%,rgba(255,255,255,0) 42%),
    radial-gradient(circle at 50% 50%,#EAF8FC 0%,var(--ciano) 46%,var(--teal) 74%,#1B2A52 100%);
  box-shadow:0 0 0 4px rgba(95,200,220,.12),0 0 18px rgba(95,200,220,.35);
  animation:respira 4.2s ease-in-out infinite}
.marchio-aura .nome{font-size:1.02rem;font-weight:700;letter-spacing:.18em}
.marchio-aura small{font-size:.72rem;font-weight:500;color:var(--tx2);
  letter-spacing:.01em}

.aura-testa{position:relative;overflow:hidden;min-height:100vh;min-height:100svh;
  display:flex;align-items:center;padding:140px 0 5rem;
  background:
    radial-gradient(44% 52% at 74% 48%,rgba(106,123,212,.20),transparent 70%),
    radial-gradient(38% 44% at 18% 84%,rgba(95,200,220,.14),transparent 72%),
    linear-gradient(180deg,var(--chiaro2) 0%,var(--chiaro) 70%)}
.aura-testa .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;
  align-items:center;width:100%}
.aura-testa .destinatario{margin:0}
.aura-testa h1{color:var(--in);margin-top:1.1rem;max-width:14ch}
.aura-testa .sotto{margin:1.6rem 0 2.3rem;max-width:52ch;color:var(--in2);
  font-size:1.04rem;line-height:1.68}
.aura-testa .bottoni{justify-content:flex-start}

.confronto.due{grid-template-columns:1fr 1fr}
#come{padding-top:2rem}

/* il rimando alla rete: una scheda sola, chiara, in fondo alla prova */
.rimando-rete{display:flex;flex-direction:column;align-items:center;gap:.4rem;
  margin:3.4rem auto 0;max-width:620px;padding:1.4rem 1.7rem 1.3rem;
  border:1px solid var(--filoc);border-radius:20px;background:var(--chiaro);
  text-align:center;transition:box-shadow .3s var(--e),transform .3s var(--e)}
@media (hover:hover){.rimando-rete:hover{transform:translateY(-3px);
  box-shadow:0 16px 36px rgba(11,24,34,.09)}}
.rimando-rete:focus-visible{outline:2px solid var(--teal);outline-offset:4px}
.rr-eti{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--in2)}
.rr-testo{font-size:.96rem;line-height:1.55;color:var(--in)}
.rimando-rete .ancora{margin-top:0;padding-top:.45rem;white-space:nowrap}

/* ══ PIEDE ═══════════════════════════════════════════════════ */
/* Il piede torna al buio da cui è partita la pagina, con la stessa
   sfumatura della barra. Sul chiaro il logo spariva. */
/* Lo stacco netto si vedeva: ora la discesa ha otto passaggi invece
   di quattro, e un alone lentissimo che si sposta le toglie l'aria
   di banda stampata. */
footer{position:relative;overflow:hidden;margin-top:-1px;
  background:linear-gradient(180deg,var(--chiaro2) 0%,#EAF0F5 8%,#D2DDE7 18%,
    #A9B8CA 30%,#7C8AA6 42%,#515F83 54%,#2E3A5C 68%,#1A2140 82%,#0F1428 92%,#0B1220 100%);
  color:#93A3B2;padding:9rem 0 2.8rem;font-size:.8rem}
footer::before{content:'';position:absolute;left:-20%;right:-20%;top:8%;height:70%;
  pointer-events:none;
  background:radial-gradient(42% 60% at 30% 40%,rgba(106,123,212,.30),transparent 70%),
    radial-gradient(38% 54% at 72% 58%,rgba(95,200,220,.18),transparent 72%);
  filter:blur(44px);animation:respiroPiede 22s ease-in-out infinite}
@keyframes respiroPiede{
  0%,100%{transform:translateX(-3%) scale(1);opacity:.85}
  50%    {transform:translateX(3%) scale(1.08);opacity:1}}
footer .wrap{position:relative;z-index:1}
footer .in{display:flex;justify-content:space-between;gap:1.6rem;flex-wrap:wrap;
  align-items:center}
footer img{height:34px;opacity:1}
footer a{color:#B6C4D0}
footer a:hover{color:#fff}
.acceso-p{display:inline-flex;align-items:center;gap:.45rem;color:#8195A6}
.acceso-p i{width:6px;height:6px;border-radius:50%;background:#3EA76B;
  box-shadow:0 0 8px rgba(62,167,107,.55);animation:respiro 3s ease-in-out infinite}
@keyframes respiro{0%,100%{opacity:.45}50%{opacity:1}}

/* ══ LA COMPARSA ═════════════════════════════════════════════ */
.sv{opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--e),transform .8s var(--e)}
.sv.qui{opacity:1;transform:none}
.scala>*{opacity:0;transform:translateY(22px);
  transition:opacity .75s var(--e),transform .75s var(--e);
  transition-delay:calc(var(--i,0) * 95ms)}
.scala.qui>*{opacity:1;transform:none}

/* ══ SCHERMI STRETTI ═════════════════════════════════════════ */
@media (max-width:1060px){
  .quadri{grid-template-columns:1fr 1fr}
  .confronto{grid-template-columns:1fr;gap:1.5rem}
  #orb{width:min(230px,50vw);margin:0 auto;order:-1}
  .fatti{grid-template-columns:1fr}
  .visura{grid-template-columns:1fr}
  .visura div{border-right:0;border-bottom:1px solid var(--filoc)}
  .visura div:last-child{border-bottom:0}
  .vantaggi{grid-template-columns:1fr 1fr}
  .aura-testa .wrap{grid-template-columns:1fr;gap:1.5rem;text-align:center}
  .aura-testa .orbo{order:-1}
  .aura-testa h1{max-width:none}
  .aura-testa .sotto{margin-left:auto;margin-right:auto}
  .aura-testa .bottoni{justify-content:center}
  .confronto.due{grid-template-columns:1fr}
}
/* the bar folds into the menu earlier than the page: with the language
   switch and the English labels it needs more room */
@media (max-width:980px){
  .barra nav{display:none;position:absolute;top:calc(100% + 10px);left:0;right:0;
    flex-direction:column;gap:.15rem;
    background:linear-gradient(104deg,#0B1220,#171633);
    border:1px solid rgba(255,255,255,.12);
    border-radius:20px;padding:.7rem;box-shadow:0 12px 34px rgba(0,0,0,.3)}
  .barra.aperto nav{display:flex}
  .barra nav a{padding:.7rem .9rem;font-size:.92rem}
  .barra .bt{margin-left:auto}
  #menu{display:block}
  .marchio-aura small{display:none}
}
@media (max-width:760px){
  :root{--col:100%}
  .sez{padding:4.6rem 0}
  #apertura{padding:120px 0 4.5rem}
  .quadri,.vantaggi{grid-template-columns:1fr}
  /* la fibra diventa verticale, a sinistra delle fasi */
  .fibra{left:26px;right:auto;top:28px;bottom:28px;width:4px;height:auto}
  .fibra .accesa{width:auto;right:0;bottom:auto;height:calc(var(--p) * 100%)}
  .fibra .accesa::after{display:none}
  .testa{left:28px;top:calc(28px + var(--p) * (100% - 56px))}
  .fasi{grid-template-columns:1fr;gap:1.6rem;text-align:left}
  .fase{display:grid;grid-template-columns:52px 1fr;align-items:start;column-gap:.4rem}
  .ghiera{grid-row:span 3;width:16px;height:30px;margin:0 0 0 20px}
  .fase em{max-width:none}
  .bottoni .bt{flex:1 1 auto;justify-content:center}
  .pausa{right:16px;bottom:16px}
  .aura-testa{min-height:auto;padding:120px 0 3.5rem}
  .uscita-aura{flex-wrap:wrap;border-radius:24px;padding:1.1rem;gap:.9rem}
  .ua-testo{flex-basis:calc(100% - 62px)}
  .uscita-aura .bt{width:100%;justify-content:center}
  .faq-testa{--h:58px;--p:46px;padding:.85rem 4rem .85rem 4.1rem;font-size:.97rem}
  .faq-palla svg{width:20px;height:20px}
  .faq-risposta p{padding:.9rem 1.3rem .4rem}
  .faq-risposta .ancora{margin-left:1.3rem}
  footer .in{flex-direction:column;align-items:flex-start;gap:1rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .sv,.scala>*{opacity:1!important;transform:none!important}
  .uv-eq b{transform:scaleY(.7)}
  .onde-wifi ellipse{opacity:.45;transform:scale(.6)}
  .onde-wifi ellipse:nth-of-type(2){transform:scale(.85);opacity:.3}
  .onde-wifi ellipse:nth-of-type(3){display:none}
}

/* ══ TEMA AURA ═══════════════════════════════════════════════
   La pagina AURA usa la stessa struttura della rete ma la palette
   della presentazione AURA: notte calda al posto del blu, crema al
   posto del bianco ghiaccio, oro, sabbia, terracotta e salvia al
   posto della scala teal-viola. Si accende con <body class="tema-aura">.
   Il rimando alla rete resta teal: porta all'altra pagina. */
.tema-aura{
  --scuro:#1C1814;--scuro2:#2B2620;--chiaro:#FDFBF7;--chiaro2:#F7F4EE;
  --tx:#F6F0E6;--tx2:#CFC8BC;--tx3:#A89A8C;
  --in:#2C3E50;--in2:#5D6772;--in3:#9A9387;
  --oro:#B8985F;--oro2:#CBB892;
  --ciano2:#E6D6B4;--ciano:#CBB892;--teal:#9C7F4A;--blu:#B8985F;
  --viola:#B07D62;--indaco:#7F8D6B;
  --filo:rgba(246,240,230,.08);--filo2:rgba(246,240,230,.16);--filoc:rgba(44,62,80,.11)}
.tema-aura ::selection{background:rgba(184,152,95,.3)}
.tema-aura .iride{background:linear-gradient(100deg,#CBB892,#E6D6B4 30%,#B8985F 60%,#B07D62 86%,#C7A893);
  -webkit-background-clip:text;background-clip:text}
.tema-aura .chiaro .iride{background:linear-gradient(100deg,#9C7F4A,#B8985F 34%,#B07D62 70%,#7F8D6B);
  -webkit-background-clip:text;background-clip:text}
.tema-aura .bt.nastro{background:linear-gradient(95deg,#9C7F4A,#B8985F 45%,#B07D62 85%);
  box-shadow:0 8px 24px rgba(184,152,95,.30)}
.tema-aura .bt.nastro:hover{box-shadow:0 14px 34px rgba(184,152,95,.45)}
.tema-aura .bt.pieno{color:#1C1814}
.tema-aura .bt.pieno:hover{box-shadow:0 12px 30px rgba(184,152,95,.28)}
.tema-aura .chiaro .bt.pieno:hover{background:#1E2B38}
/* la barra */
.tema-aura .barra .in{background:linear-gradient(104deg,#1C1814 0%,#241F1A 46%,#2B2620 100%);
  border-color:rgba(246,240,230,.10);
  box-shadow:0 10px 34px rgba(0,0,0,.42),0 0 0 1px rgba(184,152,95,.16) inset}
.tema-aura .barra .in::before{background:linear-gradient(104deg,#9C7F4A,#CBB892 30%,#B07D62 70%,#7F8D6B)}
.tema-aura .barra nav a{color:#CFC8BC}
.tema-aura #menu span{background:#F6F0E6}
.tema-aura .mini-orb{background:radial-gradient(circle at 34% 30%,#fff 0%,rgba(255,255,255,0) 42%),
    radial-gradient(circle at 50% 50%,#FDFBF7 0%,#B8985F 48%,#A89A8C 76%,#9C7F4A 100%);
  box-shadow:0 0 0 4px rgba(184,152,95,.14),0 0 18px rgba(203,184,146,.4)}
/* la copertina */
.tema-aura .film{background:
    radial-gradient(58% 48% at 50% 40%,rgba(184,152,95,.20),transparent 70%),
    radial-gradient(38% 34% at 24% 64%,rgba(176,125,98,.14),transparent 72%),
    radial-gradient(34% 30% at 78% 30%,rgba(127,141,107,.12),transparent 70%),
    var(--scuro)}
.tema-aura #apertura::after{background:radial-gradient(60% 46% at 50% 50%,rgba(28,24,20,.40),rgba(28,24,20,.20) 62%,
    rgba(28,24,20,.06) 88%),
    linear-gradient(180deg,rgba(28,24,20,.6) 0%,transparent 20%,transparent 74%,
    rgba(28,24,20,.8) 92%,var(--scuro) 100%)}
.tema-aura #apertura p.sotto{color:#DCD3C5}
/* il globo, come nella presentazione: oro, sabbia, tortora */
.tema-aura .nucleo{background:
    radial-gradient(circle at 32% 28%,#fff 0%,rgba(255,255,255,0) 40%),
    radial-gradient(circle at 72% 74%,#CBB892 0%,rgba(203,184,146,0) 52%),
    radial-gradient(circle at 50% 50%,#FDFBF7 0%,#B8985F 46%,#A89A8C 74%,#9C7F4A 100%);
  background-size:200% 200%,200% 200%,180% 180%;
  box-shadow:0 18px 48px -16px rgba(156,127,74,.55),
    inset -10px -14px 32px rgba(60,44,24,.35),inset 10px 12px 26px rgba(255,255,255,.45)}
.tema-aura .alone{background:radial-gradient(circle,rgba(203,184,146,.42) 0%,rgba(184,152,95,.22) 40%,transparent 68%)}
.tema-aura .onda{border-color:rgba(203,184,146,.5)}
.tema-aura .onda:nth-of-type(2){border-color:rgba(176,125,98,.42)}
.tema-aura .anello{border-color:rgba(184,152,95,.28)}
.tema-aura .eq b{background:linear-gradient(#B8985F,#A89A8C);box-shadow:0 0 6px rgba(184,152,95,.4)}
/* le schede */
.tema-aura .quadri::before{background:radial-gradient(52% 48% at 18% 34%,rgba(184,152,95,.24),transparent 68%),
    radial-gradient(46% 42% at 76% 24%,rgba(176,125,98,.14),transparent 70%)}
.tema-aura .quadro{background:linear-gradient(168deg,rgba(54,46,38,.92) 0%,rgba(34,29,24,.96) 44%,
    rgba(24,21,17,.98) 100%);border-color:rgba(246,240,230,.07)}
.tema-aura .quadro.acceso{background:
    radial-gradient(128% 84% at 4% -4%,rgba(203,184,146,.30),transparent 56%),
    linear-gradient(168deg,rgba(60,50,38,.94) 0%,rgba(36,30,24,.96) 48%,rgba(24,21,17,.98) 100%);
  border-color:rgba(203,184,146,.34)}
@media (hover:hover){.tema-aura .quadro:hover{border-color:rgba(203,184,146,.55);
  box-shadow:0 22px 60px -18px rgba(184,152,95,.45),0 0 0 1px rgba(230,214,180,.2) inset}}
.tema-aura .quadro .cima i,.tema-aura .quadro li::before{box-shadow:inset 0 0 0 3.2px #221D18}
.tema-aura .quadro.acceso .cima{color:#EADFC8;border-color:rgba(203,184,146,.36);background:rgba(184,152,95,.14)}
.tema-aura .quadro .cosa{color:#CFC8BC}
.tema-aura .quadro.acceso .cosa{color:#E3D9C6}
.tema-aura .quadro li{color:#B9AE9E}
.tema-aura .quadro .pannello.scena{background:
    radial-gradient(60% 70% at 50% 50%,rgba(184,152,95,.20),transparent 70%),
    radial-gradient(40% 50% at 30% 70%,rgba(176,125,98,.12),transparent 70%),
    linear-gradient(160deg,#2A241E,#15120F);border-color:rgba(246,240,230,.07)}
.tema-aura .quadro .pannello.scena-notte{background:
    radial-gradient(1px 1px at 12% 20%,#fff,transparent),radial-gradient(1px 1px at 28% 64%,#F6F0E6,transparent),
    radial-gradient(1.4px 1.4px at 44% 14%,#fff,transparent),radial-gradient(1px 1px at 82% 58%,#fff,transparent),
    radial-gradient(1.2px 1.2px at 70% 82%,#F6F0E6,transparent),radial-gradient(1px 1px at 18% 86%,#fff,transparent),
    radial-gradient(60% 70% at 50% 50%,rgba(184,152,95,.18),transparent 70%),
    linear-gradient(170deg,#211C17,#120F0C)}
.tema-aura .scena .luna{box-shadow:inset -8px 3px 0 0 #F3E6C8;filter:drop-shadow(0 0 8px rgba(230,214,180,.5))}
.tema-aura .scena .ora{color:#CBB892}
.tema-aura .scena .bolla{color:#F1E8D8;background:rgba(246,240,230,.06);border-color:rgba(203,184,146,.32)}
.tema-aura .scena .avviso{background:rgba(176,125,98,.16);border-color:rgba(199,168,147,.4)}
.tema-aura .scena .avviso i{background:#CBB892;box-shadow:0 0 8px #CBB892}
.tema-aura .sorb i{background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 44%),
    radial-gradient(circle at 72% 74%,#CBB892 0%,rgba(203,184,146,0) 52%),
    radial-gradient(circle at 50% 50%,#FDFBF7 0%,#B8985F 46%,#A89A8C 74%,#9C7F4A 100%);
  box-shadow:0 0 0 6px rgba(184,152,95,.08),0 0 34px rgba(203,184,146,.45)}
.tema-aura .sorb::before{border-color:rgba(203,184,146,.55)}
.tema-aura .sorb::after{border-color:rgba(176,125,98,.5)}
.tema-aura .scena-gestionale .filo{background:repeating-linear-gradient(90deg,rgba(203,184,146,.55) 0 6px,transparent 6px 11px)}
.tema-aura .scena-gestionale .filo i{background:#FFF6E4;box-shadow:0 0 10px #CBB892}
.tema-aura .scena-gestionale .finestra b{background:rgba(203,184,146,.7)}
.tema-aura .scena-gestionale .finestra s:nth-of-type(3){background:rgba(176,125,98,.55)}
.tema-aura .uscita-aura{border-color:rgba(246,240,230,.16);background:rgba(246,240,230,.035)}
/* il passaggio al chiaro, il percorso, le schede chiare */
.tema-aura #funziona::before{background:linear-gradient(180deg,#1C1814 0%,#2E2721 22%,#6E6254 48%,
    #B8AD9C 74%,#E6DED1 90%,#F7F4EE 100%)}
.tema-aura .testa{box-shadow:0 0 0 4px rgba(203,184,146,.3),0 0 22px 6px rgba(184,152,95,.5)}
.tema-aura .fibra .accesa{box-shadow:0 0 14px rgba(184,152,95,.35)}
.tema-aura .ancora{color:#9C7F4A}
.tema-aura .ancora:hover{color:#B07D62}
.tema-aura .faq-testa:focus-visible{outline-color:#B8985F}
/* il piede: dalla crema alla notte calda */
.tema-aura footer{background:linear-gradient(180deg,#F7F4EE 0%,#EFE9DF 8%,#DCD2C2 18%,#BCAF9C 30%,
    #958775 42%,#6C5F51 54%,#4A4038 68%,#2B2620 82%,#211C17 92%,#1C1814 100%);color:#B9AE9E}
.tema-aura footer::before{background:radial-gradient(42% 60% at 30% 40%,rgba(184,152,95,.28),transparent 70%),
    radial-gradient(38% 54% at 72% 58%,rgba(176,125,98,.18),transparent 72%)}
.tema-aura footer a{color:#E3D9C6}
.tema-aura .acceso-p{color:#B9AE9E}
.tema-aura .acceso-p i{background:#B8985F;box-shadow:0 0 8px rgba(184,152,95,.6)}
@media (max-width:980px){
  .tema-aura .barra nav{background:linear-gradient(104deg,#1C1814,#2B2620)}
}
.tema-aura .fase b{color:#9C7F4A}

/* ══ IL MARCHIO DI AURA CHE PARLA, NEI COLORI DI AURA ═════════
   Lo stesso globo con le barre della voce, in oro e sabbia come
   nella presentazione. «piccola» è la misura per la barra in alto;
   nella landing accompagna la voce di menu AURA. */
.ua-voce.oro .uv-nucleo{background:
    radial-gradient(circle at 32% 28%,rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 44%),
    radial-gradient(circle at 72% 74%,#CBB892 0%,rgba(203,184,146,0) 52%),
    radial-gradient(circle at 50% 50%,#FDFBF7 0%,#B8985F 46%,#A89A8C 74%,#9C7F4A 100%);
  box-shadow:0 0 0 4px rgba(184,152,95,.12),0 0 24px rgba(203,184,146,.45),
    inset -5px -7px 14px rgba(60,44,24,.4)}
.ua-voce.oro .uv-onda{border-color:rgba(203,184,146,.6)}
.ua-voce.oro .uv-onda+.uv-onda{border-color:rgba(176,125,98,.55)}
.ua-voce.piccola{width:28px;height:28px}
.ua-voce.piccola .uv-eq{height:11px;gap:1.5px}
.ua-voce.piccola .uv-eq b{width:2px}
.ua-voce.piccola .uv-nucleo{box-shadow:0 0 0 3px rgba(184,152,95,.12),0 0 14px rgba(203,184,146,.45),
    inset -3px -4px 8px rgba(60,44,24,.4)}
/* nella barra: la voce di menu AURA della landing e il marchio della pagina AURA */
.barra nav a.marchio-voce{display:inline-flex;align-items:center;gap:.5rem;color:#E6D6B4;
  padding-top:.3rem;padding-bottom:.3rem}
.barra nav a.marchio-voce .nome-aura{font-weight:700;letter-spacing:.14em;
  background:linear-gradient(100deg,#E6D6B4,#CBB892 40%,#B8985F 75%,#C7A893);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.barra nav a.marchio-voce:hover{background:rgba(203,184,146,.10)}
.marchio-aura .ua-voce{margin-right:.15rem}
/* nella landing la porta verso AURA ha già i colori di AURA */
body:not(.tema-aura) .uscita-aura .bt.nastro{background:linear-gradient(95deg,#9C7F4A,#B8985F 45%,#B07D62 85%);
  box-shadow:0 8px 24px rgba(184,152,95,.30)}
body:not(.tema-aura) .uscita-aura:hover{border-color:rgba(203,184,146,.45);background:rgba(184,152,95,.06)}
body:not(.tema-aura) .uscita-aura:hover .bt{box-shadow:0 14px 34px rgba(184,152,95,.42)}

/* ══ AURA · I PIANI ══════════════════════════════════════════
   Tre colonne, senza prezzi. Quella centrale è in evidenza con il
   filo d'oro in alto, come nella tabella interna dei piani. */
#piani{padding-top:4.4rem;padding-bottom:3rem}
.piani{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;align-items:stretch}
.piano{position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--filoc);border-radius:22px;padding:1.9rem 1.8rem 1.6rem;
  transition:box-shadow .32s var(--e),transform .32s var(--e)}
.piano::before{content:'';position:absolute;left:22px;right:22px;top:-1px;height:3px;
  border-radius:0 0 3px 3px;background:var(--filoc)}
.piano.in-evidenza{border-color:rgba(184,152,95,.45);
  box-shadow:0 22px 50px -24px rgba(156,127,74,.45)}
.piano.in-evidenza::before{background:linear-gradient(90deg,#9C7F4A,#CBB892,#B07D62)}
@media (hover:hover){.piano:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(44,62,80,.10)}}
.piano-n{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--in3)}
.piano.in-evidenza .piano-n{color:#9C7F4A}
.piano h3{font-size:1.6rem;margin:.35rem 0 .7rem;letter-spacing:-.02em}
.piano-per{font-size:.86rem;font-weight:600;color:var(--in);line-height:1.5}
.piano-cosa{font-size:.86rem;color:var(--in2);line-height:1.62;margin:.8rem 0 1.2rem;
  padding-bottom:1.2rem;border-bottom:1px solid var(--filoc)}
.piano ul{list-style:none;display:grid;gap:.55rem;margin-bottom:.4rem}
.piano li{display:flex;gap:.6rem;font-size:.84rem;color:var(--in2);line-height:1.5}
.piano li::before{content:'';flex:0 0 auto;width:12px;height:12px;margin-top:.26em;border-radius:50%;
  background:conic-gradient(#B8985F,#CBB892,#B07D62,#B8985F);box-shadow:inset 0 0 0 3.2px #fff}
.piano:not(:first-child) li:first-child{font-weight:600;color:var(--in)}
.piano:not(:first-child) li:first-child::before{background:#2C3E50}
.piani-nota{text-align:center;margin:2rem auto 0;max-width:60ch;font-size:.9rem;color:var(--in2)}
@media (max-width:1060px){.piani{grid-template-columns:1fr}}
/* nella pagina AURA, la voce di menu che porta alla rete ha i colori di Auralink */
.barra nav a.verso-rete-menu .nome-rete{font-weight:700;
  background:linear-gradient(100deg,#2E93A8,#5FC8DC 35%,#8FA0EA 70%,#6A7BD4);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.barra nav a.verso-rete-menu span[aria-hidden]{color:#5FC8DC}
.barra nav a.verso-rete-menu:hover{background:rgba(95,200,220,.10)}

/* ══ ORDINE ═════════════════════════════════════════════════
   Le schede affiancate condividono le righe (subgrid): titoli,
   paragrafi ed elenchi partono alla stessa altezza in tutte le
   colonne, qualunque sia la lunghezza del testo. La giustificazione
   dei paragrafi è stata provata e tolta il 4 ottobre. */
.quadro h3{max-width:22ch}
@supports (grid-template-rows:subgrid){
  .quadro{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0}
  .quadro .cima{justify-self:center;align-self:start}
  .quadro .pannello{align-self:start}
  .quadro h3{align-self:end}
  .quadro .cosa{align-self:start}
  .quadro ul{margin-top:0;align-self:start}
  .piano{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:0}
  .piano .ancora{align-self:end}
}

/* nella pagina AURA la fascia verso la rete parla con i colori di Auralink */
.tema-aura .verso-rete .nome-rete{font-weight:700;
  background:linear-gradient(100deg,#2E93A8,#5FC8DC 35%,#8FA0EA 70%,#6A7BD4);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.tema-aura .verso-rete .bt.nastro{background:linear-gradient(95deg,#2E93A8,#4A78C8 42%,#6A7BD4 78%,#4B4E9E);
  box-shadow:0 8px 24px rgba(106,123,212,.30)}
.tema-aura .verso-rete:hover{border-color:rgba(95,200,220,.45);background:rgba(95,200,220,.05)}
.tema-aura .verso-rete:hover .bt{box-shadow:0 14px 34px rgba(106,123,212,.42)}

/* Il simbolo di Auralink che si muove: il nastro respira, la luce corre
   lungo le quattro fibre e accende i punti in cima, uno dopo l'altro. */
.ua-rete{flex:0 0 auto;width:72px;height:auto;display:grid;place-items:center}
.ua-rete svg{width:100%;height:auto;overflow:visible;
  filter:drop-shadow(0 0 6px rgba(95,200,220,.35))}
.ua-rete .nastro-ar{fill:url(#gNastro);transform-origin:40% 80%;
  animation:nastroAr 4s ease-in-out infinite}
@keyframes nastroAr{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.06) translateY(-1.5px)}}
.ua-rete .fibre-ar path{fill:none;stroke:rgba(210,222,250,.7);stroke-width:2;stroke-linecap:round}
.ua-rete .luce-ar path{fill:none;stroke:#E6FBFF;stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:16 100;stroke-dashoffset:16;animation:luceAr 2.4s ease-in infinite}
.ua-rete .luce-ar path:nth-child(2){animation-delay:.35s}
.ua-rete .luce-ar path:nth-child(3){animation-delay:.7s}
.ua-rete .luce-ar path:nth-child(4){animation-delay:1.05s}
@keyframes luceAr{0%{stroke-dashoffset:16;opacity:0}10%{opacity:1}70%{stroke-dashoffset:-84;opacity:1}
  80%,100%{stroke-dashoffset:-100;opacity:0}}
.ua-rete .punti-ar circle{fill:#fff;transform-box:fill-box;transform-origin:center;
  animation:puntoAr 2.4s ease-out infinite}
.ua-rete .punti-ar circle:nth-child(1){animation-delay:1.55s}
.ua-rete .punti-ar circle:nth-child(2){animation-delay:1.9s}
.ua-rete .punti-ar circle:nth-child(3){animation-delay:2.25s}
.ua-rete .punti-ar circle:nth-child(4){animation-delay:2.6s}
@keyframes puntoAr{0%{transform:scale(1);filter:none}12%{transform:scale(1.45);
  filter:drop-shadow(0 0 5px #9FE3F0)}40%,100%{transform:scale(1);filter:none}}
@media (max-width:760px){.tema-aura .verso-rete .ua-testo{flex-basis:calc(100% - 90px)}}
.ua-rete .nastro-ar2{fill:url(#gNastroT);opacity:.9;transform-origin:40% 80%;animation:nastroAr 4s ease-in-out infinite .4s}
.ua-rete .scritta-ar{font:500 64px var(--ff);letter-spacing:-.01em;fill:url(#gScritta)}

/* a section reached from a link takes the focus (motore.js) for keyboard
   users: it is not a control, so it draws no outline */
[tabindex="-1"]:focus{outline:none}