/*
 * legal-v2.css: Política de Privacidade, Termos de Uso, Exclusão de dados e Subprocessadores (v2).
 * Páginas de leitura: cabeçalho e rodapé v2, sem fio de luz, sem Alta, sem botão fixo, sem foto e sem CTA no corpo.
 * Molde em _spec/04-COPY/legais-v2.md, seção C. Superfície clara (#F7F9F8 e branco), esmeralda só como acento,
 * Cormorant 400 nos títulos, Jost no texto, peso máximo 600. Usa os tokens e o cabeçalho de v2.css.
 */

/* ============================================================ */
/* 1. Tokens da leitura                                           */
/* ============================================================ */
.pagina--legal-v2{
  --tinta-l: #151A17;
  --corpo-l: #38423C;
  --suave-l: #556059;
  --linha-l: #DEE3E0;
  --linha-forte-l: #C7D0CB;
  --tinto-l: #EEF4F1;
  --tinto-borda-l: #D3E0D9;
  --esm-l: #0B3D2E;
  --coluna-l: 68ch;
  --recuo-topo: calc(var(--cabecalho-h) + clamp(2.75rem, 6.5vw, 5.75rem));
  background: #F7F9F8;
  color: var(--corpo-l);
}
.legal{ display: block; padding-block-end: clamp(4.5rem, 9vw, 8rem); }

/* ============================================================ */
/* 2. Abertura                                                    */
/* ============================================================ */
.legal__abertura{
  padding-block: var(--recuo-topo) clamp(2rem, 4vw, 3.25rem);
  border-block-end: 1px solid var(--linha-l);
}
.pagina--legal-v2 .legal h1{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.5rem, 1.35rem + 4.2vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.014em;
  color: var(--tinta-l);
  max-inline-size: 20ch;
  text-wrap: balance;
}
.legal__ident, .legal__lide{
  margin-block-start: clamp(1.25rem, 2.4vw, 1.75rem);
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--suave-l);
  max-inline-size: 64ch;
}
.pagina--legal-v2 .legal__lide{
  font-size: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
  line-height: 1.5;
  color: var(--corpo-l);
  max-inline-size: 48ch;
}
.legal__meta{
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  margin-block-start: 1.25rem;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--suave-l);
  max-inline-size: none;
}
.pagina--legal-v2 .legal__ident + .legal__meta{ margin-block-start: .75rem; }
.legal__versao{ color: var(--suave-l); }
/* "[data da publicação]" fica marcada para achar e trocar na virada */
.legal__data{ font-family: "DM Mono", ui-monospace, Menlo, monospace; font-size: .9em; letter-spacing: -.01em; }
/* some na publicação: basta remover o elemento */
.legal__rascunho{
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .15rem .7rem .18rem;
  border: 1px solid var(--linha-forte-l);
  border-radius: 999px;
  background: #fff;
  font-size: .75rem;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--suave-l);
  white-space: nowrap;
}
.legal__rascunho::before{
  content: ""; inline-size: .375rem; block-size: .375rem; border-radius: 50%;
  background: #A7B0AA;
}

/* ============================================================ */
/* 3. Grade: índice à esquerda, leitura à direita                 */
/* ============================================================ */
.legal__grade{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-block-start: clamp(2rem, 4vw, 3.25rem);
}
.legal__lateral{ display: none; }
.legal__coluna{ min-inline-size: 0; }
.legal--sem-indice .legal__coluna{ max-inline-size: 64rem; }

@media (min-width: 1024px){
  .legal__grade{
    grid-template-columns: 14.5rem minmax(0, 1fr);
    column-gap: clamp(3rem, 6vw, 6.5rem);
    align-items: start;
  }
  .legal__lateral{
    display: block;
    position: sticky;
    top: calc(var(--cabecalho-h) + 2rem);
    max-block-size: calc(100svh - var(--cabecalho-h) - 3.5rem);
    overflow-y: auto;
    padding-block-end: 1rem;
    overscroll-behavior: contain;
  }
  .legal--sem-indice .legal__grade{ grid-template-columns: minmax(0, 1fr); }
  .legal__indice-movel{ display: none; }
}

/* ============================================================ */
/* 4. Índice                                                      */
/* ============================================================ */
.legal__indice-tit{
  margin: 0 0 .75rem;
  font-size: .8125rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--suave-l);
}
.legal__indice ol, .legal__indice-movel ol{
  list-style: none; margin: 0; padding: 0;
}
.legal__indice ol{ border-inline-start: 1px solid var(--linha-l); }
.legal__indice a, .legal__indice-movel a{
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  align-items: baseline;
  column-gap: .25rem;
  padding: .4rem .5rem .4rem .8rem;
  margin-inline-start: -1px;
  border-inline-start: 2px solid transparent;
  font-size: .875rem;
  line-height: 1.4;
  color: var(--suave-l);
  text-decoration: none;
  transition: color 200ms var(--curva), border-color 200ms var(--curva);
}
.legal__indice .num, .legal__indice-movel .num{ font-size: .75rem; color: var(--suave-l); }
@media (hover: hover) and (pointer: fine){
  .legal__indice a:hover{ color: var(--tinta-l); }
}
.legal__indice a[aria-current="true"]{
  color: var(--tinta-l);
  border-inline-start-color: var(--esm-l);
}
.legal__indice a[aria-current="true"] .num{ color: var(--esm-l); }
.legal__indice a:focus-visible, .legal__indice-movel a:focus-visible, .legal__indice-movel summary:focus-visible{
  outline: 2px solid var(--esm-l); outline-offset: 2px; box-shadow: none;
}

/* celular e tablet: "Nesta página" recolhido, depois do resumo */
.legal__indice-movel{
  margin-block-start: 1.25rem;
  border: 1px solid var(--linha-l);
  border-radius: 6px;
  background: #fff;
}
.legal__indice-movel summary{
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem 1.1rem;
  min-block-size: 3rem;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--tinta-l);
  cursor: pointer;
}
.legal__indice-movel summary::-webkit-details-marker{ display: none; }
.legal__indice-movel summary::after{
  content: ""; flex: none;
  inline-size: .55rem; block-size: .55rem;
  border-inline-end: 1.5px solid var(--esm-l); border-block-end: 1.5px solid var(--esm-l);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 200ms var(--curva);
}
.legal__indice-movel[open] summary::after{ transform: translateY(2px) rotate(-135deg); }
.legal__indice-movel nav{ padding: .25rem .5rem 1rem; border-block-start: 1px solid var(--linha-l); }
.legal__indice-movel a{ padding-inline: .6rem; border-inline-start-width: 0; margin: 0; }
.legal__indice-movel a[aria-current="true"]{ color: var(--tinta-l); background: var(--tinto-l); border-radius: 4px; }

/* ============================================================ */
/* 5. "Em resumo"                                                 */
/* ============================================================ */
.legal__resumo{
  max-inline-size: var(--coluna-l);
  padding: clamp(1.25rem, 2.6vw, 1.75rem) clamp(1.25rem, 3vw, 2rem);
  background: var(--tinto-l);
  border: 1px solid var(--tinto-borda-l);
  border-radius: 6px;
}
.legal__resumo-tit{
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.3rem + .6vw, 1.875rem);
  line-height: 1.1;
  color: var(--tinta-l);
  margin: 0 0 .9rem;
  max-inline-size: none;
}
.legal__resumo ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.legal__resumo li{
  position: relative;
  padding-inline-start: 1.15rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--tinta-l);
}
.legal__resumo li::before{
  content: ""; position: absolute; inset-inline-start: .1rem; inset-block-start: .62em;
  inline-size: .3125rem; block-size: .3125rem; border-radius: 50%;
  background: var(--esm-l);
}
.legal__resumo + .legal__indice-movel{ margin-block-start: 1rem; max-inline-size: var(--coluna-l); }
.legal__indice-movel{ max-inline-size: var(--coluna-l); }

/* ============================================================ */
/* 6. Atalhos (Exclusão de dados) e documentos relacionados       */
/* ============================================================ */
.legal__atalhos{
  display: grid; gap: .75rem;
  grid-template-columns: minmax(0, 1fr);
  margin-block-end: 1.5rem;
  max-inline-size: 52rem;
}
@media (min-width: 720px){
  .legal__atalhos{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
}
.legal__atalho{
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-start; gap: .9rem;
  min-block-size: 5.75rem;
  padding: 1rem 2.6rem 1rem 1.15rem;
  background: #fff;
  border: 1px solid var(--linha-l);
  border-radius: 6px;
  color: var(--tinta-l);
  text-decoration: none;
  transition: border-color 200ms var(--curva), background-color 200ms var(--curva);
}
.legal__atalho .num{ font-size: .75rem; line-height: 1; color: var(--esm-l); }
.legal__atalho-tit{ font-size: 1.0625rem; line-height: 1.3; font-weight: 500; text-wrap: balance; }
.legal__atalho::after{
  content: ""; position: absolute; inset-inline-end: 1.1rem; inset-block-end: 1.1rem;
  inline-size: .5rem; block-size: .5rem;
  border-inline-end: 1.5px solid var(--esm-l); border-block-end: 1.5px solid var(--esm-l);
  transform: rotate(45deg);
  transition: transform 200ms var(--curva);
}
@media (hover: hover) and (pointer: fine){
  .legal__atalho:hover{ border-color: rgba(11, 61, 46, .45); background: #FBFCFB; }
  .legal__atalho:hover::after{ transform: translateY(2px) rotate(45deg); }
}
.legal__atalho:focus-visible{ outline: 2px solid var(--esm-l); outline-offset: 2px; box-shadow: none; }
.legal__atalho--rel{ min-block-size: 0; justify-content: center; }
.legal__atalho--rel::after{ inset-block-end: auto; inset-block-start: 50%; margin-block-start: -.25rem; transform: rotate(-45deg); }
@media (hover: hover) and (pointer: fine){
  .legal__atalho--rel:hover::after{ transform: translateX(2px) rotate(-45deg); }
}

.legal__relacionados{
  margin-block-start: clamp(3.5rem, 7vw, 5.5rem);
  padding-block-start: 2rem;
  border-block-start: 1px solid var(--linha-l);
  max-inline-size: 52rem;
}
.legal__relacionados-tit{
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.3rem + .6vw, 1.875rem);
  line-height: 1.1;
  color: var(--tinta-l);
  margin: 0 0 1rem;
  max-inline-size: none;
}
.legal__relacionados ul{
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 720px){
  .legal__relacionados ul{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
}
.legal__relacionados li{ margin: 0; }
.legal__relacionados .legal__atalho{ block-size: 100%; }

/* ============================================================ */
/* 7. Corpo                                                       */
/* ============================================================ */
.legal__corpo{
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--corpo-l);
  margin-block-start: clamp(2.25rem, 4.5vw, 3.5rem);
  max-inline-size: var(--coluna-l);
}
.legal--sem-indice .legal__corpo{ max-inline-size: none; margin-block-start: 0; }
@media (min-width: 720px){ .legal__corpo{ font-size: 1.125rem; } }

.legal__corpo p{
  max-inline-size: var(--coluna-l);
  margin: 0 0 1.1em;
  font-size: inherit;
  line-height: inherit;
  color: var(--corpo-l);
  text-wrap: pretty;
}
.legal__corpo strong{ font-weight: 500; color: var(--tinta-l); }

.legal__secao{
  padding-block: 2.25rem 0;
  border-block-start: 1px solid var(--linha-l);
  scroll-margin-top: calc(var(--cabecalho-h) + 24px);
}
.legal__secao + .legal__secao{ margin-block-start: clamp(2.5rem, 5vw, 3.75rem); }
.legal__secao > :last-child{ margin-block-end: 0; }

.pagina--legal-v2 .legal__corpo h2{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 1.35rem + 1.2vw, 2.375rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--tinta-l);
  margin: 0 0 1.1rem;
  max-inline-size: 34ch;
  text-wrap: balance;
}
.legal__corpo h2 .num{
  display: inline-block;
  margin-inline-end: .55rem;
  font-size: .5em;
  letter-spacing: 0;
  color: var(--esm-l);
  vertical-align: .32em;
}
body .legal__corpo h2 .num{ font-size: .5em; }

.ancora{
  display: inline-block;
  margin-inline-start: .55rem;
  padding: .1rem .35rem;
  border-radius: 4px;
  font-family: "DM Mono", ui-monospace, Menlo, monospace;
  font-size: .5em;
  line-height: 1;
  vertical-align: .32em;
  color: var(--suave-l);
  text-decoration: none;
  opacity: 0;
  transition: opacity 200ms var(--curva), color 200ms var(--curva);
  position: relative;
}
.legal__corpo h2:hover .ancora, .ancora:focus-visible, .ancora.copiado{ opacity: 1; }
.ancora:hover{ color: var(--esm-l); }
.ancora:focus-visible{ outline: 2px solid var(--esm-l); outline-offset: 2px; box-shadow: none; }
@media (hover: none){ .ancora{ opacity: .5; } }
.ancora.copiado{ color: var(--esm-l); }
.ancora.copiado::after{
  content: "Link copiado";
  position: absolute; inset-inline-start: 100%; inset-block-start: 50%;
  margin-inline-start: .5rem; transform: translateY(-50%);
  padding: .25rem .55rem; border-radius: 4px;
  background: var(--esm-l); color: #fff;
  font-family: "Jost", "Helvetica Neue", Arial, sans-serif; font-size: .8125rem; letter-spacing: 0; white-space: nowrap;
}

.legal__corpo h3{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.3rem + .6vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -.005em;
  color: var(--tinta-l);
  margin: 2rem 0 .65rem;
  max-inline-size: none;
}
.legal__corpo h2 + h3{ margin-block-start: .5rem; }

/* listas: marcadores simples */
.legal__corpo ul, .legal__corpo ol{
  margin: 0 0 1.25em; padding-inline-start: 1.35rem;
  max-inline-size: var(--coluna-l);
}
.legal__corpo ul{ list-style: disc; }
.legal__corpo ol{ list-style: decimal; }
.legal__corpo li{ margin-block: .5em; padding-inline-start: .25rem; text-wrap: pretty; }
.legal__corpo li::marker{ color: var(--esm-l); }
.legal__corpo ol li::marker{ font-family: "DM Mono", ui-monospace, Menlo, monospace; font-size: .85em; }
.legal__corpo p + ul, .legal__corpo p + ol{ margin-block-start: -.25em; }

/* nota abaixo da tabela e data da página */
.legal__corpo .legal__nota{ font-size: .9375rem; line-height: 1.6; color: var(--suave-l); max-inline-size: 62ch; }
.legal__corpo .legal__atualizado{ font-size: .9375rem; color: var(--suave-l); margin-block-start: 1.5rem; }
.legal__corpo .legal__atualizado strong{ font-weight: 500; color: var(--suave-l); }

/* links do texto */
.legal__corpo a, .legal__resumo a{
  color: var(--esm-l);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  text-decoration-color: rgba(11, 61, 46, .4);
  transition: text-decoration-color 200ms var(--curva);
}
@media (hover: hover) and (pointer: fine){
  .legal__corpo a:hover{ text-decoration-color: var(--esm-l); }
}
.legal__corpo a:focus-visible{ outline: 2px solid var(--esm-l); outline-offset: 2px; border-radius: 2px; box-shadow: none; }
.legal__corpo .ancora{ text-decoration: none; }

/* e-mail: texto selecionável, sem mailto */
.legal__email{
  color: var(--tinta-l);
  user-select: all; -webkit-user-select: all;
  overflow-wrap: anywhere;
  border-block-end: 1px solid var(--linha-forte-l);
}

/* ============================================================ */
/* 8. Tabelas: rolagem horizontal própria                         */
/* ============================================================ */
.legal__tabela{
  margin-block: 1.5rem 1.75rem;
  max-inline-size: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border: 1px solid var(--linha-l);
  border-radius: 6px;
}
.legal__tabela:focus-visible{ outline: 2px solid var(--esm-l); outline-offset: 2px; box-shadow: none; }
.legal__tabela table{ inline-size: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.55; }
.legal__tabela--larga{ min-inline-size: 46rem; }
.legal__tabela th, .legal__tabela td{ padding: .85rem 1.1rem; text-align: start; vertical-align: top; color: var(--corpo-l); }
.legal__tabela thead th{
  font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: var(--tinta-l);
  background: #F1F4F2; border-block-end: 1px solid var(--linha-l); white-space: nowrap;
}
.legal__tabela tbody tr + tr > *{ border-block-start: 1px solid var(--linha-l); }
.legal__tabela tbody th{ font-weight: 500; color: var(--tinta-l); }
.legal__tabela td:first-child{ color: var(--tinta-l); }
@media (max-width: 719px){
  .legal__tabela th, .legal__tabela td{ padding: .75rem .9rem; }
}

/* ============================================================ */
/* 9. Movimento reduzido                                          */
/* ============================================================ */
@media (prefers-reduced-motion: reduce){
  .legal a, .legal__indice a, .legal__atalho, .legal__atalho::after, .ancora, .legal__indice-movel summary::after{ transition: none !important; }
}

/* ============================================================ */
/* 10. Impressão                                                  */
/* ============================================================ */
@media print{
  html, body, .pagina--legal-v2{ background: #fff !important; color: #000 !important; }
  .pular, .cabecalho, .rodape, .legal__lateral, .legal__indice-movel, .legal__atalhos, .legal__relacionados, .ancora{ display: none !important; }
  .pagina--legal-v2 .cabecalho{ margin: 0; }
  .legal{ padding: 0; }
  .legal__abertura{ padding-block: 0 1rem; border-block-end: 1px solid #000; }
  .legal__grade{ display: block; padding-block-start: 1rem; }
  .legal__corpo, .legal__resumo, .legal__corpo p, .legal__corpo ul, .legal__corpo ol{ max-inline-size: none; }
  .legal__corpo{ font-size: 11pt; line-height: 1.5; color: #000; margin-block-start: 1rem; }
  .legal__corpo p, .legal__corpo li, .legal__corpo td, .legal__corpo th, .legal__corpo strong,
  .legal h1, .legal__corpo h2, .legal__corpo h3, .legal__resumo li, .legal__resumo-tit, .legal__ident, .legal__lide, .legal__meta, .legal__versao{ color: #000 !important; }
  .legal__resumo{ background: #fff; border: 1px solid #000; border-radius: 0; break-inside: avoid; }
  .legal__resumo li::before{ background: #000; }
  .legal__corpo li::marker{ color: #000; }
  .legal__secao{ border-block-start: 0; padding-block-start: 0; margin-block-start: 1.25rem !important; }
  .legal__corpo h2, .legal__corpo h3{ break-after: avoid; }
  .legal__corpo h2 .num{ color: #000; }
  .legal__corpo li, .legal__tabela tr{ break-inside: avoid; }
  .legal__tabela{ overflow: visible; border-color: #000; border-radius: 0; }
  .legal__tabela--larga{ min-inline-size: 0; }
  .legal__tabela th, .legal__tabela td{ border: 1px solid #000; background: #fff !important; }
  .legal__rascunho{ border-color: #000; color: #000; }
  .legal__corpo a, .legal__resumo a{ color: #000; text-decoration: underline; }
  .legal__corpo a[href]:not([href^="#"])::after, .legal__resumo a[href]:not([href^="#"])::after{ content: " (" attr(href) ")"; font-size: .9em; word-break: break-all; }
  .legal__email{ border: 0; }
}
