/* ============================================================
   BANNER DE CONSENTIMENTO — UpOffice
   Compartilhado pela landing e pelas três páginas legais.

   Uma decisão de forma que é jurídica, não estética: "Aceitar" e
   "Recusar" têm o MESMO peso visual. Botão de aceitar grande e
   colorido ao lado de um "recusar" escondido em cinza é o que a
   ANPD chama de padrão enganoso — recusar precisa ser tão fácil
   quanto aceitar, e aqui é literalmente o mesmo tamanho.
   ============================================================ */

.ck{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:10000;                /* acima do botão do WhatsApp (9998) */
  padding:0 16px 16px;
  padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  display:flex;
  justify-content:center;
  pointer-events:none;          /* só a caixa recebe clique, não a faixa */
}
.ck[hidden]{ display:none; }

.ck-box{
  pointer-events:auto;
  width:100%;
  max-width:880px;
  background:linear-gradient(180deg,#FFFDF8 0%, #FAF3E6 100%);
  border:1px solid rgba(201,154,62,0.45);
  border-radius:18px;
  box-shadow:0 26px 60px -24px rgba(42,36,30,0.45),
             0 4px 14px rgba(42,36,30,0.10);
  padding:22px 24px;
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  color:#2A241E;
  animation:ckSobe .38s cubic-bezier(.2,.7,.3,1);
}
@keyframes ckSobe{
  from{ opacity:0; transform:translateY(18px); }
  to  { opacity:1; transform:none; }
}

.ck-box h2{
  margin:0;
  font-family:'Fraunces', Georgia, serif;
  font-weight:600;
  font-size:19px;
  line-height:1.25;
  letter-spacing:-0.01em;
}
.ck-box p{
  margin:9px 0 0;
  font-size:14.5px;
  line-height:1.6;
  color:#6E6255;
  max-width:64ch;
  text-wrap:pretty;
}
.ck-box a{
  color:#8A6420;              /* 4,9:1 no creme */
  text-decoration:underline;
  text-underline-offset:2px;
}
.ck-box a:hover{ color:#2A241E; }

/* ---------- os botões ---------- */
.ck-acoes{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
  align-items:center;
}
.ck-btn{
  flex:1 1 190px;
  border-radius:11px;
  padding:13px 20px;
  font:inherit;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  text-align:center;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.ck-btn:hover{ transform:translateY(-1px); }

/* mesmo dourado dos botões da página; a borda é quem dá os 3:1 */
.ck-btn--sim{
  background:linear-gradient(135deg,#EBC97F 0%, #D6A94F 100%);
  border:1.5px solid #AE7D24;
  color:#2A241E;
  box-shadow:0 8px 20px -8px rgba(150,105,25,0.45), inset 0 1px 2px rgba(255,255,255,0.65);
}
.ck-btn--sim:hover{ background:linear-gradient(135deg,#F0D291 0%, #DDB259 100%); }

/* recusar: mesma altura, mesma largura, contorno legível (3,5:1) */
.ck-btn--nao{
  background:rgba(255,253,248,0.8);
  border:1.5px solid rgba(42,36,30,0.55);
  color:#2A241E;
}
.ck-btn--nao:hover{ background:#FFFDF8; border-color:#2A241E; }

/* a terceira via é discreta porque não é uma recusa disfarçada:
   quem clica aqui quer escolher item a item, não sair da decisão */
.ck-mais{
  flex:0 0 auto;
  background:none;
  border:0;
  padding:13px 8px;
  font:inherit;
  font-size:14px;
  font-weight:600;
  color:#8A6420;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.ck-mais:hover{ color:#2A241E; }

/* ---------- escolha item a item ---------- */
.ck-detalhe{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid rgba(201,154,62,0.3);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ck-detalhe[hidden]{ display:none; }

.ck-item{
  display:flex;
  align-items:flex-start;
  gap:13px;
  padding:13px 15px;
  border:1px solid rgba(201,154,62,0.26);
  border-radius:13px;
  background:rgba(255,253,248,0.7);
}
.ck-item b{ display:block; font-size:14.5px; font-weight:600; }
.ck-item span{ display:block; margin-top:3px; font-size:13.5px; line-height:1.5; color:#6E6255; }

/* a chave é uma caixa de seleção de verdade por baixo: teclado,
   leitor de tela e o rótulo clicável vêm de graça */
.ck-chave{
  position:relative;
  flex-shrink:0;
  width:44px; height:25px;
  margin-top:2px;
}
.ck-chave input{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  margin:0;
  opacity:0;
  cursor:pointer;
}
.ck-chave i{
  position:absolute;
  inset:0;
  border-radius:999px;
  background:rgba(42,36,30,0.22);
  transition:background .2s ease;
  pointer-events:none;
}
.ck-chave i::after{
  content:'';
  position:absolute;
  top:3px; left:3px;
  width:19px; height:19px;
  border-radius:50%;
  background:#FFFDF8;
  box-shadow:0 1px 3px rgba(42,36,30,0.35);
  transition:transform .2s cubic-bezier(.3,.7,.3,1);
}
.ck-chave input:checked + i{ background:linear-gradient(90deg,#C99A3E,#8A6420); }
.ck-chave input:checked + i::after{ transform:translateX(19px); }
.ck-chave input:focus-visible + i{ outline:2px solid #8A6420; outline-offset:3px; }
.ck-chave input:disabled{ cursor:default; }
.ck-chave input:disabled + i{ background:#C3B393; }

/* o .ck-btn traz flex:1 1 190px, pensado para a fileira horizontal lá em
   cima. Aqui dentro o eixo é vertical, então aqueles 190px viravam ALTURA
   e o botão saía com a cara de um cartaz. */
.ck-salvar{ flex:0 0 auto; margin-top:4px; }

:where(.ck) :focus-visible{ outline:2px solid #8A6420; outline-offset:3px; }

@media (max-width:640px){
  .ck{ padding:0 10px 10px; padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px)); }
  .ck-box{ padding:18px 18px 20px; border-radius:16px; }
  .ck-box h2{ font-size:17.5px; }
  .ck-box p{ font-size:14px; }
  .ck-acoes{ gap:9px; }
  /* Os dois lado a lado também no celular. O flex:1 1 0 divide a largura
     em partes iguais em vez de dar 100% pra cada um (que era o que
     empilhava), e o min-width:0 impede que a palavra dentro do botão
     force uma largura maior que a metade disponível.
     O recuo lateral encolhe porque a 320px de tela cada botão fica com
     ~127px: com os 20px de antes, sobrava pouco pro texto. */
  .ck-btn{ flex:1 1 0; min-width:0; padding:13px 12px; }
  /* o "escolher item a item" continua sozinho embaixo: ele não é uma
     terceira resposta, é um caminho pra dentro da mesma decisão */
  .ck-mais{ flex:1 1 100%; padding:6px 0 0; }
}

@media (prefers-reduced-motion: reduce){
  .ck-box{ animation:none; }
  .ck-btn:hover{ transform:none; }
  .ck-chave i, .ck-chave i::after{ transition:none; }
}