/* ==========================================================================
   Net In Box — Páginas legais (privacidade.html e termos.html)

   Um arquivo só para as duas: elas têm exatamente a mesma moldura (abertura
   escura + índice fixo + texto corrido) e só muda o conteúdo. Usa os tokens
   de style.css (--nb-*) e o mesmo ritmo de abertura de investimento.html.
   ========================================================================== */

/* O Bootstrap liga `scroll-behavior: smooth` no :root. O site não usa isso: nas
   páginas com Lenis o style.css já devolve `auto !important`, e a suavidade dos
   links âncora vem do scrollTo do main.js. Aqui, sem Lenis, devolvemos `auto`
   pelo mesmo motivo — para o smooth nativo não competir com o do main.js e para
   quem abre a página com #âncora cair direto na seção. */
:root { scroll-behavior: auto; }

/* Abertura ------------------------------------------------------------------ */
.lg-topo {
  padding: 150px 0 68px;
  background: linear-gradient(135deg, var(--nb-graphite-dark), var(--nb-graphite-2));
  color: var(--nb-white);
  text-align: center;
}
.lg-tag {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 122, 26, .16);
  border: 1px solid rgba(255, 122, 26, .38);
  color: #ffb37a;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.lg-topo h1 {
  margin: 18px 0 14px;
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
  font-weight: 800;
  line-height: 1.14;
}
.lg-topo h1 strong { color: var(--nb-orange); font-weight: 800; }
.lg-sub {
  max-width: 640px;
  margin: 0 auto;
  color: rgba(255, 255, 255, .78);
  font-size: 1.02rem;
  line-height: 1.7;
}
.lg-data {
  display: inline-block;
  margin-top: 22px;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .7);
  font-size: .82rem;
  font-weight: 600;
}

/* Corpo: índice + texto ------------------------------------------------------ */
.lg-corpo { padding: 70px 0 100px; background: var(--nb-white); }
.lg-grade {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 58px;
  align-items: start;
}

/* Índice. Sticky no desktop; no mobile vira uma caixa comum antes do texto. */
.lg-indice {
  position: sticky;
  top: 108px;
  padding: 22px 20px;
  background: var(--nb-light);
  border-radius: var(--nb-radius);
}
.lg-indice h2 {
  margin-bottom: 14px;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--nb-gray);
}
.lg-indice ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: lg;
}
.lg-indice li { counter-increment: lg; }
.lg-indice a {
  display: block;
  padding: 6px 0;
  color: var(--nb-graphite);
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.45;
}
.lg-indice a::before {
  content: counter(lg) ".";
  margin-right: 7px;
  color: var(--nb-gray);
  font-weight: 700;
}
.lg-indice a:hover { color: var(--nb-orange); }

/* Texto --------------------------------------------------------------------- */
.lg-texto { max-width: 760px; counter-reset: sec; }
.lg-texto section { scroll-margin-top: 108px; }
.lg-texto section + section { margin-top: 52px; }
.lg-texto h2 {
  counter-increment: sec;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(35, 37, 43, .1);
  font-size: 1.38rem;
}
.lg-texto h2::before {
  content: counter(sec);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-right: 12px;
  border-radius: 8px;
  background: rgba(255, 122, 26, .12);
  color: var(--nb-orange);
  font-size: .88rem;
  font-weight: 800;
  vertical-align: 3px;
}
.lg-texto h3 {
  margin: 30px 0 10px;
  font-size: 1.02rem;
  font-weight: 800;
}
.lg-texto p,
.lg-texto li { color: #4a4e57; font-size: .97rem; line-height: 1.78; }
.lg-texto p { margin-bottom: 16px; }
.lg-texto ul { margin: 0 0 16px; padding-left: 20px; }
.lg-texto li { margin-bottom: 8px; }
.lg-texto li::marker { color: var(--nb-orange); }
.lg-texto strong { color: var(--nb-graphite); font-weight: 700; }
.lg-texto a { font-weight: 600; }

/* Tabela de dados x finalidade x base legal. Rola sozinha no celular. */
.lg-tabela-wrap {
  margin: 0 0 18px;
  overflow-x: auto;
  border: 1px solid rgba(35, 37, 43, .1);
  border-radius: var(--nb-radius);
}
.lg-tabela {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: .9rem;
}
.lg-tabela th,
.lg-tabela td {
  padding: 13px 16px;
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
}
.lg-tabela thead th {
  background: var(--nb-light);
  color: var(--nb-graphite);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.lg-tabela tbody tr + tr th,
.lg-tabela tbody tr + tr td { border-top: 1px solid rgba(35, 37, 43, .09); }
.lg-tabela tbody th { width: 34%; color: var(--nb-graphite); font-weight: 700; }
.lg-tabela tbody td { color: #4a4e57; }

/* Caixa de destaque para o que contraria a expectativa de quem lê. */
.lg-destaque {
  margin: 24px 0;
  padding: 20px 24px;
  background: var(--nb-light);
  border-left: 3px solid var(--nb-orange);
  border-radius: 0 var(--nb-radius) var(--nb-radius) 0;
}
.lg-destaque :last-child { margin-bottom: 0; }
.lg-destaque h3 { margin-top: 0; }

/* Cartão de contato do encarregado ------------------------------------------ */
.lg-contato {
  margin-top: 30px;
  padding: 28px 30px;
  background: var(--nb-graphite);
  border-radius: var(--nb-radius);
  color: var(--nb-white);
}
.lg-contato h3 { margin: 0 0 8px; color: var(--nb-white); font-size: 1.06rem; }
.lg-contato p {
  margin-bottom: 18px;
  color: rgba(255, 255, 255, .74);
  font-size: .94rem;
}
.lg-contato-linhas {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}
.lg-contato-linhas li {
  display: flex;
  gap: 10px;
  margin-bottom: 7px;
  color: rgba(255, 255, 255, .84);
  font-size: .93rem;
}
.lg-contato-linhas svg {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 4px;
  color: var(--nb-orange);
}
.lg-contato a { color: #ffb37a; }
.lg-contato a:hover { color: var(--nb-orange); }

/* Responsivo ---------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .lg-grade { grid-template-columns: 1fr; gap: 34px; }
  .lg-indice { position: static; }
}
@media (max-width: 575.98px) {
  .lg-topo { padding: 128px 0 54px; }
  .lg-corpo { padding: 50px 0 76px; }
  .lg-texto section + section { margin-top: 42px; }
  .lg-contato { padding: 24px 22px; }
}