/* =========================================================================
   A Grande BLACK FRIDAY · Landing page de captura · styles.css (v1.0)
   Escopo: tudo vive dentro de .bf26-page. Nenhuma regra global (html, body, *),
   para conviver com o tema do WordPress sem vazar estilo em nenhuma direção.
   Estrutura: R5 validada (STRUCTURE_VALIDATION.md) · Estética: WEB_DESIGN_SYSTEM.md
   Componentes: COMPONENT_SPECIFICATIONS.md (gb-*) reimplementados com o prefixo bf26-.
   Tokens: o bloco @tokens abaixo é GERADO por build/sincronizar_tokens.py a partir de
   design-system/tokens.css (= WEB_DESIGN_TOKENS.json). Não edite valores ali: edite o JSON.
   ========================================================================= */

/* Famílias renomeadas ("BF26 …") para não colidir com fontes do tema que usem o mesmo nome. */
@font-face { font-family: "BF26 Anton"; src: url("assets/fonts/Anton-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "BF26 Special Elite"; src: url("assets/fonts/SpecialElite-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "BF26 Kalam"; src: url("assets/fonts/Kalam-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* @tokens:begin */
/* GERADO por build/sincronizar_tokens.py (fonte: design-system/tokens.css ← WEB_DESIGN_TOKENS.json). 105 tokens usados nesta folha. */
.bf26-page {
  --bf26-accent: #602431;
  --bf26-accent-active: #4F1E28;
  --bf26-accent-hover: #6B2F3B;
  --bf26-bg: #16181E;
  --bf26-bg-2: #0E0F14;
  --bf26-border: rgba(227,211,185,.28);
  --bf26-border-accent: #602431;
  --bf26-border-error: #C7848F;
  --bf26-border-input: rgba(227,211,185,.45);
  --bf26-border-strong: #E3D3B9;
  --bf26-border-subtle: rgba(227,211,185,.12);
  --bf26-container: 1200px;
  --bf26-disabled-opacity: 0.45;
  --bf26-dur-base: 250ms;
  --bf26-dur-draw: 900ms;
  --bf26-dur-enter: 700ms;
  --bf26-dur-fast: 150ms;
  --bf26-dur-marquee: 60s;
  --bf26-dur-slow: 500ms;
  --bf26-ease: cubic-bezier(.4,0,.2,1);
  --bf26-ease-settle: cubic-bezier(.2,.7,.2,1);
  --bf26-focus: #E3D3B9;
  --bf26-font-hand: "BF26 Kalam", "Segoe Print", "Bradley Hand", cursive;
  --bf26-font-impact: "BF26 Anton", Impact, "Arial Narrow", sans-serif;
  --bf26-font-type: "BF26 Special Elite", "Courier New", Courier, monospace;
  --bf26-form: 470px;
  --bf26-gap-cards: 14px;
  --bf26-gap-form: 10px;
  --bf26-gap-list: clamp(16px, 2vw, 22px);
  --bf26-gap-split: clamp(30px, 5vw, 66px);
  --bf26-gap-stack: clamp(30px, 4vw, 46px);
  --bf26-grad-paper: linear-gradient(180deg, #E8D9C0 0%, #E3D3B9 55%, #D8C7AB 100%);
  --bf26-grad-pin: radial-gradient(circle at 35% 30%, #C7848F 0 14%, #6B2F3B 34%, #602431 62%, #2A0E15 100%);
  --bf26-grad-reading: linear-gradient(90deg, rgba(14,15,20,.62) 0%, rgba(14,15,20,.45) 30%, rgba(14,15,20,0) 40%);
  --bf26-grad-vignette: radial-gradient(ellipse 65% 76% at 55% 44%, rgba(14,15,20,0) 58%, rgba(14,15,20,.7) 100%);
  --bf26-ink: #1C1716;
  --bf26-move-enter: 16px;
  --bf26-move-lift: 3px;
  --bf26-move-nudge: 4px;
  --bf26-offer: 520px;
  --bf26-pad-btn-x: 28px;
  --bf26-pad-card: clamp(24px, 2.8vw, 30px);
  --bf26-pad-card-lg: clamp(22px, 3vw, 32px);
  --bf26-pad-x: clamp(20px, 5vw, 48px);
  --bf26-paper: #E3D3B9;
  --bf26-pin-size: clamp(18px, 1.6vw, 26px);
  --bf26-pin-spec: #C7848F;
  --bf26-polaroid: #ECE8E0;
  --bf26-radius: 0;
  --bf26-radius-round: 50%;
  --bf26-section-y: clamp(56px, 8vw, 104px);
  --bf26-selection-bg: #602431;
  --bf26-selection-text: #E3D3B9;
  --bf26-shadow-card: 0 10px 24px rgba(0,0,0,.35);
  --bf26-shadow-cta: 0 14px 30px rgba(0,0,0,.55), inset 0 0 0 2px rgba(227,211,185,.22);
  --bf26-shadow-lift: 0 22px 40px rgba(0,0,0,.6);
  --bf26-shadow-note: 0 18px 30px rgba(0,0,0,.55), inset 0 2px 0 rgba(255,255,255,.25);
  --bf26-shadow-pin: 2px 6px 8px rgba(0,0,0,.55);
  --bf26-shadow-tape: 0 6px 18px rgba(0,0,0,.45);
  --bf26-stagger: 70ms;
  --bf26-surface-1: #1B1D23;
  --bf26-surface-2: #21242A;
  --bf26-surface-input: #0E1015;
  --bf26-text-body: #C6B9A3;
  --bf26-text-error: #C7848F;
  --bf26-text-muted: #AA9F8E;
  --bf26-text-on-accent: #E3D3B9;
  --bf26-text-on-paper: #1C1716;
  --bf26-text-placeholder: #898175;
  --bf26-text-title: #E3D3B9;
  --bf26-type-body-family: "BF26 Special Elite", "Courier New", Courier, monospace;
  --bf26-type-body-lh: 1.62;
  --bf26-type-body-size: clamp(16px, 15.479px + 0.134vw, 17.5px);
  --bf26-type-button-family: "BF26 Anton", Impact, "Arial Narrow", sans-serif;
  --bf26-type-button-lh: 1.0;
  --bf26-type-button-ls: 0.07em;
  --bf26-type-button-size: clamp(17px, 15.262px + 0.446vw, 22px);
  --bf26-type-button-tt: uppercase;
  --bf26-type-eyebrow-ls: 0.12em;
  --bf26-type-eyebrow-size: clamp(12px, 11.652px + 0.089vw, 13px);
  --bf26-type-h1-family: "BF26 Anton", Impact, "Arial Narrow", sans-serif;
  --bf26-type-h1-lh: 1.18;
  --bf26-type-h1-ls: 0.005em;
  --bf26-type-h1-size: clamp(30px, 24.439px + 1.426vw, 46px);
  --bf26-type-h1-tt: uppercase;
  --bf26-type-h2-family: "BF26 Anton", Impact, "Arial Narrow", sans-serif;
  --bf26-type-h2-ls: 0.005em;
  --bf26-type-h2-size: clamp(32px, 23.658px + 2.139vw, 56px);
  --bf26-type-h2-tt: uppercase;
  --bf26-type-h3-family: "BF26 Anton", Impact, "Arial Narrow", sans-serif;
  --bf26-type-h3-ls: 0.01em;
  --bf26-type-h3-size: clamp(20px, 17.219px + 0.713vw, 28px);
  --bf26-type-h3-tt: uppercase;
  --bf26-type-label-size: clamp(12px, 11.652px + 0.089vw, 13px);
  --bf26-type-lead-family: "BF26 Special Elite", "Courier New", Courier, monospace;
  --bf26-type-lead-lh: 1.6;
  --bf26-type-lead-size: clamp(17px, 15.957px + 0.267vw, 20px);
  --bf26-type-note-sm-lh: 1.1;
  --bf26-type-note-sm-size: clamp(18px, 15.219px + 0.713vw, 26px);
  --bf26-type-number-size: clamp(26px, 21.134px + 1.248vw, 40px);
  --bf26-type-small-size: clamp(13px, 12.652px + 0.089vw, 14px);
  --bf26-wine: #602431;
  --bf26-wine-hl: #8A4250;
  --bf26-wine-light: #6B2F3B;
  --bf26-z-grain: 3;
}
/* @tokens:end */

/* Ajustes de QA visual ao design system (04_DOCUMENTACAO/VISUAL_QA_REPORT.md §5). Recomendação: levar ao WEB_DESIGN_TOKENS.json. */
.bf26-page { --bf26-type-h2-size: clamp(30px, 23.743px + 1.604vw, 48px); }   /* era 32–56: os títulos da copy têm 66–113 caracteres */

/* ---------- base (sempre sob .bf26-page) ---------- */
.bf26-page { position: relative; isolation: isolate; overflow-x: clip; background: var(--bf26-bg); color: var(--bf26-text-body);
  font-family: var(--bf26-type-body-family); font-size: var(--bf26-type-body-size); line-height: var(--bf26-type-body-lh);
  font-weight: 400; font-style: normal; letter-spacing: 0; text-align: left; text-transform: none;
  font-synthesis: none; font-kerning: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.bf26-page, .bf26-page *, .bf26-page *::before, .bf26-page *::after { box-sizing: border-box; }
.bf26-page :where(h1, h2, h3, p, ol, ul, li, figure, blockquote, form, mark, s) { margin: 0; padding: 0; }
.bf26-page :where(ol, ul) { list-style: none; }
.bf26-page :where(img, svg) { display: block; max-width: 100%; }
.bf26-page :where(img) { height: auto; border: 0; }
.bf26-page :where(h1, h2, h3) { font-weight: 400; text-wrap: balance; }
.bf26-page :where(p, li, blockquote) { text-wrap: pretty; }
.bf26-page :where(strong) { font-weight: inherit; }   /* Special Elite e Anton não têm negrito: o destaque é visual (§ destaques) */
.bf26-page :where(a) { color: inherit; }
.bf26-page :where(button, input, select) { font: inherit; color: inherit; margin: 0; }
.bf26-page [hidden] { display: none !important; }      /* o display dos componentes não pode reexibir o que está oculto */
.bf26-page ::selection { background: var(--bf26-selection-bg); color: var(--bf26-selection-text); }
.bf26-page :focus-visible { outline: 2px solid var(--bf26-focus); outline-offset: 3px; }
.bf26-nowrap { white-space: nowrap; }
.bf26-sr { position: absolute !important; 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; }

/* ---------- tipografia ---------- */
.bf26-h1, .bf26-h2, .bf26-h3 { color: var(--bf26-text-title); font-weight: 400; }
.bf26-h1 { font-family: var(--bf26-type-h1-family); font-size: var(--bf26-type-h1-size); line-height: var(--bf26-type-h1-lh); letter-spacing: var(--bf26-type-h1-ls); text-transform: var(--bf26-type-h1-tt); }
/* H2/H3: entrelinha um pouco acima do token (1,0 / 1,1 → 1,15 / 1,18) porque, em caixa alta, os acentos do português (Ê, Ó, Ã) encostavam na linha de cima.
   Recomendação registrada em BUILD_NOTES.md: atualizar o token no WEB_DESIGN_TOKENS.json. */
.bf26-h2 { font-family: var(--bf26-type-h2-family); font-size: var(--bf26-type-h2-size); line-height: 1.15; letter-spacing: var(--bf26-type-h2-ls); text-transform: var(--bf26-type-h2-tt); }
.bf26-h3 { font-family: var(--bf26-type-h3-family); font-size: var(--bf26-type-h3-size); line-height: 1.18; letter-spacing: var(--bf26-type-h3-ls); text-transform: var(--bf26-type-h3-tt); }
.bf26-lead { font-family: var(--bf26-type-lead-family); font-size: var(--bf26-type-lead-size); line-height: var(--bf26-type-lead-lh); color: var(--bf26-text-body); max-width: 60ch; }
.bf26-card__text { font-size: 15px; line-height: 1.62; color: var(--bf26-text-body); }

/* destaques: o papel cobre só a altura das versais (1,05 em centrado), sem invadir as linhas vizinhas */
.bf26-hl-paper { color: var(--bf26-ink); padding: 0 .16em; background: linear-gradient(var(--bf26-paper), var(--bf26-paper)) 0 50% / 100% 1.05em no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; filter: drop-shadow(0 4px 8px rgba(0,0,0,.35)); }
.bf26-hl-underline { color: var(--bf26-text-title); text-decoration: underline; text-decoration-color: var(--bf26-wine-light); text-decoration-thickness: 4px; text-underline-offset: .16em; text-decoration-skip-ink: none; }

/* ---------- layout ---------- */
.bf26-container { width: 100%; max-width: var(--bf26-container); margin-inline: auto; padding-inline: var(--bf26-pad-x); }
/* luz do KV: a parede de ardósia recebe luz suave de cima (slate-mid), como no fundo do Key Visual */
.bf26-section { position: relative; padding-block: var(--bf26-section-y);
  background: radial-gradient(ellipse 80% 520px at 50% 0, rgba(60,63,70,.34) 0, rgba(60,63,70,0) 100%), var(--bf26-bg); }
.bf26-section--deep { background: radial-gradient(ellipse 80% 520px at 50% 0, rgba(60,63,70,.22) 0, rgba(60,63,70,0) 100%), var(--bf26-bg-2); }
/* os títulos da copy são mais longos que os da referência: a coluna do cabeçalho vai a 920 px (≈ 3 linhas no H2 máximo) */
.bf26-section-head { max-width: 920px; margin-inline: auto; text-align: center; }
.bf26-section-head .bf26-lead { margin: 18px auto 0; }
.bf26-section-head + * { margin-top: var(--bf26-gap-stack); }
.bf26-accent-bar { display: block; width: 72px; height: 4px; margin: 0 auto 20px; background: var(--bf26-wine-light); }

/* grão do KV sobre a área (não bloqueia cliques) */
.bf26-grain { position: relative; isolation: isolate; }
.bf26-grain::after { content: ""; position: absolute; inset: 0; z-index: var(--bf26-z-grain); pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='300' height='300' filter='url(%23n)'/></svg>"); }

/* ---------- elementos oficiais: pino, papel, ícones ---------- */
.bf26-pin { display: block; width: var(--bf26-pin-size); height: var(--bf26-pin-size); border-radius: var(--bf26-radius-round); background: var(--bf26-grad-pin); box-shadow: var(--bf26-shadow-pin); flex: none; }
.bf26-ico { display: inline-block; flex: none; width: 1em; height: 1em; }
.bf26-note { position: relative; display: inline-flex; align-items: center; gap: .42em; padding: .62em 1em .46em; background: var(--bf26-grad-paper); color: var(--bf26-text-on-paper); box-shadow: var(--bf26-shadow-note);
  font-family: var(--bf26-font-hand); font-weight: 700; font-size: var(--bf26-type-note-sm-size); line-height: var(--bf26-type-note-sm-lh); transform: rotate(var(--r, -2deg)); }
.bf26-note > .bf26-pin { position: absolute; left: 50%; top: calc(var(--bf26-pin-size) * -.42); margin-left: calc(var(--bf26-pin-size) / -2); }
.bf26-note .bf26-ico { width: .9em; height: .9em; color: var(--bf26-wine); transform: translateY(-.06em); }
.bf26-note--date { --r: -2deg; letter-spacing: .01em; }

/* ---------- botões ---------- */
.bf26-button { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 56px; padding: .15em var(--bf26-pad-btn-x) 0;
  border: 0; border-radius: var(--bf26-radius); cursor: pointer; text-decoration: none; text-align: center; white-space: nowrap; user-select: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  font-family: var(--bf26-type-button-family); font-size: var(--bf26-type-button-size); line-height: var(--bf26-type-button-lh); font-weight: 400;
  letter-spacing: var(--bf26-type-button-ls); text-transform: var(--bf26-type-button-tt);
  transition: background-color var(--bf26-dur-fast) var(--bf26-ease), box-shadow var(--bf26-dur-base) var(--bf26-ease), transform var(--bf26-dur-base) var(--bf26-ease), color var(--bf26-dur-fast) var(--bf26-ease); }
.bf26-button--primary { background: var(--bf26-accent); color: var(--bf26-text-on-accent); box-shadow: var(--bf26-shadow-cta); }
.bf26-button--primary::after { content: ""; flex: none; border-left: .47em solid currentColor; border-top: .3em solid transparent; border-bottom: .3em solid transparent;
  margin-top: -.12em; transition: transform var(--bf26-dur-base) var(--bf26-ease-settle); }
.bf26-button--primary:active { background: var(--bf26-accent-active); transform: translateY(0) scale(.98); }
.bf26-button:focus-visible { outline: 2px solid var(--bf26-focus); outline-offset: 3px; }
.bf26-button--block { width: 100%; }
.bf26-button[aria-disabled="true"], .bf26-button:disabled { opacity: var(--bf26-disabled-opacity); cursor: not-allowed; transform: none; }
@media (hover: hover) {
  .bf26-button--primary:hover { background: var(--bf26-accent-hover); transform: translateY(-1px); box-shadow: 0 18px 34px rgba(0,0,0,.6), inset 0 0 0 2px rgba(227,211,185,.32); }
  .bf26-button--primary:hover::after { transform: translateX(var(--bf26-move-nudge)); }
  .bf26-button--primary:active { background: var(--bf26-accent-active); transform: translateY(0) scale(.98); }
}

/* ---------- formulário ---------- */
.bf26-form { display: grid; gap: var(--bf26-gap-form); width: 100%; max-width: var(--bf26-form); text-align: left; }
.bf26-form:focus { outline: none; }
.bf26-form:focus-visible { outline: 2px solid var(--bf26-focus); outline-offset: 8px; }
.bf26-field { display: grid; gap: 6px; min-width: 0; }
.bf26-input { display: block; width: 100%; height: 54px; padding: 0 16px; border: 1px solid var(--bf26-border-input); border-radius: 0; background: var(--bf26-surface-input); color: var(--bf26-text-title);
  font: 400 17px/1.2 var(--bf26-font-type); letter-spacing: .02em; -webkit-appearance: none; appearance: none; box-shadow: none;
  transition: border-color var(--bf26-dur-fast) var(--bf26-ease), box-shadow var(--bf26-dur-fast) var(--bf26-ease); }
.bf26-input::placeholder { color: var(--bf26-text-placeholder); opacity: 1; }
.bf26-input:focus, .bf26-input:focus-visible { outline: none; border-color: var(--bf26-border-strong); box-shadow: 0 0 0 1px var(--bf26-border-strong); }
.bf26-input[aria-invalid="true"] { border-color: var(--bf26-border-error); box-shadow: 0 0 0 1px var(--bf26-border-error); }
.bf26-input--select { padding-right: 34px; cursor: pointer;
  background: var(--bf26-surface-input) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0h10L5 6z' fill='%23E3D3B9'/></svg>") right 14px center no-repeat; }
.bf26-input--select option { background: var(--bf26-bg); color: var(--bf26-text-title); }
@media (hover: hover) { .bf26-input:hover:not(:focus) { border-color: rgba(227,211,185,.62); } }
.bf26-form__tel { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 9px; align-items: start; }
.bf26-field__error { font: 400 var(--bf26-type-small-size)/1.45 var(--bf26-font-type); color: var(--bf26-text-error); }
.bf26-form__status { padding: 10px 14px; border: 1px dashed var(--bf26-border-input); font: 400 var(--bf26-type-small-size)/1.5 var(--bf26-font-type); color: var(--bf26-text-body); text-align: center; }

/* ---------- P01 · hero (cena do KV) ---------- */
.bf26-hero { position: relative; isolation: isolate; overflow: hidden; min-height: 760px; display: flex; flex-direction: column; padding: 26px var(--bf26-pad-x) 0;
  background: var(--bf26-bg) url("assets/img/parede.webp") left center / cover no-repeat; }
.bf26-hero__scene { --bf26-hero-mask: 24%;   /* lido também pelo script.js (o pino do fio precisa estar na parte opaca) */
  position: absolute; inset: 0 0 0 auto; width: 56%; z-index: 0;   /* o quadro começa depois da coluna de texto */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--bf26-hero-mask)); mask-image: linear-gradient(90deg, transparent 0, #000 var(--bf26-hero-mask)); }
.bf26-hero__scene img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 78% 18%; }
.bf26-hero__scene::after { content: ""; position: absolute; inset: 0; background: var(--bf26-grad-vignette); }
.bf26-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--bf26-grad-reading); pointer-events: none; }
.bf26-hero__string { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; overflow: visible; }
.bf26-hero__string path { fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }   /* pathLength="1" no HTML */
.bf26-hero__string-shadow { stroke: rgba(0,0,0,.45); stroke-width: 5px; transform: translate(3px, 7px); }
.bf26-hero__string-line { stroke: var(--bf26-wine); stroke-width: 3.2px; }
.bf26-hero__string-shine { stroke: var(--bf26-wine-hl); stroke-width: 1px; stroke-opacity: .6; transform: translate(0, -1px); }
.bf26-hero__string.is-ready path { animation: bf26-draw var(--bf26-dur-draw) var(--bf26-ease-settle) 600ms forwards; }
.bf26-hero__grid { position: relative; z-index: 2; flex: 1 1 auto; width: 100%; max-width: var(--bf26-container); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); gap: 30px; align-items: center; padding-bottom: 10px; }
.bf26-hero__content { padding-block: 4px 18px; }
.bf26-hero__content > * + * { margin-top: 14px; }
.bf26-hero__logo { width: clamp(150px, 13vw, 196px); height: auto; }   /* largura da logo na referência: 196 px */
.bf26-hero__dates { margin-top: 16px; }
.bf26-hero__content > .bf26-h1 { max-width: 14em; margin-top: 18px; }
.bf26-hero__content .bf26-h1 .bf26-hl-paper { white-space: normal; }
.bf26-hero__sub { max-width: 31.5em; font-family: var(--bf26-type-lead-family); font-size: var(--bf26-type-lead-size); line-height: 1.55; color: var(--bf26-text-body); }
.bf26-hero__content > .bf26-form { margin-top: 20px; }

/* ---------- P02 · faixas (decorativas) ---------- */
.bf26-marquee { position: relative; overflow: hidden; padding: 20px 0 24px; background: var(--bf26-bg-2); }
.bf26-marquee__strip { width: 112%; margin-left: -6%; overflow: hidden; white-space: nowrap; box-shadow: 0 10px 24px rgba(0,0,0,.5);
  font: 400 clamp(14px, 1.2vw, 17px)/1 var(--bf26-font-impact); letter-spacing: .22em; text-transform: uppercase; }
.bf26-marquee__strip--paper { background: var(--bf26-paper); color: var(--bf26-ink); transform: rotate(-1.5deg); }
.bf26-marquee__strip--wine { position: relative; background: var(--bf26-wine); color: var(--bf26-paper); transform: rotate(1.5deg); margin-top: -12px; }
.bf26-marquee__track { display: inline-flex; align-items: center; gap: 2.4em; height: 58px; padding-top: 2px; animation: bf26-marquee var(--bf26-dur-marquee) linear infinite; will-change: transform; }
.bf26-marquee__strip--wine .bf26-marquee__track { animation-direction: reverse; }
.bf26-marquee__sep { width: .62em; height: .62em; border-radius: 50%; background: var(--bf26-grad-pin); box-shadow: 1px 2px 3px rgba(0,0,0,.45); transform: translateY(-.04em); }
.bf26-marquee__strip--wine .bf26-marquee__sep { background: var(--bf26-paper); box-shadow: none; }
@media (hover: hover) { .bf26-marquee:hover .bf26-marquee__track { animation-play-state: paused; } }

/* ---------- P03 · contador (oculto até ter hora e rótulo) ---------- */
.bf26-countdown { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; padding: 16px var(--bf26-pad-x); background: var(--bf26-bg-2); border-block: 1px solid var(--bf26-border-subtle); }
.bf26-countdown__label { font: 400 var(--bf26-type-label-size)/1.4 var(--bf26-font-type); letter-spacing: .12em; text-transform: uppercase; color: var(--bf26-text-title); }
.bf26-countdown__boxes { display: flex; gap: 8px; }
.bf26-countdown__box { min-width: 58px; padding: 6px 8px 5px; text-align: center; background: var(--bf26-grad-paper); color: var(--bf26-ink); box-shadow: 0 6px 12px rgba(0,0,0,.45); }
.bf26-countdown__box b { display: block; font: 400 var(--bf26-type-number-size)/1 var(--bf26-font-impact); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.bf26-countdown__box small { display: block; margin-top: 3px; font: 400 10px/1 var(--bf26-font-type); letter-spacing: .12em; text-transform: uppercase; }

/* ---------- cards ---------- */
.bf26-card { position: relative; background: var(--bf26-surface-1); border: 1px solid var(--bf26-border); padding: var(--bf26-pad-card); box-shadow: var(--bf26-shadow-card); }
.bf26-card--accent { border-color: var(--bf26-border-accent); box-shadow: var(--bf26-shadow-card), inset 0 3px 0 var(--bf26-accent); }
.bf26-card > .bf26-h3 + .bf26-card__text { margin-top: 10px; }
@media (hover: hover) {
  .bf26-card:not(.bf26-card--paper):hover { transform: translateY(calc(var(--bf26-move-lift) * -1)); box-shadow: var(--bf26-shadow-lift); border-color: var(--bf26-border-input); background: var(--bf26-surface-2); }
  .bf26-card--accent:hover { box-shadow: var(--bf26-shadow-lift), inset 0 3px 0 var(--bf26-accent); border-color: var(--bf26-border-accent); }
}

/* ---------- P04 · linha do tempo dos 3 passos ---------- */
.bf26-timeline { display: grid; gap: var(--bf26-gap-list); }
.bf26-timeline__item { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: clamp(16px, 2.4vw, 28px); align-items: start; }
/* o "fio" vinho liga o centro de um marcador ao centro do seguinte (não passa do último) */
.bf26-timeline__item:not(:last-child)::before { content: ""; position: absolute; left: 26.5px; top: 36px; width: 3px; height: calc(100% + var(--bf26-gap-list));
  background: var(--bf26-wine); box-shadow: 1px 0 0 rgba(138,66,80,.6); }
.bf26-timeline__marker { position: relative; z-index: 1; width: 56px; height: 56px; margin-top: 8px; display: grid; place-items: center; border-radius: 50%;
  background: var(--bf26-bg-2); box-shadow: inset 0 0 0 1px var(--bf26-border-input); }
.bf26-timeline__icon { width: 20px; height: 20px; border-radius: 50%; background: var(--bf26-grad-pin); box-shadow: var(--bf26-shadow-pin); }   /* lugar do ícone (A10) */
.bf26-timeline__item--accent .bf26-timeline__marker { background: var(--bf26-grad-pin); box-shadow: var(--bf26-shadow-pin); }
.bf26-timeline__item--accent .bf26-timeline__icon { width: 16px; height: 16px; background: none; box-shadow: inset 0 0 0 2px var(--bf26-paper); }
.bf26-timeline__card { padding: var(--bf26-pad-card-lg); }
.bf26-timeline__card .bf26-card__text { max-width: 80ch; font-size: clamp(15px, 14.479px + .134vw, 16.5px); }   /* referência: 16,5 px */

/* ---------- P05 · dores (bilhetes presos na parede) ---------- */
.bf26-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); gap: 30px var(--bf26-gap-cards); }
.bf26-card--paper { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; padding: calc(var(--bf26-pad-card) + 4px) var(--bf26-pad-card) var(--bf26-pad-card);
  background: var(--bf26-grad-paper); color: var(--bf26-text-on-paper); border: 0; box-shadow: var(--bf26-shadow-note); transform: rotate(var(--r, -1.2deg)); }
.bf26-card--paper > .bf26-pin { position: absolute; top: -9px; left: 50%; --bf26-pin-size: 22px; margin-left: -11px; transition: transform var(--bf26-dur-base) var(--bf26-ease); }
.bf26-card--paper .bf26-ico--x { width: 26px; height: 26px; margin-top: 1px; color: var(--bf26-wine); }
.bf26-card--paper p { font: 700 clamp(18px, 16.609px + .357vw, 22px)/1.24 var(--bf26-font-hand); color: var(--bf26-ink); }
@media (hover: hover) {
  .bf26-card--paper:hover { transform: rotate(0deg) translateY(calc(var(--bf26-move-lift) * -1)); box-shadow: var(--bf26-shadow-lift), inset 0 2px 0 rgba(255,255,255,.25); }
  .bf26-card--paper:hover > .bf26-pin { transform: scale(.92); }
}
.bf26-closing { max-width: 860px; margin: clamp(56px, 8vw, 88px) auto 0; text-align: center; }
.bf26-closing__title { font-family: var(--bf26-type-h2-family); font-size: var(--bf26-type-h2-size); line-height: 1.15; letter-spacing: var(--bf26-type-h2-ls);
  text-transform: uppercase; color: var(--bf26-text-title); text-wrap: balance; }
.bf26-closing__text { max-width: 60ch; margin: 18px auto 30px; font-family: var(--bf26-type-lead-family); font-size: var(--bf26-type-lead-size); line-height: var(--bf26-type-lead-lh); color: var(--bf26-text-body); }

/* ---------- P06 · oferta ---------- */
/* cursos: flex com quebra para a última linha ficar centrada (3 + 3 + 1 · 2 + 2 + 2 + 1 · 1) */
.bf26-courses { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px var(--bf26-gap-cards); }
.bf26-course { display: flex; flex: 0 1 calc((100% - 2 * var(--bf26-gap-cards)) / 3); min-width: 0; }
.bf26-course__card { flex: 1 1 auto; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.bf26-course__cover { position: relative; display: grid; place-items: center; height: 178px; border-bottom: 1px solid var(--bf26-border-subtle);
  background: var(--bf26-bg) url("assets/img/parede.webp") center / cover no-repeat; }
.bf26-course__cover::before { content: ""; position: absolute; top: calc(50% - 72px); left: 50%; z-index: 1; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--bf26-grad-pin); box-shadow: var(--bf26-shadow-pin); }
/* capa = imagem de produto, sem recolorir, numa moldura de polaroide (as capas recebidas são pequenas: A9) */
.bf26-course__cover img { box-sizing: content-box; width: auto; height: 108px; max-width: calc(100% - 64px); object-fit: contain; padding: 6px 6px 16px; background: var(--bf26-polaroid);
  box-shadow: var(--bf26-shadow-note); transform: rotate(var(--r, -1.6deg)); }
.bf26-course:nth-child(even) .bf26-course__cover img, .bf26-course:nth-child(even) .bf26-course__cover > span { --r: 1.4deg; }
.bf26-course__cover--missing > span { position: relative; display: grid; place-items: center; box-sizing: content-box; width: 150px; height: 108px; padding: 6px 6px 16px;
  background: var(--bf26-polaroid); box-shadow: var(--bf26-shadow-note); transform: rotate(var(--r, -1.6deg)); text-align: center;
  font: 400 13px/1.3 var(--bf26-font-type); color: rgba(28,23,22,.72); }
.bf26-course__cover--missing > span::before { content: ""; position: absolute; inset: 6px 6px 16px; border: 1px dashed rgba(28,23,22,.4); }   /* capa do curso 1 pendente (A9) */
.bf26-course__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: var(--bf26-pad-card); }
.bf26-course__name { font-size: clamp(20px, 18.609px + .357vw, 24px); }
.bf26-course__price { margin-top: 8px; font: 400 14px/1.4 var(--bf26-font-type); letter-spacing: .04em; color: var(--bf26-text-muted); }
.bf26-course__price s { color: var(--bf26-text-body); text-decoration: line-through; text-decoration-color: var(--bf26-pin-spec); text-decoration-thickness: 2px; }
.bf26-course__body .bf26-card__text { margin-top: 12px; }

/* bônus: post-its (papel = a única superfície com a fonte manuscrita) */
.bf26-bonus { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 18px; margin-top: clamp(48px, 7vw, 72px); }
.bf26-bonus__item { position: relative; padding: 28px 20px 22px; text-align: center; background: var(--bf26-grad-paper); color: var(--bf26-text-on-paper); box-shadow: var(--bf26-shadow-note); transform: rotate(var(--r, -1.2deg)); }
.bf26-bonus__item > .bf26-pin { position: absolute; top: -9px; left: 50%; --bf26-pin-size: 22px; margin-left: -11px; }
.bf26-bonus__label { display: block; font: 400 13px/1.3 var(--bf26-font-type); letter-spacing: .1em; text-transform: uppercase; color: var(--bf26-wine); }
.bf26-bonus__name { display: block; margin-top: 8px; text-wrap: balance; font: 700 clamp(19px, 18.304px + .178vw, 21px)/1.16 var(--bf26-font-hand); color: var(--bf26-ink); }
.bf26-bonus__note { display: block; margin-top: 10px; font: 400 13.5px/1.45 var(--bf26-font-type); color: rgba(28,23,22,.8); }
@media (hover: hover) { .bf26-bonus__item:hover { transform: rotate(0deg) translateY(calc(var(--bf26-move-lift) * -1)); box-shadow: var(--bf26-shadow-lift), inset 0 2px 0 rgba(255,255,255,.25); } }

/* card de valor sobre o quadro do KV desfocado */
.bf26-vitrine { position: relative; isolation: isolate; overflow: hidden; margin-top: clamp(56px, 8vw, 88px); padding: clamp(44px, 7vw, 88px) clamp(16px, 4vw, 48px);
  background: var(--bf26-bg-2); border: 1px solid var(--bf26-border-subtle); }
/* o quadro (centro em 66,4% da imagem) fica centrado atrás do card: caixa 145% mais larga, deslocada 45% para a esquerda */
.bf26-vitrine__bg { position: absolute; top: 0; left: -45%; z-index: -2; width: 145%; height: 100% !important; max-width: none; object-fit: cover; object-position: 66.4% 50%; }
.bf26-vitrine::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(14,15,20,.12) 0, rgba(14,15,20,.7) 100%); }
.bf26-price-card { position: relative; max-width: var(--bf26-offer); margin: 0 auto; padding: clamp(30px, 4vw, 42px) clamp(18px, 2.4vw, 31px); text-align: center;
  background: rgba(27,29,35,.95); border: 1px solid var(--bf26-border-accent); box-shadow: var(--bf26-shadow-lift), inset 0 3px 0 var(--bf26-accent); }
.bf26-price-card__title { font-family: var(--bf26-type-h3-family); font-size: var(--bf26-type-h3-size); line-height: 1.15; letter-spacing: .02em; text-transform: uppercase; color: var(--bf26-text-title); font-weight: 400; }
.bf26-price-card__total { margin-top: 10px; font: 400 var(--bf26-type-number-size)/1 var(--bf26-font-impact); letter-spacing: .02em; color: var(--bf26-text-muted); }
.bf26-price-card__total s { text-decoration: line-through; text-decoration-color: var(--bf26-pin-spec); text-decoration-thickness: 3px; }
.bf26-price-card__label { margin-top: 26px; font: 400 clamp(14px, 13.304px + .178vw, 16px)/1.45 var(--bf26-font-type); letter-spacing: .08em; text-transform: uppercase; color: var(--bf26-text-body); }
.bf26-price-card__reveal { width: fit-content; max-width: 100%; margin: 14px auto 30px; padding: .2em .42em .1em; background: var(--bf26-grad-paper); color: var(--bf26-ink);
  font: 400 var(--bf26-type-h1-size)/1.05 var(--bf26-font-impact); letter-spacing: .01em; text-transform: uppercase; box-shadow: var(--bf26-shadow-tape); transform: rotate(-1.5deg); text-wrap: balance; }

/* ---------- P07 · bio ---------- */
.bf26-bio__grid { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1fr); gap: var(--bf26-gap-split); align-items: center; }
.bf26-bio__photo { position: relative; justify-self: center; width: 100%; max-width: 440px; padding: 12px 12px 46px; background: var(--bf26-polaroid); box-shadow: var(--bf26-shadow-note); transform: rotate(-1.6deg); }
.bf26-bio__photo::before { content: ""; position: absolute; top: -9px; left: 50%; z-index: 1; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; background: var(--bf26-grad-pin); box-shadow: var(--bf26-shadow-pin); }
.bf26-bio__photo img { width: 100%; height: auto; aspect-ratio: 701 / 935; object-fit: cover; }
.bf26-bio__kicker { font: 400 var(--bf26-type-eyebrow-size)/1.5 var(--bf26-font-type); letter-spacing: var(--bf26-type-eyebrow-ls); text-transform: uppercase; color: var(--bf26-text-muted); max-width: 46ch; }
.bf26-bio__kicker::before { content: ""; display: block; width: 72px; height: 4px; margin-bottom: 1em; background: var(--bf26-wine-light); }
.bf26-bio__name { margin-top: 14px; }
.bf26-bio__text > .bf26-lead { margin-top: 18px; }
.bf26-quote { position: relative; max-width: 34em; margin-top: 34px; padding: 26px 26px 22px; background: var(--bf26-grad-paper); color: var(--bf26-ink); box-shadow: var(--bf26-shadow-note); transform: rotate(.8deg); }
.bf26-quote::before { content: ""; position: absolute; top: -9px; left: 50%; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: var(--bf26-grad-pin); box-shadow: var(--bf26-shadow-pin); }
.bf26-quote p { font: 700 clamp(19px, 16.913px + .535vw, 25px)/1.24 var(--bf26-font-hand); color: var(--bf26-ink); }
.bf26-bio__closing { margin-top: 32px; padding-left: 18px; border-left: 4px solid var(--bf26-wine-light); font-family: var(--bf26-type-lead-family); font-size: var(--bf26-type-lead-size); line-height: 1.55; color: var(--bf26-text-title); }

/* ---------- P08 · rodapé ---------- */
.bf26-footer { padding-block: clamp(44px, 6vw, 68px); background: var(--bf26-bg); border-top: 1px solid var(--bf26-border-subtle); text-align: center; }
.bf26-footer .bf26-container { display: flex; flex-direction: column; align-items: center; }
.bf26-footer__logo { width: 220px; }
.bf26-footer .bf26-button { margin: 28px 0 24px; }
.bf26-closing .bf26-button, .bf26-footer .bf26-button { width: min(392px, calc(100% - 28px)); }
.bf26-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; margin-top: 10px; }
/* placeholder identificado de informação pendente (nunca texto inventado) */
.bf26-pendente { display: inline-block; padding: 4px 10px; border: 1px dashed var(--bf26-border-input); font: 400 13px/1.5 var(--bf26-font-type); color: var(--bf26-text-muted); }

/* ---------- movimento ---------- */
/* A · entrada do hero: o texto nunca parte de opacidade 0 (visível no 1º quadro, não atrasa o LCP) */
.bf26-enter { animation: bf26-rise var(--bf26-dur-enter) var(--bf26-ease-settle) both; animation-delay: calc(var(--i, 0) * var(--bf26-stagger) + 100ms); }
@keyframes bf26-rise { from { opacity: .35; translate: 0 12px; filter: blur(3px); } }
/* B · revelação por rolagem: só oculta quando o script.js confirmou o IntersectionObserver (.bf26-io).
   Sem JS, ou se o script falhar, todo o conteúdo fica visível. Usa "translate" para não apagar a rotação dos papéis. */
.bf26-reveal { transition-property: opacity, translate, filter, transform, box-shadow, background-color, border-color;
  transition-duration: var(--bf26-dur-slow), var(--bf26-dur-slow), var(--bf26-dur-slow), var(--bf26-dur-base), var(--bf26-dur-base), var(--bf26-dur-base), var(--bf26-dur-base);
  transition-timing-function: var(--bf26-ease-settle), var(--bf26-ease-settle), var(--bf26-ease-settle), var(--bf26-ease), var(--bf26-ease), var(--bf26-ease), var(--bf26-ease);
  transition-delay: calc(var(--i, 0) * var(--bf26-stagger)), calc(var(--i, 0) * var(--bf26-stagger)), calc(var(--i, 0) * var(--bf26-stagger)), 0s, 0s, 0s, 0s; }
.bf26-io .bf26-reveal:not(.is-in) { opacity: 0; translate: 0 var(--bf26-move-enter); filter: blur(6px); }
@keyframes bf26-draw { to { stroke-dashoffset: 0; } }
@keyframes bf26-marquee { to { transform: translateX(-50%); } }

/* ---------- tablet em duas colunas (761–1100 px): a coluna de texto avança sobre o quadro ---------- */
@media (min-width: 761px) and (max-width: 1100px) {
  .bf26-hero__scene { --bf26-hero-mask: 44%; }   /* esmaecimento mais longo: os bilhetes claros não ficam atrás das letras */
  /* sombra de leitura: mesma cor e lógica da oficial (§09), estendida até onde o texto chega nesta faixa */
  .bf26-hero::before { background: linear-gradient(90deg, rgba(14,15,20,.72) 0%, rgba(14,15,20,.6) 46%, rgba(14,15,20,0) 64%); }
}
/* 761–900 px: a cena fica estreita; o recorte vai para o expert (como a foto da coluna direita da referência),
   e os bilhetes claros do quadro saem de trás do texto */
@media (min-width: 761px) and (max-width: 900px) {
  .bf26-hero__scene img { object-position: 100% 18%; }
}
/* ---------- bônus em 2 colunas até 1100 px: em 4 colunas o post-it ficava com 187 px e o nome quebrava em 3 linhas ---------- */
@media (max-width: 1100px) {
  .bf26-bonus { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 22px; }
}
/* ---------- tablet retrato (≤ 900 px) ---------- */
@media (max-width: 900px) {
  .bf26-course { flex-basis: calc((100% - var(--bf26-gap-cards)) / 2); }
  .bf26-bio__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .bf26-bio__photo { max-width: 380px; }
  .bf26-bio__text { max-width: 640px; justify-self: center; }
}
/* ---------- mobile (≤ 760 px: hero reorganizado como na estrutura validada) ---------- */
@media (max-width: 760px) {
  .bf26-button { padding-inline: 18px; }
  .bf26-hero { min-height: 0; padding-top: 28px; }
  .bf26-hero::before, .bf26-hero__string, .bf26-hero__spacer { display: none; }
  .bf26-hero__grid { order: 1; grid-template-columns: minmax(0, 1fr); gap: 0; padding-bottom: 0; }
  .bf26-hero__content { display: flex; flex-direction: column; align-items: center; padding-block: 0; text-align: center; }
  .bf26-hero__content > .bf26-h1 { max-width: 15em; }
  .bf26-marquee__track { height: 52px; }
  .bf26-vitrine { margin-inline: calc(8px - var(--bf26-pad-x)); padding-inline: 13px; }
  .bf26-hero__sub { max-width: 32em; }
  .bf26-hero__content > .bf26-form { margin-top: 24px; }
  .bf26-hero .bf26-button { min-height: 52px; }
  .bf26-hero__scene { order: 2; position: relative; inset: auto; width: auto; height: 370px; margin: 14px calc(var(--bf26-pad-x) * -1) 0;   /* foto depois do formulário */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%); mask-image: linear-gradient(180deg, transparent 0, #000 22%); }
  .bf26-hero__scene img { object-position: 100% 18%; }   /* o expert fica à direita da foto: no recorte estreito ele precisa aparecer inteiro */
  .bf26-timeline__item { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
  .bf26-timeline__item:not(:last-child)::before { left: 18.5px; top: 26px; }
  .bf26-timeline__marker { width: 40px; height: 40px; margin-top: 6px; }
  .bf26-timeline__icon { width: 15px; height: 15px; }
  .bf26-timeline__item--accent .bf26-timeline__icon { width: 12px; height: 12px; }
  .bf26-countdown { flex-direction: column; gap: 10px; }
  .bf26-course__cover { height: 150px; }
  .bf26-course__cover img { height: 92px; }
  .bf26-course__cover--missing > span { height: 92px; width: 128px; }
  .bf26-course__cover::before { top: calc(50% - 64px); }
}
/* ---------- telefones (≤ 400 px): o placeholder "DIGITE SEU WHATSAPP" precisa caber inteiro ---------- */
@media (max-width: 400px) {
  .bf26-form__tel { grid-template-columns: 88px minmax(0, 1fr); }
  .bf26-input { padding-inline: 12px; font-size: 16px; letter-spacing: 0; }   /* 16 px: o iOS não dá zoom no foco */
  .bf26-input--select { padding-right: 26px; background-position: right 10px center; }
}
@media (max-width: 340px) {
  .bf26-form__tel { grid-template-columns: 78px minmax(0, 1fr); gap: 6px; }
}
/* ---------- mobile estreito (≤ 560 px) ---------- */
@media (max-width: 560px) {
  .bf26-course { flex-basis: 100%; }
  .bf26-bonus { grid-template-columns: minmax(0, 1fr); gap: 30px; max-width: 400px; margin-inline: auto; }
  .bf26-card--paper { grid-template-columns: 22px minmax(0, 1fr); gap: 10px; }
  .bf26-card--paper .bf26-ico--x { width: 22px; height: 22px; }
  .bf26-bio__photo { max-width: 320px; padding: 10px 10px 38px; }
  .bf26-quote { padding: 24px 20px 20px; }
}

/* ---------- modo estático (?estatico=1): capturas e auditorias sem animação ---------- */
.bf26-static *, .bf26-static *::before, .bf26-static *::after { animation: none !important; transition: none !important; }
.bf26-static .bf26-reveal { opacity: 1 !important; translate: 0 0 !important; filter: none !important; }
.bf26-static .bf26-hero__string path { stroke-dashoffset: 0; }

/* ---------- movimento reduzido: nada se move, tudo aparece ---------- */
@media (prefers-reduced-motion: reduce) {
  .bf26-page *, .bf26-page *::before, .bf26-page *::after { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .bf26-marquee__track { animation: none !important; }
  .bf26-io .bf26-reveal:not(.is-in) { opacity: 1; translate: 0 0; filter: none; }
  .bf26-hero__string path { stroke-dashoffset: 0; }
}