/* ══════════════════════════════════════════════════════════════════════════
   O CSS DE TODA A LOJA — cores, tipografia, botoes, caixas, janela e recado.

   Saiu do <style> de site/_head.html no item 6.3e. Ele e IGUAL em todas as
   paginas: como arquivo servido, e baixado uma vez e fica em cache eterno para
   o site inteiro -- o endereco carrega o carimbo de versao, entao cachear para
   sempre e seguro.

   ⚠ O CSS PROPRIO DE CADA PAGINA CONTINUA EMBUTIDO, de proposito. Ele nao se
   repete entre paginas, entao nao ha cache a ganhar, e um arquivo a mais
   atrasaria a primeira pintura da loja no celular.

   Fonte: site/base.css. A build copia para public/base.css -- editar public/
   direto funciona ate a proxima build apagar.
   ═══════════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
:root{
  --navy:#080F26; --navy2:#0D1730; --surface:#121B3D; --surface2:#182350;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.17);
  /* Bandeira do Paraguai: vermelho, branco, azul. O vermelho é a ação. */
  --vermelho:#D9232E; --vermelho2:#B51C26; --gold:#F5B93B; --azul:#1B63D6;
  /* 🚨 DOIS DOURADOS, E A DIFERENÇA É DE LEITURA, NÃO DE GOSTO.
     `--gold` é a cor da marca, feita para o fundo azul-escuro: sobre branco
     ela dá contraste 1,6 — a estrela da avaliação e o "Outlet" do título
     simplesmente sumiam depois que a loja virou clara. `--gold-txt` é o mesmo
     dourado escurecido até dar para ler.
     ⚠️ Só para TEXTO. Onde o dourado é FUNDO (`.b.ouro`) ele continua sendo
     `--gold`, senão o botão vira uma mancha marrom.

     🚨 O PADRÃO AQUI É O DOURADO CHEIO, porque `:root` ainda é o tema ESCURO --
     `/entrar` e as portas de login continuam no azul-marinho, e o dourado
     escuro sobre elas seria o mesmo defeito ao contrário. Quem escurece são
     as paletas claras: `.loja` e `.envolve`. */
  --gold-txt:var(--gold);
  --text:#EEF2FB; --muted:#95A0BC; --dim:#677291;
  --ok:#12B76A; --warn:#F2C230; --bad:#E5484D; --info:#3987e5;
  --font-h:'Sora',system-ui,-apple-system,Segoe UI,sans-serif;
  --font-b:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
  --shadow:0 20px 50px -22px rgba(0,0,0,.7);
}
body{margin:0;background:var(--navy);color:var(--text);font-family:var(--font-b);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-h);margin:0;letter-spacing:-.02em;line-height:1.18}
button,input,select,textarea{font-family:inherit;font-size:inherit}
img{max-width:100%;display:block}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:9px}
::-webkit-scrollbar-track{background:transparent}

/* ── topo, comum a todas as páginas ─────────────────────────────────────── */
.topo{position:sticky;top:0;z-index:40;background:rgba(8,15,38,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
/* ══ O CABEÇALHO DO MARKETPLACE ═══════════════════════════════════════════

   Decisão do Bray em 07/10/2026, com o mockup na mão. O cabeçalho vem
   primeiro porque está em TODAS as telas — loja, produto, painel, pedido —
   e muda a cara da casa inteira num passo só.

   Marca à esquerda, busca larga no meio, as três ações à direita, e embaixo a
   barra de categorias. O vermelho aparece em dois lugares e só neles: o botão
   da busca e o contador do carrinho — um acento, não uma tinta.

   ⚠️ ESTE ARQUIVO É A FONTE. `public/base.css` é GERADO pela build a partir
   daqui: editar o de lá some no próximo `python build.py`, sem erro nenhum —
   e foi o que aconteceu na primeira tentativa. */
/* 🚨 LARGURA TOTAL. Decisão do Bray em 07/10/2026: *"quero cobrindo a tela
   toda"*. O conteúdo parava em 1240px e sobravam duas faixas vazias enormes
   num monitor de 1920.
   ⚠️ O limite NÃO virou `none`, e sim 1860: acima disso a faixa de categorias
   vira uma linha de 20 ícones minúsculos espalhados, e o olho perde a conta.
   Num monitor de 1920 a diferença para "tela toda" é a margem de 30px de cada
   lado -- que é o que impede o texto de encostar na borda. */
.topo-in{max-width:1860px;margin:0 auto;padding:12px 30px;display:flex;align-items:center;gap:20px}

.topo-busca{flex:1;max-width:620px;display:flex;background:#fff;border-radius:8px;overflow:hidden;min-width:0}
.topo-busca input{flex:1;min-width:0;border:0;background:transparent;color:#1b2430;
  padding:11px 15px;font-size:.88rem;outline:none}
.topo-busca input::placeholder{color:#9aa3ad}
.topo-busca button{width:50px;border:0;background:#e53935;color:#fff;display:grid;place-items:center;cursor:pointer;flex:none}
.topo-busca button svg{width:19px;height:19px}
.topo-busca button:hover{background:#c62828}

.topo-acoes{margin-left:auto;display:flex;align-items:center;gap:7px}
.topo-acao{display:flex;align-items:center;gap:9px;padding:7px 11px;border-radius:8px;
  color:var(--text);white-space:nowrap}
.topo-acao:hover,.topo-acao.on{background:rgba(255,255,255,.07)}
.topo-acao>svg{width:21px;height:21px;flex:none}
.topo-acao b{display:block;font-size:.8rem;font-weight:600;line-height:1.25}
.topo-acao small{display:block;font-size:.68rem;color:var(--muted);line-height:1.25}
/* O contador fica SOBRE a sacola, como no mockup. */
.topo-acao .saco{position:relative;display:grid;place-items:center;font-style:normal;flex:none}
.topo-acao .saco svg{width:21px;height:21px}
.topo-acao .saco em{position:absolute;top:-6px;right:-8px;background:#e53935;color:#fff;
  font-style:normal;font-weight:800;font-size:.62rem;min-width:17px;height:17px;
  border-radius:9px;display:grid;place-items:center;padding:0 4px}
.topo-sair{background:none;border:0;color:var(--muted);font-size:.78rem;padding:7px 8px;cursor:pointer}
.topo-sair:hover{color:var(--text)}

/* A barra de categorias, logo abaixo. */
.topo-barra{background:rgba(255,255,255,.045);border-top:1px solid var(--line)}
.topo-barra-in{max-width:1860px;margin:0 auto;padding:0 30px;display:flex;align-items:stretch;
  gap:3px;overflow-x:auto;scrollbar-width:none}
.topo-barra-in::-webkit-scrollbar{display:none}
.cats-botao{display:flex;align-items:center;gap:9px;background:#e53935;color:#fff;border:0;
  padding:11px 17px;font-size:.84rem;font-weight:700;white-space:nowrap;cursor:pointer}
.cats-botao:hover{background:#c62828}
.cats-botao svg{width:17px;height:17px;flex:none}
.atalho{display:flex;align-items:center;gap:7px;padding:11px 14px;color:var(--muted);
  font-size:.82rem;font-weight:600;white-space:nowrap}
.atalho:hover{color:var(--text);background:rgba(255,255,255,.05)}
.atalho svg{width:15px;height:15px;flex:none;color:var(--gold)}

/* As redes, encostadas à direita da barra -- como no mockup. */
.topo-redes{margin-left:auto;display:flex;align-items:center;gap:2px;padding-left:12px}
/* Cada rede na SUA cor -- cinza sobre azul-marinho passa por decoração e
   ninguém clica. O fundo da cor entra no hover, para o ícone não virar um
   botão chapado dentro de uma barra que é só texto. */
.topo-redes a{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;
  color:var(--rede,var(--muted))}
.topo-redes a:hover{color:#fff;background:var(--rede,rgba(255,255,255,.1))}
.topo-redes svg{width:18px;height:18px}
@media(max-width:860px){
  /* 🚨 NO CELULAR OS ÍCONES FICAM COLADOS À DIREITA, E NÃO NO FIM DA BARRA.
     A barra rola de lado com os atalhos, e no fim dela os ícones nasciam fora
     da tela: só aparecia quem rolasse até o fim, e ninguém rola uma barra de
     navegação atrás de ícone de rede social. Com `sticky` eles acompanham a
     rolagem e ficam sempre visíveis. */
  /* 🚨 E DEPOIS ELES SAÍRAM DA BARRA. O `sticky` resolvia o sumiço e criava
     coisa pior: grudados à direita de uma barra que rola, os dois ícones
     ficavam POR CIMA dos atalhos. Medido num aparelho de 390px -- as redes
     ocupavam de 296 a 366, e "Ofertas do Dia" ia de 209 a 349. O degradê de
     trás comia metade da palavra, e o atalho seguinte aparecia cortado como
     "da". Relatado em 08/10/2026, com print.

     Barra de navegação no celular é o espaço mais caro da loja, e ela é de
     NAVEGAÇÃO. O WhatsApp já tem o botão flutuante em toda tela, e o
     Instagram passou a ficar no rodapé -- onde quem procura rede social
     procura. Nada se perdeu; mudou de lugar. */
  .topo-redes{display:none}
}
.cats-menu{max-width:1860px;margin:0 auto;padding:12px 30px 16px;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:3px;
  border-top:1px solid var(--line);background:var(--navy2)}
.cats-menu a{padding:10px 13px;border-radius:7px;font-size:.85rem;color:var(--text)}
.cats-menu a:hover{background:rgba(255,255,255,.07);color:var(--gold)}
.cats-vazio{padding:10px 13px;color:var(--muted);font-size:.85rem}
/* 🚨 `display:grid` VENCE O `hidden`, e o menu nascia aberto por cima da
   página. O atributo só vale `display:none` por padrão do navegador -- qualquer
   display declarado o atropela, sem erro nenhum. */
.cats-menu[hidden]{display:none}

@media(max-width:860px){
  /* ⚠️ NO CELULAR A BUSCA GANHA UMA LINHA SÓ PARA ELA. Espremida entre a
     marca e as ações ela virava um campo de 90px, onde não cabe nem "perfume"
     — e a busca é o caminho mais curto até a venda em quem chega do Instagram.
     As legendas das ações somem: ficam os ícones, que é o que o mockup faz. */
  .topo-in{flex-wrap:wrap;gap:11px;padding:11px 14px}
  .topo-busca{order:3;flex-basis:100%;max-width:none}
  .topo-acoes{gap:2px}
  .topo-acao{padding:7px}
  .topo-acao span{display:none}
  .topo-barra-in{padding:0 14px}
  .cats-menu{grid-template-columns:1fr 1fr;padding:10px 14px 14px}
}
.marca{display:flex;align-items:center;gap:10px;font-family:var(--font-h);font-weight:800;font-size:1.02rem;letter-spacing:-.02em}
.marca .py{width:34px;height:34px;border-radius:10px;background:var(--navy2);
  border:1px solid var(--line2);display:grid;place-items:center;flex:none;overflow:hidden}
.marca .py svg{width:26px;height:26px}
/* 🚨 O NOME DA MARCA, EM DUAS CORES, com a cor ESCRITA e não herdada.
   Até 07/10/2026 ele dependia do `color` do cabeçalho; num navegador onde
   aquela regra não chegava, o nome ficava invisível sobre o azul-marinho e a
   marca sumia do topo sem erro nenhum. */
.marca-nome b{display:flex;align-items:baseline;gap:4px;font-family:var(--font-h);
  font-weight:800;font-size:1.24rem;letter-spacing:-.02em;line-height:1}
.marca-nome i{font-style:normal;color:#fff}
.marca-nome em{font-style:normal;color:#E8232A}
.marca small{display:block;font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);font-weight:700;margin-top:3px;white-space:nowrap}
/* O coração só no desktop: no celular ele já está na barra de baixo, e dois
   caminhos para a mesma tela no mesmo aparelho é ruído. */
.so-grande{display:inline-grid;place-items:center}
@media(max-width:640px){ .so-grande{display:none} }
.topo nav{margin-left:auto;display:flex;align-items:center;gap:6px}
.topo nav a,.topo nav button{color:var(--muted);font-size:.88rem;font-weight:500;padding:8px 13px;border-radius:9px;background:transparent;border:0;cursor:pointer}
.topo nav a:hover,.topo nav button:hover{color:var(--text);background:rgba(255,255,255,.05)}
.topo nav a.on{color:#fff;background:rgba(217,35,46,.16)}

/* ── botões ─────────────────────────────────────────────────────────────── */
.b{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:11px;
  padding:12px 20px;font-family:var(--font-h);font-weight:700;font-size:.9rem;cursor:pointer;
  background:var(--vermelho);color:#fff;transition:.15s;white-space:nowrap}
.b:hover{background:var(--vermelho2)}
.b:disabled{opacity:.45;cursor:not-allowed}
.b.fantasma{background:rgba(255,255,255,.06);color:var(--text);border:1px solid var(--line2)}
.b.fantasma:hover{background:rgba(255,255,255,.11)}
.b.ouro{background:var(--gold);color:#2A1E00}
.b.ouro:hover{background:#e0a72c}
.b.pequeno{padding:8px 14px;font-size:.8rem;border-radius:9px}
.b.largo{width:100%}

/* ── caixas ─────────────────────────────────────────────────────────────── */
.caixa{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px}
.caixa h3{font-size:1rem;margin-bottom:12px}
.pilha{display:grid;gap:13px}
.linha{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rotulo{display:grid;gap:6px;font-size:.8rem;font-weight:600;color:#C3CCE3}
.rotulo input,.rotulo select,.rotulo textarea{background:#0A1230;border:1px solid var(--line2);color:var(--text);
  border-radius:10px;padding:11px 13px;width:100%;outline:none;font-size:.92rem}
.rotulo input:focus,.rotulo select:focus,.rotulo textarea:focus{border-color:var(--gold)}
.rotulo textarea{min-height:80px;resize:vertical}
.erro{background:rgba(229,72,77,.12);border:1px solid rgba(229,72,77,.4);color:#FFB4B7;
  border-radius:10px;padding:11px 14px;font-size:.86rem}
.aviso{background:rgba(245,185,59,.1);border:1px solid rgba(245,185,59,.35);color:#F6D799;
  border-radius:10px;padding:11px 14px;font-size:.86rem}
.certo{background:rgba(18,183,106,.11);border:1px solid rgba(18,183,106,.36);color:#8FE9BE;
  border-radius:10px;padding:11px 14px;font-size:.86rem}
.vazio{padding:44px 20px;text-align:center;color:var(--muted);font-size:.9rem}
/* 🚨 O MASCOTE NOS BECOS: carrinho vazio e busca sem resultado. É onde a
   loja fala em primeira pessoa com quem não sabe o que fazer -- e é o que o
   briefing pede dele. Redondo e pequeno: ele cumprimenta, não ocupa a tela. */
.vazio.com-mascote{display:grid;justify-items:center;gap:7px;padding:34px 20px}
.vazio.com-mascote img{width:92px;height:92px;border-radius:50%;object-fit:cover;object-position:top center}
.vazio.com-mascote b{color:var(--text);font-size:.95rem}
.vazio.com-mascote span{max-width:300px;line-height:1.5}

/* ── o QR no canto do bloco do link ───────────────────────────────────────
   🚨 FLUTUA NO CANTO SUPERIOR DIREITO, como no desenho. `float` e nao grid:
   o bloco ja tem titulo, paragrafo e duas fileiras de botoes escritos em
   sequencia, e o float deixa o texto correr ao lado sem reescrever nada
   disso -- que e exatamente para o que ele serve.

   ⚠️ NO CELULAR ELE PARA DE FLUTUAR e vai para cima, centrado: flutuando
   numa tela de 360px ele espreme o link num corredor de 150px, e o link e o
   que a pessoa veio copiar. */
.qr-canto{float:right;margin:0 0 12px 16px;text-align:center;width:120px}
.qr-rot{display:block;font-size:.72rem;color:var(--muted);margin-bottom:5px}
.qr-botao{display:block;width:104px;height:104px;padding:5px;margin:0 auto;
  background:#fff;border:1px solid var(--line);border-radius:10px;cursor:pointer}
.qr-botao svg{display:block;width:100%;height:100%}
.qr-canto small{display:block;font-size:.7rem;color:var(--gold);margin-top:5px}
@media(max-width:640px){
  .qr-canto{float:none;margin:0 auto 14px;width:auto}
}

/* ── o Clube ──────────────────────────────────────────────────────────────
   🚨 DOURADO, e nao mais uma caixa cinza. A conta de membro tem de ser
   RECONHECIVEL -- foi o pedido: "uma conta especifica, tipo uma
   diferenciacao". Quem paga por um plano precisa ver que pagou. */
.selo-clube{display:inline-block;vertical-align:5px;margin-left:8px;
  background:linear-gradient(135deg,#F5B93B,#E09B1E);color:#2A1E00;
  font-size:.62rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  border-radius:99px;padding:3px 10px}
.caixa-clube{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:14px 0 0;padding:13px 16px;border-radius:13px;
  background:rgba(245,185,59,.10);border:1px solid rgba(245,185,59,.34)}
.caixa-clube b{display:block;color:var(--gold)}
.caixa-clube span{display:block;font-size:.86rem}
.caixa-clube small{display:block;font-size:.8rem;color:var(--muted);margin-top:3px}
.caixa-clube .b{margin-left:auto}
/* Nos ultimos dias a cor muda: descobrir que o plano venceu pelo frete
   aparecendo no total e a pior forma de descobrir. */
.caixa-clube.acabando{background:rgba(242,194,48,.14);border-color:rgba(242,194,48,.5)}
.caixa-clube.acabando b{color:#F6D799}

/* ── os cartões do painel do afiliado ─────────────────────────────────────
   🚨 O DESENHO QUE O BRAY MANDOU: ícone colorido à esquerda, rótulo miúdo,
   número grande e o selo de variação ao lado. O painel mostrava uma fileira
   de caixas cinzas iguais -- e numa fileira assim nada se destaca, que é o
   contrário do que um resumo serve para fazer.

   ⚠️ `auto-fit` com mínimo de 200px: no celular viram uma coluna sozinha, e
   no desktop os quatro cabem lado a lado como no desenho. Sem isso, quatro
   cartões fixos ou estouram a largura ou sobram espaço. */
.cartoes{display:grid;gap:12px;margin-bottom:18px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.cartao-n{display:flex;align-items:center;gap:12px;padding:15px;
  background:var(--surface);border:1px solid var(--line);border-radius:13px}
.cartao-ico{width:40px;height:40px;border-radius:11px;flex:none;
  display:grid;place-items:center}
.cartao-ico.verde{background:rgba(18,183,106,.14);color:#2FD48A}
.cartao-ico.azul{background:rgba(59,130,246,.16);color:#6FA8FF}
.cartao-ico.ambar{background:rgba(242,194,48,.16);color:#F2C230}
.cartao-ico.roxo{background:rgba(168,85,247,.18);color:#C79BFF}
.cartao-rot{display:block;font-size:.76rem;color:var(--muted);line-height:1.3}
.cartao-val{display:inline-block;font-size:1.22rem;font-weight:800;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
/* O selo de variação nasce verde e vira vermelho na queda: um "-12%" verde
   seria a tela dizendo que cair é bom. */
.cartao-var{display:inline-block;margin-left:7px;font-size:.72rem;font-weight:800;
  padding:1px 7px;border-radius:99px;vertical-align:2px}
.cartao-var.sobe{background:rgba(18,183,106,.14);color:#8FE9BE}
.cartao-var.cai{background:rgba(229,72,77,.14);color:#FFB4B7}

/* ── a árvore da rede ─────────────────────────────────────────────────────
   O desenho mostra "Você" no topo e os três níveis abaixo, ligados. A
   ligação não é enfeite: ela é o que explica que o nível 2 vem DO nível 1, e
   não de mais uma lista solta na tela. */
.rede-voce{display:flex;align-items:center;gap:10px;justify-content:center;
  padding:12px 16px;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;max-width:260px;margin:0 auto}
.rede-haste{width:2px;height:16px;background:var(--line);margin:0 auto}
.rede-barra{height:2px;background:var(--line);margin:0 12%}
.rede-niveis{display:grid;gap:10px;margin-top:0;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.rede-nivel{padding:13px;border-radius:12px;text-align:center;
  background:rgba(59,130,246,.10);border:1px solid rgba(59,130,246,.26)}
.rede-nivel b{display:block;font-size:.92rem}
.rede-nivel small{display:block;color:var(--muted);font-size:.76rem;margin:2px 0 6px}
.rede-nivel .dinheiro{font-size:1.02rem;font-weight:800}

/* ── selos ──────────────────────────────────────────────────────────────── */
.selo{display:inline-flex;align-items:center;gap:6px;font-size:.68rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;border-radius:99px;padding:4px 10px;background:rgba(255,255,255,.07);color:var(--muted)}
.selo.espera{background:rgba(242,194,48,.14);color:#F6D799}
.selo.ok{background:rgba(27,99,214,.18);color:#9CC2FF}
.selo.preparo{background:rgba(168,85,247,.18);color:#D4A8FF}
/* As tres etapas novas de 03/10/2026. Matizes bem afastadas das que ja
   existiam: numa lista de pedidos, cor parecida vira a mesma mancha, e quem
   opera volta a ler linha por linha -- que e o trabalho que a cor poupa. */
.selo.frete{background:rgba(249,115,22,.16);color:#FFC08A}
.selo.embalado{background:rgba(236,72,153,.16);color:#FFA8D5}
.selo.ponto{background:rgba(148,163,184,.18);color:#D3DCE8}
.selo.transito{background:rgba(20,184,166,.16);color:#6FE0D0}
.selo.feito{background:rgba(18,183,106,.14);color:#8FE9BE}
.selo.ruim{background:rgba(229,72,77,.14);color:#FFB4B7}
/* 🚨 REEMBOLSADO TEM COR PROPRIA, e nao divide o vermelho do cancelado.
   Marrom-avermelhado: perto o bastante para ler como "deu errado", longe o
   bastante para nao virar a mesma mancha do cancelado -- que e o caso banal e
   de longe o mais comum na lista. */
.selo.estorno{background:rgba(180,83,9,.20);color:#F0B27A}
.selo.ouro{background:rgba(245,185,59,.16);color:var(--gold)}

/* ── a barra de baixo (só celular) ──────────────────────────────────────── */
.barra{display:none}
@media(max-width:640px){
  .barra{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;
    z-index:60;background:rgba(8,15,38,.97);backdrop-filter:blur(14px);
    border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
  .barra a{position:relative;display:grid;justify-items:center;gap:3px;padding:9px 4px 8px;
    color:var(--muted);font-size:.66rem;font-weight:600}
  .barra a.on{color:var(--gold)}
  .barra i{font-style:normal;display:grid;place-items:center}
  .barra i svg{width:21px;height:21px}
  .barra em{position:absolute;top:2px;right:calc(50% - 20px);background:var(--vermelho);color:#fff;
    font-style:normal;font-size:.6rem;font-weight:800;min-width:17px;height:17px;border-radius:99px;
    display:grid;place-items:center;padding:0 4px}
  /* A barra cobre o fim da página; o conteúdo precisa de espaço para não
     terminar embaixo dela. */
  body{padding-bottom:62px}
}

/* ── 🖤 a Black Friday (14/10/2026) ─────────────────────────────────────
   Acesa só pela campanha temporária com tema "black" no ar. O selo ao lado
   do logo e a faixa com o temporizador valem para a loja inteira. */
.selo-black{display:inline-block;align-self:center;margin-left:8px;background:#0b0b0f;color:#fff;
  border:1.5px solid #fff;font-size:.62rem;font-weight:900;letter-spacing:1.2px;padding:3px 7px;border-radius:5px}
body.tema-black .topo{background:linear-gradient(90deg,rgba(8,10,20,.96),rgba(26,10,16,.94) 60%,rgba(70,10,18,.92))}
.bf-faixa{background:linear-gradient(90deg,#0b0b0f,#2a0a10 55%,#8a1020);color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.bf-faixa-in{max-width:1860px;margin:0 auto;padding:7px 30px;display:flex;align-items:center;gap:16px;
  font-size:.8rem;flex-wrap:wrap}
.bf-faixa-nome{letter-spacing:1.5px;font-weight:900}
.bf-faixa-nome em{font-style:normal;color:#ff4d4f}
.bf-faixa-oferta{color:#ffd166;font-weight:700}
.bf-faixa-tempo b{font-variant-numeric:tabular-nums;background:#e53935;padding:3px 8px;border-radius:5px;margin-left:4px}
.bf-faixa a{margin-left:auto;color:#fff;font-weight:800;text-decoration:none;background:rgba(255,255,255,.12);
  padding:4px 12px;border-radius:999px}
.bf-faixa a:hover{background:rgba(255,255,255,.22)}
@media(max-width:640px){
  .selo-black{margin-left:6px;font-size:.55rem;padding:2px 5px}
  .bf-faixa-in{padding:6px 12px;gap:8px;font-size:.72rem;justify-content:center}
  .bf-faixa-oferta{display:none}
  /* Uma linha só no celular: o banner da home já tem o botão. */
  .bf-faixa a{display:none}
}

/* ── o botão do WhatsApp, com o mascote ──────────────────────────────────
   O rosto do mascote, a etiqueta "Tirar dúvidas" e um balão que aparece
   depois de alguns segundos e some no ×. Não cobre a tela: é para quem
   ficou com dúvida, não para interromper. */
.zap-mascote{position:fixed;right:16px;bottom:18px;z-index:55;
  display:flex;align-items:flex-end;gap:10px;pointer-events:none}
.zap-mascote > *{pointer-events:auto}
.zap-flutua{display:flex;flex-direction:column;align-items:center;text-decoration:none;
  transition:transform .16s}
.zap-flutua:hover{transform:scale(1.05)}
.zap-rosto{position:relative;width:66px;height:66px;border-radius:50%;overflow:hidden;
  background:#fff;border:3px solid #fff;box-shadow:0 0 0 3px #1F4FD8,0 8px 22px rgba(10,18,48,.35)}
.zap-rosto img{width:100%;height:100%;object-fit:cover;display:block}
.zap-online{position:absolute;right:3px;bottom:5px;width:13px;height:13px;border-radius:50%;
  background:#25D366;border:2px solid #fff}
.zap-rotulo{margin-top:-9px;position:relative;background:#0A1230;color:#fff;font-size:.72rem;
  font-weight:800;padding:4px 10px;border-radius:999px;white-space:nowrap;
  box-shadow:0 4px 12px rgba(10,18,48,.3)}
.zap-balao{position:relative;margin-bottom:34px;background:#fff;border-radius:14px 14px 4px 14px;
  padding:10px 30px 10px 13px;box-shadow:0 8px 26px rgba(10,18,48,.22);max-width:200px;
  animation:zapBalao .35s ease-out}
.zap-balao[hidden]{display:none}
.zap-balao a{display:block;text-decoration:none;color:#0A1230;line-height:1.3}
.zap-balao b{display:block;font-size:.86rem}
.zap-balao span{display:block;font-size:.8rem;color:#33405c}
.zap-fecha{position:absolute;top:4px;right:5px;width:22px;height:22px;border:0;background:none;
  color:#6b7390;font-size:1.05rem;line-height:1;cursor:pointer;border-radius:50%}
.zap-fecha:hover{background:#eef1f7}
@keyframes zapBalao{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:640px){
  /* Acima da barra de baixo: em cima do carrinho seria toque errado no meio
     da compra. */
  .zap-mascote{bottom:calc(70px + env(safe-area-inset-bottom));right:12px}
  .zap-rosto{width:58px;height:58px}
  .zap-balao{max-width:170px;margin-bottom:30px}
}
@media(prefers-reduced-motion:reduce){.zap-balao{animation:none}}

/* ── o rodapé ────────────────────────────────────────────────────────────
   Vive aqui, e não na landing, porque a LOJA não tinha rodapé nenhum -- zero
   tags <footer>. E rodapé não é enfeite: é onde quem está decidindo se confia
   vai procurar a quem perguntar. */
.rodape{border-top:1px solid var(--line);background:#050A1A;margin-top:60px}
.rodape-in{max-width:1240px;margin:0 auto;padding:38px 20px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:28px}
.rodape h4{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.rodape a,.rodape p{display:block;color:var(--muted);font-size:.86rem;margin:0 0 8px;line-height:1.5}
.rodape a:hover{color:var(--text)}
.rodape .fim{border-top:1px solid var(--line);text-align:center;padding:18px 20px;
  color:var(--dim);font-size:.78rem}
.rodape .zap{display:inline-flex;align-items:center;gap:8px;color:var(--ok);font-weight:600}
/* Cada rede na SUA cor, pela mesma razão da barra do cabeçalho: cinza passa
   por decoração e ninguém clica. */
.rodape .rodape-redes{display:inline-flex;align-items:center;gap:8px;
  color:#E1306C;font-weight:600;margin-top:7px}

/* ── a fita de compra segura ───────────────────────────── */

/* Vive aqui, e nao no fragmento da loja, porque aparece em dois lugares que
   nao se enxergam: a faixa da landing e as tres telas do checkout. Duas
   copias viram duas versoes no dia em que uma frase mudar.

   E DE PROPOSITO QUE ELA SEJA DISCRETA. Selo grande de cadeado dourado e o que
   site picareta usa, e a pessoa aprendeu a desconfiar dele. O que convence
   aqui e a frase ser VERIFICAVEL: quem duvidar de "nao pedimos cartao" chega
   ate o fim do checkout e confere que realmente nunca pedimos. */
.fita{display:flex;gap:7px 18px;flex-wrap:wrap;align-items:center}
.fita span{display:inline-flex;align-items:flex-start;gap:6px;font-size:.76rem;color:var(--muted);line-height:1.4}
.fita span::before{content:"✓";color:#4ED598;font-weight:800;font-size:.8rem;flex:none}
.fita.miuda span{font-size:.72rem}
.fita.empilha{flex-direction:column;align-items:flex-start;gap:8px}

/* A mesma fita quando precisa de fundo para se separar do que vem antes --
   e o caso do pe do carrinho e do formulario de entrega. */
.fita-caixa{background:rgba(18,183,106,.07);border:1px solid rgba(18,183,106,.22);
  border-radius:11px;padding:12px 14px}

/* ── números ────────────────────────────────────────────────────────────── */
.numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.numero{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:17px}
.numero span{display:block;font-size:.76rem;color:var(--muted);font-weight:500}
.numero b{display:block;font-family:var(--font-h);font-size:1.55rem;font-weight:800;margin-top:6px;letter-spacing:-.03em}
.numero.destaque{border-color:rgba(245,185,59,.4);background:linear-gradient(160deg,rgba(245,185,59,.09),var(--surface))}
.numero.destaque b{color:var(--gold)}

/* ── os filtros por opção, acima da grade ─────────────────────────────────
   Chips, e não uma barra lateral: a loja é usada no celular, e uma coluna de
   filtros à esquerda rouba metade da tela de quem está olhando produto. */
.filtros{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:flex-start;
  margin:0 0 18px;padding:13px 15px;background:var(--surface);
  border:1px solid var(--line);border-radius:14px}
.filtro-grupo{display:flex;flex-direction:column;gap:7px;min-width:0}
.filtro-grupo>b{font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}
.filtro-opcoes{display:flex;flex-wrap:wrap;gap:6px}
.filtro-op{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;cursor:pointer;
  font:inherit;font-size:.82rem;color:var(--text);background:var(--surface2);
  border:1px solid var(--line2);border-radius:999px;transition:border-color .15s,background .15s}
.filtro-op:hover{border-color:var(--gold)}
.filtro-op small{font-size:.68rem;color:var(--dim)}
/* 🚨 O MARCADO NÃO SE DISTINGUE SÓ PELA COR: a borda e o peso mudam junto.
   Quem não enxerga a diferença entre dois tons precisa de outra pista, e
   "qual filtro está ligado" é o que não pode ficar ambíguo numa lista que
   acabou de encolher. */
.filtro-op.on{background:var(--vermelho);border-color:var(--vermelho);color:#fff;font-weight:700}
.filtro-op.on small{color:rgba(255,255,255,.8)}
.filtro-limpar{align-self:center;margin-left:auto;padding:6px 12px;cursor:pointer;
  font:inherit;font-size:.8rem;color:var(--muted);background:none;
  border:1px solid var(--line2);border-radius:999px}
.filtro-limpar:hover{color:var(--text)}

/* 🚨 O AVISO DA CORREÇÃO DE ESCRITA -- e ele PRECISA existir aqui.
   `.fraco` foi usada em várias telas sem nunca estar definida, e o texto saiu
   com a cor do corpo: classe inventada no HTML não avisa, só não pinta. */
.correcao{margin:0 0 12px;color:var(--dim);font-size:.92rem}
.correcao[hidden]{display:none}


/* ── tabela ─────────────────────────────────────────────────────────────── */
.rolagem{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
table{width:100%;border-collapse:collapse;min-width:560px}
/* 🚨 O CABEÇALHO QUEBRA LINHA, e por isso a tabela cabe.
   A de saques tem 7 colunas e passava só 18px da largura disponível -- mas
   tem 9.633px de ALTURA. Para arrastar 18px na horizontal era preciso descer
   quase dez mil pixels até encontrar a barra de rolagem, que fica no pé da
   tabela. Com `nowrap`, "Chave Pix" e "Pedido em" exigiam a linha inteira; o
   recuo menor e a quebra devolvem mais de 60px -- de sobra. */
th{text-align:left;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
  font-weight:700;padding:13px 12px;border-bottom:1px solid var(--line)}
/* ⚠️ A LINHA ERA BRANCA SOBRE BRANCO desde que os painéis clarearam: a borda
   estava cravada em `rgba(255,255,255,.05)`, feita para o fundo escuro, e as
   divisórias simplesmente sumiram. Agora acompanha o tema. */
td{padding:13px 12px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:.88rem}
tr:last-child td{border-bottom:0}
td b{display:block;font-size:.9rem}
td small{display:block;color:var(--muted);font-size:.76rem}
.dinheiro{font-family:var(--font-h);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── janela ─────────────────────────────────────────────────────────────── */
.fundo{position:fixed;inset:0;background:rgba(3,7,20,.82);backdrop-filter:blur(4px);z-index:80;
  display:none;align-items:center;justify-content:center;padding:18px}
.fundo.aberta{display:flex}
.janela{background:var(--navy2);border:1px solid var(--line2);border-radius:18px;box-shadow:var(--shadow);
  width:min(560px,100%);max-height:92vh;display:flex;flex-direction:column}
/* ⚠️ 880px ERA ESTREITO PARA A FICHA DO PRODUTO, que quer foto + texto +
   selos lado a lado. Em tela grande ela ganha espaço; em tela pequena o
   `min()` continua mandando e nada transborda. */
.janela.larga{width:min(1180px,100%)}
.janela-topo{display:flex;align-items:center;gap:14px;padding:18px 22px;border-bottom:1px solid var(--line)}
.janela-topo h3{font-size:1.05rem;flex:1}
.janela-corpo{padding:22px;overflow-y:auto;min-height:0}
.janela-pe{padding:16px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.fechar{background:transparent;border:0;color:var(--muted);font-size:1.5rem;line-height:1;cursor:pointer;padding:0 4px}
.fechar:hover{color:var(--text)}

/* ── recado ─────────────────────────────────────────────────────────────── */
#recado{position:fixed;left:50%;bottom:26px;transform:translate(-50%,26px);z-index:120;
  background:#0F1B3F;border:1px solid var(--line2);border-radius:12px;padding:13px 20px;
  font-size:.88rem;font-weight:600;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.24s}
#recado.on{opacity:1;transform:translate(-50%,0)}
#recado.mau{border-color:rgba(229,72,77,.5);color:#FFB4B7}

/* ══════════════════════════════════════════════════════════════════════════
   🚨 OS PAINÉIS SÃO CLAROS, E A PALETA MORA EM `.envolve`

   `.envolve` é o envoltório dos DOIS painéis -- o da empresa e o do afiliado --
   e de mais ninguém. A loja virou clara em 07/10/2026 (ficha do produto,
   listagem, home) e os painéis eram as últimas telas escuras: entrar num deles
   parecia sair do site.

   A troca é por VARIÁVEL, não por reescrita: cada `var(--surface)` que já
   existia nas 3.000 linhas dos módulos continua valendo -- só mudou o que ela
   significa aqui dentro.

   ⚠️ NUNCA EM `:root`. O cabeçalho (`header.topo`) é IRMÃO de `.envolve`, não
   filho: ele é escuro de propósito, igual ao da loja, e em `:root` esta paleta
   o clarearia junto.

   `--afundado` é a cor do que "afunda" -- campo de busca, foto sem imagem. No
   tema escuro era #0A1230, mais escuro que a página; no claro é mais claro que
   o cartão, pelo mesmo motivo. */
.envolve{max-width:1240px;margin:0 auto;padding:26px 20px 70px;
  --navy:#f2f4f7; --navy2:#ffffff; --surface:#ffffff; --surface2:#f7f8fa;
  --line:#e4e8ee; --line2:#d8dee6; --afundado:#f7f8fa;
  --text:#1b2430; --muted:#5b6673; --dim:#8a95a3;
  --shadow:0 18px 44px -24px rgba(16,26,38,.28);
  color:var(--text)}
body:has(.envolve){background:#f2f4f7}

/* ══════════════════════════════════════════════════════════════════════════
   🚨 COR NOS PAINÉIS — "ficou top mas está muito branco" (Bray, 07/10/2026)

   Tudo branco sobre cinza-claro some: campo, cartão e fundo ficam do mesmo
   tom, e o olho não acha onde clicar. A cor aqui não é enfeite -- ela SEPARA
   o que é informação do que é AÇÃO, e dá âncora para a vista correr a tela.

   ⚠️ Pouca cor, e cada uma com função. Paleta de enfeite num painel que mostra
   dinheiro deixa tudo parecendo igualmente urgente, que é o mesmo que nada
   ser urgente. */

/* O título de cada caixa ganha uma barra da marca à esquerda: separa seções
   sem precisar de linha divisória nem de mais um tom de cinza. */
/* ⚠️ `> h3:first-child` NÃO casava: o título mora dentro de um `.linha`, ao
   lado do botão de atualizar. O seletor correto é o h3 que abre o seu próprio
   bloco, esteja ele direto na caixa ou dentro da linha do cabeçalho. */
.envolve .caixa h3:first-child,
.envolve .faixa-v h2:first-child{
  border-left:3px solid var(--vermelho);padding-left:10px}

/* O cabeçalho da tabela deixa de ser branco sobre branco. */
.envolve thead th{background:#f7f9fc}
.envolve tbody tr:hover{background:#fafbfd}

/* Campo tem fundo e borda visíveis: no branco total ele desaparecia e a
   pessoa não sabia onde digitar. */
.envolve input:not([type=checkbox]):not([type=radio]),
.envolve select,.envolve textarea{
  background:#fff;border:1px solid #d8dee6}
.envolve input:focus,.envolve select:focus,.envolve textarea:focus{
  border-color:var(--azul);outline:2px solid rgba(27,99,214,.14)}

/* O botão secundário deixa de ser invisível: contorno em vez de nada. */
.envolve .b.fantasma{background:#fff;border:1px solid #d8dee6;color:#1b2430}
.envolve .b.fantasma:hover{background:#f3f6fa;border-color:#b9c3cf}

/* 🚨 OS RECADOS TAMBÉM PRECISAVAM VIRAR CLAROS. `.aviso`, `.erro` e `.certo`
   nasceram para fundo escuro: o texto do aviso é #F6D799, um amarelo pálido,
   sobre uma tinta amarela pálida -- no painel branco isso é amarelo sobre
   amarelo. A aba de banners já usava `.aviso`, e o texto estava lá, ilegível.
   ⚠️ Escopado em `.envolve` como o resto da paleta clara: o cabeçalho e a
   loja continuam escuros, e `:root` quebraria os dois. */
.envolve .aviso{background:#fff8e6;border-color:#f0d08a;color:#7a5a12}
.envolve .erro{background:#fdeeee;border-color:#e9a8a8;color:#8d2020}
.envolve .certo{background:#eaf7ef;border-color:#a9dcbd;color:#1c6b3c}
/* `forte` é o aviso que mexe em dinheiro: a campanha de preço no ar. */
.envolve .aviso.forte{background:#fdeeee;border-color:#e9a8a8;color:#8d2020}

/* Texto de apoio embaixo de um campo: explica a consequência sem virar aviso. */
.envolve .dica{font-size:.78rem;color:#6b7786;line-height:1.45}
/* 🚨 `fraco` ERA UMA CLASSE QUE NÃO EXISTIA.
   A aba de Vendas a usa desde que nasceu -- em "—" de margem ausente, em
   contagens, em "Nenhuma venda no período" -- e ela nunca foi definida em
   lugar nenhum. O texto saía na cor normal: o apoio competindo de igual para
   igual com o número que ele devia apoiar, e o "—" de dado ausente com o
   mesmo peso de um valor de verdade.
   Nada quebrou, e é justamente por isso que durou: CSS que falta não dá
   erro, só desenha errado. */
.envolve .fraco{font-size:.78rem;color:#6b7786;line-height:1.45}
.envolve .fraco b{color:inherit}
/* O estado em uma palavra, ao lado dos botões que o mudam. */
.envolve .etq{font-size:.76rem;font-weight:800;color:#8a95a3;align-self:center}
.envolve .etq.ok{color:#1c6b3c}
/* As porcentagens por categoria: uma coluna por categoria, quantas couberem. */
.envolve .grade-cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:11px}
/* O dourado de texto, escurecido para o painel claro -- ver `--gold-txt`. */
.envolve{--gold-txt:#8A6A12}

/* ── UNIFICAR CADASTROS ───────────────────────────────────────────────────
   As contas do grupo ficam LADO A LADO, e não uma lista. A decisão é uma
   comparação -- qual e-mail está certo, qual tem as compras -- e comparação
   em coluna obriga a pessoa a guardar a primeira de cabeça. */
.envolve .grade-contas{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.envolve .conta{position:relative;display:block;border:1px solid var(--line);
  border-radius:11px;padding:13px;cursor:pointer;background:#fff}
.envolve .conta:hover{border-color:#b9c3cf}
/* A escolhida se destaca pela BORDA e pelo fundo, e não só pelo radio: o
   ponto marcado de 13px não se vê de relance numa tela com nove grupos. */
.envolve .conta.fica{border-color:var(--gold);background:#fffdf5;
  box-shadow:0 0 0 3px rgba(245,185,59,.18)}
.envolve .conta .tambem{display:block;font-size:.73rem;color:#1c6b3c;margin-top:3px}
.envolve .conta .desde{display:block;font-size:.73rem;color:#8a95a3;margin-top:3px}
.envolve .numeros-conta{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:10px;
  font-size:.78rem;color:#5b6673}
.envolve .numeros-conta b{color:#101a26}
.envolve .numeros-conta i{font-style:normal;color:#1c6b3c}
.envolve .etiqueta-fica{position:absolute;top:-9px;right:11px;background:var(--gold);
  color:#2A1E00;font-size:.64rem;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;border-radius:99px;padding:2px 9px}

/* ── A TRILHA DO PEDIDO, NO PAINEL DE QUEM COMPROU ────────────────────────
   🚨 ESTE BLOCO NAO EXISTIA. O `.trilha` estava estilizado em `_loja.html`,
   que e outra pagina: no painel o mesmo HTML caia sem regra nenhuma, e as
   etapas saiam como uma lista de texto corrido, todas iguais, com um `<i>`
   vazio e invisivel na frente. O pedido podia estar em qualquer etapa -- a
   tela mostrava o mesmo.

   Tres estados, e cada um tem de ser reconhecivel SEM ler: o que passou traz
   um ✓ verde, o de agora traz o ponto dourado com halo e a palavra "agora", e
   o que falta fica cinza claro. Quem abre o painel quer responder "onde esta
   o meu pedido" num relance, e nao comparar cinco frases parecidas.

   ⚠️ A LINHA QUE LIGA OS PONTOS e um `::before` em cada item, menos no
   primeiro. Desenhar uma barra unica por tras exigiria saber a altura do
   bloco, que muda com a quebra de texto no celular. */
.envolve .trilha{display:grid;gap:0;margin:14px 0 4px}
.envolve .trilha div{position:relative;display:flex;align-items:center;gap:11px;
  font-size:.86rem;color:#9aa3ad;padding:7px 0}
.envolve .trilha div::before{content:"";position:absolute;left:8px;top:0;height:7px;
  width:2px;background:#e3e8ef}
.envolve .trilha div:first-child::before{display:none}
.envolve .trilha i{width:18px;height:18px;border-radius:50%;background:#eceff3;
  border:2px solid #e3e8ef;flex:none;font-style:normal;font-size:.62rem;
  font-weight:800;color:#fff;display:flex;align-items:center;justify-content:center}
/* O que ja aconteceu: verde e com o ✓ dentro. */
.envolve .trilha .passou{color:#4a5564}
.envolve .trilha .passou i{background:#1c6b3c;border-color:#1c6b3c}
.envolve .trilha .passou::before{background:#1c6b3c}
/* Onde o pedido esta AGORA. */
.envolve .trilha .agora{color:#101a26;font-weight:700}
.envolve .trilha .agora i{background:var(--gold);border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(245,185,59,.25)}
.envolve .trilha .aqui{font-style:normal;font-size:.66rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:#8a6a12;
  background:rgba(245,185,59,.18);border-radius:99px;padding:2px 8px}

/* 🚨 O CARTÃO DE NÚMERO GANHA UMA FAIXA DE COR NO TOPO, como no mockup.
   São quatro cores em ordem fixa -- e a ordem importa: o primeiro cartão de
   cada painel é sempre dinheiro confirmado, e ele é o dourado da marca. */
.envolve .numeros .numero{position:relative;overflow:hidden}
.envolve .numeros .numero::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:var(--azul)}
.envolve .numeros .numero:nth-child(1)::before{background:var(--gold)}
.envolve .numeros .numero:nth-child(2)::before{background:var(--ok)}
.envolve .numeros .numero:nth-child(4)::before{background:#8b5cf6}
.envolve .numeros .numero:nth-child(5)::before{background:var(--vermelho)}

/* ── a barra lateral ──────────────────────────────────────────────────────
   Eram nove abas numa fileira que rolava de lado: no notebook as últimas
   ficavam fora da tela, e ninguém sabia que existiam. Em coluna cabem todas,
   agrupadas pelo que a pessoa está tentando fazer.

   ⚠️ SÓ ENTRA ITEM QUE TEM TELA. O mockup pede Clientes, Estoque, Frete,
   Relatórios e Suporte -- nenhum existe. Item de menu que abre tela vazia
   parece defeito, e faz a pessoa desconfiar do resto do painel. */
.painel{display:grid;grid-template-columns:230px minmax(0,1fr);gap:20px;align-items:start}
/* 🚨 A BARRA E ESCURA, como no desenho do Bray.
   Ela era clara igual ao resto da pagina e as duas superficies se
   confundiam: o menu parecia parte do conteudo, e nao a navegacao dele.
   Escura, ela vira moldura -- que e o que uma barra lateral faz. */
.lado{background:#0F1B30;border:1px solid #1B2C49;border-radius:13px;
  padding:8px;position:sticky;top:74px}
.lado-grupo{font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;
  color:#6E819E;font-weight:800;padding:13px 11px 5px}
.lado-grupo:first-child{padding-top:7px}
/* O Suporte e um <a> (sai do site), e os demais sao <button>. Os dois tem
   de parecer a mesma coisa na barra -- e, sobretudo, obedecer ao `hidden`
   da mesma forma: ver a regra logo abaixo. */
.lado button, .lado a{width:100%;text-align:left;background:none;border:0;padding:9px 11px;
  border-radius:8px;color:var(--text);font:inherit;font-size:.88rem;font-weight:600;
  cursor:pointer;display:flex;align-items:center;gap:8px;text-decoration:none;
  color:#C8D4E6}
/* 🚨 `display:flex` NO BOTÃO VENCE O `hidden`.
   O atributo `hidden` só vale enquanto nada declarar `display` -- e a regra
   acima declara. Sem esta linha, esconder um item do menu não esconde nada:
   foi o que aconteceu com "Minha Rede", "Comissões" e "Saque" para quem ainda
   nao aderiu ao programa. (Terceira vez que esta casa cai nisto.)

   🚨 E A QUARTA QUASE FOI AGORA: em 11/10/2026 o Suporte entrou como <a>,
   e a regra acima so falava de `button`. O link apareceria para quem nem
   esta no programa de afiliados. Por isso os seletores daqui cobrem os
   dois -- e ha teste. */
.lado button[hidden], .lado a[hidden]{display:none}
.lado button:hover, .lado a:hover{background:#17253E;color:#fff}
/* A aba de agora e VERMELHA, e nao mais escura: num menu ja escuro, um
   azul um pouco mais claro nao se le de relance. */
.lado button.on{background:var(--vermelho);color:#fff}
.lado .pino{margin-left:auto;background:var(--vermelho);color:#fff;font-size:.66rem;
  font-weight:800;border-radius:99px;padding:1px 7px}
.lado button.on .pino{background:#fff;color:#0f2242}
/* No celular a coluna não cabe: vira uma fileira que rola, e os títulos de
   grupo saem -- em fileira eles separariam nada. */
/* 🚨 NO CELULAR OS ITENS QUEBRAM LINHA, E NÃO ROLAM DE LADO.
   Em 07/10/2026 esta regra era `overflow-x:auto`, e os dois últimos itens --
   "Minhas Compras" e "Meus Dados" -- ficavam FORA DA TELA, à direita. Nada
   indicava que havia mais: os afiliados abriram o painel, não acharam as
   próprias compras, e perguntaram onde estavam.
   Rolagem lateral só funciona quando alguma coisa denuncia que ela existe.
   Aqui nada denunciava -- então eles quebram linha e aparecem todos. */
@media(max-width:900px){
  .painel{grid-template-columns:minmax(0,1fr)}
  .lado{position:static;display:flex;flex-wrap:wrap;gap:5px;padding:6px}
  .lado-grupo{display:none}
  .lado button{width:auto;white-space:nowrap;flex:0 0 auto}
}

.titulo{margin-bottom:20px}
.titulo .olho{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-txt);font-weight:700}
.titulo h2{font-size:1.6rem;margin-top:5px}
.titulo p{color:var(--muted);font-size:.9rem;margin:6px 0 0}

@media(max-width:720px){
  .envolve{padding:18px 14px 60px}
  .topo-in{padding:11px 14px;gap:10px}
  .topo nav a,.topo nav button{padding:7px 9px;font-size:.82rem}
  .marca small{display:none}
  .titulo h2{font-size:1.32rem}
}

/* ══════════════════════════════════════════════════════════════════════════
   🚨 O TEMA ESCURO — uma LISTA DE VARIÁVEIS, e não um CSS novo

   Pedido dos clientes em 10/10/2026: "opção de tela clara ou escura".

   A loja JÁ TINHA os dois temas — só não dava para escolher. `:root` sempre
   foi o azul-marinho, e `.loja` / `.envolve` são paletas CLARAS que
   redefinem as mesmas variáveis. Esta seção fecha o circuito.

   ⚠️ NENHUMA REGRA NOVA DE COMPONENTE AQUI. Cada `var(--surface)` que já
   existe continua valendo; só muda o que ela significa. Reescrever regra por
   regra criaria um segundo CSS para manter -- e no dia em que alguém mudasse
   um só deles, os dois temas divergiriam sem ninguém ver.

   🚨 AS DUAS PORTAS, E AS DUAS SÃO NECESSÁRIAS:

     [data-tema="escuro"]                      a pessoa ESCOLHEU escuro
     :not([data-tema="claro"]) + prefers-dark  ela não escolheu, e o aparelho
                                               está no escuro

   A segunda é guardada por `:not([data-tema="claro"])`. Sem essa guarda, quem
   escolhe CLARO num celular no modo escuro continuaria vendo escuro -- a
   escolha explícita tem de ganhar do sistema, nos dois sentidos.
   ═══════════════════════════════════════════════════════════════════════ */

/* A paleta escura. Os valores são os mesmos do `:root` lá de cima, que é o
   tema escuro original da casa -- repetidos aqui porque `.loja` e `.envolve`
   são mais específicos que `:root` e precisam ser vencidos no mesmo nível. */
:root[data-tema="escuro"] .loja,
:root[data-tema="escuro"] .envolve {
  --navy:#080F26; --navy2:#0D1730; --surface:#121B3D; --surface2:#182350;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.17);
  /* O que "afunda" na página: busca, foto vazia, código Pix. No claro é mais
     claro que o cartão; no escuro, mais escuro que ele. */
  --afundado:#0A1230;
  --text:#EEF2FB; --muted:#95A0BC; --dim:#677291;
  /* O dourado volta a ser o cheio: sobre azul-marinho ele lê, e foi para o
     fundo claro que precisou escurecer. */
  --gold-txt:var(--gold);
  --shadow:0 20px 50px -22px rgba(0,0,0,.7);
  background:var(--navy); color:var(--text);
}
/* 🚨 SÓ O BODY DE QUEM TEM PALETA. Sem o `:has()`, a HOME escurecia junto --
   e ela tem 54 cores escritas à mão (lista de categorias, bloco de garantias,
   faixa de baixo): o fundo virava escuro e os blocos continuavam BRANCOS.
   Entregar a home remendada é pior que entregá-la clara. Ver o PR. */
:root[data-tema="escuro"] body:has(.loja),
:root[data-tema="escuro"] body:has(.envolve) { background:#080F26 }

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .loja,
  :root:not([data-tema="claro"]) .envolve {
    --navy:#080F26; --navy2:#0D1730; --surface:#121B3D; --surface2:#182350;
    --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.17);
    --afundado:#0A1230;
    --text:#EEF2FB; --muted:#95A0BC; --dim:#677291;
    --gold-txt:var(--gold);
    --shadow:0 20px 50px -22px rgba(0,0,0,.7);
    background:var(--navy); color:var(--text);
  }
  :root:not([data-tema="claro"]) body:has(.loja),
  :root:not([data-tema="claro"]) body:has(.envolve) { background:#080F26 }
}

/* ── O BOTÃO ───────────────────────────────────────────────────────────────
   Mora no cabeçalho, que é escuro nos dois temas -- então ele não muda de
   cor, só de ícone. Sutil de propósito: é ajuste, não ação de loja, e um
   botão chamativo ao lado de "Carrinho" disputaria com o que vende. */
.topo-tema{display:grid;place-items:center;width:38px;height:38px;flex:0 0 auto;
  border:1px solid rgba(255,255,255,.14);border-radius:11px;background:transparent;
  color:#C9D3EA;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.topo-tema:hover{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.28)}
.topo-tema:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* 🚨 O BOTAO SOME ONDE ELE NAO FAZ NADA.
   A home nao tem paleta de tema -- as cores dela estao escritas a mao -- e o
   botao aparecia la sem efeito nenhum. Botao que nao faz nada e pior que
   botao ausente: a pessoa clica, nada muda, e conclui que a loja quebrou.

   ⚠️ E a regra se CONSERTA SOZINHA: no dia em que a home ganhar a classe
      .loja ou .envolve, o botao volta a aparecer sem ninguem mexer aqui. */
body:not(:has(.loja)):not(:has(.envolve)) .topo-tema{display:none}
.topo-tema svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
/* 🚨 UM ÍCONE DE CADA VEZ, trocado por CSS e não por JS: o <button> carrega os
   dois e o tema decide qual aparece. Trocar no JS faria o ícone piscar errado
   no carregamento, antes de o script rodar -- o mesmo flash que o script do
   <head> existe para evitar, de volta pela porta dos fundos. */
.topo-tema .lua{display:block}
.topo-tema .sol{display:none}
:root[data-tema="escuro"] .topo-tema .lua{display:none}
:root[data-tema="escuro"] .topo-tema .sol{display:block}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .topo-tema .lua{display:none}
  :root:not([data-tema="claro"]) .topo-tema .sol{display:block}
}

/* O CLUBE AO LADO DO PREÇO (`linhaDoClube`, em loja/pagamento.mjs): o selo
   dourado para o membro, e o convite para quem ainda não é. */
.clube-preco{display:inline-block;margin-top:4px;padding:2px 8px;border-radius:999px;font-size:.72rem;font-weight:800;
  background:rgba(245,185,59,.16);color:var(--gold,#c98a00);letter-spacing:.01em}
.clube-convite{display:block;margin-top:4px;font-size:.76rem;color:var(--gold,#b27a00);text-decoration:none;line-height:1.3}
.clube-convite b{font-weight:800}
.clube-convite:hover{text-decoration:underline}
/* No admin e no topo: o MESMO selo dourado do painel (`.selo-clube`, acima),
   numa versão de linha -- sem redefinir o original. (Em 12/10/2026 esta regra
   redefinia `.selo-clube` inteira e mudava, sem querer, o selo do painel.) */
.selo-clube.linha{vertical-align:middle;margin-left:6px;padding:2px 8px;font-size:.62rem;white-space:nowrap}
.topo-acao .vip{display:block;color:#F5B93B;font-weight:800;letter-spacing:.04em}

/* ══════════════════════════════════════════════════════════════════════════
   O RASTREIO — o desenho do mockup do Bray (12/10/2026)

   Usado pela página do link do pedido e por "Minhas Compras" no painel, com o
   HTML de `public/rastreio-tela.mjs`. Tudo dentro de `.rp`: as classes daqui
   (`.bloco`, `.aba`, `.ev`…) são genéricas, e o painel já tem `.trilha` e
   `.pedido` próprias -- solto, este CSS mudaria telas que não pediram.
   ═══════════════════════════════════════════════════════════════════════ */
.rp .rp-ajuda{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line);
  border-radius:14px;background:var(--surface)}
.rp .rp-ajuda b{display:block;font-size:.92rem}
.rp .rp-ajuda small{color:var(--muted);font-size:.8rem}
.rp .b-zap{background:#25D366;color:#0A1230;white-space:nowrap}
.rp .rp-cab{display:grid;grid-template-columns:auto 1fr auto auto;gap:22px;align-items:center;
  padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--surface);margin-bottom:16px}
.rp .rp-cab .foto{width:96px;height:96px;border-radius:12px;object-fit:cover;background:var(--afundado,#0A1230)}
.rp .rp-cab small{display:block;color:var(--muted);font-size:.8rem}
.rp .rp-cab .num{font-family:var(--font-h);font-weight:800;font-size:1.35rem;letter-spacing:-.01em;margin:2px 0 6px;word-break:break-all}
.rp .rp-cab .div{border-left:1px solid var(--line);padding-left:22px;min-height:70px;display:flex;flex-direction:column;justify-content:center;gap:6px}
.rp .nome-transp{font-family:var(--font-h);font-size:1.1rem}
.rp .marca-transp{display:inline-block;background:#fff;border-radius:9px;padding:6px 10px}
.rp .marca-transp img{display:block;height:auto;max-width:150px}
.rp .r-selo{display:inline-flex;align-items:center;gap:7px;background:#16a34a;color:#fff;border-radius:10px;
  padding:7px 13px;font-size:.86rem;font-weight:700;width:max-content}
.rp .r-selo.espera{background:#d97706}
.rp .r-selo.alerta{background:#dc2626}
.rp .prev{font-family:var(--font-h);font-size:1.1rem}
.rp .aba{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:14px 14px 0 0;
  background:var(--azul,#1d4ed8);color:#fff;max-width:520px}
.rp .aba b{display:block;font-size:1.02rem}
.rp .aba small{opacity:.85;font-size:.8rem}
.rp .rp-corpo{display:grid;grid-template-columns:1.1fr 1fr;gap:16px;padding:16px;border:1px solid var(--line);
  border-radius:0 16px 16px 16px;background:var(--surface);margin-bottom:16px}
.rp .rp-col{display:grid;gap:14px;align-content:start}
.rp .bloco{border:1px solid var(--line);border-radius:14px;padding:16px}
.rp .bloco h3{margin:0 0 10px}
.rp .rp-previsao{display:flex;gap:12px;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:6px}
.rp .rp-previsao b{font-family:var(--font-h);font-size:1.45rem;letter-spacing:-.01em;display:block}
.rp .rp-previsao small{display:block;color:var(--muted);font-size:.8rem}
.rp .ico{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface2);color:var(--azul,#2563eb)}
.rp .ico svg{width:20px;height:20px}
.rp .ev{display:grid;grid-template-columns:22px 40px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.rp .ev:last-child{border-bottom:0}
.rp .ev .marca{position:relative;display:flex;justify-content:center;align-items:flex-start}
.rp .ev .marca i{width:16px;height:16px;border-radius:50%;border:2px solid var(--line2);background:var(--surface);margin-top:12px;z-index:1;flex:none}
.rp .ev .marca::after{content:"";position:absolute;top:30px;bottom:-14px;width:2px;background:var(--line2)}
.rp .ev:last-child .marca::after{display:none}
.rp .ev.agora .marca i{background:#16a34a;border-color:#16a34a;box-shadow:0 0 0 4px rgba(22,163,74,.18)}
.rp .ev.agora .marca::after{background:#16a34a}
.rp .ev.agora .ico{background:rgba(22,163,74,.12);color:#16a34a}
.rp .ev.agora b{color:#16a34a}
.rp .ev b{display:block;font-size:.95rem}
.rp .ev span{display:block;color:var(--muted);font-size:.85rem;margin-top:2px}
.rp .ev small{display:block;color:var(--dim);font-size:.78rem;margin-top:3px}
.rp .rp-agora{display:flex;gap:12px;align-items:center}
.rp .rp-agora b{display:block;font-family:var(--font-h);font-size:1.15rem}
.rp .rp-status{display:flex;gap:12px;align-items:flex-start;background:rgba(37,99,235,.08);border-color:rgba(37,99,235,.18)}
.rp .rp-status b{display:block;color:var(--azul,#1d4ed8);font-size:1rem}
.rp .rp-status span{color:var(--muted);font-size:.86rem}
.rp .rp-status.ok{background:rgba(22,163,74,.08);border-color:rgba(22,163,74,.2)}
.rp .rp-status.ok b{color:#16a34a}
.rp .rp-status.alerta{background:rgba(220,38,38,.07);border-color:rgba(220,38,38,.2)}
.rp .rp-status.alerta b{color:#dc2626}
.rp .rp-transp{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.rp .rp-transp small{display:block;color:var(--muted);font-size:.8rem}
.rp .rp-transp .cod b{display:block;font-family:var(--font-h);letter-spacing:.03em;font-size:1.05rem;user-select:all}
.rp .rp-garantias{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:18px;border:1px solid var(--line);
  border-radius:16px;background:var(--surface);margin-bottom:16px}
.rp .rp-garantias div{display:flex;gap:12px;align-items:center}
.rp .rp-garantias svg{flex:none;width:30px;height:30px;color:var(--azul,#1d4ed8)}
.rp .rp-garantias b{display:block;font-size:.9rem;color:var(--azul,#1d4ed8)}
.rp .rp-garantias small{color:var(--muted);font-size:.78rem}
.rp .rp-itens{display:grid;gap:9px}
.rp .rp-itens div{display:flex;gap:11px;align-items:center;font-size:.87rem}
.rp .rp-itens img{width:40px;height:40px;border-radius:8px;object-fit:cover;background:var(--afundado,#0A1230);flex:none}
.rp .rp-itens span{flex:1}
.rp .rp-compra{margin-bottom:16px}
.rp-item .compra-item{display:flex;justify-content:space-between;gap:10px;color:var(--text);margin-top:2px}
.rp-item .compra-item .dinheiro{flex:none}
/* A trilha da loja, para o pedido que ainda não ganhou rastreio. */
.rp .rp-trilha{display:grid;gap:2px;margin:6px 0}
.rp .rp-trilha .etapa{display:flex;gap:14px;align-items:flex-start;padding:10px 0}
.rp .rp-trilha .bolinha{width:13px;height:13px;border-radius:50%;background:var(--line2);flex:none;margin-top:5px;position:relative}
.rp .rp-trilha .bolinha::after{content:"";position:absolute;left:6px;top:14px;width:1px;height:22px;background:var(--line)}
.rp .rp-trilha .etapa:last-child .bolinha::after{display:none}
.rp .rp-trilha b{display:block;font-size:.92rem;color:var(--muted)}
.rp .rp-trilha .passou .bolinha{background:#16a34a}
.rp .rp-trilha .passou b{color:var(--text)}
.rp .rp-trilha .agora .bolinha{background:var(--gold);box-shadow:0 0 0 5px rgba(245,185,59,.18)}
.rp .rp-trilha .agora b{color:var(--text);font-weight:700}
/* Em "Minhas Compras": a lista antes do detalhe. */
.rp .rp-lista{display:grid;gap:12px}
.rp .rp-item{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:14px;
  border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.rp .rp-item img{width:64px;height:64px;border-radius:10px;object-fit:cover;background:var(--afundado,#0A1230)}
.rp .rp-item small{display:block;color:var(--muted);font-size:.8rem}
.rp .rp-item .num{font-family:var(--font-h);font-weight:800;font-size:1.05rem;word-break:break-all}
.rp .rp-item .acoes{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
/* Pedido em vários pacotes (13/10/2026): um bloco por envio. */
.rp .rp-envio-cab{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.rp .rp-envio-cab b{font-family:var(--font-h);font-size:1.02rem}
.rp .rp-envio-cab .r-selo{padding:4px 10px;font-size:.76rem}
.rp .rp-envio-transp{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rp .rp-envio-transp small{display:block;color:var(--muted);font-size:.76rem}
.rp .rp-envio-cod{font-family:var(--font-h);letter-spacing:.03em;font-size:.9rem;color:var(--muted);user-select:all}
.rp .rp-envio-itens{margin:8px 0 0;font-size:.86rem;color:var(--muted)}
.rp .rp-envio-itens b{color:var(--text)}
@media (max-width:860px){
  .rp .rp-cab{grid-template-columns:auto 1fr}
  .rp .rp-cab .div{border-left:0;padding-left:0;min-height:0}
  .rp .rp-corpo{grid-template-columns:1fr;border-radius:0 0 16px 16px}
  .rp .aba{max-width:none}
  .rp .rp-garantias{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .rp .rp-cab .foto{width:64px;height:64px}
  .rp .rp-ajuda{width:100%}
  .rp .rp-item{grid-template-columns:auto 1fr}
  .rp .rp-item .acoes{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}
}