/* «Il grappolo della rete» in 3D */
.g3{position:relative;color:#442413}
.g3-scena{position:relative;border-radius:32px;overflow:hidden;
  background:radial-gradient(70% 60% at 50% 42%,#FFF9EA 0%,#F6EBD3 55%,#EADBBE 100%)}
/* la carta del territorio resta ferma dietro il grappolo, in trasparenza */
.g3-carta{position:absolute;inset:-2%;pointer-events:none;
  -webkit-mask-image:radial-gradient(94% 90% at 50% 50%,#000 66%,rgba(0,0,0,.6) 86%,transparent 100%);mask-image:radial-gradient(94% 90% at 50% 50%,#000 66%,rgba(0,0,0,.6) 86%,transparent 100%)}
.g3-carta svg{width:100%;height:100%;display:block}
/* curve e fiumi restano in filigrana; i nomi dei luoghi si leggono */
.g3-terra .ct-g{opacity:.22}
.g3-terra .fiume-g{opacity:.3}
.g3-terra .pins-g,.g3-terra .luoghi-g{opacity:.46}
.g3-terra .ct{fill:none;stroke:#442413;stroke-width:.9;vector-effect:non-scaling-stroke}
.g3-terra .ct.mi{stroke-opacity:.4}
.g3-terra .ct.ma{stroke-opacity:.8;stroke-width:1.3}
.g3-terra .fiume{fill:none;stroke:#4B5D23;stroke-opacity:.7;stroke-width:2.2;vector-effect:non-scaling-stroke}
.g3-terra .pin-halo{display:none}
.g3-terra .pin-dot{fill:#4B5D23;stroke:#FCF6E1;stroke-width:2.5;vector-effect:non-scaling-stroke}
.g3-terra .pin-lbl{fill:#442413;font:500 20px/1 var(--fs,Georgia,serif);paint-order:stroke;stroke:#FCF6E1;stroke-width:5px;stroke-linejoin:round}
.g3-terra .luogo-mk{fill:none;stroke:#7C2F4B;stroke-width:2.5;vector-effect:non-scaling-stroke}
.g3-terra .luogo-lbl{fill:#7C2F4B;font:italic 500 18px/1 var(--fs,Georgia,serif);paint-order:stroke;stroke:#FCF6E1;stroke-width:4px;stroke-linejoin:round}
.g3-canvas{position:relative;display:block;width:100%;height:min(88svh,880px);cursor:grab}
.g3-canvas:active{cursor:grabbing}
@media (max-width:760px){.g3-canvas{height:min(92svh,720px)}}

/* suggerimento iniziale */
.g3-hint{position:absolute;left:50%;top:18px;transform:translateX(-50%);display:flex;align-items:center;gap:.7rem;white-space:nowrap;
  padding:.6rem 1rem .6rem .7rem;border-radius:40px;background:rgba(252,246,225,.92);border:1px solid rgba(68,36,19,.14);
  font:600 12.5px/1 var(--fj,system-ui,sans-serif);box-shadow:0 14px 30px -18px rgba(68,36,19,.5);animation:g3Entra .6s cubic-bezier(.16,1,.3,1)}
.g3-hint i{width:28px;height:28px;border-radius:50%;background:#4B5D23;position:relative;flex:none}
.g3-hint i::before{content:"";position:absolute;inset:8px;border:2px solid #ADC136;border-radius:50%;border-right-color:transparent;animation:g3Gira 1.6s linear infinite}
@keyframes g3Gira{to{transform:rotate(360deg)}}
@keyframes g3Entra{from{opacity:0;transform:translate(-50%,-8px)}}
@media (max-width:760px){.g3-hint{white-space:normal;width:calc(100% - 32px);font-size:12px}}

/* comandi */
.g3-ctrl{position:absolute;right:16px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.g3-b{font:600 12.5px/1 var(--fj,system-ui,sans-serif);letter-spacing:.02em;color:#442413;background:rgba(252,246,225,.94);border:1px solid rgba(68,36,19,.18);
  border-radius:40px;padding:.65rem 1rem;cursor:pointer;transition:background .25s,color .25s,transform .25s;box-shadow:0 10px 24px -16px rgba(68,36,19,.55)}
.g3-b:hover{background:#4B5D23;color:#FCF6E1}
.g3-b:focus-visible{outline:2px solid #4B5D23;outline-offset:2px}
.g3-tondo{width:42px;height:42px;padding:0;font-size:20px;display:grid;place-items:center}
.g3-b[aria-pressed="true"]{background:#4B5D23;color:#FCF6E1}
.g3-esplora{background:#442413;color:#FCF6E1}
@media (max-width:760px){
  .g3-ctrl{top:auto;bottom:62px;right:12px;transform:none;flex-direction:row;flex-wrap:wrap;justify-content:flex-end;max-width:calc(100% - 24px)}
  .g3-b{padding:.6rem .85rem;font-size:12px}
  .g3-tondo{width:40px;height:40px}
}
.g3.esplorando .g3-scena{box-shadow:inset 0 0 0 3px #ADC136}

/* scheda */
.g3-card{position:absolute;z-index:5;transform:translate(-50%,calc(-100% - 18px));min-width:220px;max-width:280px;pointer-events:none;
  padding:1rem 1.1rem;border-radius:18px;text-align:center;background:#FCF6E1;border:1px solid rgba(68,36,19,.16);box-shadow:0 26px 50px -24px rgba(40,20,10,.55)}
.g3-card-l{display:grid;place-items:center;min-height:52px;margin-bottom:.5rem}
.g3-card-l img{max-width:150px;max-height:52px;object-fit:contain}
.g3-card-l i{font:500 1.6rem/1 var(--fs,Georgia,serif);font-style:normal;color:#7C2F4B}
.g3-card b{display:block;font:400 1.3rem/1.1 var(--fs,Georgia,serif)}
.g3-card small{display:block;margin-top:.35rem;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#4B5D23}

/* barra in basso */
.g3-bar{position:absolute;left:16px;right:16px;bottom:14px;display:flex;justify-content:space-between;align-items:center;gap:1rem;pointer-events:none}
.g3-bar>*{pointer-events:auto}
.g3-conta{font-size:14px;opacity:.85}
.g3-conta b{font:500 1.9rem/1 var(--fs,Georgia,serif);font-variant-numeric:tabular-nums;margin-right:.2rem}
.g3-rivedi{opacity:0;pointer-events:none;transition:opacity .5s}
.g3.cresciuto .g3-rivedi{opacity:1;pointer-events:auto}

/* elenco delle aziende: ogni nome porta al suo chicco */
.g3-lista{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:18px 0 0;padding:0}
.g3-lista button{font:600 12.5px/1 var(--fj,system-ui,sans-serif);color:#442413;background:transparent;border:1px solid rgba(68,36,19,.2);border-radius:40px;padding:.55rem .85rem;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.g3-lista button:hover,.g3-lista button:focus-visible{background:#442413;color:#FCF6E1;border-color:#442413}

@media (prefers-reduced-motion:reduce){.g3-hint,.g3-hint i::before{animation:none}}

/* menu dell'azienda: si apre al clic sul chicco e resta cliccabile */
.g3-card.aperta{pointer-events:auto}
.g3-card-x{position:absolute;right:8px;top:8px;width:28px;height:28px;border-radius:50%;border:1px solid rgba(68,36,19,.18);background:#FFF9EA;
  color:#442413;font:400 17px/1 system-ui;cursor:pointer;display:none;place-items:center}
.g3-card.aperta .g3-card-x{display:grid}
.g3-card-m{margin-top:.75rem;padding-top:.75rem;border-top:1px solid rgba(68,36,19,.16)}
.g3-card .sch-t{font:400 12.5px/1.55 var(--fj,system-ui,sans-serif);color:#5A4636;text-align:left}
.g3-card .sch-b{display:inline-flex;align-items:center;gap:.4rem;margin-top:.7rem;padding:.55rem .9rem;border-radius:40px;background:#4B5D23;color:#FCF6E1;
  font:600 11px/1 var(--fj,system-ui,sans-serif);letter-spacing:.06em;text-decoration:none;transition:background .25s}
.g3-card .sch-b:hover{background:#442413}
.g3-card .sch-no{margin-top:.55rem;font:500 10.5px/1.3 var(--fj,system-ui,sans-serif);color:#9A8272}