/* Página inicial em trilha (site/views/home_trail.php). Fundo claro do site, azul do sistema, azul-noite em destaque.
   Tudo com prefixo tr- para não encostar no site.css. Cores só pelos tokens. */

/* Faixa de marcas, logo abaixo do topo */
.tr-marquee { position: relative; z-index: 1; margin: clamp(30px, 6vw, 80px) 0 10px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, var(--n-900) 10%, var(--n-900) 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, var(--n-900) 10%, var(--n-900) 90%, transparent); }
.tr-marquee-track { display: flex; gap: 14px; width: max-content; padding: 12px 0 18px; animation: tr-marquee 70s linear infinite; }
.tr-marquee-track span { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 19px; background: var(--n-0); box-shadow: 0 10px 22px -18px var(--n-800); }
.tr-marquee-track img { width: 36px; height: 36px; border-radius: 10px; } .tr-marquee-track img.is-round, .tr-float img.is-round { border-radius: 50%; }
@keyframes tr-marquee { to { transform: translateX(-50%); } }

/* ---------- A trilha vertical ---------- */
.tr { position: relative; max-width: 1120px; margin: 10px auto 0; padding: 0 clamp(16px, 4vw, 40px) 10px clamp(64px, 8vw, 110px); scroll-margin-top: 90px; }
.tr-line { position: absolute; left: clamp(30px, 4vw, 54px); top: 40px; bottom: 140px; width: 4px; border-radius: 4px; background: var(--n-200); }
.tr-line i { display: block; width: 100%; height: 0; border-radius: inherit; background: linear-gradient(var(--c-accent), var(--c-category-indigo)); box-shadow: 0 0 14px color-mix(in srgb, var(--c-accent) 60%, transparent); }
.tr-step { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(24px, 4vw, 56px); padding: clamp(30px, 5vh, 56px) 0; scroll-margin-top: 90px; }
.tr-dot { position: absolute; left: calc(-1 * clamp(64px, 8vw, 110px) + clamp(30px, 4vw, 54px) + 2px); top: 50%; display: grid; place-items: center; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; background: var(--n-0); border: 2px solid var(--n-200); color: var(--n-600); font-weight: 800; font-size: 14px; transition: background .35s ease, border-color .35s ease, color .35s ease, box-shadow .35s ease; }
.tr-step.is-on .tr-dot { background: var(--c-accent); border-color: var(--c-accent); color: var(--n-0); box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-accent) 16%, transparent); }
.tr-step.is-highlight.is-on .tr-dot { background: var(--n-900); border-color: var(--n-900); }
.tr-text { display: grid; gap: 10px; opacity: .35; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.tr-step.is-on .tr-text { opacity: 1; transform: none; }
.tr-tag { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--c-accent); }
.tr-step h2 { font-size: clamp(26px, 3.2vw, 38px); line-height: 1.1; max-width: 16ch; }
.tr-text p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--n-600); max-width: 34ch; }
.tr-extras { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.tr-extras li { padding: 5px 12px; border-radius: 999px; background: var(--n-0); border: 1px solid var(--n-200); font-size: 13px; font-weight: 600; color: var(--n-800); }
.tr-step.is-highlight { margin: 10px -24px; padding: 34px 24px; border-radius: 30px; background: linear-gradient(135deg, var(--n-900), var(--n-800) 70%, var(--c-accent) 170%); color: var(--n-0); }
.tr-step.is-highlight .tr-dot { left: calc(-1 * clamp(64px, 8vw, 110px) + clamp(30px, 4vw, 54px) + 2px + 24px); }
.tr-step.is-highlight .tr-tag { color: var(--c-category-sky); } .tr-step.is-highlight .tr-text p { color: var(--n-300); } .tr-step.is-highlight h2 { color: var(--n-0); }

.tr-art { position: relative; display: grid; gap: 12px; opacity: 0; transform: translateY(24px) scale(.98); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.tr-step.is-on .tr-art { opacity: 1; transform: none; }
.tr-art.is-split { grid-template-columns: 1fr 1fr; align-items: start; } .tr-art.is-split > .tr-balance { grid-column: 1 / -1; }
.tr-art button { font: inherit; color: inherit; text-align: left; border: 0; cursor: pointer; }
.tr-tap { justify-self: end; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--c-accent); opacity: .85; }
.tr-tap .wallet-icon { width: 14px; height: 14px; } .tr-art.is-split > .tr-tap { grid-column: 1 / -1; }

/* 1 · espalhado → um lugar só */
.tr-scatter { position: relative; height: 230px; border-radius: 26px; background: var(--n-0); box-shadow: 0 24px 50px -36px var(--n-800); overflow: hidden; }
.tr-scatter > img, .tr-sheet { position: absolute; width: 46px; height: 46px; border-radius: 13px; box-shadow: 0 10px 18px -12px var(--n-800); transition: transform 1.1s cubic-bezier(.6, 0, .3, 1), opacity .8s ease; }
.tr-scatter > img:nth-child(1) { left: 8%; top: 14%; } .tr-scatter > img:nth-child(2) { left: 28%; top: 58%; } .tr-scatter > img:nth-child(3) { left: 46%; top: 10%; } .tr-scatter > img:nth-child(4) { left: 66%; top: 52%; }
.tr-scatter > img:nth-child(5) { left: 84%; top: 18%; } .tr-scatter > img:nth-child(6) { left: 12%; top: 70%; } .tr-scatter > img:nth-child(7) { left: 56%; top: 74%; } .tr-scatter > img:nth-child(8) { left: 76%; top: 80%; }
.tr-scatter > img:nth-child(9) { left: 34%; top: 26%; } .tr-scatter > img:nth-child(10) { left: 88%; top: 58%; } .tr-scatter > img:nth-child(11) { left: 4%; top: 42%; } .tr-scatter > img:nth-child(12) { left: 60%; top: 34%; }
.tr-sheet { left: 40%; top: 46%; width: auto; height: auto; padding: 6px 10px; background: var(--c-category-green); color: var(--n-0); font-size: 12px; font-weight: 700; border-radius: 9px; }
.tr-step.is-on .tr-scatter > img, .tr-step.is-on .tr-sheet { animation: tr-float 2.2s ease-in-out infinite; } .tr-scatter > img:nth-child(even) { animation-delay: -1.1s !important; }
@keyframes tr-float { 50% { translate: 0 -5px; } }
.tr-one { position: absolute; left: 50%; top: 50%; display: grid; justify-items: center; gap: 6px; transform: translate(-50%, -50%) scale(.5); opacity: 0; transition: transform .7s cubic-bezier(.3, 1.5, .5, 1), opacity .5s ease; }
.tr-one img { width: 78px; } .tr-one b { font-size: 15px; }
.tr-scatter.is-joined > img, .tr-scatter.is-joined .tr-sheet { animation: none; transform: translate(var(--tx), var(--ty)) scale(.2); opacity: 0; }
.tr-scatter.is-joined .tr-one { transform: translate(-50%, -50%); opacity: 1; transition-delay: .7s; }

/* 2 · saldo e a pilha de contas */
.tr-balance { position: relative; display: grid; gap: 4px; padding: 20px 22px; border-radius: 24px; background: linear-gradient(135deg, var(--n-900), var(--n-800) 62%, var(--c-accent) 170%); color: var(--n-0); box-shadow: 0 26px 46px -30px var(--n-900); }
.tr-art button.tr-balance { color: var(--n-0); }
.tr-balance > small { font-size: 12.5px; color: var(--n-300); } .tr-balance > b { font-size: 32px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tr-balance-row { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--n-0) 8%, transparent); font-size: 11.5px; color: var(--n-300); }
.tr-balance-row b { display: block; color: var(--n-0); font-size: 13px; }
.tr-balance.is-crypto { background: linear-gradient(135deg, var(--n-900), var(--n-800) 60%, var(--cripto-c-accent, var(--c-warning)) 190%); }
.tr-pnl { justify-self: start; margin-top: 4px; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--c-success) 28%, transparent); font-size: 12.5px; font-weight: 800; }
.tr-more { display: grid; gap: 6px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s ease, opacity .4s ease, margin .4s ease; }
.tr-more small { font-size: 11.5px; color: var(--n-300); }
.tr-bars { display: flex; align-items: flex-end; gap: 8px; height: 70px; } .tr-bars i { flex: 1; height: var(--h, 50%); border-radius: 6px 6px 3px 3px; background: linear-gradient(var(--c-category-sky), var(--c-accent)); transform-origin: bottom; }
.tr-balance.is-open .tr-more { max-height: 120px; opacity: 1; margin-top: 10px; } .tr-balance.is-open .tr-bars i { animation: tr-grow .6s cubic-bezier(.2, .8, .2, 1) both; }
.tr-bars i:nth-child(2) { animation-delay: .05s !important; } .tr-bars i:nth-child(3) { animation-delay: .1s !important; } .tr-bars i:nth-child(4) { animation-delay: .15s !important; } .tr-bars i:nth-child(5) { animation-delay: .2s !important; } .tr-bars i:nth-child(6) { animation-delay: .25s !important; }
@keyframes tr-grow { from { transform: scaleY(0); } }
.tr-stack { grid-column: 1 / -1; display: grid; }
.tr-acc { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 12px; min-height: 64px; margin-top: -14px; padding: 12px 18px 22px; border-radius: 20px; color: var(--n-0); box-shadow: 0 -8px 20px -14px var(--n-900); transform: translateY(30px); opacity: 0; transition: padding .35s ease; }
.tr-art button.tr-acc { color: var(--n-0); } .tr-acc:first-child { margin-top: 0; }
.tr-acc img, .tr-acc-ico { width: 36px; height: 36px; border-radius: 11px; background: var(--n-0); } .tr-acc-ico { display: grid; place-items: center; color: var(--c-category-green); font-weight: 800; font-size: 13px; }
.tr-acc b { display: block; font-size: 14.5px; } .tr-acc small { font-size: 11.5px; opacity: .85; } .tr-acc em { font-style: normal; font-weight: 800; font-size: 14.5px; }
.tr-acc-more { grid-column: 2 / -1; max-height: 0; overflow: hidden; font-size: 12.5px; opacity: 0; transition: max-height .4s ease, opacity .3s ease; }
.tr-acc.is-open .tr-acc-more { max-height: 40px; opacity: .95; }
.tr-acc.is-orange { background: linear-gradient(135deg, var(--c-category-orange), var(--c-category-amber)); } .tr-acc.is-green { background: linear-gradient(135deg, var(--c-category-green), var(--c-success)); }
.tr-acc.is-purple { background: linear-gradient(135deg, var(--c-category-purple), var(--c-category-violet)); } .tr-acc.is-blue { background: linear-gradient(135deg, var(--c-category-blue), var(--c-accent)); padding-bottom: 16px; }
.tr-step.is-on .tr-acc { animation: tr-rise .55s cubic-bezier(.2, .8, .2, 1) forwards; }
.tr-step.is-on .tr-acc:nth-child(2) { animation-delay: .15s; } .tr-step.is-on .tr-acc:nth-child(3) { animation-delay: .3s; } .tr-step.is-on .tr-acc:nth-child(4) { animation-delay: .45s; }
@keyframes tr-rise { to { transform: none; opacity: 1; } }

/* 3 · cartões em leque (viram ao toque) e a fatura */
.tr-fan { position: relative; height: 200px; perspective: 1000px; }
.tr-fan > .tr-tap { position: absolute; right: 0; bottom: -18px; }
.tr-ccard { position: absolute; width: min(300px, 78%); height: 172px; padding: 0; border-radius: 22px; background: transparent; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.tr-face, .tr-back { position: absolute; inset: 0; display: grid; grid-template-columns: 34px 1fr auto; align-items: start; gap: 10px; padding: 18px; border-radius: 22px; color: var(--n-0); font-weight: 700; font-size: 14px; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 26px 40px -24px var(--n-900); }
.tr-face img { width: 34px; height: 34px; border-radius: 10px; } .tr-face .brand { width: 46px; height: auto; border-radius: 0; }
.tr-face > small { position: absolute; left: 18px; bottom: 16px; font-weight: 600; font-size: 13px; opacity: .9; letter-spacing: .06em; } .tr-face > small b { font-size: 15px; letter-spacing: 0; }
.tr-back { grid-template-columns: 1fr; align-content: center; justify-items: start; gap: 2px; transform: rotateY(180deg); }
.tr-back small { font-size: 12.5px; font-weight: 600; opacity: .9; } .tr-back b { font-size: 40px; line-height: 1.1; }
.tr-ccard.is-orange { left: 0; top: 0; transform: rotate(-9deg); } .tr-ccard.is-orange .tr-face, .tr-ccard.is-orange .tr-back { background: linear-gradient(135deg, var(--c-category-orange), var(--c-category-coral)); }
.tr-ccard.is-purple { right: 0; top: 14px; transform: rotate(4deg); } .tr-ccard.is-purple .tr-face, .tr-ccard.is-purple .tr-back { background: linear-gradient(135deg, var(--c-category-purple), var(--c-category-plum)); }
.tr-ccard.is-orange.is-flipped { transform: rotate(-9deg) rotateY(180deg); z-index: 2; } .tr-ccard.is-purple.is-flipped { transform: rotate(4deg) rotateY(180deg); z-index: 2; }
.tr-ccard.is-dark { position: relative; width: 100%; height: 150px; grid-column: 1 / -1; } .tr-ccard.is-dark .tr-face, .tr-ccard.is-dark .tr-back { background: linear-gradient(135deg, var(--c-category-slate), var(--n-900)); }
.tr-ccard.is-dark.is-flipped { transform: rotateY(180deg); }
.tr-topup { position: absolute; right: 16px; bottom: 14px; padding: 4px 10px; border-radius: 999px; background: var(--c-success); font-size: 12.5px; font-weight: 800; opacity: 0; }
.tr-step.is-on .tr-topup { animation: tr-pop .5s 1.6s cubic-bezier(.3, 1.6, .5, 1) forwards; }
@keyframes tr-pop { from { opacity: 0; transform: translateY(8px) scale(.6); } to { opacity: 1; transform: none; } }
.tr-invoice { position: relative; display: grid; gap: 8px; padding: 18px 20px; border-radius: 22px; background: var(--n-0); box-shadow: 0 20px 40px -32px var(--n-800); }
.tr-invoice small { font-size: 12.5px; color: var(--n-600); } .tr-invoice > div b { display: block; font-size: 26px; font-variant-numeric: tabular-nums; } .tr-invoice small b { color: var(--n-900); }
.tr-buy { position: absolute; right: 18px; top: 18px; padding: 6px 12px; border-radius: 999px; background: var(--n-100); font-size: 13px; font-weight: 700; opacity: 0; }
.tr-step.is-on .tr-buy { animation: tr-drop 1s .8s cubic-bezier(.3, 1.2, .5, 1) forwards; } @keyframes tr-drop { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: none; } }
.tr-limit { height: 8px; border-radius: 8px; background: var(--n-150); overflow: hidden; } .tr-limit i { display: block; height: 100%; width: 13.4%; border-radius: inherit; background: var(--c-category-purple); transition: width 1s cubic-bezier(.2, .8, .2, 1); }

/* 4 e 7 · a ponte */
.tr-bridge { display: grid; grid-template-columns: minmax(0, 1fr) clamp(72px, 10vw, 120px) minmax(0, 1fr); align-items: center; } .tr-bridge > * { min-width: 0; } /* encolhe junto com a coluna (antes empurrava a página em telas médias) */
.tr-mini { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 12px; padding: 16px; border-radius: 20px; background: var(--n-0); color: var(--n-900); box-shadow: 0 20px 34px -24px var(--n-900); }
.tr-mini img { width: 40px; height: 40px; border-radius: 12px; } .tr-mini small { display: block; font-size: 12px; color: var(--n-600); } .tr-mini b { font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tr-mini.is-dark { background: var(--n-800); color: var(--n-0); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cripto-c-accent, var(--c-warning)) 45%, transparent); } .tr-mini.is-dark small { color: var(--n-300); }
.tr-way { position: relative; height: 4px; margin: 0 8px; border-radius: 4px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--n-0) 40%, transparent) 0 8px, transparent 8px 14px); }
.tr-coin { position: absolute; left: 50%; top: 50%; padding: 6px 12px; border-radius: 999px; background: var(--c-accent); color: var(--n-0); font-size: 12.5px; font-weight: 800; white-space: nowrap; opacity: 0; transform: translate(-150%, -50%); box-shadow: 0 10px 22px -8px var(--c-accent); }
.tr-coin i { font-style: normal; opacity: .8; }
.tr-step.is-on .tr-coin { animation: tr-across 1.6s .5s cubic-bezier(.5, 0, .3, 1) forwards; }
@keyframes tr-across { 0% { opacity: 0; transform: translate(-150%, -50%) scale(.85); } 20% { opacity: 1; } 80%, 100% { opacity: 1; transform: translate(-50%, -50%); } }
.is-back .tr-coin { background: var(--cripto-c-accent, var(--c-warning)); box-shadow: 0 10px 22px -8px var(--cripto-c-accent, var(--c-warning)); }
.tr-ok { justify-self: center; padding: 8px 14px; border-radius: 999px; background: color-mix(in srgb, var(--c-success) 22%, transparent); color: var(--n-0); font-weight: 800; font-size: 13.5px; opacity: 0; }
.tr-step.is-on .tr-ok { animation: tr-pop .45s 2.2s cubic-bezier(.3, 1.6, .5, 1) forwards; }

/* 5 · tokens (abrem ao toque) e marcas */
.tr-tokens { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tr-token { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 11px 12px; border-radius: 16px; background: var(--n-0); box-shadow: 0 14px 26px -24px var(--n-800); opacity: 0; transform: translateY(14px); }
.tr-token img { width: 34px; height: 34px; border-radius: 50%; } .tr-token b { display: block; font-size: 13.5px; } .tr-token small { display: block; font-size: 11.5px; color: var(--n-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tr-token em { font-style: normal; font-weight: 800; font-size: 12.5px; }
.tr-token-more { grid-column: 1 / -1; display: grid; gap: 6px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s ease, opacity .3s ease, margin .3s ease; }
.tr-token.is-open .tr-token-more { max-height: 60px; opacity: 1; margin-top: 6px; }
.tr-progress { height: 6px; border-radius: 6px; background: var(--n-150); overflow: hidden; } .tr-progress i { display: block; height: 100%; width: var(--p, 50%); border-radius: inherit; background: var(--cripto-c-accent, var(--c-warning)); }
.tr-step.is-on .tr-token { animation: tr-rise .5s cubic-bezier(.2, .8, .2, 1) forwards; } .tr-step.is-on .tr-token:nth-child(2) { animation-delay: .12s; } .tr-step.is-on .tr-token:nth-child(3) { animation-delay: .24s; } .tr-step.is-on .tr-token:nth-child(4) { animation-delay: .36s; }
.tr-up { color: var(--c-success); } .tr-down { color: var(--c-danger); }
.tr-logos { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tr-logos img { width: 36px; height: 36px; border-radius: 11px; background: var(--n-0); box-shadow: 0 8px 16px -12px var(--n-800); }
.tr-logos small { color: var(--n-600); font-size: 12.5px; font-weight: 600; margin-left: 4px; } .tr-logos.is-tight { grid-column: 2; align-content: center; }

/* 6 · saúde do empréstimo (abre ao toque) */
.tr-health { display: grid; justify-items: center; gap: 6px; padding: 16px; border-radius: 22px; background: var(--n-0); box-shadow: 0 20px 40px -32px var(--n-800); text-align: center; }
.tr-art button.tr-health { text-align: center; } .tr-health b { display: block; color: var(--c-success); } .tr-health small { font-size: 12px; color: var(--n-600); }
.tr-health-more { max-height: 0; overflow: hidden; opacity: 0; font-size: 12.5px; font-weight: 700; color: var(--n-800); transition: max-height .4s ease, opacity .3s ease; }
.tr-health.is-open .tr-health-more { max-height: 50px; opacity: 1; }
.tr-gauge { position: relative; width: 150px; } .tr-gauge svg { display: block; width: 100%; }
.g-track, .g-fill { fill: none; stroke-width: 12; stroke-linecap: round; } .g-track { stroke: var(--n-150); } .g-fill { stroke: var(--c-success); stroke-dasharray: 158; stroke-dashoffset: 158; }
.tr-step.is-on .g-fill { animation: tr-gauge 1.4s .3s cubic-bezier(.2, .8, .2, 1) forwards; } @keyframes tr-gauge { to { stroke-dashoffset: 98; } }
.tr-needle { position: absolute; left: 50%; bottom: 4px; width: 3px; height: 56px; margin-left: -1.5px; border-radius: 3px; background: var(--n-900); transform-origin: 50% 100%; transform: rotate(-90deg); }
.tr-step.is-on .tr-needle { animation: tr-needle 1.4s .3s cubic-bezier(.2, .8, .2, 1) forwards; } @keyframes tr-needle { to { transform: rotate(-22deg); } }

/* 8 · mercado */
.tr-market { display: grid; gap: 10px; padding: 20px; border-radius: 24px; background: var(--n-0); box-shadow: 0 20px 40px -32px var(--n-800); }
.tr-market header { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; } .tr-market header img { width: 36px; height: 36px; } .tr-market header b { display: block; } .tr-market header small { color: var(--n-600); } .tr-market header em { font-style: normal; font-weight: 800; }
.tr-spark { width: 100%; height: 110px; } .tr-spark-line { fill: none; stroke: var(--c-accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 420; }
.tr-spark-area { fill: color-mix(in srgb, var(--c-accent) 10%, transparent); opacity: 0; transition: opacity .8s ease 1.4s; }
.tr-step.is-on .tr-spark-line { animation: tr-draw 1.8s .3s ease forwards; } .tr-step.is-on .tr-spark-area { opacity: 1; } @keyframes tr-draw { to { stroke-dashoffset: 0; } }
.tr-market-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .tr-market-row span { padding: 10px; border-radius: 14px; background: var(--n-100); } .tr-market-row small { display: block; font-size: 11px; color: var(--n-600); } .tr-market-row b { font-size: 13.5px; }

/* 9 · o balão (toque: próxima mensagem) */
.tr-talk { display: grid; grid-template-columns: 44px 1fr; align-items: end; gap: 12px; }
.tr-talk-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--n-0); box-shadow: 0 10px 20px -12px var(--n-800); } .tr-talk-avatar img { width: 28px; }
.tr-bubble { justify-self: start; display: grid; gap: 6px; max-width: 420px; padding: 14px 17px; border-radius: 22px 22px 22px 5px; background: linear-gradient(40deg, var(--n-900), var(--n-800)); font-size: 15px; line-height: 1.5; opacity: 0; transform: translateY(12px); }
.tr-art button.tr-bubble { color: var(--n-0); } .tr-bubble p { margin: 0; } .tr-bubble small { justify-self: end; font-size: 12px; font-weight: 700; color: var(--c-category-sky); }
.tr-bubble.is-typing p, .tr-bubble.is-typing small { display: none; } .tr-bubble:not(.is-typing) .tr-typing { display: none; }
.tr-typing { display: inline-flex; gap: 5px; padding: 4px 0; } .tr-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--n-300); animation: tr-typing 1s infinite; } .tr-typing i:nth-child(2) { animation-delay: .15s; } .tr-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes tr-typing { 50% { transform: translateY(-4px); opacity: .5; } }
.tr-step.is-on .tr-bubble { animation: tr-rise .45s cubic-bezier(.2, .8, .2, 1) forwards; }

/* fim da trilha: a marca e o "Saiba mais" */
.tr-step.is-final { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 60px 0 40px; }
.tr-dot.is-end { width: 50px; height: 50px; margin: -25px 0 0 -25px; top: 30%; } .tr-dot.is-end img { width: 30px; }
.tr-final { display: grid; justify-items: center; gap: 14px; }
.tr-final-icon { width: 120px; filter: drop-shadow(0 26px 40px color-mix(in srgb, var(--c-accent) 50%, transparent)); transform: scale(.4); opacity: 0; transition: transform .8s cubic-bezier(.3, 1.5, .5, 1), opacity .5s ease; }
.tr-step.is-final.is-on .tr-final-icon { transform: none; opacity: 1; }
.tr-final h2 { font-size: clamp(36px, 5vw, 58px); line-height: 1.04; max-width: none; } .tr-final p { margin: 0; font-size: 20px; font-weight: 600; color: var(--n-800); }
.tr-more-open { margin-top: 8px; }

/* ---------- Saiba mais: uma seção por vez, trocada pelo menu ---------- */
.tr-more-area { padding: 30px 0 10px; border-top: 1px solid var(--n-200); scroll-margin-top: 80px; }
.tr-more-area[hidden] { display: none; }
.tr-more-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; } .tr-more-head h2 { font-size: clamp(24px, 3vw, 32px); }
.tr-more-nav { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; } .tr-more-nav::-webkit-scrollbar { display: none; }
.tr-more-nav button { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border: 1px solid var(--n-200); border-radius: 999px; background: var(--n-0); color: var(--n-800); font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; }
.tr-more-nav button .wallet-icon { width: 17px; height: 17px; color: var(--c-accent); }
.tr-more-nav button.is-active { background: var(--c-accent); border-color: var(--c-accent); color: var(--n-0); } .tr-more-nav button.is-active .wallet-icon { color: var(--n-0); }
.tr-more-panel[hidden] { display: none; } .tr-more-panel > .site-section { padding-top: 34px; animation: tr-panel .45s ease both; }
@keyframes tr-panel { from { opacity: 0; transform: translateY(12px); } }

/* ---------- Convite de tela inteira, com as marcas flutuando no azul ---------- */
.tr-invite { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; min-height: 100svh; padding: 90px 20px; text-align: center; background: radial-gradient(circle at 70% 20%, color-mix(in srgb, var(--c-accent) 55%, transparent), transparent 55%), linear-gradient(140deg, var(--n-900), var(--n-800) 55%, var(--c-accent) 160%); color: var(--n-0); }
.tr-float { position: absolute; inset: 0; z-index: -1; }
.tr-float span { position: absolute; left: var(--x); top: var(--y); display: grid; place-items: center; width: var(--s); height: var(--s); border-radius: 30%; background: color-mix(in srgb, var(--n-0) 92%, transparent); box-shadow: 0 18px 30px -16px var(--n-900); opacity: .5; animation: tr-drift var(--d) ease-in-out infinite alternate; }
.tr-float span:nth-child(3n) { opacity: .28; filter: blur(1.5px); } .tr-float span:nth-child(4n) { animation-direction: alternate-reverse; }
.tr-float img { width: 62%; height: auto; border-radius: 8px; }
@keyframes tr-drift { from { transform: translate(-14px, 10px) rotate(-6deg); } to { transform: translate(14px, -16px) rotate(6deg); } }
.tr-invite-body { display: grid; justify-items: center; gap: 16px; max-width: 760px; }
.tr-invite-icon { width: 96px; filter: drop-shadow(0 20px 36px var(--n-900)); }
.tr-invite h2 { font-size: clamp(32px, 5vw, 56px); line-height: 1.06; color: var(--n-0); } .tr-invite p { margin: 0; font-size: 19px; color: color-mix(in srgb, var(--n-0) 78%, transparent); }

/* ---------- Celular ---------- */
@media (max-width: 820px) {
  .tr { padding-left: 50px; padding-right: 16px; }
  .tr-line { left: 22px; }
  .tr-step { grid-template-columns: 1fr; gap: 18px; padding: 28px 0; }
  .tr-dot { left: -28px; top: 44px; width: 30px; height: 30px; margin: -15px 0 0 -15px; font-size: 12.5px; }
  .tr-step.is-highlight { margin: 10px -10px; padding: 26px 14px; } .tr-step.is-highlight .tr-dot { left: -18px; }
  .tr-step h2 { font-size: 26px; } .tr-text p { font-size: 16px; }
  .tr-art.is-split { grid-template-columns: 1fr; } .tr-logos.is-tight { grid-column: 1; }
  .tr-tokens { grid-template-columns: 1fr; }
  .tr-bridge { grid-template-columns: 1fr; gap: 10px; } .tr-way { height: 56px; width: 4px; justify-self: center; margin: 0; background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--n-0) 40%, transparent) 0 8px, transparent 8px 14px); }
  .tr-coin { transform: translate(-50%, -150%); }
  .tr-step.is-on .tr-coin { animation-name: tr-down; } @keyframes tr-down { 0% { opacity: 0; transform: translate(-50%, -150%) scale(.85); } 20% { opacity: 1; } 80%, 100% { opacity: 1; transform: translate(-50%, -50%); } }
  .tr-fan { height: 180px; } .tr-ccard { height: 150px; }
  .tr-dot.is-end { left: -28px; top: 20px; }
  .tr-more-head .site-btn { padding: 0 14px; }
  .tr-float span { opacity: .22; scale: .75; } .tr-float span:nth-child(4n+1) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .tr *, .tr-marquee *, .tr-invite * { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* ---------- Ajustes de 17/10: faixas azuis, fim da trilha, "Saiba mais" na divisa, gráfico e mensagens ---------- */
body.is-trail .site-hero { position: relative; z-index: 2; }
/* Faixa azul do topo: começa logo abaixo dos selos do topo e vai até o começo da trilha; as marcas ficam dentro. */
.tr-band { position: relative; isolation: isolate; overflow: hidden; color: var(--n-0); background: radial-gradient(circle at 78% 0%, color-mix(in srgb, var(--c-accent) 50%, transparent), transparent 55%), linear-gradient(140deg, var(--n-900), var(--n-800) 60%, color-mix(in srgb, var(--c-accent) 70%, var(--n-800)) 140%); }
.tr-band.is-top { z-index: 1; margin-top: -8px; padding: 70px 0 34px; }
.tr-band.is-top .tr-marquee { margin: 0; }
.tr-band.is-top .tr-marquee-track span { background: color-mix(in srgb, var(--n-0) 94%, transparent); box-shadow: 0 14px 28px -18px var(--n-900); }
.tr { padding-top: 26px; }
.tr-line { top: 0; bottom: 0; }

/* O fim: a trilha entra na faixa azul e conclui na marca */
.tr-band.is-end { display: grid; place-items: center; min-height: 92svh; padding: 110px 20px 120px; text-align: center; }
.tr-finish { position: absolute; top: 0; left: max(clamp(30px, 4vw, 54px), calc((100% - 1120px) / 2 + clamp(30px, 4vw, 54px))); width: 4px; height: 90px; margin-left: 0; background: linear-gradient(var(--c-category-indigo), color-mix(in srgb, var(--c-category-sky) 0%, transparent)); }
.tr-finish i { position: absolute; left: 50%; bottom: -10px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: var(--n-0); box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-category-sky) 30%, transparent), 0 0 30px var(--c-category-sky); }
.tr-finish i::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--c-category-sky); animation: tr-ping 2s ease-out infinite; }
@keyframes tr-ping { from { transform: scale(.6); opacity: 1; } to { transform: scale(3); opacity: 0; } }
.tr-end-body { position: relative; z-index: 1; display: grid; justify-items: center; gap: 16px; max-width: 760px; }
.tr-end-icon { width: 120px; filter: drop-shadow(0 26px 44px var(--n-900)); transform: scale(.5); opacity: 0; transition: transform .9s cubic-bezier(.3, 1.5, .5, 1), opacity .6s ease; }
.tr-end-body.is-on .tr-end-icon { transform: none; opacity: 1; }
.tr-end-body h2 { font-size: clamp(40px, 6vw, 72px); line-height: 1.02; color: var(--n-0); }
.tr-end-body p { margin: 0; max-width: 46ch; font-size: 19px; line-height: 1.5; color: color-mix(in srgb, var(--n-0) 80%, transparent); }
.tr-band.is-end .tr-float span { left: var(--x); top: var(--y); width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); animation: none; transition: transform .2s linear; opacity: .55; }
.tr-band.is-end .tr-float span:nth-child(3n) { opacity: .3; filter: blur(1px); }

/* "Saiba mais": na divisa entre o azul e o branco, pulsando; ao abrir, continua ali e vira "Ver menos". */
@keyframes tr-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(1.18, 1.5); opacity: 0; } }
.tr-more-area { border-top: 0; padding-top: 54px; }

/* Gráfico do mercado: acompanha o mouse ou o dedo */
.tr-chart { position: relative; touch-action: pan-y; cursor: crosshair; }
.tr-chart-x { position: absolute; top: 0; bottom: 22px; width: 1px; background: color-mix(in srgb, var(--c-accent) 50%, transparent); pointer-events: none; }
.tr-chart-dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-accent) 22%, transparent); pointer-events: none; }
.tr-chart-tip { position: absolute; top: -6px; display: grid; padding: 6px 10px; border-radius: 10px; background: var(--n-900); color: var(--n-0); white-space: nowrap; transform: translateX(-50%); pointer-events: none; } .tr-chart-tip b { font-size: 13.5px; } .tr-chart-tip small { font-size: 11px; color: var(--n-300); }
.tr-chart-hint { display: block; font-size: 12px; color: var(--n-600); text-align: center; }

/* Mensagens do app (teste): coluna que rola, mostrando uma mensagem inteira e metade da próxima */
.tr-feed { display: grid; grid-template-columns: 44px 1fr; align-items: start; gap: 12px; }
.tr-feed .tr-talk-avatar { position: sticky; top: 0; }
.tr-feed-list { display: grid; gap: 10px; align-content: start; height: 230px; overflow-y: auto; padding: 40px 6px 6px 2px; scrollbar-width: none; mask-image: linear-gradient(transparent, var(--n-900) 30%); -webkit-mask-image: linear-gradient(transparent, var(--n-900) 30%); } /* como no app: o esmaecido fica em cima, a mais nova embaixo */
.tr-feed-list::-webkit-scrollbar { display: none; }
.tr-feed-item { justify-self: start; max-width: 420px; padding: 14px 17px; border-radius: 22px 22px 22px 5px; background: linear-gradient(40deg, var(--n-900), var(--n-800)); color: var(--n-0); font-size: 15px; line-height: 1.5; scroll-snap-align: start; animation: tr-rise .4s cubic-bezier(.2, .8, .2, 1) both; }
.tr-feed-item.is-typing { padding: 12px 16px; } .tr-feed-item .tr-typing { display: inline-flex; }
.tr-feed-item small { display: block; margin-top: 4px; font-size: 11.5px; color: var(--n-300); }

/* Cartão aberto, como no app */
.tr-card-modal .site-modal-body { display: grid; gap: 16px; }
.tr-bigcard { position: relative; display: grid; grid-template-columns: 44px 1fr auto; align-items: start; gap: 12px; aspect-ratio: 1.586; padding: 22px; border-radius: 26px; color: var(--n-0); font-weight: 800; font-size: 17px; box-shadow: 0 30px 50px -28px var(--n-900); }
.tr-bigcard img { width: 44px; height: 44px; border-radius: 13px; } .tr-bigcard .brand { width: 62px; height: auto; border-radius: 0; }
.tr-bigcard small { position: absolute; left: 22px; bottom: 46px; font-size: 16px; letter-spacing: .1em; opacity: .9; } .tr-bigcard em { position: absolute; left: 22px; bottom: 20px; font-style: normal; font-weight: 600; font-size: 13px; opacity: .85; }
.tr-bigcard.is-orange { background: linear-gradient(135deg, var(--c-category-orange), var(--c-category-coral)); } .tr-bigcard.is-purple { background: linear-gradient(135deg, var(--c-category-purple), var(--c-category-plum)); } .tr-bigcard.is-dark { background: linear-gradient(135deg, var(--c-category-slate), var(--n-900)); }
.tr-card-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .tr-card-kpis span { padding: 12px; border-radius: 16px; background: var(--n-100); } .tr-card-kpis small { display: block; font-size: 11.5px; color: var(--n-600); } .tr-card-kpis b { font-size: 15px; }
.tr-card-use { display: grid; gap: 6px; } .tr-card-use small { font-size: 12.5px; color: var(--n-600); } .tr-card-use .tr-limit i { width: var(--p, 20%); }
.tr-card-buys { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; } .tr-card-buys li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--n-0); border: 1px solid var(--n-150); }
.tr-card-buys b { display: block; font-size: 14px; } .tr-card-buys small { font-size: 12px; color: var(--n-600); } .tr-card-buys em { font-style: normal; font-weight: 800; color: var(--c-danger); }
.tr-ccard { cursor: pointer; } .tr-ccard:hover .tr-face { filter: brightness(1.05); }

@media (max-width: 820px) {
  .tr-band.is-top { margin-top: -10px; padding-top: 40px; }
  .tr-finish { left: 22px; }
  .tr-band.is-end .tr-float span { opacity: .28; } .tr-band.is-end .tr-float span:nth-child(odd) { display: none; }
  .tr-card-kpis { grid-template-columns: 1fr 1fr; }
}

/* ---------- Ajustes de 17/10 (2): o fim enche de azul, conteúdo só ao chegar, card do passo 1, faixa de baixo do "Saiba mais" ---------- */
.tr-text { opacity: .12; }
/* O azul do fim nasce na ponta da linha e se espalha (círculo que cresce com a rolagem). */
.tr-band.is-end { background: var(--n-50); }
.tr-liquid { position: absolute; inset: 0; z-index: -2; background: radial-gradient(circle at 70% 20%, color-mix(in srgb, var(--c-accent) 55%, transparent), transparent 55%), linear-gradient(140deg, var(--n-900), var(--n-800) 55%, var(--c-accent) 160%); clip-path: circle(var(--r, 0px) at var(--fx, 40px) 0); }
.tr-band.is-end .tr-float { opacity: var(--fill, 0); transition: opacity .2s linear; }
.tr-finish { z-index: 1; }
.tr-band.is-full .tr-finish { opacity: 0; transition: opacity .6s ease; }
.tr-end-body { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.tr-end-body.is-on { opacity: 1; transform: none; }
/* Card do passo 1 com desenho: fundo azul-claro com grade de pontos e brilho. */
.tr-scatter { background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--c-accent) 16%, transparent), transparent 60%), radial-gradient(color-mix(in srgb, var(--c-accent) 22%, transparent) 1.4px, transparent 1.8px) 0 0 / 18px 18px, linear-gradient(160deg, var(--n-0), var(--n-100)); box-shadow: inset 0 0 0 1px var(--n-200), 0 24px 50px -36px var(--n-800); }
.tr-scatter.is-joined { background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--c-accent) 30%, transparent), transparent 62%), radial-gradient(color-mix(in srgb, var(--c-accent) 22%, transparent) 1.4px, transparent 1.8px) 0 0 / 18px 18px, linear-gradient(160deg, var(--n-0), var(--n-100)); }
/* "Saiba mais": abrir e fechar com suavidade; faixa azul entre os detalhes e o rodapé, com o mesmo botão. */
.tr-more-area { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.tr-more-area.is-shown { opacity: 1; transform: none; } .tr-more-area.is-closing { opacity: 0; transform: translateY(-10px); }
.tr-more-end { position: relative; margin-top: 40px; height: 120px; background: linear-gradient(140deg, var(--n-900), var(--n-800) 60%, var(--c-accent) 160%); }

/* ---------- Ajustes de 17/10 (3): a trilha nasce na faixa azul, o passo acompanha a rolagem ---------- */
.tr-one small { display: block; max-width: 22ch; margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--c-accent); text-align: center; }
/* Início: a faixa azul "fornece" a cor para a trilha. Um ponto de luz na borda de baixo, com uma gota que desce para a linha. */
.tr-source { position: absolute; z-index: 2; bottom: 0; left: max(clamp(30px, 4vw, 54px) + clamp(16px, 4vw, 40px), calc((100% - 1120px) / 2 + clamp(30px, 4vw, 54px))); width: 4px; height: 70px; background: linear-gradient(transparent, var(--c-category-sky)); }
.tr-source i { position: absolute; left: 50%; top: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--c-category-sky); box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-category-sky) 25%, transparent), 0 0 26px var(--c-category-sky); }
.tr-source i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--n-0); animation: tr-drip 2.4s cubic-bezier(.5, 0, .7, 1) infinite; }
@keyframes tr-drip { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(76px); opacity: 1; } 100% { transform: translateY(84px); opacity: 0; } }
.tr-line { background: linear-gradient(var(--c-category-sky), var(--n-200) 60px); }
/* O ponto da trilha vive junto do texto do passo. */
.tr-text { position: relative; } .tr-text .tr-dot { top: 2.6em; }
.tr-step.is-highlight .tr-text .tr-dot { left: calc(-1 * clamp(64px, 8vw, 110px) + clamp(30px, 4vw, 54px) + 2px); }
@media (min-width: 821px) {
  /* O passo aceso fica parado acompanhando a tela até o próximo começar: sem faixas brancas vazias. */
  .tr-step:not(.is-highlight) { align-items: start; min-height: 86svh; }
  .tr-step:not(.is-highlight) > .tr-text, .tr-step:not(.is-highlight) > .tr-art { position: sticky; top: 130px; }
}
@media (max-width: 820px) { .tr-source { left: 22px; height: 40px; } .tr-text .tr-dot { top: 20px; } }
/* O ponto fica sempre visível; só o texto do passo esmaece antes da linha chegar. */
.tr-text, .tr-step.is-on .tr-text { opacity: 1; transform: none; }
.tr-text > :not(.tr-dot) { opacity: .12; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.tr-step.is-on .tr-text > :not(.tr-dot) { opacity: 1; transform: none; }
/* Funil do início (substitui o ponto de luz): boca larga colada na faixa azul, bico na linha da trilha. */
.tr-source { display: none; }
.tr-funnel { position: absolute; z-index: 1; top: 0; left: calc(clamp(30px, 4vw, 54px) + 2px - 120px); width: 240px; height: 130px; pointer-events: none; }
.tr-fs-top { stop-color: var(--n-800); } .tr-fs-mid { stop-color: var(--c-accent); } .tr-fs-tip { stop-color: var(--c-category-sky); }
.tr-drop { position: absolute; z-index: 2; top: 30px; left: calc(clamp(30px, 4vw, 54px) + 2px - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--n-0); box-shadow: 0 0 10px var(--c-category-sky); animation: tr-drop 2.4s cubic-bezier(.5, 0, .7, 1) infinite; }
@keyframes tr-drop { 0% { transform: translateY(0) scale(.6); opacity: 0; } 20% { opacity: 1; } 85% { transform: translateY(130px) scale(1); opacity: 1; } 100% { transform: translateY(150px); opacity: 0; } }
.tr-line { top: 128px; background: linear-gradient(var(--c-category-sky), var(--n-200) 80px); }
.tr { padding-top: 60px; }
@media (max-width: 820px) { .tr-funnel { left: calc(22px + 2px - 70px); width: 140px; height: 90px; } .tr-drop { left: 20px; } .tr-line { top: 88px; } @keyframes tr-drop { 85% { transform: translateY(90px); opacity: 1; } 100% { transform: translateY(104px); opacity: 0; } } }
.tr { margin-top: 0; } .tr-funnel { height: 110px; } .tr-line { top: 108px; }
@media (max-width: 820px) { .tr-funnel { height: 80px; } .tr-line { top: 78px; } }

/* ---------- Ajustes de 17/10 (4): a faixa mostra os apps de hoje, que o funil traga ---------- */
.tr-band-ask { position: relative; z-index: 2; max-width: 1120px; margin: 0 auto 18px; padding: 0 clamp(16px, 4vw, 40px); font-family: Ubuntu, Inter, sans-serif; font-size: clamp(20px, 2.6vw, 30px); font-weight: 700; color: var(--n-0); text-align: center; }
.tr-marquee-track span.is-sheet, .tr-marquee-track span.is-quotes, .tr-suck span.is-sheet, .tr-suck span.is-quotes { display: grid; place-items: center; align-content: center; gap: 0; color: var(--n-0); }
.tr-marquee-track span.is-sheet, .tr-suck span.is-sheet { background: linear-gradient(140deg, var(--c-category-green), var(--c-success)); }
.tr-marquee-track span.is-quotes, .tr-suck span.is-quotes { background: linear-gradient(140deg, var(--c-category-blue), var(--c-category-indigo)); }
.is-sheet b, .is-quotes b { font-size: 22px; line-height: 1; } .is-sheet small, .is-quotes small { font-size: 9px; font-weight: 700; letter-spacing: .02em; }
/* Apps caindo no funil: descem da faixa, encolhem e somem no bico, um por vez. */
.tr-suck { position: absolute; z-index: 3; top: 0; left: calc(clamp(30px, 4vw, 54px) + 2px); width: 0; height: 0; pointer-events: none; }
.tr-suck span { position: absolute; left: -20px; top: -40px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--n-0); box-shadow: 0 10px 20px -10px var(--n-900); opacity: 0; animation: tr-suck 7.2s cubic-bezier(.55, 0, .7, 1) infinite; }
.tr-suck span img { width: 70%; border-radius: 6px; } .tr-suck span.is-sheet b, .tr-suck span.is-quotes b { font-size: 16px; } .tr-suck small { display: none; }
.tr-suck span:nth-child(2) { animation-delay: 1.2s; --sx: 70px; } .tr-suck span:nth-child(3) { animation-delay: 2.4s; --sx: -60px; } .tr-suck span:nth-child(4) { animation-delay: 3.6s; --sx: 90px; } .tr-suck span:nth-child(5) { animation-delay: 4.8s; --sx: -80px; } .tr-suck span:nth-child(6) { animation-delay: 6s; --sx: 40px; }
@keyframes tr-suck { 0% { opacity: 0; transform: translate(var(--sx, -40px), -10px) scale(1) rotate(0); } 10% { opacity: 1; } 55% { opacity: 1; transform: translate(0, 50px) scale(.55) rotate(-12deg); } 75% { opacity: 0; transform: translate(0, 100px) scale(.15) rotate(-20deg); } 100% { opacity: 0; transform: translate(0, 100px) scale(.1); } }
@media (max-width: 820px) { .tr-suck { left: 24px; } .tr-band-ask { font-size: 19px; } }
@media (prefers-reduced-motion: reduce) { .tr-suck { display: none; } }
.tr-band.is-top .tr-marquee-track span.is-sheet { background: linear-gradient(140deg, var(--c-category-green), var(--c-success)); }
.tr-band.is-top .tr-marquee-track span.is-quotes { background: linear-gradient(140deg, var(--c-category-blue), var(--c-category-indigo)); }

/* "Saiba mais" como aba presa na divisa: metade de cima no azul, metade de baixo no claro. Ao abrir, as metades se
   afastam e o conteúdo se abre a partir do meio (e se fecha do mesmo jeito). */
.tr-tab { position: relative; display: grid; width: 260px; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; transform: translateY(-50%); }
.tr-tab-top, .tr-tab-bottom { display: flex; align-items: center; justify-content: center; gap: 8px; height: 34px; transition: transform .5s cubic-bezier(.6, 0, .2, 1), box-shadow .3s ease; }
.tr-tab-top { border-radius: 18px 18px 0 0; background: linear-gradient(180deg, var(--n-800), color-mix(in srgb, var(--c-accent) 55%, var(--n-800))); color: var(--n-0); font-size: 16px; font-weight: 800; letter-spacing: .01em; }
.tr-tab-bottom { border-radius: 0 0 18px 18px; background: var(--n-0); color: var(--n-600); font-size: 13px; font-weight: 600; box-shadow: 0 14px 26px -16px var(--n-800), inset 0 -1px 0 var(--n-200); }
.tr-tab-caret { width: 15px; height: 15px; transition: transform .5s ease; }
.tr-tab::after { content: ""; position: absolute; left: 12%; right: 12%; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--c-category-sky); box-shadow: 0 0 14px var(--c-category-sky); opacity: .7; animation: tr-seam 2.2s ease-in-out infinite; }
@keyframes tr-seam { 50% { opacity: .2; transform: scaleX(.7); } }
.tr-tab:hover .tr-tab-top { transform: translateY(-3px); } .tr-tab:hover .tr-tab-bottom { transform: translateY(3px); }
.tr-tab.is-open .tr-tab-top { transform: translateY(-8px); } .tr-tab.is-open .tr-tab-bottom { transform: translateY(8px); } .tr-tab.is-open .tr-tab-caret { transform: rotate(180deg); } .tr-tab.is-open::after { animation: none; opacity: 1; }
.tr-tab.is-close .tr-tab-caret { transform: rotate(180deg); }
.tr-tab:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 6px; border-radius: 18px; }
.tr-more-area { opacity: 1; transform: none; clip-path: inset(50% 0 50% 0); transition: clip-path .7s cubic-bezier(.6, 0, .2, 1); }
.tr-more-area.is-shown { clip-path: inset(0 0 0 0); } .tr-more-area.is-closing { clip-path: inset(50% 0 50% 0); }
.tr-more-end .tr-tab-top { background: linear-gradient(180deg, var(--n-50), var(--n-0)); color: var(--n-900); } .tr-more-end .tr-tab-bottom { background: var(--n-800); color: var(--n-300); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .tr-more-area { transition: none; } .tr-tab::after { animation: none; } }

/* ---------- "Saiba mais" (17/10, versão 3): lingueta que desce da faixa azul ----------
   Fechado: uma aba azul presa na borda de baixo da faixa, com uma seta que respira. Ao abrir, ela recolhe para
   dentro da faixa (some) e o conteúdo desce a partir da borda. No fim do conteúdo, a faixa azul de baixo tem a
   lingueta "Ver menos", apontando para cima, que faz o caminho inverso. */
.tr-tab { display: none; }
.tr-more-area { clip-path: inset(0 0 100% 0); transition: clip-path .8s cubic-bezier(.6, 0, .2, 1); }
.tr-more-area.is-shown { clip-path: inset(0 0 0 0); } .tr-more-area.is-closing { clip-path: inset(0 0 100% 0); }
.tr-more-area { padding-top: 40px; }
.tr-more-end { display: flex; justify-content: center; margin-top: 48px; height: 90px; background: linear-gradient(140deg, var(--n-900), var(--n-800) 60%, var(--c-accent) 160%); }
@media (prefers-reduced-motion: reduce) { .tr-more-area { transition: none; } }
/* Lingueta (17/10, ajuste): menor, sem as abas curvas dos lados, colada na borda e da mesma cor da faixa de onde sai. */
/* Lingueta: parada, sempre colada (sem deslocar no passar do mouse); no hover só clareia. Sobe 1px sobre a borda para não
   deixar fresta entre ela e a faixa. */

/* Saiba mais (E08): cartão que flutua sobre a divisa entre a faixa escura e o branco, com os ícones dos recursos.
   Sem lingueta presa à borda: ele fica metade em cada lado, e o hover só acende a borda e a sombra (não se move). */
.tr-more-cta { position: relative; z-index: 30; display: flex; align-items: flex-start; justify-content: center; height: 0; margin-bottom: 52px; padding: 0 16px; }
.tr-more-btn { display: inline-flex; align-items: center; gap: 16px; max-width: 100%; padding: 12px 12px 12px 14px; border: 1px solid var(--n-150); border-radius: 24px; background: var(--n-0); color: var(--n-900); font: inherit; text-align: left; cursor: pointer; transform: translateY(-50%); box-shadow: 0 26px 50px -26px color-mix(in srgb, var(--n-900) 60%, transparent), 0 2px 8px color-mix(in srgb, var(--n-900) 8%, transparent); transition: box-shadow .25s ease, border-color .25s ease; }
.tr-more-btn:hover { border-color: color-mix(in srgb, var(--c-accent) 45%, var(--n-150)); box-shadow: 0 30px 60px -26px color-mix(in srgb, var(--c-accent) 55%, transparent), 0 2px 8px color-mix(in srgb, var(--n-900) 8%, transparent); }
.tr-more-btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 4px; }
.tr-more-icons { display: flex; flex: 0 0 auto; }
.tr-more-icons > span { display: grid; place-items: center; width: 40px; height: 40px; margin-left: -10px; border: 3px solid var(--n-0); border-radius: 50%; color: var(--n-0); background: var(--c-accent); }
.tr-more-icons > span:first-child { margin-left: 0; }
.tr-more-icons > span:nth-child(2) { background: var(--c-category-green); } .tr-more-icons > span:nth-child(3) { background: var(--c-category-orange); } .tr-more-icons > span:nth-child(4) { background: var(--c-category-indigo); }
.tr-more-icons svg { width: 18px; height: 18px; }
.tr-more-text { display: grid; gap: 2px; min-width: 0; }
.tr-more-text strong { font-size: 16.5px; font-weight: 800; }
.tr-more-text small { font-size: 13px; color: var(--n-600); }
.tr-more-arrow { display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; background: var(--n-50); color: var(--c-accent); }
.tr-more-arrow svg { width: 20px; height: 20px; animation: tr-more-nudge 1.8s ease-in-out infinite; }
@keyframes tr-more-nudge { 50% { transform: translateY(3px); } }
.tr-more-btn[aria-expanded="true"] .tr-more-arrow svg, .tr-more-btn.is-close .tr-more-arrow svg { transform: rotate(180deg); animation: none; }
.tr-more-end { display: flex; justify-content: center; height: auto; margin: 36px 0 0; padding: 0 16px 56px; }
.tr-more-btn.is-close { padding: 8px 22px 8px 8px; transform: none; }
.tr-more-btn.is-close .tr-more-text strong { font-size: 15px; }
@media (max-width: 560px) { .tr-more-btn { gap: 12px; padding: 10px 10px 10px 12px; } .tr-more-icons > span { width: 32px; height: 32px; margin-left: -9px; } .tr-more-icons svg { width: 15px; height: 15px; } .tr-more-text strong { font-size: 15px; } .tr-more-text small { display: none; } .tr-more-arrow { width: 36px; height: 36px; } } /* no celular os ícones já dizem quais são os recursos */
@media (prefers-reduced-motion: reduce) { .tr-more-arrow svg { animation: none; } }

/* DeFi (E08): dois painéis com título próprio, para cada ferramenta ter a sua dimensão. No celular, um embaixo do outro. */
#trilha-defi .tr-art.is-split { row-gap: 10px; }
.tr-duo-label { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent); }
.tr-spend { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 10px 14px; border-radius: 16px; background: var(--n-0); box-shadow: 0 14px 30px -26px var(--n-800); font-size: 13.5px; }
.tr-spend span { display: grid; gap: 1px; white-space: nowrap; } .tr-spend small { font-size: 12px; color: var(--n-600); } .tr-spend b { color: var(--c-success); white-space: nowrap; }
@media (min-width: 761px) {
  #trilha-defi .tr-health { grid-column: 1; grid-row: 2; } #trilha-defi .tr-logos.is-tight { grid-column: 1; grid-row: 3; }
  #trilha-defi .tr-duo-label.is-right { grid-column: 2; grid-row: 1; } #trilha-defi .tr-ccard.is-wide { grid-column: 2; grid-row: 2; } .tr-spend { grid-column: 2; grid-row: 3; }
}
@media (max-width: 760px) { #trilha-defi .tr-duo-label.is-right { order: 4; margin-top: 14px; } #trilha-defi .tr-ccard.is-wide { order: 5; } .tr-spend { order: 6; } #trilha-defi .tr-art > .tr-tap { order: 7; } #trilha-defi .tr-health { order: 2; } #trilha-defi .tr-logos.is-tight { order: 3; } }

/* Segurança (E08): um cartão de proteção em camadas; as linhas acendem uma a uma quando o passo aparece. */
.tr-safe { display: grid; gap: 14px; padding: 22px; border-radius: 26px; background: var(--n-0); box-shadow: 0 30px 60px -40px var(--n-800), 0 2px 6px color-mix(in srgb, var(--n-900) 6%, transparent); }
.tr-safe header { display: flex; align-items: center; gap: 12px; }
.tr-safe-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: linear-gradient(140deg, var(--c-success), color-mix(in srgb, var(--c-success) 60%, var(--n-900))); color: var(--n-0); }
.tr-safe-icon svg { width: 24px; height: 24px; }
.tr-safe header b { display: block; font-size: 17px; color: var(--n-900); } .tr-safe header small { font-size: 13px; color: var(--n-600); }
.tr-safe ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.tr-safe li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--n-150); opacity: .25; transform: translateX(8px); transition: opacity .5s ease, transform .5s ease; }
.tr-safe li:first-child { border-top: 0; }
.tr-step.is-on .tr-safe li { opacity: 1; transform: none; }
.tr-step.is-on .tr-safe li:nth-child(2) { transition-delay: .15s; } .tr-step.is-on .tr-safe li:nth-child(3) { transition-delay: .3s; } .tr-step.is-on .tr-safe li:nth-child(4) { transition-delay: .45s; } .tr-step.is-on .tr-safe li:nth-child(5) { transition-delay: .6s; }
.tr-safe-check { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: color-mix(in srgb, var(--c-success) 12%, transparent); color: var(--c-success); }
.tr-safe-check svg { width: 18px; height: 18px; }
.tr-safe li b { display: block; font-size: 15px; color: var(--n-900); } .tr-safe li small { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: var(--n-600); }
@media (prefers-reduced-motion: reduce) { .tr-safe li { opacity: 1; transform: none; transition: none; } }

.tr-mini b { font-size: clamp(15px, 1.7vw, 20px); overflow-wrap: anywhere; } .tr-mini > span { min-width: 0; }
/* Telas médias (tablet, notebook pequeno): a ponte empilha como no celular; lado a lado ela não cabia. */
@media (min-width: 821px) and (max-width: 1180px) {
  .tr-bridge { grid-template-columns: 1fr; gap: 10px; } .tr-way { height: 56px; width: 4px; justify-self: center; margin: 0; background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--n-0) 40%, transparent) 0 8px, transparent 8px 14px); }
  .tr-coin { transform: translate(-50%, -150%); }
}

/* Comparativo com outros apps e mural do que vem por aí (janela do 1º passo). */
.tr-compare { margin-top: 14px; }
.cmp-modal .site-modal-body { display: block; } .cmp-modal .site-modal-body > * + * { margin-top: 14px; }
.cmp-lead { margin: 0; color: var(--n-600); font-size: 15px; }
.cmp-table { overflow-x: auto; border-radius: 18px; border: 1px solid var(--n-200); background: var(--n-0); -webkit-overflow-scrolling: touch; }
.cmp-table table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 14px; }
.cmp-table th, .cmp-table td { padding: 11px 10px; border-bottom: 1px solid var(--n-150); text-align: center; vertical-align: middle; }
.cmp-table tbody tr:last-child > * { border-bottom: 0; }
.cmp-table thead th { font-size: 13px; font-weight: 800; color: var(--n-800); background: var(--n-50); }
.cmp-table thead th small { display: block; margin-top: 2px; font-size: 11px; font-weight: 600; color: var(--n-500); }
.cmp-table tbody th { position: sticky; left: 0; z-index: 1; min-width: 190px; text-align: left; font-weight: 650; color: var(--n-800); background: var(--n-0); }
.cmp-table thead th:first-child { position: sticky; left: 0; z-index: 2; text-align: left; }
.cmp-table tbody th small { display: block; margin-top: 3px; font-size: 12px; font-weight: 500; color: var(--n-500); line-height: 1.35; }
.cmp-table .is-us { background: color-mix(in srgb, var(--c-accent) 8%, var(--n-0)); }
.cmp-table thead .is-us { color: var(--c-accent); }
.cmp-mark { display: inline-block; padding: 4px 9px; border-radius: 8px; font-size: 12px; font-weight: 750; white-space: nowrap; }
.cmp-mark.is-yes { background: color-mix(in srgb, var(--c-success) 14%, transparent); color: var(--c-success); }
.cmp-mark.is-paid { background: color-mix(in srgb, var(--c-warning) 16%, transparent); color: var(--c-warning); }
.cmp-mark.is-plan { background: color-mix(in srgb, var(--c-accent) 12%, transparent); color: var(--c-accent); }
.cmp-mark.is-no { background: var(--n-150); color: var(--n-700); }
.cmp-mark.is-na { color: var(--n-400); font-weight: 600; }
.cmp-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--n-500); }
.cmp-note a { color: var(--c-accent); }
.cmp-mural { display: grid; gap: 12px; margin-top: 10px; padding-top: 18px; border-top: 1px solid var(--n-200); }
.cmp-mural h3 { margin: 0; font-size: 20px; }
@media (max-width: 600px) { .cmp-table table { min-width: 640px; font-size: 13px; } .cmp-table th, .cmp-table td { padding: 10px 8px; }
  /* Recurso e Minha Wallet ficam fixos; os outros apps rolam por baixo, para a comparação ser sempre lado a lado. */
  .cmp-table tbody th, .cmp-table thead th:first-child { width: 118px; min-width: 118px; max-width: 118px; }
  .cmp-table .is-us { position: sticky; left: 118px; z-index: 1; width: 92px; min-width: 92px; box-shadow: 6px 0 10px -8px color-mix(in srgb, var(--n-900) 45%, transparent); }
  .cmp-table thead .is-us { z-index: 3; }
  .cmp-table thead th:first-child { z-index: 4; } }
.cmp-logo { display: block; width: 40px; height: 40px; margin: 0 auto 6px; border-radius: 11px; object-fit: contain; }
.cmp-name { display: block; font-size: 13.5px; font-weight: 800; }

/* Andamento na página principal (25/10/2026): compacto, a trilha de lado e as duas listas. */
.tr-news { background: var(--n-50); }
.tr-news .site-heading { margin-bottom: 22px; }
.tr-news-part { margin-bottom: 18px; }
.tr-news-part h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 15px; color: var(--n-700); }
.tr-news-part h3 svg { width: 18px; height: 18px; color: var(--c-accent); }
.tr-news-note { margin: 16px 0 0; font-size: 13px; color: var(--n-500); }
.tr-news-note a { color: var(--c-accent); font-weight: 700; cursor: pointer; }

.tr-news-part h3 small { font-size: 12.5px; font-weight: 600; color: var(--n-500); }

/* Perguntas em conversa (25/10/2026, modelo da AuraLabs). */
.tr-faq .site-heading { margin-bottom: 22px; }
.faq-chat { width: min(760px, 100%); margin: 0 auto; display: grid; gap: 16px; padding: 20px; border-radius: 26px; background: var(--n-0); box-shadow: inset 0 0 0 1px var(--n-150), 0 18px 40px -30px color-mix(in srgb, var(--n-900) 45%, transparent); }
.faq-themes { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.faq-themes::-webkit-scrollbar { display: none; }
.faq-themes button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border: 0; border-radius: 999px; background: var(--n-100); color: var(--n-700); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.faq-themes button svg { width: 16px; height: 16px; }
.faq-themes button.is-active { background: var(--c-accent); color: var(--n-0); }
.faq-log { display: grid; gap: 10px; max-height: 380px; overflow-y: auto; padding: 4px; overscroll-behavior: contain; }
.faq-msg { display: flex; gap: 10px; align-items: flex-end; max-width: 88%; animation: faq-in .35s cubic-bezier(.2, .8, .2, 1) both; }
.faq-msg p { margin: 0; padding: 11px 15px; border-radius: 18px 18px 18px 6px; background: var(--n-100); font-size: 15px; line-height: 1.5; color: var(--n-800); }
.faq-msg.is-out { justify-self: end; }
.faq-msg.is-out p { border-radius: 18px 18px 6px 18px; background: var(--c-accent); color: var(--n-0); }
.faq-av { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: color-mix(in srgb, var(--c-accent) 12%, var(--n-0)); }
.faq-av img { width: 22px; height: 22px; object-fit: contain; }
.faq-typing { display: inline-flex; gap: 4px; padding: 14px 16px; border-radius: 18px 18px 18px 6px; background: var(--n-100); }
.faq-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--n-600); /* --n-400 não existe: os pontos sumiam */ animation: faq-dot 1s infinite ease-in-out; }
.faq-typing i:nth-child(2) { animation-delay: .15s; } .faq-typing i:nth-child(3) { animation-delay: .3s; }
.faq-picks { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; border-top: 1px solid var(--n-150); }
.faq-pick { display: contents; }
.faq-pick summary { list-style: none; padding: 9px 14px; border-radius: 999px; border: 1.5px solid var(--n-200); background: var(--n-0); color: var(--n-800); font-size: 14px; cursor: pointer; transition: border-color .2s, transform .2s; }
.faq-pick summary::-webkit-details-marker { display: none; }
.faq-pick summary:hover { border-color: var(--c-accent); transform: translateY(-2px); }
.faq-pick.is-used summary { opacity: .5; }
.faq-pick p { flex-basis: 100%; margin: 0 0 6px; font-size: 14px; color: var(--n-600); }
.faq-chat.is-live .faq-pick p { display: none; }
.faq-more { margin: 0; text-align: center; font-size: 13.5px; color: var(--n-500); }
.faq-more a { color: var(--c-accent); font-weight: 700; cursor: pointer; }
@keyframes faq-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes faq-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .faq-msg, .faq-typing i { animation: none; } }

/* Outras moedas na jornada (3.6): o "+ US$" abaixo do saldo, como no Início do app. */
.tr-fx-plus { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; font-size: 20px; font-weight: 800; }
.tr-fx-plus i { font-style: normal; opacity: .7; }
.tr-fx-plus small { font-size: 12.5px; font-weight: 600; opacity: .75; }
/* Grupos do comparativo (25/10/2026). */
.cmp-table tr.cmp-group th { padding: 12px 14px 8px; text-align: left; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent); background: color-mix(in srgb, var(--c-accent) 6%, var(--n-0)); }
.faq-picks[hidden] { display: none; }
@media (min-width: 760px) { .faq-themes { flex-wrap: wrap; justify-content: center; overflow: visible; } }

/* Fundos que separam as seções do fim (Darlan, 26/10/2026): Perguntas com brilho suave; Andamento branco com trama de pontos. */
.tr-faq { position: relative; isolation: isolate; background: radial-gradient(55% 45% at 12% 0%, color-mix(in srgb, var(--c-accent) 13%, transparent), transparent 70%), radial-gradient(45% 40% at 92% 100%, color-mix(in srgb, var(--c-success) 11%, transparent), transparent 70%), var(--n-50); }
.tr-news { background-color: var(--n-0); background-image: radial-gradient(color-mix(in srgb, var(--c-accent) 16%, var(--n-150)) 1px, transparent 1.2px); background-size: 22px 22px; border-top: 1px solid var(--n-150); }
.tr-news .site-heading, .tr-news .tr-news-part h3, .tr-news .tr-news-note { position: relative; }
.tr-news .site-heading { padding: 18px 20px; border-radius: 22px; background: color-mix(in srgb, var(--n-0) 88%, transparent); }
/* Faixa do fim dos detalhes: a faixa do topo (marcas), com o botão de fechar por cima. */
.tr-more-end { display: grid; justify-items: center; height: auto; margin-top: 48px; padding: 0 0 46px; overflow: hidden; color: var(--n-0); background: radial-gradient(circle at 78% 0%, color-mix(in srgb, var(--c-accent) 50%, transparent), transparent 55%), linear-gradient(140deg, var(--n-900), var(--n-800) 60%, color-mix(in srgb, var(--c-accent) 70%, var(--n-800)) 140%); }
.tr-more-end-band { width: 100%; padding: 46px 0 14px; }
.tr-more-end-band .tr-marquee { margin: 0; }
.tr-more-end-band .tr-band-ask { text-align: center; }
.tr-more-end .tr-more-btn.is-close { position: relative; z-index: 2; }

/* Recurso que vem por aí (só o que está no mural, aprovado): tracejado e o selo "em breve". */
.tr-extras li.is-soon { border-style: dashed; background: transparent; color: var(--n-600); }
.tr-extras li.is-soon em { margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--c-accent) 14%, transparent); color: var(--c-accent); font-size: 11px; font-style: normal; font-weight: 700; }
/* Pergunta feita na busca (29/10): o campo de busca do app, à direita, com a lupa; a resposta vem logo abaixo. */
.tr-feed-ask { justify-self: end; display: inline-flex; align-items: center; gap: 8px; max-width: 360px; padding: 10px 16px 10px 12px; border-radius: 999px; background: var(--n-0); color: var(--n-900); font-size: 14.5px; font-weight: 600; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c-accent) 45%, transparent), 0 10px 22px -16px var(--n-800); }
.tr-feed-ask svg { flex: none; width: 17px; height: 17px; fill: none; stroke: var(--c-accent); stroke-width: 2.2; stroke-linecap: round; }
.tr-feed-ask span::after { content: ""; display: inline-block; width: 1.5px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--c-accent); animation: tr-caret 1s steps(1) infinite; }
@keyframes tr-caret { 50% { opacity: 0; } }

/* Mercado (29/10): o gráfico próprio do app, claro, e os termômetros do módulo. Ao chegar no passo, as velas se revelam
   da esquerda para a direita, a média aparece, depois as compras e a régua. Cores só por tokens. */
.tr-mkt { display: grid; gap: 12px; padding: 18px; border-radius: 24px; background: var(--n-0); box-shadow: 0 24px 48px -34px var(--n-800), inset 0 0 0 1px var(--n-150); }
.tr-mkt-head { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; } .tr-mkt-head img { width: 34px; height: 34px; }
.tr-mkt-head b { display: block; font-size: 15px; } .tr-mkt-head small { color: var(--n-600); font-size: 12px; } .tr-mkt-head em { font-style: normal; font-weight: 800; }
.tr-mkt-tabs { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .tr-mkt-tabs span { padding: 4px 9px; border-radius: 8px; background: var(--n-50); color: var(--n-600); font-size: 11.5px; font-weight: 700; }
.tr-mkt-tabs span.is-on { background: color-mix(in srgb, var(--c-accent) 14%, var(--n-0)); color: var(--c-accent); } .tr-mkt-tabs i { width: 1px; height: 16px; margin: 0 4px; background: var(--n-150); }
.tr-mkt-chart { position: relative; overflow: hidden; border-radius: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--c-accent) 5%, var(--n-0)), var(--n-0)); }
.tr-mkt-chart svg { display: block; width: 100%; height: auto; }
.tr-mkt-grid { stroke: var(--n-150); stroke-dasharray: 3 5; }
.tr-mkt-candle line { stroke-width: 1.2; } .tr-mkt-candle.is-up line, .tr-mkt-candle.is-up rect { stroke: var(--c-success); fill: var(--c-success); } .tr-mkt-candle.is-down line, .tr-mkt-candle.is-down rect { stroke: var(--c-danger); fill: var(--c-danger); }
.tr-mkt-ma { fill: none; stroke: var(--c-warning); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 600; stroke-dashoffset: 600; }
.tr-mkt-buy { fill: var(--c-success); stroke: var(--n-0); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.tr-mkt-ruler rect { fill: color-mix(in srgb, var(--c-success) 12%, transparent); stroke: none; } .tr-mkt-ruler line { stroke: var(--c-success); stroke-width: 1.4; stroke-dasharray: 4 3; } .tr-mkt-ruler { opacity: 0; }
.tr-mkt-last { stroke: var(--c-accent); stroke-dasharray: 3 3; } .tr-mkt-tag { fill: var(--c-accent); } .tr-mkt-tagtext { fill: var(--c-on-color); font-size: 8.5px; font-weight: 800; }
.tr-mkt-cover { position: absolute; inset: 0; background: var(--n-0); transform-origin: right; }
.tr-mkt-rulertip, .tr-mkt-buytip { position: absolute; display: grid; padding: 6px 10px; border-radius: 10px; font-size: 11.5px; opacity: 0; transform: translateY(6px); pointer-events: none; }
.tr-mkt-rulertip { left: 12px; top: 10px; background: var(--c-success); color: var(--c-on-color); } .tr-mkt-rulertip b { font-size: 13px; } .tr-mkt-rulertip small { opacity: .9; }
.tr-mkt-buytip { left: 12px; bottom: 8px; background: var(--c-deep-900); color: var(--c-on-color); font-weight: 700; }
.tr-step.is-on .tr-mkt-cover { animation: tr-mkt-reveal 1.6s .2s cubic-bezier(.6, 0, .3, 1) forwards; }
.tr-step.is-on .tr-mkt-ma { animation: tr-mkt-draw 1.4s 1.4s ease forwards; }
.tr-step.is-on .tr-mkt-buy { animation: tr-mkt-pop .5s 2.4s cubic-bezier(.3, 1.6, .5, 1) forwards; }
.tr-step.is-on .tr-mkt-buytip { animation: tr-mkt-in .5s 2.7s ease forwards; }
.tr-step.is-on .tr-mkt-ruler { animation: tr-mkt-fade .6s 3.3s ease forwards; } .tr-step.is-on .tr-mkt-rulertip { animation: tr-mkt-in .5s 3.6s ease forwards; }
@keyframes tr-mkt-reveal { to { transform: scaleX(0); } } @keyframes tr-mkt-draw { to { stroke-dashoffset: 0; } } @keyframes tr-mkt-fade { to { opacity: 1; } }
@keyframes tr-mkt-pop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } } @keyframes tr-mkt-in { to { opacity: 1; transform: none; } }
.tr-mkt-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.tr-mkt-tiles li { display: grid; gap: 2px; align-content: start; padding: 10px; border-radius: 14px; background: var(--n-50); box-shadow: inset 0 0 0 1px var(--n-150); opacity: 0; transform: translateY(8px); }
.tr-step.is-on .tr-mkt-tiles li { animation: tr-mkt-in .45s ease forwards; }
.tr-step.is-on .tr-mkt-tiles li:nth-child(1) { animation-delay: 1s; } .tr-step.is-on .tr-mkt-tiles li:nth-child(2) { animation-delay: 1.1s; } .tr-step.is-on .tr-mkt-tiles li:nth-child(3) { animation-delay: 1.2s; } .tr-step.is-on .tr-mkt-tiles li:nth-child(4) { animation-delay: 1.3s; }
.tr-step.is-on .tr-mkt-tiles li:nth-child(5) { animation-delay: 1.4s; } .tr-step.is-on .tr-mkt-tiles li:nth-child(6) { animation-delay: 1.5s; } .tr-step.is-on .tr-mkt-tiles li:nth-child(7) { animation-delay: 1.6s; } .tr-step.is-on .tr-mkt-tiles li:nth-child(8) { animation-delay: 1.7s; }
.tr-mkt-tiles small { color: var(--n-600); font-size: 11px; font-weight: 600; line-height: 1.25; } .tr-mkt-tiles b { font-size: 12.5px; line-height: 1.25; }
.tr-mkt-ico { display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 4px; border-radius: 8px; background: color-mix(in srgb, var(--c-accent) 12%, transparent); color: var(--c-accent); } .tr-mkt-ico svg { width: 15px; height: 15px; }
.tr-mkt-heat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; width: 34px; height: 26px; margin-bottom: 4px; } .tr-mkt-heat i { border-radius: 2px; }
.tr-mkt-heat .is-u1 { background: color-mix(in srgb, var(--c-success) 45%, var(--n-150)); } .tr-mkt-heat .is-u2 { background: color-mix(in srgb, var(--c-success) 75%, var(--n-150)); } .tr-mkt-heat .is-u3 { background: var(--c-success); }
.tr-mkt-heat .is-d1 { background: color-mix(in srgb, var(--c-danger) 45%, var(--n-150)); } .tr-mkt-heat .is-d2 { background: var(--c-danger); }
.tr-mkt-gauge { position: relative; width: 34px; height: 18px; margin: 4px 0 8px; border-radius: 34px 34px 0 0; background: conic-gradient(from 270deg at 50% 100%, var(--c-danger), var(--c-warning) 90deg, var(--c-success) 180deg, transparent 0); }
.tr-mkt-gauge i { position: absolute; left: 50%; bottom: 0; width: 2px; height: 16px; margin-left: -1px; background: var(--n-900); border-radius: 2px; transform-origin: bottom; transform: rotate(22deg); }
@media (max-width: 720px) { .tr-mkt-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tr-mkt { padding: 14px; } }
@media (prefers-reduced-motion: reduce) { .tr-mkt-cover { display: none; } .tr-mkt-ma { stroke-dashoffset: 0; } .tr-mkt-buy, .tr-mkt-ruler, .tr-mkt-rulertip, .tr-mkt-buytip, .tr-mkt-tiles li { opacity: 1; transform: none; } }

/* Laço contínuo das logos (29/10): quatro cópias e espaçamento por margem (sem "gap"), então −25% cai exatamente no começo
   da cópia seguinte; em tela larga não sobra vazio no fim. */
.tr-marquee-track { gap: 0; animation-name: tr-marquee4; } .tr-marquee-track > span { margin-right: 14px; flex: none; }
@keyframes tr-marquee4 { to { transform: translateX(-25%); } }

/* Fim dos detalhes: domo azul (o topo é um arco largo), a linha da trilha descendo até o anel e o botão de fechar. */
.tr-more-end.is-dome { position: relative; display: grid; justify-items: center; align-content: end; gap: 18px; height: auto; min-height: 260px; margin: 56px 0 0; padding: 70px 16px 44px; overflow: hidden; background: none; }
.tr-more-end.is-dome::before { content: ""; position: absolute; z-index: 0; left: 50%; top: 0; bottom: 0; width: max(170vw, 1700px); transform: translateX(-50%); border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: radial-gradient(60% 40% at 50% 8%, color-mix(in srgb, var(--c-accent) 45%, transparent), transparent 70%), linear-gradient(160deg, var(--n-900), var(--n-800) 60%, color-mix(in srgb, var(--c-accent) 60%, var(--n-800))); }
.tr-more-end.is-dome > .tr-more-btn { position: relative; z-index: 1; } .tr-more-end.is-dome > .tr-dome-line, .tr-more-end.is-dome > .tr-dome-ring { z-index: 1; }
.tr-dome-line { position: absolute; top: 28px; left: 50%; width: 3px; height: 82px; margin-left: -1.5px; background: linear-gradient(180deg, color-mix(in srgb, var(--c-accent) 20%, transparent), var(--c-accent)); box-shadow: 0 0 14px color-mix(in srgb, var(--c-accent) 60%, transparent); }
.tr-dome-ring { position: absolute; top: 104px; left: 50%; display: grid; place-items: center; width: 58px; height: 58px; margin-left: -29px; border-radius: 50%; box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--c-accent) 35%, transparent), 0 0 28px color-mix(in srgb, var(--c-accent) 35%, transparent); animation: tr-dome-pulse 2.6s ease-in-out infinite; }
.tr-dome-ring i { width: 20px; height: 20px; border-radius: 50%; background: var(--c-on-color); box-shadow: 0 0 0 8px color-mix(in srgb, var(--c-accent) 40%, transparent); }
.tr-more-end.is-dome .tr-more-btn.is-close { margin-top: 110px; }
@keyframes tr-dome-pulse { 50% { box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--c-accent) 55%, transparent), 0 0 44px color-mix(in srgb, var(--c-accent) 55%, transparent); } }

/* Divisor do FAQ para o Andamento: as logos correm para a direita e entram na logo do projeto, maior, no canto. */
.tr-absorb { position: relative; isolation: isolate; overflow: hidden; padding: 56px 0 50px; color: var(--c-on-color);
  background: radial-gradient(circle at 86% 55%, color-mix(in srgb, var(--c-accent) 55%, transparent), transparent 42%), linear-gradient(140deg, var(--n-900), var(--n-800)); }
.tr-absorb-in { display: grid; gap: 22px; }
.tr-absorb .tr-band-ask { margin-bottom: 0; }
.tr-absorb-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding-right: clamp(20px, 6vw, 110px); }
.tr-absorb-row > .tr-marquee { grid-column: 1 / -1; grid-row: 1; } .tr-absorb-row > .tr-absorb-logo { grid-column: 2; grid-row: 1; z-index: 3; } /* as logos correm por baixo e entram na logo */
.tr-marquee.is-absorb { margin: 0; overflow: visible; clip-path: inset(-60px 0 -60px 0); mask-image: linear-gradient(90deg, transparent, var(--n-900) 8%); -webkit-mask-image: linear-gradient(90deg, transparent, var(--n-900) 8%); } /* sem esmaecer à direita: chegam inteiras e coloridas */
.tr-marquee.is-absorb .tr-marquee-track { animation-direction: reverse; animation-duration: 60s; }
.tr-marquee.is-absorb .tr-marquee-track > span:not(.is-sheet):not(.is-quotes) { background: color-mix(in srgb, var(--c-on-color) 94%, transparent); box-shadow: 0 14px 28px -18px var(--n-900); }
.tr-marquee.is-absorb .tr-marquee-track > span { transition: none; will-change: transform, opacity; }
.tr-absorb-logo { position: relative; display: grid; place-items: center; width: clamp(120px, 13vw, 184px); aspect-ratio: 1; }
.tr-absorb-logo img { position: relative; z-index: 2; width: 82%; height: auto; filter: drop-shadow(0 16px 28px color-mix(in srgb, var(--n-900) 70%, transparent)); animation: tr-absorb-beat 1.9s ease-in-out infinite; }
.tr-absorb-glow { position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c-accent) 55%, transparent), transparent 62%); animation: tr-absorb-glow 1.9s ease-in-out infinite; }
.tr-absorb-ring { position: absolute; inset: 4%; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--c-on-color) 40%, transparent); animation: tr-absorb-ring 1.9s ease-out infinite; }
.tr-absorb-ring.is-b { animation-delay: .95s; }
@keyframes tr-absorb-beat { 50% { transform: scale(1.06); } }
@keyframes tr-absorb-glow { 50% { opacity: .65; transform: scale(1.08); } }
@keyframes tr-absorb-ring { from { opacity: .9; transform: scale(1.15); } to { opacity: 0; transform: scale(.55); } }
@media (max-width: 720px) { .tr-absorb { padding: 40px 0 36px; } .tr-absorb-row { padding-right: 14px; } .tr-absorb-logo { width: 92px; margin-left: -14px; } .tr-more-end.is-dome { min-height: 200px; } }
@media (prefers-reduced-motion: reduce) { .tr-absorb-logo img, .tr-absorb-glow, .tr-absorb-ring, .tr-dome-ring { animation: none; } }

/* A cada logo engolida: a logo do projeto dá um tranco e solta um anel de luz. */
.tr-absorb-logo::after { content: ""; position: absolute; inset: 10%; border-radius: 50%; border: 3px solid var(--c-on-color); opacity: 0; pointer-events: none; }
.tr-absorb-logo.is-hit::after { animation: tr-absorb-flash .7s ease-out; }
.tr-absorb-logo.is-hit img { animation: tr-absorb-gulp .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes tr-absorb-flash { from { opacity: .85; transform: scale(.7); } to { opacity: 0; transform: scale(1.6); } }
@keyframes tr-absorb-gulp { 40% { transform: scale(1.14) rotate(-4deg); filter: drop-shadow(0 0 22px color-mix(in srgb, var(--c-accent) 90%, transparent)); } }
/* Domo mais perto do conteúdo (Darlan, 29/10): sem a margem branca e com menos fundo na última seção dos detalhes. */
.tr-more-end.is-dome { margin-top: 0; }
.tr-more-panels > .tr-more-panel > .site-section { padding-bottom: clamp(24px, 4vw, 40px); }