/* ─── Ranking Pago ────────────────────────────────────────────────
   Deliberadamente o oposto do site meme: fundo claro, tipografia de
   sistema, um acento só, zero neon. O público aqui é dono de negócio
   decidindo se manda um Pix — a página precisa parecer um serviço,
   não uma brincadeira.
   ──────────────────────────────────────────────────────────────── */

:root {
  --tinta: #0f172a;
  --tinta-media: #475569;
  --tinta-fraca: #94a3b8;
  --fundo: #ffffff;
  --fundo-alt: #f8fafc;
  --linha: #e2e8f0;
  --acento: #1d4ed8;
  --acento-escuro: #1e40af;
  --acento-fraco: #eff6ff;
  --ouro: #b45309;
  --ok: #15803d;
  --erro: #b91c1c;
  --raio: 10px;
  --sombra: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.04);
  --fonte: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fonte);
  color: var(--tinta);
  background: var(--fundo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--acento); }

.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ─── Topo ─── */
.topo {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linha);
}
.topo-interno { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 64px; }
.marca { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 17px; letter-spacing: -0.02em; text-decoration: none; color: var(--tinta); }
.marca svg { width: 26px; height: 26px; flex-shrink: 0; }
.topo-links { display: flex; gap: 26px; }
.topo-links a { color: var(--tinta-media); text-decoration: none; font-size: 14px; font-weight: 500; }
.topo-links a:hover { color: var(--tinta); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--raio); border: 1px solid transparent;
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  text-decoration: none; transition: background 0.15s, border-color 0.15s;
}
.btn-principal { background: var(--acento); color: #fff; }
.btn-principal:hover { background: var(--acento-escuro); }
.btn-principal:disabled { background: var(--tinta-fraca); cursor: not-allowed; }
.btn-secundario { background: #fff; color: var(--tinta); border-color: var(--linha); }
.btn-secundario:hover { border-color: var(--tinta-fraca); }
.btn-grande { padding: 14px 26px; font-size: 15px; }

/* ─── Hero: o horizonte ────────────────────────────────────────────
   A metáfora central do site inteiro: dinheiro compra altura. Em vez
   do hero-padrão (texto de um lado, imagem do outro), o ranking em SI
   é a imagem — um horizonte de prédios renderizado a partir do dado
   real, com um simulador ao vivo em vez de uma segunda coluna estática.
   ──────────────────────────────────────────────────────────────── */
.hero-sky { padding: 64px 0 0; border-bottom: 1px solid var(--linha); text-align: center; }
.hero-sky-topo { max-width: 640px; margin: 0 auto; }
.hero-sky h1 { font-size: clamp(28px, 4.4vw, 42px); line-height: 1.16; letter-spacing: -0.03em; margin: 0 0 16px; font-weight: 800; }
.hero-sky .sub { font-size: 16px; color: var(--tinta-media); margin: 0 auto; max-width: 48ch; }
.hero-acoes { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin: 28px auto 0; }
.hero-nota { margin: 16px 0 40px; font-size: 13px; color: var(--tinta-fraca); }

.selo-preco {
  display: inline-flex; align-items: baseline; gap: 8px; margin-bottom: 18px;
  background: var(--acento-fraco); color: var(--acento-escuro);
  padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
}

/* ─── O horizonte (skyline) ──────────────────────────────────────── */
.skyline-outer {
  background: var(--fundo-alt); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha);
  padding: 40px 0 0; overflow-x: auto;
}
.skyline {
  display: flex; align-items: flex-end; justify-content: center; gap: 12px;
  min-height: 200px; padding: 0 24px; border-bottom: 2px solid var(--tinta); width: max-content; margin: 0 auto;
}
.skyline .carregando { padding: 60px 0; border-bottom: none; }
.predio-col { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; width: 58px; text-decoration: none; cursor: default; }
a.predio-col { cursor: pointer; }
a.predio-col:hover .predio-legenda .nome { color: var(--acento); }
.predio-bar {
  width: 58px; border-radius: 5px 5px 0 0; position: relative;
  background-image: repeating-linear-gradient(0deg, transparent 0 5px, rgba(255, 255, 255, 0.28) 5px 7px);
  transition: height 0.3s ease, background-color 0.3s ease;
}
.predio-tag {
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 700; color: #fff; background: var(--acento);
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}
.predio-legenda { margin-top: 8px; padding-bottom: 10px; text-align: center; }
.predio-legenda .nome {
  display: block; font-size: 11px; font-weight: 650; color: var(--tinta);
  max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.predio-legenda .valor { display: block; font-size: 11px; color: var(--tinta-fraca); font-variant-numeric: tabular-nums; }

.predio-col.vago .predio-bar { background: var(--fundo); border: 2px dashed var(--tinta-fraca); background-image: none; }
.predio-col.vago .predio-legenda .nome { color: var(--tinta-fraca); }

.predio-col.simulado .predio-bar {
  background: var(--acento-fraco); background-image: none; border: 2px dashed var(--acento);
}
.predio-col.simulado .predio-legenda .nome { color: var(--acento); }

/* ─── Simulador: substitui a "imagem" do hero por interação real ─── */
.simulador { max-width: 360px; margin: 28px auto 0; text-align: center; }
.simulador label { display: block; font-size: 13px; font-weight: 600; color: var(--tinta); margin-bottom: 10px; }
.simulador-linha { display: flex; align-items: center; justify-content: center; gap: 8px; }
.simulador-linha .cifrao { font-size: 18px; font-weight: 700; color: var(--acento); }
.simulador-linha input {
  width: 140px; font-family: inherit; font-size: 20px; font-weight: 700; color: var(--acento);
  text-align: center; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 8px 12px;
}
.simulador-linha input:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-fraco); }
.simulador-resultado { min-height: 20px; margin: 12px 0 0; font-size: 13px; color: var(--tinta-media); }
.simulador-resultado.erro { color: var(--erro); }

/* ─── Seções ─── */
section { padding: 64px 0; }
section + section { border-top: 1px solid var(--linha); }
.secao-cabeca { margin-bottom: 32px; }
.secao-cabeca h2 { font-size: 27px; letter-spacing: -0.025em; margin: 0 0 8px; font-weight: 750; }
.secao-cabeca p { color: var(--tinta-media); margin: 0; font-size: 15px; }

/* ─── Ranking ─── */
.ranking { border: 1px solid var(--linha); border-radius: 12px; overflow: hidden; }
.linha {
  display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 16px;
  padding: 15px 20px; border-bottom: 1px solid var(--linha); background: #fff;
}
.linha:last-child { border-bottom: none; }
.linha:nth-child(even) { background: var(--fundo-alt); }
.linha.primeiro { background: var(--acento-fraco); }
.linha .pos { font-size: 15px; font-weight: 700; color: var(--tinta-fraca); font-variant-numeric: tabular-nums; }
.linha.primeiro .pos { color: var(--acento); }
.linha .quem { min-width: 0; }
.linha .quem-nome { font-weight: 650; font-size: 15px; color: var(--tinta); text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.quem-nome:hover { color: var(--acento); }
.linha .quem-sub { font-size: 12px; color: var(--tinta-fraca); }
.linha .quanto { font-size: 17px; font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; }
.linha.primeiro .quanto { color: var(--acento); }
.vazio { padding: 44px 20px; text-align: center; color: var(--tinta-media); background: #fff; }

/* ─── Passos e públicos ─── */
.passos, .publicos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.publicos { grid-template-columns: repeat(4, 1fr); }
.passo, .publico { background: var(--fundo-alt); border: 1px solid var(--linha); border-radius: 12px; padding: 22px; }
.passo .num {
  width: 27px; height: 27px; border-radius: 7px; background: var(--acento); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; margin-bottom: 13px;
}
.passo h3, .publico h3 { font-size: 16px; margin: 0 0 7px; letter-spacing: -0.015em; }
.passo p, .publico p { margin: 0; font-size: 14px; color: var(--tinta-media); }
.publico .icone { font-size: 21px; display: block; margin-bottom: 9px; }

.aviso-honesto {
  margin-top: 26px; padding: 16px 18px; border-left: 3px solid var(--linha);
  color: var(--tinta-media); font-size: 14px; background: var(--fundo-alt); border-radius: 0 8px 8px 0;
}

/* ─── Formulário ─── */
.formulario { max-width: 680px; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo.inteiro { grid-column: 1 / -1; }
.campo label, .rotulo-campo { font-size: 13px; font-weight: 600; color: var(--tinta); }
.campo input, .campo select, .campo textarea {
  font-family: inherit; font-size: 15px; color: var(--tinta); background: #fff;
  border: 1px solid var(--linha); border-radius: var(--raio); padding: 10px 13px; width: 100%;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-fraco);
}
.campo .ajuda { font-size: 12px; color: var(--tinta-fraca); }

.caixa-valor { grid-column: 1 / -1; border: 1px solid var(--acento); background: var(--acento-fraco); border-radius: 12px; padding: 20px; }
.valor-linha { display: flex; align-items: center; gap: 10px; }
.valor-linha .cifrao { font-size: 22px; font-weight: 700; color: var(--acento); }
.valor-linha input {
  flex: 1; min-width: 0; font-family: inherit; font-size: 28px; font-weight: 700; color: var(--acento);
  background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 8px 14px;
}
.atalhos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.atalhos button {
  background: #fff; border: 1px solid var(--linha); color: var(--tinta-media); border-radius: 999px;
  padding: 6px 15px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.atalhos button:hover { border-color: var(--acento); color: var(--acento); }
.atalhos button.ativo { background: var(--acento); border-color: var(--acento); color: #fff; }
.valor-explica { margin: 11px 0 0; font-size: 13px; color: var(--tinta-media); }

.obrigatorio { color: var(--erro); }
.mensagem { margin: 14px 0 0; font-size: 14px; min-height: 20px; }
.mensagem.erro { color: var(--erro); }
.mensagem.ok { color: var(--ok); }

.sugestoes { grid-column: 1 / -1; border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.sugestoes:empty { display: none; }
.sugestoes button {
  display: block; width: 100%; text-align: left; background: #fff; border: none;
  border-bottom: 1px solid var(--linha); padding: 11px 14px; font-family: inherit; font-size: 14px; cursor: pointer; color: var(--tinta);
}
.sugestoes button:last-child { border-bottom: none; }
.sugestoes button:hover { background: var(--acento-fraco); }

/* ─── Pix ─── */
.caixa-pix { max-width: 420px; border: 1px solid var(--linha); border-radius: 12px; padding: 26px; text-align: center; background: var(--fundo-alt); }
.caixa-pix h3 { margin: 0 0 16px; font-size: 17px; }
.caixa-pix img { width: 210px; height: 210px; background: #fff; padding: 9px; border-radius: 10px; border: 1px solid var(--linha); }
.caixa-pix textarea { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; border: 1px solid var(--linha); border-radius: 8px; padding: 9px; margin-top: 13px; resize: none; color: var(--tinta-media); }
.status-pix { margin: 15px 0 0; font-size: 14px; color: var(--tinta-media); }
.status-pix.aprovado { color: var(--ok); font-weight: 600; }
.status-pix.erro { color: var(--erro); }

.caixa-acesso { margin-top: 20px; padding: 18px; border: 1px solid var(--ok); background: #f0fdf4; border-radius: 10px; text-align: left; }
.caixa-acesso input { width: 100%; font-size: 12px; padding: 8px; border: 1px solid var(--linha); border-radius: 7px; margin: 9px 0; font-family: ui-monospace, monospace; }

/* ─── Confiança ─── */
.confianca { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.confianca div { font-size: 14px; }
.confianca .titulo { font-weight: 650; display: block; margin-bottom: 3px; }
.confianca .sub { color: var(--tinta-fraca); font-size: 13px; }

/* ─── FAQ ─── */
.faq details { border-bottom: 1px solid var(--linha); padding: 17px 0; }
.faq summary { cursor: pointer; font-weight: 650; font-size: 15px; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: '+'; color: var(--acento); font-weight: 700; margin-right: 10px; }
.faq details[open] summary::before { content: '−'; }
.faq p { margin: 11px 0 0 22px; color: var(--tinta-media); font-size: 14px; }

/* ─── Rodapé ─── */
footer { border-top: 1px solid var(--linha); background: var(--fundo-alt); padding: 44px 0 30px; }
.rodape-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 36px; }
footer h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--tinta-fraca); margin: 0 0 13px; }
footer ul { list-style: none; padding: 0; margin: 0; }
footer li { margin-bottom: 8px; }
footer a { color: var(--tinta-media); text-decoration: none; font-size: 14px; }
footer a:hover { color: var(--acento); }
.rodape-sobre { font-size: 14px; color: var(--tinta-media); margin: 0; max-width: 40ch; }
.rodape-fim { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--linha); font-size: 13px; color: var(--tinta-fraca); }

.carregando { color: var(--tinta-fraca); font-size: 14px; padding: 22px; text-align: center; }
.menu-mobile { display: none; background: none; border: 1px solid var(--linha); border-radius: 8px; padding: 7px 11px; font-size: 17px; cursor: pointer; }

@media (max-width: 900px) {
  .passos { grid-template-columns: 1fr; }
  .publicos, .confianca { grid-template-columns: repeat(2, 1fr); }
  .rodape-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  section { padding: 44px 0; }
  .hero-sky { padding: 40px 0 0; }
  .campos { grid-template-columns: 1fr; }
  .publicos, .confianca { grid-template-columns: 1fr; }
  .predio-col, .predio-bar { width: 46px; }
  .predio-legenda .nome, .predio-legenda .valor { max-width: 46px; }
  .topo-links { display: none; }
  .topo-links.aberto {
    display: flex; flex-direction: column; position: absolute; top: 64px; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--linha); padding: 16px 24px; gap: 14px;
  }
  .menu-mobile { display: block; }
  .linha { grid-template-columns: 38px 1fr auto; gap: 11px; padding: 13px 14px; }

  /* Cabecalho no celular: a marca nao pode quebrar em duas linhas, entao
     o CTA encolhe. O texto longo fica so no desktop. */
  .marca { font-size: 15px; white-space: nowrap; }
  .topo-interno { gap: 10px; }
  .topo-interno .btn-principal { padding: 9px 14px; font-size: 13px; white-space: nowrap; }
  .topo-interno .btn-principal .longo { display: none; }
}

/* ─── Compatibilidade com as páginas renderizadas no servidor ──────
   As páginas de destaque/conta/categoria são geradas por um renderer
   COMPARTILHADO pelos dois produtos: o miolo (nome, valores, histórico,
   comentários) é o mesmo, só a marca muda. Esse miolo usa estilo inline
   com estas variáveis. Em vez de duplicar o renderer, o tema sério
   simplesmente responde pelos mesmos nomes, com valores sóbrios.
   ──────────────────────────────────────────────────────────────── */
:root {
  --gold: var(--acento);
  --orange: var(--acento-escuro);
  --cyan: var(--acento);
  --purple: var(--acento);
  --pink: var(--acento);
  --bg: var(--fundo);
  --bg-alt: var(--fundo-alt);
  --surface: var(--fundo-alt);
  --border: var(--linha);
  --text: var(--tinta);
  --text-dim: var(--tinta-media);
  --font-display: var(--fonte);
  --font-body: var(--fonte);
  --font-marker: var(--fonte);
}

.secao-titulo { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin: 34px 0 14px; text-transform: none; }
.secao-titulo-sm { font-size: 18px; }
.sixseven-lista { border: 1px solid var(--linha); border-radius: 10px; overflow: hidden; }
.sixseven-lista:empty { display: none; }
.aura-hist-item { display: flex; align-items: baseline; gap: 14px; padding: 13px 16px; border-bottom: 1px solid var(--linha); flex-wrap: wrap; background: #fff; }
.aura-hist-item:last-child { border-bottom: none; }
.aura-hist-item .valor { font-weight: 700; color: var(--acento); }
.aura-hist-item .quando { color: var(--tinta-fraca); font-size: 12px; }
.aura-hist-item .msg { width: 100%; margin: 3px 0 0; color: var(--tinta-media); font-size: 13px; }
.msg-publica { border: 1px solid var(--linha); border-radius: 10px; padding: 13px 16px; margin-bottom: 10px; background: #fff; }
.msg-publica .texto { margin: 0 0 6px; font-size: 14px; }
.msg-publica .rodape { margin: 0; font-size: 12px; color: var(--tinta-fraca); }
.empty { color: var(--tinta-fraca); font-size: 14px; padding: 18px; text-align: center; }
.placar-redes { display: flex; flex-wrap: wrap; gap: 10px; }
.placar-redes a { font-size: 13px; color: var(--acento); text-decoration: none; border: 1px solid var(--linha); border-radius: 999px; padding: 5px 13px; }
.placar-redes a:hover { border-color: var(--acento); }
.aura-video-embed { max-width: 320px; border-radius: 10px; overflow: hidden; border: 1px solid var(--linha); }
.aura-video-embed iframe { width: 100%; aspect-ratio: 9 / 16; border: 0; display: block; }
.sixseven-badge, .bg-fx { display: none; }