/* =============================================================================
   LOBATO MACHADO — política de privacidade
   Complementa style.css. Só o que é exclusivo desta tela.

   01. Topo
   02. Layout (índice + conteúdo)
   03. Índice (TOC)
   04. Conteúdo (prose)
   05. Rodapé da página (atualização/contato)
   06. Responsivo
   ========================================================================== */

/* ─────────────────────────────────────────────────────────── 01. TOPO */
.pagina-privacidade { background: var(--surface); }
.privacidade { padding-top: var(--header-h); }

.privacidade__topo {
  background: var(--bordo);
  color: var(--ink);
  padding-block: clamp(2rem, 1.5rem + 3vw, 3.5rem);
}
.privacidade__topo .migalhas { color: var(--ink-50); margin-bottom: 1.25rem; }
.privacidade__topo .migalhas a { color: var(--vinho-detalhe); }

.privacidade__titulo {
  font-size: clamp(1.75rem, 1.3rem + 2.2vw, 2.75rem);
  max-width: 24ch; text-wrap: balance;
}
.privacidade__lede {
  margin-top: 1.15rem; max-width: 64ch;
  font-size: var(--fs-lede); color: var(--ink-70); line-height: 1.7;
}
.privacidade__meta {
  margin-top: 1.25rem;
  font-size: .85rem; color: var(--ink-50);
}

/* ─────────────────────────────────────────────────── 02. LAYOUT */
.privacidade__layout {
  display: grid; grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  align-items: start;
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}

/* ─────────────────────────────────────────────────── 03. ÍNDICE */
.privacidade__indice {
  position: sticky; top: calc(var(--header-h) + 24px);
}
.indice__titulo {
  font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-50); margin-bottom: .9rem;
}
.indice__lista { display: flex; flex-direction: column; gap: .1rem; }
.indice__lista a {
  display: block; padding: .45rem .7rem; border-radius: var(--r-sm);
  font-size: .88rem; color: var(--ink-70); font-weight: 600;
  border-left: 2px solid transparent;
}
.indice__lista a:hover { color: var(--bordo-600); background: var(--surface-alt); }

/* ─────────────────────────────────────────────────── 04. CONTEÚDO */
.privacidade__conteudo { max-width: 74ch; color: var(--ink-70); }

.privacidade__conteudo section { scroll-margin-top: calc(var(--header-h) + 16px); }
.privacidade__conteudo section + section {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  padding-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  border-top: 1px solid var(--line);
}

.privacidade__conteudo h2 {
  font-size: var(--fs-h3); color: var(--vinho-detalhe);
  display: flex; align-items: baseline; gap: .6rem;
}
.privacidade__conteudo h2 .num { color: var(--bordo-600); }

.privacidade__conteudo h3 {
  font-size: 1rem; color: var(--ink);
  margin-top: 1.4rem; margin-bottom: .5rem;
}

.privacidade__conteudo p { margin-top: .9rem; line-height: 1.75; }
.privacidade__conteudo p:first-of-type { margin-top: 1rem; }

.privacidade__conteudo ul,
.privacidade__conteudo ol {
  margin-top: .9rem; padding-left: 1.2rem;
  display: flex; flex-direction: column; gap: .55rem;
}
.privacidade__conteudo ul { list-style: disc; }
.privacidade__conteudo ol { list-style: decimal; }
.privacidade__conteudo li { line-height: 1.65; }
.privacidade__conteudo li strong { color: var(--ink); }

.privacidade__conteudo a { color: var(--bordo-600); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.privacidade__conteudo a:hover { color: var(--ink); }

.privacidade__conteudo table {
  margin-top: 1rem; width: 100%; border-collapse: collapse; font-size: .92rem;
}
.privacidade__conteudo th,
.privacidade__conteudo td {
  text-align: left; padding: .6rem .75rem; border: 1px solid var(--line); vertical-align: top;
}
.privacidade__conteudo th { background: var(--surface-alt); color: var(--ink); font-weight: 800; }

/* Caixa de destaque para o canal de contato do encarregado */
.caixa-dpo {
  margin-top: 1.5rem; padding: 1.25rem 1.4rem;
  background: var(--bordo-050); border: 1px solid var(--bordo-100); border-radius: var(--r);
}
.caixa-dpo h3 { margin-top: 0; }
.caixa-dpo p { margin-top: .4rem; }
.caixa-dpo p:first-of-type { margin-top: .4rem; }

/* ────────────────────────────────────────────── 06. RESPONSIVO */
@media (max-width: 900px) {
  .privacidade__layout { grid-template-columns: 1fr; }
  .privacidade__indice { position: static; }
  .indice__lista { flex-direction: row; flex-wrap: wrap; gap: .4rem; }
  .indice__lista a { border: 1px solid var(--line); }
}