:root {
  /* Tema escuro, a pedido do cliente. A loja passa a ser da mesma familia
     do painel administrativo.

     Todos os pares texto/fundo abaixo foram conferidos no contraste AA
     (4.5:1 para texto, 3:1 para borda de campo) e sao verificados a cada
     `npm test` em testes/aparencia.teste.js - inclusive o pior caso do
     fundo animado, que no escuro CLAREIA a pagina e por isso ameaca o
     texto claro, o inverso do que acontecia no tema claro.

     O tema claro nao foi apagado: ele continua logo abaixo, em
     :root[data-tema="claro"]. Para voltar, basta <html data-tema="claro">. */
  --fundo: #0f1115;
  --superficie: #171a21;
  --superficie-alta: #1f232c;
  --borda: #2a2f3a;
  --borda-forte: #3d4452;
  /* Borda de campo e de botao precisa de 3:1 - e ela que marca o limite
     clicavel para quem enxerga pouco. */
  --borda-campo: #737c8d;
  --texto: #e8eaee;
  --texto-fraco: #a3abb8;
  /* Texto solto sobre o fundo animado, sem cartao por baixo. */
  --texto-heroi: #d8dde4;
  --primaria: #6ea4ff;
  /* No escuro o hover CLAREIA: escurecer um azul ja escuro some no fundo. */
  --primaria-escura: #8ab8ff;
  --primaria-clara: #16233a;
  --primaria-borda: #2c456e;
  /* Texto que vai EM CIMA de cor forte. Aqui inverte: azul e verde claros
     pedem texto quase preto. Branco sobre #6ea4ff daria 2,4:1 - ilegivel. */
  --sobre-cor: #0b0d11;
  --ok: #5ddc9a;
  --ok-fundo: #102a1e;
  --ok-borda: #1f5338;
  --ok-borda-forte: #2a6b48;
  --alerta: #f0b429;
  --alerta-fundo: #2b2110;
  --erro: #f98080;
  --erro-fundo: #2d1517;
  --erro-borda: #5e2a2c;
  /* Cabecalho em vidro fosco: precisa ser a superficie do tema, nao
     branco fixo - com branco fixo o cabecalho fica claro no tema escuro e
     o nome da loja some. */
  --superficie-vidro: rgba(23, 26, 33, .92);
  /* O botao flutuante mantem o verde da marca do WhatsApp (#25d366), que
     e claro demais para icone branco: 1,98:1. O icone fica escuro nos dois
     temas. */
  /* Branco nos DOIS temas: ver o comentario de .qrcode. */
  --qr-fundo: #ffffff;
  --sobre-flutuante: #0b0d11;
  --sombra-flutuante: 0 6px 20px rgba(0, 0, 0, .4);
  --sobre-cor-fraco: rgba(11, 13, 17, .78);
  /* Cor da rede de pontos do fundo das paginas de texto. Azul da marca:
     o roxo neon do site de referencia e hoje assinatura de loja pirata. */
  --particula: #6ea4ff;
  --veu-texto: radial-gradient(ellipse 66% 72% at 50% 50%, rgba(15, 17, 21, .62) 30%, rgba(15, 17, 21, 0) 78%);
  /* Loja: o heroi ocupa o topo central, entao a galaxia so aparece da
     metade da tela para baixo e para a direita. */
  --recorte-galaxia: radial-gradient(ellipse 85% 85% at 50% 50%, #000 55%, rgba(0, 0, 0, .55) 100%);
  --whatsapp: #3ddc84;
  --whatsapp-escuro: #34c576;
  --whatsapp-flutuante: #25d366;
  --raio: 12px;
  /* Sombra preta nao aparece sobre fundo preto: no escuro quem separa as
     camadas e a borda, e a sombra so aprofunda. */
  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3);
  --sombra-alta: 0 6px 18px rgba(0, 0, 0, .45);
}

/* Tema claro - o que a loja usava antes. Continua inteiro e testado: para
   voltar a ele basta <html data-tema="claro">. */
:root[data-tema="claro"] {
  --fundo: #f5f7fa;
  --superficie: #ffffff;
  --superficie-alta: #f3f5f8;
  --borda: #dfe3ea;
  --borda-forte: #c3cbd8;
  /* Um tom mais escuro que o original (#8a94a6): aquele passava sobre o
     branco do cartao (3,06:1) mas nao sobre o cinza da pagina (2,85:1), e
     a busca do cabecalho fica justamente sobre a pagina. */
  --borda-campo: #848e9f;
  --texto: #111827;
  --texto-fraco: #5b6676;
  --texto-heroi: #374151;
  --primaria: #1d4ed8;
  --primaria-escura: #1740b0;
  --primaria-clara: #eff4ff;
  --primaria-borda: #c7d7fe;
  --sobre-cor: #ffffff;
  --ok: #15803d;
  --ok-fundo: #ecfdf3;
  --ok-borda: #bbf7d0;
  --ok-borda-forte: #86efac;
  --alerta: #b45309;
  --alerta-fundo: #fffbeb;
  --erro: #b91c1c;
  --erro-fundo: #fef2f2;
  --erro-borda: #fecaca;
  --superficie-vidro: rgba(255, 255, 255, .92);
  /* O botao flutuante mantem o verde da marca do WhatsApp (#25d366), que
     e claro demais para icone branco: 1,98:1. O icone fica escuro nos dois
     temas. */
  /* Branco nos DOIS temas: ver o comentario de .qrcode. */
  --qr-fundo: #ffffff;
  --sobre-flutuante: #0b0d11;
  --sombra-flutuante: 0 6px 20px rgba(0, 0, 0, .4);
  --sobre-cor-fraco: rgba(255, 255, 255, .88);
  --particula: #1d4ed8;
  --veu-texto: radial-gradient(ellipse 66% 72% at 50% 50%, rgba(245, 247, 250, .62) 30%, rgba(245, 247, 250, 0) 78%);
  --recorte-galaxia: radial-gradient(ellipse 85% 85% at 50% 50%, #000 55%, rgba(0, 0, 0, .55) 100%);
  --whatsapp: #0f7a52;
  --whatsapp-escuro: #0c6544;
  --whatsapp-flutuante: #25d366;
  --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);
  --sombra-alta: 0 4px 12px rgba(16, 24, 40, .08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.oculto { display: none !important; }

/* ------------------------------------------------------------- cabecalho */
header.topo {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  background: var(--superficie-vidro);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borda);
}

.marca {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.4px;
  margin: 0;
  cursor: pointer;
}
/* A marca virou link, entao precisa recusar a cor e o sublinhado de link.
   O <span> interno continua herdando o azul da marca logo abaixo. */
.marca a {
  color: inherit;
  text-decoration: none;
  display: inline-block;
}
.marca a:focus-visible {
  outline: 2px solid var(--primaria);
  outline-offset: 4px;
  border-radius: 4px;
}

.marca span { color: var(--primaria); }

.topo .acoes { margin-left: auto; display: flex; gap: 10px; align-items: center; }

/* ----------------------------------------------------------------- herói */
/* Veu escuro atras do texto solto.
   A galaxia agora passa por tras do heroi, e o miolo dela e claro. Em vez
   de recortar o fundo - que apagaria a galaxia justamente no meio, onde
   ela tem de aparecer - escurece-se so o retangulo onde ha texto. O veu e
   radial e morre antes da borda, entao nao se enxerga como uma mancha.
   A conta do contraste esta em testes/aparencia.teste.js. */
.heroi {
  position: relative;
  padding: 56px 24px 32px;
  text-align: center;
  max-width: 660px;
  margin: 0 auto;
}

.heroi::before {
  content: '';
  position: absolute;
  /* estourando as bordas do bloco para o veu terminar fora do texto */
  inset: -30px -60px;
  z-index: -1;
  background: var(--veu-texto);
  pointer-events: none;
}
.heroi h2 { font-size: clamp(26px, 4vw, 38px); margin: 0 0 10px; letter-spacing: -0.8px; }
.heroi p { color: var(--texto-heroi); margin: 0; font-size: 17px; }

.selos {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 22px;
  color: var(--texto-fraco);
  font-size: 13px;
}
.selo {
  background: var(--superficie);
  border: 1px solid var(--borda);
  padding: 6px 13px;
  border-radius: 99px;
}

/* --------------------------------------------------------------- catálogo */
main { max-width: 1060px; margin: 0 auto; padding: 8px 24px 80px; }

/* So o catalogo fica largo. As telas de carrinho, pagamento e consulta
   continuam estreitas de proposito: formulario largo e mais dificil de ler. */
#tela-catalogo main { max-width: 1240px; }

/* Cartao menor e mais estreito do que antes.
   Com 210px cabem 5 colunas num monitor comum e 4 num notebook - antes
   eram 3 cartoes largos, e a primeira tela mostrava 3 produtos. Loja de
   catalogo precisa PARECER cheia: o numero de itens acima da dobra e o que
   passa a ideia de sortimento. */
.grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.produto {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.produto:hover { border-color: var(--borda-forte); box-shadow: var(--sombra-alta); transform: translateY(-2px); }

.corpo-produto {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 14px 14px 16px;
}

.produto .fabricante {
  font-size: 11px;
  color: var(--texto-fraco);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* Nome em DUAS linhas, nunca uma.
   Cortar em uma linha some com a parte que diferencia os produtos
   ("...Pro", "...2024", "...5 PCs") e o comprador nao sabe o que esta
   levando. Com duas linhas o reticencia cai depois do que importa. */
.produto h3 {
  margin: 5px 0 10px;
  font-size: 15px;
  line-height: 1.32;
  min-height: calc(2 * 1.32em);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.preco {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.5px;
  /* empurra preco e botoes para a base: cartoes de nome curto e longo
     terminam alinhados */
  margin-top: auto;
}
.preco small { display: block; font-size: 12px; color: var(--texto-fraco); font-weight: 400; letter-spacing: 0; }

.acoes-produto {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-top: 12px;
}
.acoes-produto .btn-primario { flex: 1; padding: 9px 10px; }

/* "+" adiciona sem tirar a pessoa da listagem. Quadrado, para nao competir
   com o botao principal. */
.btn-add {
  width: 38px;
  flex: 0 0 38px;
  background: var(--superficie);
  border: 1px solid var(--borda-campo);
  color: var(--texto);
  font-size: 18px;
  line-height: 1;
}
.btn-add:hover { border-color: var(--primaria); color: var(--primaria); }
.btn-add.feito { border-color: var(--ok); color: var(--ok); }

/* ----------------------------------------------------------------- botões */
button {
  font: inherit;
  cursor: pointer;
  border-radius: 9px;
  border: none;
}

.btn-primario {
  background: var(--primaria);
  color: var(--sobre-cor);
  padding: 10px 18px;
  font-weight: 500;
}
.btn-primario:hover { background: var(--primaria-escura); }
.btn-primario:disabled { background: var(--superficie-alta); color: var(--texto-fraco); cursor: default; }

.btn-secundario {
  background: var(--superficie);
  border: 1px solid var(--borda-campo);
  color: var(--texto);
  padding: 8px 15px;
  font-size: 14px;
}
.btn-secundario:hover { border-color: var(--primaria); }

.btn-texto {
  background: none;
  color: var(--texto-fraco);
  padding: 8px 10px;
  font-size: 14px;
}
.btn-texto:hover { color: var(--texto); }

/* --------------------------------------------------------------- carrinho */
.contador {
  background: var(--primaria);
  color: var(--sobre-cor);
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
  padding: 1px 7px;
  margin-left: 6px;
}

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 26px;
  max-width: 560px;
  margin: 24px auto;
}

.cartao h2 { margin: 0 0 18px; font-size: 20px; }

.item-carrinho {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--borda);
}
.item-carrinho:last-of-type { border-bottom: none; }
.item-carrinho .nome { flex: 1; font-size: 15px; }
.item-carrinho .qtd { color: var(--texto-fraco); font-size: 14px; }

.total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 18px;
  margin-top: 6px;
  border-top: 1px solid var(--borda);
  font-size: 19px;
  font-weight: 700;
}

/* --------------------------------------------------------------- formulário */
label { display: block; font-size: 13px; color: var(--texto-fraco); margin: 16px 0 6px; }

input, textarea, select {
  width: 100%;
  background: var(--superficie);
  border: 1px solid var(--borda-campo);
  color: var(--texto);
  padding: 11px 13px;
  border-radius: 9px;
  font: inherit;
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--primaria);
  outline-offset: 1px;
  border-color: var(--primaria);
}

/* ------------------------------------------------------------------- pix */
.copia-cola {
  background: var(--superficie-alta);
  border: 1px solid var(--borda);
  border-radius: 9px;
  padding: 14px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  word-break: break-all;
  color: var(--texto-fraco);
  margin: 12px 0;
}

.licenca {
  background: var(--ok-fundo);
  border: 1px solid var(--ok-borda-forte);
  border-radius: 9px;
  padding: 15px;
  margin: 12px 0;
}
.licenca .produto-nome { font-size: 13px; color: var(--texto-fraco); margin-bottom: 6px; }
.licenca code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
  word-break: break-all;
}

/* ---------------------------------------------------------------- avisos */
.etiqueta {
  display: inline-block;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 99px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.etiqueta.esgotado { background: var(--erro-fundo); color: var(--erro); }
.etiqueta.aguardando_pagamento { background: var(--alerta-fundo); color: var(--alerta); }
.etiqueta.entregue, .etiqueta.pago { background: var(--ok-fundo); color: var(--ok); }
.etiqueta.expirado, .etiqueta.cancelado { background: var(--erro-fundo); color: var(--erro); }

.aviso { padding: 12px 15px; border-radius: 9px; font-size: 14px; margin-top: 16px; }
.aviso.erro { background: var(--erro-fundo); color: var(--erro); border: 1px solid var(--erro-borda); }
.aviso.ok { background: var(--ok-fundo); color: var(--ok); border: 1px solid var(--ok-borda); }
.aviso.info { background: var(--primaria-clara); color: var(--primaria-escura); border: 1px solid var(--primaria-borda); }

.vazio { text-align: center; color: var(--texto-fraco); padding: 50px 0; }

footer {
  border-top: 1px solid var(--borda);
  padding: 26px 24px;
  text-align: center;
  color: var(--texto-fraco);
  font-size: 13px;
}

@media (max-width: 560px) {
  header.topo { padding: 14px 16px; }
  main { padding: 8px 16px 60px; }
  .cartao { padding: 20px; }

  /* Duas colunas no celular, nao uma.
     Cartao de largura inteira empilhado vira rolagem infinita num catalogo
     - a pessoa percorre a loja sem nunca ver o sortimento. Com 150px de
     minimo cabem dois lado a lado ate em tela de 360px. */
  .grade { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .corpo-produto { padding: 11px 11px 13px; }
  .produto h3 { font-size: 14px; }
  .preco { font-size: 19px; }

  /* Num cartao estreito os dois botoes lado a lado espremem o "Comprar"
     a ponto de cortar a palavra: o "+" sai e sobra o botao principal. */
  .acoes-produto .btn-add { display: none; }
}

/* -------------------------------------------- passagem para o WhatsApp */
/* Verde #0F7A52 em vez do #25D366 da marca: branco sobre o verde oficial da
   WhatsApp da 1,98:1, ilegivel. Este da 5,35:1 e continua lendo como
   WhatsApp. O botao flutuante mantem o verde da marca porque e so icone. */
.btn-whatsapp-pedido {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 14px;
  padding: 14px 18px;
  border-radius: var(--raio);
  background: var(--whatsapp);
  color: var(--sobre-cor);
  text-decoration: none;
  box-shadow: var(--sombra);
}

.btn-whatsapp-pedido:hover { background: var(--whatsapp-escuro); }

.btn-whatsapp-pedido:focus-visible {
  outline: 3px solid var(--primaria);
  outline-offset: 2px;
}

.btn-whatsapp-pedido .icone { font-size: 22px; line-height: 1; }

.btn-whatsapp-pedido strong {
  display: block;
  font-size: 15px;
}

.btn-whatsapp-pedido small {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  /* Levemente apagado para nao brigar com o titulo do botao, sem perder
     contraste. Segue o tema: sobre verde claro o texto e escuro. */
  color: var(--sobre-cor-fraco);
}

/* ------------------------------------------------------------- cronometro */
/* Validade do QR Code. Fica acima do codigo porque e informacao que muda a
   decisao de quem olha: com 1 minuto na tela o comprador abre o app do banco
   agora em vez de ler o resto da pagina. */
.cronometro {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 16px 0 2px;
  padding: 10px 14px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie-alta);
  text-align: center;
}

.cronometro-tempo {
  font-size: 24px;
  font-weight: 700;
  color: var(--texto);
  /* Digito de largura fixa: sem isso o texto ao lado dança a cada segundo. */
  font-variant-numeric: tabular-nums;
  letter-spacing: .5px;
}

.cronometro-rotulo {
  font-size: 13px;
  color: var(--texto-fraco);
}

/* Ultimos 2 minutos: ambar, nao vermelho. Vermelho aqui leria como erro ja
   acontecido, e o pagamento ainda esta perfeitamente no prazo. */
.cronometro.urgente {
  border-color: var(--alerta);
  background: var(--alerta-fundo);
}

.cronometro.urgente .cronometro-tempo,
.cronometro.urgente .cronometro-rotulo {
  color: var(--alerta);
}

.cronometro.expirado {
  border-color: var(--borda);
  background: var(--superficie-alta);
}

.cronometro.expirado .cronometro-tempo {
  font-size: 15px;
  color: var(--texto-fraco);
}

/* Em tela estreita o rotulo cai para baixo do numero; centralizar os dois. */
@media (max-width: 420px) {
  .cronometro { flex-direction: column; gap: 2px; }
}

/* ---------------------------------------------------------------- QR Code */
/* Fundo branco e inegociavel, e por isso NAO segue o tema.
   Leitor de QR espera modulo escuro sobre fundo claro; com a superficie do
   tema escuro por baixo, a camera simplesmente nao le o codigo e o
   comprador nao consegue pagar. O branco aqui e requisito funcional, nao
   escolha de cor - igual ao que os apps de banco fazem no modo noturno. */
.qrcode {
  background: var(--qr-fundo);
  border-radius: 12px;
  padding: 14px;
  margin: 18px auto 6px;
  width: fit-content;
  line-height: 0;
}

.qrcode svg {
  display: block;
  width: 216px;
  height: 216px;
  /* QR e grafico de blocos: suavizar borraria os modulos e atrapalha a leitura */
  image-rendering: pixelated;
  shape-rendering: crispEdges;
}

.dica-qr {
  text-align: center;
  color: var(--texto-fraco);
  font-size: 13px;
  margin: 0 0 20px;
}

@media (max-width: 420px) {
  .qrcode svg { width: 180px; height: 180px; }
}

.dica-copia-cola {
  color: var(--alerta);
  font-size: 13px;
  margin: 6px 0 0;
  line-height: 1.45;
}

/* ------------------------------------------------------ foto do produto */
/* Desenhada mesmo sem foto cadastrada: mantem todos os cartoes da mesma
   altura. Sem isso a grade vira escada enquanto o cliente nao sobe as artes. */
.foto-produto {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  background: var(--superficie-alta);
  border-bottom: 1px solid var(--borda);
  overflow: hidden;
}
.foto-produto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.foto-produto .sem-foto {
  font-size: 28px;
  opacity: .22;
}

/* Aviso de responsabilidade sobre o endereço de entrega da licença.
   Fica mais presente que uma dica comum, sem o peso visual de um erro. */
.aviso-responsabilidade {
  color: var(--texto-fraco);
  font-size: 13px;
  line-height: 1.55;
  margin: 12px 0 0;
  padding: 11px 13px;
  border-left: 2px solid var(--borda);
  background: var(--superficie-alta);
  border-radius: 0 8px 8px 0;
}

/* ------------------------------------------- carrinho: quantidade e estoque */
.item-carrinho .ultimas {
  font-size: 12px;
  color: var(--alerta);
  margin-top: 3px;
}

.controle-qtd {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--superficie);
  border: 1px solid var(--borda-campo);
  border-radius: 8px;
  padding: 2px;
}

.btn-qtd {
  background: none;
  color: var(--texto);
  width: 28px;
  height: 28px;
  font-size: 16px;
  line-height: 1;
  border-radius: 6px;
}
.btn-qtd:hover:not(:disabled) { background: var(--superficie-alta); }
.btn-qtd:disabled { color: var(--borda); cursor: default; }

.qtd-numero {
  min-width: 26px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 15px;
}

.item-carrinho .subtotal {
  min-width: 86px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.aviso-poucas {
  font-size: 12px;
  color: var(--alerta);
  margin: 0 0 8px;
  font-weight: 500;
}

/* ======================================== busca, categorias e página do produto */
.barra-catalogo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 8px 0 4px;
}

.campo-busca input {
  width: 100%;
  padding: 13px 16px;
  font-size: 15px;
  border-radius: 10px;
}
.campo-busca input::placeholder { color: var(--texto-fraco); }

.categorias {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chip {
  background: var(--superficie);
  border: 1px solid var(--borda);
  box-shadow: var(--sombra);
  color: var(--texto-fraco);
  padding: 7px 15px;
  border-radius: 99px;
  font-size: 14px;
  cursor: pointer;
}
.chip:hover { color: var(--texto); border-color: var(--borda-campo); }
.chip.ativo {
  background: var(--primaria);
  border-color: var(--primaria);
  color: var(--sobre-cor);
  font-weight: 500;
}
.chip .contagem { opacity: .7; font-size: 12px; margin-left: 5px; }

.resultado-busca {
  color: var(--texto-fraco);
  font-size: 14px;
  margin: 18px 0 -8px;
}

/* ------------------------------------------------------- página do produto */
.produto-detalhe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  margin-top: 10px;
}

.produto-detalhe .foto {
  background: var(--superficie-alta);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.produto-detalhe .foto img { width: 100%; height: 100%; object-fit: cover; }
.produto-detalhe .foto .sem-foto { color: var(--texto-fraco); font-size: 14px; }

.produto-detalhe h2 {
  font-size: 28px;
  letter-spacing: -0.8px;
  margin: 4px 0 10px;
  line-height: 1.2;
}

.produto-detalhe .preco-grande {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -1px;
  margin: 18px 0 2px;
}

.produto-detalhe .descricao-longa {
  color: var(--texto-fraco);
  margin: 14px 0 0;
  line-height: 1.65;
}

.ficha {
  margin: 22px 0 0;
  border-top: 1px solid var(--borda);
}
.ficha div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--borda);
  font-size: 14px;
}
.ficha .rotulo { color: var(--texto-fraco); }

.lista-garantias {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: grid;
  gap: 10px;
}
.lista-garantias li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--texto-fraco);
}
.lista-garantias strong { color: var(--texto); font-weight: 600; }

@media (max-width: 760px) {
  .produto-detalhe { grid-template-columns: 1fr; gap: 20px; }
  .produto-detalhe h2 { font-size: 23px; }
  .produto-detalhe .preco-grande { font-size: 28px; }
}

.link-produto {
  color: inherit;
  text-decoration: none;
}
.link-produto:hover { color: var(--primaria); }

/* ============================================ faixa de garantias (confiança) */
.faixa-garantias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  max-width: 1060px;
  margin: 34px auto 0;
  padding: 0 24px;
}

/* O cartao em si nao tem aparencia: ele e so o palco 3D. Quem desenha o
   retangulo sao as duas faces. */
.garantia {
  perspective: 1000px;
  /* grid para o miolo esticar ate a altura do cartao mais alto da faixa:
     sem isso os tres cartoes ficam em escada, cada um com a altura do
     proprio verso. */
  display: grid;
}

/* As duas faces vivem na MESMA celula de grid.
   E isso que faz o cartao ter a altura do maior dos dois lados sem altura
   fixa no CSS - com position:absolute seria preciso chutar um valor, e o
   verso cortaria em outro idioma, outra fonte ou outro tamanho de tela. */
.garantia-interna {
  display: grid;
  transform-style: preserve-3d;
  transition: transform .65s cubic-bezier(.2, .7, .2, 1);
}
.garantia.virada .garantia-interna { transform: rotateY(180deg); }

.garantia-face {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 15px 16px;
  /* Sem isto o lado de tras aparece espelhado por cima do da frente. */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* A altura do cartao e a do maior dos dois lados, entao a frente sempre
   sobra espaco embaixo. Esse espaco vira a dica de que o cartao gira -
   sem ela, o verso existe e ninguem descobre. */
.garantia-face.frente { align-items: stretch; }
.garantia-face.frente .icone { align-self: flex-start; }

.garantia-face.verso {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  transform: rotateY(180deg);
}

.garantia .icone { font-size: 19px; line-height: 1.3; }
.garantia strong { display: block; font-size: 14px; margin-bottom: 3px; }
.garantia span { color: var(--texto-fraco); font-size: 13px; line-height: 1.45; }
.garantia-texto {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-right: 18px;
}

.garantia-dica {
  margin-top: auto;
  padding-top: 12px;
  color: var(--primaria);
  font-size: 12px;
  font-weight: 600;
}
/* O azul do token ja e o do link; aqui so se confirma que o elemento
   herda a cor certa mesmo dentro da regra generica de .garantia span. */
.garantia .garantia-dica { color: var(--primaria); }

.garantia-lista {
  margin: 0;
  padding-left: 16px;
  color: var(--texto-fraco);
  font-size: 12.5px;
  line-height: 1.5;
}
.garantia-lista li { margin-bottom: 5px; }
.garantia-lista code {
  /* O codigo do pedido nao pode quebrar no meio: partido em duas linhas
     ele deixa de parecer um codigo. */
  white-space: nowrap;
  font-size: 11.5px;
  background: var(--superficie-alta);
  padding: 1px 4px;
  border-radius: 4px;
}

.garantia-rodape {
  display: block;
  font-size: 11.5px;
  color: var(--texto-fraco);
  border-top: 1px solid var(--borda);
  padding-top: 8px;
  margin-top: auto;
}

/* Acao do verso: e aqui que o cartao deixa de ser enfeite e vira atalho. */
.btn-garantia {
  display: inline-block;
  margin-top: auto;
  align-self: flex-start;
  background: var(--primaria);
  color: var(--sobre-cor);
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn-garantia:hover { background: var(--primaria-escura); }

/* O botao de girar e o controle acessivel do cartao: com so :hover, quem
   navega por teclado ou compra pelo celular nunca chega ao verso. */
.btn-virar {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: var(--superficie-alta);
  color: var(--texto-fraco);
  border: 1px solid var(--borda);
  border-radius: 50%;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.btn-virar:hover { color: var(--texto); border-color: var(--borda-forte); }
.btn-virar:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; }

/* Girar um cartao na tela e gatilho de enjoo para quem tem sensibilidade
   vestibular. Quem pediu menos movimento troca o lado sem rodar nada. */
@media (prefers-reduced-motion: reduce) {
  .garantia-interna { transition: none; }
  .garantia.virada .garantia-interna { transform: none; }
  .garantia-face { backface-visibility: visible; }
  .garantia-face.verso { transform: none; visibility: hidden; }
  .garantia.virada .garantia-face.frente { visibility: hidden; }
  .garantia.virada .garantia-face.verso { visibility: visible; }
}

/* ============================================================ rodapé */
footer {
  border-top: 1px solid var(--borda);
  background: var(--superficie);
  padding: 40px 24px 0;
  margin-top: 60px;
  color: var(--texto-fraco);
  font-size: 14px;
  text-align: left;
}

.rodape-conteudo {
  max-width: 1060px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 32px;
}

.rodape-bloco h4 {
  color: var(--texto);
  font-size: 14px;
  margin: 0 0 12px;
  font-weight: 600;
}
.rodape-bloco p { margin: 10px 0 0; line-height: 1.6; font-size: 13px; }

.rodape-bloco ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 9px;
  font-size: 13px;
  line-height: 1.5;
}
.rodape-bloco a { color: var(--texto-fraco); text-decoration: none; }
.rodape-bloco a:hover { color: var(--primaria); }

.rodape-bloco .rotulo-item {
  color: var(--texto);
  font-weight: 500;
}

.rodape-base {
  max-width: 1060px;
  margin: 34px auto 0;
  padding: 18px 0 26px;
  border-top: 1px solid var(--borda);
  font-size: 12px;
  text-align: center;
}

/* ========================================================= WhatsApp */
#botao-whatsapp {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 40;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--whatsapp-flutuante);
  color: var(--sobre-flutuante);
  display: grid;
  place-items: center;
  box-shadow: var(--sombra-flutuante);
  transition: transform .15s;
}
#botao-whatsapp:hover { transform: scale(1.06); }

@media (max-width: 560px) {
  .faixa-garantias { padding: 0 16px; margin-top: 26px; }
  footer { padding: 32px 16px 0; }
  #botao-whatsapp { right: 14px; bottom: 14px; }
}

/* ===================================================== barra superior */
.barra-topo {
  background: var(--primaria);
  color: var(--sobre-cor);
  font-size: 13px;
}
.barra-topo-conteudo {
  max-width: 1060px;
  margin: 0 auto;
  padding: 9px 24px;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.barra-topo .promessa { font-weight: 500; }
.barra-topo a { color: var(--sobre-cor); text-decoration: none; font-weight: 600; }
.barra-topo a:hover { text-decoration: underline; }

/* ================================================= área do cliente */
.texto-apoio {
  color: var(--texto-fraco);
  font-size: 14px;
  margin: -8px 0 4px;
  line-height: 1.6;
}

.compra {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 20px 22px;
  margin-bottom: 16px;
}

.compra-cabecalho {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--borda);
}
.compra-cabecalho .codigo {
  font-family: ui-monospace, Menlo, monospace;
  font-weight: 700;
  font-size: 15px;
}
.compra-cabecalho .quando { color: var(--texto-fraco); font-size: 13px; }

.licenca-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--borda);
  flex-wrap: wrap;
}
.licenca-item:last-child { border-bottom: none; }
.licenca-item .produto-nome { font-size: 13px; color: var(--texto-fraco); margin-bottom: 4px; }
.licenca-item code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .4px;
  word-break: break-all;
}

.cabecalho-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.cabecalho-area .quem { color: var(--texto-fraco); font-size: 14px; }

@media (max-width: 560px) {
  .barra-topo-conteudo { padding: 8px 16px; font-size: 12px; justify-content: center; text-align: center; }
}

/* ============================================== escolha de forma de entrega */
.escolha-entrega {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 16px 18px 6px;
  margin: 22px 0 0;
}

.escolha-entrega legend {
  font-size: 13px;
  color: var(--texto-fraco);
  padding: 0 6px;
}

.opcao-entrega {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 11px 0;
  margin: 0;
  cursor: pointer;
  border-bottom: 1px solid var(--borda);
}
.opcao-entrega:last-child { border-bottom: none; }

.opcao-entrega input[type="radio"] {
  width: auto;
  margin: 3px 0 0;
  accent-color: var(--primaria);
  flex: 0 0 auto;
}

.opcao-entrega strong { display: block; font-size: 15px; font-weight: 600; }
.opcao-entrega small {
  display: block;
  color: var(--texto-fraco);
  font-size: 13px;
  line-height: 1.5;
  margin-top: 3px;
}
.opcao-entrega b { color: var(--texto); }

.opcao-entrega.indisponivel { opacity: .5; cursor: not-allowed; }

/* Aviso de licença retida, na tela de pagamento */
.licenca-retida {
  background: var(--primaria-clara);
  border: 1px solid var(--primaria-borda);
  border-radius: var(--raio);
  padding: 18px 20px;
  margin: 14px 0;
  text-align: center;
}
.licenca-retida .icone { font-size: 28px; display: block; margin-bottom: 8px; }
.licenca-retida strong { display: block; margin-bottom: 6px; }
.licenca-retida span { color: var(--texto-fraco); font-size: 14px; line-height: 1.6; }

/* ============================================ entrega por atendimento humano
   Produto cuja licenca nao sai do estoque: quem entrega e o atendente, pelo
   WhatsApp. O comprador precisa saber disso ANTES de pagar (selo no card e
   na ficha do produto) e precisa de um caminho obvio DEPOIS de pagar - um
   "pagamento confirmado" sem chave na tela e sem instrucao parece golpe. */
.selo-entrega {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  /* Verde escuro, nao o verde da marca do WhatsApp: #25d366 sobre branco da
     1,98:1 e some para quem enxerga pouco. Este da 5,35:1. */
  color: var(--whatsapp);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
}

.entrega-manual {
  background: var(--ok-fundo);
  border: 1px solid var(--ok-borda);
  border-radius: var(--raio);
  padding: 18px 20px;
  margin: 14px 0;
  text-align: center;
}
.entrega-manual .icone { font-size: 28px; display: block; margin-bottom: 8px; }
.entrega-manual strong { display: block; margin-bottom: 6px; }
.entrega-manual span { color: var(--texto-fraco); font-size: 14px; line-height: 1.6; }

/* ==================================================== pagina de documento
   Termos de uso e afins: texto longo, fundo de rede de pontos atras. */
#fundo-galaxia {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  /* O canvas nao recebe clique: ele e desenho, nao interface. */
  pointer-events: none;
  /* A galaxia vive no lado direito; aqui o lado esquerdo e apagado.
     Nao e so estetica: o titulo e a data ficam soltos sobre o fundo, sem
     cartao por baixo, e uma estrela exatamente atras de uma letra derruba
     o contraste daquele trecho. O corpo do documento mora em cartoes
     opacos e nao corre esse risco. */
  /* O recorte muda por pagina porque o texto solto muda de lugar.
     Nao e estetica: titulo e subtitulo ficam sobre o fundo, sem cartao por
     baixo, e uma estrela atras de uma letra derruba o contraste daquele
     trecho. O resto do conteudo mora em cartao opaco e nao corre risco. */
  -webkit-mask-image: var(--recorte-galaxia);
  mask-image: var(--recorte-galaxia);
}

/* Pagina de texto: a coluna de leitura ocupa o meio, entao a galaxia
   vive a direita e o recorte apaga o lado esquerdo. */
.pagina-texto {
  --recorte-galaxia: radial-gradient(ellipse 85% 85% at 50% 50%, #000 55%, rgba(0, 0, 0, .55) 100%);
}


.documento {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

/* Mesmo veu do heroi: titulo e data ficam soltos sobre a galaxia. */
.documento > h2,
.documento > .atualizado {
  position: relative;
}

.documento > h2::before {
  content: '';
  position: absolute;
  inset: -24px -40px -60px;
  z-index: -1;
  background: var(--veu-texto);
  pointer-events: none;
}

.documento h2 {
  font-size: clamp(26px, 4vw, 34px);
  letter-spacing: -0.6px;
  margin: 0 0 6px;
}

.documento .atualizado {
  color: var(--texto-fraco);
  font-size: 13px;
  margin: 0 0 24px;
}

/* O resumo responde "o que isto quer de mim" antes do texto longo: quase
   ninguem le termos inteiros, e quem le comeca por aqui. */
.documento .resumo {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--primaria);
  border-radius: var(--raio);
  padding: 16px 18px;
  margin: 0 0 32px;
  color: var(--texto);
}

.documento section {
  /* O cabecalho e fixo: sem esta folga, pular para /termos#cookies deixa o
     titulo da secao escondido atras dele. */
  scroll-margin-top: 90px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 20px 22px;
  margin-bottom: 14px;
}

.documento h3 {
  font-size: 16px;
  margin: 0 0 10px;
}

.documento p,
.documento li {
  color: var(--texto-fraco);
  font-size: 14.5px;
  line-height: 1.7;
}

.documento p { margin: 0 0 12px; }
.documento p:last-child { margin-bottom: 0; }
.documento strong { color: var(--texto); }

.documento ul {
  margin: 0 0 12px;
  padding-left: 20px;
}
.documento li { margin-bottom: 8px; }

.documento a { color: var(--primaria); }

.voltar-loja {
  margin-top: 28px;
  text-align: center;
}
.voltar-loja a {
  color: var(--primaria);
  text-decoration: none;
  font-weight: 600;
}

@media (max-width: 820px) {
  #fundo-galaxia {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 62%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 62%);
  }
}

@media (max-width: 560px) {
  .documento { padding: 28px 16px 60px; }
  .documento section { padding: 16px 16px; }
}

/* O aceite fica junto do botao que finaliza a compra: e o momento em que
   ele passa a valer, e e onde a lei espera encontra-lo. */
.aceite-termos {
  margin: 16px 0 0;
  font-size: 12.5px;
  color: var(--texto-fraco);
  text-align: center;
}
.aceite-termos a { color: var(--primaria); }

/* ===================================================== aviso de cookies
   Faixa informativa, nao um portao.
   A loja usa so cookie essencial (login e carrinho), que dispensa
   autorizacao previa - entao o aviso nao bloqueia a tela nem fica no
   caminho de quem quer comprar. Se um dia entrar rastreador, isto aqui
   precisa virar uma escolha de verdade, com recusa que desliga de fato. */
.aviso-cookies {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 760px;
  margin: 0 auto;
  padding: 14px 18px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-alta);
}

.aviso-cookies p {
  flex: 1;
  min-width: 240px;
  margin: 0;
  color: var(--texto-fraco);
  font-size: 13px;
  line-height: 1.5;
}

.aviso-cookies a { color: var(--primaria); }

.aviso-cookies .btn-primario {
  flex-shrink: 0;
  padding: 9px 20px;
  font-size: 14px;
}

@media (max-width: 560px) {
  /* No celular o botao flutuante do WhatsApp fica no canto de baixo:
     a faixa sobe para nao cobrir um o outro. */
  .aviso-cookies {
    bottom: 80px;
    left: 12px;
    right: 12px;
    padding: 13px 15px;
  }
  .aviso-cookies .btn-primario { width: 100%; }
}