/* ITERA — _src/css/base.css: CSS global do site. O build copia este arquivo para assets/bundle.css e acrescenta, no fim,
   o components/bundle.css do DS 2.0 (classes it-*). Editar aqui, nunca em assets/bundle.css.
   Origem: design-system/project/components/bundle.css (DS de 21/09, que por sua vez veio de site/v2/assets/site.css),
   congelado em 29/09/2026 quando o site passou a ler o DS 2.0 (design-system/publicado/project).
   Os nomes de token daqui (--yellow, --muted, --sp-5, --r-lg...) são os antigos; tokens.css os aponta para o DS 2.0
   (ALIASES em _src/build.py).
   29/09/2026, DS 2.0 nos componentes globais: .btn (44/52px, raio 8, peso 500, sem caixa alta), .badge e .chip (tag
   de bloco 4px), .card (raio 16, surface-1, fio, padding 24), .eyebrow (web-label), h1/h2/h3 (peso 500, em em 300),
   .link (sublinhado), .wrap (coluna de 1240px + margens), rodapé em bg-alt. O hero antigo (.hero) virou .lp-hero
   (só abrir-conta.html); o hero das páginas principais é assets/hero.css. */
:root{
  --font:var(--font-sans);
  --h1:clamp(46px,7.4vw,104px);--h2:clamp(32px,4.4vw,60px);--h3:21px;
  --lead:clamp(17px,1.35vw,20px);--body:16px;--cap:13.5px;--eyebrow:11px;--legal:11.5px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased;text-wrap:pretty;overflow-x:hidden}
img,svg,video{max-width:100%;display:block}
a{color:var(--yellow);text-decoration:none}
a:hover{color:var(--yellow-soft)}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{list-style:none;padding:0}
button{font:inherit}
:focus-visible{outline:2px solid var(--focus-ring,var(--yellow));outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--sp-4);top:var(--sp-4);z-index:300;background:var(--yellow);color:var(--deep-black);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-sm)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* coluna do site (29/09): conteúdo com até --page (1240px) + as margens --gut; em telas maiores sobra a cor da dobra */
.wrap{max-width:var(--page-outer);margin-inline:auto;padding-inline:var(--gut)}
.wrap--narrow{max-width:860px}

/* ---------- tipografia (DS 2.0: web-label, web-h1/h2/h3; título em 500 com a parte final, o em, em 300) ---------- */
.eyebrow{display:flex;align-items:center;gap:var(--sp-3);font-size:12px;line-height:1.4;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent,var(--yellow))}
.eyebrow b{color:var(--yellow);font-weight:700}
.eyebrow::before{content:none}
h1{font-size:var(--h1);font-weight:700;line-height:1;letter-spacing:-.03em;text-transform:none}
h1 em,h2 em,.punch em{color:var(--yellow);font-style:normal;font-weight:700}
h3 em{color:var(--yellow);font-style:normal;font-weight:500}
h2{font-size:var(--h2);font-weight:700;line-height:1.05;letter-spacing:-.02em;text-transform:none;max-width:22ch}
h3{font-size:var(--h3);font-weight:500;letter-spacing:0;line-height:1.3}
.lead{font-size:var(--lead);color:var(--muted);max-width:58ch;line-height:1.55;font-weight:400}
h1+.lead,h2+.lead{margin-top:var(--sp-5)}
.sec-head{display:flex;flex-direction:column;gap:var(--sp-5);margin-bottom:var(--sp-7)}
.sec-head .lead{max-width:62ch}
.sec-head--row{display:grid;gap:var(--sp-5);align-items:end}
@media(min-width:960px){.sec-head--row{grid-template-columns:1.1fr .9fr;gap:var(--sp-9)}.sec-head--row .lead{margin-bottom:6px}}
section{padding:clamp(72px,9vw,128px) 0;position:relative}
section[id]{scroll-margin-top:calc(var(--header-h) + 8px)}
.prose p+p{margin-top:var(--sp-4)}
.prose h2{margin-top:var(--sp-8);margin-bottom:var(--sp-4);font-size:clamp(26px,3vw,36px)}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:var(--sp-6);margin-bottom:var(--sp-3)}
.prose ul{padding-left:1.2em;list-style:disc;color:var(--muted);margin-top:var(--sp-3)}
.prose ol{padding-left:1.2em;list-style:decimal;color:var(--muted);margin-top:var(--sp-3)}
.prose li+li{margin-top:var(--sp-2)}
.prose p,.prose li{color:var(--muted);max-width:72ch}
.prose strong{color:var(--text);font-weight:600}
.prose table{width:100%;border-collapse:collapse;font-size:var(--cap);margin-top:var(--sp-5)}
.prose th,.prose td{text-align:left;padding:var(--sp-3) var(--sp-3);border-bottom:1px solid var(--line);vertical-align:top}
.prose th{color:var(--text);font-weight:600;font-size:var(--eyebrow);letter-spacing:.14em;text-transform:uppercase}
.prose td{color:var(--muted)}
.prose .updated{margin-top:var(--sp-7);font-size:var(--cap);color:var(--dim)}

/* ---------- header ---------- */
header.site{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .25s var(--ease),border-color .25s var(--ease);border-bottom:1px solid transparent}
header.site.is-scrolled{background:rgba(10,10,10,.78);backdrop-filter:saturate(160%) blur(16px);-webkit-backdrop-filter:saturate(160%) blur(16px);border-color:var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);height:var(--header-h)}
.lockup{display:flex;align-items:center;gap:var(--sp-4)}
.brand{display:flex;align-items:center;gap:var(--sp-3);color:var(--text)}
.brand:hover{color:var(--text)}
.mark{width:40px;height:40px;border-radius:11px;background:linear-gradient(160deg,#141414,#050505);border:1px solid rgba(253,242,52,.55);box-shadow:0 0 0 1px rgba(0,0,0,.6),inset 0 0 14px rgba(253,242,52,.10),0 0 18px rgba(253,242,52,.14);display:grid;place-items:center;flex:0 0 auto}
.mark svg{width:20px;height:20px;color:var(--yellow)}
.wordmark{display:flex;flex-direction:column;gap:2px;line-height:1}
.wordmark b{font-size:17px;font-weight:800;letter-spacing:.20em;text-transform:uppercase}
.wordmark span{font-size:7.5px;letter-spacing:.42em;text-transform:uppercase;color:var(--muted);font-weight:500}
.divider{width:1px;height:28px;background:var(--line-2)}
.xp{display:flex;align-items:center;color:var(--text)}
.xp:hover{color:var(--text)}
.xp svg{height:30px;width:auto}
nav.main{display:none;gap:var(--sp-6)}
nav.main a{font-size:var(--cap);font-weight:500;color:var(--muted);letter-spacing:.01em}
nav.main a:hover{color:var(--text)}
/* 29/09: nav a partir de 1140px (era 1060). Com os nomes novos ("Para o Trader", "Para o Investidor", "Educacional") e
   os botões do DS, marca + nav + Login XP + CTA pedem ~1120px; abaixo disso fica o menu (v3.css) */
@media(min-width:1140px){nav.main{display:flex}}
.head-cta{display:flex;align-items:center;gap:var(--sp-3)}
@media(max-width:600px){.head-cta{display:none}.wordmark{display:none}.divider{height:22px}.xp svg{height:24px}}

/* ---------- botões (DS 2.0, Button: 44px, lg 52px, sm 36px; raio 8; 500; 14px, lg 16px; sem caixa alta; nunca pílula) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2,8px);height:44px;min-height:44px;padding:0 var(--space-5,20px);font-family:var(--font);font-size:14px;line-height:1;font-weight:500;letter-spacing:0;text-transform:none;border-radius:var(--radius-md,8px);border:1px solid transparent;cursor:pointer;transition:background-color 150ms var(--ease),border-color 150ms var(--ease),color 150ms var(--ease),transform 150ms var(--ease);white-space:nowrap;text-decoration:none}
.btn:active{transform:scale(.98)}
.btn svg{width:16px;height:16px;flex:0 0 auto}
.btn--lg{height:52px;min-height:52px;padding:0 var(--space-6,24px);font-size:16px}
.btn--sm{height:36px;min-height:36px;padding:0 var(--space-4,16px)}
.btn--primary{background:var(--cta);color:var(--cta-text);border-color:var(--cta);font-weight:600}
.btn--primary:hover{background:var(--cta-hover);border-color:var(--cta-hover);color:var(--cta-text)}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--text)}
.btn--ghost:hover{background:rgba(255,255,255,.06);color:var(--text);border-color:var(--text)}
.btn--dark{background:var(--deep-black);color:var(--neutral-000);border-color:var(--deep-black)}
.btn--dark:hover{background:var(--graphite);border-color:var(--graphite);color:var(--neutral-000)}
.btn--block{width:100%}
.btn[disabled]{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6)}
.cta-note{margin-top:var(--sp-4);font-size:var(--cap);color:var(--dim);display:flex;flex-wrap:wrap;gap:6px 14px}
.cta-note span::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--yellow);margin-right:8px;vertical-align:middle;opacity:.8}
/* link de texto (DS 2.0): 15px, 600, sublinhado de 1px afastado 4px, amarelo no hover; a seta anda 3px */
.link{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;letter-spacing:0;color:var(--text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;transition:color 150ms var(--ease)}
.link:hover{color:var(--yellow)}
.link svg{width:14px;height:14px;transition:transform 150ms var(--ease)}
.link:hover svg{transform:translateX(3px)}

/* ---------- herói da LP (abrir-conta.html). O hero das páginas principais é .hero, em assets/hero.css ---------- */
.lp-hero{padding:calc(var(--header-h) + clamp(48px,7vw,96px)) 0 clamp(64px,8vw,112px);overflow:hidden;min-height:0;display:flex;align-items:center}
.lp-hero::before{content:"";position:absolute;inset:-20% -10% auto -10%;height:140%;background:var(--streak);pointer-events:none}
.lp-hero::after{content:"";position:absolute;top:-30%;right:-15%;width:70%;height:120%;background:radial-gradient(closest-side,rgba(254,241,51,.10),transparent 70%);filter:blur(30px);pointer-events:none}
.lp-hero .wrap{position:relative;z-index:1;width:100%}
.hero-grid{display:grid;gap:var(--sp-8);align-items:center}
@media(min-width:1000px){.hero-grid{grid-template-columns:1.05fr .95fr;gap:var(--sp-9)}}
.lp-hero h1{max-width:11ch;margin-top:var(--sp-5)}
.h1-sub{display:block;margin-top:var(--sp-5);font-size:clamp(15px,1.4vw,19px);font-weight:500;letter-spacing:.01em;line-height:1.4;text-transform:none;color:var(--muted);max-width:34ch}
.lp-hero .lead{max-width:50ch;margin-top:var(--sp-5)}

/* pilha de cards do herói */
.stack{position:relative;min-height:540px}
.ui{background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden;color:var(--text)}
.ui-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:14px 18px;border-bottom:1px solid var(--line);font-size:var(--eyebrow);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600}
.ui-body{padding:18px}
.ui-foot{padding:12px 18px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--yellow);box-shadow:var(--glow);flex:0 0 auto}
.dot--live{background:var(--live);box-shadow:0 0 12px rgba(255,77,77,.6);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.kv{display:grid;grid-template-columns:auto 1fr;gap:12px 18px;align-items:start;font-size:14px;margin:0}
.kv dt{color:var(--dim);font-size:var(--eyebrow);letter-spacing:.16em;text-transform:uppercase;font-weight:600;padding-top:3px}
.kv dd{margin:0;color:var(--text);font-weight:600;font-size:14.5px}
.kv dd small{display:block;color:var(--muted);font-weight:400;font-size:12.5px;margin-top:2px}
.toggle{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;color:var(--text);font-weight:600}
.toggle i{width:40px;height:22px;border-radius:999px;background:var(--yellow);position:relative;display:inline-block;box-shadow:var(--glow)}
.toggle i::after{content:"";position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:50%;background:#000}
/* .badge = Tag do DS 2.0 (bloco de canto 4px, amarelo com texto preto, 11px/600/.12em em caixa alta);
   .badge--live = Badge de status (cápsula de 32px, a única pílula do DS), com o danger do ao vivo */
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:var(--radius-xs,4px);font-size:11px;line-height:16px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;border:0;background:var(--itera-yellow);color:var(--deep-black)}
.badge--live{height:32px;padding:0 14px;border-radius:var(--radius-pill);border:1px solid var(--danger);background:rgba(239,68,68,.12);color:var(--text);font-size:14px;line-height:1;font-weight:400;letter-spacing:0;text-transform:none}
.wave{display:flex;align-items:flex-end;gap:3px;height:38px}
.wave i{flex:1;background:var(--yellow);opacity:.85;border-radius:2px;height:30%;animation:wave 1.3s ease-in-out infinite}
.wave i:nth-child(2n){animation-delay:.15s}.wave i:nth-child(3n){animation-delay:.3s;opacity:.6}.wave i:nth-child(4n){animation-delay:.45s}.wave i:nth-child(5n){animation-delay:.6s;opacity:.7}.wave i:nth-child(7n){animation-delay:.2s}
@keyframes wave{0%,100%{height:22%}50%{height:92%}}
.person{display:flex;align-items:center;gap:12px}
.avatar{width:38px;height:38px;border-radius:50%;background:radial-gradient(100% 100% at 30% 20%,rgba(253,242,52,.22),transparent 60%),var(--panel-3);border:1px solid var(--line-2);display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--yellow);letter-spacing:.04em;flex:0 0 auto}
.person b{display:block;font-size:14px;font-weight:700}
.person small{display:block;color:var(--muted);font-size:12.5px}
.bubble{background:var(--panel-3);border:1px solid var(--line);border-radius:14px 14px 14px 4px;padding:10px 12px;font-size:13px;color:var(--text);line-height:1.45}
.bubble small{display:block;color:var(--dim);font-size:11px;margin-top:6px}
.card-a,.card-b,.card-c{position:relative}
@media(min-width:1000px){
  .stack{display:grid;grid-template-columns:1fr;gap:16px;min-height:0}
  .card-c{display:none}
  .card-b{transform:translateX(-18px)}
}
@media(min-width:1280px){
  .stack{grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto;align-items:start}
  .card-a{grid-column:1;grid-row:1/3;transform:translateY(36px)}
  .card-c{display:block;grid-column:2;grid-row:1;transform:rotate(1.5deg) translateX(8px)}
  .card-b{grid-column:2;grid-row:2;transform:translateX(-18px)}
}
@media(max-width:999px){.stack{display:grid;gap:var(--sp-4);min-height:0}.card-c{display:none}}

/* ---------- faixa de números ---------- */
.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--sp-7) 0;background:linear-gradient(180deg,rgba(255,255,255,.015),transparent)}
.stats ul{display:grid;gap:var(--sp-5)}
@media(min-width:760px){.stats ul{grid-template-columns:repeat(4,1fr);gap:var(--sp-6)}.stats li+li{border-left:1px solid var(--line);padding-left:var(--sp-6)}}
.stats b{display:block;font-size:clamp(30px,3.4vw,44px);font-weight:800;letter-spacing:-.035em;line-height:1}
.stats span{display:block;margin-top:var(--sp-3);font-size:var(--cap);color:var(--muted);max-width:22ch}

/* ---------- definição ---------- */
.define{padding:clamp(56px,7vw,96px) 0}
.define .wrap{display:grid;gap:var(--sp-6)}
@media(min-width:960px){.define .wrap{grid-template-columns:auto 1fr;gap:var(--sp-9);align-items:start}}
.define .mark{width:64px;height:64px;border-radius:18px}
.define .mark svg{width:30px;height:30px}
.define h2{font-size:clamp(24px,2.6vw,34px);max-width:none}
.define p{margin-top:var(--sp-4);font-size:var(--lead);color:var(--muted);max-width:76ch;line-height:1.55}

/* ---------- espelho ---------- */
.mirror{display:grid;gap:var(--sp-7)}
@media(min-width:960px){.mirror{grid-template-columns:1fr 1fr;gap:var(--sp-9);align-items:start}}
.mirror h2{margin-top:var(--sp-5)}
.pains li{display:flex;gap:var(--sp-4);padding:var(--sp-5) 0;border-bottom:1px solid var(--line);color:var(--muted);font-size:17px;line-height:1.5}
.pains li:first-child{border-top:1px solid var(--line)}
.pains li::before{content:"";flex:0 0 auto;width:14px;height:2px;background:var(--yellow);margin-top:13px}
.punch{margin-top:var(--sp-7);font-size:clamp(26px,3vw,40px);font-weight:500;letter-spacing:-.02em;line-height:1.05;text-transform:uppercase}

/* ---------- bento da estrutura ---------- */
.bento{display:grid;gap:var(--sp-4)}
@media(min-width:900px){.bento{grid-template-columns:repeat(12,1fr)}.b7{grid-column:span 7}.b5{grid-column:span 5}.b4{grid-column:span 4}.b12{grid-column:span 12}}
/* card do DS 2.0: raio 16, surface-1, fio de 8%, padding 24 */
.card{position:relative;background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-lg,16px);padding:var(--space-6,24px);transition:border-color 250ms var(--ease);overflow:hidden;display:flex;flex-direction:column;gap:var(--sp-4)}
.card:hover{border-color:var(--yellow-line)}
.card .ico{width:44px;height:44px;border-radius:12px;background:var(--yellow-wash);border:1px solid var(--yellow-line);display:grid;place-items:center;color:var(--yellow)}
.card .ico svg{width:22px;height:22px}
.card h3{font-size:clamp(20px,1.8vw,24px)}
.card p{color:var(--muted);max-width:52ch}
.card .not{margin-top:auto;padding-top:var(--sp-4);border-top:1px solid var(--line);font-size:var(--cap);color:var(--dim);line-height:1.5}
.card .not b{color:var(--muted);font-weight:600}
.card .ui{margin-top:var(--sp-2);box-shadow:var(--shadow-sm)}
.card--row{display:grid;gap:var(--sp-6)}
@media(min-width:900px){.card--row{grid-template-columns:1fr 1fr;align-items:center}}
.card--row .not{margin-top:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
/* .chip = Tag do DS 2.0: moldura de série (contorno de 1px, canto 4px); .chip--y = tag editorial amarela */
.chip{display:inline-block;padding:3px 8px;border-radius:var(--radius-xs,4px);border:1px solid var(--text);font-size:11px;line-height:16px;color:var(--text);font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.chip--y{border-color:var(--itera-yellow);color:var(--deep-black);background:var(--itera-yellow)}

/* ---------- por dentro (imagens) ---------- */
.tiles{display:grid;gap:var(--sp-4)}
@media(min-width:900px){.tiles{grid-template-columns:repeat(2,1fr)}}
figure.tile{border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;background:var(--panel);display:flex;flex-direction:column}
.shot{position:relative;aspect-ratio:16/10;overflow:hidden;background:radial-gradient(120% 120% at 80% 0%,rgba(253,242,52,.10),transparent 55%),linear-gradient(180deg,var(--panel-3),var(--sunken))}
.shot img{width:100%;height:100%;object-fit:cover}
.shot .ui{position:absolute;left:6%;right:6%;top:11%;bottom:-4%;border-radius:14px 14px 0 0;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.shot .ui-body{padding:14px}
figcaption{padding:var(--sp-5) var(--sp-6) var(--sp-6);color:var(--muted);font-size:var(--cap);line-height:1.55}
figcaption b{display:block;color:var(--text);font-size:17px;font-weight:700;letter-spacing:-.01em;margin-bottom:var(--sp-2)}
.candles{width:100%;height:auto;display:block}
.chat{display:flex;flex-direction:column;gap:8px;font-size:12px}
.chat li{display:flex;gap:8px;align-items:flex-start}
.chat .avatar{width:24px;height:24px;font-size:9px}
.chat p{background:var(--panel-3);border:1px solid var(--line);border-radius:10px;padding:6px 9px;color:var(--text);line-height:1.4}
.chat p small{display:block;color:var(--dim);font-size:10px;margin-bottom:2px}
.channels{display:flex;flex-direction:column;gap:7px;font-size:11.5px;color:var(--muted);padding-right:10px;border-right:1px solid var(--line)}
.channels b{color:var(--text);font-weight:600;font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:2px}
.channels .on{color:var(--yellow)}
.split-ui{display:grid;grid-template-columns:120px 1fr;gap:12px}
.split-ui--wide{grid-template-columns:1fr 1.2fr}
@media(max-width:640px){.split-ui,.split-ui--wide{grid-template-columns:1fr}.channels,.chat--side{display:none}.shot .ui{left:4%;right:4%;top:8%}}
.shot--photo{display:grid;place-items:center;text-align:center;padding:var(--sp-6)}
.shot--photo .mark{width:56px;height:56px;border-radius:16px;margin:0 auto var(--sp-4)}
.shot--photo .mark svg{width:26px;height:26px}
.shot--photo p{font-size:var(--cap);color:var(--muted);max-width:28ch;margin:0 auto}
.shot--photo b{display:block;color:var(--text);font-size:15px;margin-bottom:4px}
.map{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1.5px);background-size:22px 22px;-webkit-mask-image:radial-gradient(60% 60% at 50% 50%,#000,transparent);mask-image:radial-gradient(60% 60% at 50% 50%,#000,transparent)}
.shot--photo>*{position:relative}

/* ---------- passos ---------- */
.steps{counter-reset:s;display:grid;gap:var(--sp-4)}
@media(min-width:960px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{counter-increment:s;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(24px,3vw,36px);position:relative}
.steps li::before{content:"0" counter(s);display:block;font-size:clamp(40px,4vw,56px);font-weight:200;letter-spacing:-.04em;line-height:1;color:var(--yellow);margin-bottom:var(--sp-5)}
.steps b{display:block;font-size:var(--h3);font-weight:700;letter-spacing:-.015em}
.steps p{color:var(--muted);margin-top:var(--sp-3)}

/* ---------- seção creme + formulário ---------- */
.sec--cream{background:var(--cream);color:var(--ink-text)}
/* .sec--cream = dobra no tema claro do DS 2.0 (bg #F2F2F2, texto #0A0A0A, secundário #646464, destaque #6B6515;
   o amarelo não vai em texto sobre o claro e o botão primário é preto) */
.sec--cream .eyebrow{color:var(--gold-dim)}
.sec--cream .eyebrow b{color:var(--gold-dim)}
.sec--cream h2,.sec--cream h1{color:var(--ink-text)}
.sec--cream h2 em,.sec--cream h1 em{color:var(--gold-dim)}
.sec--cream .lead{color:var(--ink-muted)}
.sec--cream .link{color:var(--ink-text)}
.sec--cream .link:hover{color:var(--gold-dim)}
.sec--cream .btn--primary{background:var(--deep-black);border-color:var(--deep-black);color:var(--neutral-000);box-shadow:var(--shadow-cta-light)}
.sec--cream .btn--primary:hover{background:var(--graphite);border-color:var(--graphite);color:var(--neutral-000)}
.form-grid{display:grid;gap:var(--sp-8);align-items:center}
@media(min-width:960px){.form-grid{grid-template-columns:1fr 1fr;gap:var(--sp-9)}}
.trust{display:grid;gap:var(--sp-3);margin-top:var(--sp-6)}
.trust li{display:flex;gap:var(--sp-3);align-items:flex-start;font-size:15px;color:var(--muted)}
.trust svg{flex:0 0 auto;width:18px;height:18px;fill:var(--yellow);margin-top:2px}
.sec--cream .trust li{color:var(--ink-muted)}
.sec--cream .trust svg{fill:var(--gold-dim)}
.form-card{position:relative;background:var(--panel);color:var(--text);border:1px solid rgba(0,0,0,.35);border-radius:var(--r-xl);padding:clamp(24px,3vw,36px);box-shadow:0 40px 90px rgba(0,0,0,.35);overflow:hidden;max-width:540px;justify-self:end;width:100%}
.form-card::before{content:"";position:absolute;top:-40%;right:-40%;width:90%;height:120%;background:var(--streak);opacity:.5;pointer-events:none}
.form-card>*{position:relative}
.form-card h3{font-size:22px;font-weight:700;letter-spacing:-.02em;margin-bottom:var(--sp-5)}
.form-card h3 small{display:block;font-size:var(--cap);font-weight:400;color:var(--muted);margin-top:6px;letter-spacing:0}
.fields{display:flex;flex-direction:column;gap:var(--sp-3)}
.field{display:flex;flex-direction:column;gap:var(--sp-2)}
.input,.select{height:54px;width:100%;padding:0 var(--sp-4);background:var(--panel-2);color:var(--text);font-family:var(--font);font-size:15px;border:1px solid var(--line-2);border-radius:var(--r-md);appearance:none;-webkit-appearance:none;transition:border-color .16s var(--ease),box-shadow .16s var(--ease),background .16s var(--ease)}
.input::placeholder{color:var(--dim)}
.input:hover,.select:hover{border-color:rgba(255,255,255,.28)}
.input:focus,.select:focus{outline:none;border-color:var(--yellow);box-shadow:var(--glow);background:var(--sunken)}
.select-wrap{position:relative;display:block}
.select{padding-right:var(--sp-7);cursor:pointer}
.select.empty{color:var(--dim)}
.select option{background:var(--panel-2);color:var(--text)}
.chev{position:absolute;right:var(--sp-4);top:50%;transform:translateY(-50%);width:12px;height:12px;fill:var(--yellow);pointer-events:none}
.honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.legal-note{margin-top:var(--sp-4);font-size:var(--legal);line-height:1.5;color:var(--muted)}
.field.err .input,.field.err .select{border-color:var(--danger);background:var(--danger-wash)}
.err-msg{display:none;gap:var(--sp-2);align-items:flex-start;font-size:var(--cap);color:var(--danger);line-height:1.4}
.err-msg svg{width:15px;height:15px;fill:var(--danger);flex:0 0 auto;margin-top:2px}
.field.err .err-msg{display:flex}
.progress{position:relative;height:2px;width:100%;background:var(--line);overflow:hidden;margin-top:var(--sp-4)}
.progress i{position:absolute;inset:0 auto 0 0;width:38%;background:var(--yellow);box-shadow:var(--glow);animation:slide 1.4s var(--ease) infinite}
@keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(365%)}}
.step2{display:flex;flex-direction:column;gap:var(--sp-5);align-items:flex-start}
.step2 h3{font-size:clamp(24px,2.6vw,30px);font-weight:500;text-transform:none;letter-spacing:-.02em;line-height:1.05;max-width:13ch;margin:0}
.step2 p{color:var(--muted)}
.step2 .acts{display:flex;flex-direction:column;gap:var(--sp-3);width:100%}
.hidden{display:none!important}

/* ---------- sócios ---------- */
.people{display:grid;gap:var(--sp-4)}
@media(min-width:900px){.people{grid-template-columns:repeat(3,1fr)}}
.person-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;display:flex;flex-direction:column}
.portrait{aspect-ratio:4/5;background:radial-gradient(90% 70% at 50% 100%,rgba(253,242,52,.14),transparent 60%),linear-gradient(180deg,var(--panel-3),var(--sunken));display:grid;place-items:center;position:relative}
.portrait img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.portrait span{font-size:clamp(40px,4vw,56px);font-weight:200;letter-spacing:.06em;color:rgba(253,242,52,.55)}
.person-card .body{padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-3);flex:1}
.person-card h3{font-size:22px}
.person-card .role{color:var(--muted);font-size:15px;line-height:1.5}
.person-card .chips{margin-top:var(--sp-2)}
.person-card .link{margin-top:auto;padding-top:var(--sp-4)}

/* ---------- transparência ---------- */
.split{display:grid;gap:var(--sp-7)}
@media(min-width:960px){.split{grid-template-columns:1fr 1fr;gap:var(--sp-9);align-items:start}}
.split h2{margin-top:var(--sp-5)}
.money li{display:flex;gap:var(--sp-4);padding:var(--sp-5) 0;border-bottom:1px solid var(--line);color:var(--muted);font-size:16.5px;line-height:1.5}
.money li:first-child{border-top:1px solid var(--line)}
.money svg{flex:0 0 auto;width:20px;height:20px;fill:var(--yellow);margin-top:3px}
.money+.link{margin-top:var(--sp-5)}

/* ---------- para quem não é ---------- */
.no-grid{display:grid;gap:var(--sp-4)}
@media(min-width:900px){.no-grid{grid-template-columns:repeat(3,1fr)}}
.no-grid .card h3{font-size:20px}
.no-grid .card .ico{background:var(--danger-wash);border-color:var(--danger-line);color:var(--danger)}

/* ---------- faq ---------- */
.faq{max-width:900px}
details{border-bottom:1px solid var(--line)}
details:first-of-type{border-top:1px solid var(--line)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--sp-5);align-items:center;padding:var(--sp-5) 0;font-size:clamp(17px,1.5vw,20px);font-weight:600;letter-spacing:-.01em}
summary::-webkit-details-marker{display:none}
summary h3{font:inherit;letter-spacing:inherit;margin:0}
summary::after{content:"";flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2);background:linear-gradient(var(--yellow),var(--yellow)) center/12px 2px no-repeat,linear-gradient(var(--yellow),var(--yellow)) center/2px 12px no-repeat;transition:transform .2s var(--ease)}
details[open] summary::after{background:linear-gradient(var(--yellow),var(--yellow)) center/12px 2px no-repeat;transform:rotate(180deg)}
details .ans{padding:0 0 var(--sp-6);color:var(--muted);max-width:74ch;font-size:16.5px;line-height:1.6}
.updated{margin-top:var(--sp-6);font-size:var(--cap);color:var(--dim)}

/* ---------- cta final ---------- */
.final{background:radial-gradient(70% 100% at 50% 0%,rgba(253,242,52,.12),transparent 60%);border-top:1px solid var(--line);text-align:center}
.final .wrap{display:flex;flex-direction:column;align-items:center;gap:var(--sp-5)}
.final h2{max-width:22ch;text-align:center}
.final .lead{text-align:center}
.final .cta-row{justify-content:center;margin-top:var(--sp-3)}
.final .eyebrow{justify-content:center}
.final .eyebrow::before{display:none}

/* ---------- rodapé (29/09: bg-alt #141414 em todas as páginas, a "dobra alternada" do DS; fio de 8% em cima) ---------- */
footer.site{border-top:1px solid var(--line);background:var(--bg-alt);padding:var(--sp-8) 0 calc(var(--sp-9) + 20px);color:var(--muted);font-size:var(--cap)}
.foot-top{display:grid;gap:var(--sp-7);padding-bottom:var(--sp-7);border-bottom:1px solid var(--line)}
@media(min-width:900px){.foot-top{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.foot-links{display:grid;gap:var(--sp-3);align-content:start}
.foot-links a,.foot-links span{color:var(--muted)}
.foot-links a:hover{color:var(--yellow)}
.foot-links .t{color:var(--text);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:var(--eyebrow);margin-bottom:var(--sp-2)}
.foot-addr{margin-top:var(--sp-5);max-width:40ch;line-height:1.6}
.foot-addr a{color:var(--text)}
.legal{margin-top:var(--sp-6);font-size:var(--legal);line-height:1.65;color:var(--dim);max-width:110ch}
.legal strong{color:var(--muted);font-weight:600}
.foot-bottom{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-6);justify-content:space-between;margin-top:var(--sp-6);font-size:var(--legal);color:var(--dim)}

/* ---------- barra fixa mobile ---------- */
.mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:120;display:flex;gap:var(--sp-3);padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));background:rgba(10,10,10,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.mobile-cta .btn{flex:1;height:52px;min-height:52px;font-size:16px}
@media(min-width:1000px){.mobile-cta{display:none}}
@media(max-width:999px){body.has-bar{padding-bottom:78px}}

/* ---------- páginas internas ---------- */
.page-head{padding:calc(var(--header-h) + clamp(48px,7vw,96px)) 0 clamp(40px,5vw,64px);position:relative;overflow:hidden}
.page-head::before{content:"";position:absolute;inset:-20% -10% auto -10%;height:140%;background:var(--streak);pointer-events:none;opacity:.7}
.page-head .wrap{position:relative}
.page-head h1{font-size:clamp(36px,5.4vw,72px);max-width:16ch;margin-top:var(--sp-5)}
.page-head .lead{margin-top:var(--sp-5)}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:var(--cap);color:var(--dim);margin-bottom:var(--sp-6)}
.crumbs a{color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--dim)}
.page-body{padding:0 0 clamp(72px,9vw,128px)}
.page-body .wrap{display:grid;gap:var(--sp-8)}
@media(min-width:1000px){.page-body .wrap--aside{grid-template-columns:1fr 340px;align-items:start}}
.aside{position:sticky;top:calc(var(--header-h) + 24px);background:var(--panel);border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-4)}
.aside h3{font-size:18px}
.aside p{color:var(--muted);font-size:var(--cap)}
.roster{width:100%;border-collapse:collapse;margin-top:var(--sp-5)}
.roster th,.roster td{text-align:left;padding:var(--sp-4) var(--sp-3);border-bottom:1px solid var(--line);vertical-align:top;font-size:15px}
.roster th{font-size:var(--eyebrow);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}
.roster td{color:var(--text)}
.roster td.empty{color:var(--dim);font-style:italic}
.callout{border:1px solid var(--yellow-line);background:var(--yellow-wash);border-radius:var(--r-lg);padding:var(--sp-5) var(--sp-6);color:var(--muted);font-size:15px;line-height:1.55}
.callout b{color:var(--text)}
.callout--warn{border-color:var(--danger-line);background:var(--danger-wash)}
.facts{display:grid;gap:var(--sp-3);font-size:15px}
.facts div{display:grid;grid-template-columns:150px 1fr;gap:var(--sp-3);padding:var(--sp-3) 0;border-bottom:1px solid var(--line)}
.facts dt{color:var(--dim);font-size:var(--eyebrow);letter-spacing:.16em;text-transform:uppercase;font-weight:600;padding-top:3px}
.facts dd{margin:0;color:var(--text)}
.lp .lp-hero{min-height:0;padding-top:calc(var(--header-h) + clamp(32px,5vw,64px))}
.lp .hero-grid{align-items:start}
.lp .form-card{justify-self:stretch;max-width:none}
.lp .lp-hero .trust li{color:var(--muted)}
.mini{display:grid;gap:var(--sp-4)}
@media(min-width:900px){.mini{grid-template-columns:repeat(3,1fr)}}
.mini .card h3{font-size:18px}

/* ---------- reveal ---------- */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv:nth-child(2){transition-delay:.06s}.js .rv:nth-child(3){transition-delay:.12s}.js .rv:nth-child(4){transition-delay:.18s}
@media(prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  .wave i,.dot--live,.progress i{animation:none}
  .progress i{width:55%}
  html{scroll-behavior:auto}
}
/* títulos de dobra da LP (abrir-conta, body.lp) no tamanho do H1 do hero (pedido do Paulo, 29/09/2026); as páginas
   legais (body.page) continuam com --h2, seus h2 são subtítulos de texto */
.lp main h2{font-size:clamp(44px,5.6vw,80px);line-height:1.02;letter-spacing:-.03em}
@media (max-width:759.98px){.lp main h2{font-size:max(44px,11.5vw)}}
/* H1 do hero da LP (abrir-conta) no mesmo tamanho do hero padrão (o alias --h1 do DS dava 104px), 29/09/2026 */
.lp-hero h1{font-size:clamp(44px,5.6vw,80px);line-height:1.02;letter-spacing:-.03em}
@media (max-width:759.98px){.lp-hero h1{font-size:max(44px,11.5vw)}}

/* ===== DS 2.0: design-system/publicado/project/components/bundle.css (classes it-*), copiado pelo build ===== */
/* ITERA Investimentos, DS 2.0 — estilos dos componentes. Todo valor é um token. */
.it-root, .it-root * { box-sizing: border-box; }
body { background: var(--bg); color: var(--text); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
.it-num { font-variant-numeric: tabular-nums; }

/* Headline */
.it-headline { margin: 0; font-family: var(--font-sans); font-weight: 500; color: var(--text); letter-spacing: -0.02em; }
.it-headline--display { font-size: 72px; line-height: 72px; letter-spacing: -0.03em; }
.it-headline--h1 { font-size: 48px; line-height: 52px; }
.it-headline--h2 { font-size: 36px; line-height: 40px; }
.it-headline--statement { font-size: 56px; line-height: 60px; font-weight: 300; letter-spacing: -0.01em; text-transform: uppercase; }
.it-headline em { font-style: normal; font-weight: 300; color: var(--accent); }
.it-rule { display: block; width: 40px; height: 3px; background: var(--itera-yellow); border: 0; margin: var(--space-6) 0; }
[data-theme="light"] .it-rule { background: var(--deep-black); }
.it-overline { font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); margin: 0; }
.it-overline span { display: block; }
.it-numbering { display: inline-flex; align-items: center; gap: var(--space-3); font-size: 11px; font-weight: 500; letter-spacing: .2em; color: var(--text-2); }
.it-numbering::after { content: ""; width: 40px; height: 1px; background: var(--text-2); }

/* Button */
.it-btn { height: 44px; padding: 0 var(--space-5); border-radius: var(--radius-md); border: 1px solid transparent;
  font: 500 14px/1 var(--font-sans); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  cursor: pointer; transition: background-color 150ms cubic-bezier(.2,.8,.2,1), transform 150ms cubic-bezier(.2,.8,.2,1); white-space: nowrap; }
.it-btn:active { transform: scale(.98); }
.it-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.it-btn:disabled { opacity: .4; cursor: not-allowed; }
.it-btn--sm { height: 36px; padding: 0 var(--space-4); }
.it-btn--lg { height: 52px; padding: 0 var(--space-6); font-size: 16px; }
.it-btn--primary { background: var(--cta); color: var(--cta-text); }
.it-btn--primary:hover { background: var(--cta-hover); }
[data-theme="light"] .it-btn--primary { box-shadow: var(--shadow-cta-light); }
.it-btn--glow { box-shadow: var(--glow); }
.it-btn--glow:hover { box-shadow: var(--glow-2); }
.it-btn--secondary { background: var(--graphite); color: var(--neutral-000); }
.it-btn--secondary:hover { background: var(--stone); color: var(--neutral-000); }
[data-theme="light"] .it-btn--secondary { background: var(--surface-2); color: var(--text); }
[data-theme="light"] .it-btn--secondary:hover { background: var(--neutral-300); color: var(--text); }
.it-btn--ghost { background: transparent; border-color: var(--text); color: var(--text); }
.it-btn--ghost:hover { background: var(--surface-2); }
.it-btn--danger { background: rgba(239,68,68,.15); border-color: var(--danger); color: var(--danger); }
.it-btn--buy { background: var(--success); color: var(--deep-black); font-weight: 600; }
.it-btn--sell { background: var(--danger); color: var(--deep-black); font-weight: 600; }
[data-theme="light"] .it-btn--buy, [data-theme="light"] .it-btn--sell { color: var(--neutral-000); }
.it-btn--icon { width: 40px; height: 40px; padding: 0; border-radius: var(--radius-pill); background: var(--cta); color: var(--cta-text); }
.it-btn svg { width: 16px; height: 16px; flex: none; }

/* Input */
.it-field { display: flex; flex-direction: column; gap: var(--space-2); font-family: var(--font-sans); min-width: 240px; }
.it-field__label { font-size: 14px; line-height: 20px; color: var(--text-2); }
.it-field__box { height: 48px; display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-4);
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-md); transition: border-color 150ms; }
.it-field__box:focus-within { border-color: var(--focus-ring); }
.it-field__box input { flex: 1; min-width: 0; height: 100%; background: transparent; border: 0; outline: 0; color: var(--text); font: 400 16px/24px var(--font-sans); font-variant-numeric: tabular-nums; }
.it-field__box input::placeholder { color: var(--text-2); }
.it-field__prefix { color: var(--text-2); font-size: 14px; }
.it-field__helper { font-size: 12px; line-height: 16px; color: var(--text-2); }
.it-field--error .it-field__box { border-color: var(--danger); }
.it-field--error .it-field__helper { color: var(--danger); }

/* Badge, Tag, Counter */
.it-badge { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong); font: 400 14px/1 var(--font-sans); color: var(--text); background: transparent; white-space: nowrap; }
.it-badge--selected { border-color: var(--success); color: var(--success); }
.it-badge--primary { background: var(--itera-yellow); border-color: var(--itera-yellow); color: var(--deep-black); font-weight: 500; }
[data-theme="light"] .it-badge--primary { background: var(--deep-black); border-color: var(--deep-black); color: var(--neutral-000); }
.it-badge--up { border-color: var(--success); color: var(--success); background: rgba(34,197,94,.12); }
.it-badge--down { border-color: var(--danger); color: var(--danger); background: rgba(239,68,68,.12); }
.it-badge--flat { border-color: var(--neutral-400); color: var(--text-2); background: rgba(158,158,158,.12); }
.it-tag { display: inline-block; background: var(--itera-yellow); color: var(--deep-black); border-radius: var(--radius-xs);
  padding: 3px 8px; font: 600 11px/16px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; }
.it-tag--series { background: transparent; color: var(--text); border: 1px solid var(--text); }
[data-theme="light"] .it-tag:not(.it-tag--series), [data-theme="light"] .it-counter { background: var(--deep-black); color: var(--neutral-000); }
.it-counter { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill);
  background: var(--itera-yellow); color: var(--deep-black); font: 600 12px/1 var(--font-sans); font-variant-numeric: tabular-nums; }

/* Period selector */
.it-period { display: inline-flex; gap: var(--space-1); font-family: var(--font-sans); }
.it-period button { height: 32px; min-width: 44px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-md); background: transparent;
  color: var(--text-2); font: 500 14px/1 var(--font-sans); cursor: pointer; transition: background-color 150ms; }
.it-period button:hover { color: var(--text); }
.it-period button[aria-pressed="true"] { background: var(--cta); color: var(--cta-text); }
.it-period button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Card */
.it-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); font-family: var(--font-sans); color: var(--text); }
.it-portfolio__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.it-portfolio__label { display: flex; align-items: center; gap: var(--space-2); font-size: 14px; color: var(--text-2); }
.it-portfolio__eye { width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: transparent; color: var(--text-2); cursor: pointer; }
.it-portfolio__value { margin: var(--space-3) 0 var(--space-1); font-size: 36px; line-height: 40px; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.it-portfolio__delta { display: flex; gap: var(--space-3); font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.it-portfolio__chart { display: block; width: 100%; height: 120px; margin: var(--space-4) 0 var(--space-2); overflow: visible; }
.it-line-user { fill: none; stroke: var(--itera-yellow); stroke-width: 2; filter: drop-shadow(0 0 6px rgba(254,241,51,.5)); }
[data-theme="light"] .it-line-user { stroke: var(--deep-black); filter: none; }
.it-line-bench { fill: none; stroke: var(--neutral-400); stroke-width: 1.5; }
.it-area-user { fill: url(#it-area); }
.it-legend { display: flex; gap: var(--space-4); font-size: 12px; line-height: 16px; color: var(--text-2); }
.it-legend span { display: inline-flex; align-items: center; gap: 6px; }
.it-legend i { width: 12px; height: 2px; display: inline-block; }
.it-swatch-user { background: var(--itera-yellow); }
[data-theme="light"] .it-swatch-user { background: var(--deep-black); }
.it-swatch-bench { background: var(--neutral-400); }
.it-portfolio__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-top: var(--space-3); font-size: 12px; color: var(--text-2); }
.it-up { color: var(--success); } .it-down { color: var(--danger); } .it-flat { color: var(--text-2); }

/* Asset row */
.it-asset { display: flex; align-items: center; gap: var(--space-3); height: 56px; border-bottom: 1px solid var(--border); font-family: var(--font-sans); color: var(--text); }
.it-asset__logo { width: 32px; height: 32px; flex: none; border-radius: var(--radius-pill); background: var(--surface-2); display: grid; place-items: center; font-size: 11px; font-weight: 600; color: var(--text-2); }
.it-asset__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.it-asset__ticker { font-size: 14px; line-height: 20px; font-weight: 600; }
.it-asset__name { font-size: 12px; line-height: 16px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.it-asset__side { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.it-asset__chg { font-size: 14px; line-height: 20px; font-weight: 500; }
.it-asset__price { font-size: 12px; line-height: 16px; color: var(--text-2); }

/* Evolution trail */
.it-trail { list-style: none; margin: 0; padding: 0; display: flex; font-family: var(--font-sans); }
.it-trail--horizontal { align-items: flex-start; }
.it-trail--vertical { flex-direction: column; }
.it-trail__step { position: relative; flex: 1; display: flex; gap: var(--space-2); color: var(--text-2); font-size: 12px; line-height: 16px; }
.it-trail--horizontal .it-trail__step { flex-direction: column; align-items: flex-start; padding-right: var(--space-2); }
.it-trail--vertical .it-trail__step { align-items: center; min-height: 44px; gap: var(--space-3); }
.it-trail__mark { position: relative; z-index: 1; width: 20px; height: 20px; display: grid; place-items: center; flex: none; }
.it-trail__mark svg { width: 14px; height: 10px; overflow: visible; }
.it-trail__mark path { fill: none; stroke: var(--text-2); stroke-width: 1.5; }
.it-trail__step--done .it-trail__mark path, .it-trail__step--current .it-trail__mark path { fill: var(--itera-yellow); stroke: var(--itera-yellow); }
[data-theme="light"] .it-trail__step--done .it-trail__mark path, [data-theme="light"] .it-trail__step--current .it-trail__mark path { fill: var(--deep-black); stroke: var(--deep-black); }
.it-trail__step--current .it-trail__mark { border-radius: var(--radius-pill); box-shadow: 0 0 0 1.5px var(--itera-yellow); }
[data-theme="light"] .it-trail__step--current .it-trail__mark { box-shadow: 0 0 0 1.5px var(--deep-black); }
.it-trail__step--done { color: var(--text-2); }
.it-trail__step--current { color: var(--text); font-weight: 500; }
.it-trail--horizontal .it-trail__step:not(:last-child)::before { content: ""; position: absolute; top: 10px; left: 24px; right: 4px; height: 1px; background: var(--border-strong); }
.it-trail--vertical .it-trail__step:not(:last-child)::before { content: ""; position: absolute; left: 10px; top: 32px; bottom: -12px; width: 1px; background: var(--border-strong); }
.it-trail__here { display: inline-block; margin-top: var(--space-1); padding: 2px 8px; border-radius: var(--radius-pill); background: var(--itera-yellow); color: var(--deep-black); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
[data-theme="light"] .it-trail__here { background: var(--deep-black); color: var(--neutral-000); }

/* Didactic flow */
.it-flow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); list-style: none; margin: 0; padding: 0; font-family: var(--font-sans); }
.it-flow__chip { height: 32px; padding: 0 14px; display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); font-size: 14px; color: var(--text); }
.it-flow__chip--focus { background: var(--itera-yellow); border-color: var(--itera-yellow); color: var(--deep-black); font-weight: 500; }
[data-theme="light"] .it-flow__chip--focus { background: var(--deep-black); border-color: var(--deep-black); color: var(--neutral-000); }
.it-flow__arrow { color: var(--text-2); font-size: 14px; }
@media (max-width: 480px) { .it-flow { flex-direction: column; align-items: flex-start; } .it-flow__arrow { transform: rotate(90deg); } }

/* Before / after */
.it-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; overflow: hidden; }
.it-ba__col { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.it-ba__col + .it-ba__col { border-left: 1px solid var(--border); }
.it-ba__label { font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); }
.it-ba__col--after .it-ba__label { color: var(--text); }
.it-ba__col--before p { margin: 0; color: var(--text-2); text-decoration: line-through; text-decoration-color: var(--text-2); font-size: 16px; line-height: 24px; }
.it-ba__col--after p { margin: 0; color: var(--text); font-size: 16px; line-height: 24px; }
.it-ba__col--after .it-rule { margin: 0; }
@media (max-width: 480px) { .it-ba { grid-template-columns: 1fr; } .it-ba__col + .it-ba__col { border-left: 0; border-top: 1px solid var(--border); } }

/* Disclaimer */
.it-disclaimer { margin: 0; font: 400 12px/16px var(--font-sans); color: var(--text-2); max-width: 72ch; }
.it-disclaimer--pending { color: var(--warning); }

@media (prefers-reduced-motion: reduce) { .it-root *, .it-btn, .it-period button { transition: none !important; animation: none !important; } }