/* ITERA — trader.css. Página "Para o trader" (trader.html), a partir do handoff do Claude Design
(site/trader/design-handoff/). Tudo aqui vale só dentro de .tr ou de body.page-trader.
Não mexe em v3.css, bundle.css nem brand.css. Seções marcadas S1…S10.
29/09/2026 (fundação do DS 2.0): hero = assets/hero.css (.hero.hero--vp); valores da página = tokens do site (DS 2.0
via tokens.css); margens = --gut e conteúdo até --page (1240px); botões .tr-btn = Button lg do DS; sem ajuste
visual de header e rodapé por página (só o que o trader.js acrescenta ao menu). */
/* ===== Núcleo: tokens da página (apelidos dos tokens do site, DS 2.0) ===== */
.tr{
--tr-pad:var(--gut);
/* respiros padrão (pedido do Paulo, 24/09): --tr-gap é o espaço entre o fim do conteúdo de uma dobra e o começo
da seguinte, igual na página toda (o fio tracejado, onde há, fica centrado dentro dele); --tr-gap-in é o
espaço entre o bloco de texto de uma dobra e o visual ou a lista principal dela */
--tr-gap:clamp(120px,14vw,200px);
--tr-gap-in:clamp(40px,5vw,72px);
--tr-ease:var(--ease);
/* curva do DS 2.0 (hover 150ms, transição 250ms), usada nos componentes refeitos em 29/09/2026 */
--tr-ds-ease:var(--ease);
--tr-bg:var(--bg);
--tr-g1:var(--bg-alt); /* segunda metade da página: a dobra alternada do DS (#141414) */
--tr-g2:var(--panel-2);
--tr-g3:var(--panel-3);
--tr-line:var(--line);
--tr-line2:var(--line-2);
--tr-line4:rgba(255,255,255,.4);
--tr-text:var(--text);
--tr-t2:var(--muted);
--tr-t3:var(--dim);
/* cinza dos textos de conformidade de 12px ("Rentabilidade passada…"): o DS tem dois níveis de texto; o
secundário #9E9E9E dá 7,4:1 sobre #0A0A0A e 6,8:1 sobre #141414 (era #7C7C7C) */
--tr-t3-aa:var(--muted);
--tr-acc:var(--yellow);
--tr-on-acc:var(--cta-text);
--tr-glow:var(--glow);
--tr-glow2:var(--glow-2);
--tr-shadow:var(--shadow-sm);
--tr-dash-cover:var(--tr-bg);
position:relative;overflow-x:clip;background:var(--tr-bg);color:var(--tr-text);
font-family:var(--font-sans,Manrope,system-ui,sans-serif);font-size:16px;line-height:normal;text-wrap:wrap;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale
}
.tr *,.tr *::before,.tr *::after{box-sizing:border-box}
.tr h1,.tr h2,.tr h3,.tr h4,.tr p,.tr ul,.tr ol,.tr figure{margin:0;max-width:none;text-transform:none}
/* títulos sem o tamanho/peso globais do bundle.css (h1 104px, h2 60px, h3 21px/700); cada seção define os seus */
.tr h1,.tr h2,.tr h3,.tr h4{font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit}
.tr ul,.tr ol{list-style:none;padding:0}
.tr a{color:var(--tr-text);text-decoration:none}
.tr a:hover{color:var(--tr-acc)}
.tr button{font-family:inherit;color:inherit}
.tr em{font-style:normal}
.tr img{display:block;max-width:100%}
.tr .tr-num{font-variant-numeric:tabular-nums}
.tr .tr-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* seções: o padding lateral é o da página; o vertical cada seção define. O #main vence as regras de dobra do v3.css
("main section" e "main section:not(#atributos):not(.hero)", que põem min-height, flex e padding em ≥1000px);
por isso a regra raiz de cada seção também começa com "#main .tr .tr-sN". */
#main .tr .tr-sec{position:relative;min-height:0;display:block;align-items:normal;padding:0 var(--tr-pad)}
/* faixa de transição S5→S6 e segunda metade da página em grafite. A faixa é o respiro entre a S5 e a S6 (a S6 não
tem padding em cima), por isso mede --tr-gap */
.tr .tr-band{height:var(--tr-gap);background:linear-gradient(to bottom,var(--tr-bg),var(--tr-g1))}
.tr .tr-half2{background:var(--tr-g1);--tr-dash-cover:var(--tr-g1)}
/* ===== Núcleo: tipografia ===== */
.tr .tr-label{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--tr-text)}
/* (o H1 é o .hero-h1 de assets/hero.css desde 29/09/2026) */
/* título de dobra: UM tamanho só na página inteira (29/09/2026, DS 2.0: primeira parte em Medium, o em em Light e
amarelo). Vale para todas as h2 visíveis (S3, S4, S5, S6, S7, S8 e S10); o .tr-giant de antes (S6, S7 e S8) saiu */
.tr .tr-h2{font-weight:700;font-size:clamp(44px,5.6vw,80px);line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
.tr .tr-h2 em{font-weight:700;color:var(--tr-acc)}
.tr .tr-lead{font-weight:400;font-size:clamp(20px,1.8vw,26px);line-height:1.5;color:var(--tr-text);text-wrap:pretty}
.tr .tr-sup{font-weight:400;font-size:clamp(16px,1.25vw,18px);line-height:1.6;color:var(--tr-t2);text-wrap:pretty}
.tr .tr-note{font-size:12px;line-height:1.5;color:var(--tr-t2);text-wrap:balance}
/* chamada de nota (¹ ²): 1; as notas ficam no fim (.tr-notes) */
.tr .tr-fn{font-size:.62em;font-weight:600;line-height:0;vertical-align:super}
/* colada ao ponto; a área de toque cresce por um ::before invisível (o número tem ~9px) */
.tr .tr-fn a{position:relative;color:inherit;padding:0 2px 0 1px}
.tr .tr-fn a::before{content:"";position:absolute;inset:-12px -6px}
.tr .tr-fn a:hover{color:var(--tr-acc)}
/* link de texto (o DS 2.0 não tem componente de link; regra de 29/09/2026): 16px, 600, branco, sublinhado de 1px a
4px do texto, amarelo no hover (150ms). Não é botão, nem fio, nem pílula. A área de toque de 44px vem da altura
mínima, sem mudar o desenho */
.tr .tr-link{display:inline-flex;align-items:center;min-height:44px;font-size:16px;font-weight:600;color:var(--tr-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;transition:color 150ms var(--tr-ds-ease)}
.tr .tr-link:hover{color:var(--tr-acc)}
/* tag de status do DS 2.0 ("Em breve"): bloco de raio 4px, sem cápsula */
.tr .tr-tag{flex:none;white-space:nowrap;display:inline-block;padding:3px 8px;border-radius:4px;background:var(--tr-acc);color:#0a0a0a;font-size:10px;font-weight:600;line-height:16px;letter-spacing:.12em;text-transform:uppercase}
/* card do DS 2.0 (it-card): fundo #141414, fio de 8%, raio 16px, padding 24px (32px a partir de 760px) */
.tr .tr-card{background:var(--surface-1);border:1px solid var(--tr-line);border-radius:16px;padding:24px}
@media (min-width:760px){.tr .tr-card{padding:32px}}
/* palavra do que "acende por último": branca embaixo, amarela em cima, crossfade.
Marcação: zero
Acende quando o bloco revelado ancestral ganha .is-in. Atraso ajustável com --tr-lit-delay.
Desde 29/09/2026 (GEO) a cópia amarela é conteúdo gerado (::after com o data-lit), fora do texto do DOM: robô e busca
leem "Corretagem zero." e não "Corretagem zero zero." (antes era um span .tr-lit__y com aria-hidden). O "/ ''" tira a
cópia do nome acessível; a primeira declaração é a de navegador sem esse recurso. */
.tr .tr-lit{position:relative;display:inline-block;font-style:normal;color:inherit}
.tr .tr-lit__w{color:var(--tr-text);transition:opacity 600ms var(--tr-ease) var(--tr-lit-delay,500ms)}
.tr .tr-lit::after{content:attr(data-lit);content:attr(data-lit) / "";position:absolute;left:0;top:0;color:var(--tr-acc);opacity:0;transition:opacity 600ms var(--tr-ease) var(--tr-lit-delay,500ms)}
.tr .is-in .tr-lit__w,.no-js .tr .tr-lit__w{opacity:0}
.tr .is-in .tr-lit::after,.no-js .tr .tr-lit::after{opacity:1}
/* ===== Núcleo: botões e CTA =====
29/09/2026: Button lg do DS 2.0 (52px, raio 8, 500, 16px, sem caixa alta; nunca pílula). Primário amarelo (hover
cta-hover), secundário com borda de 1px na cor do texto. O glow fica só no CTA do hero (hero.css). */
.tr .tr-btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 var(--space-6,24px);border-radius:var(--radius-md,8px);border:1px solid transparent;font-size:16px;font-weight:500;letter-spacing:0;line-height:1;text-transform:none;white-space:nowrap;cursor:pointer;transition:background-color 150ms var(--tr-ds-ease),border-color 150ms var(--tr-ds-ease),color 150ms var(--tr-ds-ease),transform 150ms var(--tr-ds-ease)}
.tr .tr-btn:active{transform:scale(.98)}
.tr .tr-btn--primary,.tr .tr-btn--primary:hover{background:var(--cta);border-color:var(--cta);color:var(--cta-text);font-weight:600}
.tr .tr-btn--primary:hover{background:var(--cta-hover);border-color:var(--cta-hover)}
.tr .tr-btn--secondary,.tr .tr-btn--secondary:hover{background:transparent;color:var(--tr-text);border-color:var(--tr-text)}
.tr .tr-btn--secondary:hover{background:rgba(255,255,255,.06)}
.tr .tr-ctas{display:flex;flex-direction:row;align-items:stretch;justify-content:center;gap:12px}
@media (max-width:759.98px){
.tr .tr-ctas{flex-direction:column;width:100%}
.tr .tr-ctas .tr-btn{width:100%}
}
/* ===== Núcleo: reveal (bloco sobe 24px com fade, uma vez) e marcador de "já visto" ===== */
.js .tr [data-tr-rv]{opacity:0;transform:translateY(24px);transition:opacity 700ms var(--tr-ease),transform 700ms var(--tr-ease)}
.js .tr [data-tr-rv].is-in{opacity:1;transform:none}
/* revelado pelo foco de teclado (trader.js): aparece na hora */
.js .tr [data-tr-rv].tr-rv-now{transition:none}
/* ===== Núcleo: fio tracejado no eixo central (desenha de cima para baixo com uma capa da cor do fundo) =====
Marcação: , último filho da seção.
Desde 24/09 o fio não soma altura: ocupa os 60% do meio do --tr-gap que separa esta dobra da seguinte (20% de
ar em cima e embaixo), e a margem de baixo negativa devolve o espaço dele; o respiro fica igual ao das dobras
sem fio */
.tr .tr-dash{position:relative;width:1px;height:calc(var(--tr-gap) * .6);margin:calc(var(--tr-gap) * .2) auto calc(var(--tr-gap) * -.8);overflow:hidden;background-image:repeating-linear-gradient(to bottom,color-mix(in srgb,var(--tr-acc) 45%,transparent) 0 6px,transparent 6px 12px)}
.js .tr .tr-dash::after{content:"";position:absolute;left:0;right:0;top:100%;height:100%;background:var(--tr-dash-cover);transform:translateY(-100%);transition:transform 700ms var(--tr-ease)}
.js .tr .tr-dash.is-in::after{transform:translateY(0)}
/* ===== Núcleo: "ⓘ Condições", drill-down da S8 e respostas do FAQ (abre no lugar) =====
Botão:
Painel:
…
. Sem JS o painel fica aberto (texto legal legível). */
.tr .tr-disc{display:inline-flex;align-items:center;gap:8px;min-height:44px;background:none;border:0;padding:0 6px;color:var(--tr-t2);font-size:14px;font-weight:600;cursor:pointer}
.tr .tr-disc:hover{color:var(--tr-text)}
.tr .tr-disc svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.js .tr .tr-disc-panel:not(.is-open){display:none}
.tr .tr-disc-panel>*{transition:opacity 400ms var(--tr-ease),transform 400ms var(--tr-ease)}
.js .tr .tr-disc-panel:not(.is-shown)>*{opacity:0;transform:translateY(-8px)}
/* ===== Núcleo: ícone de traço ===== */
/* (o preenchimento de progresso .tr-fill e a moldura .tr-panel saíram em 29/09/2026 com as abas da S3 e o autoplay da S4) */
.tr .tr-ico{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* ===== Header e rodapé: os do site, sem ajuste visual por página (29/09/2026: item ativo é regra global do v3.css;
rodapé em bg-alt no site todo). Aqui só o que o trader.js acrescenta ao menu do celular ===== */
/* "Já tenho conta na XP" (ghost) logo abaixo do CTA do menu */
body.page-trader header.site .menu nav .tr-menu-xp{margin-top:4px}
/* menu aberto: o painel rola sozinho quando não cabe (celular deitado) e a página por trás fica travada
(o trader.js põe .tr-menu-open no body enquanto o header tem .is-open). O menu existe até 1140px (base.css) */
body.page-trader header.site .menu{max-height:calc(100vh - var(--header-h,76px));max-height:calc(100dvh - var(--header-h,76px));overflow-y:auto;overscroll-behavior:contain}
@media (max-width:1139.98px){body.page-trader.tr-menu-open{overflow:hidden}}
body.page-trader header.site .menu nav .tr-menu-note{margin:4px 0 0;font-size:12px;line-height:1.5;color:var(--muted);text-align:center;text-wrap:balance}
/* foco por teclado nunca embaixo do header fixo (76px) nem da barra fixa do mobile (~116px): a rolagem que o
navegador faz ao focar respeita a margem do elemento */
.tr a,.tr button,body.page-trader footer.site a{scroll-margin-top:calc(var(--header-h,76px) + 8px)}
/* ===== Barra fixa inferior (só mobile) ===== */
.tr .tr-bar{display:none}
@media (max-width:759.98px){
.tr .tr-bar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:12px var(--tr-pad) calc(12px + env(safe-area-inset-bottom));background:rgba(10,10,10,.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid var(--tr-line);transform:translateY(110%);visibility:hidden;transition:transform 400ms var(--tr-ease),visibility 0s linear 400ms}
.tr .tr-bar.is-on{transform:none;visibility:visible;transition:transform 400ms var(--tr-ease),visibility 0s}
.tr .tr-bar .tr-btn{display:flex;width:100%}
.tr .tr-bar .tr-note{margin-top:8px;line-height:1.45;text-align:center;text-wrap:wrap}
/* com o menu aberto a barra sai (o CTA e a nota já estão no menu); o trader.js tira o .is-on e isto cobre o intervalo */
body.page-trader.tr-menu-open .tr .tr-bar{transform:translateY(110%);visibility:hidden}
body.page-trader footer.site{padding-bottom:calc(150px + env(safe-area-inset-bottom))}
.tr a,.tr button,body.page-trader footer.site a{scroll-margin-bottom:calc(132px + env(safe-area-inset-bottom))}
}
/* ===== Movimento reduzido: nada automático (o JS também põe .tr-rm na raiz e deixa tudo no estado final) ===== */
@media (prefers-reduced-motion: reduce){
.tr *,.tr *::before,.tr *::after{animation:none!important;transition:none!important}
.js .tr [data-tr-rv]{opacity:1;transform:none}
.js .tr .tr-dash::after{display:none}
.tr .tr-lit__w{opacity:0}
.tr .tr-lit::after{opacity:1}
}
.tr.tr-rm *,.tr.tr-rm *::before,.tr.tr-rm *::after{animation:none!important;transition:none!important}
/* ===== S1 ===== */
/* S1 — HERO: assets/hero.css (hero padrão do site, 29/09/2026), com o modificador .hero--vp (espaço embaixo para a
barra de proposta de valor, que sobe --tr-vp-lift sobre a base do hero no desktop). A foto é trader-hero-*.webp. */
#main .tr .hero--vp{--hero-overlap:var(--tr-vp-lift)}
/* ===== S2 ===== */
/* S2 — MANIFESTO. Texto e fio tracejado (núcleo, margem 56px). O botão "Avisos" saiu em 24/09 (pedido do Paulo). */
#main .tr .tr-s2.tr-sec{padding-top:var(--tr-gap);text-align:center;text-wrap:wrap}
.tr .tr-s2 .tr-s2-inner{max-width:860px;margin:0 auto}
/* ===== S3 ===== */
/* S3 — Ao seu lado. Desde 29/09/2026 (pedido do Paulo): quatro cards do DS 2.0 (.tr-card do núcleo), cada um com
ícone de contorno, título e descrição. Desktop: grade 2×2; celular: empilhados. Sem imagem, abas, carrossel nem JS.
Os cards de uma linha ficam com a mesma altura (a grade estica). */
#main .tr .tr-s3{padding-top:var(--tr-gap)}
.tr .tr-s3-h{margin:0 auto;max-width:980px;text-align:center}
.tr .tr-s3-grid{max-width:var(--page);margin:var(--tr-gap-in) auto 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.tr .tr-s3-card{display:flex;flex-direction:column;text-align:left}
/* ícone do DS: 24px, traço de 2px, branco (no escuro o amarelo do DS fica só para o item ativo) */
.tr .tr-s3-ico{display:block;flex:none;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--tr-text)}
.tr .tr-s3-name{margin-top:24px;font-size:21px;font-weight:500;line-height:1.3;letter-spacing:normal;color:var(--tr-text)}
.tr .tr-s3-desc{margin-top:8px;font-size:16px;line-height:1.55;color:var(--tr-t2);text-wrap:pretty}
@media (max-width:759.98px){
.tr .tr-s3-grid{grid-template-columns:minmax(0,1fr);gap:16px}
.tr .tr-s3-name{margin-top:20px}
}
/* fio tracejado que fecha a S3: medidas do núcleo (.tr-dash, dentro do --tr-gap) */
/* ===== S4 ===== */
/* S4 — Sua regra. Título com interruptor (só CSS) e duas colunas fixas: cabeçalho em link de texto, o visual parado e
o texto de apoio. Desde 29/09/2026 (pedido do Paulo) sem autoplay, sem troca de card, sem estado do robô girando e
sem pílulas no celular; nenhuma linha de JS nesta dobra */
#main .tr .tr-s4{padding:var(--tr-gap) var(--tr-pad) 0}
/* título centrado; o interruptor fica na linha, com o centro na altura do meio das maiúsculas (vertical-align) */
.tr .tr-s4-title{margin:0 auto;max-width:1200px;text-align:center}
/* 29/09/2026 (GEO): a frase visível (span aria-hidden) não tem nó de texto; "Sua regra, ", "desligada", "ligada" e
" quando você quiser." vêm do data-t por conteúdo gerado. O texto do h2 no HTML e no DOM fica só o do .tr-sr, a frase
uma vez (antes robô e busca liam "Sua regra, ligada quando você quiser. Sua regra, desligada ligada quando você quiser.") */
.tr .tr-s4-title [data-t]::before{content:attr(data-t);content:attr(data-t) / ""}
.tr .tr-s4-sw{display:inline-block;position:relative;vertical-align:-.07em;width:3.9em;height:.84em;border-radius:999px;background:var(--tr-g3);border:1px solid var(--tr-line2);overflow:hidden}
.tr .tr-s4-sw__y{position:absolute;inset:0;background:var(--tr-acc);opacity:1;transition:opacity 500ms var(--tr-ease) 300ms}
/* "ligada" e "desligada" centrados no trecho livre do trilho, fora do botão branco (29/09/2026: antes "ligada"
ficava colado à esquerda, com um vão amarelo até o botão). O botão ocupa ~.72em do título numa das pontas, que no
em do rótulo (font-size .3em) são 2.4em */
.tr .tr-s4-sw__off,.tr .tr-s4-sw__on{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;font-size:.3em;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.tr .tr-s4-sw__off{left:2.4em;right:0;color:var(--tr-t2);opacity:0;transition:opacity 300ms var(--tr-ease) 300ms}
.tr .tr-s4-sw__on{left:0;right:2.4em;color:var(--tr-on-acc);opacity:1;transition:opacity 300ms var(--tr-ease) 500ms}
.tr .tr-s4-sw__k{position:absolute;top:.08em;left:.08em;width:.62em;height:.62em;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.4);transform:translateX(3.1em);transition:transform 600ms var(--tr-ease) 300ms}
/* abaixo de 360px o trilho encurta (o deslocamento do botão é a largura − .8em) para "Sua regra," e o interruptor
caberem numa linha só */
@media (max-width:359.98px){
.tr .tr-s4-sw{width:3.4em}
.tr .tr-s4-sw__k{transform:translateX(2.6em)}
}
/* com JS o interruptor nasce desligado e liga uma vez quando o título entra na tela (.is-in, data-tr-seen).
Sem JS, e com movimento reduzido (o núcleo põe .is-in na hora), fica no estado final "ligada". */
.js .tr .tr-s4-title:not(.is-in) .tr-s4-sw__y{opacity:0}
.js .tr .tr-s4-title:not(.is-in) .tr-s4-sw__off{opacity:1}
.js .tr .tr-s4-title:not(.is-in) .tr-s4-sw__on{opacity:0}
.js .tr .tr-s4-title:not(.is-in) .tr-s4-sw__k{transform:translateX(0)}
/* colunas. ≥760px: lado a lado; cada coluna ocupa 3 linhas da grade-mãe (subgrid), então cabeçalho, visual e texto
ficam alinhados entre as duas e os dois visuais com a mesma altura. <760px: empilhadas (cabeçalho → visual → texto) */
.tr .tr-s4-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,48px);max-width:var(--page);margin:var(--tr-gap-in) auto 0}
.tr .tr-s4-col{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:16px;min-width:0;align-content:start;scroll-margin-top:calc(var(--header-h,76px) + 24px)}
.tr .tr-s4-h{display:flex}
/* visual: card do DS 2.0 (fundo #141414, fio de 8%, raio 16px) com a interface ilustrativa, parado. Menor que o palco
de antes: cabe na coluna. Um img.tr-s4-img pode entrar no lugar do card (ver o comentário no HTML) */
.tr .tr-s4-card,.tr .tr-s4-img{width:100%;border-radius:16px}
.tr .tr-s4-card{display:flex;flex-direction:column;background:var(--surface-1);border:1px solid var(--tr-line);overflow:hidden}
.tr .tr-s4-img{display:block;height:auto}
.tr .tr-s4-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border-bottom:1px solid var(--tr-line)}
.tr .tr-s4-head--wrap{flex-wrap:wrap;gap:10px 16px}
.tr .tr-s4-name{font-size:16px;font-weight:600}
.tr .tr-s4-on{display:flex;align-items:center;gap:10px}
.tr .tr-s4-on__t{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--tr-text)}
.tr .tr-s4-tog{position:relative;flex:none;width:36px;height:20px;border-radius:999px;background:var(--tr-acc)}
.tr .tr-s4-tog::after{content:"";position:absolute;top:3px;right:3px;width:14px;height:14px;border-radius:50%;background:var(--tr-on-acc)}
.tr .tr-s4-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 20px;padding:13px 20px;border-bottom:1px solid var(--tr-line)}
.tr .tr-s4-row:last-child{border-bottom:0}
.tr .tr-s4-k{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--tr-t2)}
/* margin-left:auto: quando o valor desce para a linha de baixo (celular), continua à direita */
.tr .tr-s4-v{margin-left:auto;font-size:14px;text-align:right}
.tr .tr-s4-v--b{font-weight:600}
.tr .tr-s4-live{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:14px;font-weight:600}
.tr .tr-s4-dot{width:8px;height:8px;border-radius:50%;background:var(--tr-acc)}
/* a ação fica no pé do card (os dois cards têm a mesma altura) */
.tr .tr-s4-act{margin-top:auto;padding:16px 20px;border-top:1px solid var(--tr-line)}
.tr .tr-s4-row+.tr-s4-act{border-top:0}
/* botão ilustrativo com o raio de botão do DS (8px): botão não é pílula */
.tr .tr-s4-pause{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:8px;border:1px solid var(--tr-line2);font-size:14px;font-weight:700;letter-spacing:.08em}
.tr .tr-s4-pause svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
/* texto de apoio de cada coluna; o aviso "Rentabilidade passada…" fica sempre inteiro (conformidade), no cinza AA */
.tr .tr-s4-sub{font-size:16px;line-height:1.55;color:var(--tr-t2);text-wrap:pretty}
.tr .tr-s4-fine{margin-top:10px;font-size:12px;line-height:1.5;color:var(--tr-t3-aa)}
@media (max-width:759.98px){
.tr .tr-s4-cols{grid-template-columns:minmax(0,1fr);row-gap:56px}
.tr .tr-s4-col{display:flex;flex-direction:column;gap:12px}
.tr .tr-s4-txt{margin-top:4px}
}
/* ===== S5 ===== */
/* S5 — Formação: trilho de 4 etapas que enche com a rolagem (s5.js aplica o transform direto em .tr-s5-fill e
liga .is-lit nas etapas alcançadas). Sem JS: fio cheio e tudo aceso (os estados "vazio/apagado" só valem com .js). */
/* o bloco do título vem antes do trilho no DOM e, desde 24/09 (pedido do Paulo), também na tela: título e apoio
primeiro, depois as etapas 01–04 (na referência o trilho ficava em cima, com order) */
#main .tr .tr-s5.tr-sec{display:flex;flex-direction:column;padding-top:var(--tr-gap);padding-bottom:0}
/* width:100% para medirem como bloco (item de flex com margem auto encolheria para o conteúdo) */
.tr .tr-s5 .tr-s5-rail{width:100%}
.tr .tr-s5 .tr-s5-more{width:100%}
/* trilho */
.tr .tr-s5-rail{position:relative;max-width:var(--page);margin:clamp(56px,7vw,96px) auto 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.tr .tr-s5-step{position:relative;padding:36px 0 0}
/* segmento de 2px do marcador desta etapa até o marcador da próxima (8px + coluna + gap de 32px) */
.tr .tr-s5-track{position:absolute;top:3px;left:8px;width:calc(100% + 24px);height:2px;background:var(--tr-line2)}
.tr .tr-s5-fill{position:absolute;inset:0;background:var(--tr-acc);transform-origin:left center}
.js .tr .tr-s5-fill{transform:scaleX(0)}
/* marcador de 8px: cinza, acende em amarelo (camada por cima, opacidade 400ms) */
.tr .tr-s5-dot{position:absolute;top:0;left:0;width:8px;height:8px;border-radius:50%;background:var(--tr-t3);overflow:hidden}
.tr .tr-s5-dot::after{content:"";position:absolute;inset:0;background:var(--tr-acc);transition:opacity 400ms var(--tr-ease)}
.js .tr .tr-s5-step:not(.is-lit) .tr-s5-dot::after{opacity:0}
/* conteúdo: .35 até o fio chegar, acende para 1 em 500ms */
.tr .tr-s5-body{transition:opacity 500ms var(--tr-ease)}
.js .tr .tr-s5-step:not(.is-lit) .tr-s5-body{opacity:.35}
.tr .tr-s5-n{font-size:clamp(56px,6.4vw,96px);font-weight:200;line-height:1;letter-spacing:-.02em;color:var(--tr-acc);font-variant-numeric:tabular-nums}
.tr .tr-s5-name{margin:20px 0 8px;font-size:clamp(20px,1.7vw,24px);font-weight:600;line-height:normal;letter-spacing:normal}
.tr .tr-s5-desc{font-size:16px;line-height:1.55;color:var(--tr-t2);text-wrap:pretty}
/* bloco do título, acima do trilho */
.tr .tr-s5-more{max-width:760px;margin:0 auto;text-align:center}
.tr .tr-s5-sup{max-width:600px;margin:20px auto 0}
.tr .tr-s5-link{margin-top:16px}
/* 05/10/2026 (noite): foto do T4 estudando no topo da dobra, na coluna de 1336px com bordas esmaecidas; título por cima,
subtítulo na base esmaecida da foto, etapas depois (pedido do Paulo, desktop e celular) */
#main .tr .tr-s5.tr-sec{position:relative}
.tr .tr-s5-foto{position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(100%,var(--page-outer,1336px));height:860px;overflow:hidden;pointer-events:none;
-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 100%),linear-gradient(90deg,transparent 0,#000 72px,#000 calc(100% - 72px),transparent 100%);-webkit-mask-composite:source-in;
mask-image:linear-gradient(180deg,#000 70%,transparent 100%),linear-gradient(90deg,transparent 0,#000 72px,#000 calc(100% - 72px),transparent 100%);mask-composite:intersect}
/* desktop: a foto é vertical; ancorada à direita, mais estreita e esmaecendo à esquerda, o título fica sobre o escuro */
.tr .tr-s5-foto img{position:absolute;top:0;right:0;width:64%;height:100%;max-width:none;object-fit:cover;object-position:50% 12%;-webkit-user-select:none;user-select:none;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%);mask-image:linear-gradient(90deg,transparent 0,#000 34%)}
.tr .tr-s5-veu{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.72) 0%,rgba(10,10,10,.5) 30%,rgba(10,10,10,.2) 50%,rgba(10,10,10,.45) 70%,rgba(10,10,10,.9) 88%,#0a0a0a 100%)}
.tr .tr-s5-more,.tr .tr-s5 .tr-s5-rail{position:relative;z-index:1}
/* 06/10/2026 (Paulo): respiro menor no desktop; subtítulo e etapas sobem; botão de abrir conta acima do link */
.tr .tr-s5 .tr-s5-sup{margin-top:220px}
.tr .tr-s5-foto{height:760px}
.tr .tr-s5-cta{margin-top:28px}
.tr .tr-s5-cta+.tr-s5-link{margin-top:20px}
@media (max-width:759.98px){
/* 06/10/2026 (Paulo): a foto desce (36vw) e entra com a sombra de transição da dobra anterior; o rosto fica entre o
título e o subtítulo. Sem o botão de abrir conta (a barra fixa do celular já faz esse papel) */
.tr .tr-s5-foto{--s5-desce:36vw;height:calc(150vw + var(--s5-desce));-webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,#000 80%,transparent 100%)}
.tr .tr-s5-foto img{top:var(--s5-desce);right:auto;left:0;width:100%;height:150vw;object-position:60% 20%;-webkit-mask-image:none;mask-image:none}
.tr .tr-s5-veu{background:linear-gradient(180deg,#0a0a0a 0,#0a0a0a var(--s5-desce),rgba(10,10,10,.55) calc(var(--s5-desce) + 22vw),rgba(10,10,10,.15) 50%,rgba(10,10,10,.4) 72%,rgba(10,10,10,.9) 88%,#0a0a0a 100%)}
.tr .tr-s5 .tr-s5-sup{margin-top:92vw}
.tr .tr-s5-cta{display:none}
}
@media (max-width:759.98px){
.tr .tr-s5-rail{grid-template-columns:minmax(0,1fr);gap:40px}
.tr .tr-s5-step{padding:0 0 0 36px}
/* fio vertical à esquerda: do marcador até o próximo (8px + etapa + gap de 40px) */
.tr .tr-s5-track{top:8px;left:3px;width:2px;height:calc(100% + 32px)}
.tr .tr-s5-fill{transform-origin:center top}
.js .tr .tr-s5-fill{transform:scaleY(0)}
}
/* ===== S6 ===== */
/* S6 — Itera Watch. Desde 24/09 o visual é a composição da home v4, no lugar do mockup em CSS, em cópias com o fundo
no grafite da .tr-half2 (assets/img/watch-composicao-g1-*.webp; ver o comentário no HTML) */
/* Desde 29/09/2026: sem a tag "Em breve" e sem as cápsulas; no lugar delas, uma linha de tags em texto com "//".
A seção é uma coluna flex: no desktop a ordem é a do DOM (texto, tags e link, composição); no celular a composição
sobe para logo depois do apoio (order) */
#main .tr .tr-s6{display:flex;flex-direction:column;padding:0 var(--tr-pad);text-align:center}
/* os blocos de texto ficam acima da composição, que sobe por trás deles (ver abaixo) */
.tr .tr-s6-head,.tr .tr-s6-body{position:relative;z-index:1;width:100%;margin-left:auto;margin-right:auto}
.tr .tr-s6-head{max-width:1200px}
.tr .tr-s6-label{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 12px}
.tr .tr-s6-title{margin:24px auto 0;max-width:1200px}
.tr .tr-s6-sup{max-width:720px;margin:24px auto 0}
.tr .tr-s6-body{max-width:960px;margin-top:28px}
/* linha de tags em texto (padrão do .tr-label: 12px, 600, caixa alta, .16em), separadores "//" em amarelo. Cada item
é um item de flex: a linha quebra entre itens; o "//" vem colado ao fim do item anterior (sem espaço no HTML),
então nunca começa uma linha */
.tr .tr-s6-tags{display:flex;flex-wrap:wrap;justify-content:center;column-gap:.9em;row-gap:6px;font-size:12px;font-weight:600;line-height:1.5;letter-spacing:.16em;text-transform:uppercase;color:var(--tr-text)}
.tr .tr-s6-sep{margin-left:.9em;color:var(--tr-acc)}
.tr .tr-s6-link{margin-top:12px}
/* composição. A imagem tem fundo liso acima do notebook (8,5% da largura) e abaixo dele (3,25%): as margens
descontam esse fundo, para o respiro contar do desenho (--tr-gap-in em cima, --tr-gap até a S7). Sem clique,
porque o topo liso fica por trás do link "Conheça o Itera Watch" */
.tr .tr-s6-visual{--tr-s6-w:min(var(--page),100%);--tr-s6-k:1;width:var(--tr-s6-w);margin:calc(var(--tr-gap-in) - var(--tr-s6-w) * var(--tr-s6-k) * .085) auto calc(var(--tr-s6-w) * var(--tr-s6-k) * -.0325);pointer-events:none}
/* a compressão deixa o fundo da imagem 1 nível abaixo do grafite (10 contra 11): as bordas esfumam em faixas que só
pegam o fundo liso (notebook e celular ficam entre 13% e 87% da largura e entre 13% e 95% da altura) */
.tr .tr-s6-img{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 95%,transparent),linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 95%,transparent),linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);mask-composite:intersect}
.tr .tr-s6-img{width:100%;height:auto;-webkit-user-select:none;user-select:none}
/* 29/09: a grafite da segunda metade passou a #141414 (bg-alt do DS) e o fundo liso da imagem é #0B0B0B; com "lighten"
o fundo quase preto da imagem assume a cor da dobra (sem o retângulo escuro atrás do notebook) e o desenho, mais claro,
fica como está */
.tr .tr-half2 .tr-s6-img{mix-blend-mode:lighten}
/* no celular a composição sangra até as bordas da tela e cresce 25% (--tr-s6-k), com o excesso cortado nas laterais,
que são só fundo: o notebook e o celular ficam com ~15px de folga das bordas em 390px */
@media (max-width:759.98px){
.tr .tr-s6-visual{--tr-s6-w:calc(100% + 2 * var(--tr-pad));--tr-s6-k:1.25;margin-left:calc(-1 * var(--tr-pad));margin-right:calc(-1 * var(--tr-pad));overflow:hidden}
.tr .tr-s6-img{width:125%;max-width:none;margin-left:-12.5%}
/* celular (29/09/2026): composição logo depois do apoio, e a linha de tags e o link depois dela. As margens
descontam o fundo liso da imagem em cima (8,5%) e embaixo (3,25%): 32px do apoio ao notebook e 24px do
celular até a linha de tags */
.tr .tr-s6-visual{order:1;margin-top:calc(32px - var(--tr-s6-w) * var(--tr-s6-k) * .085);margin-bottom:calc(24px - var(--tr-s6-w) * var(--tr-s6-k) * .0325)}
.tr .tr-s6-body{order:2;margin-top:0}
}
/* ===== S7 ===== */
/* S7 — Programa de benefícios e recompensas: frase gigante, apoio, faixa com 4 estados e fio tracejado de fechamento.
A faixa é revelada pelo núcleo (data-tr-rv → .is-in); o .is-in dispara o fio dourado (scaleX/scaleY, 700ms) e o
preenchimento dos símbolos (700ms, atrasos 200/400/600/800ms). Sem JS: fio desenhado e símbolos no nível final. */
#main .tr .tr-s7.tr-sec{padding-top:var(--tr-gap);padding-bottom:0;text-align:center}
.tr .tr-s7-label{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 12px}
/* "Programa de benefícios e recompensas" onde o nome cabe numa linha (~324px, a partir de 370px; entre 370 e ~460px
a tag desce para a linha de baixo); abaixo disso, só "Programa de benefícios" (regra do Paulo, 24/09) */
@media (max-width:369.98px){.tr .tr-s7-rec{display:none}}
.tr .tr-s7-title{max-width:1200px;margin:28px auto 0}
.tr .tr-s7-sup{max-width:720px;margin:32px auto 0}
/* faixa */
.tr .tr-s7-band{max-width:var(--page);margin:var(--tr-gap-in) auto 0;padding:clamp(28px,4vw,56px);background:var(--tr-g2);border:1px solid var(--tr-line);border-radius:28px}
.tr .tr-s7-grid{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
/* fio dourado de 1px pelo centro dos círculos (os estados vêm depois no DOM e têm position, então os círculos o cobrem) */
.tr .tr-s7-thread{position:absolute;top:36px;left:12.5%;right:12.5%;height:1px;background:linear-gradient(90deg,color-mix(in srgb,var(--tr-acc) 25%,transparent),var(--tr-acc));transform-origin:left center;transition:transform 700ms var(--tr-ease)}
.js .tr .tr-s7-band:not(.is-in) .tr-s7-thread{transform:scaleX(0)}
/* estados */
.tr .tr-s7-st{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.tr .tr-s7-st--1{--tr-s7-f:75.3%;--tr-s7-d:200ms}
.tr .tr-s7-st--2{--tr-s7-f:50%;--tr-s7-d:400ms}
.tr .tr-s7-st--3{--tr-s7-f:24.7%;--tr-s7-d:600ms}
.tr .tr-s7-st--4{--tr-s7-f:0%;--tr-s7-d:800ms}
.tr .tr-s7-circ{flex:none;display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:var(--tr-g2);border:1px solid var(--tr-line2)}
.tr .tr-s7-st--4 .tr-s7-circ{border-color:color-mix(in srgb,var(--tr-acc) 45%,transparent);box-shadow:var(--tr-glow)}
/* símbolo oficial (#i-itera, viewBox 102.63 115.87 739.73 713.26 desde o kit final) em 32px: contorno branco a 30% + preenchimento amarelo que sobe.
Sem clip-path: o wrapper (overflow hidden) desce f% e o SVG dentro sobe f%, então só a parte de baixo aparece.
f calibrado para o símbolo do kit final (23/09/2026; caixa 32px, símbolo com 30,86px de altura e 0,57px
de folga em cima): 75.3% = metade de baixo do paralelogramo inferior, 50% = paralelogramo inferior inteiro (o corte cai
no vão entre os dois), 24.7% = mais a metade de baixo do superior, 0% = inteiro. Antes (símbolo anterior): 73.5/50/26.5/0. */
.tr .tr-s7-sym{position:relative;width:32px;height:32px}
.tr .tr-s7-line,.tr .tr-s7-fs{position:absolute;left:0;top:0;display:block;width:32px;height:32px}
/* contorno: paths com fill="currentColor" → color transparente; o stroke é herdado pelo