/* deploy/cartel.css — PELE DAS PÁGINAS PÚBLICAS (index + cadastro).
   ═══════════════════════════════════════════════════════════════════════════════════════
   POR QUE ESTE ARQUIVO EXISTE

   A paleta do Cartel estava duplicada POR VALOR em cinco lugares, com nomes de token
   diferentes em cada um: --bg (dashboard), --void (lista/jogos/mural), --sb-void (dentro de
   uma string de JS na sidebar) e o :root do admin. Mesmo hex, cinco declarações — e foi
   exatamente assim que o site derivou para três paletas antes da virada de 31/07.

   Colar uma sexta cópia no index e uma sétima no cadastro repetiria o erro conhecido. As duas
   páginas públicas passam a dividir ESTA pele. As páginas do app não foram tocadas: elas estão
   verificadas rodando, e reescrever o :root delas agora seria risco sem retorno.

   O QUE MUDOU DE FATO NA PÁGINA DE VENDAS

   O index.html usava --bg, --surf e --surf2 em 16 lugares e NUNCA as declarava. Variável CSS
   indefinida não cai em fallback: a propriedade inteira fica inválida, então o body ficava com
   fundo transparente (branco do navegador) e todo card ficava sem superfície. A página de
   vendas estava quebrada — provavelmente estrago colateral da virada de paleta, que passou por
   dashboard/admin/lista/jogos/sidebar e não por ela.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

:root{
  /* rampa fria de 204° — a mesma de paleta-fria-204, degrau por degrau */
  --void:#0f1f29;  --void2:#122430; --surf:#182c3a;  --surf2:#1e3646; --elev:#233c4d;
  --line:#2c4759;  --line2:#39566a; --line3:#48667a;
  --ice:#f2f2f3;   --mute:#a4afb6;  --mute2:#798d9a;

  /* Famílias que NUNCA giram de matiz. Ouro é a cor de AÇÃO em todo o produto (o botão de
     salvar do perfil, o de publicar do mural, o de gerar print) — a página de vendas usa a
     mesma, senão o primeiro clique que o cliente dá no site tem uma cor que ele não vai
     encontrar em lugar nenhum depois de entrar. Carmim é marca e urgência; verde é ganho. */
  --gold:#f4c651;  --gold-deep:#c8912f; --gold-soft:rgba(244,198,81,.13); --gold-ink:#231a05;
  --gold-g:linear-gradient(160deg,#ffe9a8,#f4c651 55%,#c8912f);
  --crim:#e01e37;  --crim-deep:#a8162a; --crim-txt:#ff8794; --crim-soft:rgba(224,30,55,.12);
  --green:#16c784;

  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --head:'Archivo','Inter',system-ui,-apple-system,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --r:14px; --r2:18px; --maxw:1080px;
  --ez:cubic-bezier(.2,.8,.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--void); color:var(--ice);
  font-family:var(--body); font-size:15px; line-height:1.55; font-weight:400;
  min-height:100vh; overflow-x:hidden; -webkit-font-smoothing:antialiased;
  /* Os mesmos dois halos de lista/jogos/mural, na mesma posição. É o que faz a página de
     vendas e o produto parecerem o mesmo lugar antes de qualquer outro detalhe. */
  background-image:
    radial-gradient(900px 520px at 78% -8%, rgba(224,30,55,.16), transparent 60%),
    radial-gradient(760px 460px at 12% 2%, rgba(244,198,81,.09), transparent 58%);
  background-attachment:fixed;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--gold);color:var(--gold-ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 18px}

/* ─────────── tipografia ─────────── */
h1,h2,h3{font-family:var(--head);font-weight:900;letter-spacing:-.02em;line-height:1.06}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute2)}
.eyebrow b{color:var(--gold);font-weight:600}

/* ─────────── marca ─────────── */
/* Lockup idêntico ao da sidebar (CARTEL·CPA com o ponto em carmim). Repetir a marca com outro
   desenho na porta de entrada é a forma mais barata de o site parecer dois produtos. */
.wm{font-family:var(--head);font-weight:900;letter-spacing:.05em;color:var(--ice)}
.wm b{color:var(--crim)}

/* ─────────── botões ─────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--body);font-weight:700;font-size:14px;letter-spacing:.01em;
  padding:12px 20px;border-radius:12px;cursor:pointer;white-space:nowrap;
  border:1px solid transparent;transition:transform .12s var(--ez),filter .18s,background .18s,border-color .18s,box-shadow .22s;
}
.btn:active{transform:translateY(1px)}
.btn:disabled{filter:grayscale(.55) brightness(.82);cursor:default;transform:none}
.btn svg{flex:none}
/* PRIMÁRIO = ouro, a mesma cor de ação do produto inteiro */
.btn-pri{background:var(--gold-g);color:var(--gold-ink);border-color:var(--gold-deep);box-shadow:0 8px 24px rgba(244,198,81,.2)}
.btn-pri:hover{filter:brightness(1.07);box-shadow:0 12px 32px rgba(244,198,81,.3)}
/* CARMIM = urgência/compra final; sobra para os poucos momentos de decisão */
.btn-crim{background:linear-gradient(160deg,var(--crim),var(--crim-deep));color:#fff;border-color:var(--crim-deep);box-shadow:0 8px 24px rgba(224,30,55,.24)}
.btn-crim:hover{filter:brightness(1.09);box-shadow:0 12px 32px rgba(224,30,55,.34)}
.btn-line{background:var(--surf);border-color:var(--line2);color:var(--ice)}
.btn-line:hover{border-color:var(--gold-deep);color:var(--gold)}
.btn-insta{background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045);color:#fff;border:none}
.btn-insta:hover{filter:brightness(1.08)}
.btn-sm{padding:8px 15px;font-size:13px;border-radius:10px}
.btn-lg{padding:15px 22px;font-size:15.5px;border-radius:13px}
.btn-block{width:100%}

/* ─────────── superfícies ─────────── */
.panel{
  background:linear-gradient(180deg,var(--surf),var(--void2) 72%);
  border:1px solid var(--line);border-radius:var(--r2);
  box-shadow:0 10px 30px rgba(0,0,0,.28);
}
.sec{padding:56px 0;position:relative}
/* filete de seção: o mesmo gradiente de ouro que corre na borda da sidebar */
.sec+.sec::before{content:'';position:absolute;top:0;left:18px;right:18px;height:1px;
  background:linear-gradient(90deg,transparent,var(--line2) 12%,var(--line2) 88%,transparent)}
.sec-head{margin-bottom:26px}
.sec-head .eyebrow{margin-bottom:10px;display:block}
.sec-head h2{font-size:clamp(23px,4vw,32px)}
.sec-head p{color:var(--mute);font-size:14px;margin-top:9px;max-width:56ch}

/* ─────────── campos ─────────── */
.field{margin-bottom:14px}
.field>label{display:block;font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.field>label .opt{text-transform:none;letter-spacing:0;font-weight:600;color:var(--mute2)}
.iw{position:relative;display:flex;align-items:center}
.iw>.pfx{position:absolute;left:13px;color:var(--mute2);font-size:14px;font-weight:700;pointer-events:none}
.inp{
  width:100%;background:var(--void);border:1px solid var(--line);color:var(--ice);
  padding:13px 15px;border-radius:12px;font-family:inherit;font-size:15px;outline:none;
  transition:border-color .16s,box-shadow .16s;
}
.inp.pfxd{padding-left:30px}
.inp::placeholder{color:var(--mute2);opacity:.75}
.inp:focus{border-color:var(--gold-deep);box-shadow:0 0 0 3px var(--gold-soft)}
.inp.bad{border-color:var(--crim);box-shadow:0 0 0 3px var(--crim-soft)}
.inp:disabled{opacity:.55;cursor:not-allowed}
.hint{font-size:11px;line-height:1.5;color:var(--mute2);margin-top:6px}
.hint.bad{color:var(--crim-txt)}
.hint.ok{color:var(--green)}

/* ─────────── selos ─────────── */
.tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);
  font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 10px;border-radius:20px;border:1px solid var(--line2);color:var(--mute)}
.tag-gold{color:var(--gold);border-color:rgba(244,198,81,.4);background:var(--gold-soft)}
.tag-green{color:var(--green);border-color:rgba(22,199,132,.35);background:rgba(22,199,132,.1)}
.tag-crim{color:var(--crim-txt);border-color:rgba(224,30,55,.4);background:var(--crim-soft)}

/* ─────────── entrada em cena ─────────── */
/* .rv só some quando o JS confirma que o IntersectionObserver existe (html.js-rv). Sem essa
   trava, navegador sem IO — ou script bloqueado — deixaria a página inteira invisível: o
   estado inicial é opacity:0 e nada a traria de volta. Página de vendas em branco é receita
   perdida, não detalhe de animação. */
.js-rv .rv{opacity:0;transform:translateY(18px);
  transition:opacity .6s var(--ez),transform .6s var(--ez)}
.js-rv .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js-rv .rv{opacity:1;transform:none;transition:none}
  *{animation-duration:.001ms!important}
}

/* ─────────── rodapé ─────────── */
footer{border-top:1px solid var(--line);padding:26px 0 34px;margin-top:20px}
footer .fin{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  font-size:12.5px;color:var(--mute2)}
footer a:hover{color:var(--gold)}

@media(max-width:600px){
  .sec{padding:42px 0}
  body{font-size:14.5px}
}