/* ============================================================
   Consentimento de cookies
   Mesmos tokens do base.css: carvão com linha fina, raio 6, Clash no
   título, mono na estrutura. O rosa fica no botão primário e no estado
   "ligado" da chave. Nada de pill, nada de canto vivo.
   O banner é montado por consentimento.js; sem JS ele não existe.
   ============================================================ */

.cookies{
  position:fixed;z-index:150;
  left:var(--margem);bottom:clamp(14px,2vw,24px);
  width:min(520px,calc(100vw - 2 * var(--margem)));
  max-height:calc(100vh - 28px);max-height:calc(100dvh - 28px);overflow-y:auto;
  background:var(--carvao);color:var(--texto);
  border:1px solid var(--linha);border-radius:6px;
  padding:clamp(20px,2.4vw,28px);
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  animation:cookies-entra .5s var(--mola) both;
}
.cookies [hidden]{display:none!important}
@keyframes cookies-entra{from{opacity:0;transform:translateY(18px)}}

.cookies__olho{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.cookies__olho::before{content:'';width:8px;height:8px;background:var(--rosa);flex:none}

.cookies__titulo{font-size:clamp(24px,2.6vw,30px);line-height:1.02;outline:none}

.cookies__texto{margin-top:14px;max-width:none;font-size:15.5px;line-height:1.55;
  color:var(--texto-medio)}
.cookies__texto a{color:var(--creme);border-bottom:1px solid var(--rosa);
  transition:color .2s}
.cookies__texto a:hover{color:var(--rosa)}

/* ── categorias ── */
.cookies__lista{margin-top:20px;border-top:1px solid var(--linha-fina)}
.cookies__item{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:start;
  padding:16px 0;border-bottom:1px solid var(--linha-fina)}
.cookies__nome{font-family:var(--display);font-weight:600;font-size:18px;
  letter-spacing:var(--track-display);line-height:1.2;cursor:pointer}
.cookies__fixo{margin-left:10px;font-family:var(--mono);font-weight:400;font-size:12px;
  letter-spacing:var(--track-micro);text-transform:uppercase;color:var(--texto-fraco);
  white-space:nowrap}
.cookies__desc{margin-top:5px;max-width:none;font-size:14px;line-height:1.5;
  color:var(--texto-medio)}

/* chave: trilho e miolo retos, raio 6 e 3. Segue a gramática do botão. */
.cookies__chave{-webkit-appearance:none;appearance:none;position:relative;flex:none;
  width:46px;height:26px;margin-top:1px;border-radius:6px;cursor:pointer;
  background:transparent;box-shadow:inset 0 0 0 1px var(--linha);
  transition:background .2s,box-shadow .2s}
.cookies__chave::before{content:'';position:absolute;top:4px;left:4px;width:18px;height:18px;
  border-radius:3px;background:var(--texto-fraco);
  transition:transform .3s var(--mola),background .2s}
.cookies__chave:checked{background:var(--rosa);box-shadow:none}
.cookies__chave:checked::before{transform:translateX(20px);background:var(--preto)}
.cookies__chave:disabled{opacity:.55;cursor:not-allowed}

/* ── ações ── */
.cookies__acoes{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:22px}
.cookies .btn,
button.btn[data-cookies-abrir]{border:0;padding:0;background:none;color:inherit;
  cursor:pointer;font:inherit;-webkit-appearance:none;appearance:none}
.cookies .btn{margin:0}
.cookies .link{background:none;border:0;border-bottom:1px solid var(--rosa);
  padding:0 0 5px;margin-left:4px;cursor:pointer}

/* Celular: o banner estava com 41% da tela (350px de 844) e cobria o CTA do
   hero. Aqui ele vira uma barra compacta: sem o rótulo (o título já diz),
   Aceitar e Recusar lado a lado e do mesmo tamanho, link de personalizar
   embaixo. */
@media (max-width:520px){
  .cookies{left:12px;right:12px;bottom:12px;width:auto;padding:16px}
  .cookies__olho{display:none}
  .cookies__titulo{font-size:20px}
  .cookies__texto{margin-top:8px;font-size:14px;line-height:1.5}
  .cookies__lista{margin-top:12px}
  .cookies__item{gap:14px;padding:12px 0}
  .cookies__nome{font-size:16px}
  .cookies__desc{margin-top:3px;font-size:13px;line-height:1.45}
  .cookies__acoes{display:grid;grid-template-columns:1fr 1fr;gap:6px 8px;margin-top:14px}
  .cookies .btn{width:100%;height:44px}
  .cookies .btn > span:first-child{flex:1;justify-content:center;padding:0 8px}
  .cookies .btn > span:last-child{width:34px}
  .cookies .link{grid-column:1 / -1;justify-self:center;margin:2px 0 0;padding-bottom:3px}
}
/* telas de 320px: o rótulo não cabe com o ícone ao lado */
@media (max-width:359px){
  .cookies .btn > span:last-child{display:none}
}

@media print{.cookies{display:none}}

/* ── rodapé: política e reabertura ── */
.footer-copy a,
.footer-copy .cookies-reabrir{color:inherit;font:inherit;letter-spacing:inherit;
  text-transform:inherit;background:none;border:0;padding:0;cursor:pointer;
  text-decoration:underline;text-decoration-color:var(--linha);
  text-underline-offset:4px;transition:color .2s,text-decoration-color .2s}
.footer-copy a:hover,
.footer-copy .cookies-reabrir:hover{color:var(--rosa);text-decoration-color:var(--rosa)}
/* área de toque: o botão tem 17px de altura */
.footer-copy a,.footer-copy .cookies-reabrir{position:relative}
.footer-copy a::before,.footer-copy .cookies-reabrir::before{content:'';position:absolute;inset:-14px -6px}