/* O site do Concord (15/10), na identidade que ele mandou (moodboard 01):
   "Gaming na atitude. Clareza de app." Preto profundo, presença violeta,
   energia lima. Contraste forte, efeitos sutis: o brilho fica no fundo e o
   símbolo continua nítido. Títulos na letra da assinatura (URW Gothic Demi;
   aqui a versão livre dela, TeX Gyre Adventor), curvas amplas, cantos redondos. */

@font-face { font-family: 'Adventor'; src: url('/fontes/adventor-bold.otf') format('opentype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('/fontes/figtree.woff2') format('woff2'); font-weight: 300 900; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fontes/jetbrains-mono.woff2') format('woff2'); font-weight: 100 800; font-display: swap; }

:root {
  /* Paleta da marca */
  --lima: #bef343;
  --violeta: #4c2daa;
  --preto: #09090b;
  --branco: #f2f2f4;
  /* Derivadas */
  --lima-tinta: #10150a;          /* texto em cima do lima */
  --lima-fundo: #1b2410;          /* o chip "Confirmado" */
  --violeta-luz: #b9a6ff;         /* texto violeta em cima do escuro */
  --violeta-fundo: #1c1538;       /* botão secundário e chip "Em destaque" */
  --violeta-borda: #3a2a78;
  --painel: #111016;              /* os cartões do moodboard */
  --painel-2: #16141f;
  --linha: rgba(242, 242, 244, 0.08);
  --linha-forte: rgba(242, 242, 244, 0.14);
  --nevoa: #a6a3b4;               /* texto secundário */
  --brasa: #ff5a36;               /* ao vivo, urgência */
  /* Letra */
  --display: 'Adventor', 'URW Gothic', 'Century Gothic', 'Avant Garde', 'Figtree', sans-serif;
  --corpo: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  /* Forma */
  --raio: 12px;
  --raio-g: 22px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; color: var(--branco); background: var(--preto);
  font: 16px/1.6 var(--corpo); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
/* O brilho violeta vem do canto de cima e as linhas diagonais bem leves, como no ícone e na tela do moodboard. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 55% at 92% -8%, rgba(97, 65, 197, 0.55), rgba(76, 45, 170, 0.18) 45%, transparent 75%),
    radial-gradient(40% 35% at 5% 60%, rgba(190, 243, 67, 0.05), transparent 70%),
    repeating-linear-gradient(-58deg, transparent 0 140px, rgba(242, 242, 244, 0.022) 140px 141px);
}
a { color: var(--lima); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--lima); outline-offset: 3px; }
img { max-width: 100%; }
.miolo { width: min(1160px, 100%); margin-inline: auto; padding-inline: 20px; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; margin: 0; line-height: 1.04; }
h2 { font-size: clamp(30px, 4.4vw, 52px); }
h3 { font-size: 19px; letter-spacing: -0.015em; line-height: 1.2; }
p { margin: 0; }
.rotulo { font: 700 12px/1 var(--corpo); letter-spacing: 0.16em; text-transform: uppercase; color: var(--nevoa); }
.rotulo b { color: var(--lima); font-weight: 700; }
.sub { color: var(--nevoa); font-size: 18px; max-width: 58ch; }

/* ---------- a marca ---------- */
.marca { display: inline-flex; align-items: center; text-decoration: none; }
.marca img { height: 30px; width: auto; display: block; }

/* ---------- botões (curvas amplas) ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 0 26px; border-radius: var(--raio);
  font: 700 16px/1 var(--display); letter-spacing: -0.01em; text-decoration: none; cursor: pointer; border: 0;
  color: var(--lima-tinta); background: var(--lima); transition: transform 0.12s, filter 0.12s, background 0.12s;
}
.botao:hover { filter: brightness(1.06); transform: translateY(-1px); }
.botao:active { transform: translateY(1px); }
.botao .seta { font: 700 18px/1 var(--corpo); }
.botao.secundario { color: var(--branco); background: var(--violeta-fundo); box-shadow: inset 0 0 0 1px var(--violeta-borda); }
.botao.secundario:hover { background: #241a4a; filter: none; }
.botao.pequeno { min-height: 42px; padding: 0 18px; font-size: 14px; border-radius: 10px; }

/* Os chips do moodboard: "Confirmado" e "Em destaque". */
.chip { display: inline-flex; align-items: center; gap: 8px; width: max-content; max-width: 100%; padding: 8px 14px; border-radius: 999px; font: 700 14px/1.2 var(--display); letter-spacing: -0.01em; }
.chip.confirmado { background: var(--lima-fundo); color: var(--lima); }
.chip.confirmado::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--lima); box-shadow: 0 0 10px var(--lima); }
.chip.destaque { background: var(--violeta-fundo); color: var(--violeta-luz); }

/* ---------- topo ---------- */
.topo { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; backdrop-filter: blur(14px); background: rgba(9, 9, 11, 0.7); border-bottom: 1px solid var(--linha); }
.topo .miolo { display: flex; align-items: center; gap: 18px; min-height: 70px; }
.topo nav { display: flex; gap: 24px; margin-left: 22px; }
.topo nav a { color: var(--nevoa); text-decoration: none; font-weight: 600; font-size: 15px; }
.topo nav a:hover { color: var(--branco); }
.topo-acoes { margin-left: auto; display: flex; gap: 10px; align-items: center; }

/* ---------- abertura ---------- */
.abertura { padding-block: 80px 56px; }
.abertura .miolo { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 52px; align-items: center; }
.abertura h1 { font-size: clamp(46px, 7vw, 88px); line-height: 0.98; letter-spacing: -0.045em; margin-top: 24px; }
.abertura h1 .lima { color: var(--lima); display: block; }
.abertura .sub { margin-top: 22px; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.garantias { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 22px; color: var(--nevoa); font-size: 14.5px; }
.garantias > span { display: inline-flex; align-items: center; gap: 8px; }
.garantias > span::before { content: ''; width: 14px; height: 14px; flex: none; background: var(--lima); -webkit-mask: url('/marca/concord-simbolo.svg') center / contain no-repeat; mask: url('/marca/concord-simbolo.svg') center / contain no-repeat; }

/* A tela do programa desenhada: o que a pessoa vê lá dentro. */
.palco-da-tela { position: relative; }
.tela { position: relative; border-radius: var(--raio-g); overflow: hidden; background: #0d0c12; border: 1px solid var(--linha-forte);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.7), 0 0 90px rgba(76, 45, 170, 0.35);
  display: grid; grid-template-columns: 56px 150px minmax(0, 1fr); min-height: 390px; }
.tela::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at 100% 0%, rgba(97, 65, 197, 0.25), transparent 70%); }
.tela-trilho { background: #08080a; display: grid; align-content: start; gap: 10px; padding: 12px 9px; border-right: 1px solid var(--linha); }
.tela-trilho span { width: 38px; height: 38px; border-radius: 12px; background: var(--painel-2); display: grid; place-items: center; font: 700 14px var(--display); color: var(--nevoa); }
.tela-trilho span.ativo { background: #09090b; box-shadow: inset 0 0 0 1px var(--violeta-borda); }
.tela-trilho span.ativo img { width: 22px; }
.tela-canais { background: #0f0e15; padding: 14px 10px; display: grid; align-content: start; gap: 4px; font-size: 12.5px; color: var(--nevoa); border-right: 1px solid var(--linha); }
.tela-canais b { font: 700 13px var(--display); color: var(--branco); padding: 0 6px 8px; }
.tela-canais div { padding: 5px 7px; border-radius: 7px; }
.tela-canais div.ativo { background: rgba(255, 255, 255, 0.06); color: var(--branco); }
.tela-canais .na-sala { display: flex; align-items: center; gap: 6px; padding-left: 18px; color: var(--branco); font-size: 11.5px; }
.tela-canais .na-sala i { width: 14px; height: 14px; border-radius: 50%; background: var(--c, #7b5cff); flex: none; }
.tela-palco { padding: 12px; display: grid; grid-template-rows: auto 1fr auto; gap: 10px; position: relative; z-index: 1; }
.tela-palco header { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--nevoa); }
.tela-palco header b { color: var(--branco); font: 700 13px var(--display); }
.quadros { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.quadro { position: relative; border-radius: 12px; min-height: 92px; background: linear-gradient(160deg, #1a1630, #100e18); display: grid; place-items: center; }
.quadro i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 700 16px var(--display); font-style: normal; color: #0b0a11; background: var(--c, #bef343); }
.quadro.fala { box-shadow: inset 0 0 0 2px var(--lima); }
.quadro small { position: absolute; left: 8px; bottom: 6px; font-size: 10.5px; color: var(--branco); background: rgba(0, 0, 0, 0.5); padding: 1px 6px; border-radius: 6px; }
.quadro.jogo { grid-column: span 2; min-height: 132px; overflow: hidden;
  background: linear-gradient(180deg, rgba(9, 9, 11, 0) 40%, rgba(9, 9, 11, 0.6)), radial-gradient(70% 90% at 70% 110%, #ff7a3c 0%, transparent 60%), linear-gradient(170deg, #241a5e 0%, #4c2daa 45%, #9b4a8e 78%, #f2924b 100%); }
.quadro.jogo::before { content: ''; position: absolute; inset: auto 0 0 0; height: 46%; background: repeating-linear-gradient(90deg, rgba(9, 9, 11, 0.85) 0 14px, rgba(9, 9, 11, 0.7) 14px 26px); clip-path: polygon(0 60%, 12% 30%, 20% 55%, 34% 10%, 46% 50%, 58% 25%, 70% 60%, 82% 20%, 100% 45%, 100% 100%, 0 100%); }
.ao-vivo { position: absolute; top: 8px; left: 8px; padding: 2px 7px; border-radius: 5px; background: var(--brasa); color: #fff; font: 800 10px/1.4 var(--mono); letter-spacing: 0.08em; }
.qualidade { position: absolute; top: 8px; right: 8px; padding: 2px 7px; border-radius: 5px; background: rgba(0, 0, 0, 0.55); font: 700 10px/1.4 var(--mono); }
.controles { display: flex; justify-content: center; gap: 8px; }
.controles span { width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.07); display: grid; place-items: center; font-size: 13px; }
.controles span.sair { background: #ff3b47; width: 44px; border-radius: 999px; }
.flutua { position: absolute; z-index: 2; padding: 9px 13px; border-radius: 12px; font: 700 13px/1.2 var(--display); letter-spacing: -0.01em; background: rgba(17, 16, 22, 0.94); border: 1px solid var(--linha-forte); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55); white-space: nowrap; }
.flutua b { color: var(--lima); }
.palco-da-tela .f1 { top: -18px; right: 6%; }
.palco-da-tela .f2 { bottom: 20%; left: -20px; }
.palco-da-tela .f3 { bottom: -16px; right: 12%; }
@media (prefers-reduced-motion: no-preference) {
  .flutua { animation: boia 6s ease-in-out infinite; }
  .palco-da-tela .f2 { animation-delay: -2s; }
  .palco-da-tela .f3 { animation-delay: -4s; }
  @keyframes boia { 50% { transform: translateY(-7px); } }
}

/* ---------- a faixa que corre ---------- */
.faixa { margin-block: 34px 8px; background: var(--lima); color: var(--lima-tinta); transform: rotate(-1.6deg); overflow: hidden; }
.faixa-trilho { display: flex; width: max-content; gap: 30px; padding-block: 15px; font: 700 20px/1 var(--display); letter-spacing: -0.02em; white-space: nowrap; }
.faixa-trilho span { display: inline-flex; align-items: center; gap: 30px; }
.faixa-trilho span::after { content: ''; width: 20px; height: 20px; background: var(--lima-tinta); -webkit-mask: url('/marca/concord-simbolo.svg') center / contain no-repeat; mask: url('/marca/concord-simbolo.svg') center / contain no-repeat; }
@media (prefers-reduced-motion: no-preference) { .faixa-trilho { animation: corre 28s linear infinite; } @keyframes corre { to { transform: translateX(-50%); } } }

/* ---------- seções ---------- */
.secao { padding-block: 96px; }
.secao-topo { display: grid; gap: 14px; margin-bottom: 42px; }

/* Os recursos, em cartões como os do moodboard. */
.blocos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.bloco { position: relative; overflow: hidden; display: grid; align-content: start; gap: 10px; padding: 26px; border-radius: var(--raio-g); background: var(--painel); border: 1px solid var(--linha); min-width: 0; }
.bloco::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 60% at 100% 0%, rgba(76, 45, 170, 0.22), transparent 70%); }
.bloco > * { position: relative; }
.bloco p { color: var(--nevoa); }
.bloco.g { grid-column: span 3; }
.bloco.m { grid-column: span 2; }
.bloco .grande { font: 700 clamp(44px, 5vw, 66px)/0.95 var(--display); letter-spacing: -0.045em; color: var(--lima); }
.bloco .grande small { font-size: 0.42em; color: var(--branco); letter-spacing: -0.02em; }
.barras { display: grid; gap: 8px; margin-top: 6px; font: 600 12px var(--mono); color: var(--nevoa); }
.barra { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.barra i { display: block; height: 10px; border-radius: 4px; background: var(--lima); width: var(--w); }
.barra.outro i { background: rgba(242, 242, 244, 0.18); }
.sons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.sons span { padding: 7px 11px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); font: 700 13px var(--display); letter-spacing: -0.01em; }
.sons span:first-child { background: var(--lima); color: var(--lima-tinta); }
.icone-bloco { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: var(--violeta-fundo); box-shadow: inset 0 0 0 1px var(--violeta-borda); font-size: 21px; }
@media (prefers-reduced-motion: no-preference) { .bloco.piscada:hover .icone-bloco { animation: treme 0.4s linear 2; } @keyframes treme { 25% { transform: translateX(-4px) rotate(-4deg); } 75% { transform: translateX(4px) rotate(4deg); } } }

/* Planos. */
.planos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 920px; }
.plano { position: relative; display: grid; gap: 18px; align-content: start; padding: 30px; border-radius: 26px; background: var(--painel); border: 1px solid var(--linha-forte); }
.plano.destaque { background: radial-gradient(110% 80% at 100% 0%, rgba(97, 65, 197, 0.45), transparent 60%), var(--painel); border-color: rgba(190, 243, 67, 0.5); box-shadow: 0 0 70px rgba(76, 45, 170, 0.25); }
.plano .chip { position: absolute; top: -16px; left: 26px; }
.plano-nome { font: 700 13px var(--corpo); letter-spacing: 0.16em; text-transform: uppercase; color: var(--nevoa); }
.preco { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.preco b { font: 700 clamp(50px, 6vw, 66px)/1 var(--display); letter-spacing: -0.05em; }
.preco b small { font-size: 0.42em; vertical-align: 0.95em; margin-right: 6px; letter-spacing: -0.02em; }
.preco span { color: var(--nevoa); font-weight: 600; }
.plano ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.plano li { display: flex; gap: 11px; align-items: flex-start; }
.plano li::before { content: ''; width: 16px; height: 16px; margin-top: 4px; flex: none; background: var(--lima); -webkit-mask: url('/marca/concord-simbolo.svg') center / contain no-repeat; mask: url('/marca/concord-simbolo.svg') center / contain no-repeat; }
.plano .botao { width: 100%; }
.nota-planos { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px 24px; color: var(--nevoa); font-size: 15px; }
.nota-planos b { color: var(--branco); }

/* Como funciona: uma sequência de verdade, por isso os números. */
.passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: passo; }
.passo { padding: 28px; border-radius: var(--raio-g); border: 1px solid var(--linha); background: var(--painel); display: grid; gap: 10px; align-content: start; }
.passo::before { counter-increment: passo; content: '0' counter(passo); font: 700 13px/1 var(--corpo); letter-spacing: 0.16em; color: var(--lima); }
.passo p { color: var(--nevoa); }

/* Perguntas. */
.perguntas { display: grid; gap: 10px; max-width: 860px; }
.perguntas details { border-radius: 18px; border: 1px solid var(--linha); background: var(--painel); }
.perguntas summary { cursor: pointer; list-style: none; padding: 20px 22px; font: 700 17px/1.3 var(--display); letter-spacing: -0.015em; display: flex; justify-content: space-between; gap: 16px; }
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after { content: '+'; color: var(--lima); font: 400 26px/0.8 var(--corpo); flex: none; }
.perguntas details[open] summary::after { content: '–'; }
.perguntas details p { padding: 0 22px 20px; color: var(--nevoa); max-width: 70ch; }

/* O convite do fim. */
.final { text-align: center; padding-block: 104px; }
.final img.simbolo { width: 84px; margin: 0 auto 26px; display: block; filter: drop-shadow(0 0 30px rgba(190, 243, 67, 0.25)); }
.final h2 { font-size: clamp(36px, 6vw, 70px); letter-spacing: -0.045em; }
.final .lima { color: var(--lima); }
.final .sub { margin: 18px auto 0; }
.final .acoes { justify-content: center; }

/* ---------- rodapé ---------- */
.rodape { border-top: 1px solid var(--linha); padding-block: 40px 56px; color: var(--nevoa); font-size: 14px; }
.rodape .miolo { display: grid; gap: 18px; }
.rodape-linha { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
.rodape nav { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.rodape nav a { color: var(--nevoa); text-decoration: none; }
.rodape nav a:hover { color: var(--branco); }
.idade { display: inline-flex; align-items: center; gap: 8px; }
.idade b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--painel-2); border: 1px solid var(--linha-forte); color: var(--branco); font: 700 12px var(--display); }
.empresa { font-size: 13px; }

/* ---------- páginas de texto (termos, regras, privacidade) ---------- */
.doc { padding-block: 64px 90px; }
.doc .miolo { max-width: 820px; }
.doc h1 { font-size: clamp(36px, 5vw, 54px); letter-spacing: -0.04em; margin-block: 16px 10px; }
.doc .atualizado { color: var(--nevoa); font-size: 14px; }
.doc .resumo { margin-block: 28px; padding: 22px 24px; border-radius: 18px; background: var(--painel); border: 1px solid rgba(190, 243, 67, 0.28); display: grid; gap: 10px; }
.doc .resumo ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.doc h2 { font-size: 23px; letter-spacing: -0.02em; margin-block: 42px 12px; }
.doc p, .doc li { color: #d6d4e0; max-width: 72ch; }
.doc p + p { margin-top: 12px; }
.doc ul, .doc ol { display: grid; gap: 8px; padding-left: 22px; }
.doc .proibido li::marker { content: '✕  '; color: var(--brasa); font-weight: 800; }
.doc .quem { padding: 16px 18px; border-radius: 14px; background: var(--painel-2); border: 1px solid var(--linha); font-size: 15px; }

/* ---------- celular ---------- */
@media (max-width: 960px) {
  .abertura .miolo { grid-template-columns: minmax(0, 1fr); }
  .blocos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bloco.g, .bloco.m { grid-column: span 2; }
  .topo nav { display: none; }
}
@media (max-width: 640px) {
  .abertura { padding-block: 40px 30px; }
  .tela { grid-template-columns: 46px minmax(0, 1fr); min-height: 300px; }
  .tela-canais { display: none; }
  .planos, .passos { grid-template-columns: minmax(0, 1fr); }
  .blocos { grid-template-columns: minmax(0, 1fr); }
  .bloco.g, .bloco.m { grid-column: auto; }
  .secao { padding-block: 66px; }
  .topo-acoes .botao.secundario { display: none; }
  .marca img { height: 26px; }
  .palco-da-tela .f2 { left: 6px; }
  .acoes .botao { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .botao { transition: none; } }

/* ---------- Em breve: as ideias e os votos ---------- */
.ideias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ideia { position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-content: start; padding: 24px; border-radius: var(--raio-g); background: var(--painel); border: 1px solid var(--linha); }
.ideia::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 60% at 100% 0%, rgba(76, 45, 170, 0.2), transparent 70%); }
.ideia > * { position: relative; }
.ideia-texto { display: grid; gap: 6px; align-content: start; }
.ideia-texto p { color: var(--nevoa); }
.ideia-votos { grid-column: 1 / -1; display: grid; gap: 10px; }
.voto-botoes { display: flex; flex-wrap: wrap; gap: 8px; }
.voto { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border: 0; border-radius: 10px; cursor: pointer;
  font: 700 14px var(--display); letter-spacing: -0.01em; color: var(--branco); background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--linha-forte); transition: background 0.12s, transform 0.12s; }
.voto:hover:not(:disabled) { background: rgba(255, 255, 255, 0.09); }
.voto:active:not(:disabled) { transform: scale(0.97); }
.voto:disabled { opacity: 0.5; cursor: not-allowed; }
.voto b { font: 700 13px var(--mono); color: var(--nevoa); font-variant-numeric: tabular-nums; }
.voto.marcado { background: var(--lima); color: var(--lima-tinta); box-shadow: none; }
.voto.marcado b { color: var(--lima-tinta); }
.voto.nao.marcado { background: var(--violeta-fundo); color: var(--violeta-luz); box-shadow: inset 0 0 0 1px var(--violeta-borda); }
.voto.nao.marcado b { color: var(--violeta-luz); }
.voto-barra { height: 8px; border-radius: 99px; background: rgba(242, 242, 244, 0.08); overflow: hidden; }
.voto-barra i { display: block; height: 100%; border-radius: inherit; background: var(--lima); transition: width 0.3s; }
.voto-legenda { color: var(--nevoa); font-size: 13px; }
/* A chamada do "Em breve" na página de vendas. */
.vem-ai { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; padding: 28px 30px; border-radius: 26px; background: radial-gradient(90% 120% at 100% 0%, rgba(97, 65, 197, 0.4), transparent 60%), var(--painel); border: 1px solid var(--linha-forte); }
.vem-ai h3 { font-size: clamp(22px, 3vw, 30px); letter-spacing: -0.03em; }
.vem-ai p { color: var(--nevoa); margin-top: 6px; }
@media (max-width: 760px) { .ideias { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .voto, .voto-barra i { transition: none; } }