/* ==========================================================================
   Financeiramente — protótipo: PÁGINAS PÚBLICAS (index.html e entrar.html)
   Sem a casca da área logada. Usa os tokens e componentes de estilo.css.
   Desktop primeiro (1366–1600 px); abaixo de 1080 px as colunas só empilham.
   ========================================================================== */

html { scroll-behavior: smooth; }
[hidden] { display: none !important; }
body.publica { background: var(--superficie); }
.erro:empty { display: none; }
.publica section[id] { scroll-margin-top: 80px; }

.largura { max-width: 1240px; margin: 0 auto; padding: 0 40px; }

/* ícones injetados por publica.js em [data-ic] */
[data-ic] { display: inline-grid; place-items: center; line-height: 0; }
[data-ic] svg { width: 100%; height: 100%; }

/* ----------------------------------------------------------------- marca -- */
.marca-pub { display: inline-flex; align-items: center; gap: 10px; color: var(--texto); }
.marca-pub:hover { color: var(--texto); }
.marca-pub .simbolo {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  background: linear-gradient(135deg, var(--roxo-500), var(--roxo-700));
  color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 18px;
  box-shadow: 0 4px 12px rgba(90, 18, 168, .28);
}
.marca-pub .nome { font-weight: 700; font-size: 17px; letter-spacing: -.015em; }
.marca-pub.clara, .marca-pub.clara:hover { color: #fff; }
.marca-pub.clara .simbolo { box-shadow: 0 4px 16px rgba(0, 0, 0, .25); }

/* ------------------------------------------------------------------ topo -- */
.pub-topo {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, .9); backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s;
}
.pub-topo.rolou { border-bottom-color: var(--borda); box-shadow: 0 2px 14px rgba(28, 7, 53, .05); }
.pub-topo .largura { height: 72px; display: flex; align-items: center; gap: 28px; }
.pub-nav { display: flex; gap: 2px; }
.pub-nav a { color: var(--texto-2); font-weight: 500; padding: 8px 12px; border-radius: 8px; }
.pub-nav a:hover { color: var(--texto); background: var(--fundo); }
.pub-nav a.ativo { color: var(--roxo-700); background: var(--roxo-50); }
.pub-topo .acoes { margin-left: auto; display: flex; gap: 8px; }

/* ----------------------------------------------------------------- herói -- */
.heroi {
  position: relative; overflow: hidden; padding: 64px 0 84px;
  background:
    radial-gradient(900px 480px at 88% -5%, var(--roxo-100), transparent 65%),
    linear-gradient(180deg, #fff 0%, var(--roxo-50) 100%);
}
.heroi::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--roxo-100) 1px, transparent 1px),
    linear-gradient(90deg, var(--roxo-100) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(760px 460px at 76% 42%, #000 15%, transparent 75%);
  mask-image: radial-gradient(760px 460px at 76% 42%, #000 15%, transparent 75%);
}
.heroi .largura {
  position: relative; display: grid; align-items: center; gap: 56px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
}
.sobretitulo {
  display: inline-flex; align-items: center; gap: 9px; height: 30px; padding: 0 13px;
  border-radius: 999px; background: #fff; border: 1px solid var(--roxo-200);
  color: var(--roxo-700); font-size: 12.5px; font-weight: 600;
}
.sobretitulo .ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--roxo-500); box-shadow: 0 0 0 4px var(--roxo-100); }
.heroi h1 {
  font-size: 56px; line-height: 1.03; font-weight: 800; letter-spacing: -.035em;
  margin: 22px 0 20px; color: var(--roxo-950);
}
.heroi h1 em { font-style: normal; color: var(--roxo-700); }
.lead { font-size: 18px; line-height: 1.6; color: var(--texto-2); max-width: 560px; }
.heroi .ctas { display: flex; gap: 12px; margin-top: 32px; }
.garantias { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 28px; color: var(--texto-2); font-size: 13px; }
.garantias span { display: inline-flex; align-items: center; gap: 7px; }
.garantias [data-ic] { width: 16px; height: 16px; color: var(--roxo-600); }

/* ------------------------------------------------- "janela" ilustrativa -- */
.vitrine { position: relative; }
.vitrine::before {
  content: ""; position: absolute; inset: 8% -6% -8% 10%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(130, 10, 209, .22), transparent);
  filter: blur(30px);
}
.janela {
  position: relative; z-index: 1;
  background: #fff; border: 1px solid var(--borda); border-radius: 16px; overflow: hidden;
  box-shadow: 0 28px 70px rgba(28, 7, 53, .16), 0 2px 6px rgba(28, 7, 53, .06);
}
.janela-barra {
  height: 38px; display: flex; align-items: center; gap: 12px; padding: 0 14px;
  border-bottom: 1px solid var(--borda); background: var(--superficie-2);
}
.janela-barra .bolas { display: flex; gap: 6px; width: 52px; }
.janela-barra .bolas i { width: 10px; height: 10px; border-radius: 50%; background: var(--borda-forte); display: block; }
.janela-barra .endereco {
  flex: 1; max-width: 300px; margin: 0 auto; height: 22px; border-radius: 6px;
  background: var(--fundo); border: 1px solid var(--borda);
  font-size: 11px; color: var(--texto-3); display: grid; place-items: center;
}
.janela-barra .espaco-barra { width: 52px; }
.janela-corpo { display: grid; grid-template-columns: 54px minmax(0, 1fr); }
.mini-menu { background: var(--roxo-900); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 0; }
.mini-menu .simbolo {
  width: 28px; height: 28px; border-radius: 8px; margin-bottom: 10px;
  background: linear-gradient(135deg, var(--roxo-500), var(--roxo-700));
  color: #fff; font-weight: 800; font-size: 14px; display: grid; place-items: center;
}
.mini-menu [data-ic] { width: 34px; height: 34px; padding: 8px; border-radius: 8px; color: #cdbbea; }
.mini-menu [data-ic].ativo { background: rgba(255, 255, 255, .13); color: #fff; }
.mini-conteudo { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 12px; background: var(--fundo); min-width: 0; }
.mini-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.mini-cab .data { font-size: 11.5px; color: var(--texto-3); }
.mini-cab h3 { font-size: 15px; }
.mini-cab .segmentado button { font-size: 12px; padding: 4px 10px; }

/* cartão do pré-trading (a cor muda por classe) */
.cor-verde { --c: var(--verde); --c-fundo: var(--verde-fundo); }
.cor-amarelo { --c: var(--amarelo); --c-fundo: var(--amarelo-fundo); }
.cor-vermelho { --c: var(--vermelho); --c-fundo: var(--vermelho-fundo); }

.cartao-voo { background: #fff; border: 1px solid var(--borda); border-radius: 12px; overflow: hidden; }
.cartao-voo .faixa-cor {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: linear-gradient(90deg, var(--c-fundo), #fff 70%);
  border-bottom: 1px solid var(--borda); border-left: 4px solid var(--c);
}
.farol { width: 42px; height: 42px; border-radius: 50%; background: var(--c-fundo); display: grid; place-items: center; flex: none; border: 1px solid #fff; }
.farol::after { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--c); box-shadow: 0 0 14px var(--c); }
.faixa-cor .cor-nome { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--c); }
.faixa-cor .cor-frase { font-size: 17px; font-weight: 700; color: var(--texto); letter-spacing: -.01em; }
.faixa-cor .selo { margin-left: auto; }
.cartao-voo .bloco { padding: 12px 16px; border-bottom: 1px solid var(--borda); }
.cartao-voo .bloco:last-child { border-bottom: 0; }
.rotulo-mini { font-size: 11px; font-weight: 600; color: var(--texto-3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.aceso { display: grid; grid-template-columns: 14px 1fr; gap: 8px; font-size: 12.5px; line-height: 1.45; }
.aceso + .aceso { margin-top: 8px; }
.aceso .ponto-item { width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-top: 5px; }
.aceso b { font-weight: 600; }
.aceso span { color: var(--texto-2); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px;
  border-radius: 999px; border: 1px solid var(--borda-forte); background: #fff;
  font: inherit; font-size: 12px; font-weight: 500; color: var(--texto-2); cursor: pointer;
}
.chip:hover { border-color: var(--roxo-300); color: var(--roxo-700); }
.chip.on { background: var(--roxo-50); border-color: var(--roxo-300); color: var(--roxo-700); font-weight: 600; }
.chip [data-ic] { width: 13px; height: 13px; }
.chip:not(.on) [data-ic] { display: none; }
.dica-chip { font-size: 11.5px; color: var(--vermelho); margin-top: 6px; min-height: 16px; }
.acoes-voo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nota-voo { font-size: 12.5px; color: var(--texto-2); font-style: italic; }

/* fileira de baixo da janela do herói */
.mini-fileira { display: grid; grid-template-columns: 1.25fr 1fr; gap: 12px; }
.mini-cartao { background: #fff; border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.mini-cartao .rotulo-mini { margin-bottom: 6px; }
.ag-linha { display: grid; grid-template-columns: 40px 1fr auto; gap: 8px; align-items: center; font-size: 12px; }
.ag-linha + .ag-linha { margin-top: 5px; }
.ag-linha .h { font-weight: 700; font-variant-numeric: tabular-nums; }
.ag-linha .ev { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.impacto { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 5px; }
.impacto.alto { background: var(--vermelho-fundo); color: var(--vermelho); }
.impacto.medio { background: var(--amarelo-fundo); color: var(--amarelo); }
.contagem { font-size: 11px; color: var(--roxo-700); font-weight: 600; margin-top: 6px; }
.favs { display: flex; flex-wrap: wrap; gap: 5px; }
.fav {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600;
  padding: 3px 8px 3px 6px; border-radius: 6px; background: var(--fundo); border: 1px solid var(--borda);
}
.fav [data-ic] { width: 12px; height: 12px; color: #e3a008; }
.fav [data-ic] svg { fill: currentColor; }

/* -------------------------------------------------------- princípios -- */
.principios { border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); background: #fff; }
.principios .largura { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.principio { padding: 26px 24px; display: flex; gap: 14px; }
.principio + .principio { border-left: 1px solid var(--borda); }
.principio > [data-ic] { width: 22px; height: 22px; color: var(--roxo-700); flex: none; margin-top: 2px; }
.principio b { display: block; font-size: 14.5px; margin-bottom: 3px; }
.principio p { font-size: 13px; color: var(--texto-2); line-height: 1.5; }

/* --------------------------------------------------------------- seções -- */
.secao { padding: 92px 0; overflow-x: clip; }
.secao.cinza { background: var(--fundo); }
.secao-cab { max-width: 760px; margin-bottom: 44px; }
.olho { font-size: 12.5px; font-weight: 700; color: var(--roxo-600); text-transform: uppercase; letter-spacing: .1em; }
.secao h2 {
  font-size: 38px; font-weight: 800; letter-spacing: -.028em; line-height: 1.1;
  margin: 10px 0 14px; color: var(--roxo-950);
}
.secao-cab p { font-size: 17px; color: var(--texto-2); line-height: 1.6; }

/* ------------------------------------------------- o que tem lá dentro -- */
.recursos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.recurso {
  background: #fff; border: 1px solid var(--borda); border-radius: 14px; padding: 22px;
  display: flex; flex-direction: column; box-shadow: var(--sombra); transition: box-shadow .2s, border-color .2s;
}
.recurso:hover { box-shadow: var(--sombra-forte); border-color: var(--roxo-200); }
.recurso.destaque { border-color: var(--roxo-200); background: linear-gradient(180deg, var(--roxo-50), #fff 45%); }
.recurso .topo-rec { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ic { width: 42px; height: 42px; border-radius: 11px; background: var(--roxo-100); color: var(--roxo-700); padding: 10px; }
.recurso h3 { font-size: 18px; font-weight: 700; margin: 16px 0 6px; letter-spacing: -.015em; }
.recurso > p { color: var(--texto-2); font-size: 14px; line-height: 1.6; margin-bottom: 18px; }
.recurso .demo { margin-top: auto; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 10px; padding: 12px; }
.demo .rodape-demo { font-size: 11.5px; color: var(--texto-3); margin-top: 8px; }

/* demo: pré-trading */
.telas-voo { display: flex; align-items: center; gap: 6px; }
.tela-voo {
  flex: 1; text-align: center; font-size: 12px; font-weight: 600; padding: 8px 4px;
  background: #fff; border: 1px solid var(--borda); border-radius: 8px; color: var(--texto-2);
}
.tela-voo small { display: block; font-size: 10.5px; font-weight: 500; color: var(--texto-3); }
.telas-voo .seta { width: 14px; height: 14px; color: var(--texto-3); flex: none; }
.tres-cores { display: flex; gap: 4px; padding: 0 2px; flex: none; }
.tres-cores i { width: 12px; height: 12px; border-radius: 50%; display: block; }

/* demo: busca de ativos */
.mini-busca { position: relative; }
.mini-busca input {
  width: 100%; height: 36px; border: 1px solid var(--borda-forte); border-radius: 9px;
  padding: 0 10px 0 32px; font: inherit; font-size: 13px; color: var(--texto); background: #fff;
}
.mini-busca input:focus { outline: 2px solid var(--roxo-200); border-color: var(--roxo-300); }
.mini-busca > [data-ic] { position: absolute; left: 10px; top: 10px; width: 16px; height: 16px; color: var(--texto-3); }
.mini-lista { margin-top: 6px; min-height: 172px; }
.mini-lista .resultado { padding: 5px 6px; gap: 8px; grid-template-columns: 28px minmax(0, 1fr) auto auto; }
.mini-lista .resultado .desc { white-space: nowrap; }
.mini-lista .resultado > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-lista .vazio { padding: 20px 8px; }

/* demo: carteira (importação) */
.arquivo { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1.5px dashed var(--roxo-300); border-radius: 9px; background: #fff; }
.arquivo > [data-ic] { width: 30px; height: 30px; padding: 6px; border-radius: 8px; background: var(--roxo-100); color: var(--roxo-700); flex: none; }
.arquivo b { font-size: 12.5px; display: block; }
.arquivo span { font-size: 11.5px; color: var(--texto-3); }
.contagens { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.contagens div { background: #fff; border: 1px solid var(--borda); border-radius: 8px; padding: 6px 8px; }
.contagens small { display: block; font-size: 10.5px; color: var(--texto-3); }
.contagens b { font-size: 14px; font-variant-numeric: tabular-nums; }

/* demo: diário */
.op-linha { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; margin-bottom: 8px; }
.op-linha b { font-size: 12.5px; }
.tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tag { font-size: 11.5px; padding: 3px 8px; border-radius: 6px; background: #fff; border: 1px solid var(--borda); color: var(--texto-2); }
.tag b { color: var(--texto); font-weight: 600; }
.tag.erro { background: var(--vermelho-fundo); border-color: transparent; color: var(--vermelho); }
.nota-op { font-size: 12px; color: var(--texto-2); margin-top: 8px; padding-left: 8px; border-left: 2px solid var(--roxo-200); font-style: italic; }

/* demo: conversa */
.bolha { font-size: 12.5px; line-height: 1.45; padding: 8px 11px; border-radius: 12px; max-width: 88%; }
.bolha + .bolha { margin-top: 6px; }
.bolha.aluno { background: #fff; border: 1px solid var(--borda); border-bottom-left-radius: 4px; }
.bolha.mentor { background: var(--roxo-700); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.bolha small { display: block; font-size: 10.5px; opacity: .7; margin-top: 2px; }
.anexo { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--texto-2); margin-bottom: 6px; }
.anexo i { width: 8px; height: 8px; border-radius: 50%; background: var(--amarelo); display: block; }

/* demo: agendamento */
.horarios { display: flex; gap: 6px; margin-top: 6px; }
.horario { flex: 1; text-align: center; font-size: 12px; font-weight: 600; padding: 6px 0; border-radius: 7px; border: 1px solid var(--borda); background: #fff; color: var(--texto-2); }
.horario.on { border-color: var(--roxo-700); background: var(--roxo-700); color: #fff; }
.dia-ag { font-size: 12px; font-weight: 600; }
.passo-ag { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--texto-2); margin-top: 8px; }
.passo-ag [data-ic] { width: 22px; height: 22px; padding: 4px; border-radius: 6px; background: var(--roxo-100); color: var(--roxo-700); flex: none; }
.recurso.breve { background: repeating-linear-gradient(135deg, #fff 0 14px, var(--superficie-2) 14px 28px); }
.recurso.breve .demo { opacity: .85; }

/* ------------------------------------------------------- o dia do trader -- */
.dia { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.passo { position: relative; }
.passo::before {
  content: ""; position: absolute; top: 21px; left: 52px; right: -10px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--roxo-300) 0 6px, transparent 6px 12px);
}
.passo:last-child::before { display: none; }
.passo .num {
  width: 44px; height: 44px; border-radius: 50%; background: #fff; position: relative; z-index: 1;
  border: 2px solid var(--roxo-700); color: var(--roxo-700);
  display: grid; place-items: center; font-weight: 800; font-size: 16px;
}
.passo:first-child .num, .passo:last-child .num { background: var(--roxo-700); color: #fff; }
.passo.fora .num { border-style: dashed; border-color: var(--borda-forte); color: var(--texto-3); background: var(--superficie-2); }
.passo .quando { margin-top: 18px; font-size: 11.5px; font-weight: 700; color: var(--roxo-600); text-transform: uppercase; letter-spacing: .07em; }
.passo.fora .quando { color: var(--texto-3); }
.passo h3 { font-size: 18px; margin: 4px 0 8px; letter-spacing: -.015em; }
.passo p { color: var(--texto-2); font-size: 14px; line-height: 1.6; }

/* ----------------------------------------------------------- cruzamento -- */
.cruzamento {
  margin-top: 80px; display: grid; align-items: center; gap: 56px;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
}
.cruzamento h2 { font-size: 34px; }
.cruzamento .texto > p { font-size: 16.5px; color: var(--texto-2); line-height: 1.65; }
.lista-check { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-direction: column; gap: 12px; }
.lista-check li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 15px; line-height: 1.5; }
.lista-check [data-ic] { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--roxo-100); color: var(--roxo-700); margin-top: 1px; }
.cruzamento .aviso { margin-top: 24px; }
.cruzamento .aviso [data-ic] { width: 18px; height: 18px; flex: none; margin-top: 1px; }

.kpis-mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #fff; border: 1px solid var(--borda); border-radius: 10px; }
.kpis-mini > div { padding: 10px 12px; border-left: 1px solid var(--borda); min-width: 0; }
.kpis-mini > div:first-child { border-left: 0; }
.kpis-mini .r { font-size: 11px; color: var(--texto-2); line-height: 1.3; }
.kpis-mini .n { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; margin-top: 3px; }
.kpis-mini .n small { font-size: 12px; color: var(--texto-3); font-weight: 600; }
.barrinha { height: 5px; border-radius: 99px; background: var(--fundo); margin-top: 5px; overflow: hidden; }
.barrinha i { display: block; height: 100%; border-radius: 99px; background: var(--roxo-500); }

.carteira-fileira { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 12px; }
.cal { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.cal .dsem { font-size: 10.5px; color: var(--texto-3); text-align: center; font-weight: 600; }
.cal .d { aspect-ratio: 1.45; border-radius: 6px; position: relative; }
.cal .d.v { background: var(--verde); }
.cal .d.a { background: #e0a000; }
.cal .d.r { background: var(--vermelho); }
.cal .d.s { background: var(--superficie-2); border: 1px dashed var(--borda-forte); }
.cal .d.op::after { content: ""; position: absolute; right: 4px; bottom: 4px; width: 5px; height: 5px; border-radius: 50%; background: #fff; }
.legenda { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; font-size: 10.5px; color: var(--texto-2); }
.legenda span { display: inline-flex; align-items: center; gap: 4px; }
.legenda i { width: 9px; height: 9px; border-radius: 3px; display: block; }

.tabela.mini { font-size: 12px; }
.tabela.mini th { font-size: 10px; padding: 6px 8px; position: static; }
.tabela.mini td { padding: 7px 8px; }
.tabela.mini tr:last-child td { border-bottom: 0; }
.tabela.mini tr:hover td { background: none; }
.cor-tab { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.cor-tab i { width: 8px; height: 8px; border-radius: 50%; display: block; }
.plano-bar { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.plano-bar .barrinha { width: 44px; margin: 0; }

/* ------------------------------------------------------------ para quem -- */
.para-quem { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.para-quem .cartao { padding: 26px; }
.para-quem h3 { font-size: 17px; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.para-quem h3 [data-ic] { width: 28px; height: 28px; padding: 6px; border-radius: 8px; }
.para-quem .sim h3 [data-ic] { background: var(--verde-fundo); color: var(--verde); }
.para-quem .nao h3 [data-ic] { background: var(--fundo); color: var(--texto-2); }
.para-quem ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.para-quem li { font-size: 14.5px; line-height: 1.55; padding-left: 18px; position: relative; color: var(--texto); }
.para-quem li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--verde); }
.para-quem .nao li { color: var(--texto-2); }
.para-quem .nao li::before { background: var(--borda-forte); }
.para-quem .mentor { background: var(--roxo-900); color: #fff; border-color: var(--roxo-900); }
.para-quem .mentor .quem { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.para-quem .mentor .avatar { width: 48px; height: 48px; font-size: 16px; background: linear-gradient(135deg, var(--roxo-500), var(--roxo-700)); color: #fff; }
.para-quem .mentor b { font-size: 17px; display: block; }
.para-quem .mentor small { color: var(--roxo-200); font-size: 12.5px; }
.para-quem .mentor p { color: var(--roxo-100); font-size: 14.5px; line-height: 1.6; }
.para-quem .mentor p + p { margin-top: 12px; }
.estudo { margin-top: 12px; font-size: 13px; color: var(--texto-3); }
.estudo a { color: var(--texto-2); text-decoration: underline; text-underline-offset: 2px; }

/* ----------------------------------------------------------- perguntas -- */
.faq { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 72px; align-items: start; }
.faq .secao-cab { margin-bottom: 0; position: sticky; top: 104px; }
.perguntas details { border-bottom: 1px solid var(--borda); }
.perguntas details:first-child { border-top: 1px solid var(--borda); }
.perguntas summary {
  list-style: none; cursor: pointer; padding: 20px 0; font-weight: 600; font-size: 16.5px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; letter-spacing: -.01em;
}
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary:hover { color: var(--roxo-700); }
.perguntas summary [data-ic] {
  width: 28px; height: 28px; padding: 6px; border-radius: 50%; flex: none;
  background: var(--roxo-50); color: var(--roxo-700); transition: transform .2s;
}
.perguntas details[open] summary [data-ic] { transform: rotate(45deg); }
.perguntas .resp { padding: 0 56px 22px 0; color: var(--texto-2); font-size: 15px; line-height: 1.7; }
.perguntas .resp b { color: var(--texto); }

/* ----------------------------------------------------------- participar -- */
.participar { background: var(--roxo-900); color: #fff; position: relative; overflow: hidden; }
.participar::before {
  content: ""; position: absolute; width: 760px; height: 760px; right: -220px; top: -320px; pointer-events: none;
  background: repeating-radial-gradient(circle, transparent 0 62px, rgba(255, 255, 255, .06) 62px 63px);
  border-radius: 50%;
}
.participar::after {
  content: ""; position: absolute; width: 620px; height: 620px; left: -200px; bottom: -380px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(130, 10, 209, .55), transparent);
}
.participar .largura { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 72px; align-items: center; }
.participar .olho { color: var(--roxo-300); }
.participar h2 { color: #fff; }
.participar .texto > p { color: var(--roxo-200); font-size: 17px; line-height: 1.65; max-width: 560px; }
.proximos { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-direction: column; gap: 16px; counter-reset: prox; }
.proximos li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; counter-increment: prox; }
.proximos li::before {
  content: counter(prox); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .25); color: #fff; font-weight: 700; font-size: 14px;
}
.proximos b { display: block; color: #fff; font-size: 15px; }
.proximos span { color: var(--roxo-200); font-size: 14px; }
.form-participar {
  background: #fff; color: var(--texto); border-radius: 18px; padding: 30px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .3); display: flex; flex-direction: column; gap: 14px;
}
.form-participar h3 { font-size: 20px; letter-spacing: -.015em; }
.form-participar .dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-participar .botao { width: 100%; }
.marcar { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--texto-2); cursor: pointer; }
.marcar input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--roxo-700); flex: none; }
.ou { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--texto-3); }
.ou::before, .ou::after { content: ""; flex: 1; height: 1px; background: var(--borda); }
.feito { text-align: center; padding: 20px 6px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.feito > [data-ic] { width: 56px; height: 56px; padding: 14px; border-radius: 50%; background: var(--verde-fundo); color: var(--verde); }
.feito p { color: var(--texto-2); }

/* --------------------------------------------------------------- rodapé -- */
.pub-rodape { background: var(--roxo-950); color: var(--roxo-200); padding: 60px 0 36px; font-size: 13.5px; }
.pub-rodape .grade-rodape { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.4fr; gap: 40px; }
.pub-rodape .sobre p { margin-top: 14px; line-height: 1.6; max-width: 320px; }
.pub-rodape h4 { color: #fff; font-size: 13px; font-weight: 700; margin-bottom: 14px; }
.pub-rodape a { color: var(--roxo-200); }
.pub-rodape a:hover { color: #fff; }
.pub-rodape ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pub-rodape .apoio-rodape { border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; padding: 16px; line-height: 1.6; }
.pub-rodape .apoio-rodape b { color: #fff; }
.aviso-risco {
  margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; justify-content: space-between; gap: 40px; font-size: 12.5px; line-height: 1.65; color: var(--roxo-300);
}
.aviso-risco p { max-width: 860px; }
.aviso-risco b { color: var(--roxo-100); }
.aviso-risco .direitos { white-space: nowrap; }

/* ----------------------------------------------------- aviso flutuante -- */
.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 200; max-width: min(520px, calc(100vw - 32px));
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  background: var(--roxo-950); color: #fff; padding: 11px 16px; border-radius: 10px; font-size: 13px;
  box-shadow: var(--sombra-forte);
}
.toast b { color: var(--roxo-200); font-weight: 600; }
.toast.ver { opacity: 1; transform: translate(-50%, 0); }

/* ======================================================= entrar.html ===== */
body.entrar { min-height: 100vh; display: flex; flex-direction: column; background: var(--fundo); }
.entrar-grade { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.painel-marca {
  position: relative; overflow: hidden; color: #fff; padding: 40px 56px 36px;
  display: flex; flex-direction: column;
  background:
    radial-gradient(700px 420px at 20% 110%, rgba(130, 10, 209, .55), transparent 70%),
    linear-gradient(160deg, var(--roxo-800) 0%, var(--roxo-900) 50%, var(--roxo-950) 100%);
}
.painel-marca::before {
  content: ""; position: absolute; width: 820px; height: 820px; right: -300px; top: 50%; margin-top: -410px;
  border-radius: 50%; pointer-events: none;
  background: repeating-radial-gradient(circle, transparent 0 58px, rgba(255, 255, 255, .055) 58px 59px);
}
.painel-marca::after {
  content: ""; position: absolute; right: 110px; top: 50%; width: 1px; height: 820px; margin-top: -410px;
  background: linear-gradient(transparent, rgba(255, 255, 255, .12), transparent); pointer-events: none;
}
.painel-marca > * { position: relative; z-index: 1; }
.painel-marca .frase { margin: auto 0; max-width: 500px; padding: 40px 0; }
.painel-marca .olho { color: var(--roxo-300); }
.painel-marca h1 { font-size: 46px; font-weight: 800; line-height: 1.06; letter-spacing: -.035em; margin: 14px 0 18px; }
.painel-marca h1 em { font-style: normal; color: var(--roxo-200); }
.painel-marca .frase > p { color: var(--roxo-200); font-size: 16.5px; line-height: 1.65; }
.setores-pub { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.setores-pub span {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 13px; border-radius: 999px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); font-size: 13px; color: #f3ecfd;
}
.setores-pub [data-ic] { width: 15px; height: 15px; color: var(--roxo-200); }
.setores-pub .tres-cores i { width: 9px; height: 9px; }
.painel-marca .rodape-painel { font-size: 12px; color: var(--roxo-300); line-height: 1.6; max-width: 520px; }

.lado-form { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; gap: 18px; }
.cartao-entrar {
  width: 100%; max-width: 430px; background: #fff; border: 1px solid var(--borda); border-radius: 18px;
  box-shadow: var(--sombra); padding: 36px 36px 30px; display: flex; flex-direction: column; gap: 18px;
}
.cartao-entrar h2 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.cartao-entrar .sub { color: var(--texto-2); margin-top: 6px; }
.cartao-entrar form { display: flex; flex-direction: column; gap: 16px; }
.cartao-entrar .botao.g { width: 100%; }
.rotulo-linha { display: flex; justify-content: space-between; align-items: baseline; }
.rotulo-linha a { font-size: 13px; font-weight: 600; }
.com-botao { position: relative; display: flex; }
.com-botao input { flex: 1; min-width: 0; padding-right: 84px; }
.com-botao .mostrar {
  position: absolute; right: 6px; top: 6px; height: 30px; padding: 0 10px; border: 0; border-radius: 7px;
  background: var(--fundo); color: var(--texto-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.com-botao .mostrar:hover { background: var(--roxo-50); color: var(--roxo-700); }
.campo .erro { font-size: 12.5px; color: var(--vermelho); min-height: 0; }
.campo input[aria-invalid="true"] { border-color: var(--vermelho); outline-color: var(--vermelho-fundo); }
.nota-prototipo { font-size: 12px; color: var(--texto-3); text-align: center; }
.links-entrar { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--borda); font-size: 13.5px; color: var(--texto-2); text-align: center; }
.links-entrar a { font-weight: 600; }
.voltar-pub { font-size: 13px; color: var(--texto-2); display: inline-flex; align-items: center; gap: 6px; }
.voltar-pub [data-ic] { width: 15px; height: 15px; transform: rotate(180deg); }
.enviado { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 10px; background: var(--verde-fundo); color: #0b6b4b; font-size: 13.5px; line-height: 1.55; }
.enviado [data-ic] { width: 20px; height: 20px; flex: none; margin-top: 1px; }

/* login de verdade: abas Entrar / Criar conta, aviso geral, "em breve" */
.abas-entrar { margin: -6px 0 2px; }
.abas-entrar .aba { flex: 1; font-size: 14px; }
.aviso-entrar {
  padding: 12px 14px; border-radius: 10px; font-size: 13px; line-height: 1.5;
  background: var(--amarelo-fundo); color: #7a5300; border: 1px solid #f4e2ae;
}
.aviso-entrar[hidden] { display: none; }
.em-breve-link { font-size: 12.5px; color: var(--texto-3); cursor: help; }
.erro-form { font-size: 13px; color: var(--vermelho); font-weight: 500; }
.erro-form:empty { display: none; }
#visao-entrar[hidden], #visao-criar[hidden], #form-criar[hidden], .enviado[hidden], .links-entrar [hidden] { display: none; }

/* ------------------------------------- telas menores (mobile vem depois) -- */
@media (max-width: 1080px) {
  .largura { padding: 0 24px; }
  .pub-nav { display: none; }
  .heroi .largura, .cruzamento, .participar .largura, .faq { grid-template-columns: minmax(0, 1fr); }
  .faq .secao-cab { position: static; }
  .heroi h1 { font-size: 44px; }
  .recursos, .para-quem { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .principios .largura { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .principio:nth-child(3) { border-left: 0; }
  .dia { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .passo::before { display: none; }
  .pub-rodape .grade-rodape { grid-template-columns: 1fr 1fr; }
  .entrar-grade { grid-template-columns: minmax(0, 1fr); }
  .painel-marca .frase { padding: 28px 0; }
}
@media (max-width: 640px) {
  .pub-topo .acoes .botao.fantasma { display: none; }
  .heroi h1 { font-size: 36px; }
  .heroi .ctas { flex-direction: column; }
  .recursos, .para-quem, .principios .largura, .dia, .pub-rodape .grade-rodape { grid-template-columns: minmax(0, 1fr); }
  .principio + .principio { border-left: 0; border-top: 1px solid var(--borda); }
  .mini-fileira, .carteira-fileira, .form-participar .dupla { grid-template-columns: minmax(0, 1fr); }
  .kpis-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .secao h2 { font-size: 30px; }
  .aviso-risco { flex-direction: column; gap: 12px; }
  .painel-marca { padding: 28px 24px; }
  .painel-marca h1 { font-size: 34px; }
  .lado-form { padding: 24px 16px; }
  .cartao-entrar { padding: 26px 22px; }
}

/* ajustes do cartão do pré-trading e da busca (depois da medida de altura em publica.js) */
.cartao-voo { display: flex; flex-direction: column; }
.cartao-voo > .bloco:nth-child(2) { flex: 1; }
.mini-lista .resultado > span:nth-child(2) { line-height: 1.3; }