/* =========================================================================
   A Grande BLACK FRIDAY · Página de obrigado · obrigado.css (v1.0)
   Carregada DEPOIS do styles.css da LP v1.0.0 (cópia idêntica, não editar): mesmo escopo .bf26-page,
   mesmo prefixo, nenhuma regra global. Aqui fica só o que é novo (VISUAL_APPLICATION.md §12):
   layout de tela única, camadas do fundo e composição do cartão de progresso.
   Componentes reutilizados sem alteração: bf26-card, bf26-pin, bf26-h1, bf26-hl-paper, bf26-lead,
   bf26-button--primary, bf26-grain, bf26-enter, modo estático e movimento reduzido.
   ========================================================================= */

/* @tokens:begin */
/* GERADO por build/build.py (fonte: 06_DESIGN_TOKENS/tokens.css da LP). Só os tokens que esta folha usa e o styles.css ainda não define: 5. */
.bf26-page {
  --bf26-grad-light: linear-gradient(112deg, rgba(60,63,70,0) 18%, rgba(60,63,70,.42) 36%, rgba(60,63,70,0) 56%);
  --bf26-prose: 680px;
  --bf26-scrim: rgba(14,15,20,.72);
  --bf26-shadow-title: drop-shadow(0 10px 28px rgba(0,0,0,.7));
  --bf26-type-label-family: "BF26 Special Elite", "Courier New", Courier, monospace;
}
/* @tokens:end */

/* ---------- tela única (estrutura T1-B: 5 elementos centralizados, acima do centro) ---------- */
.bf26-page.bf26-ty { --bf26-ty-topo: 40px; --bf26-ty-base: 56px; --bf26-ty-gap: clamp(20px, 1.85vw, 28px);
  min-height: 100vh; min-height: 100svh; background: var(--bf26-bg-2); }
.bf26-ty__main { position: relative; z-index: 2; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh;
  padding: var(--bf26-ty-topo) var(--bf26-pad-x) var(--bf26-ty-base); }
/* espaço livre: 40% acima, 60% abaixo (PAGE_CONTENT.json › composicao A4). Sem espaço livre, a página rola: nada é cortado */
.bf26-ty__main::before { content: ""; flex: 2 1 0; }
.bf26-ty__main::after { content: ""; flex: 3 1 0; }
.bf26-ty__stack { display: flex; flex-direction: column; align-items: center; gap: var(--bf26-ty-gap); width: 100%; text-align: center; }

/* ---------- E0 · fundo: quadro do KV desfocado (o único elemento desfocado da peça) + véu + luz diagonal + vinheta ---------- */
.bf26-ty__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
/* imagem inteira e centralizada (VISUAL_APPLICATION §1). A montagem ampliada do card de valor da LP (.bf26-vitrine__bg) foi testada
   e descartada no QA: enche a tela de bilhetes claros atrás do texto e baixa o contraste da nota (VISUAL_QA.md §2) */
.bf26-ty__bg img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; }
.bf26-ty__bg::after { content: ""; position: absolute; inset: 0; background: var(--bf26-grad-vignette), var(--bf26-grad-light); background-color: var(--bf26-scrim); }

/* ---------- E1 · cartão de progresso (bf26-card + pino na ponta do preenchimento) ---------- */
.bf26-progress { --bf26-progresso: 0%; width: 100%; max-width: var(--bf26-prose); text-align: left; }
/* o cartão não é clicável: sem a elevação de hover dos cartões da LP */
.bf26-page .bf26-progress:hover { transform: none; box-shadow: var(--bf26-shadow-card); border-color: var(--bf26-border); background: var(--bf26-surface-1); }
.bf26-progress__head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.bf26-progress__label { font-family: var(--bf26-type-label-family); font-size: var(--bf26-type-label-size); line-height: 1.4;
  letter-spacing: .12em; text-transform: uppercase; color: var(--bf26-text-muted); }
.bf26-progress__value { font-family: var(--bf26-type-h3-family); font-size: var(--bf26-type-h3-size); line-height: 1.1;
  letter-spacing: .02em; color: var(--bf26-text-title); font-variant-numeric: tabular-nums; }
.bf26-progress__track { position: relative; height: 14px; background: var(--bf26-surface-input); border: 1px solid var(--bf26-border-input); }
.bf26-progress__fill { position: absolute; inset: 0 auto 0 0; width: var(--bf26-progresso); background: var(--bf26-accent);
  box-shadow: inset 0 1px 0 var(--bf26-wine-hl);   /* o brilho do fio vinho do KV */
  animation: bf26-encher var(--bf26-dur-draw) var(--bf26-ease-settle) 450ms both; }
.bf26-progress__pin { --bf26-pin-size: 20px; position: absolute; top: 50%; right: 0; translate: 50% -50%; }
@keyframes bf26-encher { from { width: 0; } }   /* uma vez; sem JS ou com movimento reduzido, já no valor final */

/* ---------- E2–E5 · funil de larguras da estrutura (707 · 469 · 414 · 396 → tokens 15,5 em · 470 · 392 · 392) ---------- */
.bf26-ty__title { max-width: 15.5em; }
.bf26-ty__title-ink { display: block; filter: var(--bf26-shadow-title); }   /* sombra de título do KV, fora do filtro da entrada */
.bf26-ty__title .bf26-hl-paper { white-space: nowrap; }                    /* destaque inteiro numa linha (composicao A2) */
.bf26-ty__text { max-width: var(--bf26-form); }
.bf26-ty__cta { width: min(392px, 100%); min-height: 64px; }
.bf26-ty__note { max-width: 392px; font-family: var(--bf26-font-type); font-size: var(--bf26-type-small-size); line-height: 1.5; color: var(--bf26-text-muted); }

/* ---------- mobile ---------- */
@media (max-width: 760px) {
  .bf26-ty__cta { width: 100%; }
  .bf26-progress__head { margin-bottom: 12px; }
  .bf26-progress__track { height: 12px; }
  .bf26-progress__pin { --bf26-pin-size: 18px; }
}
/* aparelhos de 320 px: o destaque pode quebrar e os respiros encolhem para o botão ficar na 1ª dobra (composicao A5) */
@media (max-width: 340px) {
  .bf26-page.bf26-ty { --bf26-ty-topo: 24px; --bf26-ty-gap: 16px; }
  .bf26-ty__title .bf26-hl-paper { white-space: normal; }
}