/* =====================================================================
   Radar do CNPJ — layout e componentes de pagina.
   Os tokens estao em design.css; aqui so composicao.
   ===================================================================== */

/* ============================================================ topo */

.topo {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linha);
}
.topo-linha {
  display: flex; align-items: center; gap: var(--e6);
  padding-top: var(--e3); padding-bottom: var(--e3);
}
.marca { display: flex; align-items: center; gap: var(--e2); text-decoration: none; }
.marca:hover { text-decoration: none; }
/* O simbolo virou arquivo (static/marca.svg): um SVG escala de 16 a 512 px
   sem borrar, e o mesmo desenho serve de favicon e de icone de aplicativo. */
.marca-simbolo { width: 26px; height: 26px; flex: none; display: block; }
.marca-nome { color: var(--tinta); font-size: 14px; font-weight: 700; letter-spacing: -.01em; }

.topo-menu { display: flex; gap: var(--e5); margin-left: auto; }
.topo-menu a { color: var(--texto); font-size: 13px; font-weight: 600; }
.topo-menu a:hover { color: var(--tinta); text-decoration: none; }
.topo-acoes { display: flex; gap: var(--e2); }

/* ============================================================ ficha */

.migalha { font-size: 12px; color: var(--suave); padding: var(--e5) 0 var(--e3); }
.migalha a { color: var(--suave); }

.cabeca { margin-bottom: var(--e4); }
.cabeca-pilulas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin-bottom: var(--e3); }
.cabeca-desde { font-family: var(--mono); font-size: 11px; color: var(--suave); }
.cabeca-sub { color: var(--texto); font-size: 14px; margin-top: 6px; }
.cabeca-numeros {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--e4); margin: var(--e5) 0;
  padding: var(--e4) 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha);
}
.cabeca-acoes { display: flex; flex-wrap: wrap; gap: var(--e2); }

/* ---- variação B: conteúdo + barra lateral fixa ---- */
.painel { display: grid; grid-template-columns: 1fr 320px; gap: var(--e4); align-items: start; }
.painel-corpo { display: flex; flex-direction: column; gap: var(--e4); }

/* Item de grid e de flex nasce com `min-width:auto`: uma tabela larga dentro
   empurra a coluna inteira e a PAGINA passa a rolar na horizontal. Medido no
   celular: 528px de conteudo numa tela de 375. O `min-width:0` devolve a
   rolagem para dentro do `.rolagem`, que e onde ela deve ficar. */
.painel > *, .painel-corpo > *, .painel-corpo > * > * { min-width: 0; }
.lateral-fixa { position: sticky; top: 76px; display: flex; flex-direction: column; gap: var(--e3); }

/* ---- blocos ---- */
.painel-corpo h2 { margin-bottom: var(--e4); display: flex; align-items: baseline; gap: var(--e2); }
.contagem { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--suave); }

.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--e4); }
.grade-4 { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--e3); }
.campo { min-width: 0; }
.campo .valor, .campo .num { overflow-wrap: anywhere; }

.endereco-linha { font-size: 15px; font-weight: 700; color: var(--tinta); }
.endereco-sub { font-size: 13px; color: var(--texto); margin: 6px 0 var(--e4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }

.cnae-principal { font-size: 14px; font-weight: 600; color: var(--tinta); }
.cnae-lista { list-style: none; margin: var(--e2) 0 0; padding: 0; font-size: 13px; }
.cnae-lista li { padding: 6px 0; border-bottom: 1px solid var(--linha); }
.cnae-lista li:last-child { border-bottom: none; }

.socio { padding: var(--e4) 0; border-bottom: 1px solid var(--linha); }
.socio:last-of-type { border-bottom: none; }
.socio-topo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin-bottom: var(--e3); }
.socio-nome { font-size: 14px; font-weight: 700; color: var(--tinta); }
/* Chamava-se `.cadeado` e colidia com a camada `.cadeado` do bloco pago —
   o `opacity: .5` daqui caia sobre a sobreposicao inteira, e a chamada de
   venda da ficha aparecia a meio tom. Nome proprio resolve na raiz. */
.cadeado-mini { font-size: 11px; opacity: .5; }

.vazio { color: var(--suave); font-size: 13px; margin: var(--e2) 0 0; }
.objeto { max-width: 320px; }

/* ---- território ---- */
.territorio-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); margin-bottom: var(--e3); }
.territorio-cabeca h2 { margin: 0; }
.territorio-intro { font-size: 13px; color: var(--texto); margin: 0 0 var(--e4); }
.mapa { position: relative; border-radius: var(--r-interno); overflow: hidden; border: 1px solid var(--linha); margin-bottom: var(--e5); }
.mapa iframe { display: block; width: 100%; height: 260px; border: 0; }
.mapa-credito {
  position: absolute; right: 6px; bottom: 6px;
  background: rgba(255, 255, 255, .9); border-radius: 6px;
  padding: 2px 6px; font-size: 10px; color: var(--texto);
}

.leitura { margin-top: var(--e5); }
.leitura-p { padding: var(--e3) var(--e4); font-size: 12px; }

/* ---- bloco pago ---- */
.cadeado-icone { font-size: 26px; line-height: 1; }
.cadeado-painel h3 { margin: 0; font-size: 18px; }
.cadeado-painel p { max-width: 420px; font-size: 13px; margin: 0; color: var(--texto); }
/* O botao e a acao da tela: largo, alto e sem competir com nada ao lado. */
.cadeado-painel .botao-1 { padding: 13px 26px; font-size: 14px; }
.cadeado-painel .ligacao { font-size: 13px; }

/* ============================================================ lateral */

.indice { list-style: none; margin: var(--e3) 0 0; padding: 0; }
.indice li { display: flex; justify-content: space-between; align-items: center; gap: var(--e2); padding: 7px 0; border-bottom: 1px solid var(--linha); }
.indice li:last-child { border-bottom: none; }
.indice a { color: var(--tinta); font-size: 13px; font-weight: 600; }
.indice-gratis { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--ok); }
.indice-pago { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--azul); }

.lateral-monitorar { background: var(--azul-fraco); border-color: var(--azul-linha); }
.lateral-monitorar h3 { margin-bottom: 6px; }
.lateral-monitorar p { font-size: 12px; margin: 0 0 var(--e3); }
.lateral-monitorar .botao { width: 100%; justify-content: center; }

.fontes-lista { list-style: none; margin: var(--e3) 0 var(--e3); padding: 0; font-size: 12px; }
.fontes-lista li { display: flex; justify-content: space-between; gap: var(--e2); padding: 5px 0; }
.fontes-lista li span:first-child { color: var(--texto); }
.lateral-link { font-size: 12px; font-weight: 600; }

/* ============================================================ início */

.capa { padding: var(--e9) 0 var(--e8); text-align: center; }
.capa-selo { margin-bottom: var(--e5); }
.capa h1 { font-size: clamp(28px, 4vw, 40px); line-height: 1.15; max-width: 720px; margin: 0 auto var(--e4); }
.capa-sub { font-size: 16px; max-width: 620px; margin: 0 auto var(--e7); }
.capa-busca { display: flex; gap: var(--e2); max-width: 560px; margin: 0 auto; }
.capa-busca input {
  flex: 1; font-family: var(--mono); font-size: 15px;
  padding: 14px var(--e4); border: 1px solid var(--linha);
  border-radius: var(--r-botao); background: #fff; color: var(--tinta);
}
.capa-busca input:focus { outline: none; border-color: var(--azul); }
.capa-exemplos { font-size: 12px; color: var(--suave); margin-top: var(--e4); }
.capa-exemplos a { font-family: var(--mono); }

.contadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--e4); margin: var(--e8) 0; }
.contador { text-align: center; }
.contador .destaque { font-size: 26px; }

/* ============================================================ rodapé */

.rodape { border-top: 1px solid var(--linha); background: #fff; margin-top: var(--e9); padding: var(--e8) 0 var(--e6); }
.rodape-grade { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--e6); }
.rodape-grade a { display: block; color: var(--texto); font-size: 13px; padding: 4px 0; }
.rodape-grade .rotulo { margin-bottom: var(--e2); }
.rodape-texto { font-size: 13px; max-width: 320px; margin: var(--e3) 0 0; }
.marca-rodape { margin-bottom: 0; }
/* Identificacao do fornecedor - exigencia do Decreto 7.962/2013 para quem
   vende pela internet. Fica ACIMA do bloco de copyright e com a mesma tinta
   do corpo, nao em cinza de rodape: a lei pede "local de destaque e de facil
   visualizacao", e texto apagado nao cumpre isso. */
.rodape-empresa {
  display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4);
  margin-top: var(--e7); padding-top: var(--e5);
  border-top: 1px solid var(--linha);
  font-size: 12.5px; color: var(--texto); line-height: 1.6;
}
.rodape-empresa-nome { font-weight: 700; color: var(--tinta); }

.rodape-fim {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e3);
  margin-top: var(--e4); padding-top: var(--e4);
  border-top: 1px solid var(--linha); font-size: 12px; color: var(--suave);
}

/* ============================================================ celular */

@media (max-width: 1023px) {
  .painel { grid-template-columns: 1fr; }
  .painel-lateral { display: none; }
  .rodape-grade { grid-template-columns: 1fr 1fr; }
  .objeto { max-width: none; }

  /* O menu ANTES sumia por completo no celular (`display: none`), sem nada
     no lugar - nem hamburguer. Quem entrava pelo telefone perdia Buscar,
     Catalogo, Planos, Fontes e Contato de uma vez.

     Agora ele desce para uma segunda linha que rola de lado. Sem JavaScript,
     sem menu que abre e fecha: os cinco destinos ficam visiveis e a tres
     dedos de distancia. */
  /* Com duas linhas o topo passa de 110px. Grudado, isso comeria 14% da tela
     do comeco ao fim de uma pagina longa. No celular ele rola junto com o
     resto - o rodape e a chamada final cobrem quem chegou ao fim. */
  .topo { position: static; }
  .topo-linha { flex-wrap: wrap; gap: var(--e2) var(--e4); }
  .topo-acoes { margin-left: auto; }
  .topo-menu {
    order: 3; width: 100%; margin-left: 0;
    gap: var(--e5); overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .topo-menu::-webkit-scrollbar { display: none; }
  .topo-menu a { white-space: nowrap; padding: var(--e2) 0; }
}

/* ============================================== paginas de catalogo */

.pagina-titulo { margin: var(--e3) 0 var(--e2); }
.pagina-sub { font-size: 15px; max-width: 640px; margin: 0 0 var(--e6); }
.secao-titulo { margin: var(--e7) 0 var(--e4); }

.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--e3); }
.bloco-link { display: block; text-decoration: none; transition: border-color .12s; }
.bloco-link:hover { border-color: var(--azul); text-decoration: none; }
.bloco-topo { display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e3); }
.bloco-nome { font-size: 14px; font-weight: 700; color: var(--tinta); }
.bloco-link .destaque { margin-top: var(--e2); }
.bloco-link .rotulo { margin-top: 2px; }

/* Lista longa em colunas: 5.570 municipios nao cabem numa coluna so. */
.lista-municipios { columns: 260px; column-gap: var(--e5); }
.lista-municipios a {
  display: flex; justify-content: space-between; gap: var(--e3);
  padding: 6px 0; font-size: 13px; color: var(--tinta);
  break-inside: avoid; border-bottom: 1px solid var(--linha);
}
.lista-municipios a:hover { color: var(--azul); text-decoration: none; }
.lista-municipios .num { color: var(--suave); font-size: 12px; }

.linha-sub { font-size: 11px; color: var(--suave); margin-top: 2px; }
.paginacao { display: flex; align-items: center; gap: var(--e3); margin-top: var(--e5); }
.paginacao .rotulo { margin: 0; }

/* ==================================================== planos */

.capa-curta { padding: var(--e6) 0 var(--e7); }
.planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--e3); align-items: start; }
.plano { display: flex; flex-direction: column; gap: var(--e2); }
.plano h2 { margin: 0; }
.plano-preco { font-size: 26px; font-weight: 800; color: var(--tinta); }
.plano-preco span { font-size: 13px; font-weight: 600; color: var(--suave); }
.plano-sub { font-size: 13px; margin: 0 0 var(--e2); }
.plano .botao { justify-content: center; }
.plano-itens { list-style: none; margin: var(--e3) 0 0; padding: 0; font-size: 13px; }
.plano-itens li { padding: 6px 0; border-bottom: 1px solid var(--linha); }
.plano-itens li:last-child { border-bottom: none; }
.plano-itens li::before { content: "✓ "; color: var(--ok); font-weight: 700; }
.plano-destaque { border-color: var(--azul); }
.faixa-api { margin-top: var(--e6); }

/* ================================================ texto institucional */

.texto { max-width: 760px; margin-bottom: var(--e4); }
.texto h2 { margin-bottom: var(--e3); }
.texto p { font-size: 14px; margin: 0 0 var(--e3); }
.texto p:last-child { margin-bottom: 0; }
.lista-regras { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.lista-regras li { padding: var(--e3) 0; border-bottom: 1px solid var(--linha); }
.lista-regras li:last-child { border-bottom: none; }

/* ============================================================== lote */

.area {
  width: 100%; font-family: var(--mono); font-size: 14px; line-height: 1.7;
  padding: var(--e3); margin: var(--e2) 0 var(--e3);
  border: 1px solid var(--linha); border-radius: var(--r-interno);
  background: var(--fundo-2); color: var(--tinta); resize: vertical;
}
.area:focus { outline: none; border-color: var(--azul); background: #fff; }
.lote-acoes { display: flex; gap: var(--e2); }

/* ============================================================== conta */

.saldo {
  display: flex; flex-direction: column; align-items: flex-end;
  padding: 0 var(--e3) 0 0; margin-right: var(--e2);
  border-right: 1px solid var(--linha); text-decoration: none;
}
.saldo:hover { text-decoration: none; }
.saldo .rotulo { margin: 0; font-size: 9px; }
.saldo .num { font-size: 13px; color: var(--tinta); }

.moldura { max-width: 460px; margin: var(--e8) auto var(--e9); }
.moldura h1 { margin-bottom: var(--e2); }
.moldura .pagina-sub { margin-bottom: var(--e5); font-size: 14px; }
.moldura .selo { margin-bottom: var(--e4); }

.formulario { display: flex; flex-direction: column; gap: var(--e4); }
.formulario label { display: block; }
.formulario input {
  width: 100%; font-family: var(--fonte); font-size: 15px;
  padding: 12px var(--e3); margin-top: 5px;
  border: 1px solid var(--linha); border-radius: var(--r-botao);
  background: var(--fundo-2); color: var(--tinta);
}
.formulario input:focus { outline: none; border-color: var(--azul); background: #fff; }
.formulario .botao { justify-content: center; padding: 13px; }
.dica { display: block; font-size: 11px; color: var(--suave); margin-top: 5px; }
.rodape-forma { font-size: 13px; margin: var(--e5) 0 0; }

/* Botao que precisa parecer link - "parar de monitorar" nao merece o peso
   visual de um botao de verdade. */
.ligacao {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--azul);
}
.ligacao:hover { text-decoration: underline; }

.extrato { list-style: none; margin: var(--e3) 0 0; padding: 0; font-size: 12px; }
.extrato li { display: flex; justify-content: space-between; gap: var(--e3); padding: 7px 0; border-bottom: 1px solid var(--linha); }
.extrato li:last-child { border-bottom: none; }
.extrato-data { display: block; color: var(--suave); font-size: 11px; }
.extrato-mais { color: var(--ok); }
.extrato-menos { color: var(--texto); }

/* ============================================================ avisos */

.avisos { margin-top: var(--e4); }
.aviso {
  border-radius: var(--r-interno); padding: var(--e3) var(--e4);
  font-size: 13px; font-weight: 600; margin-bottom: var(--e2);
}
.aviso-ok   { background: var(--ok-fundo);    color: var(--ok);
              border: 1px solid #C9E7D6; }
.aviso-erro { background: var(--risco-fundo); color: var(--risco);
              border: 1px solid #F3CFCB; }

.cadeado-painel form { margin: 0; }
.cadeado-painel .vazio { max-width: 380px; }

/* ============================================================ filtros */

.filtros {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: var(--e3); margin-bottom: var(--e4);
}
.filtro { display: flex; flex-direction: column; min-width: 150px; flex: 1; }
.filtro .rotulo { margin-bottom: 5px; }
.filtro input, .filtro select {
  font-family: var(--fonte); font-size: 14px; padding: 10px var(--e3);
  border: 1px solid var(--linha); border-radius: var(--r-botao);
  background: var(--fundo-2); color: var(--tinta);
}
.filtro input:focus, .filtro select:focus {
  outline: none; border-color: var(--azul); background: #fff;
}
.filtro-caixa { flex: none; justify-content: flex-end; }
.filtro-caixa label {
  display: flex; align-items: center; gap: var(--e2);
  font-size: 13px; padding-bottom: 10px; cursor: pointer;
}
a.socio-nome { color: var(--azul); }

/* ====================================== achados do bloco bloqueado
   O QUE existe fica visivel; QUAL e cada coisa e o que se paga. */

.achados {
  list-style: none; margin: var(--e4) 0; padding: 0;
  width: 100%; max-width: 460px; text-align: left;
}
.achado {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--e3); padding: 9px var(--e3);
  border-radius: var(--r-selo); margin-bottom: 5px;
  font-size: 13px;
}
.achado-titulo { font-weight: 700; color: var(--tinta); }
.achado-texto  { font-size: 12px; text-align: right; }

.achado-ok            { background: var(--ok-fundo); }
.achado-ok .achado-texto      { color: var(--ok); font-weight: 600; }
.achado-atencao       { background: var(--atencao-fundo); }
.achado-atencao .achado-texto { color: var(--atencao); font-weight: 700; }
.achado-risco         { background: var(--risco-fundo); }
.achado-risco .achado-texto   { color: var(--risco); font-weight: 700; }
.achado-neutro        { background: #F1F2F7; }
.achado-neutro .achado-texto  { color: var(--texto); }
.achado-indisponivel  { background: var(--atencao-fundo); }
.achado-indisponivel .achado-texto { color: var(--atencao); }

/* ============================================================== busca */

.busca-forma { margin-bottom: var(--e4); }
.busca-linha { display: flex; gap: var(--e2); }
.busca-linha input {
  flex: 1; font-family: var(--fonte); font-size: 15px;
  padding: 13px var(--e4);
  border: 1px solid var(--linha); border-radius: var(--r-botao);
  background: var(--fundo-2); color: var(--tinta);
}
.busca-linha input:focus { outline: none; border-color: var(--azul); background: #fff; }
.busca-filtros { margin-top: var(--e3); }
.busca-filtros summary {
  cursor: pointer; font-size: 12px; font-weight: 700; color: var(--azul);
  list-style: none;
}
.busca-filtros summary::before { content: "⚙ "; }
.filtros-embutidos { margin-top: var(--e3); padding: 0; }
.lista-exemplos { list-style: none; margin: var(--e3) 0 0; padding: 0; font-size: 13px; }
.lista-exemplos li { padding: 5px 0; }

/* Campo que precisa de mais largura que a grade padrao - o regime
   tributario carrega uma nota explicativa junto do valor. */
.campo-largo { grid-column: 1 / -1; }
.valor-extra { font-family: var(--mono); font-size: 12px; color: var(--suave); font-weight: 500; }
.valor-nota  { font-size: 12px; color: var(--texto); margin-top: 4px; max-width: 560px; }

/* ====================================== avisos de mudanca (monitoramento) */

.contador-avisos {
  display: inline-block; min-width: 17px; margin-left: 5px;
  background: var(--risco); color: #fff; border-radius: var(--r-pilula);
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  text-align: center; padding: 1px 5px;
}
.avisos-lista { list-style: none; margin: 0; padding: 0; }
.aviso-item { padding: var(--e3) 0; border-bottom: 1px solid var(--linha); }
.aviso-item:last-child { border-bottom: none; }
.aviso-topo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e3); }
.aviso-topo a { font-size: 14px; font-weight: 700; }
.aviso-topo .rotulo { margin: 0; }
.aviso-campo { font-size: 12px; font-weight: 700; color: var(--tinta-2); margin-top: 5px; }
.aviso-troca { font-size: 13px; margin-top: 3px; }
.aviso-troca s { color: var(--suave); }
.aviso-troca strong { color: var(--tinta); }
.aviso-entrega { margin-top: 5px; color: var(--atencao); }
.acao-embutida { display: inline; margin: 0; }

/* ============================================================== score */

.score-topo { display: flex; gap: var(--e5); align-items: center; flex-wrap: wrap; margin-bottom: var(--e4); }
.score-numero {
  flex: none; width: 108px; height: 108px; border-radius: var(--r-cartao);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff;
}
.score-valor { font-size: 38px; font-weight: 800; line-height: 1; }
.score-de { font-family: var(--mono); font-size: 10px; opacity: .8; margin-top: 3px; }
.score-alta    { background: var(--ok); }
.score-boa     { background: #2E7D5B; }
.score-media   { background: var(--atencao); }
.score-baixa   { background: #D4552E; }
.score-critica { background: var(--risco); }
.score-lado { flex: 1; min-width: 220px; }
.score-lado p { font-size: 14px; margin: 4px 0 var(--e3); }
.score-faixa { font-size: 17px; font-weight: 800; text-transform: capitalize; }
.score-texto-alta { color: var(--ok); }  .score-texto-boa { color: #2E7D5B; }
.score-texto-media { color: var(--atencao); }
.score-texto-baixa, .score-texto-critica { color: var(--risco); }

.eixos { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--e4); margin: var(--e5) 0; }
.eixo { border-top: 2px solid var(--linha); padding-top: var(--e3); }
.eixo-fora { opacity: .62; }
.eixo-topo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e2); }
.eixo-titulo { font-size: 13px; font-weight: 700; color: var(--tinta); }
.eixo-valor { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--tinta); }
.eixo-fora .eixo-valor { font-size: 10px; color: var(--atencao); text-transform: uppercase; }
.eixo-barra { height: 4px; background: var(--linha); border-radius: 999px; margin: 6px 0 5px; overflow: hidden; }
.eixo-preenche { height: 100%; background: var(--azul); border-radius: 999px; }
.eixo-item { font-size: 11.5px; color: var(--texto); line-height: 1.5; margin-top: 5px; }
.eixo-pontos { font-family: var(--mono); font-weight: 700; color: var(--risco); margin-right: 4px; }
.eixo-risco { color: var(--risco); }
.eixo-nota { font-size: 11.5px; color: var(--atencao); margin-top: 5px; line-height: 1.5; }
.leitura-risco { background: var(--risco-fundo); border-color: #F3CFCB; }
.moldura-larga { max-width: 620px; }
.area-pix { font-size: 11px; line-height: 1.6; word-break: break-all; }

/* ================================================== landing (pagina inicial)

   A capa deixou de ser so a busca e virou pagina de apresentacao. As secoes
   se alternam entre fundo da pagina e faixa branca de largura total - e a
   alternancia que separa os assuntos sem precisar de linha divisoria.

   Nada aqui usa largura fixa. Toda grade e `auto-fit` com minimo em px: no
   celular vira uma coluna sozinha, sem media query para cada caso.
*/

.faixa {
  background: var(--branco);
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
  padding: var(--e9) 0;
  margin: var(--e8) 0;
}
.secao { padding: var(--e8) 0; }
.secao > .secao-titulo:first-child { margin-top: 0; }
.faixa .secao-titulo { margin-top: 0; }

.texto-grande { font-size: 16px; line-height: 1.65; color: var(--tinta-2); }

.duas-colunas {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: var(--e7); align-items: start;
}

.lista-marcada { list-style: none; margin: var(--e3) 0 0; padding: 0; }
.lista-marcada li {
  position: relative; padding-left: var(--e5); margin-bottom: var(--e3);
  font-size: 13.5px; line-height: 1.6;
}
.lista-marcada li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--azul);
}
.lista-marcada li:last-child { margin-bottom: 0; }

/* --- cartoes de bloco da ficha e de publico --- */

.bloco-item h3, .publico h3 { margin: var(--e2) 0 var(--e2); }
.bloco-item p, .publico p { font-size: 13px; line-height: 1.6; margin: 0; }
.bloco-pago { background: var(--fundo-2); }
.bloco-pago .rotulo { color: var(--azul); }

/* --- como funciona --- */

.passos {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--e4);
}
.passo h3 { margin: var(--e3) 0 var(--e2); }
.passo p { font-size: 13px; line-height: 1.6; margin: 0; }
.passo-num {
  width: 30px; height: 30px; border-radius: var(--r-pilula);
  background: var(--azul-fraco); color: var(--azul);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px;
}

.nota-planos { font-size: 13px; margin-top: var(--e5); color: var(--texto); }

/* --- faixa comercial (base e API) --- */

.faixa-negocio {
  display: grid; grid-template-columns: 1.6fr 1fr;
  gap: var(--e7); align-items: center;
  border-color: var(--azul-linha); background: var(--azul-fraco);
}
.faixa-negocio h2 { margin: var(--e2) 0 var(--e3); }
.faixa-negocio-acao { display: grid; gap: var(--e3); }
.faixa-negocio-acao .botao { width: 100%; justify-content: center; text-align: center; }

.tabela-fontes td { font-size: 13px; vertical-align: top; }

/* --- perguntas frequentes ---
   <details> nativo: abre sem JavaScript e o buscador le a resposta mesmo
   fechada. Um acordeao em JS perderia as duas coisas. */

.faq { display: grid; gap: var(--e2); }
.faq details {
  background: var(--branco); border: 1px solid var(--linha);
  border-radius: var(--r-cartao); padding: var(--e4) var(--e5);
}
.faq summary {
  cursor: pointer; font-weight: 700; color: var(--tinta);
  font-size: 14.5px; list-style: none; position: relative; padding-right: var(--e6);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0; top: -2px;
  font-size: 18px; font-weight: 600; color: var(--azul);
}
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: var(--e3) 0 0; font-size: 13.5px; line-height: 1.65; }

/* --- chamada final --- */

.cta-final { text-align: center; padding: var(--e8) var(--e5); }
.cta-final h2 { margin-bottom: var(--e3); }
.cta-final .capa-sub { margin-bottom: var(--e5); }
.cta-final .capa-busca { margin-bottom: 0; }

/* ==================================================== pagina de contato */

.contato-grade {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: var(--e5); align-items: start; margin-bottom: var(--e9);
}
.contato-forma { display: grid; gap: var(--e4); }
.contato-lado { display: grid; gap: var(--e3); }
.contato-email { font-size: 15px; font-weight: 700; margin: var(--e2) 0; word-break: break-all; }

.campo { display: grid; gap: 5px; }
.campo-par { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 11px var(--e3);
  border: 1px solid var(--linha); border-radius: var(--r-botao);
  font-family: var(--fonte); font-size: 14px; color: var(--tinta);
  background: var(--branco);
}
.campo textarea { resize: vertical; line-height: 1.6; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--azul);
}

/* A isca precisa sumir da tela SEM display:none - robo ignora campo
   escondido assim. Fora da area visivel ele continua "existindo". */
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ========================================================= celular */

@media (max-width: 1023px) {
  .faixa { padding: var(--e8) 0; margin: var(--e7) 0; }
  .secao { padding: var(--e7) 0; }
  .duas-colunas,
  .faixa-negocio,
  .contato-grade { grid-template-columns: 1fr; gap: var(--e5); }
  .campo-par { grid-template-columns: 1fr; }
  .cta-final { padding: var(--e7) var(--e4); }
}

@media (max-width: 620px) {
  /* Busca empilhada: lado a lado, a caixa fica estreita demais para ler o
     que se digitou. O botao vira largura total, que e alvo de toque melhor. */
  .capa-busca { flex-direction: column; }
  .capa-busca .botao { width: 100%; justify-content: center; }
  .contadores { grid-template-columns: 1fr 1fr; gap: var(--e3); }
  /* A chamada do bloco pago e a acao principal da ficha no celular:
     largura inteira, para nao depender de mira. */
  .cadeado-painel { padding: var(--e5) var(--e4); }
  .cadeado-painel .botao-1 { width: 100%; justify-content: center; }
  .contador .destaque { font-size: 22px; }
  .capa { padding: var(--e7) 0 var(--e6); }
  .faq details { padding: var(--e3) var(--e4); }
}

/* ==================================================== aviso de cookies

   Barra presa embaixo, NAO um muro sobre a tela. Quem chega veio conferir um
   CNPJ; tapar o conteudo para cobrar uma decisao sobre medicao e transferir
   ao visitante um problema que e nosso. A medicao ja nasce desligada, entao
   da para esperar a resposta sem estar medindo enquanto espera.

   Nasce com `hidden` no HTML e so o JavaScript tira - quem ja respondeu nunca
   ve a barra piscar. */

.consentimento {
  position: fixed; left: var(--e4); right: var(--e4); bottom: var(--e4);
  z-index: 80; max-width: 760px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--e4);
  background: var(--branco);
  border: 1px solid var(--linha); border-radius: var(--r-cartao);
  padding: var(--e4) var(--e5);
  box-shadow: var(--sombra-flutuante);
}
.consentimento[hidden] { display: none; }
.consentimento-texto { margin: 0; font-size: 13px; line-height: 1.6; flex: 1 1 320px; }
.consentimento-acoes { display: flex; gap: var(--e2); flex: 0 0 auto; }

@media (max-width: 620px) {
  .consentimento { left: var(--e3); right: var(--e3); bottom: var(--e3); padding: var(--e4); }
  .consentimento-acoes { width: 100%; }
  .consentimento-acoes .botao { flex: 1; justify-content: center; }
}

/* ---- QR do Pix ----
   Fundo branco explicito e borda clara: leitor de QR precisa de contraste
   entre o desenho e o entorno, e o cartao ja e branco - sem a moldura, o
   codigo parece flutuar e alguns aplicativos custam a enquadrar.

   `image-rendering: pixelated` porque o QR e um desenho de blocos: deixar o
   navegador suavizar borra a borda dos modulos e atrapalha a leitura quando
   a tela redimensiona a imagem. */
.qr-pix {
  display: flex; justify-content: center;
  margin: var(--e5) 0;
}
.qr-pix img {
  background: #fff; padding: var(--e3);
  border: 1px solid var(--linha); border-radius: var(--r-interno);
  image-rendering: pixelated;
  max-width: 100%; height: auto;
}