/* ============================================================
   COOKIES — banner de consentimento LGPD + painel de preferências
   Segue o visual do site: superfície #161616, gradiente fogo,
   Azureon nos títulos, Lato no corpo, raio 16px.
   ============================================================ */

:root{
  --ck-surface:#161616;
  --ck-surface2:#1e1e1e;
  --ck-border:rgba(255,123,0,.25);
  --ck-text:#f0f0f0;
  --ck-text-dim:#b3b3b3;
  --ck-fire:#ff7b00;
  --ck-fire-dark:#ce440e;
  --ck-raio:16px;
  --ck-ease:cubic-bezier(.22,1,.36,1);
}

/* blindagem: cada página tem seu CSS (h2/h3/p/button com borda, fundo,
   margem…). Aqui o componente zera tudo e define o próprio visual. */
/* :where() zera a especificidade — as regras do componente abaixo sempre vencem */
:where(.ck-banner,.ck-modal-fundo) :where(h2,h3,p,button){
  margin:0;padding:0;border:0;background:none;box-shadow:none;
  letter-spacing:normal;line-height:1.4;width:auto;max-width:none;
}
:where(.ck-banner,.ck-modal-fundo) :where(h2,h3)::before,
:where(.ck-banner,.ck-modal-fundo) :where(h2,h3)::after{content:none}

/* o reset global do SR2.css usa text-transform:capitalize — neutraliza aqui */
.ck-banner,.ck-banner *,.ck-modal-fundo,.ck-modal-fundo *{text-transform:none}
.ck-banner-head h2,.ck-modal-topo h2,.ck-cat-fixa{text-transform:uppercase}

/* ===== BANNER ===== */
.ck-banner{
  position:fixed;left:24px;bottom:24px;z-index:10000;
  width:400px;max-width:calc(100vw - 32px);
  padding:0;margin:0;font-size:16px;   /* o CSS da página estiliza <section>: neutraliza */
  background:var(--ck-surface);color:var(--ck-text);
  border:1px solid var(--ck-border);border-radius:var(--ck-raio);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  font-family:'Lato',Arial,sans-serif;
  overflow:hidden;
  opacity:0;transform:translateY(14px) scale(.98);
  transition:opacity .28s var(--ck-ease),transform .28s var(--ck-ease);
}
.ck-banner.ck-show{opacity:1;transform:none}
.ck-banner[hidden]{display:none}

.ck-banner-head{
  display:flex;align-items:center;gap:8px;
  padding:5px 5px 0;
}
.ck-banner-head svg{width:30px;height:30px;flex-shrink:0;color:var(--ck-fire)}
.ck-banner-head h2{
  margin:0;padding:0;border:0;background:none;font-family:'Azureon','Lato',Arial,sans-serif;
  font-size:25px;letter-spacing:.8px;text-transform:uppercase;color:#fff;
}

.ck-banner-body{padding:5px 5px 0}
.ck-banner-body p{margin:0;padding:0;border:0;background:none;font-size:19px;line-height:1.55;color:#d6d6d6}
.ck-banner-body a{color:var(--ck-fire);text-decoration:underline;text-underline-offset:2px}
.ck-banner-body a:hover{color:var(--ck-fire-dark)}

.ck-banner-acoes{display:flex;flex-direction:column;gap:5px;padding:5px}
.ck-banner-acoes .ck-btn{width:100%;flex:0 0 auto}

/* ===== BOTÕES ===== */
.ck-btn{
  flex:1 1 auto;min-height:52px;padding:0 18px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border-radius:10px;border:none;cursor:pointer;
  font-family:'Lato',Arial,sans-serif;font-size:19px;font-weight:700;line-height:1.25;
  transition:transform .18s var(--ck-ease),background .2s ease,color .2s ease;
}
.ck-btn:hover{transform:translateY(-1px)}
.ck-btn:focus-visible{outline:2px solid var(--ck-fire);outline-offset:2px}
.ck-btn svg{width:20px;height:20px;flex-shrink:0;order:2}   /* ícone sempre à direita do texto */
.ck-btn-primario{background:linear-gradient(135deg,var(--ck-fire-dark),var(--ck-fire));color:#fff}
.ck-btn-primario:hover{background:linear-gradient(135deg,var(--ck-fire),var(--ck-fire-dark))}
.ck-btn-neutro{background:var(--ck-surface2);color:var(--ck-text);border:1px solid rgba(255,255,255,.14)}
.ck-btn-neutro:hover{background:#262626}
.ck-btn-contorno{
  background:transparent;color:var(--ck-text);
  border:1px solid rgba(255,255,255,.22);
}
.ck-btn-contorno:hover{background:var(--ck-surface2);border-color:var(--ck-fire)}

/* ===== PAINEL DE PREFERÊNCIAS ===== */
.ck-modal-fundo{
  position:fixed;inset:0;z-index:10001;
  background:rgba(0,0,0,.68);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:16px;
  opacity:0;transition:opacity .25s var(--ck-ease);
}
.ck-modal-fundo.ck-show{opacity:1}
.ck-modal-fundo[hidden]{display:none}

.ck-modal{
  width:580px;max-width:100%;max-height:min(86dvh,720px);
  padding:0;margin:0;font-size:16px;   /* idem: o painel não herda estilo de página */
  display:flex;flex-direction:column;
  background:var(--ck-surface);color:var(--ck-text);
  border:1px solid var(--ck-border);border-radius:var(--ck-raio);
  box-shadow:0 22px 60px rgba(0,0,0,.55);
  font-family:'Lato',Arial,sans-serif;
  transform:translateY(16px) scale(.97);
  transition:transform .28s var(--ck-ease);
}
.ck-modal-fundo.ck-show .ck-modal{transform:none}

.ck-modal-topo{
  display:flex;align-items:center;gap:10px;
  padding:18px 18px 14px;border-bottom:1px solid rgba(255,255,255,.08);
}
.ck-modal-topo svg{width:28px;height:28px;flex-shrink:0;color:var(--ck-fire)}
.ck-modal-topo h2{
  margin:0;padding:0;border:0;background:none;flex:1;font-family:'Azureon','Lato',Arial,sans-serif;
  font-size:23px;letter-spacing:.7px;text-transform:uppercase;color:#fff;
}
.ck-x{
  width:34px;height:34px;flex-shrink:0;display:grid;place-items:center;
  border:none;border-radius:50%;background:var(--ck-surface2);color:var(--ck-text);
  cursor:pointer;transition:transform .2s var(--ck-ease),background .2s ease;
}
.ck-x:hover{background:#2f2f2f;transform:rotate(90deg)}
.ck-x svg{width:18px;height:18px}

.ck-modal-corpo{padding:16px 18px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.ck-modal-intro{margin:0;padding:0;border:0;background:none;font-size:18px;line-height:1.6;color:#d6d6d6}
.ck-modal-intro a{color:var(--ck-fire);text-decoration:underline;text-underline-offset:2px}

/* ===== CATEGORIA ===== */
.ck-cat{
  background:var(--ck-surface2);border:1px solid rgba(255,255,255,.08);
  border-radius:12px;padding:16px 18px;
}
.ck-cat-topo{display:flex;align-items:center;gap:10px}
.ck-cat-topo h3{margin:0;padding:0;border:0;background:none;flex:1;font-size:21px;font-weight:700;color:#fff}
.ck-cat p{margin:10px 0 0;padding:0;border:0;background:none;font-size:18px;line-height:1.6;color:#d6d6d6}
.ck-cat-fixa{font-size:16px;font-weight:700;color:var(--ck-fire);text-transform:uppercase;letter-spacing:.5px}

/* interruptor */
.ck-switch{position:relative;width:46px;height:26px;flex-shrink:0}
.ck-switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.ck-switch span{
  position:absolute;inset:0;border-radius:999px;background:#3a3a3a;
  transition:background .22s var(--ck-ease);pointer-events:none;
}
.ck-switch span::after{
  content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;transition:transform .22s var(--ck-ease);
}
.ck-switch input:checked + span{background:linear-gradient(135deg,var(--ck-fire-dark),var(--ck-fire))}
.ck-switch input:checked + span::after{transform:translateX(20px)}
.ck-switch input:focus-visible + span{outline:2px solid var(--ck-fire);outline-offset:2px}

.ck-modal-rodape{
  display:flex;flex-wrap:wrap;gap:8px;
  padding:14px 18px 18px;border-top:1px solid rgba(255,255,255,.08);
}

/* link discreto no rodapé do site */
.ck-link{
  background:none;border:none;padding:0;cursor:pointer;
  font:inherit;color:inherit;text-decoration:none;
}
.ck-link:hover{color:var(--ck-fire)}

/* o widget de leads sobe enquanto o banner está aberto (mobile) */
@media (max-width:768px){
  .ck-banner{left:16px;right:16px;bottom:16px;width:auto}
  .ck-banner-acoes .ck-btn{flex:1 1 100%}
  body.ck-aberto .lead-w-btn{bottom:400px}
  body.ck-aberto .lead-w-bubble{bottom:466px}
  .ck-modal-rodape .ck-btn{flex:1 1 100%}
}

@media (prefers-reduced-motion:reduce){
  .ck-banner,.ck-modal,.ck-modal-fundo,.ck-btn,.ck-x,.ck-switch span,.ck-switch span::after{
    transition:none;
  }
}


/* ============================================================
   VARIANTE SIMPLES — usada em links.html
   Dois botões, sem painel de preferências. Segue a paleta da
   página (vermelho #9e1a1a, fundo #0c0c0c, fonte DM Sans) e
   ocupa a menor altura possível, principalmente no celular.
   ============================================================ */

.ck-banner.ck-simples{
  left:50%;right:auto;bottom:18px;
  transform:translate(-50%,14px) scale(.98);
  width:min(560px,calc(100vw - 24px));
  background:#0c0c0c;
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;
  box-shadow:0 14px 38px rgba(0,0,0,.55);
  font-family:'DM Sans','Outfit',Arial,sans-serif;
}
.ck-banner.ck-simples.ck-show{transform:translate(-50%,0) scale(1)}

.ck-simples .ck-simples-linha{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px 0;
}
.ck-simples .ck-simples-linha svg{width:22px;height:22px;flex-shrink:0;color:#9e1a1a}
.ck-simples .ck-simples-linha p{
  margin:0;font-size:14px;line-height:1.35;color:#f0ede8;
}
.ck-simples .ck-simples-linha a{color:#d43b3b;text-decoration:underline;text-underline-offset:2px}

.ck-simples .ck-banner-acoes{
  flex-direction:row;gap:8px;padding:10px 12px 12px;
}
.ck-simples .ck-btn{
  min-height:38px;padding:0 12px;font-size:13px;font-weight:600;gap:7px;
  border-radius:9px;flex:1 1 0;width:auto;
}
.ck-simples .ck-btn svg{width:15px;height:15px}
.ck-simples .ck-btn-primario{background:#9e1a1a;color:#fff}
.ck-simples .ck-btn-primario:hover{background:#b82020}
.ck-simples .ck-btn-neutro{
  background:transparent;color:#f0ede8;border:1px solid rgba(255,255,255,.18);
}
.ck-simples .ck-btn-neutro:hover{background:rgba(255,255,255,.06)}
.ck-simples .ck-btn:focus-visible{outline:2px solid #9e1a1a}

/* celular: o menor card possível */
@media (max-width:768px){
  .ck-banner.ck-simples{
    left:8px;right:8px;bottom:8px;width:auto;max-width:none;
    transform:translate(0,14px) scale(.98);border-radius:12px;
  }
  .ck-banner.ck-simples.ck-show{transform:translate(0,0) scale(1)}
  .ck-simples .ck-simples-linha{gap:8px;padding:8px 10px 0}
  .ck-simples .ck-simples-linha svg{width:18px;height:18px}
  .ck-simples .ck-simples-linha p{font-size:12px;line-height:1.3}
  .ck-simples .ck-banner-acoes{gap:6px;padding:8px 10px 10px}
  .ck-simples .ck-banner-acoes .ck-btn{
    flex:1 1 0;min-height:32px;padding:0 8px;font-size:11px;gap:5px;
  }
  .ck-simples .ck-btn svg{width:13px;height:13px}
  /* nesta variante o widget de leads não precisa subir */
  body.ck-aberto .lead-w-btn{bottom:70px}
  body.ck-aberto .lead-w-bubble{bottom:136px}
}

@media (max-width:360px){
  .ck-simples .ck-banner-acoes .ck-btn{font-size:10px;padding:0 6px}
  .ck-simples .ck-simples-linha p{font-size:11px}
}