/* ==========================================================================
   AVISO DE COOKIES — prefixo lgpd-
   Barra de consentimento colada na janela + painel de preferências em
   <dialog> nativo.

   Tokens usados:
     --bg --fg --fg-2 --fg-muted   escopo de tom (a raiz declara .sec-deep)
     --rule --rule-2               filete da barra, borda do interruptor
     --accent                      interruptor ligado, sublinhado, foco
     --dark                        base do véu do ::backdrop
     --veil                        véu do ::backdrop, servido pela primitiva
                                   .dialog-casca — este componente sobrescreve
                                   o grau, e diz por que ali embaixo
     --display --sans              faces
     --ease                        curva do projeto
     --radius-pill --radius-media  forma
     --max --pad                   só via a primitiva .wrap

   POR QUE A RAIZ DECLARA .sec-deep. Este bloco não mora dentro de nenhuma
   <section>: ele é filho direto do <body>, e portanto não há escopo de tom
   para herdar — --bg, --fg e --rule chegariam vazios. Declarar o escopo no
   markup do próprio bloco não é override (o §3 do manual descreve o padrão,
   com precedente em conteudo/bento-recursos-expansivel): o componente ENTRA
   num escopo que o core já define e continua lendo os mesmos nomes, então o
   tema segue mandando na cor. Para uma barra clara, troque a classe da raiz
   por .sec-paper — nenhuma regra deste arquivo muda.

   OS PARAFUSOS, todos na raiz e todos prefixados:
     --lgpd-z        camada da barra, e ela NÃO adota o --z-overlay (200) do
                     core de propósito. Aquele degrau é o de sobreposição de
                     página inteira — a que cobre tudo, trava a rolagem e
                     prende o foco. Esta barra não é uma delas: é uma faixa
                     que não bloqueia nada, e tem de ficar ABAIXO do que é
                     sobreposição de verdade, para que um drawer de menu
                     aberto a cubra em vez de disputar a mesma camada. Daí
                     150, entre a nav fixa do core (100) e o --z-overlay.
                     O painel, esse sim sobreposição, é <dialog> em top
                     layer: não participa de z-index nenhum, e portanto não
                     há onde o --z-overlay entrar nele.
     --lgpd-dur      duração da entrada da barra
     --lgpd-saida    duração da saída — bate com SAIDA no script.js
     --lgpd-atraso   atraso da entrada, para não competir com a carga
     --lgpd-larg     largura do painel
     --lgpd-veil-mix grau do véu do painel — ver .lgpd-painel
   ========================================================================== */

.lgpd{
  --lgpd-z:150;
  --lgpd-dur:.7s;
  --lgpd-saida:.32s;
  --lgpd-atraso:.45s;
  --lgpd-larg:660px;
  --lgpd-veil-mix:84%;
}

/* ===== A BARRA ===== */

.lgpd-bar{
  position:fixed;
  inset-inline:0;
  inset-block-end:0;
  z-index:var(--lgpd-z,150);
  background:var(--bg);
  border-block-start:1px solid var(--rule-2);
  /* Nada entra seco (§5): blur indo a zero, junto do fade e da subida.
     A transição é PRÓPRIA, e não [data-rv], por dois motivos que se somam:
     o reveal do core é observador de ENTRADA em viewport, e uma barra fixa
     já nasce em viewport — ele dispararia na carga, antes de o script saber
     se há escolha gravada; e o §5 proíbe elemento fixed sob um filtro de
     ancestral, o que este bloco resolve não tendo ancestral nenhum. */
  opacity:0;
  filter:blur(14px);
  transform:translateY(18px);
  transition:
    opacity var(--lgpd-saida) var(--ease),
    filter var(--lgpd-saida) var(--ease),
    transform var(--lgpd-saida) var(--ease);
}
/* Duração e atraso moram no estado de CHEGADA, não na regra base: a
   transition-delay lida é sempre a do estado para o qual se vai. Assim a
   entrada demora e espera; a saída, que é resposta a um clique, sai na hora
   e sem atraso nenhum. */
.lgpd-bar.is-in{
  opacity:1;
  filter:blur(0);
  transform:none;
  transition-duration:var(--lgpd-dur);
  transition-delay:var(--lgpd-atraso);
}
@media(prefers-reduced-motion:reduce){
  /* Quem pediu menos movimento recebe a MESMA barra, sem a entrada. Ela não
     deixa de aparecer: só aparece pronta. */
  .lgpd-bar{opacity:1;filter:none;transform:none;transition:none}
  .lgpd-bar.is-in{transition:none}
}
/* §6.5 do contrato. Hoje .lgpd-bar não declara `display`, e o [hidden] do
   agente do usuário bastaria — mas basta alguém acrescentar um
   `display:flex` aqui para o atributo virar decoração e a barra continuar na
   tela depois da escolha, sem erro nenhum. A linha custa nada e fecha a
   armadilha antes de ela existir. */
.lgpd-bar[hidden]{display:none}

.lgpd-bar-wrap{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:clamp(16px,2.4vw,40px);
  padding-block:clamp(16px,2vw,22px);
}

/* 420px é o ponto em que o parágrafo para de valer a pena: abaixo disso ele
   quebra em cinco linhas e a barra come meia tela. É a largura que decide
   sozinha se as ações caem para a segunda fila, sem media query. */
.lgpd-bar-texto{flex:1 1 420px;min-width:0}

.lgpd-bar-titulo{
  font-family:var(--display);
  font-weight:700;
  font-size:14px;
  letter-spacing:-.01em;
  color:var(--fg);
  margin-bottom:4px;
}

.lgpd-bar-corpo{
  font-size:13.5px;
  line-height:1.55;
  color:var(--fg-2);
  max-width:74ch;
}

.lgpd-bar-acoes{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
}

/* A pílula do core em corpo de barra: menos padding, sem encolher a fonte —
   11.5px em caixa alta já é o piso legível. */
.lgpd-acao{padding:13px 24px}

/* O PAR DO PRIMEIRO NÍVEL, e esta grade é o item mais importante do arquivo.
   Duas colunas 1fr numa caixa de largura automática: as duas colunas ficam do
   tamanho da MAIOR, e não do próprio texto. Sem ela, "Aceitar todos" (13
   caracteres) sairia com 158px contra os 230px de "Recusar não essenciais" —
   mesmo desenho, caixa menor, e a mais curta lida como a secundária. Medido a
   1440 depois da grade: 230x43 as duas.
   Vale para a barra e para o painel: os dois caminhos do primeiro nível
   existem nos dois lugares, sempre em par. */
.lgpd-par{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}

/* O terceiro caminho. Botão de texto, e não .btn: se ele virasse pílula
   seriam TRÊS pílulas iguais na barra, e a hierarquia entre "as duas
   escolhas do primeiro nível" e "o caminho granular" desapareceria. O
   sublinhado é o que o mantém visível como ação — cor sozinha não basta. */
.lgpd-preferencias{
  background:none;
  border:0;
  padding:6px 2px;
  font-family:var(--sans);
  font-size:12.5px;
  letter-spacing:.02em;
  color:var(--fg-2);
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-color:var(--rule-2);
  transition:color .3s var(--ease),text-decoration-color .3s var(--ease);
}
.lgpd-preferencias:hover{color:var(--accent);text-decoration-color:var(--accent)}
@media(prefers-reduced-motion:reduce){
  .lgpd-preferencias{transition:none}
}

.lgpd-link{
  color:var(--fg);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:var(--rule-2);
}
.lgpd-link:hover{color:var(--accent);text-decoration-color:var(--accent)}

/* ===== O PAINEL ===== */

/* A casca do <dialog> é a primitiva .dialog-casca do core, declarada ANTES
   desta classe no markup: dela vêm o padding, a borda, o fundo, os limites
   de tamanho que o navegador dá de graça — e o véu do ::backdrop. Sobra aqui
   o que é desta peça: a largura, o teto de altura e o grau do véu.

   O <dialog> nasce display:none na folha do agente do usuário e só é exibido
   com [open]. Escrever `.lgpd-painel{display:block}` sem o [open] deixaria o
   painel visível o tempo todo — é a armadilha do §6.5 na versão do elemento
   nativo. A primitiva não cobre este display de propósito: cada diálogo da
   casa entra de um jeito diferente. */
.lgpd-painel{
  inline-size:min(var(--lgpd-larg,660px),calc(100vw - 32px));
  /* Anda em par com o mesmo teto no .lgpd-quadro, que é quem rola. */
  max-block-size:min(86vh,820px);
  /* Véu MAIS ESCURO que os 78% da casa, e isto é desenho, não descuido: o
     painel cobre uma barra que já está na tela, e o véu tem de separar as
     duas camadas de forma inequívoca — a barra não pode continuar lendo como
     parte do que está por cima dela. Medido sobre uma dobra .sec-paper por
     trás, o composto vai de rgb(64,64,64) a 78% para rgb(49,49,49) a 84%:
     quase 7 pontos de L* em CIELAB, várias vezes o limiar do perceptível,
     então padronizar em 78% seria mudança visual e não refactor. Sobre dobra
     escura os dois graus dão praticamente o mesmo pixel — o grau do véu só
     se vê quando há claro atrás.
     O ::backdrop herda custom property do elemento que o originou: é por
     isso que declarar --veil AQUI basta para a primitiva pintar o véu certo. */
  --veil:color-mix(in srgb,var(--dark) var(--lgpd-veil-mix,84%),transparent);
}
.lgpd-painel[open]{display:block}

.lgpd-quadro{
  background:var(--bg);
  border:1px solid var(--rule-2);
  border-radius:var(--radius-media);
  padding:clamp(22px,3.4vw,36px);
  /* O quadro é quem rola, não o diálogo: com a rolagem no <dialog> a borda
     e o raio ficariam fora da área rolável e a quina cortaria o conteúdo. */
  max-block-size:min(86vh,820px);
  overflow-y:auto;
  overscroll-behavior:contain;
}

.lgpd-topo{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

.lgpd-titulo{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(19px,2.2vw,23px);
  letter-spacing:-.018em;
  line-height:1.2;
  color:var(--fg);
}

/* Não é .btn-disc do core: aquele é o disco de contorno de carrossel, com
   42px e borda. Aqui o X é o fechar de uma sobreposição — sem contorno, para
   não competir com os três botões de ação logo abaixo. */
.lgpd-fechar{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  inline-size:34px;
  block-size:34px;
  margin:-6px -6px 0 0;
  padding:0;
  background:none;
  border:0;
  border-radius:var(--radius-pill);
  color:var(--fg-muted);
  transition:color .3s var(--ease);
}
.lgpd-fechar:hover{color:var(--accent)}
@media(prefers-reduced-motion:reduce){
  .lgpd-fechar{transition:none}
}
.lgpd-fechar svg{inline-size:17px;block-size:17px;stroke-width:1.6}

.lgpd-lead{
  font-size:14px;
  line-height:1.6;
  color:var(--fg-2);
  max-width:56ch;
  margin-top:10px;
}

.lgpd-lista{margin-top:22px}

.lgpd-item{border-top:1px solid var(--rule)}
.lgpd-item:first-child{border-top:0}

.lgpd-cat{
  /* position:relative não é enfeite: o <input> real é .visually-hidden, e
     .visually-hidden é position:absolute. Sem um ancestral posicionado AQUI,
     ele se ancora no <dialog> inteiro — e aí o Tab que chega no interruptor
     da última categoria rola o painel de volta ao topo, porque é para lá que
     o navegador acha que o foco foi. */
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:18px 0;
  cursor:pointer;
}
/* A categoria travada não é clicável, e o cursor tem de dizer isso antes do
   clique — o `disabled` do input já impede a troca, mas em silêncio. */
.lgpd-cat.is-fixa{cursor:default}

/* O interruptor.
   O <input> real leva a primitiva .visually-hidden do core: fora da tela,
   inteiro para o teclado e para o leitor de tela — é o uso 2 documentado
   nela. O desenho fica no irmão .lgpd-switch, e não em ::after do próprio
   input, porque pseudo-elemento em controle de formulário depende de
   `appearance:none` e ainda assim varia entre motores. Com um irmão de
   verdade, o que se desenha é uma caixa comum. */
.lgpd-switch{
  position:relative;
  flex:0 0 auto;
  inline-size:46px;
  block-size:26px;
  margin-block-start:2px;
  border:1px solid var(--rule-2);
  border-radius:var(--radius-pill);
  background:none;
  transition:background-color .3s var(--ease),border-color .3s var(--ease);
}
.lgpd-switch::after{
  content:"";
  position:absolute;
  inset-block-start:3px;
  inset-inline-start:3px;
  inline-size:18px;
  block-size:18px;
  border-radius:var(--radius-pill);
  background:var(--fg-muted);
  transition:transform .3s var(--ease),background-color .3s var(--ease);
}
.lgpd-check:checked + .lgpd-switch{background:var(--accent);border-color:var(--accent)}
.lgpd-check:checked + .lgpd-switch::after{transform:translateX(20px);background:var(--bg)}
/* O foco é do input, mas o anel tem de desenhar em volta do que se vê. */
.lgpd-check:focus-visible + .lgpd-switch{outline:2px solid var(--accent);outline-offset:3px}
.lgpd-check:disabled + .lgpd-switch{opacity:.45}
@media(prefers-reduced-motion:reduce){
  .lgpd-switch,
  .lgpd-switch::after{transition:none}
}

.lgpd-corpo{display:block;min-width:0}

.lgpd-nome{
  display:block;
  font-family:var(--display);
  font-weight:700;
  font-size:14.5px;
  letter-spacing:-.005em;
  color:var(--fg);
}

.lgpd-fixa{
  font-family:var(--sans);
  font-weight:400;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--fg-muted);
  margin-inline-start:8px;
}

.lgpd-desc{
  display:block;
  font-size:13px;
  line-height:1.6;
  color:var(--fg-2);
  max-width:62ch;
  margin-top:5px;
}

.lgpd-painel-acoes{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
  padding-top:22px;
  border-top:1px solid var(--rule);
}

/* Tipografia pela primitiva .nota do core; margem e medida ficam aqui — 64ch
   porque a nota mora dentro do painel de preferências, não na coluna da
   página. */
.lgpd-nota{
  --nota-max:64ch;
  margin-top:18px;
}
.lgpd-nota-forte{color:var(--fg-2)}

/* ===== Telas estreitas =====
   Media query de largura no fim do bloco, como manda o §6.6. */

@media(max-width:720px){
  /* Os botões ocupam a linha inteira e ficam empilhados: lado a lado em
     390px, "Recusar não essenciais" não cabe sem quebrar em duas linhas
     dentro da pílula. Empilhados, os dois têm exatamente a mesma caixa —
     que é o ponto inegociável desta peça. */
  .lgpd-bar-acoes{width:100%;flex-direction:column;align-items:stretch;gap:12px}
  .lgpd-par{grid-template-columns:1fr}
  .lgpd-preferencias{align-self:flex-start}
  .lgpd-bar-wrap{gap:16px}
  .lgpd-bar-corpo{font-size:13px}
  .lgpd-painel-acoes{flex-direction:column;align-items:stretch}
}

@media(max-width:480px){
  /* O painel encosta nas bordas: 660px de largura pedida contra 390px de
     tela deixaria 16px de cada lado, e a lista de categorias fica apertada
     demais para o interruptor caber ao lado do texto. */
  .lgpd-painel{inline-size:calc(100vw - 20px);max-block-size:92vh}
  .lgpd-quadro{max-block-size:92vh}
  .lgpd-cat{gap:12px}
  .lgpd-switch{inline-size:42px;block-size:24px}
  .lgpd-switch::after{inline-size:16px;block-size:16px}
  .lgpd-check:checked + .lgpd-switch::after{transform:translateX(18px)}
}