/* Aviso de consentimento — compartilhado pelas tres paginas do dominio.
 *
 * POR QUE TOKENS PROPRIOS (`--cst-*`) EM VEZ DE REUSAR OS DA PAGINA:
 * a home e a landing declaram `--ink` com sentidos OPOSTOS — na home e o fundo
 * quase preto (#071015), na landing e o texto escuro sobre papel claro
 * (#231d18). Reusar o nome daria cor errada em uma das duas. Aqui cada valor e
 * declarado por extenso, e a pagina escolhe o tema pelo atributo `data-tema`.
 *
 * Tema padrao: escuro (home e privacidade). A landing pede `data-tema="claro"`.
 *
 * Sem `style=""` e sem `<style>` em nenhuma pagina: a CSP da home traz
 * `style-src 'self'` sem 'unsafe-inline', e este arquivo respeita isso.
 */

.cst {
  --cst-fundo: #0b1418;
  --cst-texto: #e7e6df;
  --cst-fraco: #aeb6b6;
  --cst-linha: rgb(231 230 223 / 22%);
  --cst-firme-fundo: #e7e6df;
  --cst-firme-texto: #071015;
  --cst-foco: #bd7d52;

  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 60;
  background: var(--cst-fundo);
  border-top: 1px solid var(--cst-linha);
  box-shadow: 0 -14px 36px rgb(0 0 0 / 34%);
}

.cst[data-tema="claro"] {
  --cst-fundo: #fbf8f1;
  --cst-texto: #231d18;
  --cst-fraco: #5a5048;
  --cst-linha: rgb(59 43 31 / 20%);
  --cst-firme-fundo: #6d392b;
  --cst-firme-texto: #fbf8f1;
  --cst-foco: #ae6045;

  box-shadow: 0 -12px 32px rgb(35 29 24 / 7%);
}

.cst[hidden] { display: none; }

.cst__caixa {
  box-sizing: border-box;
  max-width: 76rem;
  margin: 0 auto;
  padding: 1rem clamp(1rem, 4vw, 2.5rem);
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  /* o painel aberto nao pode passar da tela: rola dentro de si mesmo */
  max-height: 88vh;
  max-height: 88svh;
  overflow-y: auto;
}

.cst__titulo {
  margin: 0 0 .4rem;
  color: var(--cst-texto);
  font-family: inherit;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cst__texto {
  max-width: 68ch;
  margin: 0 0 .9rem;
  color: var(--cst-texto);
  font-size: .92rem;
  line-height: 1.55;
}

.cst__texto a { color: var(--cst-texto); text-underline-offset: .2em; }

.cst__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

/* DESTAQUE EQUILIBRADO, e de proposito: "Aceitar todos" e "Rejeitar opcionais"
   usam a MESMA classe `--firme`, logo o mesmo tamanho, peso e contraste.
   Recusar nao custa um clique a mais nem um passo escondido. */
.cst__botao {
  min-height: 44px;
  padding: .7rem 1.35rem;
  border: 1px solid var(--cst-firme-fundo);
  border-radius: 0;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.2;
  text-transform: uppercase;
  cursor: pointer;
}

.cst__botao--firme {
  background: var(--cst-firme-fundo);
  color: var(--cst-firme-texto);
}

.cst__botao--linha {
  background: transparent;
  color: var(--cst-texto);
  border-color: var(--cst-linha);
}

.cst__botao:focus-visible {
  outline: 3px solid var(--cst-foco);
  outline-offset: 3px;
}

/* ---------- o painel de categorias ---------- */

.cst__painel {
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--cst-linha);
}

.cst__painel[hidden] { display: none; }

.cst__nota {
  margin: 0 0 .9rem;
  max-width: 68ch;
  color: var(--cst-fraco);
  font-size: .82rem;
  line-height: 1.5;
}

.cst__opcao {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  max-width: 68ch;
  margin-bottom: .85rem;
  cursor: pointer;
}

.cst__caixinha {
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  margin: .15rem 0 0;
  accent-color: var(--cst-firme-fundo);
  cursor: pointer;
}

.cst__caixinha:focus-visible {
  outline: 3px solid var(--cst-foco);
  outline-offset: 2px;
}

.cst__opcao-texto {
  color: var(--cst-texto);
  font-size: .88rem;
  line-height: 1.5;
}

.cst__opcao-texto strong { display: block; }

.cst__acoes--painel { margin-top: .2rem; }

/* ---------- o controle que reabre as preferencias ---------- */

.cst-reabrir {
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}

.cst-reabrir:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

/* ---------- movimento, so quando permitido ---------- */

@media (prefers-reduced-motion: no-preference) {
  .cst { transition: transform 260ms ease, opacity 260ms ease; }
  .cst--entrando { transform: translateY(100%); opacity: 0; }
  .cst__botao { transition: opacity 160ms ease; }
  .cst__botao:hover { opacity: .88; }
}

/* ---------- telas estreitas ---------- */

@media (max-width: 44rem) {
  .cst__caixa {
    padding: .9rem 1rem;
    padding-bottom: calc(.9rem + env(safe-area-inset-bottom, 0px));
  }
  .cst__texto { font-size: .85rem; }
  .cst__acoes { width: 100%; }
  /* os tres botoes em coluna: cada um com area de toque inteira, e "Rejeitar"
     tao alcancavel quanto "Aceitar". */
  .cst__botao { flex: 1 1 100%; }
}