:root{
      --happy-gold:#C2A45C;
      --happy-black:#000000;

      --brand-2:#111827;
      --brand-3:#6b7280;

      --bg-soft:#f7f8fb;
      --border-soft:#e5e7eb;

      --shadow-soft: 0 10px 30px rgba(0,0,0,.06);
    }

    body{ color: var(--brand-2); }

    /* HEADER (preto + logo) */
    .happy-header{
      background: var(--happy-black);
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .happy-header .navbar-brand img{
      height: 42px;
      width: auto;
      display:block;
    }
    .happy-header .nav-link{
      color: rgba(255,255,255,.92);
      font-weight: 500;
    }
    .happy-header .nav-link:hover{
      color: var(--happy-gold);
    }
    .happy-header .navbar-toggler{
      border-color: rgba(255,255,255,.25);
    }
    .happy-header .navbar-toggler-icon{
      filter: invert(1);
    }

    /* HERO */
    .hero{
      background: linear-gradient(180deg, rgba(194,164,92,.10), rgba(255,255,255,0));
      border-bottom: 1px solid var(--border-soft);
    }

    /* BADGE */
    .badge-soft{
      background: rgba(194,164,92,.14);
      color: #6a5321;
      border: 1px solid rgba(194,164,92,.30);
    }

    /* TITLES (dourado) */
    h1, h2, h3, h4{ color: var(--brand-2); }
    .gold-title{ color: var(--happy-gold) !important; }

    /* TOC */
    .toc{
      border: 1px solid var(--border-soft);
      background: white;
      border-radius: 16px;
      padding: 16px;
      position: sticky;
      top: 88px;
      box-shadow: var(--shadow-soft);
    }
    .toc a{
      text-decoration: none;
      color: var(--brand-2);
      display: block;
      padding: 8px 10px;
      border-radius: 10px;
    }
    .toc a:hover{
      background: var(--bg-soft);
      color: var(--brand-2);
    }

    /* SECTION */
    .section{
      scroll-margin-top: 92px;
      padding-top: 6px;
    }

    /* KPI */
    .kpi{
      border: 1px solid var(--border-soft);
      border-radius: 16px;
      background: white;
      box-shadow: var(--shadow-soft);
    }
    .kpi .icon{
      width: 42px; height: 42px;
      display:flex; align-items:center; justify-content:center;
      border-radius: 12px;
      background: rgba(194,164,92,.16);
      color: #6a5321;
      font-weight: 800;
    }

    /* CARDS */
    .card-soft{
      border: 1px solid var(--border-soft);
      border-radius: 16px;
      box-shadow: var(--shadow-soft);
    }

    /* CALLOUT */
    .callout{
      background: var(--bg-soft);
      border: 1px solid var(--border-soft);
      border-radius: 18px;
      padding: 18px;
    }

    /* BUTTON (dourado) */
    .btn-brand{
      background: var(--happy-gold);
      border-color: var(--happy-gold);
      color: #000;
      font-weight: 700;
    }
    .btn-brand:hover{
      background: #b2954f;
      border-color: #b2954f;
      color:#000;
    }

    .muted{ color: var(--brand-3); }
    .divider{
      border-top: 1px dashed var(--border-soft);
      margin: 28px 0;
    }

    /* LISTAS com "bolinha dourada" */
    .happy-bullets{
      list-style: none;
      padding-left: 0;
      margin-bottom: 0;
    }
    .happy-bullets li{
      position: relative;
      padding-left: 22px;
      margin-bottom: 10px;
    }
    .happy-bullets li::before{
      content:"";
      width: 8px;
      height: 8px;
      background: var(--happy-gold);
      border-radius: 50%;
      position:absolute;
      left:0;
      top: 8px;
      box-shadow: 0 0 0 3px rgba(194,164,92,.18);
    }

    /* list-group mantendo o elemento, mas com bolinha dourada */
    .list-group.happy-lg .list-group-item{
      border: 0;
      border-top: 1px solid var(--border-soft);
      position: relative;
      padding-left: 42px;
    }
    .list-group.happy-lg .list-group-item:first-child{
      border-top: 0;
    }
    .list-group.happy-lg .list-group-item::before{
      content:"";
      width: 8px;
      height: 8px;
      background: var(--happy-gold);
      border-radius: 50%;
      position:absolute;
      left: 18px;
      top: 50%;
      transform: translateY(-50%);
      box-shadow: 0 0 0 3px rgba(194,164,92,.18);
    }

    /* Footer */
    footer{
      background: #fff;
    }
	
	
	
	
	
.topic-illustration{
  max-width: 640px;
  margin: 24px auto 14px;
  padding: 0;
}

.topic-illustration img{
  width: 100%;
  height: auto;
  display: block;

  /* “cara de card” leve */
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);

}

/* Melhor respiro no mobile */
@media (max-width: 480px){
  .topic-illustration{
    margin: 18px auto 12px;
    padding: 0 12px;
  }

  .topic-illustration img{
    border-radius: 14px;
  }
}