/* =========================================================
   BPO NEXO — SEÇÃO "QUEIMA" (#desperdicio)

   Peça de abertura do problema, no formato de pôster: chapéu em
   selo, manchete em escala display, nota de R$ 100 em chamas e um
   fio de rodapé com o bordão. É o bloco que antecede "O que
   entregamos" — o problema em vermelho, a solução logo abaixo.

   Do design system (style.css + noema.css) vêm a grade (.container),
   a escala tipográfica, o easing (--ease-noema), os cantos retos, a
   entrada por rolagem (.animate-on-scroll) e o botão (.btn).

   O bloco é escuro nos DOIS temas do site — mesma decisão do
   dashboard da seção #portal (portal-cliente.css), que é claro nos
   dois. Um pôster de fogo não tem versão clara; o que volta ao tema
   é o botão, que usa --accent-fill (verde no escuro, navy no claro)
   e fecha o contraste problema → solução.

   A paleta de brasa estende os tokens semânticos --negativo e
   --alerta; nenhum token global é redefinido fora de .queima.

   Carregado depois de noema.css. A nota queimando é um vídeo de
   fundo preto (bloco 3); brasas e fumaça em volta são CSS puro. O
   único JavaScript (assets/js/queima-video.js) pausa o vídeo fora
   da tela.
   ========================================================= */

.queima {
  /* --- Brasa (escala derivada de --alerta: #f5803e) --- */
  --qz-nucleo: #fff6d8;
  --qz-brasa-clara: #ffd04a;
  --qz-brasa: #ff8a1f;

  /* --- Campo vermelho (escala derivada de --negativo: #e63757) --- */
  --qz-vermelho-alto: #ff2a20;
  --qz-vermelho: #d8111a;
  --qz-vermelho-fundo: #7e0609;
  --qz-breu: #2b0202;

  position: relative;
  isolation: isolate;
  overflow: clip;
  text-align: center;
  color: #fff;
  /* O campo do pôster: um sol vermelho no centro que escurece até o
     breu nas quinas. Fica no próprio fundo da seção para a seção ser
     full-bleed sem nenhum wrapper extra. */
  background:
    radial-gradient(118% 88% at 50% 38%,
      var(--qz-vermelho-alto) 0%,
      var(--qz-vermelho) 30%,
      #a60b0e 58%,
      var(--qz-vermelho-fundo) 80%,
      var(--qz-breu) 100%);
}

/* O fio de topo que o noema.js injeta (.secao__fio) e o facho que o
   Canvas faz correr por ele são verdes e dependem do tema; sobre o
   vermelho os dois viram brasa — e param de mudar com o tema, como o
   resto do bloco. O mesmo vale para a grade de fundo (.section::before). */
.queima { --canvas-grade: rgba(255, 226, 206, 0.05); }
.queima .secao__fio { background: linear-gradient(90deg, transparent, var(--qz-brasa), transparent); }
.queima .secao__fio::after { background: linear-gradient(90deg, transparent, var(--qz-nucleo), transparent); }

/* =========================================================
   1 · CAMADAS DE ATMOSFERA (fumaça fora de foco + brasas)
   ========================================================= */
/* Só as definições de filtro — nada é desenhado por este SVG. */
.queima__filtros {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.queima__campo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Borrões de fumaça iluminada — o desfoque das quinas da referência.
   Posição, tamanho e tempo vêm de custom properties no HTML. */
.queima__fumaca {
  position: absolute;
  top: var(--t);
  left: var(--l);
  width: var(--w);
  aspect-ratio: 1.35;
  border-radius: 46% 54% 38% 62% / 58% 42% 58% 42%;
  background: radial-gradient(ellipse at 38% 36%,
    rgba(255, 228, 214, 0.5) 0%,
    rgba(255, 150, 130, 0.3) 38%,
    rgba(214, 40, 30, 0) 72%);
  filter: blur(22px);
  opacity: 0.7;
  transform: rotate(var(--r, 0deg));
  animation: qz-boiar var(--d, 22s) var(--ease-noema) var(--a, 0s) infinite alternate;
}

@keyframes qz-boiar {
  from { transform: rotate(var(--r, 0deg)) translate3d(0, 0, 0) scale(1); }
  to   { transform: rotate(calc(var(--r, 0deg) + 8deg)) translate3d(2%, -4%, 0) scale(1.12); }
}

/* Faíscas: sobem, desviam de lado e apagam. Alongadas na vertical e
   com rastro — brasa em voo deixa risco, ponto redondo lê como
   partícula de tela de proteção. A opacidade pisca no meio do
   percurso porque a brasa gira e mostra ora a face quente, ora a
   apagada. */
.queima__brasa {
  position: absolute;
  left: var(--l);
  bottom: var(--b, -4%);
  width: var(--s);
  height: calc(var(--s) * 2.4);
  border-radius: 50%;
  background: linear-gradient(to bottom, rgba(255, 236, 170, 0) 0%, var(--qz-brasa-clara) 55%, #fff4d2 100%);
  box-shadow:
    0 0 5px 1px rgba(255, 150, 40, 0.8),
    0 calc(var(--s) * -2.5) calc(var(--s) * 3) calc(var(--s) * -1) rgba(255, 140, 30, 0.35);
  opacity: 0;
  mix-blend-mode: screen;
  animation: qz-faisca var(--d) linear var(--a) infinite;
}

@keyframes qz-faisca {
  0%   { opacity: 0;    transform: translate3d(0, 0, 0) scale(0.5); }
  8%   { opacity: 1; }
  34%  { opacity: 0.45; }
  47%  { opacity: 1;    transform: translate3d(calc(var(--dx) * 0.5), calc(var(--sobe) * 0.47), 0) scale(1); }
  68%  { opacity: 0.5; }
  82%  { opacity: 0.85; }
  100% { opacity: 0;    transform: translate3d(var(--dx), var(--sobe), 0) scale(0.2); }
}

/* Vinheta por cima do campo: segura a atenção no centro. */
.queima__vinheta {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 58% at 50% 44%, transparent 36%, rgba(38, 2, 2, 0.4) 78%, rgba(26, 1, 1, 0.78) 100%),
    linear-gradient(to bottom, rgba(32, 2, 2, 0.5) 0%, transparent 16%, transparent 84%, rgba(26, 1, 1, 0.55) 100%);
}

/* =========================================================
   2 · CONTEÚDO
   ========================================================= */
/* Sem z-index de propósito: com ele o conteúdo vira um grupo isolado
   e o vídeo (mix-blend-mode, bloco 3) se misturaria com o vazio em vez
   do vermelho, mostrando o preto do clipe numa caixa. O conteúdo fica
   por cima do campo e da vinheta (z-index 0) pela ordem no HTML. */
.queima__conteudo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- Selo (chapéu e subtítulo): retângulo escuro de cantos retos,
   como os blocos de texto da referência. O NØEMA não arredonda. --- */
.queima__selo {
  display: inline-block;
  padding: 10px clamp(14px, 2vw, 22px);
  background: rgba(32, 2, 2, 0.46);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.queima__chapeu {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(0.82rem, 1.5vw, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
}

.queima__titulo {
  margin: clamp(8px, 1.4vw, 16px) 0 0;
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 6.8vw, 6rem);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.045em;
  text-transform: none;
  text-wrap: balance;
  color: #fff;
  /* Sombra baixa e dura: destaca a manchete do campo vermelho sem
     virar brilho — na referência o texto é recortado, não aceso. */
  text-shadow: 0 2px 0 rgba(96, 4, 4, 0.35), 0 10px 40px rgba(60, 2, 2, 0.5);
}

.queima__titulo b {
  display: block;
  font-weight: inherit;
}

/* A segunda linha recebe um filete de brasa embaixo — o único
   lugar do pôster onde a cor quente toca a tipografia. O padding
   abre a folga: sem ele o filete cai em cima da base das letras. */
.queima__titulo b:last-child {
  position: relative;
  display: inline-block;
  padding-bottom: 0.14em;
}
.queima__titulo b:last-child::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--qz-brasa-clara) 18%, var(--qz-brasa) 50%, var(--qz-brasa-clara) 82%, transparent);
  box-shadow: 0 0 14px rgba(255, 140, 40, 0.8);
  opacity: 0.9;
}

.queima__sub {
  margin: clamp(10px, 1.6vw, 18px) 0 0;
  font-family: var(--font-heading);
  font-size: clamp(1rem, 2.1vw, 1.65rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.95);
}

/* =========================================================
   3 · PALCO: a nota queimando (vídeo)
   O clipe (assets/video/queima/, gerado por
   scripts/prepararVideoQueima.js a partir de documentos/video/queima/dinheiro.mp4)
   tem fundo preto puro e entra com mix-blend-mode: screen — o preto
   some e ficam a nota, o fogo e as faíscas.

   Destaque: screen só clareia, então sobre o vermelho cheio a nota
   sairia rosada e lavada. Atrás do vídeo há um "palco" escuro
   (::before), um foco de breu que se esfuma no vermelho; sobre ele a
   nota e o fogo recuperam contraste e cor, e uma brasa quente no
   centro pulsa devagar. Para o vídeo misturar com esse foco E com o
   vermelho, nada entre ele e a seção pode virar grupo isolado: por
   isso o palco não tem mix-blend-mode, opacity, transform nem a
   entrada por rolagem — quem aparece com fade é o próprio vídeo
   (.em-cena, posta por assets/js/queima-video.js).

   No clipe a nota e o fogo ficam à esquerda do centro (~38% da
   largura); o vídeo anda 12% para a direita para a nota ficar no
   eixo da seção. O palco passa um pouco da coluna do texto (a
   máscara esconde o que sobra).
   ========================================================= */
.queima__palco {
  position: relative;
  width: min(1280px, 112%);
  aspect-ratio: 16 / 9;
  margin: clamp(20px, 3vw, 44px) auto 0;
}

.queima__palco::before {
  content: "";
  position: absolute;
  inset: -2% 6% -4% 6%;
  border-radius: 50%;
  background:
    radial-gradient(closest-side at 54% 52%,
      rgba(255, 140, 50, 0.12) 0%,
      rgba(255, 110, 30, 0.04) 32%,
      transparent 56%),
    radial-gradient(closest-side,
      rgba(14, 0, 0, 0.94) 0%,
      rgba(18, 0, 0, 0.88) 46%,
      rgba(30, 0, 0, 0.5) 74%,
      rgba(40, 0, 0, 0) 100%);
  filter: blur(24px);
  pointer-events: none;
  animation: qz-pulsar 3.4s var(--ease-noema) infinite alternate;
}

@keyframes qz-pulsar {
  from { opacity: 0.86; }
  to   { opacity: 1; }
}

/* A imagem (.queima__poster, o primeiro quadro do loop) e o vídeo
   ocupam o mesmo lugar, com a mesma mistura, máscara e enquadramento.
   O VÍDEO SÓ APARECE DEPOIS DE TOCAR DE VERDADE (.tocando, posta pelo
   queima-video.js no evento "playing"). Enquanto isso — e para sempre,
   se o navegador não deixar tocar (iPhone em economia de bateria,
   autoplay bloqueado, "reduzir movimento") — fica a imagem. Vídeo
   parado nunca fica à vista, e é vídeo parado que faz o navegador
   desenhar o botão de play por cima. */
.queima__poster,
.queima__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
  transform: translateX(12%) scale(0.97);
  /* Destaque: mais contraste e brilho na nota e no fogo (o preto
     continua preto e segue sumindo na mistura) */
  filter: contrast(1.18) brightness(1.12) saturate(1.2);
  /* Bordas esfumadas: forte no centro, some antes de chegar ao quadro */
  -webkit-mask-image: radial-gradient(66% 66% at 50% 50%, #000 62%, transparent 100%);
  mask-image: radial-gradient(66% 66% at 50% 50%, #000 62%, transparent 100%);
  opacity: 0;
  transition: opacity 1.2s var(--ease-noema), transform 1.6s var(--ease-noema);
  /* Sem clique nem toque: nada de pausar, avançar, tela cheia ou menu */
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
/* Ao entrar na tela aparece a imagem; quando o vídeo começa, ele cobre
   a imagem (que sai em seguida). O vídeo fica a 0,001 e não a 0 para
   o navegador ainda considerá-lo "visível" e deixar o autoplay rodar. */
.queima__video { opacity: 0.001; }
.queima__palco.em-cena .queima__poster { opacity: 1; transform: translateX(12%) scale(1); }
.queima__palco.em-cena .queima__video { transform: translateX(12%) scale(1); }
.queima__palco.tocando .queima__video { opacity: 1; }
.queima__palco.tocando .queima__poster { opacity: 0; }

/* Controles nativos ocultos, inclusive o play grande do iPhone */
.queima__video::-webkit-media-controls,
.queima__video::-webkit-media-controls-enclosure,
.queima__video::-webkit-media-controls-panel,
.queima__video::-webkit-media-controls-overlay-play-button,
.queima__video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
  appearance: none;
}

/* Sem JavaScript fica só a imagem */
html:not(.js) .queima__poster { opacity: 1; transform: translateX(12%); }

/* =========================================================
   4 · TEXTO DE APOIO E RODAPÉ
   ========================================================= */
.queima__texto {
  max-width: 48ch;
  margin: clamp(26px, 4.5vw, 52px) auto 0;
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  line-height: 1.65;
  font-weight: 500;
  text-wrap: pretty;
  color: rgba(255, 255, 255, 0.82);
}
.queima__texto b {
  font-weight: 700;
  color: #fff;
}

.queima__rodape {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(14px, 3vw, 36px);
  width: 100%;
  margin-top: clamp(32px, 5vw, 64px);
}

.queima__fio {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5));
}
.queima__fio:last-child { background: linear-gradient(90deg, rgba(255, 255, 255, 0.5), transparent); }

.queima__bordao {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  white-space: nowrap;
  color: #fff;
}

.queima__cta {
  margin-top: clamp(24px, 3.5vw, 40px);
  box-shadow: 0 10px 34px -12px rgba(0, 0, 0, 0.75);
}

/* =========================================================
   6 · RESPONSIVO
   ========================================================= */
@media (max-width: 767.98px) {
  /* No celular o quadro passa um pouco das margens: a nota fica
     maior e a máscara esconde o que sobra nas bordas. */
  .queima__palco { width: 128%; margin-top: 4px; }
  .queima__texto { max-width: 42ch; }

  /* Em telas estreitas o bordão não cabe entre os dois fios: ele passa
     a ocupar a linha inteira, com um único fio por baixo — dois fios
     empilhados viram duas linhas repetidas, não uma régua. */
  .queima__rodape {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 14px;
  }
  .queima__bordao { order: -1; white-space: normal; }
  .queima__fio {
    width: min(240px, 60%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  }
  .queima__fio:last-child { display: none; }

  .queima__cta { width: 100%; }
}

@media (max-width: 400px) {
  .queima__titulo { letter-spacing: -0.035em; }
}

/* =========================================================
   7 · MENOS MOVIMENTO
   O vídeo fica parado no primeiro quadro (queima-video.js); as
   faíscas e a fumaça saem de cena.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .queima__palco::before,
  .queima__fumaca { animation: none; }
  .queima__brasa { display: none; }
  .queima__video,
  .queima__poster { transition: none; }
}