/* ═══════════════════════════════════════════════════════════════════════════
 * arke-legal.css — as duas páginas jurídicas: /site/politica-de-privacidade
 * e /site/termos-de-uso. Uma folha só, porque são o mesmo documento em forma.
 *
 * A TESE: documento jurídico de empresa de tecnologia costuma ser escrito para
 * proteger a empresa DO leitor — corpo 11px, cinza sobre cinza, parágrafo de
 * quinze linhas. Aqui é o contrário: a página é feita para ser LIDA. Medida de
 * linha curta, corpo grande, hierarquia clara, índice fixo ao lado e as notas
 * de honestidade destacadas em vez de escondidas.
 *
 * É a página menos "vendedora" do site e, por isso mesmo, a que mais diz sobre
 * a casa. Se o texto some no rodapé em cinza 10px, a mensagem é "não leia".
 *
 * Reusa arke-home.css (.ark-sec, .ark-eyebrow, .ark-lead, .ark-rv). Prefixo
 * `leg-` para o que é próprio.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── HERO ────────────────────────────────────────────────────────────────── */
.leg-hero {
  position: relative; background: #08080A;
  padding-block: clamp(118px, 12vw, 170px) clamp(30px, 3.4vw, 48px);
}
.leg-hero__t {
  margin: clamp(16px, 1.8vw, 24px) 0 0;
  font-size: clamp(34px, 4.4vw, 62px); font-weight: 800;
  line-height: 1.02; letter-spacing: -.038em; color: #F2EFE9;
}
.leg-vigencia {
  margin: clamp(20px, 2.2vw, 28px) 0 0;
  font-family: var(--font-mono, monospace); font-size: 10.5px;
  letter-spacing: .13em; text-transform: uppercase; color: #5F5A54;
}

/* ── CORPO ───────────────────────────────────────────────────────────────── */
.leg-corpo { padding-block: clamp(46px, 5vw, 76px) clamp(60px, 6.4vw, 100px); }

.leg-bloco {
  padding-top: clamp(30px, 3.2vw, 44px); margin-top: clamp(30px, 3.2vw, 44px);
  border-top: 1px solid rgba(245,242,237,.10);
  scroll-margin-top: 110px;             /* o índice não pode jogar o título sob o header */
}
.leg-bloco:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.leg-bloco h2 {
  margin: 0 0 clamp(16px, 1.8vw, 24px);
  font-size: clamp(22px, 2.3vw, 31px); font-weight: 700;
  letter-spacing: -.028em; line-height: 1.15; color: #F2EFE9;
}
.leg-bloco h3 {
  margin: clamp(24px, 2.6vw, 34px) 0 10px;
  font-size: clamp(16px, 1.5vw, 19px); font-weight: 650;
  letter-spacing: -.01em; color: #D8D3CB;
}
/* medida de linha curta: 68ch é o limite do que se lê sem cansar */
.leg-bloco p {
  margin: 0 0 15px; max-width: 68ch;
  font-size: 15.5px; line-height: 1.78; color: #A8A39C;
}
.leg-bloco p b, .leg-bloco li b { color: #E6E2DA; font-weight: 650; }
.leg-bloco a { color: var(--accent, #C4973A); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.leg-bloco a:hover { color: #D4A94A; }
.leg-bloco code {
  font-family: var(--font-mono, monospace); font-size: .86em;
  padding: 1px 5px; border-radius: 3px;
  background: rgba(245,242,237,.06); color: #C9C4BC;
}

/* ── LISTAS ──────────────────────────────────────────────────────────────── */
.leg-lista { margin: 0 0 18px; padding: 0; list-style: none; max-width: 68ch; }
.leg-lista li {
  position: relative; padding-left: 22px; margin-bottom: 10px;
  font-size: 15.5px; line-height: 1.7; color: #A8A39C;
}
.leg-lista li::before {
  content: ""; position: absolute; left: 2px; top: .72em;
  width: 9px; height: 1px; background: rgba(var(--accent-rgb, 196,151,58), .7);
}
/* lista de definição: termo em cima, explicação embaixo */
.leg-lista--def li { padding-left: 22px; margin-bottom: 15px; }
.leg-lista--def b { display: block; font-size: 15.5px; color: #E6E2DA; }
.leg-lista--def span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.6; color: #8B8680; }
/* direitos: marcador de "garantido", não de tópico */
.leg-lista--dir li::before {
  content: ""; left: 0; top: .55em; width: 10px; height: 5px;
  background: none; border-left: 1.5px solid var(--accent, #C4973A);
  border-bottom: 1.5px solid var(--accent, #C4973A);
  transform: rotate(-45deg);
}

/* ── TABELA FINALIDADE × BASE LEGAL ─────────────────────────────────────── */
.leg-tabela {
  display: grid; gap: 1px; margin: 0 0 18px;
  background: rgba(245,242,237,.09); border: 1px solid rgba(245,242,237,.09);
}
.leg-tabela > [role="row"] { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1px; background: rgba(245,242,237,.09); }
.leg-tabela [role="cell"], .leg-tabela [role="columnheader"] {
  padding: 14px 16px; background: #0A0A0C;
  font-size: 14px; line-height: 1.55; color: #A8A39C;
}
.leg-tabela [role="columnheader"] {
  font-family: var(--font-mono, monospace); font-size: 9.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent, #C4973A);
}
@media (max-width: 575px) {
  .leg-tabela > [role="row"] { grid-template-columns: 1fr; }
  .leg-tabela [role="columnheader"]:nth-child(2) { display: none; }
}

/* ── NOTA DE HONESTIDADE ─────────────────────────────────────────────────── */
/* O que a maioria esconde é justamente o que aqui ganha destaque: o que ainda
   não existe, o que não prometemos, o que está pendente. */
.leg-nota {
  margin: clamp(18px, 2vw, 26px) 0 0 !important; padding: 14px 18px;
  border-left: 2px solid rgba(var(--accent-rgb, 196,151,58), .55);
  background: rgba(var(--accent-rgb, 196,151,58), .045);
  font-size: 14px !important; line-height: 1.7 !important; color: #C9C4BC !important;
}

/* ── FECHO ───────────────────────────────────────────────────────────────── */
.leg-fecho {
  margin-top: clamp(46px, 5vw, 70px); padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid rgba(var(--accent-rgb, 196,151,58), .34);
}
.leg-fecho p {
  margin: 0 0 18px;
  font-family: 'Playfair Display', Georgia, serif; font-style: italic;
  font-size: clamp(18px, 1.9vw, 24px); line-height: 1.35; color: #F2EFE9;
}
.leg-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 24px; border-radius: 999px;
  background: var(--accent, #C4973A); border: 1px solid var(--accent, #C4973A);
  font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #0A0A0A;
  text-decoration: none; transition: background .3s ease, border-color .3s ease;
}
.leg-btn:hover { background: #D4A94A; border-color: #D4A94A; color: #0A0A0A; }

/* ── ÍNDICE LATERAL ──────────────────────────────────────────────────────── */
.leg-indice { position: sticky; top: 110px; }
@media (max-width: 991px) { .leg-indice { position: static; margin-bottom: 46px; } }
.leg-indice__k {
  display: block; margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(245,242,237,.12);
  font-family: var(--font-mono, monospace); font-size: 9.5px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent, #C4973A);
}
.leg-indice ol { margin: 0; padding: 0; list-style: none; counter-reset: sec; }
.leg-indice li { counter-increment: sec; }
.leg-indice a {
  display: flex; gap: 9px; padding: 7px 0;
  font-size: 13.5px; line-height: 1.45; color: #8B8680;
  text-decoration: none; transition: color .22s ease;
}
.leg-indice a::before {
  content: counter(sec, decimal-leading-zero); flex: 0 0 auto;
  font-family: var(--font-mono, monospace); font-size: 9.5px; color: #4A4640; padding-top: .28em;
}
.leg-indice a:hover { color: var(--accent, #C4973A); }
.leg-indice__par {
  margin: clamp(24px, 2.6vw, 34px) 0 8px; padding-top: 14px;
  border-top: 1px solid rgba(245,242,237,.10);
  font-family: var(--font-mono, monospace); font-size: 9.5px;
  letter-spacing: .16em; text-transform: uppercase; color: #5F5A54;
}
.leg-indice__link {
  font-family: var(--font-mono, monospace); font-size: 11px;
  letter-spacing: .1em; color: var(--accent, #C4973A); text-decoration: none;
  border-bottom: 1px solid rgba(var(--accent-rgb, 196,151,58), .4); padding-bottom: 2px;
}
.leg-indice__link:hover { border-color: var(--accent, #C4973A); }

@media (prefers-reduced-motion: reduce) {
  .leg-indice a, .leg-btn { transition: none; }
}