/* SimTrader · site institucional (v3, identidade própria desde 11/2026)
   Cores: paleta escura do app (simtrader/theme/colors.ts, darkColors) + degradê do símbolo do SimTrader
   (vermelho #FF221A → laranja #FF941A), usado só como assinatura (item ativo, marcos da trilha, contorno
   do símbolo no herói e na chamada final), em menos de 2% da tela. A marca anterior (anel com onda de
   pontos) é da Millenierds e não aparece aqui: o build falha se algum vestígio dela voltar.
   A seção "Aprender do zero" usa o tema claro do app (lightColors) pela classe .faixa--clara:
   trocar a classe volta a seção para o escuro.
   Fonte: Archivo (Omnibus-Type, SIL OFL 1.1, archivo-OFL.txt), variável em peso 400–700 e largura
   100–110%, servida do próprio domínio. Sem style="" nem <style> em linha: a CSP só aceita este arquivo. */

@font-face {
  font-family: "Archivo";
  src: url("/archivo-latin-v25.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 100% 110%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Métricas da Archivo a 100% aplicadas à Arial (e às equivalentes métricas): reduz o salto na troca. */
@font-face {
  font-family: "Archivo fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo");
  size-adjust: 98.3%; ascent-override: 89.3%; descent-override: 21.4%; line-gap-override: 0%;
}

:root {
  --fundo: #080A0D;          /* background */
  --faixa: #0E1218;          /* faixa elevada entre seções */
  --superficie: #11151B;     /* surface */
  --cartao: #141922;         /* cartão sobre a faixa elevada */
  --elevada: #181D25;        /* surfaceRaised */
  --borda: #262D38;          /* border */
  --borda-forte: #3A4352;
  --borda-suave: rgba(38, 45, 56, .65);
  --texto: #F7F8FA;          /* text */
  --texto-2: #A9B2C0;        /* corpo longo */
  --texto-3: #939CAB;        /* textMuted */
  --azul: #4F8CFF;           /* blue */
  --azul-escuro: #2557D6;    /* blueDark */
  --link: #7AA7FF;
  --link-hover: #A3C2FF;
  --foco: #7AA7FF;
  --verde: #35D49A;          /* green */
  --vermelho: #FF7A85;
  --marca-1: #FF221A;        /* degradê do símbolo: vermelho (base, à esquerda) */
  --marca-2: #FF591B;
  --marca-3: #FF941A;        /* laranja (ponta, à direita) */
  --grad-marca: linear-gradient(to top right, var(--marca-1), var(--marca-2) 54%, var(--marca-3));
  --grad-marca-h: linear-gradient(90deg, var(--marca-1), var(--marca-2) 54%, var(--marca-3));
  --halo: rgba(255, 89, 27, .16);

  --capsula: rgba(14, 18, 24, .80);
  --capsula-borda: rgba(38, 45, 56, .95);

  --fonte: "Archivo", "Archivo fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif;
  --largura: 1160px;
  --margem: clamp(16px, 4vw, 32px);
  --raio: 16px;
  --suave: cubic-bezier(.22, .61, .36, 1);
  --saida: cubic-bezier(.16, 1, .3, 1);
  --z-topo: 50;
  --z-doca: 60;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 400 1.0625rem/1.65 var(--fonte);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: var(--link); text-underline-offset: .18em; }
a:hover { color: var(--link-hover); }
strong { color: var(--texto); font-weight: 600; }
h1, h2, h3 { margin: 0; color: var(--texto); text-wrap: balance; }
h1, h2 { font-weight: 650; }
h3 { font-weight: 600; font-stretch: 102%; letter-spacing: -.012em; line-height: 1.2; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
figure { margin: 0; }

:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 3px;
  border-radius: 6px;
}
main:focus, h1:focus { outline: none; }
[id] { scroll-margin-top: 24px; }
@media (min-width: 960px) { [id] { scroll-margin-top: 88px; } }

.sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Sprite de símbolos SVG: não pode ser display:none, senão o degradê da marca some. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.pular {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 10px;
  background: var(--texto); color: var(--fundo); font-weight: 600; text-decoration: none;
}
.pular:focus { top: 12px; }

.contido { max-width: var(--largura); margin: 0 auto; padding-inline: var(--margem); }

/* ---------- Marca ---------- */
.marca {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  color: var(--texto); text-decoration: none;
}
.marca:hover { color: var(--texto); }
/* Logotipo oficial (símbolo + nome em contorno): proporção 965:176. O nome herda a cor do texto. */
.marca__logo { display: block; flex: none; width: auto; height: 27px; overflow: visible; }

/* Lâmina: o traço inclinado do símbolo, em miniatura. Assinatura da marca nos marcadores pequenos. */
.lamina {
  flex: none; display: inline-block; width: 6px; height: 14px; border-radius: 2px;
  background: var(--grad-marca); transform: skewX(-24deg);
}

/* ---------- Cabeçalho: cápsula flutuante (computador) e topo estático (celular) ---------- */
.topo { position: relative; z-index: var(--z-topo); }
.topo__faixa {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 64px; padding: 0 var(--margem);
}
.topo__nav, .topo__acoes > .botao-baixar { display: none; }
.topo__acoes { display: flex; align-items: center; gap: 4px; }

.topo__menu {
  display: inline-flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--borda); background: rgba(255, 255, 255, .02); color: var(--texto);
  font: 500 .9375rem/1 var(--fonte); cursor: pointer;
}
.topo__menu:hover { background: rgba(255, 255, 255, .06); }
.topo__menu:focus-visible { border-radius: 999px; }
.topo__menu-icone { width: 16px; height: 8px; border-top: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; }

@media (min-width: 960px) {
  .topo {
    position: sticky; top: 0; height: 72px;
    display: flex; justify-content: center; pointer-events: none;
  }
  .topo__faixa {
    pointer-events: auto; position: relative;
    width: min(1128px, 100% - 32px); height: 56px; margin-top: 10px; padding: 0 8px 0 16px;
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px;
  }
  .topo__faixa::before {
    content: ""; position: absolute; inset: 0; border-radius: 16px;
    background: var(--capsula); border: 1px solid var(--capsula-borda);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 16px 40px -20px rgba(0, 0, 0, .9);
    -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  }
  /* .no-topo só existe com JS: sem JS a cápsula fica sólida desde o início. */
  .no-topo .topo__faixa::before { opacity: 0; transform: scale(.985); }
  .topo__faixa > * { position: relative; }
  .topo__nav { display: block; }
  .topo__nav ul { list-style: none; display: flex; gap: 2px; }
  .topo__nav a {
    position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 999px;
    color: var(--texto-2); font: 500 .9375rem/1 var(--fonte); text-decoration: none;
  }
  .topo__nav a:hover { color: var(--texto); background: rgba(255, 255, 255, .07); }
  .topo__nav a:active { background: rgba(255, 255, 255, .11); }
  .topo__nav a[aria-current] { color: var(--texto); }
  .topo__nav a:focus-visible { border-radius: 999px; outline-offset: 2px; }
  .topo__acoes { justify-self: end; gap: 6px; }
  .topo__acoes > .botao-baixar { display: inline-flex; }
  .topo__menu { display: none; }
}
/* Traço curto no degradê da marca sob o item ativo (seção na tela) e sob o CTA na página /baixar. */
.topo__nav a::after, .topo__acoes > .botao-baixar::after {
  content: ""; position: absolute; left: 50%; bottom: 3px; width: 16px; height: 2.5px; margin-left: -8px;
  border-radius: 2px; background: var(--grad-marca-h);
  opacity: 0; transform: scaleX(.3); pointer-events: none;
}
.topo__acoes > .botao-baixar::after { bottom: -8px; }
.topo__nav a[aria-current]::after, .topo__acoes > .botao-baixar[aria-current="page"]::after { opacity: 1; transform: none; }
.icone-externo { flex: none; opacity: .8; }

/* ---------- "Baixar agora": um só componente em todo o site ---------- */
.botao-baixar {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px 0 12px; border-radius: 999px;
  background: var(--texto); color: var(--fundo);
  font: 600 .9375rem/1 var(--fonte); letter-spacing: -.005em; text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
}
.botao-baixar:hover { background: #fff; color: var(--fundo); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 8px 24px -12px rgba(79, 140, 255, .45); }
.botao-baixar:active { transform: scale(.98); }
.botao-baixar:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; border-radius: 999px; }
.botao-baixar__icone { flex: none; width: 18px; height: 18px; }
.botao-baixar:hover .botao-baixar__seta { transform: translateY(1px); }
.botao-baixar--medio { height: 48px; padding: 0 18px 0 14px; font-size: 1rem; }
.botao-baixar--grande { height: 52px; padding: 0 22px 0 16px; font-size: 1.0625rem; }
.botao-baixar--grande .botao-baixar__icone { width: 20px; height: 20px; }

/* ---------- Folha do menu (celular): popover nativo, abre e fecha sem JS ---------- */
.folha {
  position: fixed; inset: auto 0 0 0; margin: 0 auto; width: 100%; max-width: 560px; height: auto;
  max-height: min(85dvh, 640px); overflow: auto; overscroll-behavior: contain;
  padding: 10px 16px calc(20px + env(safe-area-inset-bottom));
  border: 0; border-top: 1px solid var(--borda); border-radius: 26px 26px 0 0;
  background: var(--faixa); color: var(--texto);
  box-shadow: 0 -30px 60px -20px rgba(0, 0, 0, .8);
}
.folha::backdrop { background: rgba(0, 0, 0, .62); }
.folha__alca { width: 40px; height: 4px; margin: 0 auto 8px; border-radius: 4px; background: var(--borda-forte); }
.folha__topo { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.folha__titulo { color: var(--texto-3); font-size: .875rem; font-weight: 500; }
.folha__fechar {
  height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--borda); background: transparent;
  color: var(--texto); font: 500 .9375rem/1 var(--fonte); cursor: pointer;
}
.folha__fechar:focus-visible { border-radius: 999px; }
.folha__lista { list-style: none; margin-top: 6px; }
.folha__lista a {
  display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 6px;
  border-bottom: 1px solid var(--borda-suave);
  color: var(--texto-2); font-size: 1.1875rem; font-weight: 500; text-decoration: none;
}
.folha__lista a::before {
  content: ""; flex: none; width: 6px; height: 14px; margin-inline: 2px; border-radius: 2px;
  background: var(--borda-forte); transform: skewX(-24deg);
}
.folha__lista a:hover { color: var(--texto); }
.folha__lista a[aria-current] { color: var(--texto); }
.folha__lista a[aria-current]::before { background: var(--grad-marca); }
.folha__baixar { display: flex; width: 100%; margin-top: 20px; }
.folha__nota { margin-top: 12px; text-align: center; color: var(--texto-3); font-size: .8125rem; }
.folha__secundarios { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; column-gap: 20px; margin-top: 4px; }
.folha__secundarios a {
  display: inline-flex; align-items: center; gap: 5px; min-height: 44px;
  color: var(--texto-2); font-size: .875rem; text-decoration: none;
}
.folha__secundarios a:hover, .folha__secundarios a[aria-current] { color: var(--texto); text-decoration: underline; }
@media (min-width: 960px) { .folha { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .folha {
    transition: transform .32s var(--saida), overlay .32s allow-discrete, display .32s allow-discrete;
    transform: translateY(100%);
  }
  .folha:popover-open { transform: none; }
  @starting-style { .folha:popover-open { transform: translateY(100%); } }
  .folha::backdrop { transition: background-color .32s, overlay .32s allow-discrete, display .32s allow-discrete; }
  @starting-style { .folha:popover-open::backdrop { background-color: rgba(0, 0, 0, 0); } }
}
/* Navegador sem popover (Safari < 17): a folha vira uma lista simples sob o topo. */
@supports not selector(:popover-open) {
  .topo__menu, .doca { display: none !important; }
  .folha {
    position: static; display: block; max-width: none; max-height: none; transform: none;
    border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--borda); padding-top: 0;
  }
  .folha__alca, .folha__fechar { display: none; }
}

/* ---------- Doca (celular, só com JS): seção atual + "Baixar agora", na zona do polegar ---------- */
.doca[hidden] { display: none; }
.doca {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: var(--z-doca);
  max-width: 520px; margin: 0 auto; height: 64px; padding: 0 8px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 1px solid var(--borda); border-radius: 22px;
  background: rgba(14, 18, 24, .86);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .9);
  visibility: hidden; transform: translateY(130%);
}
.doca-visivel:not(.folha-aberta) .doca { visibility: visible; transform: none; }
.doca__secao {
  display: inline-flex; align-items: center; gap: 10px; min-width: 0; height: 48px; padding: 0 10px 0 12px;
  border: 0; border-radius: 16px; background: transparent; color: var(--texto);
  font: 500 .9375rem/1.2 var(--fonte); text-align: left; cursor: pointer;
}
.doca__secao:hover { background: rgba(255, 255, 255, .05); }
.doca__secao:focus-visible { border-radius: 16px; outline-offset: 0; }
.doca__texto { display: grid; min-width: 0; }
.doca__rotulo { color: var(--texto-3); font-size: .75rem; }
.doca__nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 960px) { .doca { display: none !important; } }
@media (prefers-reduced-motion: no-preference) {
  .doca { transition: transform .32s var(--saida), visibility 0s linear .32s; }
  .doca-visivel:not(.folha-aberta) .doca { transition: transform .32s var(--saida), visibility 0s; }
}

/* ---------- Links de destaque e selos ---------- */
/* Sublinhado que cresce da esquerda (no lugar da seta "→" colada no texto). */
.link-destaque {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--link); font-weight: 600; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(50% + .8em) / 0 1.5px no-repeat;
}
.link-destaque:hover { background-size: 100% 1.5px; }
@media (prefers-reduced-motion: no-preference) {
  .link-destaque { transition: background-size .2s var(--saida), color .2s; }
}

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 999px;
  background: var(--texto); color: var(--fundo);
  font: 600 1rem/1 var(--fonte); text-decoration: none;
}
.botao:hover { background: #fff; color: var(--fundo); }
.botao:focus-visible { border-radius: 999px; }

/* Selos das lojas: App Store e Google Play lado a lado, com o mesmo peso e a mesma altura visual,
   sempre numa linha (até 320 px). --h é a altura visível: min(50px, largura útil / 6,4), porque
   a arte da Apple tem proporção 3:1 e a faixa visível do Google Play, 3,36:1. A largura útil é a
   da tela menos as margens (todo par de selos ocupa a largura do conteúdo no celular). Em 320 px
   dá cerca de 43 px, acima do mínimo de 40 px da Apple. Não usar container query aqui: um
   contêiner com "inline-size" dentro de pai que se ajusta ao conteúdo fica com largura zero. */
.selos { display: flex; flex-wrap: nowrap; align-items: center; gap: 16px; }
.selo { display: inline-block; flex: none; border-radius: 10px; line-height: 0; --h: 50px; }
.selos .selo, .lojas .selo { --h: min(50px, calc((100vw - 2 * var(--margem) - 16px) / 6.4)); }
.selo img { width: auto; height: var(--h); }
.selo--grande { --h: 60px; }
/* A arte oficial do Google Play tem margem transparente em cima e embaixo: a margem negativa
   deixa a faixa visível com a mesma altura do selo da Apple. A arte não é alterada. */
.selo--play img { height: calc(var(--h) * 1.3021); margin-block: calc(var(--h) * -.151); }
/* "Em breve": selo esmaecido, sem link, com a fita logo abaixo, centralizada. A fita fica fora da
   arte (nada é desenhado por cima do selo) e fora do fluxo, para o par continuar numa linha até
   320 px; o contêiner reserva o espaço dela embaixo. */
.selo--em-breve { position: relative; cursor: default; }
.selo--em-breve img { opacity: .45; }
.selos:has(.selo--em-breve), .lojas:has(.selo--em-breve) { padding-bottom: 32px; }
.selo__fita {
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  padding: 2px 10px; border-radius: 999px;
  background: var(--fita-fundo, #16213A); border: 1px solid var(--fita-borda, #34507E); color: var(--fita-texto, #D5E2FB);
  font-size: .8125rem; line-height: 1.3; font-weight: 500; white-space: nowrap;
}

/* Sobretítulo em caixa normal, como chip (só onde informa o público ou o contexto). */
.sobretitulo {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px;
  padding: 5px 12px 5px 10px; border-radius: 999px; border: 1px solid var(--borda);
  color: var(--texto-2); font-size: .875rem; font-weight: 500; line-height: 1.3;
}
.sobretitulo::before {
  content: ""; flex: none; width: 5px; height: 12px; margin-left: 2px; border-radius: 1.5px;
  background: var(--grad-marca); transform: skewX(-24deg);
}

/* ---------- Faixas: ordem e materiais (direção 4.7) ----------
   Herói (base) · Aprender (clara) · Mercado (base) · Recursos (elevada) · Planos (base) ·
   Perguntas + aviso (elevada) · Chamada (base, com o símbolo) · Rodapé (#06080A). */
.faixa { position: relative; padding-block: clamp(88px, 11vw, 136px); border-top: 1px solid var(--borda-suave); }
.faixa--elevada {
  background: linear-gradient(#11151B, var(--faixa) 120px);
  border-top-color: var(--borda);
}
/* Grade discreta de gráfico (metade da opacidade da v2), que some nas bordas. */
.faixa--grade { overflow: clip; padding-block: clamp(72px, 9vw, 112px); }
.faixa--grade::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(148, 170, 210, .0375) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 170, 210, .0375) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(80% 75% at 60% 50%, #000 30%, transparent 100%);
  mask-image: radial-gradient(80% 75% at 60% 50%, #000 30%, transparent 100%);
}
.faixa--grade > .contido { position: relative; }

.secao__topo { max-width: 46rem; margin-bottom: clamp(40px, 5vw, 64px); }
.secao__topo h2, .dados__texto h2, .chamada h2 {
  font-size: clamp(2rem, 1.45rem + 1.9vw, 2.875rem); font-stretch: 106%; line-height: 1.06; letter-spacing: -.024em;
}
.secao__topo > p { margin-top: 16px; color: var(--texto-2); max-width: 38rem; font-size: 1.125rem; line-height: 1.6; }

/* ---------- Herói ---------- */
.heroi {
  /* Largura total com recorte: o símbolo pode passar da coluna sem criar rolagem lateral (inclusive no iOS). */
  overflow: clip;
  padding-block: clamp(24px, 5vw, 72px) clamp(56px, 7vw, 96px);
  padding-inline: max(var(--margem), calc((100% - var(--largura)) / 2 + var(--margem)));
  display: grid; gap: 40px; align-items: center;
  grid-template-areas: "texto" "visual" "pe";
  background: radial-gradient(45% 60% at 80% 45%, rgba(37, 87, 214, .14), transparent 70%);
}
.heroi__texto { grid-area: texto; }
.heroi__visual { grid-area: visual; }
.heroi__pe { grid-area: pe; }
@media (min-width: 960px) {
  .heroi {
    grid-template-columns: 1.1fr .9fr; grid-template-areas: "texto visual" "pe visual";
    column-gap: 48px; row-gap: 36px; align-items: end;
  }
  .heroi__visual { align-self: center; }
  .heroi__pe { align-self: start; }
}
.heroi h1 {
  font-size: clamp(2.5rem, 1.55rem + 3.2vw, 4rem); font-stretch: 108%;
  line-height: 1.04; letter-spacing: -.028em;
  max-width: 17ch;
}
@media (max-width: 479px) {
  .heroi h1 { font-size: clamp(2.125rem, 1.35rem + 3.6vw, 2.5rem); font-stretch: 104%; letter-spacing: -.026em; }
}
.heroi__lide { margin-top: 24px; font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); line-height: 1.6; color: var(--texto-2); max-width: 35rem; }
.heroi__acoes { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

/* Extrato no pé do herói (no lugar da faixa de 4 números): linguagem de nota de corretagem. */
.extrato { margin: 0; max-width: 30rem; border-top: 1px solid var(--borda); font-variant-numeric: tabular-nums; }
.extrato div { display: flex; align-items: baseline; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--borda-suave); }
.extrato div::before {
  content: ""; order: 1; flex: 1 1 24px; min-width: 16px; align-self: center;
  border-bottom: 2px dotted var(--borda-forte);
}
.extrato dt { order: 0; color: var(--texto-2); font-size: .9375rem; }
.extrato dd { order: 2; margin: 0; color: var(--texto); font-size: 1.0625rem; font-weight: 600; font-stretch: 108%; letter-spacing: -.01em; white-space: nowrap; }
.heroi__nota { margin-top: 14px; color: var(--texto-3); font-size: .875rem; line-height: 1.55; max-width: 30rem; }

.heroi__visual { position: relative; display: grid; place-items: center; min-height: 420px; }
/* Contorno do símbolo do SimTrader (vetor, ~1 KB): sobe por trás do telefone no herói e do QR na chamada final. */
.simbolo-traco { position: absolute; height: auto; pointer-events: none; overflow: visible; }
.simbolo-traco--heroi {
  inset: 50% auto auto 50%; width: min(640px, 150vw);
  transform: translate(-50%, -47%); opacity: .6;
}
.celular { position: relative; width: min(290px, 64vw); margin-inline: auto; }
.celular img {
  width: 100%;
  border-radius: 13% / 6%;
  box-shadow:
    0 0 0 7px #0E1217,
    0 0 0 8px var(--borda),
    0 30px 80px -20px rgba(0, 0, 0, .9);
}
@media (max-width: 959px) {
  .heroi__visual { min-height: 0; padding-block: 8px; }
}

/* ---------- Avisos (sóbrios: neutro + azul) ---------- */
.nota-legal {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 32px; padding: 14px 18px;
  border: 1px solid var(--borda); border-radius: 12px;
  background: rgba(8, 10, 13, .55);
  color: var(--texto-2); font-size: .875rem; line-height: 1.55;
}
.nota-legal__icone, .aviso__icone { flex: none; color: var(--azul); margin-top: 1px; }
.nota-legal strong { font-weight: 600; }

.aviso {
  display: grid; gap: 20px 48px; margin-top: clamp(48px, 6vw, 72px);
  padding: clamp(24px, 3.2vw, 40px);
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: #0A0D12;
}
@media (min-width: 900px) { .aviso { grid-template-columns: 15rem 1fr; } }
.aviso__cabeca { display: flex; gap: 12px; align-items: flex-start; }
.aviso__icone { margin-top: 3px; }
.aviso h3 { font-size: 1.125rem; line-height: 1.35; font-stretch: 102%; letter-spacing: -.005em; }
.aviso ul { list-style: none; display: grid; gap: 14px 40px; }
@media (min-width: 720px) { .aviso ul { grid-template-columns: 1fr 1fr; } }
.aviso li {
  position: relative; padding-left: 16px;
  color: var(--texto-2); font-size: .9375rem; line-height: 1.6;
}
.aviso li::before {
  content: ""; position: absolute; left: 0; top: .78em;
  width: 6px; height: 1.5px; border-radius: 1px; background: var(--azul);
}

/* ---------- Etiquetas Grátis / Premium (caixa normal, nunca dourado) ---------- */
.tag {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px;
  border: 1px solid var(--borda); color: var(--texto-2);
  font-size: .8125rem; font-weight: 600; font-stretch: 100%; letter-spacing: .01em; line-height: 1; white-space: nowrap;
  vertical-align: middle;
}
.tag--gratis { border-color: var(--tag-gratis-borda, #226B5A); color: var(--tag-gratis-texto, #BFEBD9); background: var(--tag-gratis-fundo, #102C27); }
.tag--premium { border-color: var(--tag-premium-borda, #314D75); color: var(--tag-premium-texto, #D5E2FB); background: var(--tag-premium-fundo, #172337); }

/* ---------- Seção clara: tema claro do app (lightColors). Tirar .faixa--clara volta ao escuro. ---------- */
.faixa--clara {
  --fundo-secao: #F5F7FA;
  --texto: #11151B;
  --texto-2: #46505F;       /* 7,6:1 */
  --texto-3: #586476;       /* 5,6:1 */
  --borda: #D7DEE8;
  --borda-forte: #B8C3D2;
  --borda-suave: rgba(17, 21, 27, .1);
  --azul: #2868D9;
  --verde: #087A59;
  --link: #1E4FBC;
  --link-hover: #163C91;
  --foco: #1E4FBC;          /* #7AA7FF daria 2,25:1 no claro */
  --marca-1: #E3261C;       /* degradê da marca no claro: ≥ 3:1 sobre #F5F7FA nas duas pontas */
  --marca-2: #DE3B16;
  --marca-3: #D9480F;
  --grad-marca: linear-gradient(to top right, var(--marca-1), var(--marca-2) 54%, var(--marca-3));
  --grad-marca-h: linear-gradient(90deg, var(--marca-1), var(--marca-2) 54%, var(--marca-3));
  --halo: rgba(227, 38, 28, .14);
  --tag-gratis-fundo: #E8F7F1; --tag-gratis-borda: #9CCFBD; --tag-gratis-texto: #1F5C49;
  --tag-premium-fundo: #EAF3FF; --tag-premium-borda: #9FC3EF; --tag-premium-texto: #244B7A;
  --fita-fundo: #EAF3FF; --fita-borda: #9FC3EF; --fita-texto: #244B7A;
  --tela-borda: #11151B;
  color-scheme: light;
}

/* ---------- Aprender do zero: "a trilha" ---------- */
.aprender {
  position: relative;
  padding-block: clamp(88px, 11vw, 136px);
  background: var(--fundo-secao, var(--fundo)); color: var(--texto);
}
.aprender__topo { max-width: 46rem; }
.aprender h2 { font-size: clamp(2rem, 1.45rem + 1.9vw, 2.875rem); font-stretch: 106%; line-height: 1.06; letter-spacing: -.024em; }
.aprender__lide { margin-top: 20px; max-width: 38rem; color: var(--texto-2); font-size: clamp(1.125rem, 1.08rem + .2vw, 1.1875rem); line-height: 1.6; }
.aprender__nota { margin-top: 14px; max-width: 38rem; color: var(--texto-3); font-size: .9375rem; line-height: 1.55; }
.aprender__grade { display: grid; gap: 56px; margin-top: clamp(48px, 6vw, 72px); }
@media (min-width: 960px) { .aprender__grade { grid-template-columns: minmax(0, 1fr) 340px; gap: 96px; } }

/* A linha: um fio neutro e o progresso que se preenche com a rolagem (--p, 0 a 1).
   Sem JS e com movimento reduzido, --p fica em 1: a linha aparece desenhada por inteiro. */
.marcos { list-style: none; position: relative; isolation: isolate; --p: 1; }
.marcos::before, .marcos::after {
  content: ""; position: absolute; left: 10px; top: 13px; bottom: 0; width: 2px; z-index: 0; pointer-events: none;
}
.marcos::before { border-radius: 2px; background: var(--borda); }
.marcos::after {
  border-radius: 2px; background: linear-gradient(var(--azul), var(--verde));
  clip-path: inset(0 0 calc(100% - var(--p) * 100%) 0);
}
.marco { position: relative; padding: 0 0 clamp(40px, 5vw, 56px) 52px; }
.marco:last-child { padding-bottom: 0; }
/* A linha termina no último marco: o resto fica coberto pela cor do fundo. */
.marco:last-child::before {
  content: ""; position: absolute; left: 0; top: 24px; bottom: 0; width: 22px; z-index: 1;
  background: var(--fundo-secao, var(--fundo));
}
/* Marco: uma lâmina (o traço inclinado do símbolo) sobre a linha. O último marco é o próprio símbolo. */
.marco__marca {
  position: absolute; left: 6px; top: 1px; z-index: 2; width: 10px; height: 22px; border-radius: 3px;
  background: var(--grad-marca); transform: skewX(-20deg);
}
.marco--fim .marco__marca {
  left: -3px; top: 2px; width: 30px; height: 21px; border-radius: 0; padding: 1px;
  background: var(--fundo-secao, var(--fundo)); transform: none;
}
.marco--fim .marco__marca svg { display: block; width: 28px; height: 19px; }
/* Estados (só com JS e sem movimento reduzido): adiante, alcançado e atual. */
.trilha--viva .marco__marca { background: var(--borda-forte); }
.trilha--viva .alcancado .marco__marca, .trilha--viva .atual .marco__marca { background: var(--grad-marca); }
.trilha--viva .atual .marco__marca { box-shadow: 0 0 0 5px var(--halo); }
.trilha--viva .marco--fim .marco__marca, .trilha--viva .marco--fim.atual .marco__marca { background: var(--fundo-secao, var(--fundo)); box-shadow: none; }
.trilha--viva .marco--fim:not(.atual) .marco__marca svg { filter: grayscale(1); opacity: .45; }
.trilha--viva .marco:not(.alcancado):not(.atual) h3 { color: var(--texto-2); }
@media (prefers-reduced-motion: no-preference) {
  .marco__marca { transition: background-color .24s, box-shadow .24s var(--saida); }
  .marco__marca svg { transition: filter .3s, opacity .3s; }
  .marco h3 { transition: color .24s; }
}

.marco h3 { font-size: clamp(1.25rem, 1.12rem + .5vw, 1.5rem); }
.marco > p:not(.marco__tags) { margin-top: 8px; max-width: 34rem; color: var(--texto-2); }
.marco__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 14px; }
.marco__condicao { color: var(--texto-3); font-size: .875rem; line-height: 1.4; }
.marco > p.marco__nota { margin-top: 10px; color: var(--texto-3); font-size: .875rem; line-height: 1.5; }

/* Recortes de tela: só no celular (no computador, o palco mostra a tela inteira). */
.marco__recorte { margin-top: 18px; max-width: 420px; }
.marco__recorte img {
  width: 100%; border-radius: 18px; background: #050608;
  border: 1px solid var(--tela-borda, var(--borda));
}
.marco__recorte figcaption { margin-top: 8px; color: var(--texto-3); font-size: .8125rem; line-height: 1.45; }

.ja-investe {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 14px;
  max-width: 38rem; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--borda);
}
.ja-investe::before {
  content: ""; grid-row: span 3; width: 10px; height: 10px; margin-top: 8px; border-radius: 50%;
  border: 1.8px solid var(--azul);
}
.ja-investe h3 { font-size: 1.1875rem; }
.ja-investe p { grid-column: 2; color: var(--texto-2); font-size: 1rem; line-height: 1.6; }
.ja-investe p.ja-investe__nota { color: var(--texto-3); font-size: .875rem; }

/* Palco: celular fixo que troca a tela real conforme o marco (só no computador). */
.palco { display: none; }
@media (min-width: 960px) {
  .marco__recorte { display: none; }
  .palco { display: block; }
  .palco__cel { position: sticky; top: 104px; display: grid; width: min(300px, (100vh - 230px) * .46); margin-left: auto; margin-right: 20px; }
  .palco__tela { grid-area: 1 / 1; opacity: 0; visibility: hidden; }
  .palco__tela.ativa { opacity: 1; visibility: visible; }
  .palco__tela img {
    width: 100%; border-radius: 13% / 6%;
    box-shadow: 0 0 0 7px var(--tela-borda, #0E1217), 0 0 0 8px var(--tela-borda, var(--borda)), 0 40px 80px -30px rgba(17, 21, 27, .45);
  }
  .palco__tela figcaption { margin-top: 24px; text-align: center; color: var(--texto-3); font-size: .8125rem; line-height: 1.4; }
}
@media (prefers-reduced-motion: no-preference) {
  .palco__tela { transition: opacity .32s ease, visibility 0s linear .32s; }
  .palco__tela.ativa { transition: opacity .32s ease, visibility 0s; }
}

.aprender__acao {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px;
  margin-top: clamp(56px, 7vw, 80px); padding-top: 32px; border-top: 1px solid var(--borda);
}
.aprender__frase { flex: 1 1 100%; color: var(--texto); font-size: 1.125rem; font-weight: 600; font-stretch: 102%; }
.aprender__guia { flex: 1 1 100%; }
.faixa--clara .nota-legal { background: rgba(255, 255, 255, .7); }

/* ---------- Guia /aprender-a-investir ---------- */
.guia__medida { max-width: calc(46rem + 2 * var(--margem)); margin: 0 auto; padding-inline: var(--margem); }
.guia__cabeca { padding-block: clamp(32px, 5vw, 56px) clamp(32px, 4vw, 48px); }
.migalhas ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin-bottom: 28px; font-size: .875rem; }
.migalhas li { display: inline-flex; align-items: center; gap: 8px; color: var(--texto-3); }
.migalhas li + li::before { content: "/"; color: var(--borda-forte); }
.migalhas a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--texto-2); text-decoration: none; }
.migalhas a:hover { color: var(--texto); text-decoration: underline; }
.migalhas a[aria-current] { color: var(--texto-3); }
.guia h1 {
  font-size: clamp(2.25rem, 1.55rem + 2.6vw, 3.5rem); font-stretch: 106%; line-height: 1.05; letter-spacing: -.026em;
}
.guia__assinatura { margin-top: 18px; color: var(--texto-3); font-size: .9375rem; }
.guia__lide { margin-top: 24px; color: var(--texto-2); font-size: clamp(1.125rem, 1.08rem + .2vw, 1.1875rem); line-height: 1.6; }
.guia__corpo { padding-bottom: 8px; }
.guia__corpo > section { padding-top: 48px; }
.guia__corpo h2 { font-size: clamp(1.5rem, 1.25rem + .9vw, 1.875rem); font-stretch: 104%; line-height: 1.15; letter-spacing: -.018em; }
.guia__corpo h3 { font-size: 1.1875rem; margin-top: 28px; }
.guia__corpo p { margin-top: 14px; color: var(--texto-2); }
.guia__corpo strong { color: var(--texto); }
.guia__resumo {
  padding: clamp(22px, 3vw, 32px); border: 1px solid var(--borda); border-radius: var(--raio);
  background: linear-gradient(#11151B, var(--faixa));
}
.guia__resumo h2 { font-size: 1.125rem; font-stretch: 102%; letter-spacing: -.01em; }
.guia__resumo ol { margin: 14px 0 0; padding-left: 1.5rem; display: grid; gap: 2px; }
.guia__resumo li { color: var(--texto-3); font-variant-numeric: tabular-nums; }
.guia__resumo li::marker { color: var(--texto-3); font-weight: 600; }
.guia__resumo a { display: inline-block; padding: 6px 0; color: var(--texto); text-decoration: none; }
.guia__resumo a:hover { text-decoration: underline; }
.guia__termos { margin: 18px 0 0; display: grid; border-top: 1px solid var(--borda); }
.guia__termos div { display: grid; gap: 2px 24px; padding: 12px 0; border-bottom: 1px solid var(--borda); }
@media (min-width: 640px) { .guia__termos div { grid-template-columns: 9rem 1fr; } }
.guia__termos dt { font-weight: 600; color: var(--texto); }
.guia__termos dd { margin: 0; color: var(--texto-2); }
.guia__lista { margin-top: 14px; padding-left: 1.25rem; display: grid; gap: 8px; color: var(--texto-2); }
.guia__lista li::marker { color: var(--texto-3); }
.guia__corpo p.guia__exemplo { color: var(--texto-3); font-size: .875rem; }
.guia__caixa {
  margin-top: 28px; padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie);
}
.guia__caixa h3 { margin-top: 0; font-size: 1.125rem; }
.guia__caixa ul { margin-top: 10px; padding-left: 1.25rem; display: grid; gap: 6px; color: var(--texto-2); }
.guia__fontes ul { margin-top: 14px; padding-left: 1.25rem; display: grid; gap: 4px; color: var(--texto-2); }
.guia__fontes a { display: inline-block; padding: 6px 0; }
.guia__fontes cite { font-style: italic; }
.guia__acao {
  margin-top: 56px; padding: clamp(24px, 3.5vw, 36px); border-radius: var(--raio);
  border: 1px solid var(--borda); background: var(--faixa);
}
/* No celular estreito o cartão final perde a moldura: os selos precisam da largura toda para
   ficarem lado a lado sem cair abaixo de 40 px. */
@media (max-width: 479px) { .guia__acao { padding: 0; border: 0; background: none; } }
.guia__acao-titulo { margin-bottom: 20px; color: var(--texto); font-size: 1.25rem; font-weight: 600; font-stretch: 104%; line-height: 1.3; letter-spacing: -.01em; }
.guia .nota-legal { margin-top: 24px; }

/* ---------- Mercado (dados ilustrativos, que sobem e descem) ---------- */
.dados { display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) { .dados { grid-template-columns: .9fr 1.1fr; gap: 64px; } }
.dados__texto > p { margin-top: 16px; color: var(--texto-2); max-width: 30rem; }
.dados__lista { margin: 28px 0 0; display: grid; max-width: 28rem; border-top: 1px solid var(--borda); }
.dados__lista div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--borda); font-size: .9375rem; }
.dados__lista dt { color: var(--texto-3); }
.dados__lista dd { margin: 0; text-align: right; font-weight: 500; }

.dados__paineis { display: grid; gap: 16px; }
@media (min-width: 600px) and (max-width: 959px) { .dados__paineis { grid-template-columns: 1fr 1fr; } }
.painel {
  padding: 20px 22px 18px;
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: rgba(14, 18, 24, .92);
  box-shadow: 0 24px 60px -32px rgba(0, 0, 0, .8);
}
.painel--patrimonio { position: relative; }
@media (min-width: 960px) { .painel--cotacao { width: 82%; } .painel--patrimonio { width: 92%; margin-left: auto; } }
.painel__topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.painel__ativo { font-size: .8125rem; font-weight: 600; color: var(--texto-2); letter-spacing: .02em; }
.painel__ativo span {
  margin-left: 6px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--borda);
  color: var(--texto-3); font-size: .75rem; font-weight: 500; letter-spacing: 0;
}
.painel__valor {
  margin: 6px -6px 0; padding: 0 6px; border-radius: 8px;
  font-size: 1.5rem; font-weight: 600; font-stretch: 108%; letter-spacing: -.015em; font-variant-numeric: tabular-nums;
}
.painel__variacao { display: inline-block; white-space: nowrap; margin-left: 4px; color: var(--verde); font-size: .875rem; font-weight: 600; font-stretch: 100%; letter-spacing: 0; }
.painel__variacao.negativa { color: var(--vermelho); }
.painel__vivo { display: inline-flex; align-items: center; gap: 7px; color: var(--texto-3); font-size: .75rem; font-weight: 500; white-space: nowrap; }
.ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 3px rgba(53, 212, 154, .15); }
.grafico { display: block; width: 100%; height: auto; margin-top: 16px; overflow: visible; }
.grafico .traco { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafico--linha .traco { stroke: var(--verde); }
.grafico--area .traco { stroke: var(--azul); }
.grafico__ponto { fill: var(--verde); stroke: #0E1218; stroke-width: 2; }
.painel--queda .grafico--linha .traco { stroke: var(--vermelho); }
.painel--queda .grafico__ponto { fill: var(--vermelho); }
.grafico__base { fill: none; stroke: #3A4352; stroke-width: 1; stroke-dasharray: 3 5; }
.painel__eixo { display: flex; justify-content: space-between; margin-top: 8px; color: var(--texto-3); font-size: .75rem; }
.painel figcaption { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--borda-suave); color: var(--texto-3); font-size: .75rem; line-height: 1.5; }
/* A cada atualização, o valor pisca 180 ms (verde se subiu, vermelho se caiu). */
@media (prefers-reduced-motion: no-preference) {
  .pisca-alta { animation: pisca-alta .18s ease-out; }
  .pisca-baixa { animation: pisca-baixa .18s ease-out; }
  @keyframes pisca-alta { from { background-color: rgba(53, 212, 154, .12); } to { background-color: transparent; } }
  @keyframes pisca-baixa { from { background-color: rgba(255, 122, 133, .12); } to { background-color: transparent; } }
}

/* ---------- Recursos: ciclo (o único conjunto numerado da página) ---------- */
.ciclo { margin-bottom: clamp(32px, 5vw, 56px); }
.ciclo ol { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--borda); }
.ciclo a {
  position: relative; display: flex; flex-direction: column; gap: 2px; min-height: 44px;
  padding: 10px 4px 14px; text-decoration: none; color: var(--texto-3);
  font-size: .875rem; font-weight: 500;
}
.ciclo a span { font-variant-numeric: tabular-nums; font-size: .8125rem; color: var(--texto-3); }
.ciclo a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--azul); transform: scaleX(0); transform-origin: left;
}
.ciclo a:hover { color: var(--texto); }
.ciclo a[aria-current="step"] { color: var(--texto); }
.ciclo a[aria-current="step"] span { color: var(--link); }
.ciclo a[aria-current="step"]::after { transform: scaleX(1); }
@media (min-width: 720px) {
  .ciclo a { flex-direction: row; align-items: baseline; gap: 10px; padding: 14px 16px 16px 0; font-size: .9375rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .ciclo a { transition: color .2s; }
  .ciclo a::after { transition: transform .35s var(--suave); }
}

.etapa {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px;
  color: var(--texto-3); font-size: .875rem; font-weight: 500;
}
.etapa span { color: var(--link); font-variant-numeric: tabular-nums; }

.recurso {
  display: grid; gap: 40px; align-items: center;
  padding: clamp(36px, 5vw, 64px) 0;
  border-top: 1px solid var(--borda-suave);
}
.ciclo + .recurso { border-top: 0; padding-top: 0; }
.recurso__texto h3 { font-size: clamp(1.375rem, 1.15rem + .9vw, 1.75rem); font-stretch: 104%; line-height: 1.18; letter-spacing: -.018em; }
.recurso__texto > p:not(.etapa) { margin-top: 14px; color: var(--texto-2); max-width: 32rem; }
.recurso .celular { width: min(270px, 62vw); }
/* "Reiniciar": não há captura do Perfil, então um painel ilustrativo (marcado como tal) faz as vezes da tela. */
.reinicio { width: min(100%, 26rem); justify-self: center; }
.reinicio .extrato { max-width: none; margin-top: 14px; }
.reinicio .extrato dt { font-size: .875rem; }
.reinicio__novo dd { color: var(--verde); }
@media (min-width: 860px) {
  .recurso { grid-template-columns: 1fr 1fr; gap: 72px; }
  .recurso--inverso .recurso__texto { order: 2; }
}

.lista-check { list-style: none; margin-top: 22px; display: grid; gap: 10px; }
.lista-check li { position: relative; padding-left: 28px; color: var(--texto); font-size: 1rem; }
.lista-check li::before {
  content: ""; position: absolute; left: 0; top: .3em;
  width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid rgba(53, 212, 154, .5);
}
.lista-check li::after {
  content: ""; position: absolute; left: 6px; top: .5em;
  width: 4px; height: 7px; border: solid var(--verde); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}

/* Mais recursos: lista com fios, sem cartões iguais. */
.extras { list-style: none; margin-top: clamp(48px, 6vw, 72px); display: grid; column-gap: 32px; border-top: 1px solid var(--borda); }
@media (min-width: 640px) { .extras { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .extras { grid-template-columns: repeat(4, 1fr); } }
.extras li { padding: 24px 0; border-bottom: 1px solid var(--borda-suave); }
@media (min-width: 1040px) { .extras li { border-bottom: 0; padding-bottom: 0; } }
.extras h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 8px; font-size: 1.0625rem; }
.extras p { color: var(--texto-2); font-size: .9375rem; line-height: 1.55; }

/* ---------- Planos ---------- */
.planos { display: grid; gap: 16px; }
@media (min-width: 860px) { .planos { grid-template-columns: 1fr 1fr; } }
.plano { display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: clamp(24px, 3vw, 36px); }
.plano h3 { font-size: 1.375rem; font-stretch: 104%; letter-spacing: -.012em; }
.plano--premium { background: linear-gradient(180deg, #132038 0%, #0F1726 100%); border-color: #2E4870; }
.plano__acao { margin-top: auto; padding-top: 28px; }
.plano__nota { margin-top: auto; padding-top: 16px; border-top: 1px solid #2E4870; color: var(--texto-2); font-size: .875rem; }
.plano--premium .lista-check { margin-bottom: 24px; }

/* ---------- Perguntas ---------- */
.perguntas { border-top: 1px solid var(--borda); max-width: 52rem; }
.perguntas details { border-bottom: 1px solid var(--borda); }
.perguntas summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 20px 44px 20px 0; font-weight: 600; font-size: 1.0625rem; line-height: 1.45;
}
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after {
  content: ""; position: absolute; right: 8px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border: solid var(--texto-3); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.perguntas details[open] summary::after { transform: rotate(-135deg); margin-top: -1px; }
.perguntas summary:hover { color: #fff; }
.perguntas summary:focus-visible { outline-offset: 2px; }
.perguntas details p { padding: 0 0 22px; color: var(--texto-2); max-width: 46rem; }

/* ---------- Chamada final: o símbolo sobe por trás do QR ---------- */
.chamada {
  position: relative; overflow: clip;
  padding-block: clamp(88px, 11vw, 136px);
  border-top: 1px solid var(--borda-suave);
  background: radial-gradient(60% 90% at 78% 50%, rgba(255, 34, 26, .06), transparent 65%), var(--fundo);
}
/* No celular (e sem ponteiro fino), o contorno do símbolo fica no canto, cortado pela borda. */
.simbolo-traco--chamada { right: -240px; top: -36px; width: 560px; opacity: .4; }
.chamada__grade { position: relative; display: grid; gap: 48px; align-items: center; }
.chamada h2 { max-width: 15ch; font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.25rem); font-stretch: 108%; line-height: 1.04; letter-spacing: -.028em; }
.chamada__lide { margin-top: 18px; max-width: 34rem; color: var(--texto-2); font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); line-height: 1.6; }
.chamada__acao { margin-top: 32px; }
.chamada__selos { margin-top: 24px; }
@media (max-width: 959px) { .chamada__acao .botao-baixar { width: 100%; } }
.visor { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 960px) {
  .simbolo-traco--chamada { display: none; }
  .chamada__grade { grid-template-columns: 1.15fr .85fr; }
  .visor {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 380px; height: 380px; margin: 0; justify-self: center;
  }
  .visor__simbolo { left: 50%; top: 50%; width: 600px; transform: translate(-50%, -52%); opacity: .6; }
  .visor .qr { position: relative; width: 132px; height: 132px; margin: 0; padding: 8px; border-radius: 14px; background: #fff; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .9); }
  .visor figcaption {
    position: relative; max-width: 12rem; margin-top: 14px; padding: 4px 10px; border-radius: 8px;
    background: rgba(8, 10, 13, .72); text-align: center; color: var(--texto-2); font-size: .8125rem; line-height: 1.4;
  }
}
/* O contorno do símbolo se desenha uma vez, devagar, quando entra na tela. */
.anima .traco--simbolo { transition-duration: 2s; transition-delay: .1s; }

/* ---------- Baixar ---------- */
.baixar { max-width: 980px; margin: 0 auto; padding: clamp(32px, 6vw, 80px) var(--margem) 0; }
.baixar h1 { font-size: clamp(2.5rem, 1.55rem + 3.2vw, 3.5rem); font-stretch: 108%; line-height: 1.04; letter-spacing: -.028em; }
.baixar__topo { margin-bottom: 40px; }
.baixar__grade { display: grid; gap: 16px; }
.baixar__grade--info { margin-top: 32px; }
@media (min-width: 760px) {
  .baixar__grade--info { grid-template-columns: 1fr 1fr; }
}
/* As duas lojas, lado a lado e com o mesmo peso, logo abaixo do título: ninguém rola para achar a sua. */
.lojas {
  display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: 16px; row-gap: 8px;
}
.lojas__item { display: grid; gap: 10px; justify-items: start; }
.lojas__so { margin: 0; color: var(--texto-3); font-size: .875rem; line-height: 1.3; }
.lojas__so strong { color: var(--texto); font-weight: 600; margin-right: 4px; }
@media (min-width: 760px) {
  .lojas {
    width: fit-content; max-width: 100%;
    column-gap: 40px; padding: clamp(24px, 3vw, 32px);
    background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  }
  .lojas .selo { --h: 56px; }
}
/* QR: auxiliar e só para quem está num computador (ponteiro fino). Aponta para /app,
   que manda cada celular para a sua loja. */
.baixar__qr { display: none; }
@media (hover: hover) and (pointer: fine) {
  .baixar__qr {
    display: flex; align-items: center; gap: 16px; margin: 16px 0 0;
    color: var(--texto-3); font-size: .875rem; line-height: 1.5; max-width: 36rem;
  }
  .baixar__qr strong { color: var(--texto-2); font-weight: 600; }
}
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: clamp(22px, 3vw, 32px); }
.cartao h2 { font-size: 1.25rem; font-stretch: 104%; letter-spacing: -.01em; margin-bottom: 8px; }
.cartao > p, .cartao > div > p:not(.cartao__sistema) { color: var(--texto-2); }
.cartao__sistema { margin-bottom: 10px; color: var(--texto-3); font-size: .875rem; font-weight: 500; }
.cartao__guia { margin-top: 12px; }
.qr { margin-top: 18px; width: 176px; height: 176px; border-radius: 12px; background: #fff; padding: 8px; }
.qr--pequeno { flex: none; margin: 0; width: 96px; height: 96px; padding: 6px; border-radius: 10px; }
.requisitos { margin: 8px 0 0; display: grid; }
.requisitos div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--borda); }
.requisitos div:last-child { border-bottom: 0; }
@media (max-width: 479px) { .requisitos div { grid-template-columns: 1fr; gap: 2px; } }
.requisitos dt { color: var(--texto-3); font-size: .9375rem; }
.requisitos dd { margin: 0; font-weight: 500; }
#depois-titulo { margin-bottom: 20px; }
@media (max-width: 479px) { .requisitos div { grid-template-columns: 6.5rem 1fr; } }
.passos { list-style: none; counter-reset: passo; display: grid; }
.passos > li { counter-increment: passo; position: relative; padding: 0 0 14px 44px; }
.passos > li::before {
  content: counter(passo); position: absolute; left: 0; top: -2px; width: 28px; height: 28px;
  display: grid; place-items: center; border: 1px solid var(--borda); border-radius: 50%;
  color: var(--link); font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.passos p { color: var(--texto-2); }
.baixar .nota-legal { margin-top: 24px; }

/* ---------- 404 ---------- */
.nao-encontrada { max-width: 760px; margin: 0 auto; padding: clamp(56px, 12vw, 140px) var(--margem) clamp(40px, 8vw, 80px); }
.nao-encontrada h1 { font-size: clamp(2.5rem, 1.55rem + 3.2vw, 3.5rem); font-stretch: 108%; line-height: 1.04; letter-spacing: -.028em; }

/* ---------- Rodapé ---------- */
.rodape { margin-top: clamp(72px, 10vw, 120px); border-top: 1px solid var(--borda); background: #06080A; }
main:has(> .chamada:last-child) + .rodape { margin-top: 0; }
.rodape__faixa {
  max-width: var(--largura); margin: 0 auto; padding: 48px var(--margem) 24px;
  display: grid; gap: 32px;
}
@media (min-width: 860px) { .rodape__faixa { grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; } }
.rodape__marca p { color: var(--texto-3); font-size: .9375rem; max-width: 30rem; }
.rodape__marca p + p { margin-top: 10px; }
.rodape__nome { display: flex; align-items: center; margin-bottom: 16px; color: var(--texto) !important; }
.rodape__nome .marca__logo { height: 24px; }
.rodape__empresa { white-space: nowrap; }
.rodape__titulo { font-size: .875rem; font-weight: 600; color: var(--texto); margin-bottom: 8px; }
.rodape ul { list-style: none; display: grid; gap: 0; }
.rodape nav a { display: inline-flex; align-items: center; min-height: 40px; min-width: 44px; color: var(--texto-2); text-decoration: none; font-size: .9375rem; }
.rodape nav a:hover, .rodape nav a[aria-current] { color: var(--texto); text-decoration: underline; }
.rodape__legal {
  position: relative; max-width: var(--largura); margin: 0 auto; padding: 16px var(--margem) 40px;
  color: var(--texto-3); font-size: .8125rem;
}
/* O fio acompanha o conteúdo (começa onde o texto começa, não na borda da caixa). */
.rodape__legal::before { content: ""; position: absolute; top: 0; left: var(--margem); right: var(--margem); height: 1px; background: var(--borda); }
@media (max-width: 959px) {
  .rodape nav a { min-height: 44px; }
  /* Espaço para a doca não cobrir os últimos links. */
  .tem-doca .rodape { padding-bottom: 88px; }
}

/* ---------- Movimento ----------
   Tudo que some para animar depende da classe .anima no <html>, que só o app.js coloca, e só
   quando o sistema não pede movimento reduzido. Sem JS, o conteúdo aparece no estado final.
   Movimento guardado para: a trilha de Aprender, o traço dos gráficos, a troca de tela do palco,
   o contorno do símbolo na chamada final, títulos (8 px + opacidade) e telas (recorte que se abre, uma vez). */
@media (prefers-reduced-motion: no-preference) {
  .topo__faixa::before { transition: opacity .28s var(--saida), transform .28s var(--saida); }
  .topo__nav a, .topo__nav a::after, .topo__acoes > .botao-baixar::after {
    transition: color .2s, background-color .2s, opacity .24s var(--saida), transform .24s var(--saida);
  }
  .botao-baixar, .botao, .topo__menu, .folha__fechar, .doca__secao { transition: background-color .2s, box-shadow .2s, transform .12s; }
  .botao-baixar__seta { transition: transform .2s var(--saida); }
  .perguntas summary::after { transition: transform .2s ease; }

  .anima [data-revelar] { transition: opacity .6s var(--saida), transform .6s var(--saida); }
  .anima [data-revelar]:not(.visivel) { opacity: 0; transform: translate3d(0, 8px, 0); }
  .anima [data-revelar="tela"] { transition: clip-path .9s var(--saida); }
  .anima [data-revelar="tela"]:not(.visivel) { opacity: 1; transform: none; clip-path: inset(0 0 12% 0); }

  .anima .traco { stroke-dasharray: 1 1; transition: stroke-dashoffset 1.6s cubic-bezier(.45, .05, .2, 1) .2s; }
  .anima .traco:not(.visivel) { stroke-dashoffset: 1; }
  .anima .grafico__preenchimento, .anima .grafico__ponto { transition: opacity .8s ease 1.3s; }
  .anima .grafico__preenchimento:not(.visivel), .anima .grafico__ponto:not(.visivel) { opacity: 0; }

  .anima .ponto { animation: pulso 2.4s ease-in-out infinite; }
  @keyframes pulso { 50% { box-shadow: 0 0 0 6px rgba(53, 212, 154, 0); } }

  main { transition: opacity .18s ease; }
  main.trocando { opacity: 0; transition: opacity .12s ease; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Política de Privacidade (/privacidade): texto longo, legível, sem ornamento. */
.legal { max-width: 46rem; padding-block: clamp(48px, 8vw, 96px) 0; }
.legal__topo { padding-bottom: 32px; border-bottom: 1px solid var(--borda); margin-bottom: 8px; }
.legal__topo h1 { font-size: clamp(2.25rem, 1.6rem + 2vw, 3rem); font-stretch: 106%; line-height: 1.06; letter-spacing: -.024em; }
.legal__lide { margin-top: 16px; color: var(--texto-2); font-size: 1.0625rem; }
.legal__data { margin-top: 8px; color: var(--texto-3); font-size: .875rem; }
.legal section { padding-top: 32px; }
.legal h2 { font-size: 1.25rem; font-stretch: 104%; letter-spacing: -.012em; }
.legal p, .legal li { color: var(--texto-2); line-height: 1.7; }
.legal p { margin-top: 12px; }
.legal ul { margin-top: 12px; padding-left: 1.25rem; display: grid; gap: 6px; }
.legal a { color: var(--azul); }
.legal__rodape { margin-top: 48px !important; padding-top: 24px; border-top: 1px solid var(--borda); font-size: .9375rem; }