/* ==========================================================================
   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.
   O celular (iPhone e Android, no navegador) tem um bloco próprio no fim do
   arquivo, com a mesma consulta do resto do site:
     (max-width: 760px), (orientation: landscape) and (max-height: 520px)
   Tudo o que muda no celular fica dentro dele: o computador e o tablet não mudam.
   Duas exceções, logo depois do bloco do celular: o botão do menu (a folha de
   baixo) aparece até 1080 px, onde o menu de seções do topo não cabe, e nas
   telas de toque (tablet) os alvos crescem para 44 px sem mudar o desenho.
   ========================================================================== */

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;
}
/* hover só onde existe mouse: no toque, o chip desmarcado ficava "aceso" depois do toque */
@media (hover: hover) { .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;
}
@media (hover: hover) { .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; }
@media (hover: hover) { .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); }
@media (hover: hover) { .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; }

/* 188 (CVV) e 192 (SAMU): no celular viram link de ligação (o publica.js põe
   o href "tel:" e o bloco do celular sublinha). No computador ficam texto
   comum, como na janela de apoio da casca: um link tel: ali entraria no Tab
   e o Enter abriria o "escolha um app" do Windows. Sem href, o <a> não é
   link; aqui ele só herda a cor do texto em volta (o desenho não muda). */
a[data-tel]:not([href]) { color: inherit; }

/* ----------------------------------------------------- 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 {   /* só a pílula: as três bolinhas (span de dentro) não viram outra pílula */
  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;
}
@media (hover: hover) { .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; }
/* O e-mail em negrito ("Se houver uma conta com fulana@...") não tem espaço
   onde quebrar: um endereço comprido passava da borda verde (no celular de
   360 px, a partir de uns 30 caracteres). Assim ele quebra em qualquer ponto,
   e só quando não cabe na linha: um e-mail curto fica igual a antes. */
.enviado > span { min-width: 0; }
.enviado b { overflow-wrap: anywhere; }

/* 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; }

/* aviso bom (senha trocada) */
.aviso-entrar.ok { background: var(--verde-fundo); color: #0b6b4b; border-color: #bfe8d6; }

/* a regra da senha: cada item fica verde quando a senha já cumpre (entrar.js, nova-senha.js) */
.regras-senha {
  list-style: none; margin: 2px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px;
  font-size: 12.5px; line-height: 1.4; color: var(--texto-3);
}
.regras-senha li { position: relative; padding-left: 18px; }
.regras-senha li::before {
  content: ""; position: absolute; left: 2px; top: 4px; width: 9px; height: 9px;
  border-radius: 50%; border: 1.5px solid var(--borda-forte);
}
.regras-senha li.ok { color: #0b6b4b; }
.regras-senha li.ok::before {
  border: 0; left: 1px; top: 3px; width: 11px; height: 11px; background: var(--verde);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* o código de 6 números do app autenticador */
.campo-codigo input {
  height: 54px; text-align: center; font-size: 24px; font-weight: 700;
  letter-spacing: .38em; padding-left: calc(12px + .38em); font-variant-numeric: tabular-nums;
}
.campo-codigo input::placeholder { color: var(--borda-forte); }
.voltar-visao { margin-top: 14px; text-align: center; font-size: 13.5px; }
.voltar-visao a { font-weight: 600; }

/* ------------------------------------- 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; }
  .regras-senha { grid-template-columns: minmax(0, 1fr); }
}

/* 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; }

/* Celular: o formulário vem primeiro. Antes, a pessoa via só o painel roxo e
   precisava rolar para achar "Criar conta" (caso da Isadora, 11/10/2026). */
@media (max-width: 1080px) {
  .entrar-grade .lado-form   { order: 1; }
  .entrar-grade .painel-marca { order: 2; }
}

/* ==========================================================================
   CELULAR — iPhone e Android, pelo navegador (sem app para instalar)
   A mesma consulta do resto do site (casca, CSS das telas, window.FIN.celular):
     (max-width: 760px), (orientation: landscape) and (max-height: 520px)
   O celular deitado entra também: tem pouca altura, mesmo sendo largo.
   Regras do Safari (WebKit), que não dá para testar aqui:
   - campo de texto com 16 px ou mais: com menos, o iPhone dá zoom ao tocar;
   - env(safe-area-inset-*) para o entalhe e a barra de gestos
     (o <meta viewport> tem viewport-fit=cover);
   - 100dvh com 100vh antes, como reserva;
   - hover só em @media (hover: hover) (lá em cima, em cada peça);
   - alvo de toque com 44 px ou mais.
   ========================================================================== */

/* Peças que só existem no celular: fora dele, nem aparecem. */
.faixa-curta, .botao-menu, .marca-celular { display: none; }

@media (max-width: 760px), (orientation: landscape) and (max-height: 520px) {
  /* o iPhone deitado aumenta o texto sozinho; aqui o tamanho é o do CSS */
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body.publica, body.entrar { -webkit-tap-highlight-color: rgba(90, 18, 168, .12); }

  /* margem de 16 px, ou a do entalhe, se for maior (celular deitado) */
  .largura {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  /* faixa "Versão inicial": uma linha só, com o texto curto */
  .faixa-prototipo {
    font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding: calc(5px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 5px max(12px, env(safe-area-inset-left));
  }
  .faixa-longa { display: none; }
  .faixa-curta { display: inline; }
  /* Só quem fica colado no alto recebe o espaço do entalhe (iPhone em pé).
     No alto da página é a faixa (padding acima). Depois que ela sai rolando,
     esta tira fixa, da cor da faixa, cobre o entalhe, e o topo da index
     prende logo abaixo dela (top: env(...)). Antes o topo também ganhava o
     espaço e sobrava um vão branco de ~47 px entre a faixa e a marca.
     No Android e no computador o inset é 0: a tira tem altura 0. */
  .faixa-prototipo::before {
    content: ""; position: fixed; top: 0; left: 0; right: 0; z-index: 31;
    height: env(safe-area-inset-top); background: var(--roxo-950); pointer-events: none;
  }

  /* ------------------------------------------------------- topo (index) --
     56 px, preso no alto, logo abaixo da tira do entalhe. Ficam a marca,
     "Entrar" (quem já tem conta entra daqui todo dia) e o botão do menu;
     "Criar minha conta" está no herói, logo abaixo, e na folha do menu. */
  .pub-topo { top: env(safe-area-inset-top); -webkit-backdrop-filter: blur(10px); }
  .pub-topo .largura { height: 56px; gap: 12px; }
  /* As seções viram a folha do menu. Abaixo de 1080 px o .pub-nav já some;
     aqui some também no celular deitado e na janela baixa de computador
     (a consulta pega altura de até 520 px), senão aparecia junto do botão do menu. */
  .pub-nav { display: none; }
  .marca-pub { gap: 8px; min-height: 44px; }
  .marca-pub .simbolo { width: 32px; height: 32px; font-size: 17px; }
  /* link no meio do texto: a área de toque cresce para cima e para baixo, o texto não mexe.
     14 px: o padding conta a partir da altura da letra (18 a 19 px com 15 px de
     fonte, na resposta das perguntas, conforme a fonte do aparelho), não da
     linha; com 12 px ficava em 43. */
  .secao-cab p a, .perguntas .resp a { padding: 14px 0; }
  .marca-pub .nome { font-size: 16px; }
  .pub-topo .acoes { gap: 6px; align-items: center; }
  .pub-topo .acoes .botao.primario { display: none; }
  .pub-topo .acoes .botao.fantasma {
    display: inline-flex; height: 44px; padding: 0 14px;
    background: #fff; color: var(--roxo-700); border-color: var(--roxo-200);
  }
  /* o botão do menu (.botao-menu) está no bloco da folha, mais abaixo */
  .publica section[id] { scroll-margin-top: calc(64px + env(safe-area-inset-top)); }

  /* ------------------------------------------------------------- herói -- */
  .heroi { padding: 28px 0 44px; }
  .heroi .largura { gap: 32px; }
  .heroi h1 { font-size: clamp(30px, 8.8vw, 40px); margin: 16px 0 14px; }
  .heroi h1 em { white-space: nowrap; }   /* "pré-trading" não quebra no hífen */
  .lead { font-size: 16.5px; }
  .heroi .ctas { flex-direction: row; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
  .heroi .ctas .botao { flex: 1 1 220px; }
  .garantias { gap: 8px 18px; margin-top: 20px; }
  .vitrine::before { display: none; }   /* o desfoque grande pesa no celular e quase não aparece */

  /* janela ilustrativa: sem o menu lateral de enfeite, o conteúdo usa a largura toda */
  .janela { border-radius: 14px; }
  .janela-barra { height: 32px; padding: 0 10px; }
  .janela-barra .bolas, .janela-barra .espaco-barra { width: 34px; }
  .janela-corpo { grid-template-columns: minmax(0, 1fr); }
  .mini-menu { display: none; }
  .mini-conteudo { padding: 12px; }
  .mini-cab { flex-direction: column; align-items: stretch; gap: 10px; }
  .mini-cab > .selo { align-self: flex-start; }
  .mini-cab .segmentado { display: flex; }
  .mini-cab .segmentado button { flex: 1; min-height: 44px; font-size: 13.5px; }
  .cartao-voo .faixa-cor { gap: 12px; padding: 12px 14px; }
  .farol { width: 38px; height: 38px; }
  .faixa-cor .cor-frase { font-size: 16px; }
  .cartao-voo .bloco { padding: 12px 14px; }
  .aceso { font-size: 13.5px; }
  .chips { gap: 8px; }
  .chip { min-height: 44px; padding: 0 14px; font-size: 13.5px; }
  .dica-chip { font-size: 12.5px; }
  .acoes-voo .botao.p { flex: 1 1 auto; height: 44px; font-size: 14px; }
  .mini-fileira, .carteira-fileira { grid-template-columns: minmax(0, 1fr); }
  .ag-linha { font-size: 13px; }

  /* -------------------------------------------------------- princípios -- */
  .principios .largura { grid-template-columns: minmax(0, 1fr); }
  .principio { padding: 18px 0; }
  .principio + .principio { border-left: 0; border-top: 1px solid var(--borda); }
  .principio b { font-size: 15.5px; }
  .principio p { font-size: 14px; }

  /* ------------------------------------------------------------ seções -- */
  .secao { padding: 56px 0; }
  .secao-cab { margin-bottom: 28px; }
  .secao h2 { font-size: 28px; }
  .secao-cab p { font-size: 16px; }

  .recursos, .para-quem { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .recurso { padding: 18px; }
  .recurso > p { font-size: 15px; }
  .demo .rodape-demo { font-size: 12.5px; }
  .tela-voo { padding: 8px 2px; }

  /* busca de demonstração: 16 px no campo (sem zoom no iPhone) e estrela com 44 px */
  .mini-busca input { height: 44px; font-size: 16px; padding-left: 38px; -webkit-appearance: none; appearance: none; }
  .mini-busca > [data-ic] { left: 12px; top: 14px; }
  .mini-lista { min-height: 200px; }
  /* sem a coluna do tipo (Metais, Moedas...): o nome do ativo cabe inteiro */
  .mini-lista .resultado { min-height: 48px; padding: 2px 0 2px 6px; grid-template-columns: 34px minmax(0, 1fr) 44px; }
  .mini-lista .resultado .tipo { display: none; }
  /* a sigla (XAU, US1) tinha 10 px num quadrado de 28: como na busca da casca no celular, 34 px */
  .mini-lista .resultado .ic-ativo { width: 34px; height: 34px; font-size: 11.5px; }
  .mini-lista .estrela { width: 44px; height: 44px; display: grid; place-items: center; }
  .mini-lista .estrela::after { content: none; }   /* a estrela já tem 44 px: sem a área extra do estilo.css, que pegaria o toque da linha */

  /* um dia de trader: linha do tempo de cima para baixo */
  .dia { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .passo { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding-bottom: 24px; }
  .passo > :not(.num) { grid-column: 2; }
  .passo .num { grid-row: 1 / span 3; }
  .passo .quando { margin-top: 2px; }
  .passo::before {
    display: block; top: 50px; bottom: 4px; left: 21px; right: auto; width: 2px; height: auto;
    background: repeating-linear-gradient(180deg, var(--roxo-300) 0 6px, transparent 6px 12px);
  }
  .passo:last-child { padding-bottom: 0; }
  .passo p { font-size: 15px; }

  .cruzamento { margin-top: 48px; gap: 28px; }
  .cruzamento h2 { font-size: 26px; }
  .cruzamento .texto > p { font-size: 16px; }
  .kpis-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis-mini > div:nth-child(3) { border-left: 0; }
  .kpis-mini > div:nth-child(n+3) { border-top: 1px solid var(--borda); }
  /* a tabela rola dentro do próprio cartão, nunca a página */
  .rola-lado { overflow-x: auto; overscroll-behavior-x: contain; }
  .tabela.mini th, .tabela.mini td { padding-left: 4px; padding-right: 4px; }
  .tabela.mini th { letter-spacing: 0; vertical-align: bottom; }   /* o título pode quebrar ("No plano"); assim cabe em 360 px */
  .tabela.mini td { white-space: nowrap; }

  /* Letra miúda das ilustrações e da linha do tempo: no celular, nada abaixo
     de 11,5 px nos rótulos em maiúsculas e de 12 px no resto (havia 10 a 11 px:
     títulos da tabela, legenda do calendário, "sono, saúde", rótulos dos números).
     No computador seguem como estão: lá a ilustração tem espaço e é só enfeite. */
  .passo .quando { font-size: 12.5px; }
  .rotulo-mini, .faixa-cor .cor-nome { font-size: 11.5px; }
  /* títulos da tabela "Por cor": 11 px (eram 10), o máximo com que a tabela
     ainda cabe inteira no cartão em 360 px, sem rolar (com 4 px de lado nas células) */
  .tabela.mini th { font-size: 11px; }
  .kpis-mini .r, .legenda, .cal .dsem, .tela-voo small, .contagem, .anexo, .impacto, .bolha small, .contagens small { font-size: 12px; }

  .para-quem .cartao { padding: 20px; }
  .para-quem li { font-size: 15px; }

  /* perguntas: a linha inteira é o alvo de toque */
  .faq { gap: 24px; }
  .perguntas summary { min-height: 56px; padding: 14px 0; font-size: 16px; }
  .perguntas .resp { padding: 0 0 18px; }

  /* 188 e 192 viram link de ligação (o href "tel:" vem do publica.js só no
     celular): sublinhados, para a pessoa ver que dá para tocar, e com a área
     de toque de 44 px para cima e para baixo, sem mexer no texto */
  a[data-tel][href] { text-decoration: underline; text-underline-offset: 3px; padding: 15px 0; }
  .perguntas .resp a[data-tel][href] { color: var(--roxo-700); }
  .apoio-rodape a[data-tel][href] { color: #fff; }

  /* ------------------------------------------------------------ rodapé -- */
  .pub-rodape { padding: 44px 0 calc(28px + env(safe-area-inset-bottom)); }
  .pub-rodape .grade-rodape { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .pub-rodape .grade-rodape > .sobre,
  .pub-rodape .grade-rodape > div:last-child { grid-column: 1 / -1; }
  .pub-rodape h4 { margin-bottom: 4px; }
  .pub-rodape ul { gap: 0; }
  .pub-rodape ul a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .aviso-risco { flex-direction: column; gap: 12px; margin-top: 32px; }

  /* Com left: 50% sem width, o aviso só podia usar metade da tela
     (180 px em 360, 4 linhas para uma frase curta). max-content + o teto
     deixa ele com a largura do texto, até a tela menos 16 px de cada lado. */
  .toast {
    bottom: calc(16px + env(safe-area-inset-bottom));
    width: max-content;
    max-width: min(520px, calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    line-height: 1.45;
  }

  /* o menu (folha de baixo) tem bloco próprio, logo depois deste: vale também no tablet */

  /* ------------------------------------- entrar.html e nova-senha.html -- */
  body.entrar { min-height: 100vh; min-height: 100dvh; }
  .lado-form {
    justify-content: flex-start; gap: 16px;
    padding: 14px max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left));
  }
  /* o painel roxo vai para baixo: a marca aparece no alto, pequena */
  /* alinhada com a borda do cartão (máx. 480 px), também com o celular deitado */
  .marca-celular { display: inline-flex; align-self: flex-start; margin-left: max(0px, calc((100% - 480px) / 2)); min-height: 44px; }
  .cartao-entrar { max-width: 480px; padding: 22px 18px 20px; border-radius: 16px; gap: 16px; }
  .cartao-entrar h2 { font-size: 23px; }
  .cartao-entrar .sub { font-size: 14.5px; }
  .abas-entrar .aba { min-height: 48px; font-size: 15px; }
  body.entrar .campo label { font-size: 14px; }
  body.entrar .campo input { height: 48px; font-size: 16px; }
  body.entrar .campo-codigo input { height: 56px; font-size: 24px; }
  /* O estilo.css põe 16 px !important em todo campo no celular (contra o zoom
     do iPhone), e a regra dele é mais forte que a de cima: o código ficava
     com 16 px e os números pequenos e espaçados. 24 px já passa dos 16, então
     não há zoom; o #id ganha do seletor de lá (os dois campos são #k-codigo). */
  body.entrar .campo-codigo #k-codigo { font-size: 24px !important; }
  body.entrar .campo .erro { font-size: 13.5px; }
  .com-botao input { padding-right: 96px; }
  .com-botao .mostrar { top: 2px; right: 2px; height: 44px; padding: 0 14px; font-size: 13.5px; }
  /* "Esqueci a senha" e os links de texto: a área de toque cresce sem mexer no desenho */
  .rotulo-linha a { font-size: 14px; padding: 12px 0 12px 16px; margin: -12px 0; }
  .links-entrar { font-size: 14.5px; }
  .links-entrar a, .voltar-visao a { padding: 14px 6px; margin: 0 -6px; }
  .voltar-pub { min-height: 44px; font-size: 14px; }
  .cartao-entrar .botao { min-height: 48px; }
  .marcar { min-height: 44px; align-items: center; font-size: 14.5px; }
  .marcar input { width: 22px; height: 22px; margin: 0; }
  .regras-senha { grid-template-columns: minmax(0, 1fr); font-size: 13px; }
  .aviso-entrar, .enviado { font-size: 14px; }
  .painel-marca {
    padding: 28px max(20px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  }
  .painel-marca .frase { padding: 20px 0; }
  .painel-marca h1 { font-size: 30px; }
  .painel-marca .frase > p { font-size: 15.5px; }
  .setores-pub { margin-top: 20px; }
}

/* ---------------------------------------- menu de seções (folha de baixo) --
   No celular e também no tablet e na janela estreita (até 1080 px): abaixo
   de 1080 o menu de seções do topo (.pub-nav) não cabe e some, e antes o
   botão do menu só aparecia até 760 px; entre 761 e 1080 (tablet em pé, por
   exemplo) não havia como pular para as seções pelo topo. O resto do topo do
   tablet segue o desenho do computador. A mesma consulta está no publica.js.
   <dialog> modal: o fundo fica inerte e o foco não sai da folha. */
@media (max-width: 1080px), (orientation: landscape) and (max-height: 520px) {
  .pub-topo .acoes { align-items: center; }
  .botao-menu {
    display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0;
    border: 1px solid var(--borda); border-radius: 10px; background: #fff; color: var(--texto); cursor: pointer;
  }
  .botao-menu [data-ic] { width: 22px; height: 22px; }

  .folha {
    position: fixed; inset: auto 0 0 0; margin: 0; padding: 0; border: 0;
    width: 100%; max-width: 100%; max-height: calc(100% - 48px);
    border-radius: 18px 18px 0 0; background: #fff; color: var(--texto);
    box-shadow: 0 -10px 40px rgba(28, 7, 53, .25);
    overflow: auto; overscroll-behavior: contain;
  }
  .folha[open] { animation: folha-sobe .24s cubic-bezier(.2, .8, .2, 1); }
  .folha::backdrop { background: rgba(28, 7, 53, .5); }
  .folha-corpo {
    padding: 6px max(16px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }
  .folha-alca { width: 40px; height: 4px; border-radius: 99px; background: var(--borda-forte); margin: 4px auto 6px; }
  .folha-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; }
  .folha-cab b { font-size: 17px; }
  .folha-fechar {
    height: 44px; padding: 0 16px; border: 0; border-radius: 10px; cursor: pointer;
    background: var(--fundo); color: var(--texto-2); font: inherit; font-size: 14px; font-weight: 600;
  }
  .folha-nav { display: flex; flex-direction: column; margin: 4px 0 18px; }
  .folha-nav a {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 4px;
    border-bottom: 1px solid var(--borda); color: var(--texto); font-size: 16px; font-weight: 600;
  }
  .folha-nav a [data-ic] { width: 18px; height: 18px; color: var(--texto-3); }
  .folha-acoes { display: flex; flex-direction: column; gap: 10px; }
  .folha-acoes .botao { width: 100%; }
  html.folha-aberta { overflow: hidden; }   /* a página não rola atrás da folha */
}
/* tablet e janela estreita: a folha fica no meio, com até 600 px, e os botões lado a lado */
@media (min-width: 761px) and (max-width: 1080px) {
  .folha { width: min(100%, 600px); margin: 0 auto; }
  .folha-acoes { flex-direction: row; }
  .folha-acoes .botao { flex: 1; }
}

/* Celular deitado (ou celular grande, de 600 px para cima): os pares de
   cartões das ilustrações voltam lado a lado, como no computador. Numa coluna
   só, cada dia do calendário da "Disciplina" virava um bloco de 150x100 px, e
   a ilustração passava de duas telas e meia de altura no celular deitado.
   Abaixo de 600 px (celular em pé) seguem numa coluna, no bloco do celular. */
@media (min-width: 600px) and (max-width: 760px), (min-width: 600px) and (orientation: landscape) and (max-height: 520px) {
  .carteira-fileira { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
  .mini-fileira { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}

/* Tablet e outras telas de toque no desenho do computador (iPad, tablet
   Android): o desenho não muda; só a área de toque cresce para 44 px (pela
   borda invisível ::after, como a estrela do estilo.css no celular) e os
   campos ficam com 16 px (com menos, o Safari do iPad dá zoom ao tocar).
   O celular já tem tudo isso no bloco dele; esta consulta é o resto. */
@media (pointer: coarse) and (min-width: 761px) and (min-height: 521px) {
  .pub-topo .acoes .botao { height: 44px; }
  .chip, .mini-cab .segmentado button, .mini-lista .estrela, .acoes-voo .botao.p { position: relative; }
  .chip::after { content: ""; position: absolute; inset: -8px -3px; }
  .mini-cab .segmentado button::after { content: ""; position: absolute; inset: -9px 0; }
  .mini-lista .estrela::after { content: ""; position: absolute; inset: -9px; }
  .acoes-voo .botao.p::after { content: ""; position: absolute; inset: -6px 0; }
  .mini-busca input, body.entrar .campo input:not(#k-codigo) { font-size: 16px; }
}

/* celular deitado: a folha não estica de ponta a ponta e os botões ficam lado a lado */
@media (orientation: landscape) and (max-height: 520px) {
  .folha { width: min(100%, 600px); margin: 0 auto; }
  .folha-alca { display: none; }
  .folha-nav a { min-height: 46px; }   /* cabe sem rolar nos 390 px de altura */
  .folha-acoes { flex-direction: row; }
  .folha-acoes .botao { flex: 1; }
}

@keyframes folha-sobe { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .folha[open] { animation: none; } }