/* TJ Trader - tokens oficiais do kit (04_Templates/TJ_Trader_Design_Tokens.css) */
:root {
  --tj-bg:#0B1014; --tj-surface:#142329; --tj-accent:#2BE4A7; --tj-text:#E9EEF2;
  --tj-muted:#99A8B2; --tj-grid:#284047; --tj-negative:#F17878; --tj-step:8px;
  --tj-display:"Space Grotesk",system-ui,sans-serif; --tj-body:"Inter",system-ui,sans-serif;
  --wrap:1200px; --gutter:24px;
}

@font-face { font-family:"Space Grotesk"; src:url("/assets/fonts/space-grotesk-var.woff2") format("woff2"); font-weight:500 700; font-style:normal; font-display:swap; }
@font-face { font-family:"Inter"; src:url("/assets/fonts/inter-var.woff2") format("woff2"); font-weight:400 600; font-style:normal; font-display:swap; }

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px; }
body { margin:0; background:var(--tj-bg); color:var(--tj-text); font-family:var(--tj-body); font-size:17px; line-height:1.5; -webkit-font-smoothing:antialiased; }
img,svg { display:block; max-width:100%; height:auto; }
a { color:inherit; }
h1,h2,h3 { font-family:var(--tj-display); font-weight:600; letter-spacing:-.02em; line-height:1.08; margin:0; }
p { margin:0; }
:focus-visible { outline:2px solid var(--tj-accent); outline-offset:3px; }

.wrap { width:100%; max-width:calc(var(--wrap) + 2*var(--gutter)); margin:0 auto; padding:0 var(--gutter); }
.skip { position:absolute; left:-9999px; top:0; background:var(--tj-accent); color:var(--tj-bg); padding:8px 16px; z-index:20; }
.skip:focus { left:8px; top:8px; }

/* Rótulos em caixa alta */
.rotulo,.frentes,.rodape__fim,.quadro figcaption { font-size:13px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; }
.rotulo { color:var(--tj-accent); display:flex; flex-wrap:wrap; gap:0 12px; margin-bottom:24px; }
.rotulo__sep { opacity:.7; }

/* Botão */
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:56px; padding:0 28px; border:0; background:var(--tj-accent); color:var(--tj-bg); font:600 16px/1 var(--tj-display); letter-spacing:0; text-decoration:none; cursor:pointer; transition:background-color .15s; white-space:nowrap; }
.btn:hover { background:#5FEDBE; }
.btn:disabled { opacity:.6; cursor:default; }
.btn--sm { min-height:40px; padding:0 16px; font-size:14px; }

/* Topo */
.topo { position:sticky; top:0; z-index:10; background:rgba(11,16,20,.92); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid var(--tj-grid); }
.topo__in { display:flex; align-items:center; justify-content:space-between; min-height:72px; }
.marca { display:block; padding:8px 0; }
.topo__nav { display:flex; align-items:center; gap:32px; font-size:15px; }
.topo__nav a:not(.btn) { color:var(--tj-muted); text-decoration:none; }
.topo__nav a:not(.btn):hover { color:var(--tj-text); }

/* Hero */
.hero { position:relative; padding:96px 0 104px; border-bottom:1px solid var(--tj-grid); overflow:hidden; }
.hero__grid { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:72px; align-items:center; }
h1 { font-size:clamp(44px,6.4vw,88px); }
.lead { margin-top:32px; max-width:34em; font-size:clamp(18px,1.6vw,21px); color:var(--tj-muted); }
.lead--2 { margin-top:16px; color:var(--tj-text); }
.hero__arte svg { width:100%; }
.frentes { display:flex; gap:12px; margin-top:56px; color:var(--tj-muted); padding-top:24px; position:relative; }
.frentes::before { content:""; position:absolute; top:0; left:0; width:56px; height:3px; background:var(--tj-accent); }

/* Formulário da lista */
.lista { margin-top:40px; max-width:560px; }
.lista__label { display:block; margin-bottom:8px; font-size:14px; font-weight:500; color:var(--tj-muted); }
.lista__linha { display:flex; gap:8px; }
.lista input[type=email] { flex:1; min-width:0; min-height:56px; padding:0 16px; background:var(--tj-surface); border:1px solid var(--tj-grid); border-radius:0; color:var(--tj-text); font:400 17px var(--tj-body); }
.lista input[type=email]::placeholder { color:#6F808A; }
.lista input[type=email]:focus { outline:none; border-color:var(--tj-accent); }
.lista input[aria-invalid=true] { border-color:var(--tj-negative); }
.hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.lista__msg { min-height:0; margin-top:12px; font-size:15px; font-weight:500; }
.lista__msg:empty { display:none; }
.lista__msg[data-tipo=ok] { color:var(--tj-accent); }
.lista__msg[data-tipo=erro] { color:var(--tj-negative); }
.lista__nota { margin-top:12px; font-size:14px; color:var(--tj-muted); }
.lista__nota a { color:var(--tj-text); text-underline-offset:3px; }

/* Seções */
.secao { padding:104px 0; border-bottom:1px solid var(--tj-grid); }
h2 { font-size:clamp(32px,4.2vw,56px); max-width:16em; }
.sub { margin-top:16px; color:var(--tj-muted); font-size:19px; }

.passos { list-style:none; margin:64px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.passo { background:var(--tj-surface); padding:40px 32px 48px; border-top:3px solid var(--tj-accent); }
.passo__n { display:block; font:500 14px var(--tj-body); letter-spacing:.16em; color:var(--tj-accent); font-variant-numeric:tabular-nums lining-nums; }
.passo h3 { margin-top:24px; font-size:28px; }
.passo p { margin-top:16px; color:var(--tj-muted); }

.leitura { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:72px; align-items:center; }
.leitura__txt p:not(.rotulo) { margin-top:24px; color:var(--tj-muted); max-width:30em; }
.quadro { margin:0; background:var(--tj-surface); padding:24px 24px 32px; position:relative; }
.quadro figcaption { color:var(--tj-muted); font-size:12px; margin-bottom:16px; }
.quadro svg { width:100%; }

.duas { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:64px; }
.cartao { background:var(--tj-surface); padding:40px 32px; }
.cartao--nao { background:transparent; border:1px solid var(--tj-grid); }
.cartao h3 { font-size:24px; }
.lst { list-style:none; margin:24px 0 0; padding:0; }
.lst li { position:relative; padding:16px 0 16px 32px; border-top:1px solid var(--tj-grid); color:var(--tj-muted); }
.lst li::before { position:absolute; left:0; top:16px; font-weight:600; }
.lst--sim li::before { content:"+"; color:var(--tj-accent); }
.lst--nao li::before { content:"–"; color:var(--tj-muted); }

.faq { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:72px; }
.faq__lista { border-bottom:1px solid var(--tj-grid); }
details { border-top:1px solid var(--tj-grid); }
summary { list-style:none; cursor:pointer; padding:24px 40px 24px 0; position:relative; font:600 20px/1.3 var(--tj-display); letter-spacing:-.01em; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; position:absolute; right:4px; top:22px; color:var(--tj-accent); font-weight:500; font-size:22px; }
details[open] summary::after { content:"–"; }
details p { padding:0 40px 24px 0; color:var(--tj-muted); }
details a { color:var(--tj-text); text-underline-offset:3px; }

.secao--final { background:var(--tj-surface); }
.final { display:grid; grid-template-columns:minmax(0,6fr) minmax(0,6fr); gap:72px; align-items:center; }
.final .lista { margin-top:0; justify-self:end; width:100%; }
.final .lista input[type=email] { background:var(--tj-bg); }

/* Rodapé */
.rodape { padding:64px 0 48px; }
.rodape__topo { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-bottom:32px; border-bottom:1px solid var(--tj-grid); }
.rodape__topo a { color:var(--tj-muted); font-size:15px; text-underline-offset:3px; }
.rodape__aviso { margin-top:32px; max-width:62em; font-size:14px; line-height:1.6; color:var(--tj-muted); }
.rodape__fim { display:flex; gap:12px; margin-top:32px; color:var(--tj-muted); font-size:12px; }

/* Páginas de texto (privacidade, obrigado) */
.texto { padding:88px 0 104px; border-bottom:1px solid var(--tj-grid); }
.texto .wrap { max-width:calc(760px + 2*var(--gutter)); }
.texto h1 { font-size:clamp(36px,5vw,56px); }
.texto h2 { font-size:24px; margin-top:56px; }
.texto p,.texto li { color:var(--tj-muted); margin-top:16px; }
.texto ul { padding-left:20px; margin:0; }
.texto a { color:var(--tj-text); text-underline-offset:3px; }
.texto .lista { margin-top:24px; }
.texto .btn--sec { background:transparent; color:var(--tj-text); border:1px solid var(--tj-grid); }
.texto .btn--sec:hover { border-color:var(--tj-accent); background:transparent; }

@media (max-width:960px) {
  .hero { padding:64px 0 72px; }
  .hero__grid,.leitura,.faq,.final { grid-template-columns:minmax(0,1fr); gap:48px; }
  .hero__arte { max-width:360px; }
  .secao { padding:72px 0; }
  .passos { grid-template-columns:minmax(0,1fr); margin-top:48px; }
  .duas { grid-template-columns:minmax(0,1fr); margin-top:48px; }
  .final .lista { justify-self:start; }
}
@media (max-width:720px) {
  :root { --gutter:16px; }
  body { font-size:16px; }
  .topo__nav a:not(.btn) { display:none; }
  .lista__linha { flex-direction:column; }
  .btn { width:100%; }
  .btn--sm { width:auto; }
  .hero__arte { max-width:260px; }
  .frentes { margin-top:40px; }
  .passo,.cartao { padding:32px 24px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .btn { transition:none; } }
.texto .voltar { margin-top:56px; }
.rodape__aviso--topo { margin-top:0; }