/* Consentimento de cookies: modal centrado, sobre a página inteira.

   NOTA SOBRE O VÉU. O pedido era 5% de preto. Num site de fundo #14171a isso é
   literalmente invisível — escurecer um fundo já escuro em 5% não produz
   diferença perceptível, e o modal não leria como camada separada. O véu abaixo
   usa 62%, que é o que de fato separa. O valor está isolado numa variável:
   trocar para rgba(0,0,0,.05) é uma linha, se a preferência for essa mesmo. */

.consentimento{
  --veu: rgba(0,0,0,.62);

  position:fixed;
  inset:0;
  z-index:90;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--v-3);
  background:var(--veu);
  /* O véu escurece o que está atrás; nada de desfoque. */
}

.consentimento-caixa{
  width:100%;
  max-width:34rem;
  /* dvh e não vh: em celular a barra de endereço entra e sai da conta, e com
     100vh o rodapé do modal — onde estão os botões — fica fora da tela. O vh
     fica como reserva para navegador sem dvh. */
  max-height:calc(100vh - var(--v-4));
  max-height:calc(100dvh - var(--v-4));
  overflow-y:auto;
  overscroll-behavior:contain;
  background:var(--chapa);
  color:var(--chapa-txt);
  border:1px solid var(--azul);
  padding:var(--v-4);
}

.consentimento-titulo{
  color:var(--azul-claro);
  margin:0 0 var(--v-2);
}

.consentimento p{
  margin:0 0 var(--v-3);
  font-size:1rem;
  color:var(--chapa-txt);
  max-width:none;
}
.consentimento p:last-of-type{margin-bottom:var(--v-4)}
.consentimento a{color:var(--azul-claro)}

/* As ações grudam no rodapé da caixa rolável. Sem isso, em janela baixa (celular
   deitado) os botões caem abaixo da dobra do modal e o visitante precisa
   descobrir que há rolagem interna para conseguir decidir — num diálogo cuja
   única saída é decidir, isso é um beco. */
.consentimento-acoes{
  position:sticky;
  bottom:calc(var(--v-4) * -1);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--v-2);
  background:var(--chapa);
  padding:var(--v-2) 0 0;
  margin-bottom:calc(var(--v-4) * -1);
}

/* Mesmo tamanho, peso e contraste nos dois botões. Recusar precisa ser tão fácil
   e tão visível quanto aceitar — peso desigual é consentimento induzido, e a
   ANPD trata isso como vício de consentimento. */
.btn-consentimento{
  width:100%;
  text-align:center;
  background:none;
  color:var(--chapa-txt);
  border-color:var(--chapa-txt-2);
}
.btn-consentimento:hover{
  background:var(--chapa-txt);
  border-color:var(--chapa-txt);
  color:var(--chapa);
}
.btn-consentimento:focus-visible{outline:2px solid var(--azul-claro); outline-offset:2px}

/* Enquanto o modal está aberto a página não rola atrás dele. Sem JavaScript
   isto não é possível por CSS puro, então o :has() resolve — e onde não houver
   suporte a consequência é apenas a página rolar atrás, que é inofensivo. */
body:has(.consentimento){overflow:hidden}

@media (max-width: 480px){
  .consentimento{padding:var(--v-2)}
  .consentimento-caixa{padding:var(--v-3)}
  .consentimento p{font-size:.9375rem}
  /* O recuo das ações acompanha o padding menor da caixa. */
  .consentimento-acoes{
    bottom:calc(var(--v-3) * -1);
    margin-bottom:calc(var(--v-3) * -1);
  }
  /* Botões um sob o outro só quando a largura não comporta os dois lado a lado
     com área de toque decente. Continuam de mesmo tamanho e mesmo peso. */
  .consentimento-acoes{grid-template-columns:1fr}
}

/* Altura curta — celular deitado, ou janela baixa no desktop. É o caso que
   realmente quebra: com o modal centrado e a caixa alta, os botões saem da
   tela. Aqui o texto encolhe, a caixa cola no topo e a rolagem interna assume. */
@media (max-height: 560px){
  .consentimento{align-items:flex-start; padding:var(--v-2)}
  .consentimento-caixa{
    max-height:calc(100vh - var(--v-3));
    max-height:calc(100dvh - var(--v-3));
    padding:var(--v-3);
  }
  .consentimento-titulo{margin-bottom:var(--v-1)}
  .consentimento p{font-size:.875rem; margin-bottom:var(--v-2)}
  .consentimento p:last-of-type{margin-bottom:var(--v-3)}
  .consentimento-acoes{
    bottom:calc(var(--v-3) * -1);
    margin-bottom:calc(var(--v-3) * -1);
  }
  /* Deitado sobra largura: os dois botões voltam a caber lado a lado, o que
     poupa a altura que falta. */
  .consentimento-acoes{grid-template-columns:1fr 1fr}
}

@media (prefers-reduced-motion: no-preference){
  .consentimento-caixa{
    animation:consentimento-entra var(--t-entrada) var(--curva-entrada) both;
  }
  @keyframes consentimento-entra{
    from{opacity:0; transform:translateY(8px)}
    to{opacity:1; transform:none}
  }
}