/* Loja do site (19/10/2026): estilo comum das paginas Apoiador Fundador (/apoio/) e Nucleos (/apoio/nucleos.html). */
:root { --fundo:#101113; --cartao:#191b1e; --borda:#2a2d31; --texto:#e8e4de; --apagado:#9c978f; --ouro:#ffcb3d; --ouro2:#d9a441;
        --ciano:#5fd3e6; --ciano2:#38b6cb; --erro:#e06a5a; --ok:#7fc77f; --cor:var(--ouro); --cor2:var(--ouro2); }
body.nuc { --cor:var(--ciano); --cor2:var(--ciano2); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--fundo); color:var(--texto); font:16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { max-width:680px; margin:0 auto; padding:18px 16px 48px; }
a { color:var(--cor); }

/* menu do site (a loja e uma aba do site, nao pagina solta) */
.barra { position:sticky; top:0; z-index:5; background:rgba(11,12,13,.94); backdrop-filter:blur(6px); border-bottom:1px solid var(--borda); }
.barra .dentro { max-width:1180px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; justify-content:space-between; gap:10px 18px; flex-wrap:wrap; }
.barra .marca { display:flex; align-items:center; gap:10px; color:var(--texto); font-weight:800; letter-spacing:.14em; font-size:15px; text-decoration:none; white-space:nowrap; }
.barra .marca img { width:34px; height:34px; border-radius:7px; }
.barra nav { display:flex; flex-wrap:wrap; gap:4px 20px; font-size:14px; font-weight:600; letter-spacing:.04em; }
.barra nav a { color:var(--apagado); text-transform:uppercase; text-decoration:none; white-space:nowrap; }
.barra nav a:hover { color:var(--texto); }
.barra nav a.atual { color:var(--ouro); border-bottom:2px solid var(--ouro); padding-bottom:2px; }
@media (max-width:700px) { .barra nav { gap:4px 14px; font-size:12px; } }

/* abas da loja: Apoiador Fundador | Nucleos */
.lojas { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:6px 0 0; }
.lojas a { display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 10px; border-radius:12px; text-decoration:none;
           font-weight:800; letter-spacing:.06em; text-transform:uppercase; font-size:14px; color:var(--apagado); background:var(--cartao); border:1px solid var(--borda); }
.lojas a:hover { color:var(--texto); }
.lojas a.ap.atual { color:#1a1408; background:linear-gradient(180deg,#ffd75e,#e0a92c); border-color:transparent; }
.lojas a.nu.atual { color:#06181c; background:linear-gradient(180deg,#8be6f2,#38b6cb); border-color:transparent; }
.lojas .ic-med { width:20px; height:20px; }
.losango { display:inline-block; width:12px; height:12px; transform:rotate(45deg); border-radius:3px; background:currentColor; box-shadow:inset 0 0 0 3px rgba(255,255,255,.55); }
.lojas a.nu:not(.atual) .losango { color:var(--ciano); }
.idiomas { text-align:right; font-size:14px; margin-top:10px; } .idiomas a { color:var(--apagado); margin-left:10px; text-decoration:none; } .idiomas a.ativo { color:var(--cor); font-weight:700; }

/* topo */
.heroi { position:relative; margin:8px 0 0; padding:34px 20px 30px; border-radius:18px; overflow:hidden; text-align:center;
         background:radial-gradient(ellipse at 50% 30%, rgba(255,203,61,.22), transparent 60%), linear-gradient(180deg, rgba(10,10,12,.55), rgba(16,17,19,.97)), url('/img/fotos/t/04_porta_avioes.jpg') center/cover; border:1px solid #3a3020; }
body.nuc .heroi { border-color:#1e3a40; background:radial-gradient(ellipse at 50% 30%, rgba(95,211,230,.22), transparent 60%), linear-gradient(180deg, rgba(10,10,12,.55), rgba(16,17,19,.97)), url('/img/fotos/t/05_base_militar.jpg') center/cover; }
.heroi .med { width:150px; height:150px; animation:brilho 3s ease-in-out infinite; }
@keyframes brilho { 0%,100% { filter:drop-shadow(0 0 14px rgba(255,203,61,.35)); transform:translateY(0); } 50% { filter:drop-shadow(0 0 34px rgba(255,203,61,.75)); transform:translateY(-4px); } }
.gema { width:72px; height:72px; margin:10px auto 6px; transform:rotate(45deg); border-radius:16px; background:var(--ciano); box-shadow:0 0 34px rgba(95,211,230,.6); position:relative; animation:gema 3s ease-in-out infinite; }
.gema::after { content:""; position:absolute; inset:22px; border-radius:6px; background:#d9fbff; }
@keyframes gema { 0%,100% { box-shadow:0 0 18px rgba(95,211,230,.4); } 50% { box-shadow:0 0 40px rgba(95,211,230,.8); } }
@media (prefers-reduced-motion: reduce) { .heroi .med, .gema { animation:none; } }
.fita { display:inline-block; background:linear-gradient(180deg,#ffd75e,#e0a92c); color:#1a1408; font-weight:800; font-size:12px; letter-spacing:.18em; padding:5px 12px; border-radius:999px; margin-bottom:12px; text-transform:uppercase; }
body.nuc .fita { background:linear-gradient(180deg,#8be6f2,#38b6cb); color:#06181c; }
h1 { margin:12px 0 4px; font-size:34px; letter-spacing:1px; color:var(--cor); text-transform:uppercase; text-shadow:0 2px 18px rgba(255,203,61,.35); }
body.nuc h1 { text-shadow:0 2px 18px rgba(95,211,230,.35); }
h2 { font-size:15px; letter-spacing:.16em; text-transform:uppercase; color:var(--apagado); margin:28px 0 10px; text-align:center; }
.sub { margin:6px auto 0; color:#d8d1c3; font-size:17px; max-width:480px; }
.irpagar { display:inline-block; margin-top:18px; background:linear-gradient(180deg,#ffd75e,#e0a92c); color:#1a1408; font-weight:800; padding:12px 26px; border-radius:10px; text-decoration:none; }
body.nuc .irpagar { background:linear-gradient(180deg,#8be6f2,#38b6cb); color:#06181c; }

/* vitrine (skin da vez / itens a venda) */
.vitrine { margin-top:18px; border-radius:16px; border:1px solid var(--cor2); background:linear-gradient(180deg,#1f1a10,#141518); padding:18px; display:grid; grid-template-columns:1.25fr 1fr; gap:16px; align-items:center; }
.vitrine img { width:100%; height:auto; filter:drop-shadow(0 8px 20px rgba(255,203,61,.25)); }
.vitrine .selo { display:inline-block; font-size:11px; font-weight:800; letter-spacing:.16em; color:#1a1408; background:var(--ouro); padding:3px 9px; border-radius:999px; text-transform:uppercase; }
.vitrine h3 { margin:8px 0 4px; font-size:22px; color:var(--ouro); }
.vitrine p { margin:0; font-size:14px; color:#d8d1c3; }
.itens { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
.item { background:var(--cartao); border:1px solid var(--borda); border-radius:12px; padding:12px; text-align:center; }
.item img { width:100%; height:80px; object-fit:contain; }
.item b { display:block; margin-top:6px; } .item span { color:var(--ciano); font-weight:700; }
.vazio { text-align:center; color:var(--apagado); background:var(--cartao); border:1px dashed var(--borda); border-radius:12px; padding:16px; font-size:15px; }
@media (max-width:520px) { .vitrine { grid-template-columns:1fr; text-align:center; } }

/* beneficios */
.bnfs { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; }
.bnf { display:flex; gap:12px; align-items:flex-start; background:var(--cartao); border:1px solid var(--borda); border-radius:12px; padding:14px; }
.bnf.destaque { grid-column:1 / -1; border-color:var(--cor2); background:linear-gradient(180deg,#221d12,#191b1e); }
body.nuc .bnf.destaque { background:linear-gradient(180deg,#0f2226,#191b1e); }
.bnf .ic { font-size:24px; line-height:1; color:var(--cor); min-width:28px; text-align:center; }
.bnf p { margin:0; font-size:15px; color:#d8d1c3; } .bnf p b { color:var(--cor); display:block; font-size:16px; margin-bottom:2px; }
.bnf p i { color:var(--apagado); }

/* pacotes de Nucleos */
.pacotes { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; }
.pac { position:relative; background:#0c0d0f; border:1px solid var(--borda); border-radius:12px; padding:16px 12px; text-align:center; cursor:pointer; color:var(--texto); font-weight:400; }
.pac:hover { border-color:#3c4a4e; }
.pac.sel { border-color:var(--ciano); box-shadow:0 0 0 1px var(--ciano) inset; background:#0b1a1d; }
.pac .gemas { height:26px; display:flex; justify-content:center; align-items:center; gap:6px; margin-bottom:4px; }
.pac .gemas i { width:13px; height:13px; transform:rotate(45deg); border-radius:3px; background:var(--ciano); box-shadow:inset 0 0 0 3px #d9fbff; }
.pac .q { font-size:28px; font-weight:800; line-height:1.2; } .pac .b { color:var(--ciano); font-size:14px; font-weight:700; min-height:1.3em; }
.pac .v { font-size:18px; font-weight:700; margin-top:6px; } .pac .tag { color:var(--ciano); font-size:11px; font-weight:800; letter-spacing:.12em; min-height:1.4em; }

/* como funciona */
.passos { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; counter-reset:p; }
.passo { background:var(--cartao); border:1px solid var(--borda); border-radius:12px; padding:14px 12px; font-size:14px; color:#d8d1c3; }
.passo::before { counter-increment:p; content:counter(p); display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%;
                 background:var(--cor); color:#111; font-weight:800; margin-bottom:8px; }
.passo b { color:var(--texto); }
@media (max-width:560px) { .passos, .bnfs { grid-template-columns:1fr; } h1 { font-size:28px; } }

/* pagamento */
.cartao { background:var(--cartao); border:1px solid var(--borda); border-radius:14px; padding:20px; margin-top:20px; scroll-margin-top:80px; }
label, .rot { display:block; font-weight:600; margin-bottom:8px; }
.linha { display:flex; gap:8px; }
input { flex:1; min-width:0; background:#0c0d0f; color:var(--texto); border:1px solid var(--borda); border-radius:10px; padding:12px 14px; font-size:18px; letter-spacing:1px; text-transform:uppercase; }
input:focus { outline:2px solid var(--cor2); border-color:transparent; }
button { border:0; border-radius:10px; padding:12px 18px; font-size:16px; font-weight:700; cursor:pointer; font-family:inherit; }
.sec { background:#2a2d31; color:var(--texto); }
.pri { width:100%; margin-top:14px; background:linear-gradient(180deg,#ffd75e,#e0a92c); color:#1a1408; font-size:18px; padding:16px; }
body.nuc .pri { background:linear-gradient(180deg,#8be6f2,#38b6cb); color:#06181c; }
button:disabled { opacity:.5; cursor:default; }
.ajuda { color:var(--apagado); font-size:14px; margin:8px 0 0; }
.centro { text-align:center; }
.msg { margin-top:12px; font-weight:600; min-height:1.5em; } .msg.erro { color:var(--erro); } .msg.ok { color:var(--ok); }
.conta { display:none; margin-top:14px; padding:12px 14px; border-radius:10px; background:#0c0d0f; border:1px solid var(--cor2); }
.conta b { color:var(--cor); font-size:20px; }
.formas { display:grid; gap:10px; }
.forma { display:flex; align-items:center; gap:12px; padding:14px; border-radius:12px; border:1px solid var(--borda); background:#0c0d0f; cursor:pointer; text-align:left; color:var(--texto); font-weight:400; width:100%; }
.forma.sel { border-color:var(--cor); box-shadow:0 0 0 1px var(--cor) inset; }
.forma .t { flex:1; } .forma .t b { display:block; font-size:16px; } .forma .t span { color:var(--apagado); font-size:14px; }
.forma .p { font-size:20px; font-weight:700; color:var(--cor); white-space:nowrap; }
.moedas { display:none; gap:8px; margin-top:10px; } .moedas button { flex:1; } .moedas button.sel { background:var(--cor2); color:#111; }
.outra { display:block; margin-top:22px; padding:16px; border-radius:12px; text-decoration:none; color:var(--texto); background:var(--cartao); border:1px solid var(--borda); }
.outra b { color:var(--cor); } .outra:hover { border-color:var(--apagado); }
body:not(.nuc) .outra b { color:var(--ciano); } body.nuc .outra b { color:var(--ouro); }
footer { margin-top:28px; text-align:center; color:var(--apagado); font-size:13px; } footer a { color:var(--apagado); }
/* 20/10: aviso enquanto a 0.1.10 nao sai (Nucleos a venda, jogo no ar ainda sem saldo/LOJA) */
.aviso { margin-top:12px; padding:12px 14px; border-radius:12px; font-size:14px; color:#d8f6fb; background:#0f2226; border:1px solid var(--ciano2); }
.aviso b { color:var(--ciano); }
/* 20/10 (v15): caixa de aceite da politica de reembolso (obrigatoria antes de pagar) */
.aceite { display:flex; gap:10px; align-items:flex-start; margin-top:16px; padding:12px; border-radius:10px; background:#0c0d0f; border:1px solid var(--borda); font-weight:400; font-size:14px; color:#d8d1c3; cursor:pointer; }
.aceite input { width:20px; height:20px; flex:0 0 20px; margin:1px 0 0; accent-color:var(--cor); text-transform:none; padding:0; }
.aceite:has(input:checked) { border-color:var(--cor); }