/* ARSENAL online — sistema visual comum (landing, checkout, conta e páginas legais).
   Mesma família do app: breu, ouro só para ação e marca, Bricolage estreita nos títulos. */
:root{
  --breu:#060607;--grafite:#0E0E11;--grafite2:#141418;--grafite3:#1B1B20;
  --aresta:#24242A;--aresta2:#2F2F37;
  --papel:#F2EFE8;--texto:#B9B5AC;--apagado:#8C887F;
  --ouro:#E6B84C;--ouro-hi:#F5D98B;--ouro-fundo:rgba(230,184,76,.08);--ouro-linha:rgba(230,184,76,.32);
  --trava:#E07A66;--trava-fundo:rgba(224,122,102,.08);
  --ok:#6FCB94;--ok-fundo:rgba(111,203,148,.09);
  --info:#86B7E8;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --disp:"Bricolage Grotesque","IBM Plex Sans",system-ui,sans-serif;
  --r1:6px;--r2:10px;--r3:16px;
  --e:cubic-bezier(.2,.7,.2,1);
  --larg:1160px;--gutter:20px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:dark;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
body{margin:0;background:var(--breu);color:var(--papel);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-wrap:break-word;min-height:100dvh}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--ouro);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--ouro-hi)}
img,svg{max-width:100%}
p{margin:0 0 1em}
h1,h2,h3{font-family:var(--disp);font-weight:700;letter-spacing:-.01em;line-height:1.02;margin:0;color:var(--papel);font-variation-settings:"wdth" 80}
:focus-visible{outline:2px solid var(--ouro);outline-offset:3px;border-radius:4px}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pular{position:absolute;left:12px;top:-60px;z-index:200;background:var(--ouro);color:#141005;padding:10px 14px;border-radius:var(--r1);font-weight:600;text-decoration:none}
.pular:focus{top:10px}
.pular:hover,.pular:focus{color:#141005}
.larg{width:100%;max-width:var(--larg);margin:0 auto;padding:0 var(--gutter)}
@media (min-width:760px){:root{--gutter:32px}}

/* ---------- marca ---------- */
.marca{display:inline-flex;align-items:baseline;gap:.08em;font-family:var(--disp);font-weight:800;font-size:21px;letter-spacing:.02em;color:var(--papel);text-decoration:none;font-variation-settings:"wdth" 88}
.marca b{color:var(--ouro);font-weight:800}
.marca:hover{color:var(--papel)}

/* ---------- botões ---------- */
.bt{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 20px;border-radius:var(--r2);border:1px solid var(--aresta2);background:var(--grafite2);color:var(--papel);font-weight:600;font-size:16px;line-height:1.2;text-decoration:none;transition:background .15s,border-color .15s,transform .15s var(--e)}
.bt:hover{border-color:var(--apagado);color:var(--papel)}
.bt:active{transform:translateY(1px)}
.bt[disabled],.bt[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none}
.bt.ouro{background:var(--ouro);border-color:var(--ouro);color:#151005}
.bt.ouro:hover{background:var(--ouro-hi);border-color:var(--ouro-hi);color:#151005}
.bt.grande{min-height:56px;padding:14px 24px;font-size:17px}
.bt.cheio{width:100%}
.bt.leve{background:transparent;border-color:transparent;color:var(--texto);padding-inline:10px}
.bt.leve:hover{color:var(--papel);border-color:var(--aresta)}
.bt .preco{font-variant-numeric:tabular-nums;padding-left:10px;border-left:1px solid rgba(21,16,5,.25)}
.bt .gira{width:18px;height:18px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:gira .7s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

/* ---------- formulários ---------- */
.campo{display:grid;gap:6px;margin:0 0 16px}
.campo label,.campo .rot{font-size:14px;font-weight:600;color:var(--papel)}
.campo .ajuda{font-size:13px;color:var(--apagado);line-height:1.45}
.entrada{width:100%;min-height:50px;padding:12px 14px;background:var(--grafite);border:1px solid var(--aresta2);border-radius:var(--r2);color:var(--papel);font-size:16px;transition:border-color .15s,box-shadow .15s}
.entrada::placeholder{color:#8A867E}
.entrada:hover{border-color:#3C3C45}
.entrada:focus{outline:none;border-color:var(--ouro);box-shadow:0 0 0 3px rgba(230,184,76,.18)}
.entrada[aria-invalid="true"]{border-color:var(--trava)}
.entrada.mono{font-family:var(--mono);letter-spacing:.04em}
.erro-campo{font-size:13px;color:var(--trava);margin:0}
.senha-caixa{position:relative}
.senha-caixa .entrada{padding-right:92px}
.senha-caixa .mostrar{position:absolute;right:6px;top:6px;bottom:6px;padding:0 12px;border:0;border-radius:var(--r1);background:var(--grafite3);color:var(--texto);font-size:13px;font-weight:600}
.senha-caixa .mostrar:hover{color:var(--papel)}
.aviso{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r2);font-size:14px;line-height:1.5;margin:0 0 16px;border:1px solid var(--aresta)}
.aviso.erro{border-color:rgba(224,122,102,.4);background:var(--trava-fundo);color:#F3C8BF}
.aviso.ok{border-color:rgba(111,203,148,.35);background:var(--ok-fundo);color:#CDEBD8}
.aviso.info{background:var(--grafite);color:var(--texto)}
.aviso p{margin:0}

/* ---------- cabeçalho e rodapé ---------- */
.topo{position:sticky;top:0;z-index:50;background:rgba(6,6,7,.86);backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.topo.rolou{border-bottom-color:var(--aresta)}
.topo .larg{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:62px}
.topo nav{display:flex;align-items:center;gap:6px}
.topo .bt{min-height:40px;padding:8px 14px;font-size:15px}
.rodape{border-top:1px solid var(--aresta);padding:40px 0 calc(40px + env(safe-area-inset-bottom));color:var(--apagado);font-size:14px;line-height:1.6}
.rodape .larg{display:grid;gap:20px}
.rodape nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.rodape nav a{color:var(--texto);text-decoration:none}
.rodape nav a:hover{color:var(--papel);text-decoration:underline}
.rodape p{margin:0;max-width:62ch}
@media (min-width:760px){.rodape .larg{grid-template-columns:1fr auto;align-items:end}}

/* ---------- páginas de conta (entrar, recuperar, ativar) ---------- */
.conta-pg{min-height:calc(100dvh - 62px);display:grid;align-items:start;padding:40px 0 64px}
@media (min-width:760px){.conta-pg{padding-top:72px}}
.conta-caixa{width:100%;max-width:440px;margin:0 auto;padding:0 var(--gutter)}
.conta-caixa h1{font-size:clamp(34px,8vw,44px);margin-bottom:10px}
.conta-caixa .sub{color:var(--texto);margin:0 0 28px}
.conta-caixa .rodape-form{margin-top:20px;font-size:14px;color:var(--apagado)}
.conta-caixa .rodape-form a{font-weight:600}
.abas-metodo{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;background:var(--grafite);border:1px solid var(--aresta);border-radius:var(--r2);margin:0 0 20px}
.abas-metodo button{min-height:42px;border:0;border-radius:var(--r1);background:transparent;color:var(--texto);font-weight:600;font-size:14px;padding:6px 8px}
.abas-metodo button[aria-selected="true"]{background:var(--grafite3);color:var(--papel);box-shadow:inset 0 0 0 1px var(--aresta2)}

/* ---------- código de recuperação (compartilhado com o checkout) ---------- */
.codigo-rec{border:1px dashed var(--ouro-linha);background:var(--ouro-fundo);border-radius:var(--r2);padding:18px;margin:0 0 16px}
.codigo-rec output{display:block;font-family:var(--mono);font-size:clamp(20px,6vw,25px);letter-spacing:.08em;color:var(--ouro-hi);text-align:center;margin:4px 0 14px;user-select:all;word-break:break-all}
.codigo-rec .acoes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.codigo-rec .acoes .bt{min-height:42px;font-size:14px;padding:8px 10px}
.marcar{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--texto);margin:0 0 16px;cursor:pointer}
.marcar input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--ouro);flex:none}

/* ---------- textos longos (termos e privacidade) ---------- */
.doc{max-width:720px;margin:0 auto;padding:48px var(--gutter) 72px}
.doc h1{font-size:clamp(38px,8vw,56px);margin-bottom:12px}
.doc .data{color:var(--apagado);font-size:14px;margin-bottom:36px}
.doc h2{font-size:clamp(24px,5vw,30px);margin:44px 0 12px;font-variation-settings:"wdth" 85}
.doc h3{font-size:19px;margin:24px 0 8px;font-family:var(--sans);font-weight:600;letter-spacing:0;font-variation-settings:normal;line-height:1.3}
.doc p,.doc li{color:var(--texto)}
.doc ul{padding-left:20px;margin:0 0 1em}
.doc li{margin:0 0 6px}
.doc strong{color:var(--papel);font-weight:600}
.doc .resumo{border-left:2px solid var(--ouro);padding:4px 0 4px 18px;margin:0 0 28px;color:var(--papel)}
.doc dl{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:8px 20px;margin:0 0 1em;color:var(--texto)}
.doc dt{color:var(--papel);font-weight:600}
.doc dd{margin:0}