/* Orbyt · projeto de demonstração do curso Conversão Visual. Tokens = coleção "Orbyt · Semânticos" do Figma. */
@font-face { font-family: 'Manrope'; src: url('fonts/manrope-300.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('fonts/manrope-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('fonts/manrope-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #050507; --surface: #0d0d12; --surface-2: #14141a; --surface-3: #24242d;
  --fill: #ffffff0a; --fill-hover: #ffffff14; --border: #ffffff0f; --border-strong: #ffffff33;
  --text: #f5f5f7; --text-2: #b4b4c2; --text-3: #8a8a9a; --text-4: #62626f;
  --brand: #6d5dfc; --brand-text: #8b7dff; --brand-subtle: #6d5dfc29; --on-brand: #fff;
  --btn: #e8e8ee; --btn-hover: #fff; --on-btn: #08080b;
  --ok: #4ade80; --ok-bg: #4ade801f; --erro: #f87171; --erro-bg: #f871711f;
  --support: #fb923c; --star: #facc15; --chart-muted: #3e3e4a;
  --wrap: min(1280px, 88.889vw);
  --sec: 112px; --cab: 48px;
  --h1: 72px; --h2: 48px; --h3: 32px; --num: 40px; --lead: 18px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 120px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.5 'Manrope', system-ui, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, ul, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }
button, input { font: inherit; color: inherit; }
::selection { background: color-mix(in srgb, var(--brand-text) 30%, transparent); color: var(--text); }
h1, h2, h3, .t-lead { text-wrap: balance; }
p, li { text-wrap: pretty; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: fixed; left: 16px; top: -64px; z-index: 100; background: var(--btn); color: var(--on-btn); padding: 8px 16px; border-radius: 999px; font-weight: 500; font-size: 14px; }
.pular:focus { top: 16px; }
:focus-visible { outline: 2px solid var(--brand-text); outline-offset: 2px; }

/* tipografia (estilos Orbyt/*) */
.t-h1 { font-size: var(--h1); font-weight: 300; line-height: 1.04; letter-spacing: -.03em; }
.t-h2 { font-size: var(--h2); font-weight: 300; line-height: 1.08; letter-spacing: -.025em; }
.t-h3 { font-size: var(--h3); font-weight: 300; line-height: 1.25; letter-spacing: -.02em; }
.t-num { font-size: var(--num); font-weight: 300; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.t-card { font-size: 20px; font-weight: 400; line-height: 1.4; letter-spacing: -.01em; }
.t-lead { font-size: var(--lead); line-height: 1.5; }
.t-body { font-size: 16px; line-height: 1.5; }
.t-rot { font-size: 14px; font-weight: 500; line-height: 1; }
.t-small { font-size: 14px; line-height: 1.4; }
.grad { background: linear-gradient(180deg, var(--text) 30%, color-mix(in srgb, var(--text) 60%, transparent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cor-2 { color: var(--text-2); } .cor-3 { color: var(--text-3); } .cor-4 { color: var(--text-4); }
.cor-brand { color: var(--brand-text); } .cor-ok { color: var(--ok); } .cor-erro { color: var(--erro); }
.op-8 { opacity: .8; }

/* ícones (ICO-02/03) */
.ic { width: 24px; height: 24px; flex: none; fill: none; stroke-width: 1.5; }
.ic--16 { width: 16px; height: 16px; } .ic--32 { width: 32px; height: 32px; }

/* controles (CTL-01/02/03) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; padding: 0 24px; font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color .3s, color .3s; }
.btn:has(.ic) { padding-right: 20px; }
.btn--lg { height: 48px; } .btn--md { height: 40px; }
.btn--pri { background: var(--btn); color: var(--on-btn); }
.btn--pri:hover { background: var(--btn-hover); }
@keyframes atravessa { 45% { transform: translateX(14px); opacity: 0; } 46% { transform: translateX(-14px); opacity: 0; } }
.btn--pri:hover .ic { animation: atravessa .5s var(--ease); }
.btn:active { scale: .98; }
.btn { transition: background-color .2s, color .2s, scale .15s; }
.btn[disabled] { cursor: not-allowed; opacity: .5; }
.btn__rot { display: inline-flex; align-items: center; gap: 8px; }
.gira { animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.btn--sec { background: var(--fill); color: var(--text); }
.btn--sec:hover { background: var(--fill-hover); }
.btn-ic { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 999px; background: var(--fill); cursor: pointer; transition: background-color .3s; }
.btn-ic:hover { background: var(--fill-hover); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--fill); color: var(--text-2); font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; width: max-content; }
.chip:has(.ic) { padding-left: 10px; }
.chip--sm { height: 28px; }
.chip--brand { background: var(--brand-subtle); color: var(--brand-text); }
.chip--g { background: var(--ok-bg); color: var(--ok); }
.chip--r { background: var(--erro-bg); color: var(--erro); }
.tile { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--surface-3); font-size: 14px; font-weight: 500; }
.tile--32 { width: 32px; height: 32px; border-radius: 16px; background: var(--surface-2); }

/* header (NAV-01/03/04) */
.hd { position: fixed; z-index: 50; top: 32px; left: 50%; transform: translateX(-50%); width: calc((1280px + 2 * var(--e, 0px)) * var(--s, 1)); height: 64px; padding: 0 12px 0 24px; border-radius: 999px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: rgba(8, 8, 10, .6); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); }
.logo { display: inline-flex; align-items: center; gap: 10px; width: max-content; color: var(--text); }
.logo__marca { width: 28px; height: 28px; }
.logo__nome { font-size: 20px; letter-spacing: -.01em; line-height: 1; }
.hd__nav { display: flex; gap: 4px; }
.hd__nav a { padding: 8px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; line-height: 1; color: var(--text-2); transition: color .3s, background-color .3s; }
.hd__nav a:hover { color: var(--text); background: var(--fill); }
.hd__dir { display: flex; justify-content: flex-end; gap: 8px; }
.hd__menu { display: none; }
.menu { position: absolute; top: calc(100% + 8px); left: 0; right: 0; padding: 8px; border-radius: 20px; background: rgba(13, 13, 18, .92); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); display: grid; }
.menu[hidden] { display: none; }
.menu a { padding: 12px 16px; border-radius: 12px; font-size: 16px; color: var(--text-2); }
.menu a:hover { background: var(--fill); color: var(--text); }

/* HERO: palco 1440x900 do Figma, escalado (escala.js) */
.hero { position: relative; overflow: hidden; min-height: 100svh; height: max(100svh, calc(900px * var(--s, 1))); isolation: isolate; }
.ceu { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.palco { position: absolute; left: 50%; bottom: 0; width: 1440px; height: 900px; transform: translateX(-50%) scale(var(--s, 1)); transform-origin: 50% 100%; }
.moeda { position: absolute; left: calc(941px + var(--e, 0px)); top: -110px; width: 829px; height: 896px; z-index: -1; pointer-events: none; translate: var(--mx, 0px) var(--my, 0px); transition: translate 1.6s var(--ease); }
.hero__txt { position: absolute; left: calc(80px - var(--e, 0px)); top: 144px; width: 720px; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.hero__lead { max-width: 560px; }
.hero__acao { display: flex; align-items: center; gap: 24px; padding-top: 16px; flex-wrap: wrap; }
.prova { display: flex; align-items: center; gap: 12px; }
.avs { display: flex; }
.avs img { width: 36px; height: 36px; border-radius: 50%; outline: 2px solid var(--bg); margin-left: -10px; position: relative; }
.avs img:first-child { margin-left: 0; }
.avs img:nth-child(1) { z-index: 5; } .avs img:nth-child(2) { z-index: 4; } .avs img:nth-child(3) { z-index: 3; } .avs img:nth-child(4) { z-index: 2; }
.prova--sup .avs img { outline-color: var(--surface); }
.prova__txt { display: flex; flex-direction: column; gap: 4px; }
.estrelas { display: flex; gap: 2px; color: var(--star); }
.estrelas svg { width: 16px; height: 16px; fill: currentColor; stroke: currentColor; stroke-width: 1; }

.hc { position: absolute; display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: 20px; background: var(--surface); overflow: hidden; }
.hc__topo, .hc__linha { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hc__topo { align-items: flex-start; }
.hc__topo > div { display: flex; flex-direction: column; gap: 8px; }
/* colunas do palco: 80 | 256 | 24 | 200 | 24 | 224 | 24 | 272 | 24 | 232 | 80 (cards dentro da grade, sem sangria) */
.hc--port { left: calc(80px - var(--e, 0px)); top: 572px; width: calc(256px + var(--e, 0px) * .4); height: 360px; }
.graf { position: relative; }
.ch--port { width: 100%; height: 150px; overflow: visible; }
.eixo { display: flex; justify-content: space-between; }
.hc--auto { left: calc(360px - var(--e, 0px) * .6); top: 572px; width: calc(200px + var(--e, 0px) * .4); height: 340px; padding-bottom: 56px; color: var(--on-brand); background: linear-gradient(180deg, #6d5dfc, #332a82); }
.auto__fim { margin-top: auto; display: flex; flex-direction: column; gap: 32px; }
.auto__val { display: flex; flex-direction: column; gap: 8px; }
.auto__base { display: flex; flex-direction: column; gap: 12px; }
.barra { height: 6px; border-radius: 999px; background: #ffffff33; overflow: hidden; }
.barra span { display: block; width: 62%; height: 100%; border-radius: inherit; background: #fff; transform-origin: left; }
.hc--alerta { left: calc(584px - var(--e, 0px) * .2); top: 572px; width: calc(224px + var(--e, 0px) * .4); height: 136px; gap: 12px; }
.hc--rende { left: calc(584px - var(--e, 0px) * .2); top: 732px; width: calc(224px + var(--e, 0px) * .4); height: 200px; gap: 12px; }
.ch--rende { width: 100%; height: 36px; overflow: visible; }
.hc--ativ { left: calc(832px + var(--e, 0px) * .2); top: 144px; width: calc(272px + var(--e, 0px) * .4); height: 216px; }
.ativ__totais { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ativ__tot { display: flex; gap: 12px; }
.ativ__tot > div { display: flex; flex-direction: column; gap: 4px; }
.traco { width: 2px; height: 44px; border-radius: 2px; flex: none; }
.traco--brand { background: var(--brand); } .traco--sup { background: var(--support); }
.barras { display: flex; justify-content: space-between; align-items: flex-end; height: 56px; flex: none; }
.barras span { display: flex; gap: 4px; align-items: flex-end; height: 100%; transition: opacity .2s; }
.barras span::before, .barras span::after { content: ''; width: 10px; height: 60px; border-radius: 4px; transform-origin: bottom; transition: transform .9s var(--ease); }
.barras span::before { transform: scaleY(calc(var(--a) / 60)); background: var(--brand); }
.barras span::after { transform: scaleY(calc(var(--b) / 60)); background: var(--support); }
.barras:hover span:not(:hover) { opacity: .3; }
.hc--tick { flex-direction: row; align-items: center; gap: 10px; width: calc(272px + var(--e, 0px) * .4); height: 72px; padding: 16px; transition: background-color .25s; }
.hc--tick:hover, .mov a:hover { background: var(--surface-2); }
.hc--btc { left: calc(832px + var(--e, 0px) * .2); top: 384px; } .hc--eth { left: calc(832px + var(--e, 0px) * .2); top: 752px; }
.tick__nome { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.ch--mini { width: 40px; height: 24px; overflow: visible; }
.tick__preco { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.tick__preco .t-rot { font-variant-numeric: tabular-nums; transition: color .6s; }
.sobe { color: var(--ok) !important; } .desce { color: var(--erro) !important; }
.hc--mov { left: calc(832px + var(--e, 0px) * .2); top: 480px; width: calc(272px + var(--e, 0px) * .4); height: 248px; gap: 4px; padding-bottom: 16px; }
.mov { margin: 0 -12px; }
.mov li + li a { box-shadow: 0 -1px 0 var(--border); }
.mov li:hover + li a, .mov li:hover a { box-shadow: none; }
.mov a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; transition: background-color .25s; }
.mov .t-rot { flex: 1; }
.hc--aloc { left: calc(1128px + var(--e, 0px) * .6); top: 448px; width: calc(232px + var(--e, 0px) * .4); height: 216px; gap: 20px; }
.hc--envio { left: calc(1128px + var(--e, 0px) * .6); top: 688px; width: calc(232px + var(--e, 0px) * .4); height: 240px; }
.hc--envio > div:last-child { display: flex; flex-direction: column; gap: 8px; }
.aloc { display: flex; align-items: center; gap: 16px; }
.rosca { width: 72px; height: 72px; transform: rotate(-90deg); flex: none; }
.rosca__f { fill: none; stroke-width: 9.6; transition: stroke-dasharray .9s var(--ease), stroke-dashoffset .9s var(--ease), opacity .2s; }
.aloc__leg li { cursor: default; transition: opacity .2s; }
.aloc.foco .rosca__f:not(.on), .aloc.foco li:not(.on) { opacity: .3; }
.rosca__f--1 { stroke: var(--brand); } .rosca__f--2 { stroke: #aba2ff; } .rosca__f--3 { stroke: var(--chart-muted); }
.aloc__leg { display: flex; flex-direction: column; gap: 12px; }
.aloc__leg li { display: flex; align-items: center; gap: 8px; }
.aloc__leg i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.contatos { display: flex; gap: 8px; }
.contato, .contatos__mais { width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; flex: none; }
.contato { overflow: hidden; background: var(--surface-3); outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .2s; }
.contato img { width: 100%; height: 100%; transition: transform .4s var(--ease), opacity .2s; opacity: .7; }
.contato:hover img { transform: scale(1.08); opacity: 1; }
.contato[aria-pressed="true"] { outline-color: var(--brand-text); }
.contato[aria-pressed="true"] img { opacity: 1; }
.contatos__mais { display: grid; place-items: center; background: var(--fill); color: var(--text-2); transition: background-color .2s, color .2s; }
.contatos__mais:hover { background: var(--fill-hover); color: var(--text); }
/* logos das moedas no tile (ICO-06): glifo neutro, tile igual em toda a página */
.cl { width: 24px; height: 24px; color: var(--text); }
.tile--32 .cl { width: 16px; height: 16px; }
/* dica dos gráficos */
.dica { position: absolute; left: 0; top: 0; padding: 4px 8px; border-radius: 999px; background: var(--surface-3); color: var(--text); white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums; translate: -50% calc(-100% - 10px); }
.dica[hidden] { display: none; }
.cruz { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.ch path { transition: stroke .6s; }

/* entrada da hero só em CSS (HER-07) */
@keyframes sobe { from { opacity: .01; transform: translateY(16px); } }
.h-in { animation: sobe .9s var(--ease) both; animation-delay: calc(var(--d) * 80ms); }
.c-in { animation: sobe 1s var(--ease) both; animation-delay: calc(240ms + var(--d) * 70ms); }
@keyframes flutua { 50% { transform: translateY(-14px) rotate(-1deg); } }
@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) { .moeda { animation: flutua 9s ease-in-out infinite; } }
.linha-anim { stroke-dasharray: 1; stroke-dashoffset: 1; animation: traca 1.6s var(--ease) .5s forwards; }
@keyframes traca { to { stroke-dashoffset: 0; } }
@keyframes cresce { from { scale: 1 0; } }
/* céu: três camadas que derivam devagar e algumas estrelas piscam (MOT-15: só textura, sem brilho) */
.ceu > g { transition: translate 1.4s var(--ease); translate: var(--px, 0px) var(--py, 0px); }
.ceu .camada { animation: deriva var(--t, 60s) ease-in-out infinite alternate; }
@keyframes deriva { 0% { transform: translate(0, 0); } 50% { transform: translate(var(--dx), var(--dy)); } 100% { transform: translate(calc(var(--dx) * -.6), calc(var(--dy) * .8)); } }
.ceu .pisca { animation: pisca var(--t, 4s) ease-in-out var(--d, 0s) infinite alternate; }
@keyframes pisca { to { opacity: .15; } }
.barras span::before, .barras span::after { animation: cresce 1s var(--ease) both; animation-delay: .7s; }
.barra span { animation: enche 1.4s var(--ease) .8s both; }
@keyframes enche { from { transform: scaleX(0); } }

/* seções */
.wrap { width: var(--wrap); margin-inline: auto; }
.sec { padding: var(--sec) 0; border-top: 1px solid var(--border); }
.cab { display: flex; flex-direction: column; gap: 16px; margin-bottom: var(--cab); max-width: 960px; }
.card { background: var(--surface); border-radius: 20px; padding: 24px; }
.js .rv { opacity: 0; transform: translateY(12px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }

/* 02 mercado */
.mkt { display: grid; grid-template-columns: 1fr 420px; gap: 24px; align-items: stretch; }
.mkt > * { min-width: 0; }
.seg { max-width: 100%; }
.mkt__tab { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mkt__ctl { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.seg { position: relative; display: inline-flex; padding: 4px; height: 40px; border-radius: 999px; background: var(--fill); }
.seg[data-filtros] { width: 360px; }
.seg__it { position: relative; z-index: 1; flex: 1 1 0; height: 32px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--text-3); font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color .2s, color .2s; }
.seg__ind { position: absolute; left: 0; top: 4px; height: 32px; border-radius: 999px; background: var(--surface-3); transition: transform .35s var(--ease); pointer-events: none; }
.seg.tem-ind .seg__it[aria-selected="true"] { background: transparent; }
.seg__it:hover { color: var(--text); }
.seg__it[aria-selected="true"] { background: var(--surface-3); color: var(--text); }
.seg--cheio { display: flex; }
.seg--cheio .seg__it { flex: 1; padding: 0; }
.busca { display: flex; align-items: center; gap: 8px; width: 240px; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--fill); color: var(--text-3); cursor: text; transition: background-color .3s; }
.busca:focus-within { background: var(--fill-hover); outline: 1px solid var(--border-strong); }
.busca input { flex: 1; min-width: 0; border: 0; background: none; outline: 0; font-size: 14px; color: var(--text); }
.busca input::placeholder { color: var(--text-4); }
.busca input::-webkit-search-cancel-button { display: none; }
.tab { width: calc(100% + 24px); margin: 0 -12px; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.tab th { padding: 4px 12px 8px; font-size: 14px; font-weight: 400; color: var(--text-4); text-align: left; }
.tab th.n, .tab td.n { text-align: right; }
.tab td { padding: 16px 12px; border-top: 1px solid var(--border); font-size: 14px; font-weight: 500; transition: background-color .3s; }
.tab .moeda-cel button span { line-height: 1.2; }
.tab td:first-child { border-radius: 12px 0 0 12px; } .tab td:last-child { border-radius: 0 12px 12px 0; }
.tab tbody tr { cursor: pointer; }
.tab tbody tr:hover td, .tab tbody tr[aria-selected="true"] td { background: var(--fill); }
.tab .moeda-cel { display: flex; align-items: center; gap: 12px; }
.tab .moeda-cel button { all: unset; display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.tab .moeda-cel button:focus-visible { outline: 2px solid var(--brand-text); outline-offset: 4px; border-radius: 4px; }
.tab .tk { font-weight: 400; color: var(--text-3); }
.tab .c-preco { width: 120px; } .tab .c-chg { width: 104px; } .tab .c-7d { width: 136px; } .tab .c-cap { width: 116px; color: var(--text-2); }
.tab .c-chg .chip { margin-left: auto; }
.tab .c-7d svg { width: 112px; height: 28px; overflow: visible; }
.mkt__nota { margin-top: auto; }
.vazio { padding: 32px 12px; color: var(--text-3); font-weight: 400; }
.det { display: flex; flex-direction: column; gap: 24px; }
.det > * { transition: opacity .2s; }
.det.troca > :not(.seg) { opacity: .2; }
.tab td.c-preco { transition: color .6s, background-color .3s; }
.det__topo { display: flex; align-items: center; gap: 12px; }
.det__topo > div { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.det__preco { display: flex; align-items: center; gap: 12px; }
.det__graf { position: relative; height: 132px; }
.det__graf svg { width: 100%; height: 100%; overflow: visible; }
.det__graf path { vector-effect: non-scaling-stroke; }
.det__tag { position: absolute; right: 0; top: 0; padding: 4px 8px; border-radius: 999px; background: var(--brand); color: #fff; transition: translate .6s var(--ease); pointer-events: none; }
.det__num { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.det__num div { display: flex; flex-direction: column; gap: 4px; }
.det__num dd { font-variant-numeric: tabular-nums; }

/* 03 produto (bento) */
.bento { display: grid; grid-template-columns: 520px 1fr 1fr; gap: 24px; height: 532px; }
.bento__col { display: flex; flex-direction: column; gap: 24px; min-height: 0; }
.bento__col > .card { flex: 1; }
.bento__col--c > .bc--auto { flex: 0 0 300px; }
.bc { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; position: relative; overflow: hidden; }
.bc > div:first-child:not(.hc__linha) { display: flex; flex-direction: column; gap: 8px; position: relative; z-index: 1; }
.swap { display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 16px; background: var(--surface-2); }
.swap__leg { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 12px; background: var(--fill); transition: outline-color .2s, background-color .2s; outline: 1px solid transparent; }
.swap__leg:hover { background: var(--fill-hover); }
.swap__leg:focus-within { outline-color: var(--border-strong); }
.swap__leg.erro { outline-color: color-mix(in srgb, var(--erro) 60%, transparent); }
.swap__leg.erro [data-saldo-de] { color: var(--erro); }
.swap__saldo { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; }
.pcts { display: flex; gap: 4px; }
.pcts button { height: 28px; padding: 0 10px; border: 0; border-radius: 999px; background: var(--fill); color: var(--text-3); font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color .2s, color .2s; }
.pcts button:hover { background: var(--fill-hover); color: var(--text); }
.pcts button[aria-pressed="true"] { background: var(--brand-subtle); color: var(--brand-text); }
.swap__inv { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; margin: -20px auto; border: 4px solid var(--surface-2); border-radius: 50%; background: var(--surface-3); color: var(--text-2); cursor: pointer; transition: background-color .2s, color .2s; }
.swap__inv:hover { background: #2e2e39; color: var(--text); }
.swap__inv .ic { transition: transform .45s var(--ease); }
.swap__inv.virou .ic { transform: rotate(180deg); }
.swap__val [data-recebe] { transition: opacity .2s; }
.moeda-pill { border: 0; cursor: pointer; color: var(--text); transition: background-color .2s; }
.moeda-pill:hover, .moeda-pill[aria-expanded="true"] { background: #2e2e39; }
.moeda-pill .ic { transition: transform .25s var(--ease); }
.moeda-pill[aria-expanded="true"] .ic { transform: rotate(180deg); }
.swap__btn { min-width: 136px; }
/* lista de moedas: popover que nasce do botão (CTL-18, MOV-17, MOV-21) */
.lista-moedas { position: fixed; inset: auto; margin: 0; width: 280px; max-height: 336px; overflow: auto; padding: 8px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-2); color: var(--text); scrollbar-width: thin;
  opacity: 1; translate: 0 0; transition: opacity .18s, translate .18s var(--ease), display .18s allow-discrete, overlay .18s allow-discrete; }
.lista-moedas:not(:popover-open) { opacity: 0; translate: 0 -6px; transition-duration: .14s; }
@starting-style { .lista-moedas:popover-open { opacity: 0; translate: 0 -6px; } }
.lista-moedas p { padding: 8px 8px 4px; }
.lista-moedas button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border: 0; border-radius: 10px; background: none; text-align: left; cursor: pointer; transition: background-color .15s; }
.lista-moedas button:hover, .lista-moedas button:focus-visible { background: var(--fill-hover); outline: 0; }
.lista-moedas button[aria-selected="true"] { background: var(--fill); }
.lista-moedas button > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.lista-moedas .ic { color: var(--brand-text); }
.lista-moedas button[disabled] { opacity: .35; cursor: not-allowed; }
.swap__val { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.swap__val input { width: 100%; border: 0; background: none; outline: 0; padding: 0; font-variant-numeric: tabular-nums; }
.swap__val .t-h3 { font-variant-numeric: tabular-nums; }
.moeda-pill { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 4px; border-radius: 999px; background: var(--surface-3); flex: none; }
.swap__res { display: flex; align-items: center; gap: 16px; padding: 8px 8px 8px 16px; }
.swap__res > div { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.bc--rende { background: var(--brand); color: var(--on-brand); }
.bc--rende > div:last-child { display: flex; flex-direction: column; gap: 8px; }
.bc--taxa > div { display: flex; flex-direction: column; gap: 8px; }
.bc--auto { justify-content: flex-start; }
.bc__img { position: absolute; left: 120px; top: 104px; width: 300px; height: auto; pointer-events: none; }
.bc--imp > div:first-child { display: flex; flex-direction: column; gap: 8px; }
.arquivo { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 12px; background: var(--fill); transition: background-color .3s; }
.arquivo:hover { background: var(--fill-hover); }
.arquivo > span { flex: 1; display: flex; flex-direction: column; gap: 4px; }

/* 04 segurança */
.seg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.seg-row > * { min-width: 0; }
.cofre { position: relative; display: flex; flex-direction: column; gap: 32px; overflow: hidden; }
.cofre__topo, .prot__topo { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cofre__img { justify-self: end; width: 104px; height: auto; pointer-events: none; transition: transform 1.2s var(--ease); }
.cofre:hover .cofre__img { transform: translateY(-6px); }
.cofre__nums { position: relative; display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 40px; }
.cofre__nums > div { display: flex; flex-direction: column; gap: 8px; }
.cofre__nums .t-h2 { font-variant-numeric: tabular-nums; }
.res { position: relative; margin-top: auto; display: flex; flex-direction: column; gap: 4px; }
.res__cab { display: flex; justify-content: space-between; padding: 0 0 8px; }
.res li { display: grid; grid-template-columns: 40px 104px 1fr 64px; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--border); }
.res__barra { position: relative; height: 6px; border-radius: 999px; background: var(--fill-hover); }
.res__barra::after { content: ''; position: absolute; left: 95.24%; top: -4px; width: 1px; height: 14px; background: var(--text-4); }
.res__barra span { position: absolute; inset: 0; border-radius: inherit; background: var(--brand); transform-origin: left; transform: scaleX(calc(.9524 + var(--v) * .0476)); transition: transform 1.2s var(--ease); }
.js .res:not(.in) .res__barra span { transform: scaleX(0); }
.res li:nth-child(2) .res__barra span { transition-delay: .08s; } .res li:nth-child(3) .res__barra span { transition-delay: .16s; } .res li:nth-child(4) .res__barra span { transition-delay: .24s; }
.res__v { text-align: right; font-variant-numeric: tabular-nums; }
.prot { display: flex; flex-direction: column; gap: 24px; }
.prot__topo { justify-content: flex-start; align-items: center; }
.prot__tit { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.prot__topo .chip { align-self: flex-start; }
.chip--a { background: var(--brand-subtle); color: var(--brand-text); transition: background-color .3s, color .3s; }
.chip--a.forte { background: var(--ok-bg); color: var(--ok); }
.chip--a.fraca { background: var(--erro-bg); color: var(--erro); }
.anel { position: relative; width: 64px; height: 64px; flex: none; display: grid; place-items: center; }
.anel svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.anel circle { fill: none; stroke: var(--fill-hover); stroke-width: 6; }
.anel .anel__v { stroke: var(--brand); stroke-linecap: round; stroke-dasharray: 75 100; transition: stroke-dasharray .7s var(--ease), stroke .3s; }
.anel.forte .anel__v { stroke: var(--ok); } .anel.fraca .anel__v { stroke: var(--erro); }
.anel span { font-variant-numeric: tabular-nums; }
.prot__lista li { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid var(--border); }
.prot__lista li > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.prot__lista .ic { transition: color .25s, stroke-width .25s; stroke-width: 2; }
.prot__lista li.off .ic { color: var(--text-4); stroke-width: 1.5; }
.prot__lista li.off .t-card { color: var(--text-2); }
.chave { position: relative; width: 44px; height: 24px; flex: none; border: 0; border-radius: 999px; background: var(--surface-3); cursor: pointer; transition: background-color .2s; }
.chave::before { content: ''; position: absolute; inset: -8px -4px; }
.chave::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-2); transition: transform .25s var(--ease), background-color .2s; }
.chave:hover { background: #2e2e39; }
.chave[aria-checked="true"] { background: var(--brand); }
.chave[aria-checked="true"]::after { transform: translateX(20px); background: #fff; }
.prot__log { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 12px; background: var(--fill); }
.prot__log ul { display: flex; flex-direction: column; gap: 8px; }
.prot__log li { display: flex; align-items: center; gap: 8px; }
.prot__log li > span:nth-of-type(1) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prot__log li.novo { animation: sobe .4s var(--ease) both; }

/* 05 CTA final (SEC-08) */
.painel { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 400px; padding: 48px; border-radius: 20px; background: var(--surface); }
.painel__planeta { position: absolute; left: 44.1%; top: 50%; width: 82.2%; height: auto; transform: translateY(-50%); mix-blend-mode: lighten; pointer-events: none; }
.painel__txt { position: relative; display: flex; flex-direction: column; gap: 16px; max-width: 680px; }
.painel__txt .hero__acao { padding-top: 24px; }

/* rodapé (NAV-08/09) */
.rod { border-top: 1px solid var(--border); padding: 64px 0 48px; }
.rod__topo { display: grid; grid-template-columns: 1fr 180px 180px 180px; gap: 24px; }
.rod__marca { display: flex; flex-direction: column; gap: 16px; }
.rod__col { display: flex; flex-direction: column; gap: 16px; }
.rod__col a { font-size: 16px; color: var(--text-3); width: max-content; transition: color .3s; }
.rod__col a:hover { color: var(--text); }
.rod__base { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border); }
.rod__base a:not(.credito) { text-decoration: underline; text-underline-offset: 3px; }
.credito { display: inline-flex; align-items: center; gap: 8px; transition: color .3s; }
.credito:hover { color: var(--text-2); }
.credito .sr { width: auto; height: 11px; }

/* aviso de demonstração */
.toast { position: fixed; z-index: 60; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100% - 32px); padding: 8px 8px 8px 16px; border-radius: 999px; background: rgba(20, 20, 26, .86); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); animation: sobe .5s var(--ease) both; }
.toast[hidden] { display: none; }
.btn-ic--toast { width: 32px; height: 32px; }

/* ===== tablet: 641 a 1199 (RSP-01, degraus de 8) ===== */
@media (max-width: 1199px) {
  :root { --wrap: calc(100% - 80px); --sec: 96px; --cab: 40px; --h1: clamp(40px, 6.2vw, 56px); --h2: 40px; --h3: 28px; --num: 32px; }
  .hd { top: 24px; height: 56px; width: calc(100% - 48px); padding: 0 8px 0 20px; grid-template-columns: 1fr auto; }
  .hd__nav { display: none; }
  .hd__menu { display: inline-grid; }
  .hero { height: auto; display: flex; flex-direction: column; padding: 128px 40px 40px; }
  .palco { position: relative; left: auto; bottom: auto; width: auto; height: auto; transform: none; flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr auto; gap: 16px; }
  .moeda { left: auto; right: -120px; top: -40px; width: 460px; height: auto; opacity: .9; }
  .hero__txt { position: relative; left: auto; top: auto; width: auto; grid-column: 1 / -1; align-self: start; }
  .hc { position: relative; left: auto !important; top: auto; width: auto !important; height: auto; padding: 24px !important; }
  .hc--alerta, .hc--rende, .hc--tick, .hc--mov, .hc--aloc, .hc--envio { display: none; }
  .ch--port, .eixo { width: 100%; }
  .hc--auto { justify-content: space-between; }
  .mkt { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr 1fr; height: auto; }
  .bc--swap { grid-column: 1 / -1; }
  .bento__col > .card { flex: 1 1 auto; min-height: 240px; }
  .bento__col--c > .bc--auto { flex: 0 0 300px; }
  .seg-row { grid-template-columns: 1fr; }

  .painel { min-height: 440px; padding: 40px; }
  .painel__planeta { left: 52%; width: 90%; }
  .painel__txt { max-width: 56%; }
  .rod__topo { grid-template-columns: 1fr 1fr 1fr; }
  .rod__marca { grid-column: 1 / -1; margin-bottom: 16px; }
}
@media (max-width: 860px) {
  .palco { grid-template-columns: 1fr 1fr; }
  .hc--ativ { display: none; }
  .painel { flex-direction: column; align-items: stretch; padding-top: 280px; }
  .painel__planeta { left: 50%; top: -180px; width: 560px; transform: translateX(-50%); }
  .painel__txt { max-width: none; }
}
/* ===== celular: até 640 ===== */
@media (max-width: 640px) {
  :root { --wrap: calc(100% - 32px); --sec: 64px; --cab: 32px; --h1: clamp(32px, 10vw, 40px); --h2: 32px; --h3: 24px; --num: 32px; --lead: 16px; }
  html { scroll-padding-top: 96px; }
  .t-h1 { line-height: 1.1; } .t-h2 { line-height: 1.125; }
  .only-dt { display: none; }
  .hd { top: 16px; width: calc(100% - 32px); padding: 0 8px 0 16px; }
  .hero { padding: 104px 16px 16px; }
  .ceu .camada, .ceu .pisca { animation: none; }
  .palco { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 32px; }
  .hc { padding: 16px !important; border-radius: 16px; }
  .hc--auto, .moeda { display: none; }
  /* conteúdo solto centralizado; cards e tabelas seguem à esquerda (CRD-07, TAB) */
  .hero__txt { align-items: stretch; gap: 16px; text-align: center; }
  .hero__txt > .chip { align-self: center; }
  .hero__lead { max-width: none; }
  .cab { align-items: center; text-align: center; }
  .painel__txt { text-align: center; }
  .hero__acao { flex-direction: column; align-items: stretch; gap: 16px; padding-top: 8px; }
  .hero__acao .btn { width: 100%; }
  .prova { justify-content: center; text-align: left; }
  .card { padding: 16px; border-radius: 16px; }
  .mkt__ctl { flex-direction: column; align-items: stretch; }
  .mkt__ctl .seg { overflow-x: auto; scrollbar-width: none; }
  .busca { width: 100%; }
  .busca input { font-size: 16px; }
  .seg__it::after { content: ''; position: absolute; inset: -4px 0; }
  .tab .c-7d, .tab .c-cap, .tab .moeda-cel .tile { display: none; }
  .tab { width: calc(100% + 16px); margin: 0 -8px; }
  .tab th, .tab td { padding-left: 8px; padding-right: 8px; }
  .tab .c-preco, .tab .c-chg { width: auto; }
  .graf { flex: 1; min-height: 110px; }
  .ch--port { position: absolute; inset: 0; height: 100%; }
  .det__num { grid-template-columns: 1fr 1fr; }
  .det .btn { width: 100%; }
  .bento { grid-template-columns: 1fr; gap: 16px; }
  .bento__col { gap: 16px; }
  .bento__col > .card, .bento__col--c > .bc--auto { flex: none; min-height: 0; }
  .bc { gap: 32px; }
  .bc__img { position: static; width: 200px; align-self: center; }
  .swap__leg { padding: 12px; border-radius: 8px; gap: 12px; }
  .pcts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
  .pcts button { height: 40px; padding: 0; }
  .swap__res { flex-direction: column; align-items: stretch; padding: 8px; }
  .swap__res .btn { width: 100%; }
  .cofre__img { width: 80px; grid-column: 2; grid-row: 1 / 3; }
  .cofre__nums { grid-template-columns: 1fr auto; gap: 24px; }
  .prot__topo .chip { display: none; }
  .res li { grid-template-columns: 40px 1fr 56px; }
  .res li .res__barra { display: none; }
  .seg[data-filtros] { width: 100%; }
  .seg__it { padding: 0 8px; }
  .prot__topo { flex-wrap: wrap; }
  .prot__lista li { gap: 12px; grid-template-columns: 24px 1fr auto; }
  .prot__lista .ic--32 { width: 24px; height: 24px; }
  .swap__saldo { flex-direction: column; align-items: flex-start; gap: 8px; }
  .prot__log li > span:nth-of-type(1) { white-space: normal; }
  .painel { padding: 240px 16px 32px; border-radius: 16px; }
  .painel__planeta { width: 480px; top: -170px; }
  .rod { padding: 48px 0 32px; }
  .rod__topo { grid-template-columns: repeat(3, 1fr); gap: 16px 8px; }
  .rod__marca { align-items: center; text-align: center; margin-bottom: 16px; }
  .rod__col { align-items: center; gap: 0; text-align: center; }
  .rod__col .t-rot { margin-bottom: 8px; }
  .rod__col a { padding: 8px 0; }
  .rod__base { flex-direction: column; gap: 8px; margin-top: 32px; text-align: center; }
  .credito { min-height: 40px; }
  .logo { min-height: 40px; }
}
@media (max-width: 360px) { .avs img:nth-child(n+4) { display: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rv { opacity: 1; transform: none; }
  .linha-anim { stroke-dashoffset: 0; }
}

@media (max-width: 360px) { .tab .c-chg .chip .ic { display: none; } .tab .c-chg .chip { padding-left: 12px; } }
.hc--port .t-num { font-variant-numeric: normal; }
.hc__topo .chip { flex: none; }
@media (max-width: 1199px) { .ch--port circle { display: none; } .ch--port path { vector-effect: non-scaling-stroke; } .ch--port .linha-anim { stroke-dasharray: none; animation: none; } }
.hc__topo > div { flex: 1; min-width: 0; }
.hc__topo .t-num { white-space: nowrap; }

/* imagem só aparece inteira (imagem-inteira.js) */
.img-esp img:not(.img-ok):not([src$=".svg"]) { visibility: hidden; }