/* CD Black November — página de campanha clara, cupons em quadradinhos. Feita para celular. */
:root{
  --fundo:#f5f5f5;--branco:#fff;--linha:#ececec;--tinta:#222;--cinza:#757575;
  --lar:#ee4d2d;--lar-esc:#d73211;--lar-claro:#fff1ed;--verde:#16a34a;
  --sist:Roboto,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.cdblack{margin:0;background:var(--fundo);color:var(--tinta);font-family:var(--sist);line-height:1.4;-webkit-font-smoothing:antialiased}
.cdblack [hidden]{display:none!important}
.cdblack img{max-width:100%;height:auto;display:block}
.cdblack h1,.cdblack h2,.cdblack h3,.cdblack p{margin:0;font-family:inherit}
.cdblack a{color:inherit}
body.travado{overflow:hidden}

/* ---------- miolo ---------- */
.bk-env{max-width:560px;margin:0 auto;padding:0 0 28px}
.bk-banner{background:var(--lar);aspect-ratio:1536/707;overflow:hidden}
.bk-banner img{width:100%;height:100%;object-fit:cover}
.bk-h1{padding:16px 14px 0}
.bk-h1 img{width:100%;max-width:360px;margin:0 auto}

.bk-banner{position:relative}
.bk-marca{position:absolute;top:10px;left:10px;z-index:2;display:block;padding:6px 8px;border-radius:10px;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.bk-marca img{width:46px;height:auto}

/* painel de números */
.bk-numeros{display:flex;margin:12px 12px 0;padding:10px 4px;border-radius:14px;background:var(--branco);border:1px solid var(--linha)}
.bk-num{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 4px}
.bk-num+.bk-num{border-left:1px solid var(--linha)}
.bk-num b{font-size:20px;font-weight:900;line-height:1.1;color:var(--tinta)}
.bk-num span{display:inline-flex;align-items:center;gap:4px;margin-top:3px;font-size:11.5px;font-weight:600;color:var(--cinza);white-space:nowrap}
.bk-ponto{width:7px;height:7px;border-radius:50%;background:var(--verde);flex-shrink:0;animation:bkPulsa 2s infinite}
@keyframes bkPulsa{0%{box-shadow:0 0 0 0 rgba(22,163,74,.5)}70%{box-shadow:0 0 0 6px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
.fogo{width:13px;height:13px;color:var(--lar);flex-shrink:0}

/* contagem (opcional, ligada no painel) */
.bk-contagem{margin:10px 12px 0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 8px 7px 12px;border-radius:12px;background:var(--branco);border:1px solid var(--linha)}
.bk-contagem__rotulo{font-size:13px;font-weight:800;line-height:1.2}
.bk-contagem__rotulo em{font-style:normal;color:var(--lar)}
.bk-contagem__relogio{display:flex;gap:4px;flex-shrink:0}
.bk-contagem__relogio span{min-width:32px;text-align:center;background:var(--lar);color:#fff;border-radius:7px;padding:4px 3px 3px;font-size:15px;font-weight:900;line-height:1}
.bk-contagem__relogio span small{display:block;font-size:8px;font-weight:800;letter-spacing:.5px;margin-top:2px;opacity:.85;text-transform:uppercase}

/* ---------- filtro por categoria ---------- */
.bk-cats-marco{height:1px;margin-top:11px}
.bk-cats{position:sticky;top:0;z-index:20;background:var(--fundo);padding:7px 0;transition:box-shadow .2s,background .2s}
.bk-cats.presa{background:var(--branco);box-shadow:0 2px 10px rgba(0,0,0,.08)}
.bk-cats__trilho{display:flex;gap:8px;overflow-x:auto;padding:0 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.bk-cats__trilho::-webkit-scrollbar{display:none}
.bk-cat{flex:0 0 auto;min-height:38px;padding:0 14px;border:1px solid #dcdcdc;border-radius:999px;background:var(--branco);color:#333;
  font-family:var(--sist);font-size:13.5px;font-weight:600;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}
.bk-cat span{margin-left:3px;font-weight:500;color:#999}
.bk-cat[aria-pressed="true"]{background:var(--lar);border-color:var(--lar);color:#fff}
.bk-cat[aria-pressed="true"] span{color:rgba(255,255,255,.8)}
.bk-cat:focus-visible{outline:3px solid #222;outline-offset:2px}

/* ---------- blocos de cupons ---------- */
.cs-bloco{margin:18px 12px 0;scroll-margin-top:64px}
.bk-cats+.cs-bloco{margin-top:12px}
.cdblack .cs-pilula{display:block;width:fit-content;max-width:100%;margin:0 auto 12px;padding:9px 26px;border-radius:999px;background:var(--lar);color:#fff;font-size:17px;font-weight:900;letter-spacing:.4px;text-transform:uppercase;box-shadow:0 4px 0 var(--lar-esc)}
.cdblack .cs-pilula--clara{background:var(--branco);color:var(--lar);border:2px solid var(--lar);box-shadow:none;padding:7px 22px;font-size:15px}
.cs-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px;border-radius:14px;background:var(--branco)}

/* ---------- o quadradinho ---------- */
.cs{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--branco);border:1px solid #e3e3e3;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.06);padding:12px 10px 10px}
.cs__topo{display:flex;align-items:center;gap:8px;min-width:0}
.cs__ic{width:36px;height:36px;flex-shrink:0}
.cs__escopo{font-size:11px;font-weight:500;line-height:1.2;color:#333;text-transform:uppercase;letter-spacing:.2px;overflow-wrap:anywhere}
.cs__valor{margin-top:10px!important;font-size:19px;font-weight:800;line-height:1.1;color:var(--tinta)}
.cs__valor--longo{font-size:16px}
.cs__regra{margin-top:4px!important;font-size:12.5px;line-height:1.3;color:var(--cinza)}
.cs__selos{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}
.cs__selo{font-size:11px;font-weight:600;line-height:1.2;padding:3px 6px;border-radius:3px;color:var(--lar);background:var(--lar-claro)}
/* picote com os recortes nas laterais */
.cs__picote{position:relative;margin:auto -10px 10px;border-top:2px dashed #e6e6e6}
.cs__picote::before,.cs__picote::after{content:"";position:absolute;top:-9px;width:16px;height:16px;border-radius:50%;background:var(--branco);border:1px solid #e3e3e3}
.cs__picote::before{left:-9px;clip-path:inset(0 0 0 50%)}
.cs__picote::after{right:-9px;clip-path:inset(0 50% 0 0)}
.cs>:nth-last-child(3){margin-bottom:12px!important}
.cs__acao{display:flex}
.cb__btn{flex:1;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 8px;border-radius:6px;cursor:pointer;
  background:var(--lar);color:#fff!important;font-size:15px;font-weight:600;text-decoration:none!important;-webkit-user-select:none;user-select:none}
.cb__btn:active{background:var(--lar-esc)}
.cb__btn:focus-visible{outline:3px solid #222;outline-offset:2px}

.bk-vazio{margin:20px 12px;padding:18px;border-radius:14px;background:var(--branco);border:1px solid var(--linha);color:#555;text-align:center}

/* ---------- caixas de baixo ---------- */
.bk-caixa{margin:20px 12px 0;padding:16px;border-radius:14px;background:var(--branco);border:1px solid var(--linha)}
.bk-caixa h2{font-size:16px;font-weight:800;margin-bottom:10px;color:var(--tinta)}
.bk-passos ol{list-style:none;margin:0;padding:0;counter-reset:p;display:grid;gap:12px}
.bk-passos li{counter-increment:p;position:relative;padding-left:42px;min-height:30px}
.bk-passos li::before{content:counter(p);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--lar);color:#fff;font-weight:900;font-size:15px;display:grid;place-items:center}
.bk-passos b{display:block;font-size:14.5px}
.bk-passos span{display:block;font-size:13.5px;color:#555;margin-top:2px}
.bk-sobre p{margin:0 0 8px;font-size:13.5px;line-height:1.55;color:#555}

.bk-rod{margin-top:24px;padding:0 14px;text-align:center;color:#888;font-size:12.5px}
.bk-rod img{margin:0 auto 8px}
.bk-rod p{margin:4px 0}
.bk-rod a{color:#555}

/* ---------- caixa do código ---------- */
.bk-cortina{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.55);opacity:0;transition:opacity .22s}
.bk-cortina.aberta{opacity:1}
.bk-folha{position:fixed;left:0;right:0;bottom:0;z-index:61;max-width:560px;margin:0 auto;background:var(--branco);border-radius:20px 20px 0 0;
  padding:22px 18px calc(18px + env(safe-area-inset-bottom));text-align:center;transform:translateY(105%);transition:transform .24s cubic-bezier(.2,.8,.2,1)}
.bk-folha.aberta{transform:none}
.bk-folha__x{position:absolute;top:8px;right:8px;width:44px;height:44px;border:0;background:transparent;color:#888;border-radius:50%;cursor:pointer}
.bk-folha__x svg{width:20px;height:20px}
.bk-folha__ic{width:48px;height:48px;margin:0 auto}
.bk-folha__tit{margin:10px 30px 4px!important;font-size:19px;font-weight:800;line-height:1.2}
.bk-folha__desc{margin:0 0 4px!important;font-size:13.5px;color:#555}
.bk-folha__desc:empty{display:none}
.bk-folha__cod{margin:12px 0;padding:14px 10px;border:2px dashed var(--lar);border-radius:10px;background:var(--lar-claro);font-size:24px;font-weight:900;letter-spacing:1.5px;color:var(--lar-esc);word-break:break-all}
.bk-folha__btn{width:100%;min-height:50px;border:0;border-radius:8px;cursor:pointer;background:var(--lar);color:#fff;font-family:var(--sist);font-size:16.5px;font-weight:700}
.bk-folha__btn:active{background:var(--lar-esc)}
.bk-folha__aviso{min-height:18px;margin:8px 0 0!important;font-size:13px;font-weight:700;color:var(--verde)}

@media (max-width:359px){
  .cs-grade{gap:8px;padding:10px}
  .cs{padding:10px 8px 8px}
  .cs__picote{margin-left:-8px;margin-right:-8px}
  .cs__valor{font-size:17px}
  .cb__btn{font-size:14px}
  .bk-num b{font-size:18px}
  .bk-num span{font-size:10.5px}
}
@media (min-width:561px){
  .bk-banner{border-radius:0 0 16px 16px}
}
@media (prefers-reduced-motion:reduce){
  .bk-ponto{animation:none}
  .bk-folha,.bk-cortina{transition:none}
}