/* GioPRO - cronometro da campanha BLACKPRO. PROPOSTA (rascunho), 2026-11-13. Nada disto esta no ar.
   Classes com prefixo bp- : nao tocam em nada do tema. */

/* "aperto de mao": o JS so age se ler este valor, ou seja, se este CSS carregou antes dele */
:root { --bp-css-ok: 1; }

.bp-faixa, .bp-home, .bp-ticket, .bp-bn {
  --bp-preto: #0d0d0d;
  --bp-laranja: #F47836;
  --bp-branco: #fff;
  --bp-cinza: #a8a8a8;
  --bp-linha: #2e2e2e;
  font-family: Montserrat, "Open Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
.bp-faixa *, .bp-home *, .bp-ticket *, .bp-bn * { box-sizing: border-box; }
/* texto so para leitor de tela */
.bp-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* botao de copiar (base) */
.bp-copiar {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0; border: 0; background: none; color: inherit; font: inherit;
  cursor: pointer; line-height: 1; white-space: nowrap;
}
.bp-copiar-ico { width: 14px; height: 14px; flex: 0 0 14px; }
.bp-copiar:focus { outline: none; }
.bp-copiar:focus-visible { outline: 2px solid var(--bp-laranja); outline-offset: 2px; }

/* ================= 1. FAIXA NO TOPO ================= */
.bp-faixa {
  position: relative; z-index: 2;
  width: 100%; height: 41px; overflow: hidden;   /* 40 + 1 da borda: igual a reserva abaixo */
  background: var(--bp-preto);
  border-bottom: 1px solid #262626;
  color: var(--bp-branco);
  font-size: 13px; font-weight: 500;
}
.bp-faixa-in {
  display: flex; align-items: center; justify-content: center; gap: 28px;
  min-height: 40px; padding: 0 16px;
}
.bp-faixa-cupom { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.bp-faixa-pre-c { display: none; }
.bp-copiar--chip {
  padding: 5px 10px 5px 9px;
  border: 1px dashed var(--bp-laranja); border-radius: 3px;
  color: var(--bp-laranja);
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
  transition: background-color .15s ease, color .15s ease;
}
.bp-copiar--chip:hover, .bp-copiar--chip.is-copiado { background: var(--bp-laranja); color: var(--bp-preto); }
.bp-faixa-conta {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding-left: 28px; border-left: 1px solid var(--bp-linha);
  line-height: 40px; white-space: nowrap;
}
.bp-faixa-rot { color: var(--bp-cinza); }
.bp-faixa-rot-c { display: none; }
.bp-faixa-rel {
  font-size: 15px; font-weight: 700; letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.bp-faixa-rel .bp-u { margin: 0 1px 0 1px; font-size: 12px; font-weight: 500; color: var(--bp-cinza); }
.bp-faixa-data { display: none; color: var(--bp-cinza); }
/* com a contagem do banner na tela, a faixa nao repete o relogio; quando o banner sai da tela, o relogio volta */
html.bp-com-banner:not(.bp-banner-fora) .bp-faixa-rot,
html.bp-com-banner:not(.bp-banner-fora) .bp-faixa-rel { display: none; }
html.bp-com-banner:not(.bp-banner-fora) .bp-faixa-data { display: inline; }
/* celular: uma linha so */
body.isMobile .bp-faixa { height: 39px; font-size: 12px; }
body.isMobile .bp-faixa-in { gap: 10px; min-height: 38px; padding: 0 12px; justify-content: space-between; }
body.isMobile .bp-faixa-pre { display: none; }
body.isMobile .bp-faixa-pre-c { display: inline; }
body.isMobile .bp-faixa-cupom { gap: 7px; }
body.isMobile .bp-copiar--chip { padding: 4px 8px 4px 7px; font-size: 11px; letter-spacing: .08em; }
body.isMobile .bp-copiar--chip .bp-copiar-ico { width: 12px; height: 12px; flex-basis: 12px; }
body.isMobile .bp-faixa-conta { padding-left: 0; border-left: 0; gap: 5px; line-height: 38px; }
body.isMobile .bp-faixa-rel { font-size: 13px; }
body.isMobile .bp-faixa-rel .bp-u { font-size: 11px; margin-right: 2px; }
body.isMobile .bp-faixa-rot-l { display: none; }
body.isMobile .bp-faixa-rot-c { display: inline; }
@media (max-width: 359px) { body.isMobile .bp-faixa-rot { display: none; } }

/* ================= 2. BLOCO NA HOME ================= */
.bp-home {
  margin: 16px 0 0; /* o bloco do banner ja tem o recuo lateral da arte */
  border-radius: 12px;
  background: var(--bp-preto);
  color: var(--bp-branco);
  text-align: center;
  overflow: hidden;
}
.bp-home-in { max-width: 1280px; margin: 0 auto; padding: 72px 32px 64px; }
.bp-home-tit {
  margin: 0 0 28px;
  font-size: 26px; font-weight: 300; letter-spacing: .18em; line-height: 1.3;
}
.bp-home-rel {
  display: flex; justify-content: center; align-items: flex-start;
  gap: clamp(16px, 3.4vw, 56px);
}
.bp-home-cel { display: flex; flex-direction: column; align-items: center; min-width: 1.2em; }
.bp-home-cel + .bp-home-cel { position: relative; }
.bp-home-cel + .bp-home-cel::before {
  content: ""; position: absolute;
  left: calc(clamp(16px, 3.4vw, 56px) / -2); top: 18%; height: 52%;
  border-left: 2px solid var(--bp-laranja);
}
.bp-home-num {
  font-size: clamp(64px, 8.4vw, 148px); font-weight: 700; line-height: 1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.bp-home-uni {
  margin-top: 14px;
  font-size: 13px; font-weight: 500; letter-spacing: .2em; color: var(--bp-cinza);
}
.bp-home-acao {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  gap: 16px 28px; margin-top: 48px; padding-top: 32px;
  border-top: 1px solid var(--bp-linha);
}
.bp-home-txt { margin: 0; font-size: 15px; font-weight: 400; color: #d6d6d6; }
.bp-copiar--home {
  gap: 10px; padding: 15px 26px; border-radius: 4px;
  background: var(--bp-laranja); color: var(--bp-preto);
  font-size: 14px; font-weight: 700; letter-spacing: .04em;
  transition: background-color .15s ease;
}
.bp-copiar--home:hover { background: #ff8c4f; }
.bp-copiar--home:focus-visible { outline-color: var(--bp-branco); }
.bp-copiar--home .bp-copiar-ico { width: 16px; height: 16px; flex-basis: 16px; }
/* celular */
body.isMobile .bp-home { margin: 10px 0 0; }
body.isMobile .bp-home-in { padding: 40px 16px 32px; }
body.isMobile .bp-home-tit { margin-bottom: 20px; font-size: 15px; letter-spacing: .14em; }
body.isMobile .bp-home-rel { gap: min(18px, 4.6vw); }
body.isMobile .bp-home-cel + .bp-home-cel::before { left: calc(min(18px, 4.6vw) / -2); border-left-width: 1.5px; }
body.isMobile .bp-home-num { font-size: min(52px, 13.4vw); }
body.isMobile .bp-home-uni { margin-top: 8px; font-size: 10px; letter-spacing: .14em; }
body.isMobile .bp-home-acao { flex-direction: column; gap: 14px; margin-top: 28px; padding-top: 22px; }
body.isMobile .bp-home-txt { font-size: 13px; }
body.isMobile .bp-copiar--home { width: 100%; justify-content: center; padding: 14px 20px; }

/* ================= 3. CARTAO-CUPOM NO PRODUTO ================= */
.bp-ticket {
  position: relative;
  display: flex; align-items: stretch;
  max-width: 460px; margin: 18px 0 6px;
  background: var(--bp-preto); color: var(--bp-branco);
  border-radius: 6px;
}
/* os dois "picotes" do cupom */
.bp-ticket::before, .bp-ticket::after {
  content: ""; position: absolute; left: 134px; width: 14px; height: 14px;
  margin-left: -7px; border-radius: 50%; background: #fff; pointer-events: none;
}
.bp-ticket::before { top: -7px; }
.bp-ticket::after { bottom: -7px; }
.bp-ticket-a {
  flex: 0 0 134px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 7px;
  padding: 14px 16px; border-right: 1px dashed #4a4a4a; border-radius: 6px 0 0 6px;
  text-align: left;
}
.bp-ticket-a:focus-visible { outline-offset: -4px; }
.bp-ticket-rot {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: var(--bp-laranja);
}
.bp-ticket-rot .bp-copiar-ico { width: 12px; height: 12px; flex-basis: 12px; }
.bp-ticket-cod { font-size: 18px; font-weight: 700; letter-spacing: .06em; }
.bp-ticket-a:hover .bp-ticket-rot, .bp-ticket-a.is-copiado .bp-ticket-rot { text-decoration: underline; text-underline-offset: 3px; }
.bp-ticket-b {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: 14px 16px; min-width: 0;
}
.bp-ticket-txt { font-size: 12px; font-weight: 400; color: var(--bp-cinza); line-height: 1.35; }
.bp-ticket-rel { font-size: 13px; font-weight: 500; }
.bp-ticket-rel b {
  font-size: 17px; font-weight: 700; margin-left: 2px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* celular */
body.isMobile .bp-ticket { max-width: none; margin: 16px 0 4px; }
body.isMobile .bp-ticket::before, body.isMobile .bp-ticket::after { left: 122px; }
body.isMobile .bp-ticket-a { flex-basis: 122px; padding: 12px 14px; }
body.isMobile .bp-ticket-cod { font-size: 16px; }
body.isMobile .bp-ticket-b { padding: 12px 14px; }
body.isMobile .bp-ticket-rel b { font-size: 16px; }

@media (prefers-reduced-motion: reduce) {
  .bp-copiar--chip, .bp-copiar--home { transition: none; }
}

/* ================= 2b. CONTAGEM DENTRO DO BANNER =================
   Presa a arte: posicao em % da altura da imagem e letra em cqw (1cqw = 1% da largura do banner),
   entao cresce e diminui junto com a arte em qualquer tela. Cada arte tem a sua posicao. */
.bp-bn-host { position: relative; }
picture.bp-bn-host { display: block; }
.bp-bn {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  max-width: 1920px; margin: 0 auto;           /* a arte do computador para de crescer em 1920px */
  container-type: inline-size;
  pointer-events: none;                         /* o clique continua indo para o link do banner */
  z-index: 3;
  color: var(--bp-branco);
}
.bp-bn-in {
  position: absolute; left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.bp-bn-tit {
  margin: 0 0 .9vw; margin: 0 0 .9cqw;
  font-size: max(11px, 1.2vw); font-size: max(11px, 1.2cqw);
  font-weight: 300; letter-spacing: .24em; line-height: 1.2;
  padding-left: .24em;                          /* compensa o espaco da ultima letra, para centralizar */
}
.bp-bn-rel { display: flex; gap: 2.4vw; gap: 2.4cqw; }
.bp-cel { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 1.25em; }
.bp-cel + .bp-cel::before {
  content: ""; position: absolute; top: 12%; height: 50%;
  left: -1.2vw; left: -1.2cqw;
  border-left: 2px solid var(--bp-laranja);
}
.bp-num {
  font-size: 4.4vw; font-size: 4.4cqw;
  font-weight: 700; line-height: 1; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.bp-uni {
  margin-top: .6vw; margin-top: .6cqw;
  font-size: max(9px, .74vw); font-size: max(9px, .74cqw);
  line-height: 1.2;                             /* fixa: a altura nao muda quando a fonte do site termina de carregar */
  font-weight: 500; letter-spacing: .2em; color: var(--bp-cinza);
  padding-left: .2em;
}
/* arte do computador (3483x1960): faixa vazia entre o rodape do cupom (71%) e o texto do Grupo GIO (92%) */
.bp-bn[data-arte="pc"] .bp-bn-in { top: 72.5%; height: 19%; }
/* arte do celular (1080x1600): topo vazio, acima de "Utilize o Cupom" (que comeca em 23%) */
.bp-bn[data-arte="cel"] .bp-bn-in { top: 2.5%; height: 18%; }
.bp-bn[data-arte="cel"] .bp-bn-tit { margin-bottom: 2.2cqw; font-size: max(11px, 3.2cqw); letter-spacing: .2em; padding-left: .2em; }
.bp-bn[data-arte="cel"] .bp-bn-rel { gap: 5.2cqw; }
.bp-bn[data-arte="cel"] .bp-cel + .bp-cel::before { left: -2.6cqw; border-left-width: 1.5px; }
.bp-bn[data-arte="cel"] .bp-num { font-size: 10.6cqw; }
.bp-bn[data-arte="cel"] .bp-uni { margin-top: 1.1cqw; font-size: max(9px, 2.5cqw); letter-spacing: .16em; padding-left: .16em; }

/* arte AJUSTADA (proposta para o designer): a observacao do cupom desce para o rodape e abre
   uma faixa limpa logo abaixo do BLACKPRO. Mesmas regras, so muda onde a contagem fica. */
.bp-bn[data-arte="pc2"] .bp-bn-in { top: 64%; height: 20%; }
.bp-bn[data-arte="pc2"] .bp-bn-tit { margin-bottom: 1.1cqw; font-size: max(11px, 1.3cqw); }
.bp-bn[data-arte="pc2"] .bp-num { font-size: 5cqw; }
.bp-bn[data-arte="pc2"] .bp-bn-rel { gap: 2.8cqw; }
.bp-bn[data-arte="pc2"] .bp-cel + .bp-cel::before { left: -1.4cqw; }
.bp-bn[data-arte="pc2"] .bp-uni { font-size: max(9px, .8cqw); margin-top: .7cqw; }
.bp-bn[data-arte="cel2"] .bp-bn-in { top: 63.5%; height: 17.5%; }
.bp-bn[data-arte="cel2"] .bp-bn-tit { margin-bottom: 2.4cqw; font-size: max(11px, 3.3cqw); letter-spacing: .2em; padding-left: .2em; }
.bp-bn[data-arte="cel2"] .bp-bn-rel { gap: 5.4cqw; }
.bp-bn[data-arte="cel2"] .bp-cel + .bp-cel::before { left: -2.7cqw; border-left-width: 1.5px; }
.bp-bn[data-arte="cel2"] .bp-num { font-size: 11.4cqw; }
.bp-bn[data-arte="cel2"] .bp-uni { margin-top: 1.2cqw; font-size: max(9px, 2.5cqw); letter-spacing: .16em; padding-left: .16em; }

/* ================= O BANNER INTEIRO NA PRIMEIRA TELA =================
   --bp-acima = onde o banner comeca na pagina; --bp-prop = largura/altura da arte (os dois vem do JS).
   A caixa da arte fica com no maximo a altura visivel da tela, encolhendo na proporcao, sem cortar. */
.bp-cabe { background: #0e0f0f; border-radius: 10px; overflow: hidden; }
.bp-cabe > .bp-caixa {
  width: min(100%, calc((100vh - var(--bp-acima, 20px) - 16px) * var(--bp-prop, 1.777)));
  width: min(100%, calc((100svh - var(--bp-acima, 20px) - 16px) * var(--bp-prop, 1.777)));
  margin-left: auto; margin-right: auto;
}
.bp-cabe > picture.bp-caixa img { width: 100%; height: auto; }
/* celular: a caixa .ar reserva a altura com padding-top em % da largura da tela; troca por proporcao propria */
.bp-cabe > .ar.bp-caixa { padding-top: 0 !important; height: auto !important; aspect-ratio: var(--bp-prop, .675); } /* o tema fixa o padding-top com regra mais forte */
/* arte mais estreita que o espaco: as bordas se fundem ao preto, sem emenda */
.bp-cabe--estreita > .bp-caixa {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
body.isMobile .bp-cabe { border-radius: 12px; }

/* arte NOVA na proporcao recomendada (simulacao): computador 9:4, celular 4:5 */
.bp-bn[data-arte="pc3"] .bp-bn-in { top: 62.5%; height: 19%; }
.bp-bn[data-arte="pc3"] .bp-bn-tit { margin-bottom: 1cqw; font-size: max(11px, 1.25cqw); }
.bp-bn[data-arte="pc3"] .bp-num { font-size: 4.4cqw; }
.bp-bn[data-arte="pc3"] .bp-bn-rel { gap: 2.6cqw; }
.bp-bn[data-arte="pc3"] .bp-cel + .bp-cel::before { left: -1.3cqw; }
.bp-bn[data-arte="pc3"] .bp-uni { font-size: max(9px, .76cqw); margin-top: .6cqw; }
.bp-bn[data-arte="cel3"] .bp-bn-in { top: 2.5%; height: 18.5%; } /* topo: longe do botao do WhatsApp */
.bp-bn[data-arte="cel3"] .bp-bn-tit { margin-bottom: 2cqw; font-size: max(11px, 3.3cqw); letter-spacing: .2em; padding-left: .2em; }
.bp-bn[data-arte="cel3"] .bp-bn-rel { gap: 5.4cqw; }
.bp-bn[data-arte="cel3"] .bp-cel + .bp-cel::before { left: -2.7cqw; border-left-width: 1.5px; }
.bp-bn[data-arte="cel3"] .bp-num { font-size: 10.4cqw; }
.bp-bn[data-arte="cel3"] .bp-uni { margin-top: 1.2cqw; font-size: max(9px, 2.5cqw); letter-spacing: .16em; padding-left: .16em; }

/* ================= SEM PULOS NA CARGA =================
   1) Faixa: o JS roda no <head> e marca o <html> com bp-faixa-on antes da primeira pintura. Enquanto a faixa
      nao entra, um ::before do mesmo tamanho segura o lugar dela; quando ela entra, o JS marca bp-faixa-dentro
      na mesma tarefa e o ::before some. Nada se mexe.
      Computador: dentro do .header-container (fixo na home, normal nas outras paginas). Celular: topo do .inner-body. */
html.bp-faixa-on:not(.bp-faixa-dentro) body:not(.isMobile) .header-container::before,
html.bp-faixa-on:not(.bp-faixa-dentro) body.isMobile .inner-body::before {
  content: ""; display: block; box-sizing: border-box;
  height: 41px; background: #0d0d0d; border-bottom: 1px solid #262626;
}
html.bp-faixa-on:not(.bp-faixa-dentro) body.isMobile .inner-body::before { height: 39px; }

/* 2) Banner da Black do tamanho da tela desde a primeira pintura (sem esperar o JS medir).
      Os blocos levam a classe bp-banner-pc (no HTML do bloco de codigo) e bp-banner-cel (Classe CSS do bloco
      de banner). Computador: o banner comeca em 20px (o cabecalho fixo fica por cima dele) e sobra 16px embaixo.
      Celular: cabecalho de 114px + faixa (39px, quando ela existe) + 16px embaixo. */
.bp-banner-pc { background: #0e0f0f; border-radius: 10px; overflow: hidden; }
.bp-banner-pc picture {
  display: block; margin-left: auto; margin-right: auto;
  width: min(100%, calc((100vh - 36px) * 2.25));
  width: min(100%, calc((100svh - 36px) * 2.25));
  max-width: 1920px;
}
.bp-banner-pc picture img { width: 100% !important; height: auto !important; }
.bp-banner-cel { --bp-cel-acima: 130px; }
html.bp-faixa-on .bp-banner-cel { --bp-cel-acima: 169px; }
.bp-banner-cel > .ar,
.bp-banner-cel > div > .ar {
  width: min(100%, calc((100vh - var(--bp-cel-acima)) * .8));
  width: min(100%, calc((100svh - var(--bp-cel-acima)) * .8));
  margin-left: auto; margin-right: auto;
  padding-top: 0 !important; height: auto !important; aspect-ratio: 1080 / 1350; /* o tema reserva com padding-top */
}
.bp-banner-cel { background: #0e0f0f; border-radius: 12px; overflow: hidden; }
/* 3) Numeros do banner com caixa fixa: enquanto a Montserrat carrega, o texto sai na fonte reserva (mais
      estreita); com largura e altura fixas, a troca de fonte nao mexe em nenhuma caixa. */
.bp-bn .bp-num { display: block; width: 1.45em; height: 1em; text-align: center; }
.bp-bn .bp-uni { display: block; width: 0; min-width: 100%; height: 1.2em; white-space: nowrap; text-align: center; }

/* arte mais estreita que o espaco: as bordas se fundem ao preto (o JS so liga esta classe) */
.bp-banner-pc.bp-estreita picture,
.bp-banner-cel.bp-estreita .ar {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}