/* ══════════════════════════════════════════════════════════════
   Impronta — Guida: "Come leggere il tuo BodyGraph"
   Usa container/home-section (app.css) + classi .bgg-* qui sotto.
   ══════════════════════════════════════════════════════════════ */

.bgg-hero{ padding:80px 0 44px; text-align:center; position:relative; overflow:hidden; }
.bgg-hero__glow{ position:absolute; inset:0; background:radial-gradient(ellipse at 50% -12%, rgba(181,144,58,.10), transparent 62%); pointer-events:none; }
.bgg-eyebrow{ font-family:'Cormorant Garamond',serif; font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); opacity:.7; margin-bottom:16px; }
.bgg-title{ font-family:'Cormorant Garamond',Georgia,serif; font-size:clamp(32px,5vw,52px); font-weight:400; line-height:1.12; color:var(--ink); margin:0 0 16px; }
.bgg-lead{ font-size:16.5px; line-height:1.8; color:var(--ink60); font-weight:300; max-width:560px; margin:0 auto; }
.bgg-divider{ max-width:340px; margin:0 auto; height:1px; background:linear-gradient(90deg,transparent,rgba(181,144,58,.25),transparent); }
.bgg-h2{ font-family:'Cormorant Garamond',serif; font-size:clamp(23px,2.8vw,31px); font-weight:400; color:var(--ink); line-height:1.25; margin:0 0 8px; text-align:center; }
.bgg-sub{ font-size:14.5px; line-height:1.7; color:var(--ink60); text-align:center; max-width:580px; margin:0 auto 28px; }

.bgg-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.bgg-card{ background:var(--card); border:1px solid var(--border); border-radius:var(--rL); overflow:hidden; }
.bgg-swatch{ height:64px; display:flex; align-items:flex-end; padding:10px 16px; }
.bgg-swatch code{ font-family:var(--mono); font-size:10px; padding:2px 7px; border-radius:6px; background:rgba(0,0,0,.35); color:#fff; opacity:.85; }
.bgg-card__b{ padding:18px 20px 20px; }
.bgg-card__t{ font-family:'Cormorant Garamond',serif; font-size:21px; color:var(--ink); margin:0 0 8px; }
.bgg-card__x{ font-size:13.5px; line-height:1.65; color:var(--ink60); }

.bgg-note{ margin-top:14px; display:flex; align-items:center; gap:12px; padding:13px 16px; border:1px solid var(--border); border-radius:12px; background:var(--ink05); }
.bgg-note__x{ font-size:13.5px; line-height:1.55; color:var(--ink70); }
.bgg-note__x strong{ color:var(--ink); font-weight:600; }
.bgg-dot{ width:18px; height:18px; border-radius:5px; flex-shrink:0; }

/* centri */
.bgg-center{ display:flex; gap:16px; align-items:flex-start; }
.bgg-shape{ width:54px; height:54px; border-radius:11px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.bgg-shape--def{ background:rgba(90,128,96,.18); border:1.5px solid rgba(90,128,96,.6); }
.bgg-shape--def b{ width:16px; height:16px; border-radius:4px; background:#5a8060; }
.bgg-shape--undef{ background:transparent; border:1.5px dashed var(--ink30); }

/* gate / canale mini */
.bgg-channel{ display:flex; align-items:center; justify-content:center; margin:6px 0 4px; }
.bgg-gate{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:11px; color:#13110e; font-weight:700; }
.bgg-line{ width:80px; height:4px; background:linear-gradient(90deg,#e8dfc8,#a85c38); }

/* tipi */
.bgg-types{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:8px; }
.bgg-type{ display:flex; flex-direction:column; align-items:center; gap:8px; width:120px; }
.bgg-type__dot{ width:34px; height:34px; border-radius:50%; box-shadow:0 0 14px -2px currentColor; }
.bgg-type__n{ font-size:12px; color:var(--ink70); text-align:center; line-height:1.3; }

/* sezione con bodygraph d'esempio affiancato */
.bgg-split{ display:grid; grid-template-columns:280px 1fr; gap:32px; align-items:center; margin-top:8px; }
.bgg-split__svg svg{ width:100%; height:auto; max-height:430px; display:block; }
.bgg-split .bgg-sub{ text-align:left; margin:0 0 16px; max-width:none; }
.bgg-split .bgg-2{ grid-template-columns:1fr; gap:14px; margin-top:0; }

@media (max-width:768px){
  .bgg-2{ grid-template-columns:1fr; }
  .bgg-split{ grid-template-columns:1fr; gap:18px; }
  .bgg-split__svg{ max-width:210px; margin:0 auto; }
}

/* ── Card "featured" nell'hub della guida (/learn) ─────────────── */

@media (max-width:768px){
  
  
}

/* centri definiti negli esempi: verde/salvia come nel grafico reale, reso più visibile */
.bgg .hd-center.def-both path, .bgg .hd-center.def-p path, .bgg .hd-center.def-d path{ fill:rgba(90,128,96,.22); stroke:rgba(90,128,96,.7); }
.bgg .hd-center.def-both .clbl, .bgg .hd-center.def-p .clbl, .bgg .hd-center.def-d .clbl{ fill:rgba(90,128,96,.7); }

/* sospesi: pulsazione viola attorno al gate (canale tratteggiato = classe hs, già animata) */
.bgg-hang-halo{ fill:none; stroke:#7858b8; stroke-width:9; opacity:0; animation:bggHangPulse 2.4s ease-out infinite; }
.bgg-hang-halo--2{ animation-delay:1.2s; }
@keyframes bggHangPulse{ 0%{ r:12px; opacity:.65 } 100%{ r:44px; opacity:0 } }

/* legenda colore sospeso */
.bgg-dot--hang{ background:#9060d8; }

/* sospesi: rende il canale tratteggiato viola un po' più marcato (l'animazione di opacità resta) */
.bgg .hd-ch.hs{ stroke:rgba(150,110,225,.85) !important; stroke-width:3.4 !important; }