/* OddsIQ V2 · MARCA DA BANCA (30/10/2026, frente v2-marca-betshow) — folha de PRODUÇÃO (fora da cópia do protótipo).
   Tudo preso a html[data-marca] / html[data-marca-l~="<lugar>"] (que só o v2_marca.js põe, e só com V2_CFG.marca) ou a
   classes .marca-* que só existem com a marca: banca sem marca = nenhuma regra daqui casa.
   As CORES vêm da config (v2_marca.js põe as variáveis no <html>); aqui só o "onde". Odd/placar seguem amarelos e o
   cupom não muda (decisão do dono, PROPOSTA.md seção 5). Prefixo .marca- (o .bs- da v2.css já é da busca). */

/* ── topo: filete vermelho da faixa embaixo; ação em ouro (o verde/amarelo do topo são fixos na v2.css) ── */
html[data-marca] .tp{box-shadow:inset 0 -2px 0 var(--marca-vinho)}
html[data-marca] .tp-saldo{border-color:rgba(214,175,120,.6)}
html[data-marca] .tp-dep{background:var(--marca-ouro);color:var(--marca-ouro-ink)}
html[data-marca] .tp-dep:hover{background:var(--marca-ouro2)}
html[data-marca] .tp-conta{box-shadow:inset 0 0 0 1.5px var(--marca-ouro);color:var(--marca-ouro)}
@media (min-width:901px){
  html[data-marca] .tp-areas a[aria-current="true"]::after{background:var(--marca-ouro)}
  html[data-marca] .tp-areas .novo{background:var(--marca-ouro);color:var(--marca-ouro-ink)}
}

/* ── a faixa da marca no canto superior esquerdo (exceção à regra "topo sem marca", só com a marca — dono 30/10) ── */
html[data-marca-l~="topo"] a.tp-marca{display:flex;align-items:center;min-width:0;border-radius:3px}
html[data-marca-l~="topo"] a.tp-marca img{display:block;width:100%;max-width:166px;height:auto}
@media (min-width:901px){html[data-marca-l~="topo"] a.tp-marca{width:176px}html[data-marca-l~="topo"] a.tp-marca img{max-width:176px}}
@media (max-width:520px){
  /* celular: em 390 px o Depositar fica só com o "+" (como a produção já faz até 374 px) e a faixa ganha ~100 px. O nome
     continua para o leitor de tela (texto escondido só da vista). O "Cadastre-se" do visitante e o Depositar sem o "+"
     ficam como estão. Aprovado pelo dono em 30/10 */
  html[data-marca-l~="topo"] .tp-dep:not([data-v2p-cad]):has(>.ic){padding:0 9px}
  html[data-marca-l~="topo"] .tp-dep:not([data-v2p-cad]):has(>.ic)>span:not(.ic){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  html[data-marca-l~="topo"] .tp-in{column-gap:6px}
}

/* ── lâmina da marca na home (1ª do carrossel): o mascote animado pousa no chão, sem caixa ── */
.fly.fly-marca .fimg{mix-blend-mode:normal}
.marca-masc{position:absolute;right:4%;bottom:26px;height:calc(100% - 34px);width:auto;max-width:48%;object-fit:contain;object-position:right bottom;z-index:-1;pointer-events:none;user-select:none}
.fly-marca .ft{max-width:15ch}
@media (min-width:901px){.marca-masc{right:9%;bottom:28px;height:calc(100% - 40px)}}   /* acima da linha dos pontinhos */

/* ── carregando: o mascote no lugar da rodinha (só o .carrega das telas; o "cotando" do cupom é <p> e não muda) ── */
html[data-marca-l~="carregando"] div.carrega{flex-direction:column;gap:6px}
html[data-marca-l~="carregando"] div.carrega::before{width:112px;height:95px;border:0;border-radius:0;animation:none;background:var(--marca-carrega) center/contain no-repeat}

/* ── abertura (1ª pintura): o mascote no chão enquanto a V2 lê o catálogo; some sozinha. ACIMA do véu do PIN
   (.v2p-veu 9000) e da conta (.v2c-veu 9100), que entram no DOM depois; abaixo da manutenção (.v2p-manut 9999) ── */
.marca-abre{position:fixed;inset:0;z-index:9500;display:grid;place-items:center;background:var(--bg);transition:opacity .35s ease,visibility .35s}
.marca-abre img{width:min(300px,64vw);height:auto}
.marca-abre.fora{opacity:0;visibility:hidden;pointer-events:none}

/* ── entrada/criar conta (v2_conta.js) e tela do PIN do link (v2_producao.js): o mascote no alto ── */
/* 31/10 (r187): 180 px empurrava o formulário para fora do quadro no iPhone — o mascote fica pequeno e encolhe na tela baixa */
.v2c-marca-img,.marca-pin{display:block;width:128px;max-width:40%;height:auto;margin:-6px auto 8px}
@media (max-height:740px){.v2c-marca-img,.marca-pin{width:96px}}

@media (prefers-reduced-motion:reduce){
  .marca-abre{transition:none}
}

/* ══ APOSTADOR (02/11/2026, frente v2-marca-apostador) — o que a config (cores) não alcança. Tudo preso a
   html[data-marca="apostador"] (ou .marca-* dentro dele): a Betshow e as bancas sem marca não mudam. Valores do protótipo
   aprovado (_prototipo_apostador/v2/site/apostador.css, PROPOSTA.md §3-4): preto da Blaze, vermelho de ação, odds e
   placar brancos (vêm do --preco da config), topo de 02/11 sem sobreposição de 901 a 1279 px.
   05/11 (frente aptd-marca): a banca virou APTD — a logo nova do dono (o "A" vermelho 3D, sem a palavra, parada) no
   topo, abertura, entrada, PIN e carregando; a lâmina da marca saiu da home. Cores e botões como antes.
   08/11 (frente v2-marca-aptd-fita): a logo da FITA vermelha em "play" (aprovada em 06/11) no lugar do "A" — topo,
   Entrar/Cadastre-se, PIN e favicon parados; a abertura "a fita se desenha" (mp4 de fundo #0D0D11, máscara nas bordas);
   o loop "play apertado" no carregando; o banner do Aviator PARADO como 1ª lâmina (foto comum, o nome oficial acima do
   título, botão → a lista de crash). Cores e botões como antes. ══ */
html[data-marca="apostador"] .tp-saldo{border-color:rgba(229,9,20,.65)}
html[data-marca="apostador"] .tp-conta{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);color:#fff}
/* o topo é preto nos dois temas: a ação dele fica no vermelho forte também no claro (o --marca-ouro do claro é o #B8000B
   do papel) */
html[data-marca="apostador"] .tp-dep{background:#E50914;color:#fff}
html[data-marca="apostador"] .tp-dep:hover{background:#C70812}
@media (min-width:901px){
  html[data-marca="apostador"] .tp-areas a[aria-current="true"]::after{background:#E50914}
  html[data-marca="apostador"] .tp-areas .novo{background:#E50914;color:#fff}
}
html[data-marca="apostador"] .tk{--tk-preco:#FFFFFF}          /* placar do tracker (campo escuro nos dois temas); o cartão amarelo fica */
/* botões cheios no vermelho forte (o --acc #FF4040 fica para texto, ícone e filete; branco sobre ele = 3,6:1) —
   inclusive o "Entrar" da tela do PIN (.v2p-bt) e o "Jogar" do cassino (.v2c-jogar; revisão 02/11: ficava no #FF4040) */
html[data-marca="apostador"] .v2c-bt,html[data-marca="apostador"] .v2p-bt,html[data-marca="apostador"] .jca-add,html[data-marca="apostador"] .ap-pl.ganhou,html[data-marca="apostador"] .ap-ac.enc,html[data-marca="apostador"] .ct-ok,html[data-marca="apostador"] .v2c-jogar{background:var(--marca-ouro);color:#fff}
html[data-marca="apostador"] .fcta:hover,html[data-marca="apostador"] .v2c-bt:hover,html[data-marca="apostador"] .v2p-bt:hover{background:var(--marca-ouro2)}

/* topo (08/11, aptd-fita): SÓ a fita (fita_topo.webp, 176×188 — mais alta que larga, 0,93) — 38 px no celular, 42 px no
   computador (~41/45 px de altura, longe do filete) */
html[data-marca="apostador"][data-marca-l~="topo"] a.tp-marca{flex:none;width:38px}
html[data-marca="apostador"][data-marca-l~="topo"] a.tp-marca img{max-width:38px}
@media (min-width:901px){
  html[data-marca="apostador"][data-marca-l~="topo"] a.tp-marca{width:42px}
  html[data-marca="apostador"][data-marca-l~="topo"] a.tp-marca img{max-width:42px}
  html[data-marca="apostador"][data-marca-l~="topo"] .tp-areas{justify-content:safe center;min-width:0}
}
/* computador estreito (901–1279 px): o aperto das áreas de 02/11 FICA como na produção (a marca agora é só o "A");
   até 1099 px o Depositar fica só "+" e o saldo só com o valor (texto só fora da vista) */
@media (min-width:901px) and (max-width:1279px){
  html[data-marca="apostador"][data-marca-l~="topo"] .tp-in{column-gap:10px}
  html[data-marca="apostador"][data-marca-l~="topo"] .tp-areas{gap:0}
  html[data-marca="apostador"][data-marca-l~="topo"] .tp-areas a{padding:0 10px;font-size:14px}
  html[data-marca="apostador"][data-marca-l~="topo"] .tp-areas a[aria-current="true"]::after{left:10px;right:10px}
}
@media (min-width:901px) and (max-width:1099px){
  html[data-marca="apostador"][data-marca-l~="topo"] .tp-in{column-gap:8px}
  html[data-marca="apostador"][data-marca-l~="topo"] .tp-areas a{padding:0 8px}
  html[data-marca="apostador"][data-marca-l~="topo"] .tp-areas a[aria-current="true"]::after{left:8px;right:8px}
  html[data-marca="apostador"][data-marca-l~="topo"] .tp-saldo small{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  html[data-marca="apostador"][data-marca-l~="topo"] .tp-dep:not([data-v2p-cad]):has(>.ic){padding:0 11px}
  html[data-marca="apostador"][data-marca-l~="topo"] .tp-dep:not([data-v2p-cad]):has(>.ic)>span:not(.ic){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
}
/* lâmina da home (08/11, aptd-fita): o banner do Aviator é foto comum do carrossel (mistura + máscara da v2.css, sem
   caixa); a máscara da esquerda começa mais cedo (o avião fica à direita) e o nome oficial entra acima do título —
   valores do protótipo aprovado (_prototipo_aptd/banner_aviator/v2/site/apostador.css).
   (revisão 09/11) o nome reserva a altura dele antes de chegar (aspect-ratio = o arquivo, 520×152): a imagem só é
   pedida depois que a home desenha e, chegando depois da foto, empurrava o título e o BOTÃO 17 px (celular) / 27 px
   (computador) para baixo com a lâmina já à vista */
html[data-marca="apostador"] .fly .fimg[src*="aptd_aviator"]{--bf0:20%;--bf1:44%}
html[data-marca="apostador"] .marca-lam-nome{display:block;width:clamp(118px,13vw,190px);height:auto;aspect-ratio:520/152;margin-bottom:2px}

/* carregando (08/11, aptd-fita): o "play apertado" (img.carrega, 256×256, já anima sozinho — sem o tk-pulso) a 96 px (a
   fita fica com ~62 px); "reduzir movimento" = a fita parada (img.carrega_parado) no mesmo tamanho aparente */
html[data-marca="apostador"][data-marca-l~="carregando"] div.carrega::before{width:96px;height:96px;animation:none}

/* abertura (08/11, aptd-fita): a fita se desenha — o mp4 tem fundo chapado #0D0D11 (o iPhone não mostra a transparência
   do WebM): a abertura ganha esse fundo nos dois temas e o vídeo uma máscara de 8 % nas bordas (diferença de 1–2 níveis
   da decodificação some); a fita parada (reduzir movimento, autoplay barrado) no mesmo tamanho aparente da do vídeo */
html[data-marca="apostador"] .marca-abre{background:#0D0D11}
html[data-marca="apostador"] .marca-abre video{width:min(340px,78vw);height:auto;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%),linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%),linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);mask-composite:intersect}
html[data-marca="apostador"] .marca-abre img{width:min(210px,48vw)}

/* Entrar/Cadastre-se e PIN: a fita parada (mais alta que larga: 96 px = ~103 px de altura; tela baixa 78 px) */
html[data-marca="apostador"] .v2c-marca-img,html[data-marca="apostador"] .marca-pin{width:96px;max-width:32%}
@media (max-height:740px){html[data-marca="apostador"] .v2c-marca-img,html[data-marca="apostador"] .marca-pin{width:78px}}

@media (prefers-reduced-motion:reduce){
  html[data-marca="apostador"][data-marca-l~="carregando"] div.carrega::before{animation:none;background-size:auto 64%}
}

/* ══ BET REAL (02/11/2026, frente v2-marca-betreal) — a logo NEON (metade vermelha, metade azul) e o vídeo do fogo. Tudo
   preso a html[data-marca="betreal"]: Betshow, Apostador e as bancas sem marca não mudam. Valores do protótipo aprovado
   (_prototipo_betreal/v2/site/betreal.css, PROPOSTA.md §1-3): chão azul-noite, vermelho #E10D15 = ação, azul #0F6EE3 =
   escolhido, odd e placar BRANCOS (vêm do --preco da config, dono 02/11). PRIMEIRA marca com vídeo: o v2_marca.js troca
   a imagem dos ganchos por <video> com a mesma classe (só no escuro). ══ */
/* topo: preto com o filete de 2 px PARTIDO da logo (vermelho | azul, corte seco) */
html[data-marca="betreal"] .tp{box-shadow:none;background-image:var(--marca-filete);background-size:100% 2px;background-position:0 100%;background-repeat:no-repeat;background-color:var(--topo1)}
html[data-marca="betreal"] .tp-saldo{border-color:rgba(61,139,255,.55)}
html[data-marca="betreal"] .tp-dep{background:#E10D15;color:#fff}
html[data-marca="betreal"] .tp-dep:hover{background:#C50A11}
html[data-marca="betreal"] .tp-conta{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);color:#fff}
@media (min-width:901px){
  html[data-marca="betreal"] .tp-areas a[aria-current="true"]::after{background:var(--marca-filete)}
  html[data-marca="betreal"] .tp-areas .novo{background:#E10D15;color:#fff}
}
html[data-marca="betreal"] .tk{--tk-preco:#FFFFFF}          /* placar do tracker (campo escuro nos dois temas); o cartão amarelo fica */
/* botões cheios no vermelho de ação (no claro também: branco 4,9:1) — a lista do Apostador */
html[data-marca="betreal"] .v2c-bt,html[data-marca="betreal"] .v2p-bt,html[data-marca="betreal"] .jca-add,html[data-marca="betreal"] .ap-pl.ganhou,html[data-marca="betreal"] .ap-ac.enc,html[data-marca="betreal"] .ct-ok,html[data-marca="betreal"] .v2c-jogar,html[data-marca="betreal"] .fcta{background:#E10D15;color:#fff}
html[data-marca="betreal"] .fcta:hover,html[data-marca="betreal"] .v2c-bt:hover,html[data-marca="betreal"] .v2p-bt:hover{background:#C50A11}

/* topo: a placa "BET REAL" (912×240) — larguras do protótipo, sem sobreposição de 360 a 1920 px */
html[data-marca="betreal"][data-marca-l~="topo"] a.tp-marca{flex:none;width:150px}
html[data-marca="betreal"][data-marca-l~="topo"] a.tp-marca img{max-width:176px}
@media (min-width:901px){
  html[data-marca="betreal"][data-marca-l~="topo"] .tp-areas{justify-content:safe center;min-width:0}
}
@media (min-width:1280px){
  html[data-marca="betreal"][data-marca-l~="topo"] a.tp-marca{width:176px}
}
@media (min-width:901px) and (max-width:1279px){
  html[data-marca="betreal"][data-marca-l~="topo"] .tp-in{column-gap:10px}
  html[data-marca="betreal"][data-marca-l~="topo"] a.tp-marca{width:150px}
  html[data-marca="betreal"][data-marca-l~="topo"] .tp-areas{gap:0}
  html[data-marca="betreal"][data-marca-l~="topo"] .tp-areas a{padding:0 10px;font-size:14px}
  html[data-marca="betreal"][data-marca-l~="topo"] .tp-areas a[aria-current="true"]::after{left:10px;right:10px}
}
@media (min-width:901px) and (max-width:1099px){
  html[data-marca="betreal"][data-marca-l~="topo"] .tp-in{column-gap:8px}
  html[data-marca="betreal"][data-marca-l~="topo"] a.tp-marca{width:132px}
  html[data-marca="betreal"][data-marca-l~="topo"] .tp-areas a{padding:0 8px}
  html[data-marca="betreal"][data-marca-l~="topo"] .tp-areas a[aria-current="true"]::after{left:8px;right:8px}
  html[data-marca="betreal"][data-marca-l~="topo"] .tp-saldo small{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  html[data-marca="betreal"][data-marca-l~="topo"] .tp-dep:not([data-v2p-cad]):has(>.ic){padding:0 11px}
  html[data-marca="betreal"][data-marca-l~="topo"] .tp-dep:not([data-v2p-cad]):has(>.ic)>span:not(.ic){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
}
@media (max-width:520px){   /* celular: a placa encolhe com a coluna e sempre deixa 8 px antes da lupa */
  html[data-marca="betreal"][data-marca-l~="topo"] a.tp-marca{width:auto;max-width:120px}
  html[data-marca="betreal"][data-marca-l~="topo"] a.tp-marca img{width:calc(100% - 8px)}
}

/* lâmina da home: o fogo pousa no chão SEM caixa — o preto do vídeo some pela mistura "screen" (preto + chão = chão);
   no claro a logo parada com alfa, sem mistura */
html[data-marca="betreal"] .marca-masc{right:0;top:50%;bottom:auto;transform:translateY(-50%);height:104%;max-width:62%;object-fit:contain;object-position:right center;mix-blend-mode:screen}
html[data-marca="betreal"] .fly-marca .ft{max-width:12ch}
@media (min-width:901px){html[data-marca="betreal"] .marca-masc{right:4%;height:108%}}
@media (max-width:600px){html[data-marca="betreal"] .marca-masc{height:100%;max-width:64%;right:-6%}}
html[data-marca="betreal"][data-theme="claro"] .marca-masc{mix-blend-mode:normal;height:94%}

/* carregando: o brasão (img.carrega da config) respirando no lugar da rodinha — pelo tk-pulso da v2_tracker.css */
html[data-marca="betreal"][data-marca-l~="carregando"] div.carrega::before{width:44px;height:54px;animation:tk-pulso 2.2s ease-in-out infinite}

/* abertura: o vídeo de 3 s em tela preta (o fundo do vídeo é preto) */
html[data-marca="betreal"] .marca-abre{background:#000}
html[data-marca="betreal"] .marca-abre video,html[data-marca="betreal"] .marca-abre img{width:min(1100px,100vw);height:auto;max-height:100vh;object-fit:contain}

/* entrada/criar conta e PIN: o fogo no alto do quadro (o vídeo é 16:9 — mais largo que o mascote) */
html[data-marca="betreal"] .v2c-marca-img,html[data-marca="betreal"] .marca-pin{width:250px;max-width:80%;height:auto;margin:-10px auto 6px;mix-blend-mode:screen}
/* celular e tela baixa (r187 da Betshow: a marca não pode empurrar o formulário) — 200 px = ~112 px de altura, a do Apostador */
@media (max-width:520px),(max-height:740px){html[data-marca="betreal"] .v2c-marca-img,html[data-marca="betreal"] .marca-pin{width:200px;margin-bottom:4px}}
/* o vídeo já nasce com a proporção dele (16:9), sem pulo até os metadados chegarem */
html[data-marca="betreal"] video.marca-masc,html[data-marca="betreal"] video.v2c-marca-img,html[data-marca="betreal"] video.marca-pin{aspect-ratio:16/9}
html[data-marca="betreal"][data-theme="claro"] .v2c-marca-img,html[data-marca="betreal"][data-theme="claro"] .marca-pin{mix-blend-mode:normal;width:150px}

@media (prefers-reduced-motion:reduce){
  html[data-marca="betreal"][data-marca-l~="carregando"] div.carrega::before{animation:none}
}

/* ══ BMBETS (02/11/2026, frente v2-marca-bmbets; REDUZIDA pela emenda do dono 04/11 ~03h30: "Eles querem usar apenas a
   logo no canto esquerdo, o flyer animado da BMBets e a logo no pin. O resto querem manter o visual padrão da OddsIQ
   classico (Verde)"). Tudo preso a html[data-marca="bmbets"]: Betshow, Apostador, Bet Real e as bancas sem marca não
   mudam. A config não manda cor nenhuma (chão, ação, botões e odds = a V2 verde); aqui só a logo do topo, a lâmina com o
   vídeo do estádio e a logo do PIN. ══ */
/* topo: as regras genéricas de html[data-marca] (filete, Depositar, saldo, avatar, aba ativa em --marca-*) voltam ao
   topo PADRÃO da v2.css — os mesmos valores de lá, nos dois temas */
html[data-marca="bmbets"] .tp{box-shadow:inset 0 -1px 0 rgba(255,255,255,.05)}
html[data-marca="bmbets"] .tp-saldo{border-color:rgba(63,208,140,.55)}
html[data-marca="bmbets"] .tp-dep{background:#3FD08C;color:#06281A}
html[data-marca="bmbets"] .tp-dep:hover{background:#52DA9A}
html[data-marca="bmbets"] .tp-conta{box-shadow:inset 0 0 0 1.5px #FFDF1B;color:#FFDF1B}
@media (min-width:901px){
  html[data-marca="bmbets"] .tp-areas a[aria-current="true"]::after{background:#3FD08C}
  html[data-marca="bmbets"] .tp-areas .novo{background:#3FD08C;color:#06281A}
}

/* topo: a logo PLANA do vetor (325×96) — larguras do protótipo, sem sobreposição de 360 a 1920 px */
html[data-marca="bmbets"][data-marca-l~="topo"] a.tp-marca{flex:none;width:140px}
html[data-marca="bmbets"][data-marca-l~="topo"] a.tp-marca img{max-width:160px}
@media (min-width:901px){
  html[data-marca="bmbets"][data-marca-l~="topo"] .tp-areas{justify-content:safe center;min-width:0}
}
@media (min-width:1280px){
  html[data-marca="bmbets"][data-marca-l~="topo"] a.tp-marca{width:160px}
}
@media (min-width:901px) and (max-width:1279px){
  html[data-marca="bmbets"][data-marca-l~="topo"] .tp-in{column-gap:10px}
  html[data-marca="bmbets"][data-marca-l~="topo"] .tp-areas{gap:0}
  html[data-marca="bmbets"][data-marca-l~="topo"] .tp-areas a{padding:0 10px;font-size:14px}
  html[data-marca="bmbets"][data-marca-l~="topo"] .tp-areas a[aria-current="true"]::after{left:10px;right:10px}
}
@media (min-width:901px) and (max-width:1099px){
  html[data-marca="bmbets"][data-marca-l~="topo"] .tp-in{column-gap:8px}
  html[data-marca="bmbets"][data-marca-l~="topo"] a.tp-marca{width:124px}
  html[data-marca="bmbets"][data-marca-l~="topo"] .tp-areas a{padding:0 8px}
  html[data-marca="bmbets"][data-marca-l~="topo"] .tp-areas a[aria-current="true"]::after{left:8px;right:8px}
  html[data-marca="bmbets"][data-marca-l~="topo"] .tp-saldo small{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  html[data-marca="bmbets"][data-marca-l~="topo"] .tp-dep:not([data-v2p-cad]):has(>.ic){padding:0 11px}
  html[data-marca="bmbets"][data-marca-l~="topo"] .tp-dep:not([data-v2p-cad]):has(>.ic)>span:not(.ic){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
}
@media (max-width:520px){   /* celular: a logo encolhe com a coluna e sempre deixa 8 px antes da lupa */
  html[data-marca="bmbets"][data-marca-l~="topo"] a.tp-marca{width:auto;max-width:116px}
  html[data-marca="bmbets"][data-marca-l~="topo"] a.tp-marca img{width:calc(100% - 8px)}
}

/* lâmina da home: o vídeo do estádio na metade direita, as bordas se desfazem no chão por MÁSCARA (funciona nos dois
   temas, sem mistura); a capa (o último quadro, <img> com a mesma classe) ocupa o mesmo lugar — nada pula */
html[data-marca="bmbets"] .marca-masc{right:0;top:0;bottom:auto;transform:none;height:100%;width:auto;max-width:66%;aspect-ratio:16/9;object-fit:cover;object-position:center;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 94%,transparent 100%),linear-gradient(180deg,transparent 0,#000 10%,#000 88%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 94%,transparent 100%),linear-gradient(180deg,transparent 0,#000 10%,#000 88%,transparent 100%);mask-composite:intersect}
html[data-marca="bmbets"] .fly-marca .ft{max-width:12ch}
@media (min-width:901px){html[data-marca="bmbets"] .marca-masc{max-width:62%;right:2%}}
@media (max-width:600px){html[data-marca="bmbets"] .marca-masc{max-width:70%;width:70%;height:auto;top:50%;transform:translateY(-50%)}}

/* PIN: a logo 3D recortada com a luz passando (640×202: 230 px ≈ 73 px de altura) */
html[data-marca="bmbets"] .marca-pin{width:230px;max-width:72%;height:auto;margin:2px auto 10px}
@media (max-height:740px){html[data-marca="bmbets"] .marca-pin{width:190px}}

/* ══ SUPER BETEIROS (05/11/2026, frente v2-marca-superbeteiros) — vermelho e branco, releitura VISUAL do estilo
   Superbet (só cor e forma; nada da marca dela). Tudo preso a html[data-marca="superbeteiros"]: Betshow, Apostador, Bet
   Real, BMBets e as bancas sem marca não mudam. PRIMEIRA marca com o tema CLARO de padrão (`tema_padrao` na config: o
   servidor entrega a página já em data-theme="claro"; o cliente ainda troca na gaveta da conta). Valores do protótipo
   aprovado (frentes/v2-marca-superbeteiros/prototipo, PROPOSTA.md): topo vermelho #E30613 com a logo branca, chão
   branco, odd em tinta escura, escolhida = vermelho cheio com texto branco (4,9:1). A logo entra caindo letra a letra
   (toca uma vez) e fica com a luz passando — o mecanismo do Apostador (`mascote` + `brilho`). ══ */
/* topo: vermelho chapado nos dois temas, sem filete; a ação do topo é BRANCA com texto vermelho */
html[data-marca="superbeteiros"] .tp{background:var(--topo1);box-shadow:none}
html[data-marca="superbeteiros"] .tp-saldo{border-color:rgba(255,255,255,.7);background:rgba(0,0,0,.14)}
html[data-marca="superbeteiros"] .tp-saldo small{color:#FFFFFF}      /* o .72 da V2 sobre o vermelho dava 3,6:1 */
html[data-marca="superbeteiros"] .tp-dep{background:#FFFFFF;color:#C40511}
html[data-marca="superbeteiros"] .tp-dep:hover{background:#FFE7E9}
html[data-marca="superbeteiros"] .tp-conta{box-shadow:inset 0 0 0 1.5px #FFFFFF;color:#FFFFFF;background:rgba(0,0,0,.14)}
html[data-marca="superbeteiros"] .tp-lupa:hover{background:rgba(0,0,0,.12)}
@media (min-width:901px){
  html[data-marca="superbeteiros"] .tp-areas a{color:#FFFFFF}       /* branco cheio (4,9:1): a ativa se distingue pelo traço */
  html[data-marca="superbeteiros"] .tp-areas a[aria-current="true"]::after{background:#FFFFFF}
  html[data-marca="superbeteiros"] .tp-areas .novo{background:#FFFFFF;color:#C40511}
  html[data-marca="superbeteiros"] .tp-areas .lvn{background:#FFFFFF;color:#C40511}
}
html[data-marca="superbeteiros"] .tk{--tk-preco:#FFFFFF}          /* placar do tracker (campo escuro nos dois temas) */
/* botões cheios no vermelho da marca, com texto branco, nos dois temas (o --acc do escuro é claro demais para fundo) */
html[data-marca="superbeteiros"] .v2c-bt:not(.sec),html[data-marca="superbeteiros"] .v2p-bt,html[data-marca="superbeteiros"] .jca-add,html[data-marca="superbeteiros"] .ap-pl.ganhou,html[data-marca="superbeteiros"] .ap-ac.enc,html[data-marca="superbeteiros"] .ct-ok,html[data-marca="superbeteiros"] .v2c-jogar,html[data-marca="superbeteiros"] .fcta{background:#E30613;color:#fff}
html[data-marca="superbeteiros"] .fcta:hover,html[data-marca="superbeteiros"] .v2c-bt:not(.sec):hover,html[data-marca="superbeteiros"] .v2p-bt:hover{background:#C40511;filter:none}
/* forma: botões e odds um pouco mais redondos (o "espírito" pedido), sem mudar tamanho nem estrutura */
html[data-marca="superbeteiros"] .v2c-bt,html[data-marca="superbeteiros"] .v2p-bt,html[data-marca="superbeteiros"] .fcta,html[data-marca="superbeteiros"] .odd{border-radius:8px}

/* topo: a assinatura PLANA do vetor (463×96: coroa + SUPER sobre BETEIROS) — sem sobreposição de 360 a 1920 px */
html[data-marca="superbeteiros"][data-marca-l~="topo"] a.tp-marca{flex:none;width:164px}
html[data-marca="superbeteiros"][data-marca-l~="topo"] a.tp-marca img{max-width:193px}
@media (min-width:901px){
  html[data-marca="superbeteiros"][data-marca-l~="topo"] .tp-areas{justify-content:safe center;min-width:0}
}
@media (min-width:1280px){
  html[data-marca="superbeteiros"][data-marca-l~="topo"] a.tp-marca{width:193px}
}
@media (min-width:901px) and (max-width:1279px){
  html[data-marca="superbeteiros"][data-marca-l~="topo"] .tp-in{column-gap:10px}
  html[data-marca="superbeteiros"][data-marca-l~="topo"] .tp-areas{gap:0}
  html[data-marca="superbeteiros"][data-marca-l~="topo"] .tp-areas a{padding:0 10px;font-size:14px}
  html[data-marca="superbeteiros"][data-marca-l~="topo"] .tp-areas a[aria-current="true"]::after{left:10px;right:10px}
}
@media (min-width:901px) and (max-width:1099px){
  html[data-marca="superbeteiros"][data-marca-l~="topo"] .tp-in{column-gap:8px}
  html[data-marca="superbeteiros"][data-marca-l~="topo"] a.tp-marca{width:140px}
  html[data-marca="superbeteiros"][data-marca-l~="topo"] .tp-areas a{padding:0 8px}
  html[data-marca="superbeteiros"][data-marca-l~="topo"] .tp-areas a[aria-current="true"]::after{left:8px;right:8px}
  html[data-marca="superbeteiros"][data-marca-l~="topo"] .tp-saldo small{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  html[data-marca="superbeteiros"][data-marca-l~="topo"] .tp-dep:not([data-v2p-cad]):has(>.ic){padding:0 11px}
  html[data-marca="superbeteiros"][data-marca-l~="topo"] .tp-dep:not([data-v2p-cad]):has(>.ic)>span:not(.ic){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
}
@media (max-width:520px){
  /* celular: com a coroa a assinatura ficava com 14 px de altura em 360 px (ilegível). Aqui a imagem mostra só o bloco
     SUPER/BETEIROS (o recorte é por CSS: os 66,5 % da direita do mesmo arquivo) — 24 px de altura em 360, 33 em 390,
     40 de 430 em diante; sempre 8 px antes da lupa. A coroa segue no ícone, na lâmina e nas telas de entrada */
  html[data-marca="superbeteiros"][data-marca-l~="topo"] a.tp-marca{width:auto;max-width:138px}
  html[data-marca="superbeteiros"][data-marca-l~="topo"] a.tp-marca img{width:calc(100% - 8px);height:auto;aspect-ratio:3.24;object-fit:cover;object-position:100% 50%}
}

/* lâmina da home: a logo 3D cai letra a letra à direita e pousa no chão, sem caixa; o título no traço da marca */
html[data-marca="superbeteiros"] .marca-masc{right:3%;top:50%;bottom:auto;transform:translateY(-54%);height:calc(100% - 44px);max-width:52%;object-position:right center}
html[data-marca="superbeteiros"] .fly-marca .ft{max-width:11ch;font-style:italic;font-size:23px;letter-spacing:-.01em}
@media (min-width:901px){
  html[data-marca="superbeteiros"] .marca-masc{right:9%;height:calc(100% - 36px);transform:translateY(-53%)}
  html[data-marca="superbeteiros"] .fly-marca .ft{font-size:34px}
}

/* entrada/criar conta e PIN: a logo no alto do quadro (a arte é 480×337) */
html[data-marca="superbeteiros"] .v2c-marca-img,html[data-marca="superbeteiros"] .marca-pin{width:176px;max-width:52%;margin:-4px auto 6px}
/* celular: 160 px = 112 px de altura (r187: a logo não empurra o formulário — até 120 px no celular) */
@media (max-width:520px){html[data-marca="superbeteiros"] .v2c-marca-img,html[data-marca="superbeteiros"] .marca-pin{width:160px}}
@media (max-height:740px){html[data-marca="superbeteiros"] .v2c-marca-img,html[data-marca="superbeteiros"] .marca-pin{width:128px}}

/* ══ AMR BETS (08/11/2026, frente v2-marca-amrbets) — preto laqueado + ouro da coroa, a mesma ideia do protótipo da
   BMBets de 02/11 (não usado) com o esquema de cores da AMR (pedido do dono). Tudo preso a html[data-marca="amrbets"]:
   Betshow, APTD, Bet Real, BMBets, Super Beteiros e as bancas sem marca não mudam. Valores do protótipo aprovado
   (_prototipo_amrbets/v2/site/amrbets.css, PROPOSTA.md): ouro #E8B23A = ação, SEMPRE com texto preto #120F0A (~9,9:1),
   odd e placar BRANCOS (vêm do --preco da config). DOIS vídeos: a RELOJOARIA na lâmina (máscara nas bordas, toca uma vez
   e para na logo pronta) e na abertura (tela preta); a ÓRBITA no Entrar/Cadastre-se/PIN numa faixa preta com filete de
   ouro no alto do diálogo, nos dois temas. ══ */
/* topo: preto com o filete de ouro (genérico, --marca-vinho); Depositar e aba ativa no ouro (genérico); avatar branco */
html[data-marca="amrbets"] .tp-saldo{border-color:rgba(232,178,58,.55)}
html[data-marca="amrbets"] .tp-conta{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);color:#fff}
html[data-marca="amrbets"] .tk{--tk-preco:#FFFFFF}          /* placar do tracker (campo escuro nos dois temas); o cartão amarelo fica */
/* botões cheios no ouro com texto PRETO nos dois temas (o --acc do claro é o ouro escuro de texto) */
html[data-marca="amrbets"] .v2c-bt:not(.sec),html[data-marca="amrbets"] .v2p-bt,html[data-marca="amrbets"] .jca-add,html[data-marca="amrbets"] .ap-pl.ganhou,html[data-marca="amrbets"] .ap-ac.enc,html[data-marca="amrbets"] .ct-ok,html[data-marca="amrbets"] .v2c-jogar,html[data-marca="amrbets"] .fcta{background:#E8B23A;color:#120F0A}
html[data-marca="amrbets"] .fcta:hover,html[data-marca="amrbets"] .v2c-bt:not(.sec):hover,html[data-marca="amrbets"] .v2p-bt:hover{background:#D49C22}

/* topo: a logo 3D pequena (99×104) — larguras do protótipo (mede_topo.py: sem sobreposição de 360 a 1920 px) */
html[data-marca="amrbets"][data-marca-l~="topo"] a.tp-marca{flex:none;width:58px}
html[data-marca="amrbets"][data-marca-l~="topo"] a.tp-marca img{width:100%;max-width:none;height:auto;aspect-ratio:99/104}
/* (revisão 08/11) 521–900 px: o topo tem 60 px (v2.css: .tp-in padding 10 + .tp-marca 40) e a logo com 58 px de largura
   tem 60,9 px de altura — cruzava o filete de 2 px em 0,5 px (medido: prova_marca --topo). 53 px = 55,7 px de altura,
   2,2 px de folga acima e abaixo do filete. Em ≥ 901 px o topo tem 68 px e em ≤ 520 px a logo tem 44 px (46 px de altura) */
@media (min-width:521px) and (max-width:900px){
  html[data-marca="amrbets"][data-marca-l~="topo"] a.tp-marca{width:53px}
}
@media (min-width:901px){
  html[data-marca="amrbets"][data-marca-l~="topo"] a.tp-marca{width:58px}
  html[data-marca="amrbets"][data-marca-l~="topo"] .tp-areas{justify-content:safe center;min-width:0}
}
@media (min-width:1280px){
  html[data-marca="amrbets"][data-marca-l~="topo"] a.tp-marca{width:60px}
}
@media (min-width:901px) and (max-width:1279px){
  html[data-marca="amrbets"][data-marca-l~="topo"] .tp-in{column-gap:10px}
  html[data-marca="amrbets"][data-marca-l~="topo"] .tp-areas{gap:0}
  html[data-marca="amrbets"][data-marca-l~="topo"] .tp-areas a{padding:0 10px;font-size:14px}
  html[data-marca="amrbets"][data-marca-l~="topo"] .tp-areas a[aria-current="true"]::after{left:10px;right:10px}
}
@media (min-width:901px) and (max-width:1099px){
  html[data-marca="amrbets"][data-marca-l~="topo"] .tp-in{column-gap:8px}
  html[data-marca="amrbets"][data-marca-l~="topo"] a.tp-marca{width:54px}
  html[data-marca="amrbets"][data-marca-l~="topo"] .tp-areas a{padding:0 8px}
  html[data-marca="amrbets"][data-marca-l~="topo"] .tp-areas a[aria-current="true"]::after{left:8px;right:8px}
  html[data-marca="amrbets"][data-marca-l~="topo"] .tp-saldo small{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  html[data-marca="amrbets"][data-marca-l~="topo"] .tp-dep:not([data-v2p-cad]):has(>.ic){padding:0 11px}
  html[data-marca="amrbets"][data-marca-l~="topo"] .tp-dep:not([data-v2p-cad]):has(>.ic)>span:not(.ic){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
}
@media (max-width:520px){
  html[data-marca="amrbets"][data-marca-l~="topo"] a.tp-marca{width:44px}
}

/* lâmina da home: a relojoaria na metade direita, as bordas se desfazem no chão por MÁSCARA (nos dois temas, sem
   mistura); a capa (o último quadro, <img> com a mesma classe) ocupa o mesmo lugar — nada pula */
html[data-marca="amrbets"] .marca-masc{right:0;top:0;bottom:auto;transform:none;height:100%;width:auto;max-width:66%;aspect-ratio:16/9;object-fit:cover;object-position:center;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 94%,transparent 100%),linear-gradient(180deg,transparent 0,#000 10%,#000 88%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 94%,transparent 100%),linear-gradient(180deg,transparent 0,#000 10%,#000 88%,transparent 100%);mask-composite:intersect}
html[data-marca="amrbets"] .fly-marca .ft{max-width:12ch}
@media (min-width:901px){html[data-marca="amrbets"] .marca-masc{max-width:62%;right:2%}}
@media (max-width:600px){html[data-marca="amrbets"] .marca-masc{max-width:70%;width:70%;height:auto;top:50%;transform:translateY(-50%)}}

/* carregando: a coroa 3D (img.carrega da config, 160×81) respirando no lugar da rodinha — pelo tk-pulso da
   v2_tracker.css (um @keyframes aqui ficaria fora da cerca "toda regra presa à marca") */
html[data-marca="amrbets"][data-marca-l~="carregando"] div.carrega::before{width:72px;height:36px;animation:tk-pulso 2.2s ease-in-out infinite}

/* abertura: a relojoaria acelerada (3,3 s) em tela preta, cobrindo a tela; em tela em pé, inteira (sem corte) */
html[data-marca="amrbets"] .marca-abre{background:#000}
html[data-marca="amrbets"] .marca-abre video,html[data-marca="amrbets"] .marca-abre img{width:100vw;height:100vh;object-fit:cover}
@media (max-aspect-ratio:1/1){html[data-marca="amrbets"] .marca-abre video,html[data-marca="amrbets"] .marca-abre img{height:auto;object-fit:contain}}

/* Entrar / Cadastre-se / PIN: a ÓRBITA numa faixa PRETA de ponta a ponta no alto do diálogo (o vídeo tem fundo preto),
   com o filete de ouro embaixo, nos dois temas; a logo parada (reduzir movimento) pousa na mesma faixa */
html[data-marca="amrbets"] .v2c-marca-img,html[data-marca="amrbets"] .marca-pin{display:block;box-sizing:border-box;width:calc(100% + 40px);max-width:none;height:220px;margin:-20px -20px 14px;background:#000;object-fit:contain;border-bottom:2px solid #E8B23A;border-radius:6px 6px 0 0}   /* (revisão) o raio do diálogo: o .v2p-dlg não corta o que sai (sem overflow), a faixa quadrada cobria os cantos */
@media (max-height:740px){html[data-marca="amrbets"] .v2c-marca-img,html[data-marca="amrbets"] .marca-pin{height:170px}}
/* o × fica sobre a faixa preta: branco nos dois temas; no PIN ele flutua — sai do fluxo para a faixa ir de ponta a ponta */
html[data-marca="amrbets"] .v2c-dlg .v2c-x{color:#fff;z-index:1}
html[data-marca="amrbets"] .v2p-dlg:has(>.marca-pin){position:relative}
html[data-marca="amrbets"] .v2p-dlg:has(>.marca-pin) .v2p-x{float:none;position:absolute;top:10px;right:12px;z-index:1;color:#fff}

@media (prefers-reduced-motion:reduce){
  html[data-marca="amrbets"][data-marca-l~="carregando"] div.carrega::before{animation:none}
}