/* ═══════════════════════════════════════════════════════════════════════════
   Due moduli della vetrina, con lo stesso impianto grafico della home.
     · .lv-  → «I lavori che fa mentre non ci sei»: un banco di lavoro vivo
     · .rt-  → «Tutto quello che Oravio collega»: la rete che pulsa
   Nomi di classe prefissati: la vetrina ha gia' centinaia di regole e una
   collisione qui si manifesterebbe in una sezione lontana e sembrerebbe casuale.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── banco di lavoro ─────────────────────────────────────────────────────── */
.lv-wrap{max-width:1080px;margin:30px auto 0;padding:0 16px}

.lv-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
        background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-lg);
        padding:14px 18px;box-shadow:0 1px 2px rgba(10,12,29,.04)}
.lv-spia{width:9px;height:9px;border-radius:50%;background:var(--c4);flex:none;
         box-shadow:0 0 0 0 rgba(16,185,129,.55);animation:lv-battito 2.4s var(--ease) infinite}
@keyframes lv-battito{
  0%{box-shadow:0 0 0 0 rgba(16,185,129,.5)}
  70%{box-shadow:0 0 0 9px rgba(16,185,129,0)}
  100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}
}
.lv-stato{font-weight:650;font-size:14px;color:var(--ink-0)}
.lv-orario{margin-left:auto;font:600 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
           color:var(--ink-2);letter-spacing:.02em}
.lv-contatore{font:800 15px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--c2)}

.lv-corsie{display:grid;gap:14px;margin-top:14px}
/* Un contenitore fisso per corsia: le carte si sostituiscono DENTRO il proprio
   posto. Senza, l'ordine casuale di partenza faceva scrivere una corsia sopra
   l'altra e ne restavano due invece di tre. */
.lv-slot{display:flex;min-width:0}
.lv-slot > .lv-card{flex:1;min-width:0}
@media(min-width:860px){ .lv-corsie{grid-template-columns:repeat(3,1fr)} }

/* La scheda: e' l'elemento che deve sembrare un oggetto, non un riquadro. */
.lv-card{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-lg);
         padding:16px;min-height:212px;display:flex;flex-direction:column;
         box-shadow:0 1px 2px rgba(10,12,29,.05),0 8px 24px -18px rgba(10,12,29,.35);
         transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);
         will-change:transform}
.lv-card[data-fase="corso"]{border-color:rgba(124,58,237,.32);
         box-shadow:0 1px 2px rgba(10,12,29,.05),0 16px 40px -24px rgba(124,58,237,.55)}
.lv-card[data-fase="fatto"]{border-color:rgba(16,185,129,.4)}
/* l'entrata: sale e si assesta, non compare di colpo */
.lv-card.lv-entra{animation:lv-entrata .62s var(--ease) both}
@keyframes lv-entrata{from{opacity:0;transform:translateY(16px) scale(.975)}to{opacity:1;transform:none}}
.lv-card.lv-esce{animation:lv-uscita .5s var(--ease) both}
@keyframes lv-uscita{to{opacity:0;transform:translateY(-12px) scale(.985)}}

.lv-intesta{display:flex;align-items:flex-start;gap:11px}
.lv-icona{width:36px;height:36px;border-radius:11px;flex:none;display:grid;place-items:center;
          font-size:18px;background:var(--bg-2);transition:background .5s var(--ease)}
.lv-card[data-fase="corso"] .lv-icona{background:linear-gradient(135deg,rgba(0,184,212,.16),rgba(124,58,237,.18))}
.lv-card[data-fase="fatto"] .lv-icona{background:rgba(16,185,129,.14)}
.lv-titolo{font-weight:650;font-size:14.5px;line-height:1.35;color:var(--ink-0)}
.lv-chi{font-size:12px;color:var(--ink-2);margin-top:2px}

.lv-pillola{margin-left:auto;flex:none;font-size:11px;font-weight:700;letter-spacing:.03em;
            padding:4px 9px;border-radius:999px;white-space:nowrap;
            background:var(--bg-2);color:var(--ink-2);transition:all .45s var(--ease)}
.lv-card[data-fase="corso"] .lv-pillola{background:rgba(124,58,237,.12);color:var(--c2)}
.lv-card[data-fase="fatto"] .lv-pillola{background:rgba(16,185,129,.14);color:#0d8a63}

/* Il registro dei passi: le righe si accendono una alla volta, come un lavoro vero. */
.lv-passi{margin:13px 0 0;padding:0;list-style:none;flex:1;display:flex;flex-direction:column;gap:7px}
.lv-passo{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);
          opacity:.28;transform:translateX(-4px);
          transition:opacity .45s var(--ease),transform .45s var(--ease),color .45s var(--ease)}
.lv-passo.on{opacity:1;transform:none;color:var(--ink-1)}
.lv-bollo{width:14px;height:14px;border-radius:50%;flex:none;border:1.5px solid var(--line-2);
          position:relative;transition:all .45s var(--ease)}
.lv-passo.on .lv-bollo{border-color:var(--c2);background:var(--c2)}
.lv-passo.on .lv-bollo::after{content:"";position:absolute;inset:0;margin:auto;width:5px;height:5px;
          border-radius:50%;background:#fff}
.lv-passo.attivo .lv-bollo{border-color:var(--c1);background:transparent;
          animation:lv-gira .9s linear infinite;border-right-color:transparent}
@keyframes lv-gira{to{transform:rotate(360deg)}}
.lv-passo.attivo .lv-bollo::after{display:none}

/* La barra: avanza a scatti irregolari, come un lavoro che incontra ostacoli. */
.lv-barra{height:4px;border-radius:99px;background:var(--bg-2);overflow:hidden;margin-top:12px}
.lv-riemp{height:100%;width:0;border-radius:99px;background:var(--grad);
          transition:width .7s cubic-bezier(.34,.9,.3,1)}
.lv-card[data-fase="fatto"] .lv-riemp{background:linear-gradient(90deg,var(--c4),#34d399)}

.lv-esito{display:flex;align-items:center;gap:8px;margin-top:11px;min-height:20px;
          font-size:12.5px;font-weight:600;color:#0d8a63;opacity:0;transform:translateY(5px);
          transition:opacity .5s var(--ease),transform .5s var(--ease)}
.lv-card[data-fase="fatto"] .lv-esito{opacity:1;transform:none}
.lv-spunta{width:17px;height:17px;flex:none}
.lv-card[data-fase="fatto"] .lv-spunta circle{animation:lv-cerchio .45s var(--ease) both}
.lv-card[data-fase="fatto"] .lv-spunta path{animation:lv-segno .4s var(--ease) .22s both}
@keyframes lv-cerchio{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes lv-segno{from{stroke-dashoffset:20}to{stroke-dashoffset:0}}

.lv-tempo{font:600 11.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink-2);
          margin-left:auto;font-variant-numeric:tabular-nums}

.lv-nota{text-align:center;font-size:13px;color:var(--ink-2);margin:16px auto 0;max-width:640px;line-height:1.6}

/* ── rete che pulsa ──────────────────────────────────────────────────────── */
.rt-wrap{max-width:1080px;margin:26px auto 0;padding:0 16px;
         display:grid;gap:18px;align-items:center}
@media(min-width:900px){ .rt-wrap{grid-template-columns:1.15fr .85fr} }

/* ⚠️ aspect-ratio + min-height insieme: dentro una griglia, un contenitore
   grafico senza altezza intrinseca collassa a zero sotto i 900px. */
.rt-scena{position:relative;width:100%;aspect-ratio:4/3;min-height:266px;
          background:radial-gradient(120% 90% at 50% 45%,var(--bg-1) 0%,var(--bg-0) 72%);
          border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.rt-scena svg{width:100%;height:100%;display:block}
.rt-arco{fill:none;stroke:var(--line-2);stroke-width:.9}
.rt-scia{fill:none;stroke:var(--c2);stroke-width:1.8;stroke-linecap:round;opacity:.85}
.rt-nodo circle{transition:r .4s var(--ease),opacity .4s var(--ease)}
.rt-nodo text{font:600 7.4px/1 system-ui,-apple-system,sans-serif;fill:var(--ink-2)}
.rt-nodo.acceso text{fill:var(--ink-0)}
.rt-centro-alone{fill:url(#rt-sfuma);opacity:.5}

.rt-numeri{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(min-width:900px){ .rt-numeri{grid-template-columns:1fr} }
.rt-num{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r);
        padding:13px 15px;text-align:left}
.rt-cifra{font:800 25px/1 system-ui,-apple-system,sans-serif;
          background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
          font-variant-numeric:tabular-nums}
.rt-eti{font-size:12px;color:var(--ink-2);margin-top:4px;line-height:1.4}

/* ── chi preferisce meno movimento vede lo stato finale, non un blocco fermo ── */
@media(prefers-reduced-motion:reduce){
  .lv-spia,.lv-passo.attivo .lv-bollo,.lv-card.lv-entra,.lv-card.lv-esce{animation:none!important}
  .lv-card,.lv-passo,.lv-riemp,.lv-esito{transition:none!important}
  .lv-passo{opacity:1;transform:none}
  .lv-esito{opacity:1;transform:none}
}

/* La frase-catena: chiude la sezione mostrando il collegamento invece di
   elencarlo. La richiesta e' in evidenza perche' e' la cosa da ricordare. */
.rt-catena{max-width:640px;margin:24px auto 0;padding:0 16px;text-align:center;
           font-size:15px;line-height:1.7;color:var(--ink-2)}
.rt-catena em{display:inline;font-style:normal;font-weight:700;color:var(--ink-0);
              background:linear-gradient(180deg,transparent 62%,rgba(124,58,237,.18) 62%);
              padding:0 2px;border-radius:2px}
@media(max-width:560px){ .rt-catena{font-size:14.5px} }

/* ── modulo social: i post da X ──────────────────────────────────────────────
   Caricamento AL TOCCO, non automatico. Non e' una scelta di prestazioni: il
   banner dei cookie della vetrina dichiara «nessuna profilazione», e il widget
   ufficiale di X installa cookie di terze parti appena viene caricato. Finche'
   nessuno tocca, verso X non parte una sola richiesta. Stesso schema gia' usato
   per il video di YouTube nella sezione prodotti. */
.sx-wrap{max-width:720px;margin:26px auto 0;padding:0 16px}
.sx-card{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-lg);
         overflow:hidden;box-shadow:0 1px 2px rgba(10,12,29,.04)}
.sx-testa{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.sx-avatar{width:42px;height:42px;border-radius:50%;flex:none;background:var(--bg-2);object-fit:cover}
.sx-nome{font-weight:700;font-size:15px;color:var(--ink-0);display:flex;align-items:center;gap:5px}
.sx-tag{font-size:13px;color:var(--ink-2)}
.sx-x{width:19px;height:19px;fill:var(--ink-0);flex:none;margin-left:auto}
.sx-corpo{padding:18px;text-align:center}
.sx-corpo p{font-size:13.5px;color:var(--ink-2);line-height:1.65;margin:0 0 14px}
.sx-btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;
        background:var(--grad);color:#fff;font:650 14px/1 inherit;padding:11px 20px;border-radius:999px;
        transition:transform .3s var(--ease),filter .3s var(--ease)}
.sx-btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.sx-privacy{display:block;margin-top:11px;font-size:11.5px;color:var(--ink-2);opacity:.85}
.sx-vai{display:inline-flex;align-items:center;min-height:34px;margin-top:12px;font-size:13px;color:var(--c2);font-weight:600;text-decoration:none}
.sx-vai:hover{text-decoration:underline}
.sx-frame{min-height:420px}

/* ── I NOSTRI PROFILI, E COSA CI ABBIAMO PUBBLICATO DAVVERO ──────────────────
   Richiesta del proprietario, 22/09/2026: «nella home inserisci l'area social dove
   rimandi alle pagine, e se possibile che ci sia l'anteprima con i contenuti».
   ⭐ L'anteprima NON viene dai social: viene dal nostro registro. Incorporare i
   widget di X, Instagram e TikTok vorrebbe dire tre script di terzi e altrettanti
   cookie, su una pagina che dichiara «nessuna profilazione». Qui i post sono i
   nostri, serviti da noi: verso quelle piattaforme non parte una sola richiesta
   finche' non e' la persona a toccare un profilo. */
.soc-wrap{max-width:1040px;margin:30px auto 0;padding:0 16px}
.soc-riga{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:22px}
.soc-b{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:10px 16px;
       border:1px solid var(--line);border-radius:999px;background:var(--bg-1);
       text-decoration:none;color:var(--ink-0);font:650 14px/1 inherit;
       transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease)}
.soc-b:hover{transform:translateY(-2px);border-color:var(--c2);box-shadow:0 6px 18px rgba(10,12,29,.08)}
.soc-b svg{width:18px;height:18px;flex:none}
.soc-b i{font-style:normal;color:var(--ink-2);font-weight:500;font-size:13px}
.soc-post{display:grid;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));gap:14px}
.soc-c{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-lg);padding:15px 16px;
       display:flex;flex-direction:column;gap:9px}
.soc-c header{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2)}
.soc-c header svg{width:15px;height:15px;flex:none}
.soc-c p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-1)}
.soc-nota{margin:16px auto 0;max-width:640px;text-align:center;font-size:12px;color:var(--ink-2);line-height:1.6}
@media(max-width:560px){.soc-post{grid-template-columns:1fr}}