/**
 * A área do cliente — `conta.redkeys.com.br`.
 *
 * ⚠️ A PALETA É A MESMA DO PAINEL, de propósito (ver docs/10-o-visual.md).
 *    São dois públicos diferentes — dono e cliente — mas uma marca só. Se as
 *    cores divergirem, a área do cliente passa a parecer de outra empresa, que
 *    é exatamente a desconfiança que não se pode ter numa página onde a pessoa
 *    vai baixar um instalador.
 *
 * ⛔ **Vermelho só no que a pessoa FAZ**: o botão principal, o campo em foco, o
 *    selo da marca. Estado de licença tem paleta própria — verde, âmbar,
 *    vermelho-erro —, e misturar as duas faz o olho parar de distinguir
 *    "clique aqui" de "algo está errado".
 */

:root {
  color-scheme: dark;

  --fundo:      #0b0d11;
  --superficie: #14171d;
  --elevada:    #1a1e26;
  --borda:      #242a33;
  --borda-forte:#323945;

  --texto:   #e9ebef;
  --apagado: #98a0ad;
  --fraco:   #6b7280;

  --marca:      #e0294a;
  --marca-forte:#f43f5e;
  --marca-fraca:rgba(224, 41, 74, .14);

  --bom:   #3ecf8e;
  --morno: #f5b544;
  --ruim:  #f2666f;

  --raio:   10px;
  --raio-g: 14px;

  --e1: 4px;  --e2: 8px;  --e3: 12px;
  --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px;
}

* { box-sizing: border-box; }

/**
 * ⛔ SEM ESTA LINHA, `hidden` NÃO ESCONDE — e foi um defeito de verdade.
 *
 * O `[hidden]` do HTML é `display: none` na folha do NAVEGADOR, que é a de
 * menor prioridade. Qualquer regra nossa com `display` ganha dela. A portaria
 * tem `.porta { display: grid }`, então `mostrar('galeria')` marcava
 * `hidden = true` e ela continuava na tela: a pessoa entrava, a galeria
 * montava logo abaixo, e a portaria seguia ali em cima pedindo o código.
 *
 * 📌 Wesley, 12/09/2026: "após fazer o login simplesmente a página não sai
 *    dali e se abre outra coisa em baixo".
 *
 * ⚠️ O `painel.css` já tinha esta guarda, com este mesmo aviso. Ela não foi
 *    copiada para cá — e o defeito voltou inteiro.
 */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
}

.ico { width: 1em; height: 1em; flex: none; }

a { color: inherit; }

/* ── o topo ───────────────────────────────────────────────────────────────── */
.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  padding: var(--e3) var(--e5);
  border-bottom: 1px solid var(--borda);
  background: var(--superficie);
}

.marca {
  display: flex;
  align-items: center;
  gap: var(--e3);
  text-decoration: none;
}

.marca .selo {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--marca-fraca);
  color: var(--marca);
  font-size: 17px;
}

.marca .nome {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2em;
}

.quem {
  display: flex;
  align-items: center;
  gap: var(--e3);
  color: var(--apagado);
  font-size: 13px;
  min-width: 0;
}

.quem span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── botões ───────────────────────────────────────────────────────────────── */
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font: inherit;
  cursor: pointer;
  border-radius: var(--raio);
  border: 1px solid transparent;
  padding: 10px var(--e4);
}

.primario {
  width: 100%;
  margin-top: var(--e4);
  padding: 12px var(--e4);
  background: var(--marca);
  color: #fff;
  font-weight: 600;
}

.primario:hover { background: var(--marca-forte); }
.primario:disabled { opacity: .55; cursor: progress; }

.fantasma {
  background: var(--elevada);
  border-color: var(--borda);
  color: var(--apagado);
}

.fantasma:hover { color: var(--texto); border-color: var(--borda-forte); }
.fantasma.largo { width: 100%; margin-top: var(--e2); }

:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

/* ══ 1 · a portaria ═══════════════════════════════════════════════════════ */
.porta {
  display: grid;
  place-items: center;
  padding: var(--e7) var(--e4);
  min-height: calc(100vh - 56px);
}

.cartao-porta {
  width: 100%;
  max-width: 400px;
  padding: var(--e6);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
}

.cartao-porta h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -.02em;
}

.sub { margin: var(--e2) 0 var(--e5); color: var(--apagado); font-size: 14px; }

label {
  display: block;
  margin-bottom: 6px;
  color: var(--fraco);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

input {
  width: 100%;
  margin-bottom: var(--e4);
  padding: 11px var(--e3);
  background: #100e12;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  color: var(--texto);
  font: inherit;
}

input::placeholder { color: var(--fraco); }
input:focus { border-color: var(--marca); outline: none; }

/* o campo que troca de natureza: CPF ou número do pedido */
.rotulo-com-troca { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e2); }

.troca {
  padding: 0;
  border: 0;
  background: none;
  color: var(--marca);
  font-size: 12px;
}

.troca:hover { color: var(--marca-forte); text-decoration: underline; }

/* ⚠️ O código é o único texto monoespaçado da tela, e com folga entre as
 *    letras: seis dígitos numa fonte proporcional são fáceis de ler errado, e
 *    quem digita está olhando do celular para a tela e de volta. */
.codigo {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 22px;
  letter-spacing: .32em;
  text-align: center;
}

.erro {
  margin: var(--e3) 0 0;
  color: var(--ruim);
  font-size: 13px;
}

/* ══ 2 · a galeria ════════════════════════════════════════════════════════ */
#tela-galeria, #tela-produto {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--e6) var(--e5) var(--e7);
}

.faixa { margin-bottom: var(--e6); }

.faixa h1 {
  margin: 0;
  font-size: 30px;
  font-weight: 650;
  letter-spacing: -.025em;
}

.faixa .sub { margin: 6px 0 0; }

/* ⭐ O nome da categoria é o terceiro nível que o auditory-lab tem, e aqui ele
 *    vive DENTRO da galeria em vez de numa página própria: com dois ou três
 *    produtos, uma página de categoria seria uma tela com um cartão só. */
.categoria {
  margin: var(--e6) 0 var(--e4);
  color: var(--fraco);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.categoria:first-child { margin-top: 0; }

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: var(--e4);
}

.cartao-produto {
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  overflow: hidden;
  text-decoration: none;
  transition: border-color .15s, transform .15s;
}

.cartao-produto:hover { border-color: var(--borda-forte); transform: translateY(-2px); }

/* ⚠️ A capa tem proporção fixa: sem ela, produtos com imagens de tamanhos
 *    diferentes desalinham os títulos, e a grade parece quebrada. */
.capa {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #0d0d0f center/cover no-repeat;
  border-bottom: 1px solid var(--borda);
}

.capa .vazia {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--fraco);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.selo-estado {
  position: absolute;
  top: var(--e3);
  left: var(--e3);
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(11, 13, 17, .82);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
}

.selo-estado.viva     { color: var(--bom); }
.selo-estado.a-vencer { color: var(--morno); }
.selo-estado.morta    { color: var(--ruim); }

.corpo-cartao { padding: var(--e4); display: flex; flex-direction: column; gap: 6px; flex: 1; }

.corpo-cartao h2 { margin: 0; font-size: 17px; font-weight: 620; letter-spacing: -.01em; }

.corpo-cartao p {
  margin: 0;
  color: var(--apagado);
  font-size: 13.5px;

  /* ⚠️ Três linhas no máximo: descrição de produto vem da Cakto e pode ter
   *    qualquer tamanho. Sem o corte, um cartão fica quatro vezes mais alto que
   *    o vizinho. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rodape-cartao {
  margin-top: auto;
  padding-top: var(--e3);
  color: var(--marca);
  font-size: 13px;
  font-weight: 600;
}

.nada {
  padding: var(--e7);
  border: 1px dashed var(--borda-forte);
  border-radius: var(--raio-g);
  color: var(--apagado);
  text-align: center;
}

/* ══ 3 · a ficha ══════════════════════════════════════════════════════════ */
.voltar {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  margin-bottom: var(--e5);
  color: var(--apagado);
  font-size: 13.5px;
  text-decoration: none;
}

.voltar:hover { color: var(--texto); }

/* ⭐ Duas colunas, como a ficha do auditory-lab: a esquerda mostra o produto, a
 *    direita resolve a vida da pessoa (serial e download). */
.ficha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--e6);
  align-items: start;
}

@media (max-width: 880px) {
  .ficha { grid-template-columns: minmax(0, 1fr); }
}

.ficha h1 {
  margin: 0 0 var(--e2);
  font-size: 30px;
  font-weight: 650;
  letter-spacing: -.025em;
}

.ficha .categoria { margin: 0 0 var(--e5); }

.retrato {
  aspect-ratio: 16 / 10;
  margin-bottom: var(--e5);
  background: #0d0d0f center/cover no-repeat;
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
}

.texto-produto { color: var(--apagado); font-size: 14.5px; }
.texto-produto p { margin: 0 0 var(--e3); }

/* a coluna da direita */
.painel-lateral {
  position: sticky;
  top: var(--e5);
  display: flex;
  flex-direction: column;
  gap: var(--e4);
}

@media (max-width: 880px) { .painel-lateral { position: static; } }

.bloco {
  padding: var(--e4);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
}

.bloco h3 {
  margin: 0 0 var(--e3);
  color: var(--fraco);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ⚠️ O serial quebra em duas linhas em telas estreitas, e por isso é
 *    `monospace` com `word-break`: um serial cortado pela borda é um serial
 *    que a pessoa copia errado. */
.serial {
  display: block;
  padding: var(--e3);
  background: #100e12;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 15px;
  letter-spacing: .06em;
  word-break: break-all;
}

.copiar { width: 100%; margin-top: var(--e2); }

.fatos { display: grid; gap: var(--e2); }

.fato { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3); font-size: 13.5px; }
.fato dt { color: var(--fraco); }
.fato dd { margin: 0; text-align: right; }

.viva     { color: var(--bom); }
.a-vencer { color: var(--morno); }
.morta    { color: var(--ruim); }

/* os downloads */
.baixar { display: grid; gap: var(--e2); }

.baixar a {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: 11px var(--e3);
  background: var(--elevada);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  color: var(--texto);
  font-size: 14px;
  text-decoration: none;
}

.baixar a:hover { border-color: var(--marca); }
.baixar a .ico:first-child { font-size: 17px; color: var(--apagado); }
.baixar a:hover .ico:first-child { color: var(--marca); }
.baixar a small { display: block; color: var(--fraco); font-size: 11.5px; }
.baixar a .fim { margin-left: auto; color: var(--fraco); }

.aviso {
  margin: var(--e3) 0 0;
  color: var(--fraco);
  font-size: 12.5px;
  line-height: 1.5;
}