/* ==========================================================================
   Barra de inscrição — js/barra-inscricao.js cria a marcação

   Uma faixa fina que flutua sobre o rodapé da janela enquanto o visitante
   percorre o miolo da página. Não aparece no hero (que já tem CTA) nem
   perto do fechamento e do rodapé (que também têm). Superfície escura
   translúcida com desfoque, um filete de brasa no topo e um losango aceso,
   o mesmo sinal do ticker. Cantos retos; pílula só no botão.

   No desktop é uma peça centralizada que nunca alcança a coluna do
   WhatsApp/voltar ao topo. No celular ocupa a largura e empurra esses
   botões para cima enquanto está visível (html.bi-on).
   ========================================================================== */

.bi {
  --bi-gap: clamp(1rem, 2vw, 1.8rem);     /* o mesmo chão do .floats: as bases se alinham */
  position: fixed;
  left: 50%;
  bottom: calc(var(--bi-gap) + env(safe-area-inset-bottom, 0px));
  z-index: 95;                            /* acima do grão (80) e dos flutuantes (90), abaixo do header/menu */
  width: max-content;                     /* a largura do conteúdo, nada de faixa vazia no meio */
  max-width: calc(100vw - 15rem);         /* 7,5rem livres de cada lado: a coluna dos flutuantes fica de fora */
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: .5rem .5rem .5rem 1.15rem;
  background: rgba(16, 11, 9, .9);      /* --dark escurecido: mantém o contraste também sobre bloco branco */
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--line-soft);
  box-shadow:
    0 22px 48px -18px rgba(0, 0, 0, .85),
    0 0 0 1px rgba(0, 0, 0, .35);
  color: var(--fg);
  font-family: var(--font);

  /* escondida: desce, apaga e sai da árvore de acessibilidade */
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 140%);
  transition:
    opacity .45s var(--ease),
    transform .7s var(--ease),
    visibility 0s linear .7s;
}

.bi.on {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition:
    opacity .5s var(--ease),
    transform .8s var(--ease),
    visibility 0s;
}

/* Filete de brasa no topo: some nas pontas, acende no meio */
.bi::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 74, 0, .0) 6%,
    rgba(255, 74, 0, .85) 34%,
    rgba(242, 194, 48, .9) 52%,
    rgba(255, 138, 30, .6) 70%,
    transparent 100%);
  pointer-events: none;
}

/* Um brilho que atravessa o filete uma vez, quando a barra entra */
.bi::after {
  content: "";
  position: absolute;
  left: 0; top: -1px;
  width: 22%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #fff 50%, transparent);
  opacity: 0;
  pointer-events: none;
}
.bi.on::after { animation: bi-risco 1.6s var(--ease-io) .25s 1 both; }

/* 0 → 355%: o brilho (22% da largura) corre de ponta a ponta sem passar
   da borda da barra */
@keyframes bi-risco {
  0%   { transform: translateX(0); opacity: 0; }
  20%  { opacity: .9; }
  100% { transform: translateX(355%); opacity: 0; }
}

/* ---- Conteúdo ---------------------------------------------------------- */

.bi__txt {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .85rem;
  white-space: nowrap;
}

/* O losango aceso — pulsa devagar, como brasa.
   A pulsação era um box-shadow animado (repinta a cada quadro, para sempre,
   mesmo com a barra escondida). Agora os dois extremos do pulso estão
   desenhados em dois pseudo-elementos (::before = repouso, ::after = auge) e
   só a opacidade deles alterna, no mesmo ritmo (2,8s, ease-in-out, auge na
   metade): isso fica no compositor. Com a barra escondida o pulso pausa
   (sem salto: paused congela o quadro em que estava). */
.bi__brasa {
  position: relative;
  flex: none;
  width: 7px; height: 7px;
  background: var(--flame);
  transform: rotate(45deg);
}
.bi__brasa::before,
.bi__brasa::after {
  content: "";
  position: absolute;
  inset: 0;
  animation: bi-brasa-repouso 2.8s ease-in-out infinite paused;
}
.bi__brasa::before { box-shadow: 0 0 8px rgba(255, 74, 0, .55); }
.bi__brasa::after {
  box-shadow: 0 0 14px rgba(255, 138, 30, .85);
  opacity: 0;
  animation-name: bi-brasa-auge;
}
/* O anel (box-shadow 0 0 0 0→4px, alfa 0→.12) crescia junto com o pulso:
   aqui ele é um quadrado de 15px (7 + 2 x 4) na mesma cor, girado como o
   losango e escalado de 7/15 a 1, com a opacidade de 0 a 1. Fica atrás do
   losango (vem antes dele no .bi__txt), centrado nele. */
.bi__txt { position: relative; }
.bi__txt::before {
  content: "";
  position: absolute;
  left: -4px; top: 50%;
  width: 15px; height: 15px;
  margin-top: -7.5px;
  background: rgba(255, 74, 0, .12);
  transform: rotate(45deg) scale(.46667);
  opacity: 0;
  pointer-events: none;
  animation: bi-brasa-anel 2.8s ease-in-out infinite paused;
}
.bi.on .bi__brasa::before,
.bi.on .bi__brasa::after,
.bi.on .bi__txt::before { animation-play-state: running; }

@keyframes bi-brasa-repouso {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}
@keyframes bi-brasa-auge {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}
@keyframes bi-brasa-anel {
  0%, 100% { opacity: 0; transform: rotate(45deg) scale(.46667); }
  50%      { opacity: 1; transform: rotate(45deg) scale(1); }
}

.bi__marca {
  flex: none;
  font-variation-settings: "wdth" 118, "wght" 850;
  font-size: .9rem;
  letter-spacing: .01em;
}

.bi__sep {
  flex: none;
  width: 1px; height: 1.1rem;
  background: var(--line);
}

.bi__info {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variation-settings: "wdth" 100, "wght" 500;
  font-size: var(--fs-data);
  color: var(--fg-2);
}
.bi__info--curta { display: none; }

/* Valores por participante: rótulo discreto, valor em branco, tabular */
.bi__precos {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 1rem;
}
.bi__preco {
  display: inline-flex;
  align-items: baseline;
  gap: .4em;
}
.bi__rot {
  font-variation-settings: "wdth" 100, "wght" 500;
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--fg-2);
}
.bi__val {
  font-variation-settings: "wdth" 100, "wght" 750;
  font-size: var(--fs-data);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  color: var(--fg);
}
/* só para o leitor de tela: a vírgula entre os dois valores */
.bi__oculto {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Contador de dias: dado tabular, condensado, em âmbar */
.bi__conta {
  flex: none;
  font-variation-settings: "wdth" 80, "wght" 650;
  font-size: var(--fs-data);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  color: var(--ember);
}
.bi__conta strong { font-variation-settings: "wdth" 80, "wght" 850; color: var(--gold); }
.bi__conta:empty { display: none; }

/* ---- Botão: o .btn do site, com uma seta que avança ---------------------- */

.bi__btn {
  flex: none;
  gap: 0;
  padding: .8em 1.15em .8em 1.45em;
}
.bi__btn > span { display: inline-flex; align-items: center; gap: .55em; }
.bi__btn svg {
  width: 15px; height: 15px;
  flex: none;
  transition: transform .45s var(--ease);
}
.bi__btn:hover svg,
.bi__btn:focus-visible svg { transform: translateX(3px) rotate(-45deg); }

.bi__btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ---- Telas médias: a barra continua de uma linha ----------------------- */

/* Até 1280px a data longa cede lugar à curta, para os valores caberem
   ao lado do contador */
@media (max-width: 1280px) {
  .bi__info--longa { display: none; }
  .bi__info--curta { display: inline; }
}

/* Até 1100px saem a data e o contador: marca · valores · botão */
@media (max-width: 1100px) {
  .bi__info, .bi__info--curta,
  .bi__sep--preco,
  .bi__conta, .bi__sep--conta { display: none; }
}

/* Até 900px a marca também sai (a coluna dos flutuantes limita a largura):
   losango · valores · botão */
@media (max-width: 900px) {
  .bi__marca, .bi__sep { display: none; }
  .bi { gap: .9rem; }
  .bi__txt { gap: .7rem; }
  .bi__precos { gap: .9rem; }
}

/* ---- Celular: largura total, uma linha + botão ------------------------- */

@media (max-width: 760px) {
  .bi {
    --bi-gap: .75rem;
    width: calc(100vw - 1.5rem);
    max-width: none;
    gap: .7rem;
    padding: .4rem .4rem .4rem .9rem;
  }
  .bi__txt { gap: .6rem; }
  /* só os valores, empilhados em duas linhas curtas; marca e data saem */
  .bi__marca, .bi__sep, .bi__info { display: none; }
  /* grade de duas colunas: os dois valores começam na mesma linha vertical */
  .bi__precos {
    display: grid;
    grid-template-columns: auto auto;
    align-items: baseline;
    column-gap: .45rem;
    row-gap: .05rem;
  }
  .bi__preco { display: contents; }
  .bi__rot { font-size: .72rem; line-height: 1.25; }
  .bi__val { font-size: .84rem; line-height: 1.25; }
  .bi__btn { font-size: .8rem; padding: .78em 1em .78em 1.25em; }

  /* WhatsApp e voltar ao topo sobem para cima da barra enquanto ela aparece.
     .floats fica a clamp(1rem, 2vw, 1.8rem) = 16px do chão nesta faixa; a
     barra fica a .75rem (12px) + área segura. Subida = altura da barra
     (medida pelo JS em --bi-h) + 12px + 10px de folga - 16px. */
  .floats { transition: transform .7s var(--ease); }
  html.bi-on .floats {
    transform: translateY(calc(-1 * (var(--bi-h, 52px) + 6px + env(safe-area-inset-bottom, 0px))));
  }
}

/* Abaixo de 360px o botão e os rótulos apertam um pouco */
@media (max-width: 359px) {
  .bi { gap: .6rem; padding-left: .75rem; }
  .bi__brasa,
  .bi__txt::before { display: none; }
  .bi__precos { column-gap: .3rem; }
  .bi__rot { font-size: .7rem; }
  .bi__btn { padding: .78em .85em .78em 1.05em; }
}

/* ---- Movimento reduzido: sem deslocamento, só aparece e some ----------- */

@media (prefers-reduced-motion: reduce) {
  .bi,
  .bi.on { transform: translate(-50%, 0); }
  .bi { transition: opacity .3s linear, visibility 0s linear .3s; }
  .bi.on { transition: opacity .3s linear, visibility 0s; }
  .bi.on::after { animation: none; }
  /* parado, no brilho que o losango tinha sem a animação */
  .bi__brasa::before,
  .bi__brasa::after,
  .bi__txt::before { animation: none; }
  .bi__brasa::before { box-shadow: 0 0 10px rgba(255, 74, 0, .7); }
  .bi__btn svg { transition: none; }
  .floats { transition: none; }
}

@media print {
  .bi { display: none !important; }
}