/* GERADO por _src/build.py a partir de design-system/publicado/project/tokens.css (DS 2.0), com o bloco de
   aliases no fim (nomes antigos do CSS do site -> DS 2.0; mapa em ALIASES no build.py). Não editar à mão. */
/* ITERA Investimentos — generated from tokens.json */
:root, [data-theme="dark"] {
  --yellow-000: #fffde7; /* Escala oficial do Itera Yellow, o tom mais claro. Só em texturas e degradês; nunca como fundo de página. */
  --yellow-100: #fffbc2; /* Escala oficial. Brilho em texturas e realces de vidro. */
  --yellow-200: #fff899; /* Escala oficial. Brilho do streak e realces de vidro. */
  --yellow-300: #fef56c; /* Escala oficial. Hover do CTA amarelo no escuro (cta-hover). */
  --yellow-400: #fef133; /* Itera Yellow, a cor de assinatura: CTA no escuro, palavra de destaque no escuro, linha da carteira no gráfico, item ativo. No máximo 10% da superfície. Nunca como texto ou ícone sobre fundo claro. */
  --yellow-500: #d0c62a; /* Escala oficial. Meios-tons de texturas 3D e degradês. */
  --yellow-600: #9d9520; /* Escala oficial. Meios-tons de texturas 3D e degradês. */
  --yellow-700: #6b6515; /* Escala oficial. Destaque em texto no fundo claro (accent do tema claro): 5,4:1 sobre neutral-100, 6,0:1 sobre neutral-000 e 4,8:1 sobre neutral-200. */
  --yellow-800: #3d3a0c; /* Escala oficial. Sombras de texturas e degradês. */
  --yellow-900: #191805; /* Escala oficial. O fim quase preto do degradê amarelo. */
  --neutral-000: #ffffff; /* Branco: texto principal no escuro, card no claro, texto sobre o CTA preto. */
  --neutral-100: #f2f2f2; /* Fundo do tema claro, o claro oficial do manual. */
  --neutral-200: #e5e5e5; /* Segunda camada e dobra alternada no claro; fio decorativo no claro. */
  --neutral-300: #c6c6c6; /* Escala oficial. Divisórias e ilustrações; não serve como texto. */
  --neutral-400: #9e9e9e; /* Texto secundário no escuro (text-2): 7,4:1 sobre neutral-900 e 5,1:1 sobre neutral-600. Também a série do índice de referência nos gráficos. */
  --neutral-500: #646464; /* Texto secundário no claro (text-2): 5,3:1 sobre neutral-100. Borda de campos e controles nos dois temas; estado desabilitado. No escuro, não é texto (3,3:1). */
  --neutral-600: #2e2e2e; /* Stone. Hover de linha e segunda camada elevada no escuro (surface-3). */
  --neutral-700: #1f1f1f; /* Graphite. Campos, chips e segunda camada no escuro (surface-2); fundo do botão secundário. */
  --neutral-800: #141414; /* Card e dobra alternada no escuro (surface-1, bg-alt). */
  --neutral-900: #0a0a0a; /* Deep Black. Fundo do tema escuro, texto no claro, texto sobre o amarelo (16,8:1). O preto da marca: nunca #000000. */
  --itera-yellow: var(--yellow-400); /* Nome oficial do amarelo da marca (#FEF133). */
  --deep-black: var(--neutral-900); /* Nome oficial do preto da marca (#0A0A0A). Texto sobre amarelo, verde e vermelho. */
  --graphite: var(--neutral-700); /* Nome oficial do cinza Graphite (#1F1F1F). Fundo do botão secundário. */
  --stone: var(--neutral-600); /* Nome oficial do cinza Stone (#2E2E2E). */
  --bg: var(--neutral-900); /* Fundo da página. O trader é escuro com pausas em claro; o alta renda é claro com pausas em preto. */
  --bg-alt: var(--neutral-800); /* Dobra alternada: a seção que quebra a sequência sem trocar de tema. */
  --surface-1: var(--neutral-800); /* Cards e painéis. */
  --surface-2: var(--neutral-700); /* Segunda camada: campos, chips, tooltips, skeletons. */
  --surface-3: var(--neutral-600); /* Hover de linha e controle segmentado inativo. */
  --text: var(--neutral-000); /* Texto principal sobre bg, bg-alt, surface-1, surface-2 e surface-3 (13:1 ou mais nos dois temas). */
  --text-2: var(--neutral-400); /* Texto secundário, rótulos e metadados sobre bg, bg-alt, surface-1, surface-2 e surface-3 (4,7:1 ou mais). Não há terceiro nível de texto. */
  --text-3: var(--text-2); /* Legado do DS 1.0, igual a text-2. Não usar em peças novas. */
  --accent: var(--yellow-400); /* Destaque em texto: a parte Light do título, rótulos e numeração. Amarelo no escuro e oliva no claro (4,8:1 ou mais sobre bg, surface-1 e surface-2). */
  --border: rgba(255,255,255,0.08); /* Fio decorativo de card e divisória de lista; não delimita controle. */
  --border-strong: var(--neutral-500); /* Borda de campo, badge e controle (3,3:1 no escuro e 5,3:1 no claro). */
  --focus-ring: var(--yellow-400); /* Contorno de foco de 2px com 2px de afastamento: amarelo no escuro, preto no claro. */
  --cta: var(--yellow-400); /* Fundo do botão primário: amarelo no escuro, preto no claro (o amarelo some sobre o claro, 1,1:1). Um por tela. */
  --cta-text: var(--neutral-900); /* Texto e ícone sobre cta (16,8:1 no escuro e 19,8:1 no claro). */
  --cta-hover: var(--yellow-300); /* Hover e pressionado do botão primário. */
  --success: #22c55e; /* Ganho, compra, concluído. Sempre com seta e sinal, nunca só a cor. No claro, 5,0:1 sobre surface-1 e 4,49:1 sobre bg (no limite): prefira sobre card. */
  --danger: #ef4444; /* Perda, venda, erro, ação destrutiva e o indicador de ao vivo. Sempre com seta e sinal. */
  --info: #3b82f6; /* Só status informativo; nunca como cor de marca. */
  --warning: #f59e0b; /* Atenção. Laranja de propósito, para nunca se confundir com o amarelo da marca. */
  --chart-fill: rgba(254,241,51,0.20); /* Topo da área sob a linha da carteira do cliente, desaparecendo para transparente. */
  --brand-yellow: var(--itera-yellow); /* Legado do DS 1.0: igual a itera-yellow. */
  --brand-yellow-hover: var(--yellow-300); /* Legado do DS 1.0: use cta-hover. */
  --brand-black: var(--deep-black); /* Legado do DS 1.0: igual a deep-black. */
  --brand-offwhite: var(--neutral-100); /* Legado do DS 1.0: agora é o claro neutro #F2F2F2. */
  --green-black: var(--neutral-800); /* Legado do DS 1.0: o preto esverdeado saiu; agora é o neutro #141414. */
  --concrete: var(--neutral-400); /* Legado do DS 1.0: igual a neutral-400. */
  --shadow: 0 30px 80px rgba(0,0,0,0.65); /* Painéis e mockups grandes sobre fundo escuro. */
  --shadow-sm: 0 12px 32px rgba(0,0,0,0.45); /* Cards e painéis menores. */
  --shadow-cta-light: 0 12px 30px rgba(0,0,0,0.16); /* Botão primário preto no tema claro. */
  --glow: 0 0 24px rgba(254,241,51,0.18); /* Brilho do CTA amarelo principal do hero, em repouso. */
  --glow-2: 0 0 44px rgba(254,241,51,0.30); /* Brilho do CTA amarelo principal no hover. */
  --glow-cta: 0 0 24px rgba(254,241,51,0.18); /* Legado do DS 1.0: igual a glow. */
}
[data-theme="light"] {
  --itera-yellow: var(--yellow-400);
  --deep-black: var(--neutral-900);
  --graphite: var(--neutral-700);
  --stone: var(--neutral-600);
  --bg: var(--neutral-100);
  --bg-alt: var(--neutral-200);
  --surface-1: var(--neutral-000);
  --surface-2: var(--neutral-200);
  --surface-3: var(--neutral-200);
  --text: var(--neutral-900);
  --text-2: var(--neutral-500);
  --text-3: var(--text-2);
  --accent: var(--yellow-700);
  --border: var(--neutral-200);
  --border-strong: var(--neutral-500);
  --focus-ring: var(--neutral-900);
  --cta: var(--neutral-900);
  --cta-text: var(--neutral-000);
  --cta-hover: var(--neutral-700);
  --success: #15803d;
  --danger: #b91c1c;
  --info: #1d4ed8;
  --warning: #b45309;
  --brand-yellow: var(--itera-yellow);
  --brand-yellow-hover: var(--yellow-300);
  --brand-black: var(--deep-black);
  --brand-offwhite: var(--neutral-100);
  --green-black: var(--neutral-800);
  --concrete: var(--neutral-400);
}
:root {
  --space-1: 4px; /* Encaixe entre ícone e rótulo. */
  --space-2: 8px; /* Vão entre ícone e texto no botão; pilhas apertadas. */
  --space-3: 12px; /* Vão entre chips. */
  --space-4: 16px; /* Vão padrão. */
  --space-5: 20px; /* Padding compacto de card; padding horizontal do botão. */
  --space-6: 24px; /* Padding de card; vão do grid; distância entre o título e o fio. */
  --space-8: 32px; /* Entre grupos de cards. */
  --space-10: 40px; /* Espaço interno de seção. */
  --space-12: 48px; /* Margem máxima da página no desktop (ver page-margin). */
  --space-16: 64px; /* Espaço entre seções. */
  --space-20: 80px; /* Espaço do hero. */
  --space-24: 96px; /* Margem de slide de 1920×1080. */
  --space-32: 128px; /* Espaço grande de campanha. */
  --radius-xs: 4px; /* Tag editorial. */
  --radius-sm: 6px; /* Tooltip e badge mini. */
  --radius-md: 8px; /* Botões, campos, controle segmentado e tooltip de gráfico. */
  --radius-lg: 16px; /* Cards e foto em card. */
  --radius-xl: 24px; /* Contêineres, molduras de mockup e ícone grande de app. */
  --radius-pill: 999px; /* Badge, tag, seletor de período, avatar e chip do fluxo didático. */
  --grad-itera: linear-gradient(90deg, #fef133 0%, #0a0a0a 100%); /* Degradê Itera oficial, do amarelo ao Deep Black: fundos e superfícies de vidro. */
  --grad-mono: linear-gradient(90deg, #ffffff 0%, #0a0a0a 100%); /* Degradê oficial do branco ao Deep Black: fundos monocromáticos e vidro prateado. */
  --streak: linear-gradient(112deg, transparent 46%, rgba(254,241,51,0.10) 58%, rgba(255,248,153,0.16) 63%, transparent 74%); /* Brilho diagonal do site sobre superfícies escuras. É efeito, não degradê de marca. */
  --page-max: 1240px; /* Largura máxima do conteúdo. */
  --page-margin: clamp(20px, 5vw, 48px); /* Margem lateral da página, de 20px no celular a 48px no desktop. */
  --grid-gap: 24px; /* Vão entre colunas. */
  --grid-columns-mobile: 4; /* Colunas no celular. */
  --grid-columns-desktop: 12; /* Colunas no desktop e no slide. */
  --slide-margin: 96px; /* Margem do slide de 1920×1080. */
  --fluid-h1: clamp(46px, 7.4vw, 104px); /* font-size do título principal de página. */
  --fluid-h2: clamp(32px, 4.4vw, 60px); /* font-size do título de seção. */
  --fluid-lead: clamp(17px, 1.35vw, 20px); /* font-size do texto de abertura. */
  --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --text-web-h1: 500 104px/1 var(--font-sans); /* Título principal de página no site. No site o tamanho é fluido (fluid-h1); aqui, o máximo. Primeira parte em Medium e parte final em Light (300), que pode usar accent. */
  --text-web-h2: 500 60px/1.05 var(--font-sans); /* Título de seção no site; fluido em fluid-h2. Mesma regra de Medium + Light. */
  --text-web-h3: 500 21px/1.3 var(--font-sans); /* Título de card e subtítulo. */
  --text-web-lead: 400 20px/1.55 var(--font-sans); /* Texto de abertura abaixo do título, em text-2; fluido em fluid-lead. */
  --text-web-body: 400 16px/1.6 var(--font-sans); /* Texto corrido no site. */
  --text-web-label: 600 12px/1.4 var(--font-sans); /* Rótulo acima do título, em caixa alta e na cor accent. */
  --text-display: 500 72px/72px var(--font-sans); /* Post, capa e slide de abertura. De 2 a 4 linhas curtas, com a parte final em Light. */
  --text-statement: 300 56px/60px var(--font-sans); /* Frase institucional em caixa alta Light, com a palavra-chave em accent. Capas e aberturas de seção em slide. */
  --text-h1: 500 48px/52px var(--font-sans); /* Título de slide ou de post. */
  --text-h2: 500 36px/40px var(--font-sans); /* Título de seção em peças fixas. */
  --text-h3: 500 28px/32px var(--font-sans); /* Título de card grande; ticker de ativo (em peso 700). */
  --text-title: 500 20px/26px var(--font-sans); /* Título de card e saudação na barra do app. */
  --text-body: 400 16px/24px var(--font-sans); /* Texto corrido em peças fixas e no app. */
  --text-small: 400 14px/20px var(--font-sans); /* Texto de interface, rótulo de botão (em 500) e badges. */
  --text-caption: 400 12px/16px var(--font-sans); /* Metadados, eixos de gráfico e disclaimers. */
  --text-overline: 500 11px/16px var(--font-sans); /* Caixa alta. Linhas de apoio empilhadas e numeração "01 ——", só em posts, slides e campanhas. */
  --text-numeral: 500 36px/40px var(--font-sans); /* Saldos e cotações. Sempre com algarismos tabulares, formato pt-BR e sinal explícito na variação (+ e U+2212). */
}
.web-h1 {
  font-family: var(--font-sans);
  font-size: 104px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.web-h2 {
  font-family: var(--font-sans);
  font-size: 60px;
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.web-h3 {
  font-family: var(--font-sans);
  font-size: 21px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0;
}
.web-lead {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: 0;
}
.web-body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0;
}
.web-label {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.16em;
}
.display {
  font-family: var(--font-sans);
  font-size: 72px;
  line-height: 72px;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.statement {
  font-family: var(--font-sans);
  font-size: 56px;
  line-height: 60px;
  font-weight: 300;
  letter-spacing: -0.01em;
}
.h1 {
  font-family: var(--font-sans);
  font-size: 48px;
  line-height: 52px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.h2 {
  font-family: var(--font-sans);
  font-size: 36px;
  line-height: 40px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.h3 {
  font-family: var(--font-sans);
  font-size: 28px;
  line-height: 32px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.title {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
.small {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
.caption {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0;
}
.overline {
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.2em;
}
.numeral {
  font-family: var(--font-sans);
  font-size: 36px;
  line-height: 40px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/ManropeV5VF.woff2") format("woff2-variations"),url("../fonts/ManropeV5VF.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ===== Aliases: nomes do DS antigo usados pelo CSS do site -> DS 2.0 (ALIASES em _src/build.py).
   Em :root e em [data-theme] para acompanhar o tema claro. ===== */
:root,[data-theme] {
  --ink: var(--deep-black); /* era #000000; o DS não usa preto puro */
  /* --bg: definido pelo DS 2.0. DS 2.0: #0A0A0A (era #050505) */
  --panel: var(--surface-1); /* era #0B0B0B; card e painel #141414 */
  --panel-2: var(--surface-2); /* era #111111; campos e segunda camada #1F1F1F */
  --panel-3: var(--surface-2); /* era #181818; sem par (surface-3 #2E2E2E é hover): segunda camada */
  --sunken: var(--bg); /* era #030303; o fundo mais escuro do DS é o próprio bg */
  --cream: var(--neutral-100); /* era #EFECE4; o claro do DS (bg do tema claro, #F2F2F2) */
  --cream-2: var(--neutral-200); /* era #E5E1D6; dobra alternada do claro (#E5E5E5) */
  --cream-line: rgba(10,10,10,.10); /* sem par: fio sobre o claro, mesmo alfa de antes no preto da marca */
  --yellow: var(--itera-yellow); /* era #FDF234; Itera Yellow #FEF133 */
  --yellow-soft: var(--yellow-300); /* era #FFF98D; hover do CTA amarelo (#FEF56C) */
  --gold: var(--yellow-500); /* era #E2CA21; meio-tom da escala (#D0C62A) */
  --gold-dim: var(--yellow-700); /* era #716011; destaque em texto no claro (#6B6515) */
  --yellow-wash: rgba(254,241,51,.07); /* sem par: amarelo novo com o alfa de antes */
  --yellow-line: rgba(254,241,51,.38); /* sem par: amarelo novo com o alfa de antes */
  --line: var(--border); /* fio decorativo, branco a 8% */
  --line-2: rgba(255,255,255,.16); /* sem par: fio mais forte (border-strong #646464 é de controle) */
  /* --text: definido pelo DS 2.0. DS 2.0: #FFFFFF */
  --muted: var(--text-2); /* era #A6A6A6; texto secundário #9E9E9E */
  --dim: var(--neutral-400); /* era #707070 (3,9:1, fora do AA); o DS tem dois níveis de texto: #9E9E9E */
  --ink-text: var(--deep-black); /* era #0B0B0B; texto no claro */
  --ink-muted: var(--neutral-500); /* era #57554F; texto secundário no claro (#646464) */
  --ink-dim: var(--neutral-500); /* era #8A877E; dois níveis de texto: igual ao secundário */
  /* --danger: definido pelo DS 2.0. DS 2.0: #EF4444 (era #FF5A52) */
  --danger-wash: rgba(239,68,68,.08); /* sem par: danger novo com o alfa de antes */
  --danger-line: rgba(239,68,68,.5); /* sem par: danger novo com o alfa de antes */
  --live: var(--danger); /* era #FF4D4D; o ao vivo usa danger */
  --ok: var(--success); /* era #4ADE80; success #22C55E */
  --sp-1: var(--space-1); /* 4px */
  --sp-2: var(--space-2); /* 8px */
  --sp-3: var(--space-3); /* 12px */
  --sp-4: var(--space-4); /* 16px */
  --sp-5: var(--space-6); /* 24px */
  --sp-6: var(--space-8); /* 32px */
  --sp-7: var(--space-12); /* 48px */
  --sp-8: var(--space-16); /* 64px */
  --sp-9: var(--space-24); /* 96px */
  --sp-10: 140px; /* sem par (o maior do DS é space-32, 128px): mantido */
  --r-sm: var(--radius-sm); /* era 8px; 6px */
  --r-md: var(--radius-md); /* era 12px; 8px */
  --r-lg: var(--radius-lg); /* era 20px; 16px */
  --r-xl: var(--radius-xl); /* era 28px; 24px */
  --r-2xl: var(--radius-xl); /* era 36px; sem par: 24px, o maior raio de contêiner do DS */
  --pill: var(--radius-pill); /* 999px */
  /* --glow: definido pelo DS 2.0. DS 2.0, amarelo novo */
  /* --glow-2: definido pelo DS 2.0. DS 2.0, amarelo novo */
  /* --shadow: definido pelo DS 2.0. DS 2.0, mesmo valor */
  /* --shadow-sm: definido pelo DS 2.0. DS 2.0, mesmo valor */
  /* --streak: definido pelo DS 2.0. DS 2.0, amarelo novo */
  --page: var(--page-max); /* 1240px: largura do conteúdo */
  --gut: var(--page-margin); /* clamp(20px,5vw,48px) */
  --header-h: 76px; /* sem par: altura do header do site */
  --ease: cubic-bezier(.2,.8,.2,1); /* curva do DS (era .2,.7,.2,1) */
  --z-header: 100; /* sem par */
  --z-mobile-cta: 120; /* sem par */
  --z-skip: 300; /* sem par */
  /* --font-sans: definido pelo DS 2.0. DS 2.0, Manrope */
  --page-outer: calc(var(--page) + 2*var(--gut)); /* 29/09: coluna externa (conteúdo + margens), 1336px no máximo; mídia de hero e de fecho fica dentro dela, a cor da dobra sobra nas laterais */
}