/* ============================================================================
   comum.css — o visual das páginas de texto (termos, privacidade, cookies)

   Está separado num arquivo só para você não precisar corrigir a mesma cor
   em três lugares. Se um dia quiser mexer no visual dessas páginas, é aqui.
   As cores são as mesmas da página inicial.
   ============================================================================ */
:root{
  --bg:#08070E; --bg2:#0E0C18; --surf:#14121F; --surf2:#1B1829; --surf3:#232032;
  --line:#2A2740; --line2:#211E33;
  --tx:#EFEDF7; --tx2:#A9A4C4; --tx3:#6F6A8C;
  --brand:#7B5CFF; --brand2:#FF2E93; --ok:#22D39A; --alerta:#FFB020;
  --grad:linear-gradient(115deg,#7B5CFF 0%,#C74BFF 42%,#FF2E93 78%,#FF9C41 100%);
  --r:16px; --rl:22px;
  --ff:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,system-ui,sans-serif;
  --ffm:ui-monospace,SFMono-Regular,Menlo,monospace;

  /* ---------- VIDRO E MOVIMENTO ----------
     A mesma receita da página inicial e do sorteador: uma curva de
     animação e três camadas de material. `backdrop-filter` fica só na
     faixa do topo, que é a única peça aqui que flutua sobre conteúdo. */
  --ease:cubic-bezier(.32,.72,0,1);
  --ease-mola:cubic-bezier(.34,1.42,.64,1);
  --v-luz:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012) 42%,rgba(255,255,255,0));
  --v-luz-f:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.02) 38%,rgba(255,255,255,0));
  --v-corpo:rgba(20,18,31,.72);
  --v-corpo-2:rgba(27,24,41,.62);
  --v-borda:rgba(255,255,255,.085);
  --v-borda-f:rgba(255,255,255,.13);
  --v-fio:inset 0 1px 0 rgba(255,255,255,.10);
  --v-fio-f:inset 0 1px 0 rgba(255,255,255,.16);
  --v-sombra:0 1px 2px rgba(0,0,0,.28), 0 14px 30px -14px rgba(0,0,0,.7), 0 34px 68px -30px rgba(0,0,0,.55);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--ff);background:var(--bg);color:var(--tx);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden
}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
.wrap{max-width:1140px;margin:0 auto;padding:0 22px}

/* ---------- topo (igual ao da página inicial) ---------- */
header{
  position:sticky;top:0;z-index:50;
  /* a 86% o texto da página aparecia por dentro da barra ao rolar;
     menos opacidade com mais blur lê como vidro, e não como bug */
  background:linear-gradient(180deg,rgba(12,10,22,.78),rgba(8,7,14,.68));
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  box-shadow:inset 0 -1px 0 var(--v-borda), 0 8px 30px -20px rgba(0,0,0,.9)
}
.hrow{display:flex;align-items:center;gap:20px;padding:14px 0}
.logo{display:flex;align-items:center;gap:11px;font-weight:800;font-size:19px;letter-spacing:-.03em}
.mark{
  width:36px;height:36px;border-radius:11px;flex:none;position:relative;
  transform-style:preserve-3d;
  animation:marcaGira 11s cubic-bezier(.42,0,.58,1) infinite;
  /* o verniz por cima da cor: é o que faz a face parecer polida */
  background:
    linear-gradient(158deg,rgba(255,255,255,.36),rgba(255,255,255,0) 47%),
    var(--grad);
  box-shadow:
    inset 0 1.6px 0 rgba(255,255,255,.62),
    inset 0 -2.5px 4px rgba(74,0,42,.45),
    inset 2px 0 5px -3px rgba(255,255,255,.3),
    0 7px 16px -5px rgba(255,46,147,.62),
    0 16px 30px -14px rgba(0,0,0,.85)
}
/* O símbolo: um alvo — anel e ponto no centro. Antes era um quadrado
   arredondado com um pontinho no canto, que lia como a câmera do
   Instagram; sair dessa semelhança é metade do motivo de trocar o nome.
   O "spot" agora é literal: o ponto no meio do alvo. */
/* o alvo não está pintado na face: está flutuando acima dela.
   Cada um tem sua própria altura e sua própria sombrinha. */
.mark::after{content:"";position:absolute;inset:8px;border-radius:50%;border:2.5px solid #fff;
  transform:translateZ(7px);box-shadow:0 2px 6px -2px rgba(0,0,0,.5)}
.mark::before{content:"";position:absolute;inset:14px;border-radius:50%;background:#fff;
  transform:translateZ(12px);box-shadow:0 2px 5px -1px rgba(0,0,0,.55)}
/* ============================================================
   A MARCA EM 3D
   ============================================================
   Sem biblioteca e sem JavaScript. O volume vem de quatro coisas
   que o navegador já faz de graça:

   1. `perspective` no invólucro. Sem isso, `rotateY` não inclina
      nada — só achata a peça.
   2. `transform-style:preserve-3d` no corpo, para o alvo poder
      flutuar ACIMA da face. É o que separa 3D de verdade de um
      desenho torto: o anel e o ponto ganham profundidade própria
      e andam em paralaxe quando a peça gira.
   3. Luz sempre de cima: fio claro na borda superior, sombra
      interna embaixo, sombra de contato no chão. Isso é o que
      faz o olho ler material sólido, e não gradiente colorido.
   4. Dois movimentos com períodos diferentes — o giro em 11s e a
      respiração em 7s. Se batessem no mesmo tempo pareceria um
      GIF em loop; fora de compasso, parece viva.

   Custo: as animações mexem só em `transform`, que a GPU resolve
   sem repintar. Peso zero de download — nada de Three.js, nada de
   WebGL disputando GPU com os anúncios ao lado.
   ============================================================ */
.mark3d{
  display:inline-flex;flex:none;
  perspective:300px;
  animation:marcaRespira 7s cubic-bezier(.45,.05,.55,.95) infinite;
}
@keyframes marcaRespira{
  0%,100%{transform:translateY(0) scale(1)}
  50%    {transform:translateY(-1.5px) scale(1.02)}
}
@keyframes marcaGira{
  0%   {transform:rotateX(7deg)  rotateY(-15deg) rotateZ(-1deg)}
  28%  {transform:rotateX(-3deg) rotateY(9deg)   rotateZ(1deg)}
  55%  {transform:rotateX(4deg)  rotateY(16deg)  rotateZ(-.5deg)}
  78%  {transform:rotateX(-5deg) rotateY(-6deg)  rotateZ(1.5deg)}
  100% {transform:rotateX(7deg)  rotateY(-15deg) rotateZ(-1deg)}
}
/* a peça perde a pressa quando ninguém está olhando e acorda no hover */
.logo:hover .mark3d{animation-duration:3.6s}
.logo:hover .mark{animation-duration:5.4s}

@media(prefers-reduced-motion:reduce){
  /* parada, mas ainda com volume — desligar movimento não é
     motivo para devolver um quadrado chapado */
  .mark3d,.mark{animation:none}
  .mark{transform:rotateX(5deg) rotateY(-12deg)}
}

.logo b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
nav{margin-left:auto;display:flex;align-items:center;gap:6px}
nav a{padding:9px 14px;border-radius:10px;font-size:14px;font-weight:600;color:var(--tx2);transition:.16s var(--ease)}
nav a:hover{background:rgba(255,255,255,.055);color:var(--tx)}
nav a.btn{white-space:nowrap}
.so-cel{display:none}
@media(max-width:470px){
  .so-pc{display:none}
  .so-cel{display:inline}
  nav{gap:4px} nav a{padding:8px 11px;font-size:13px}
  .logo{font-size:17px} .mark{width:32px;height:32px}
}
/* Sem esta regra o topo empurra a página: quatro itens somam 614px,
   e a janela do celular tem 390px. Os mesmos links estão no rodapé
   e no índice de cada documento, então esconder aqui não perde nada. */
@media(max-width:820px){nav a.esconde{display:none}}
/* Abaixo de 400px não existe soma de larguras que faça logo + link + botão
   caberem: o link sai e quem fica é o botão que leva ao sorteador. */
@media(max-width:399px){nav a.so-largo{display:none}}
nav a[aria-current="page"]{color:var(--tx);background:rgba(255,255,255,.07);box-shadow:var(--v-fio)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border-radius:14px;font-size:15px;font-weight:700;
  background:var(--v-luz-f), var(--v-corpo-2);
  border:1px solid var(--v-borda);color:var(--tx);
  box-shadow:var(--v-fio), 0 2px 8px -4px rgba(0,0,0,.55);
  cursor:pointer;font-family:inherit;
  transition:transform .3s var(--ease), background .2s var(--ease),
             box-shadow .3s var(--ease), border-color .2s var(--ease), filter .2s var(--ease)
}
.btn:hover{
  background:var(--v-luz-f), rgba(35,32,50,.7);border-color:var(--v-borda-f);
  transform:translateY(-1.5px);box-shadow:var(--v-fio-f), 0 8px 20px -10px rgba(0,0,0,.7)
}
.btn:active{transform:translateY(0) scale(.978);transition-duration:.07s}
.btn.pri{background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,0) 48%), var(--grad);
  border-color:transparent;color:#fff;
  box-shadow:0 12px 34px -12px rgba(199,75,255,.9)}
.btn.pri:hover{filter:brightness(1.08)}
.btn.sm{padding:9px 16px;font-size:13.5px;border-radius:10px}

/* ---------- corpo do documento ---------- */
.doc{max-width:780px;margin:0 auto;padding:52px 22px 90px}
.volta{
  display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;
  color:var(--tx3);margin-bottom:26px;transition:.15s var(--ease)
}
.volta:hover{color:var(--tx2)}
.doc h1{
  font-size:clamp(29px,5vw,42px);font-weight:850;letter-spacing:-.035em;
  line-height:1.1;margin-bottom:14px;text-wrap:balance
}
.datas{
  font-size:13px;color:var(--tx3);font-family:var(--ffm);
  padding-bottom:26px;margin-bottom:34px;border-bottom:1px solid var(--line2)
}
.resumo{
  padding:20px 22px;border-radius:var(--r);margin-bottom:38px;
  background:rgba(123,92,255,.07);border:1px solid rgba(123,92,255,.24);
  font-size:15px;color:var(--tx2)
}
.resumo h2{
  font-size:11.5px;font-family:var(--ffm);letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand);margin-bottom:11px;font-weight:600
}
.resumo ul{margin:9px 0 0;padding-left:19px}
.resumo li{margin-bottom:6px}
.resumo b{color:var(--tx)}

.doc h2{
  font-size:21px;font-weight:800;letter-spacing:-.02em;
  margin:42px 0 14px;padding-top:6px;scroll-margin-top:86px
}
.doc h2:first-of-type{margin-top:0}
.doc h3{font-size:16.5px;font-weight:750;margin:26px 0 9px;color:var(--tx)}
.doc p{color:var(--tx2);margin-bottom:14px}
.doc b,.doc strong{color:var(--tx);font-weight:700}
.doc ul,.doc ol{color:var(--tx2);margin:0 0 16px;padding-left:22px}
.doc li{margin-bottom:8px}
.doc li > b:first-child{color:var(--tx)}
.doc a:not(.btn):not(.volta):not(.logo){
  color:#B49BFF;text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:rgba(180,155,255,.4)
}
.doc a:not(.btn):not(.volta):not(.logo):hover{text-decoration-color:#B49BFF}
code{
  font-family:var(--ffm);font-size:13px;background:var(--surf2);
  border:1px solid var(--line2);border-radius:6px;padding:1.5px 6px;color:var(--tx)
}

/* aviso em destaque dentro do texto */
.aviso{
  padding:18px 20px;border-radius:var(--r);margin:24px 0;
  background:rgba(255,176,32,.06);border:1px solid rgba(255,176,32,.22);
  font-size:14.5px;color:var(--tx2)
}
.aviso b{color:var(--tx)}
.aviso p:last-child{margin-bottom:0}

/* índice do documento */
.indice{
  padding:18px 20px;border-radius:var(--r);margin-bottom:38px;
  background:var(--v-luz), var(--v-corpo);border:1px solid var(--v-borda);
  box-shadow:var(--v-fio)
}
.indice h2{
  font-size:11.5px;font-family:var(--ffm);letter-spacing:.14em;text-transform:uppercase;
  color:var(--tx3);margin:0 0 12px;font-weight:600
}
.indice ol{margin:0;padding-left:20px;font-size:14.5px}
.indice li{margin-bottom:5px}
.indice a{color:var(--tx2)!important;text-decoration:none!important}
.indice a:hover{color:var(--tx)!important;text-decoration:underline!important}

/* tabela (usada na política de cookies) */
.tabela{overflow-x:auto;margin:20px 0;border:1px solid var(--line2);border-radius:var(--r)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:14px}
th,td{padding:12px 15px;text-align:left;border-bottom:1px solid var(--line2);vertical-align:top}
th{
  background:var(--surf2);font-size:11.5px;font-family:var(--ffm);
  letter-spacing:.1em;text-transform:uppercase;color:var(--tx3);font-weight:600
}
td{color:var(--tx2)}
td b{color:var(--tx)}
tr:last-child td{border-bottom:none}

/* rodapé */
footer{border-top:1px solid var(--line2);padding:40px 0 34px}
.frow{display:flex;gap:38px;flex-wrap:wrap;justify-content:space-between}
.fcol h4{
  font-size:11.5px;font-family:var(--ffm);letter-spacing:.14em;text-transform:uppercase;
  color:var(--tx3);margin-bottom:14px;font-weight:600
}
.fcol a{display:block;font-size:14px;color:var(--tx2);padding:5px 0;transition:.15s var(--ease)}
.fcol a:hover{color:var(--tx)}

/* A marca do rodapé é um <a> dentro de .fcol, e a regra acima a pegava junto:
   display:block empilhava o círculo em cima do texto e o padding empurrava
   tudo de lado. O bug já tinha sido corrigido na página inicial e NÃO estava
   aqui, então termos, privacidade e cookies seguiram com ele — que é
   exatamente o motivo de a regra agora morar no arquivo compartilhado. */
.fcol a.logo{display:flex;padding:0;font-size:19px}

/* O aviso de isenção, no fim do rodapé. */
.isenta{
  margin-top:22px;padding:18px 20px;border-radius:var(--r);
  background:rgba(255,176,32,.06);border:1px solid rgba(255,176,32,.2);
  font-size:13px;color:var(--tx2);line-height:1.6
}
.isenta b{color:var(--tx)}
.fbase{
  margin-top:32px;padding-top:22px;border-top:1px solid var(--line2);
  font-size:13px;color:var(--tx3);display:flex;gap:14px;flex-wrap:wrap;justify-content:space-between
}

/* Quem pediu menos movimento fica com o material e sem a animação. */
@media(prefers-reduced-motion:reduce){
  .btn:hover,.btn:active{transform:none}
}