/* O aviso de consentimento — folha própria.
 *
 * ⚠️ SEPARADA do style.css por pedido de Ronaldo, como nos outros sites da
 * casa: nada de aviso de cookie misturado no sistema visual do site. E há um
 * motivo técnico junto — ela carrega DEPOIS da folha principal, fora do
 * caminho crítico da primeira pintura.
 *
 * ⚠️ USA OS TOKENS DA MARCA, e nenhum valor solto. O aviso é do site, não uma
 * peça genérica colada por cima: mesma superfície escura do cabeçalho, mesmo
 * --raio de 2px, mesma escala de espaço. A régua
 * `verificar-sistema-visual.sh` confere que os tokens citados no
 * _meta/SISTEMA-VISUAL.md existem de fato, e estes entram na conta.
 */

/* ⚠️ ELE NÃO COBRE O CONTEÚDO, e isso é invariante 8 na prática. Nasce colado
   ao pé da tela, sem fundo escurecendo a página, sem travar a rolagem e sem
   `position: fixed` em cima do texto: quem ignorar o aviso lê o site inteiro
   do mesmo jeito. Um aviso que sequestra a página é o padrão da internet e é
   exatamente o que a casa não faz. */
.consentimento {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;                      /* acima do .zap, abaixo do lightbox */
  padding: var(--e2) 0 calc(var(--e2) + env(safe-area-inset-bottom, 0px));
  pointer-events: none;             /* só a caixa recebe clique */
}

.consentimento[hidden] { display: none; }

.consentimento__caixa {
  pointer-events: auto;
  display: grid;
  gap: var(--e2);
  padding: var(--e3);
  background: var(--superficie);
  border: 1px solid var(--linha-escura);
  border-radius: var(--raio);
  box-shadow: 0 10px 40px rgb(0 0 0 / .45);
}

.consentimento__titulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--tinta-clara);
}

/* A mesma regra de corpo de texto sobre superfície escura que vale no resto
   do site (SISTEMA-VISUAL › Cor de texto): corpo é o tom suave, nunca o cheio. */
.consentimento__texto {
  margin: 0;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--tinta-clara-suave);
}

.consentimento__texto a {
  color: var(--tinta-clara);
  text-underline-offset: .2em;
}

.consentimento__acao {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1);
}

/* ⚠️ O "Recusar" é `.botao--contorno`, que no sistema visual nasce com
   `color: var(--tinta)` — quase preto, para superfície CLARA. Aqui ele está
   sobre o --superficie escuro, e sem esta linha o rótulo sairia preto no
   escuro: botão visivelmente vazio. É o mesmo defeito que o CTA do cabeçalho
   teve e que está registrado em ESTRATEGIA §0.11 — a diferença é que lá ele
   foi descoberto na tela, e aqui foi previsto. */
.consentimento .botao--contorno {
  color: var(--tinta-clara);
  border-color: var(--grafite-700);
}
.consentimento .botao--contorno:hover { background: var(--elevado); }

/* A partir do tablet a caixa deixa de ser uma pilha e vira uma linha: o texto
   ocupa o espaço e os botões ficam à direita, onde o polegar não os alcança
   por acidente ao rolar. */
@media (min-width: 720px) {
  .consentimento__caixa {
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: var(--e4);
  }
  .consentimento__titulo { grid-column: 1; }
  .consentimento__texto  { grid-column: 1; }
  .consentimento__acao   { grid-column: 2; grid-row: 1 / span 2; }
}