/* =====================================================
   AVISO DE COOKIES — montado pelo cookies-v2.js em todas as páginas.
   Arquivo próprio, carregado depois do CSS principal. Segue o tema claro/escuro
   pelos tokens e reaproveita .btn e .btn-outline.
   No computador é um cartão no canto de baixo, à esquerda (o WhatsApp fica à
   direita). No celular vira uma faixa no pé da tela: o botão do WhatsApp sobe
   e a página ganha espaço no fim, pela altura que o JS mede (--cookies-altura).
   v2 (10/2026): o aviso faz duas perguntas (medição e anúncios). "Escolher"
   troca os botões Recusar e Aceitar pelas duas opções, desmarcadas.
   ===================================================== */

.cookies-aviso{
  position:fixed;left:24px;bottom:24px;z-index:90;
  width:min(430px, calc(100vw - 48px));box-sizing:border-box;
  display:flex;flex-direction:column;gap:14px;
  padding:20px 22px;
  background:var(--surface);color:var(--text);
  border:1px solid var(--line-strong);border-radius:var(--radius-l);
  box-shadow:var(--shadow-2);
  font-family:var(--font-body);
  animation:cookiesSobe .4s cubic-bezier(.22,.8,.3,1);
}
.cookies-aviso[hidden]{display:none;}
.cookies-aviso:focus{outline:none;}
.cookies-aviso:focus-visible{outline:3px solid var(--panel);outline-offset:3px;}

.cookies-aviso-texto p{margin:0;font-size:14px;line-height:1.55;color:var(--text);}
.cookies-aviso-texto strong{color:var(--house);font-weight:700;}
.cookies-aviso-texto a{color:var(--house);font-weight:700;border-bottom:2px solid var(--sun);white-space:nowrap;}
.cookies-aviso-texto .cookies-aviso-estado{margin-top:8px;font-size:13px;font-weight:600;color:var(--text-soft);}

/* Os dois botões têm o mesmo tamanho e o mesmo estilo: recusar é tão fácil quanto aceitar. */
.cookies-aviso-acoes{display:flex;gap:10px;}
/* background: o .btn-outline nasceu para <a>; num <button> sobraria o cinza padrão do navegador. */
.cookies-aviso-acoes .btn{flex:1 1 0;min-height:44px;padding:0 16px;font-size:14.5px;background:transparent;}
.cookies-aviso-acoes .btn:hover{background:var(--surface-2);}
/* O atributo hidden perde para o display:flex destes blocos sem esta regra. */
.cookies-aviso-acoes[hidden],.cookies-aviso-escolha[hidden]{display:none;}

/* "Escolher" é um botão com cara de link, dentro do texto. A área de toque é o
   ::after, maior que a letra: padding no próprio botão empurraria a linha. */
.cookies-aviso-link{
  position:relative;-webkit-appearance:none;appearance:none;background:none;border:0;
  padding:0;margin:0 0 0 8px;line-height:inherit;
  font:inherit;font-weight:700;color:var(--house);cursor:pointer;
  text-decoration:underline;text-decoration-color:var(--sun);text-decoration-thickness:2px;text-underline-offset:3px;
}
.cookies-aviso-link::after{content:"";position:absolute;inset:-12px -8px;}
.cookies-aviso-link:focus-visible{outline:3px solid var(--panel);outline-offset:2px;border-radius:4px;}

/* As duas opções separadas e o botão que grava a escolha. */
.cookies-aviso-escolha{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;}
.cookies-aviso-escolha label{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14.5px;font-weight:600;color:var(--text);cursor:pointer;}
.cookies-aviso-escolha input{width:20px;height:20px;margin:0;flex-shrink:0;accent-color:var(--house);}
.cookies-aviso-escolha .btn{flex:1 1 100%;min-height:44px;padding:0 16px;font-size:14.5px;background:transparent;}
.cookies-aviso-escolha .btn:hover{background:var(--surface-2);}

@keyframes cookiesSobe{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}

/* O "Saiba mais" do aviso leva a privacidade.html#cookies: sem isto o cabeçalho fixo cobre o título */
#cookies,#aviso-anuncios{scroll-margin-top:124px;}

@media (max-width:640px){
  .cookies-aviso{
    left:0;right:0;bottom:0;width:auto;gap:12px;
    padding:16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-width:1px 0 0;border-radius:var(--radius-l) var(--radius-l) 0 0;
  }
  .cookies-aviso-texto p{font-size:13.5px;line-height:1.5;}
  /* As duas opções cabem lado a lado a partir de 360px: uma linha a menos de altura. */
  .cookies-aviso-escolha{gap:2px 12px;}
  .cookies-aviso-escolha label{font-size:14px;gap:6px;}
  .cookies-aviso-escolha input{width:18px;height:18px;}
  /* A faixa ocupa o pé da tela: o WhatsApp sobe e o fim do rodapé não fica escondido atrás dela */
  .cookies-aviso-aberto .whatsapp-float{bottom:calc(var(--cookies-altura, 170px) + 14px);}
  .cookies-aviso-aberto body{padding-bottom:var(--cookies-altura, 170px);}
}

/* O link "Cookies" fica no fim da última linha do rodapé, bem onde o botão do
   WhatsApp flutua no celular. A linha encolhe para o link não ficar embaixo dele
   (o Trabalhe conosco não tem o botão e fica como está). */
@media (max-width:640px){
  .site-footer:has(~ .whatsapp-float) .footer-bottom{padding-right:80px;}
}

@media (prefers-reduced-motion: reduce){
  .cookies-aviso{animation:none;}
}