/* Site unico para SK Player e BagPlay (09/10/2026). Visual comum; cada app aparece com a sua cor so em marcas e etiquetas. */
:root{--roxo:#a78bfa;--mix:linear-gradient(92deg,#3b9dff,#a78bfa)}
.logo.duplo{display:flex;align-items:center;gap:14px}
.logo.duplo img.sk{height:34px;width:auto;display:block}
.logo.duplo .sep{display:block;width:1px;height:26px;background:var(--linha)}
.logo.duplo .bag{display:flex;align-items:center;gap:8px}
.logo.duplo .bag img{height:30px;width:30px;border-radius:7px;display:block}
.logo.duplo .bag b{font-size:21px;font-weight:800;letter-spacing:-.02em;color:#ece6ff}
.logo.duplo .bag em{font-style:normal;color:#b79bff}
@media(max-width:520px){.logo.duplo{gap:9px}.logo.duplo img.sk{height:26px}.logo.duplo .bag b{font-size:17px}.logo.duplo .bag img{height:24px;width:24px}}
.btn-cheio{background:var(--mix)!important;color:#06101d}
.btn-cheio:hover{filter:brightness(1.1)}
.btn-linha{border-color:rgba(167,139,250,.45)}
.btn-linha:hover{background:rgba(167,139,250,.1)}
.heroi{background:radial-gradient(1100px 460px at 78% 12%,rgba(59,157,255,.14),transparent 62%),radial-gradient(800px 420px at 98% 70%,rgba(167,139,250,.13),transparent 60%)}
h1 em{background-image:linear-gradient(92deg,#49a6ff,#a78bfa)!important;-webkit-background-clip:text;background-clip:text;color:transparent}
.olho::before{background:var(--roxo)}
/* TV com as duas telas */
#tv .tela{position:relative;aspect-ratio:1200/675;border-radius:7px;overflow:hidden;background:#05070d}
#tv .tela img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s}
#tv .tela img.on{opacity:1}
#tv{transition:border-color .6s,box-shadow .6s}
#tv[data-i="1"]{border-color:rgba(167,139,250,.38);box-shadow:0 36px 90px rgba(60,30,120,.45)}
.abas{display:flex;justify-content:center;gap:8px;margin-top:16px}
.aba{height:36px;padding:0 16px;border-radius:999px;border:1px solid var(--linha);background:transparent;color:var(--fraco);font:600 13.5px/1 inherit;font-family:inherit;cursor:pointer}
.aba .pt{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c);margin-right:8px}
.aba.on{color:var(--txt);border-color:var(--c);background:rgba(255,255,255,.04)}
.legenda{text-align:center;margin-top:8px;font-size:12.5px;color:var(--fraco)}
/* dois cartoes de app */
.dois{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.appc{display:flex;flex-direction:column;gap:12px;padding:22px;background:var(--carta);border:1px solid var(--linha);border-top:3px solid var(--c);border-radius:14px}
.appc .marca{display:flex;align-items:center;gap:10px;height:36px}
.appc .marca img{height:34px;width:auto}
.appc .marca .b2{display:flex;align-items:center;gap:9px}
.appc .marca .b2 img{height:32px;width:32px;border-radius:8px}
.appc .marca .b2 b{font-size:23px;font-weight:800;letter-spacing:-.02em;color:#ece6ff}
.appc .marca .b2 em{font-style:normal;color:#b79bff}
.appc p{margin:0;color:var(--fraco);font-size:14.5px}
.appc ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:7px}
.appc li{font-size:12.5px;padding:5px 11px;border-radius:999px;border:1px solid var(--linha);color:#b9c8d8}
.appc .btn{margin-top:auto;border:1px solid var(--c);color:var(--txt);background:transparent;width:auto;align-self:flex-start;padding:0 20px;height:44px}
.appc .btn:hover{background:rgba(255,255,255,.05)}
.comum{margin-top:14px;display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap;color:var(--fraco);font-size:14px;text-align:center}
.comum a{color:var(--txt);font-weight:600;border-bottom:1px solid var(--roxo)}
@media(max-width:760px){.dois{grid-template-columns:1fr}}
/* etiqueta do app no resultado */
.chip-app{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:700;color:var(--c);border:1px solid var(--c);background:rgba(255,255,255,.03);margin-left:auto}
.chip-app::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c)}
.achado-l1 .chip-app+.pt{margin-left:8px}
h1 em{display:inline-block!important}

/* pagina Baixar: atalhos para cada app e titulo do BagPlay */
.ancoras{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 4px}
.ancoras a{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border-radius:999px;border:1px solid var(--linha);color:var(--fraco);font-size:13.5px;font-weight:600}
.ancoras a:hover{color:var(--txt);border-color:var(--c)}
.ancoras a i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.heroi-b h1 em.bag{color:#b79bff}
.loja.bag-card .loja-icone{background:rgba(167,139,250,.1);border-color:rgba(167,139,250,.25)}
.loja.bag-card .loja-icone svg{stroke:#b79bff}
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.chip-app+.chip-app{margin-left:6px}

/* plataformas clicaveis na home e qual app esta em cada uma */
a.plat{display:block;color:inherit;text-decoration:none;transition:border-color .18s,transform .18s,background .18s}
a.plat:hover,a.plat:focus-visible{border-color:rgba(167,139,250,.55);transform:translateY(-2px);background:rgba(255,255,255,.03)}
.plat em.qual{display:block;width:max-content;margin:9px auto 0;padding:3px 10px;border-radius:999px;font-style:normal;font-size:11.5px;font-weight:600;border:1px solid}
.plat em.qual.sk{color:#7fbbff;border-color:rgba(59,157,255,.45)}
.plat em.qual.bag{color:#c4a8ff;border-color:rgba(167,139,250,.5)}
.appc .disp{display:flex;align-items:center;gap:8px;font-size:13px;color:#86efac}
.appc .disp i{flex:none;width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 8px #4ade80}
/* cartao do BagPlay na Microsoft Store (pagina Baixar) */
.loja{scroll-margin-top:84px}
.loja-logo{flex:none;display:block;width:46px;height:46px}
.loja-logo img{display:block;width:46px;height:46px;border-radius:11px}
.loja.pronta.bag-card{background:linear-gradient(180deg,rgba(167,139,250,.09),var(--carta));border-color:rgba(167,139,250,.38)}
.link-loja{display:flex;gap:8px;align-items:center}
.link-loja input{flex:1;min-width:0;height:42px;font-size:12.5px;padding:0 12px;border-radius:9px}
.link-loja .copiar{flex:none;height:42px;padding:0 14px}

/* Android TV e Fire TV: codigos do Downloader e do NTDown */
.metodos{display:grid;gap:10px}
.metodo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 13px;border:1px solid var(--linha);border-radius:12px;background:rgba(255,255,255,.025)}
.metodo img{flex:none;width:36px;height:36px;border-radius:9px;display:block}
.metodo-txt{flex:1 1 150px;min-width:0}
.metodo-txt b{display:block;font-size:14.5px}
.metodo-txt span{display:block;font-size:12.5px;color:var(--fraco);line-height:1.45}
.metodo-cod{display:flex;gap:8px;flex-wrap:wrap;flex:1 1 100%}
.codigo-loja.link{font-size:12px;letter-spacing:0;max-width:100%;overflow:hidden}
.loja .selo.breve{white-space:nowrap}
/* home: etiquetas dos apps e grade de plataformas que acomoda 11 itens */
.plat .quais{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:9px}
.plat .quais em.qual{display:inline-block;width:auto;margin:0}
.plats{grid-template-columns:repeat(auto-fit,minmax(178px,1fr))!important}
@media(max-width:520px){.plats{grid-template-columns:repeat(2,1fr)!important}}

/* Roku: nome exato da loja e passo a passo */
.roku-larga{grid-column:1/-1}
.nome-loja{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border-radius:12px;background:rgba(59,157,255,.08);border:1px solid rgba(59,157,255,.28);font-size:14px}
.nome-exato{font-size:17px;letter-spacing:.06em;font-weight:700}
.passos-roku{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.passos-roku li{display:flex;gap:12px;padding:13px;border-radius:12px;border:1px solid var(--linha);background:rgba(255,255,255,.025)}
.passos-roku li i{flex:none;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--sinal);color:#06101d;font-style:normal;font-weight:800;font-size:13px}
.passos-roku b{display:block;font-size:14px;margin-bottom:2px}
.passos-roku span{font-size:13px;color:var(--fraco);line-height:1.5}
.passos-roku span b{display:inline;color:var(--txt)}
.logo-mini{width:22px;height:22px;border-radius:6px;vertical-align:-6px;margin:0 2px}
@media(max-width:820px){.passos-roku{grid-template-columns:1fr}}

/* em analise na loja: amarelo, como a LG */
.selo.analise{background:rgba(252,211,77,.12);color:#fcd34d;border:1px solid rgba(252,211,77,.35);white-space:nowrap}
.plat .previsao{display:block;margin-top:7px;font-size:11.5px;color:#cdbb97}
