/* Black Friday VoaSim 2026 — visual APROVADO pelo Rodrigo (prévia bf-voasim, 01/11/2026). Só .com.br.
   Faixa preta em todas as páginas; tema escuro (fundo, header, hero, títulos) só na HOME (html.bf-home); caixa de preço escura onde houver simulador.
   O preço vem SEMPRE do servidor (/api/lead → preco.bf); nenhum contador numérico em público. */
:root{--bfbg:#0B0C0F;--bfcard:#16181D;--bfline:#2A2D35;--bfamb:#FFB13B}
html.bf,html.bf body{overflow-x:hidden}
.bfbar{background:#000;border-bottom:1px solid #3a2c10;color:#fff;font-size:14px;line-height:1.2;text-align:center;padding:10px 14px;position:sticky;top:0;z-index:999;display:flex;gap:14px;justify-content:center;align-items:center;font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif}
.bfbar .k{background:var(--bfamb);color:#000;border-radius:6px;padding:4px 9px;font-weight:900;letter-spacing:.06em;font-size:12.5px;white-space:nowrap}
.bfbar .m b{color:var(--bfamb);font-weight:900}
.bfbar .r{color:#27E28A;font-weight:700}
.bfbar a{color:#000;background:#27E28A;border-radius:999px;padding:6px 14px;text-decoration:none;font-weight:800;font-size:13px;white-space:nowrap}
/* ---- home ---- */
html.bf-home body{background:var(--bfbg)!important}
html.bf-home header{background:var(--bfbg)!important;border-bottom:1px solid var(--bfline)!important}
html.bf-home header .word b{color:#fff!important} html.bf-home header .hdr-right a{color:#aab3c2!important} html.bf-home header .hdr-right a[class*=btn],html.bf-home header a.cta,html.bf-home header .hdr-right a[href*=simulador]{color:#000!important;font-weight:800}
html.bf-home .hero{position:relative}
html.bf-home .hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.6) 55%,rgba(0,0,0,.35) 100%);z-index:0}
html.bf-home .hero .wrap{position:relative;z-index:1}
html.bf-home .hero h1{color:#fff!important}html.bf-home .hero h1 em{color:#27E28A!important}
html.bf-home .hero .hsub{color:#e4e8ef!important;font-weight:600}
html.bf-home .hero .hchecks span{color:#fff!important}html.bf-home .hero .hchecks i{color:#27E28A!important}
html.bf-home .hero .selo{background:var(--bfamb)!important;color:#000!important;border:0!important;font-weight:900!important;letter-spacing:.04em}
.bfoff{display:flex;align-items:center;gap:12px;margin:4px 0 12px}
.bfoff .n{font-size:58px;font-weight:900;color:var(--bfamb);line-height:1}
.bfoff .t{font-size:16px;font-weight:800;color:#fff;line-height:1.25}
.bfoff .t small{display:block;color:#27E28A;font-weight:700;font-size:13.5px;margin-top:2px}
.bfhow{display:inline-block;margin-top:10px;font-size:13px;font-weight:700;color:#cfd6e2!important;text-decoration:underline;text-underline-offset:3px}
html.bf-home .simsec{background:var(--bfbg)!important}
html.bf-home .loja-head h2,html.bf-home .loja-head p,html.bf-home #destinos h2,html.bf-home .destinos h2,html.bf-home .destinos .loja-head *,html.bf-home .incluso h2,html.bf-home .como h2,html.bf-home .fotos h2{color:#fff!important}
/* ---- caixa de preço (qualquer página com simulador) ---- */
html.bf #precobox.on.bfon{background:#0B0C0F!important;border:2px solid var(--bfamb)!important;color:#fff!important}
html.bf #precobox.on.bfon .l1{color:#fff!important}
html.bf #precobox.on.bfon .cheia{color:#8a93a3!important}
html.bf #precobox.on.bfon .agora{color:#fff!important}
html.bf #precobox.on.bfon .l3{color:#dfe4ec!important}
html.bf #precobox.on.bfon #cupomlink{color:#aab3c2!important}
.bfp{margin-top:10px;border-top:1px solid #2a2d35;padding-top:10px;font-size:13.5px;line-height:1.45;color:#e8ebf1}
.bfp .tag{display:inline-block;background:var(--bfamb);color:#000;font-weight:900;border-radius:6px;padding:2px 8px;font-size:12px;letter-spacing:.04em;margin-bottom:6px}
.bfp b{color:#27E28A}
.bfp .esc{color:var(--bfamb);font-weight:800}
.bfp .ext{display:block;margin-top:6px}
.bft3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
.bft3 div{background:#16181D;border:1px solid #2a2d35;border-radius:10px;padding:7px 8px;font-size:12px;color:#aab3c2}
.bft3 div b{display:block;font-size:17px;color:#fff}
.bft3 div.on{border-color:var(--bfamb)}.bft3 div.on b{color:var(--bfamb)}
/* ---- página de obrigado ---- */
.bf-obrigado{background:#0B0C0F;color:#e8ebf1;border:2px solid var(--bfamb);border-radius:14px;padding:14px 16px;margin:0 0 16px;font-size:14px;line-height:1.5}
.bf-obrigado b{color:var(--bfamb)}
@media(max-width:720px){html.bf-home .hero{min-height:0!important;height:auto!important;padding-bottom:18px!important}html.bf-home .hero .wrap{min-height:0!important;padding-bottom:0!important}.bfbar{font-size:12.5px;gap:8px;padding:8px 8px}.bfbar .r{display:none}.bfoff .n{font-size:46px}}
/* 01/11 UX mobile: faixa sem invadir as laterais */
.bfbar{box-sizing:border-box;width:100%;max-width:100vw;overflow:hidden}
@media(max-width:720px){
.bfbar{justify-content:space-between;gap:8px;padding:8px 12px;font-size:12px}
.bfbar .k{font-size:10.5px;padding:3px 7px;letter-spacing:.04em;flex:0 0 auto}
.bfbar .m{flex:1 1 auto;min-width:0;text-align:left;line-height:1.15;font-size:12px}
.bfbar a{flex:0 0 auto;padding:6px 11px;font-size:12px}
}
@media(max-width:370px){.bfbar .m{font-size:11px}.bfbar .k{display:none}.bfbar{padding:8px 10px}}
/* 01/11 UX mobile 2 (refeito a pedido do Rodrigo): mesma altura compacta do hero; só "afasta a câmera" — foto inteira (hero_paris_mob, altura do hero) ancorada à direita/embaixo, a viajante inteira com o celular; escurece só a área do texto */
@media(max-width:720px){
html.bf-home .hero{background-color:#0B0C0F!important;background-size:auto 100%!important;background-position:right bottom!important;background-repeat:no-repeat!important}
html.bf-home .hero::before{background:linear-gradient(90deg,#0B0C0F 0%,#0B0C0F 32%,rgba(11,12,15,.8) 40%,rgba(11,12,15,.5) 52%,rgba(0,0,0,.12) 68%,rgba(0,0,0,0) 100%)}
}
/* 01/11 UX mobile 3: revisão geral da camada BF no celular */
/* faixa volta a ficar presa no topo: overflow-x:hidden no <html> transformava o body em contêiner de rolagem e anulava o sticky (da faixa e do header).
   clip corta igual sem criar contêiner; o header passa a rolar junto (como já acontecia no ar) para não ficar escondido sob a faixa */
html.bf,html.bf body{overflow-x:hidden;overflow-x:clip}
html.bf header{position:relative!important;top:auto!important}
html.bf section[id],html.bf div[id],html.bf h2[id],html.bf h3[id]{scroll-margin-top:64px}
.bfbar a{position:relative}
.bfbar a::before{content:"";position:absolute;inset:-9px -4px}
/* menu (☰) invisível no header escuro da home + área de toque com 44px de altura (largura sem mexer no header) */
html.bf-home .burger span{background:#fff!important}
html.bf-home .burger{min-height:44px;padding:6px 5px!important;margin-right:-5px;justify-content:center}
/* caixa de preço */
.bfp .tag{white-space:nowrap}
html.bf #btsim{text-wrap:balance}
.bft3 div b{white-space:nowrap}
@media(max-width:480px){
.bfp .tag{font-size:10.5px;letter-spacing:.02em;padding:3px 7px}
.bft3{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.25fr);gap:5px}
.bft3 div{padding:7px 7px;font-size:11px;line-height:1.3}
.bft3 div b{font-size:15px;margin-bottom:2px}
}
@media(max-width:380px){
html.bf #precobox.on.bfon{padding-left:14px!important;padding-right:14px!important}
.bft3 div{padding:6px 6px}
.bft3 div b{font-size:14px}
html.bf #btsim{font-size:16.5px;padding-left:12px;padding-right:12px}
}
/* tabelas largas nos artigos: rolam de lado em vez de ficar cortadas */
@media(max-width:720px){
html.bf article table:not(:has(thead)){display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
html.bf article table:not(:has(thead)) tbody{display:table;width:100%}
html.bf .tbl td s,html.bf .tbl td b{white-space:nowrap}
}