/* ═════════════════════════════════════════════════════════════════
   RIVIO — Páginas de documento

   Política de privacidade, e o que vier depois dela: termos de uso,
   política de cookies. É uma camada de TEXTO CORRIDO sobre a grade das
   páginas de case — 384 de rótulo, 800 de conteúdo —, porque é o eixo
   que dá unidade ao site e porque a coluna da esquerda tem uso aqui: é
   onde mora o índice.

   Um documento jurídico é lido de duas formas: de cabo a rabo, uma vez,
   por quem redige; e por SALTO, muitas vezes, por quem procura uma
   resposta específica — "vocês usam cookie?", "por quanto tempo
   guardam?". O índice preso serve a essa segunda leitura, que é a
   comum.
   ═════════════════════════════════════════════════════════════════ */

.legal__abre {
  padding-top: 152px;
  padding-bottom: 48px;
}

/* ── As datas ────────────────────────────────────────────────────
   Vigência e última atualização ficam JUNTO da abertura, e não no pé:
   elas são o que diz se o documento que se está lendo é o que vale. */
.legal__datas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 48px;
  margin-top: 40px;
}

.legal__datas dt {
  font-family: var(--font-label);
  font-weight: var(--tag-peso);
  font-size: 12px;
  line-height: 1;
  letter-spacing: var(--tag-track);
  text-transform: uppercase;
  color: var(--dark-05);
}

.legal__datas dd {
  margin: 6px 0 0;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.4;
  color: var(--dark-02);
}

/* ── O índice ────────────────────────────────────────────────────
   Preso ao topo enquanto o documento rola. O `top` de 120 desvia da
   barra de navegação, que é fixa. */
.legal__indice {
  position: sticky;
  top: 120px;
}

.legal__indice-tit {
  margin-bottom: 18px;
  font-family: var(--font-label);
  font-weight: var(--tag-peso);
  font-size: var(--tag-corpo);
  line-height: 1;
  letter-spacing: var(--tag-track);
  text-transform: uppercase;
  color: var(--dark-05);
}

.legal__indice ol {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: item;
}

.legal__indice li { counter-increment: item; }

/* GRADE, e não flex: com duas colunas fixas os números formam uma
   coluna e os títulos formam outra, alinhados de cima a baixo. Em flex
   cada linha se resolvia sozinha e a segunda coluna dançava.

   `baseline` alinha o número ao TEXTO, e não à caixa da linha: os dois
   têm corpo e entrelinha diferentes, e alinhar caixas deixava o número
   flutuando acima da palavra — foi o que o Jefferson viu. */
.legal__indice a {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: baseline;
  gap: 10px;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.4;
  color: var(--dark-03);
  text-decoration: none;
  transition: color 0.24s var(--ease-out-soft);
}

/* O número vem do contador, e não do texto: renumerar é mexer na
   ordem das linhas, não em nove strings. */
.legal__indice a::before {
  content: counter(item, decimal-leading-zero);
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  /* Tabular: "01" e "09" ocupam a mesma largura, e a coluna não
     estremece de uma linha para a outra. */
  font-variant-numeric: tabular-nums;
  color: var(--dark-05);
  transition: color 0.24s var(--ease-out-soft);
}

.legal__indice a:hover { color: var(--dark-01); }
.legal__indice a:hover::before { color: var(--blue); }

/* ── O botão do Aviso LGPD e o formulário do titular (2026-09-29) ───
   O "Exercer direito de titular" é a `cta-seta--escura` do site, com o
   respiro de um bloco acima e abaixo. O formulário é um iframe da
   BeCompliance (o do site oficial antigo): ocupa a coluna do texto, com
   altura para as duas abas sem rolagem própria na maioria das telas, na
   caixa do site e sem contorno. */
.legal__cta { margin-block: 8px; }

.legal__form iframe {
  display: block;
  width: 100%;
  /* 1040: o formulário da BeCompliance mede ~1020 com a aba "Nova
     Solicitação" aberta, até a nota "Política de Privacidade" do pé */
  height: 1040px;
  border: 0;
  border-radius: var(--r-caixa);
  background: #fff;
}

/* ── O corpo ─────────────────────────────────────────────────────── */

/* Link de texto: o da prosa dos artigos (`.artigo-prosa a`) — sublinhado
   azul que acende no hover. Faltava aqui (2026-09-29): o telefone, o
   e-mail e os documentos do Aviso LGPD saíam sem cara de link. O botão
   de seta (`.cta-seta`) fica de fora. */
.legal__corpo a:not(.cta-seta) {
  color: var(--dark-01);
  text-decoration: underline;
  text-decoration-color: rgba(102, 148, 255, 0.55);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.28s var(--ease-out-soft);
}

.legal__corpo a:not(.cta-seta):hover { text-decoration-color: var(--blue); }
.legal__corpo {
  display: flex;
  flex-direction: column;
  /* A distância PADRÃO entre blocos. Títulos pedem mais, e pedem
     acima; parágrafos irmãos pedem menos. Os dois casos estão logo
     abaixo, e é por isso que o `gap` aqui é o do parágrafo. */
  gap: 18px;
}

.legal__corpo h2 {
  margin-top: 46px;
  /* Meio degrau abaixo do h2 do site: aqui ele divide um documento, e
     não abre uma seção de página. */
  font-weight: 400;
  font-size: clamp(20px, 1.67vw, 24px);
  line-height: 1.3;
  letter-spacing: -0.008em;
  color: var(--dark-01);
  /* O alvo do salto não pode nascer debaixo da barra fixa. */
  scroll-margin-top: 108px;
}

.legal__corpo > h2:first-child { margin-top: 0; }

.legal__corpo h3 {
  margin-top: 22px;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  color: var(--dark-02);
  scroll-margin-top: 108px;
}

.legal__corpo p {
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: var(--dark-03);
  text-wrap: pretty;
}

.legal__corpo strong {
  font-weight: 500;
  color: var(--dark-02);
}

.legal__corpo ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* O marcador é o quadrado da tag, na mesma medida — o mesmo sinal que
   abre as seções do site. */
.legal__corpo ul li {
  position: relative;
  padding-left: 22px;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: var(--dark-03);
}

.legal__corpo ul li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: var(--dark-05);
  opacity: 0.6;
}

/* As listas ENUMERADAS da política oficial — as alíneas a) b) da
   origem dos dados e os incisos I–IV do compartilhamento. Mesmo corpo e
   recuo da lista de quadrado; o marcador é o próprio índice, na cor do
   quadrado, alinhado à esquerda do recuo. */
.legal__corpo ol {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: alinea;
}

.legal__corpo ol li {
  position: relative;
  padding-left: 34px;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: var(--dark-03);
  counter-increment: alinea;
}

.legal__corpo ol li::before {
  content: counter(alinea, lower-alpha) ')';
  position: absolute;
  left: 2px;
  top: 0;
  font-weight: 500;
  color: var(--dark-05);
}

.legal__corpo ol[type='I'] li::before {
  content: counter(alinea, upper-roman) ' –';
}

.legal__corpo code {
  padding: 2px 6px;
  border-radius: var(--r-chip);
  background: var(--light-01);
  font-family: var(--font-label);
  font-size: 0.86em;
  color: var(--dark-02);
}

/* O parágrafo que carrega a informação mais procurada da página —
   "vocês usam cookie?" — em caixa, para quem chega por salto achar
   sem ler o resto. */
.legal__destaque {
  padding: 20px 24px;
  border-radius: var(--r-caixa);
  background: var(--light-01);
}

/* Enquanto a Rivio não define o canal do encarregado, a lacuna fica
   VISÍVEL. Uma política que não diz para onde escrever não cumpre o
   art. 41, e esconder isso num comentário de código seria publicar um
   documento incompleto sem avisar ninguém. */
.legal__pendente {
  padding: 1px 8px;
  border-radius: var(--r-chip);
  background: rgba(255, 190, 120, 0.28);
  font-size: 0.92em;
  color: var(--dark-02);
}

/* ── As tabelas ──────────────────────────────────────────────────
   No largo, tabela. No estreito ela vira uma pilha de CARTÕES — quatro
   colunas de texto jurídico em 335px não existem, e rolar na
   horizontal para ler uma base legal é pior que não ter tabela. */
.legal__tabela {
  margin-top: 6px;
  border-radius: var(--r-caixa);
  background: var(--light-01);
  overflow-x: auto;
}

.legal__tabela:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.legal__tabela table {
  width: 100%;
  border-collapse: collapse;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  color: var(--dark-03);
}

.legal__tabela th,
.legal__tabela td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
}

.legal__tabela thead th {
  font-family: var(--font-label);
  font-weight: var(--tag-peso);
  font-size: 10px;
  line-height: 1;
  letter-spacing: var(--tag-track);
  text-transform: uppercase;
  color: var(--dark-05);
  white-space: nowrap;
}

.legal__tabela tbody th {
  font-weight: 500;
  color: var(--dark-02);
}

/* A régua é a MESMA que separa as seções do site. */
.legal__tabela tbody tr + tr th,
.legal__tabela tbody tr + tr td {
  border-top: 1px solid rgba(24, 27, 31, 0.09);
}

/* ── Estreito ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .legal__abre {
    padding-top: 112px;
    padding-bottom: 32px;
  }

  /* 44 e não 28 desde 2026-09-28: o `gap` do bloco caiu de 24 para 8
     (título→lede, ver o `case.css`) e lede→datas fica nos mesmos 52. */
  .legal__datas { margin-top: 44px; gap: 12px 32px; }

  /* O índice deixa de ser preso: numa tela estreita ele passa a ser um
     bloco no começo do documento, e grudá-lo no topo comeria metade da
     altura útil da leitura. */
  .legal__indice {
    position: static;
    margin-bottom: 40px;
  }

  .legal__corpo h2 { margin-top: 38px; }

  .legal__corpo p,
  .legal__corpo ul li,
  .legal__corpo ol li { font-size: var(--p-mobile); }

  .legal__destaque { padding: 16px 18px; }

  /* A tabela vira pilha de cartões. Cada célula ganha o rótulo da
     coluna pelo `data-rot`, senão o valor solto perde o sentido. */
  .legal__tabela { background: none; }

  .legal__tabela table,
  .legal__tabela tbody,
  .legal__tabela tr,
  .legal__tabela th,
  .legal__tabela td {
    display: block;
    width: auto;
  }

  .legal__tabela thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .legal__tabela tbody tr {
    margin-bottom: 12px;
    padding: 16px 18px;
    border-radius: var(--r-caixa);
    background: var(--light-01);
  }

  .legal__tabela tbody tr:last-child { margin-bottom: 0; }

  .legal__tabela tbody th,
  .legal__tabela tbody td {
    padding: 0;
    border: 0 !important;
  }

  .legal__tabela tbody td { margin-top: 14px; }

  .legal__tabela tbody td::before {
    content: attr(data-rot);
    display: block;
    margin-bottom: 4px;
    font-family: var(--font-label);
    font-weight: var(--tag-peso);
    font-size: 10px;
    letter-spacing: var(--tag-track);
    text-transform: uppercase;
    color: var(--dark-05);
  }
}