/* Foco Licitante: CSS único, sem build. Mobile primeiro.
   Identidade: verde escuro sobre branco, serifa nos títulos, filetes finos, sem sombras.
   Âmbar só para prazo de até 3 dias. */

/* Fontes servidas pelo próprio site (nada de Google em cada visita, por causa da LGPD). Variáveis,
   só o subconjunto latino (cobre o português). Licença OFL: ver fonts/LEIA-ME.txt. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("../fonts/source-serif-4-latin.woff2") format("woff2");
}

:root {
  --fundo: #ffffff;
  --suave: #f4f6f3;
  --tinta: #17211e;
  --cinza: #55615c;
  --filete: #dde2dd;
  --marca: #0f4a3c;
  --marca-escura: #0a3429;
  --ambar: #8a4b00;
  --ambar-fundo: #fdf1d8;
  --erro: #a32121;
  --serifa: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

.miolo { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.miolo.estreito, main.estreito { max-width: 780px; }

a { color: var(--marca); }
h1, h2, h3 { font-family: var(--serifa); font-weight: 600; letter-spacing: -0.01em; color: var(--tinta); }
h1 { font-size: 2rem; line-height: 1.15; margin: 0 0 16px; }
h2 { font-size: 1.5rem; line-height: 1.2; margin: 0 0 8px; }
h3 { font-size: 1.15rem; line-height: 1.3; margin: 0 0 6px; }
p { margin: 0 0 12px; }

/* Cabeçalho */
.topo { background: var(--fundo); border-bottom: 1px solid var(--filete); position: sticky; top: 0; z-index: 10; }
.topo-linha { display: flex; justify-content: space-between; align-items: center; min-height: 64px; gap: 12px; }
.marca { font-family: var(--serifa); font-weight: 600; font-size: 1.2rem; text-decoration: none; color: var(--marca); }
.marca span { font-weight: 500; color: var(--tinta); }
.menu { display: flex; align-items: center; gap: 24px; }
.menu-item { display: none; color: var(--tinta); text-decoration: none; font-size: 15px; font-weight: 500; }
.menu-item:hover { color: var(--marca); }

/* Botões e links */
.botao {
  display: inline-block; background: var(--marca); color: #fff; text-decoration: none;
  padding: 11px 20px; border-radius: 6px; border: 1px solid var(--marca);
  font: 600 16px/1.2 var(--sans); cursor: pointer; min-height: 46px; text-align: center;
}
.botao:hover { background: var(--marca-escura); border-color: var(--marca-escura); }
.botao.pequeno { min-height: 40px; padding: 9px 16px; font-size: 14px; }
.botao.grande { padding: 15px 26px; font-size: 1.02rem; }
.botao.cheio { width: 100%; }
.link-seta { font-weight: 600; text-decoration: none; }
.link-seta::after { content: " →"; }
.link-seta:hover { text-decoration: underline; }
.link { font-size: 15px; }
:focus-visible { outline: 3px solid #e0a800; outline-offset: 2px; }

/* Landing: hero */
.heroi { padding: 40px 0 48px; background: var(--suave); border-bottom: 1px solid var(--filete); }
.heroi-grade { display: grid; gap: 32px; }
.sobretitulo { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--marca); margin-bottom: 14px; }
.subtitulo { font-size: 1.1rem; color: var(--cinza); max-width: 36em; }
.heroi-acoes { display: flex; flex-direction: column; align-items: stretch; gap: 14px; margin: 24px 0 12px; }
.heroi-acoes .link-seta { text-align: center; }
.nota { font-size: 14px; color: var(--cinza); }
.amostra-rotulo { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cinza); margin-bottom: 8px; }

.faixa { border-bottom: 1px solid var(--filete); }
.faixa-grade { display: grid; gap: 4px; padding-top: 16px; padding-bottom: 16px; font-size: 15px; color: var(--cinza); }
.faixa-grade p { margin: 0; }
.faixa-grade strong { color: var(--tinta); font-size: 1.15rem; font-family: var(--serifa); }

/* Seções */
.secao { padding: 48px 0; }
.fundo-suave { background: var(--suave); border-top: 1px solid var(--filete); border-bottom: 1px solid var(--filete); }
.titulo-secao { font-size: 1.6rem; }
.intro { color: var(--cinza); max-width: 40em; margin-bottom: 28px; }
.centro { text-align: center; margin-top: 24px; }

.passos { list-style: none; padding: 0; margin: 0; display: grid; gap: 28px; }
.numero {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border: 1px solid var(--marca); color: var(--marca); border-radius: 50%; font-weight: 600; margin-bottom: 10px;
}
.passos p, .beneficios p { color: var(--cinza); margin: 0; }

.beneficios { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 24px; }
.beneficios li { border-top: 2px solid var(--marca); padding-top: 14px; }

.exemplos { display: grid; gap: 16px; }

details { border-bottom: 1px solid var(--filete); padding: 4px 0; }
summary { cursor: pointer; font-weight: 600; padding: 14px 0; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-size: 1.3rem; line-height: 1; color: var(--marca); }
details[open] summary::after { content: "−"; }
details p { color: var(--cinza); padding-bottom: 12px; margin: 0; }

.cta-final { background: var(--marca); color: #fff; }
.cta-final h2, .cta-final .intro { color: #fff; }
.cta-final .intro { opacity: 0.85; }
.cta-grade { display: grid; gap: 28px; }
.lista-marcas { list-style: none; padding: 0; margin: 0; }
.lista-marcas li { padding-left: 26px; position: relative; margin-bottom: 8px; }
.lista-marcas li::before { content: "✓"; position: absolute; left: 0; font-weight: 700; }

/* Formulário */
.formulario { background: var(--fundo); color: var(--tinta); border-radius: 8px; padding: 8px 20px 20px; }
.formulario label { display: block; font-weight: 600; margin: 14px 0; font-size: 14px; }
input[type=text], input[type=email], input[type=password], input:not([type]), select {
  display: block; width: 100%; margin-top: 5px; padding: 11px 12px; min-height: 46px;
  font: 400 16px var(--sans); border: 1px solid #aeb7b2; border-radius: 6px; background: #fff; color: var(--tinta);
}
.consentimento { display: flex !important; gap: 10px; align-items: flex-start; font-weight: 400 !important; color: var(--cinza); }
.consentimento input { width: 22px; height: 22px; margin-top: 2px; flex: none; accent-color: var(--marca); }
.escolha-ramo { border: 0; padding: 0; margin: 14px 0; min-width: 0; }
.escolha-ramo legend { font-weight: 600; font-size: 14px; padding: 0; margin-bottom: 6px; }
.formulario .opcao { display: flex; gap: 12px; align-items: flex-start; margin: 8px 0; padding: 12px 14px; font-weight: 400; font-size: 15px; border: 1px solid #aeb7b2; border-radius: 8px; background: #fff; cursor: pointer; }
.formulario .opcao:has(input:checked) { border-color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); }
.opcao input { width: 22px; height: 22px; margin-top: 1px; flex: none; accent-color: var(--marca); }
.opcao strong { font-weight: 700; }
.opcao .ajuda { margin-top: 2px; }
.erro { background: #fbe4e4; color: var(--erro); padding: 10px 12px; border-radius: 6px; font-weight: 600; margin-top: 12px; }

/* Cartão de oportunidade (landing, lista e detalhe) */
.cartao { background: #fff; border: 1px solid var(--filete); border-radius: 8px; overflow: hidden; margin: 14px 0; }
.heroi .cartao, .exemplos .cartao { margin: 0; }
.cartao-prazo { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 18px; border-bottom: 1px solid var(--filete); font-size: 14px; color: var(--cinza); }
.cartao-prazo strong { color: var(--tinta); font-size: 15px; }
.cartao-prazo.urgente { background: var(--ambar-fundo); color: var(--ambar); border-color: #f0dcae; }
.cartao-prazo.urgente strong { color: var(--ambar); }
.cartao-corpo { padding: 14px 18px 18px; }
.cartao h3 { font-family: var(--sans); font-size: 1rem; font-weight: 600; letter-spacing: 0; margin: 0 0 2px; text-transform: none; }
.cartao h3 a { color: var(--tinta); text-decoration: none; }
.cartao h3 a:hover { text-decoration: underline; }
.local { color: var(--cinza); font-size: 14px; margin: 0 0 8px; }
.resumo { margin: 0 0 12px; }

/* Nota da IA: número grande, barra e a faixa em palavras (verde = serve em cheio, âmbar = conferir) */
.cartao-cabeca { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.cartao-cabeca > div:first-child { min-width: 0; }
.nota-ia { --cor: var(--marca); flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 3px; width: 126px; padding: 9px 12px 10px; border: 1px solid var(--filete); border-radius: 8px; background: var(--suave); line-height: 1.15; cursor: help; }
.nota-ia.boa { --cor: #2c7a5d; }
.nota-ia.media { --cor: var(--ambar); }
.nota-titulo { font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cinza); }
.nota-num { font: 700 2rem/1 var(--serifa); color: var(--cor); }
.nota-num small { font: 600 12px var(--sans); color: var(--cinza); margin-left: 1px; }
.nota-barra { display: block; height: 5px; border-radius: 3px; background: #dfe4e0; overflow: hidden; }
.nota-barra > span { display: block; height: 100%; background: var(--cor); }
.nota-rotulo { font-size: 13px; font-weight: 600; color: var(--cor); white-space: nowrap; }
.bloco .nota-ia { width: 150px; margin: 8px 0 12px; }
@media (max-width: 479px) {
  /* Celular: a nota vira uma faixa acima do órgão (título e faixa em cima, número e barra embaixo) */
  .cartao-cabeca { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
  .cartao-cabeca .nota-ia { width: auto; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; row-gap: 4px; }
  .cartao-cabeca .nota-titulo { grid-column: 1; grid-row: 1; }
  .cartao-cabeca .nota-rotulo { grid-column: 2; grid-row: 1; text-align: right; }
  .cartao-cabeca .nota-num { grid-column: 1; grid-row: 2; }
  .cartao-cabeca .nota-barra { grid-column: 2; grid-row: 2; }
}

.etiquetas { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.etiquetas li { border: 1px solid var(--filete); border-radius: 4px; padding: 1px 8px; font-size: 13px; color: var(--cinza); }
.etiquetas li.valor { border: 0; padding-left: 0; font-weight: 600; font-size: 15px; color: var(--tinta); }
.etiquetas li.alerta { background: var(--ambar-fundo); border-color: #f0dcae; color: var(--ambar); }
.acoes { display: flex; align-items: center; gap: 18px; margin: 0; flex-wrap: wrap; }
.acoes .botao { min-height: 42px; padding: 9px 16px; font-size: 15px; }

/* Páginas internas */
main.estreito { padding-bottom: 8px; }
main.estreito > h1 { margin-top: 32px; }
.contagem { color: var(--cinza); font-size: 15px; }
/* Filtros: compactos (a tela é da lista, não do formulário). Duas colunas no celular, quatro no desktop. */
#lista + .vantagem-ia { margin-top: 18px; }
.filtros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; background: var(--suave); border: 1px solid var(--filete); border-radius: 8px; padding: 6px 12px; margin: 10px 0 14px; }
.filtros label { display: block; font-weight: 600; margin: 6px 0; font-size: 12px; color: var(--cinza); }
.filtros .largo { grid-column: 1 / -1; }
.filtros select, .filtros input[type=search] { margin-top: 3px; min-height: 34px; padding: 5px 8px; font-size: 14px; color: var(--tinta); }
.filtros select:disabled { background: #eceeec; color: var(--cinza); }
.filtros .caixa { display: flex; gap: 8px; align-items: center; margin: 4px 0 6px; font-size: 13px; font-weight: 500; color: var(--tinta); }
.filtros .caixa input { width: 18px; height: 18px; flex: none; accent-color: var(--marca); }
.filtros .ajuda { font-size: 11.5px; margin-top: 2px; }
.filtros .botao { min-height: 36px; padding: 6px 14px; font-size: 14px; margin: 6px 0; }
.resumo-lista { color: var(--cinza); font-size: 15px; margin: 4px 0 14px; }
.paginacao { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin: 26px 0 10px; }
.paginacao a, .paginacao span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 14px; border: 1px solid var(--filete); border-radius: 6px; color: var(--tinta); text-decoration: none; font-weight: 600; }
.paginacao a:hover { background: var(--suave); }
.paginacao .atual { background: var(--marca); border-color: var(--marca); color: #fff; }
.paginacao .reticencias { border: 0; min-width: 0; padding: 0 2px; }
.vazio { border: 1px dashed #b9c1bc; border-radius: 8px; padding: 22px 18px; color: var(--cinza); }

.faixa-prazo { background: var(--suave); border: 1px solid var(--filete); padding: 10px 14px; border-radius: 6px; }
.faixa-prazo.urgente { background: var(--ambar-fundo); border-color: #f0dcae; color: var(--ambar); }
.bloco { border: 1px solid var(--filete); border-radius: 8px; padding: 6px 18px 14px; margin: 16px 0; }
.dados { display: grid; grid-template-columns: max-content 1fr; gap: 4px 18px; margin: 0; }
.dados dt { color: var(--cinza); }
.dados dd { margin: 0; overflow-wrap: anywhere; }
.objeto { white-space: pre-line; color: var(--cinza); font-size: 15px; }
.barra-fixa { position: sticky; bottom: 0; background: linear-gradient(rgba(255,255,255,0), #fff 35%); padding: 18px 0 14px; margin: 0; }

.tabela { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--filete); white-space: nowrap; }
th { color: var(--cinza); font-weight: 600; }

.heroi.simples { background: none; border: 0; padding: 32px 0; }

/* Rodapé */
.rodape { margin-top: 0; padding: 32px 0 40px; color: var(--cinza); font-size: 14px; border-top: 1px solid var(--filete); }
.rodape-linha { display: grid; gap: 20px; }
.marca-rodape { font-family: var(--serifa); color: var(--tinta); font-size: 1.05rem; }
.rodape p { max-width: 42em; margin-top: 6px; }
.rodape-links { list-style: none; padding: 0; margin: 0; }
.rodape-links li { margin-bottom: 6px; }

@media (min-width: 720px) {
  body { font-size: 18px; }
  h1 { font-size: 2.9rem; }
  .titulo-secao { font-size: 2rem; }
  .menu-item { display: inline; }
  .heroi { padding: 72px 0 80px; }
  .heroi-grade { grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; }
  .heroi-acoes { flex-direction: row; align-items: center; gap: 24px; }
  .faixa-grade { grid-template-columns: repeat(3, 1fr); text-align: center; }
  .secao { padding: 80px 0; }
  .passos { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .beneficios { grid-template-columns: repeat(2, 1fr); gap: 32px 48px; }
  .exemplos { grid-template-columns: repeat(3, 1fr); }
  .exemplos .cartao-corpo { padding: 14px 16px 16px; }
  .cta-grade { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
  .filtros { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .filtros .dobro { grid-column: span 2; }
  .rodape-linha { grid-template-columns: 1fr auto; gap: 64px; }
  main.estreito > h1 { font-size: 2.2rem; }
}

@media (min-width: 720px) {
  .heroi-acoes .botao, .heroi-acoes .link-seta { white-space: nowrap; }
}

/* Alinhamento: cartões de mesma altura com o botão sempre embaixo; hero alinhado pelo topo */
.cartao { display: flex; flex-direction: column; }
.cartao-corpo { display: flex; flex-direction: column; flex: 1; }
.cartao-corpo .etiquetas { margin-bottom: 16px; }
.cartao .acoes { margin-top: auto; }
@media (min-width: 720px) {
  .heroi-grade { align-items: start; }
  .heroi-amostra { padding-top: 6px; }
}

/* Listagem: cabeçalho de página, amostra grátis, teaser bloqueado, plano */
.cabecalho-pagina { background: var(--suave); border-bottom: 1px solid var(--filete); padding: 32px 0; }
.cabecalho-grade { display: grid; gap: 24px; }
.cabecalho-pagina h1 { margin-bottom: 10px; }
.cabecalho-cta { background: #fff; border: 1px solid var(--filete); border-radius: 8px; padding: 18px; align-self: start; }
.conteudo-lista { padding-top: 20px; padding-bottom: 24px; }
.rotulo-amostra { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--marca); margin: 4px 0 0; }
.preco-linha { margin: 0 0 12px; color: var(--cinza); }
.preco-linha strong { font-family: var(--serifa); font-size: 1.6rem; color: var(--tinta); }

.bloqueadas { position: relative; margin-top: 8px; }
.bloqueadas-lista { max-height: 560px; overflow: hidden; user-select: none; pointer-events: none; }
.bloqueadas-lista::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255,255,255,0.1), #fff 92%); }
.borrado { filter: blur(6px); }
.valor-borrado { font-weight: 600; margin: 0 0 14px; }
.botao.desativado { opacity: 0.55; }
.bloqueadas-cta { position: absolute; left: 0; right: 0; top: 56px; display: flex; justify-content: center; padding: 0 12px; z-index: 2; }
.caixa-cta { background: #fff; border: 1px solid var(--filete); border-radius: 10px; padding: 22px 22px 18px; max-width: 440px; width: 100%; box-shadow: 0 10px 30px rgba(15, 40, 33, 0.15); text-align: center; }
.caixa-cta h3 { font-size: 1.3rem; }
.caixa-cta p { color: var(--cinza); font-size: 15px; }
.caixa-cta .nota { margin: 10px 0 0; }
.cabecalho-cta .nota { margin: 10px 0 0; text-align: center; }

.plano { display: grid; gap: 24px; background: #fff; border: 1px solid var(--filete); border-radius: 10px; padding: 24px; }
.plano-nome { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--marca); margin-bottom: 4px; }
.plano-valor { margin: 0 0 4px; }
.plano-valor strong { font-family: var(--serifa); font-size: 2.6rem; line-height: 1; }
.plano-valor span { color: var(--cinza); }
.lista-marcas.escura li::before { color: var(--marca); }
.bloco.chamada { background: var(--suave); }

@media (min-width: 720px) {
  .cabecalho-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
  .cabecalho-cta .preco-linha { margin: 0; }
  .cabecalho-cta .botao { width: auto; flex: none; }
  .cabecalho-cta .nota { flex-basis: 100%; text-align: left; margin: 0; }
  .cabecalho-pagina { padding: 48px 0; }
  .plano { grid-template-columns: 1fr 1.3fr; gap: 40px; align-items: center; padding: 32px; }
}

/* Barras de enchimento (teaser bloqueado: nenhuma palavra no HTML) */
.barra { display: block; height: 0.8em; margin: 0.45em 0; border-radius: 3px; background: #dfe4e0; }
.l30 { width: 30%; } .l40 { width: 40%; } .l60 { width: 60%; } .l70 { width: 70%; } .l80 { width: 80%; } .l100 { width: 100%; }
.isca { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.botao.secundario { background: #fff; color: var(--marca); }
.botao.secundario:hover { background: var(--suave); }

/* Planos (Fase 4B) */
.planos { display: grid; gap: 16px; }
.plano-cartao { background: #fff; border: 1px solid var(--filete); border-radius: 10px; padding: 22px; display: flex; flex-direction: column; position: relative; }
.plano-cartao.destaque { border: 2px solid var(--marca); }
.plano-cartao h3 { font-size: 1.3rem; }
.plano-cartao .lista-marcas { margin: 12px 0 20px; flex: 1; font-size: 15px; }
.selo { position: absolute; top: -12px; left: 20px; background: var(--marca); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; margin: 0; }
.centro { text-align: center; }

/* Busca livre e ramos (Fase 4C) */
.busca { margin: 20px 0 8px; max-width: 36em; }
.busca label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.busca-linha { display: flex; gap: 8px; }
.busca-linha input { margin-top: 0; flex: 1; min-width: 0; }
.busca-linha .botao { flex: none; }
input[type=search] {
  display: block; width: 100%; padding: 11px 12px; min-height: 46px;
  font: 400 16px var(--sans); border: 1px solid #aeb7b2; border-radius: 6px; background: #fff; color: var(--tinta);
}
.objeto-oficial { margin: 0 0 10px; font-size: 15px; }
.opcional { font-weight: 400; color: var(--cinza); }
.ramos { display: grid; gap: 16px; }
.ramo-cartao { background: #fff; border: 1px solid var(--filete); border-radius: 10px; padding: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.ramo-cartao.pronto { border: 2px solid var(--marca); }
.ramo-cartao p { color: var(--cinza); font-size: 15px; flex: 1; }
.selo-ramo { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--marca); margin: 0 0 4px; flex: none !important; }
.selo-ramo.breve { color: var(--cinza); }

/* Avisos */
.aviso-demo { background: var(--ambar-fundo); border: 1px solid #f0dcae; color: var(--ambar); padding: 10px 14px; border-radius: 6px; font-size: 15px; max-width: 46em; }

@media (min-width: 720px) {
  .ramos { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .planos { grid-template-columns: repeat(2, 1fr); gap: 20px; align-items: stretch; max-width: 820px; margin-inline: auto; }
}

[id] { scroll-margin-top: 80px; }


/* Faixa de números */
.faixa { background: #fff; }
.faixa-grade { grid-template-columns: repeat(3, 1fr); gap: 12px; padding-top: 22px; padding-bottom: 22px; text-align: center; }
.faixa-grade p { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 13px; line-height: 1.3; }
.faixa-grade strong { font-size: 2rem; line-height: 1.1; color: var(--marca); }

/* Como funciona: passos em cartões */
.passos li { background: var(--suave); border: 1px solid var(--filete); border-radius: 10px; padding: 20px; }
.numero { background: var(--marca); color: #fff; width: 38px; height: 38px; font-size: 1.1rem; }
.passos h3 { font-size: 1.2rem; }

/* Cartão anotado: números ligam cada parte do alerta à legenda */
.anotado { display: grid; gap: 28px; align-items: start; margin-top: 8px; }
.pino {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 22px; height: 22px; margin-right: 8px; border-radius: 50%;
  background: var(--marca); color: #fff; font: 600 12px/1 var(--sans); vertical-align: 1px;
}
.cartao-prazo .pino { margin-right: 10px; }
.cartao-prazo > div, .cartao-prazo > .pino { flex: none; }
.legenda { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.legenda li { display: grid; grid-template-columns: 30px 1fr; gap: 0 4px; }
.legenda .pino { margin: 2px 0 0; }
.legenda h3 { font-size: 1.05rem; margin: 0 0 2px; }
.legenda p { margin: 0; color: var(--cinza); font-size: 15px; }

/* Pedir um ramo */
.pedir-ramo { background: var(--marca); color: #fff; }
.pedir-ramo h2, .pedir-ramo h3 { color: #fff; }
.pedir-ramo .intro { color: #fff; opacity: 0.9; }
.pedir-ramo .garantia { background: #fff; color: var(--tinta); border-radius: 10px; padding: 18px 20px; margin-top: 28px; display: grid; gap: 12px; align-items: center; }
.pedir-ramo .garantia p { margin: 0; }
.pedir-ramo .garantia strong { font-family: var(--serifa); font-size: 1.25rem; color: var(--marca); }
.chamada-ramo { background: var(--ambar-fundo); border: 1px solid #f0dcae; border-radius: 10px; padding: 18px 20px; margin: 24px 0 8px; display: grid; gap: 12px; align-items: center; }
.chamada-ramo h3 { font-family: var(--sans); font-size: 1.05rem; margin: 0 0 4px; color: var(--tinta); }
.chamada-ramo p { margin: 0; color: var(--tinta); font-size: 15px; }
.proximos { background: var(--suave); border: 1px solid var(--filete); border-radius: 10px; padding: 16px 20px; margin: 20px 0; }
.proximos h3 { font-family: var(--sans); font-size: 1.05rem; }
.proximos ol { margin: 0; padding-left: 20px; color: var(--cinza); font-size: 15px; }
.proximos li { margin-bottom: 4px; }

@media (min-width: 720px) {
  .faixa-grade { gap: 24px; }
  .faixa-grade p { font-size: 15px; }
  .faixa-grade strong { font-size: 2.6rem; }
  .anotado { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
  .pedir-ramo .garantia, .chamada-ramo { grid-template-columns: 1fr auto; gap: 24px; }
}
@media (max-width: 1023px) {
  .menu { gap: 14px; }
  .menu-item { font-size: 14px; }
}
.etiquetas li.sem-marca { border: 0; padding: 0; }
.exemplos-busca { font-size: 14px; color: var(--cinza); margin: 8px 0 0; }
.formulario .ajuda { display: block; font-weight: 400; font-size: 13px; color: var(--cinza); margin-top: 4px; }

/* Processo em etapas e selo de atualização */
.etapas { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 0; }
.etapas li { display: grid; grid-template-columns: 38px 1fr; gap: 0 16px; position: relative; padding-bottom: 22px; }
.etapas li:not(:last-child)::before { content: ""; position: absolute; left: 18px; top: 40px; bottom: 2px; width: 2px; background: var(--filete); }
.etapas .numero { margin: 0; }
.etapas h3 { font-size: 1.15rem; margin: 6px 0 4px; }
.etapas p { margin: 0; color: var(--cinza); }
.quando { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 10px; border-radius: 999px; background: #e2efe9; color: var(--marca); font: 600 12px/1.4 var(--sans); letter-spacing: 0.02em; }
.selo-atualizacao { display: block; padding: 8px 14px; border: 1px solid var(--filete); border-radius: 14px; background: #fff; font-size: 14px; color: var(--cinza); margin: 4px 0 14px; }
.selo-atualizacao strong { color: var(--tinta); }
.selo-atualizacao .ponto { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; background: #2e9e6b; vertical-align: 1px; }
.selo-atualizacao.atrasada { background: var(--ambar-fundo); border-color: #f0dcae; color: var(--ambar); }
.selo-atualizacao.atrasada .ponto { background: var(--ambar); }
@media (min-width: 720px) {
  .etapas { max-width: 760px; }
}
.situacao { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.3); border-radius: 10px; padding: 16px 20px; margin: -8px 0 28px; max-width: 46em; }
.situacao h3 { font-family: var(--sans); font-size: 0.95rem; letter-spacing: 0.05em; text-transform: uppercase; margin: 0 0 6px; }
.situacao p { margin: 0; color: #fff; }

/* Menu: Oportunidades em destaque (aparece também no celular) e filtro de ramo */
.menu-item.destaque { display: inline; font-weight: 700; color: var(--marca); padding: 6px 12px; border: 1.5px solid var(--marca); border-radius: 999px; }
.menu-item.destaque:hover { background: var(--marca); color: #fff; }
.ramos-filtro { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.ramos-filtro-rotulo { font-size: 14px; font-weight: 600; color: var(--cinza); }
.ramos-filtro .aba small { opacity: 0.8; margin-left: 4px; }
.aba.breve { color: var(--cinza); border-style: dashed; cursor: default; }
@media (max-width: 479px) {
  .topo-linha { gap: 8px; }
  .menu { gap: 8px; }
}

/* Compra do PNCP x Triado por IA */
.selo-tipo { display: inline-block; margin: 0 0 8px; padding: 2px 10px; border: 1px solid var(--filete); border-radius: 999px; background: #fff; color: var(--cinza); font: 600 12px/1.5 var(--sans); letter-spacing: 0.03em; text-transform: uppercase; }
.selo-tipo.ia { background: var(--marca); border-color: var(--marca); color: #fff; }
.explica { font-size: 15px; color: var(--cinza); background: var(--suave); border-left: 3px solid var(--marca); padding: 10px 14px; border-radius: 0 6px 6px 0; max-width: 46em; }
.comparar { display: grid; gap: 18px; margin-top: 8px; }
.comparar-cartao { background: #fff; border: 1px solid var(--filete); border-radius: 10px; padding: 24px; display: flex; flex-direction: column; align-items: flex-start; }
.comparar-cartao.destaque { border: 2px solid var(--marca); }
.comparar-cartao h3 { font-size: 1.4rem; }
.comparar-quem { color: var(--cinza); font-size: 14px; margin-bottom: 12px; }
.comparar-cartao .lista-marcas { font-size: 15px; margin-bottom: 10px; }
.lista-limites { list-style: none; padding: 0; margin: 0 0 12px; font-size: 14px; color: var(--cinza); }
.lista-limites li { padding-left: 26px; position: relative; margin-bottom: 6px; }
.lista-limites li::before { content: "!"; position: absolute; left: 4px; font-weight: 700; color: var(--ambar); }
.comparar-serve { font-size: 15px; background: var(--suave); padding: 10px 14px; border-radius: 6px; margin: 4px 0 18px; flex: 1; }
@media (min-width: 720px) {
  .comparar { grid-template-columns: 1fr 1fr; gap: 24px; }
}
.selo-tipo { align-self: flex-start; }
.comparar-serve { flex: none; }
.comparar-cartao .botao { margin-top: auto; }

/* Conta: login, painel do cliente e edição de leads no admin */
.aviso-ok { background: #e3f3ea; color: #0a3429; border: 1px solid #b9dcc8; padding: 10px 14px; border-radius: 6px; font-weight: 600; max-width: 46em; }
.painel-grade { display: grid; gap: 16px; margin: 20px 0 8px; }
.painel-bloco { background: var(--suave); border: 1px solid var(--filete); border-radius: 8px; padding: 6px 20px 18px; }
.painel-bloco h2 { margin-top: 14px; }
.painel-fim { display: flex; flex-direction: column; gap: 18px; margin: 32px 0 16px; padding-top: 20px; border-top: 1px solid var(--filete); align-items: flex-start; }
.zona-perigo { width: 100%; max-width: 46em; }
.botao.perigo { background: #fff; color: var(--erro); border-color: var(--erro); }
.botao.perigo:hover { background: #fbe4e4; border-color: var(--erro); }
.linha-admin { display: flex; gap: 6px; align-items: center; }
.linha-admin select, .linha-admin input { margin: 0; min-height: 40px; padding: 6px 8px; width: auto; font-size: 14px; }
.ajuda { display: block; font-weight: 400; font-size: 13px; color: var(--cinza); margin-top: 4px; }
@media (min-width: 760px) {
  .painel-grade { grid-template-columns: 1fr 1fr; }
}
.painel-grade + h2 { margin-top: 32px; }

/* Menu do topo: nunca quebra linha; itens secundários só em tela larga e "Entrar" sempre à vista */
.marca, .menu-item, .menu .botao { white-space: nowrap; }
.menu-item.extra { display: none; }
.menu-item.entrar { display: inline; }
@media (min-width: 1400px) {
  .menu-item.extra { display: inline; }
}
@media (max-width: 479px) {
  .marca { font-size: 1.05rem; }
  .menu .botao.pequeno { display: none; }
}
@media (max-width: 479px) {
  .topo-linha { gap: 6px; }
  .marca { font-size: 1rem; }
  .menu { gap: 10px; }
  .menu-item { font-size: 13px; }
  .menu-item.destaque { padding: 5px 10px; }
}
@media (max-width: 359px) { .marca span { display: none; } }

.marca { flex: none; margin-right: 40px; }
.menu { margin-left: auto; }
@media (max-width: 719px) { .marca { margin-right: 0; } }

.log-sync { background: var(--suave); border: 1px solid var(--filete); border-radius: 6px; padding: 12px; font-size: 13px; line-height: 1.45; overflow-x: auto; max-height: 360px; white-space: pre-wrap; }

/* Topo em três grupos: marca | navegação | ações. Só "Oportunidades" é botão cheio. */
.topo-linha { gap: 0; }
.menu { margin-left: 0; margin-right: auto; gap: 28px; }
.menu-item { padding: 6px 0; border-bottom: 2px solid transparent; }
.menu-item:hover { color: var(--marca); border-bottom-color: var(--marca); }
.topo-acoes { display: flex; align-items: center; gap: 16px; flex: none; }
.topo-acoes .botao { white-space: nowrap; }
@media (max-width: 719px) {
  .menu { display: none; }
  .topo-linha { justify-content: space-between; }
  .topo-acoes { gap: 12px; }
}
@media (max-width: 599px) {
  .topo-acoes .botao.secundario { display: none; }
}
@media (max-width: 479px) {
  .topo-acoes .botao.pequeno { padding: 8px 12px; font-size: 13px; min-height: 38px; }
  .topo-acoes .menu-item { font-size: 13px; }
}
.topo-acoes { margin-left: 32px; }
@media (max-width: 719px) { .topo-acoes { margin-left: 0; } }

/* Compras: a aba da IA é sempre o destaque; a busca geral é a porta gratuita */
.menu-item.medio { display: none; }
@media (min-width: 1060px) { .menu-item.medio { display: inline; } }
.so-largo { display: none; }
@media (min-width: 760px) { .so-largo { display: inline; } .so-curto { display: none; } }
.abas-compras { display: grid; gap: 10px; margin: 12px 0 14px; }
.aba-compra { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; border: 1.5px solid var(--filete); border-radius: 10px; background: #fff; color: var(--tinta); text-decoration: none; }
.aba-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.aba-compra strong { font-size: 1rem; line-height: 1.3; }
.aba-desc { font-size: 13px; color: var(--cinza); }
a.aba-compra.geral:hover { border-color: var(--marca); }
.aba-compra.geral.ativa { border-color: var(--marca); background: var(--suave); box-shadow: 0 0 0 3px #cfe3db; }
.aba-compra.ia { background: linear-gradient(135deg, #0a3429, #14634f); border-color: #0a3429; box-shadow: 0 3px 10px rgba(15, 74, 60, 0.25); }
.aba-compra.ia strong { color: #fff; }
.aba-compra.ia .aba-desc { color: #dcebe5; }
.aba-compra.ia:hover { box-shadow: 0 5px 14px rgba(15, 74, 60, 0.35); }
.aba-compra.ia.ativa { box-shadow: 0 0 0 3px #cfe3db, 0 3px 10px rgba(15, 74, 60, 0.25); }
.aba-selo { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 1px 8px; border-radius: 999px; background: #ffd666; color: #5a3b00; white-space: nowrap; }
.aba-num { margin-left: auto; font-size: 12px; font-weight: 600; color: #0a3429; background: #fff; padding: 1px 9px; border-radius: 999px; white-space: nowrap; }
.aba-compra.breve { border-style: dashed; background: transparent; box-shadow: none; }
.aba-compra.breve strong { color: var(--cinza); }
@media (max-width: 599px) { .aba-compra.breve { display: none; } }
@media (min-width: 720px) { .abas-compras { grid-template-columns: 1.6fr 1fr; } }
/* Faixa fina do convite à seleção por IA (topo da busca): texto, um botão e um link, numa linha */
.vantagem-ia { display: grid; gap: 10px; margin: 2px 0 14px; padding: 12px 16px; border-radius: 10px; background: linear-gradient(135deg, #0a3429, #14634f); color: #eaf3ef; }
.vantagem-ia p { margin: 0; font-size: 15px; line-height: 1.45; }
.vantagem-ia strong { color: #fff; }
.vantagem-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.vantagem-acoes .botao { min-height: 38px; padding: 7px 14px; font-size: 14px; background: #ffd666; border-color: #ffd666; color: #3d2900; text-align: center; }
.vantagem-acoes .botao:hover { background: #ffe08f; border-color: #ffe08f; }
.vantagem-acoes .link { color: #fff; font-size: 14px; }
@media (min-width: 720px) { .vantagem-ia { grid-template-columns: 1fr auto; align-items: center; gap: 20px; } .vantagem-acoes { flex-wrap: nowrap; white-space: nowrap; } }
.plano-micro { margin: 8px 0 0; }
.heroi-grade > * { min-width: 0; }

@media (max-width: 1059px) { .topo-acoes .botao.secundario { display: none; } }

/* Páginas de texto (termos, privacidade, assinar) */
.texto-pagina { max-width: 46em; padding: 8px 0 24px; }
.texto-pagina h1 { margin-bottom: 4px; }
.texto-pagina h2 { font-size: 1.25rem; margin: 28px 0 8px; }
.texto-pagina ul, .texto-pagina ol { margin: 0 0 12px; padding-left: 1.3em; }
.texto-pagina li { margin-bottom: 6px; }
.rodape-contato { margin-top: 10px; }

/* Blog: lista, artigo e convite para o cadastro */
.filtro-blog { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.filtro-categoria { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1.5px solid var(--filete); border-radius: 999px; background: #fff; color: var(--tinta); text-decoration: none; font-weight: 600; font-size: 15px; }
.filtro-categoria:hover { background: var(--suave); }
.filtro-categoria.ativa { background: var(--marca); border-color: var(--marca); color: #fff; }
.blog-titulo { max-width: 22em; }
.conteudo-blog { padding-top: 28px; padding-bottom: 40px; }
.blog-grade { display: grid; gap: 18px; }
.post-cartao { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--filete); border-radius: 10px; padding: 20px; }
.post-cartao h2 { font-size: 1.2rem; line-height: 1.3; margin: 0 0 8px; }
.post-cartao h2 a { color: var(--tinta); text-decoration: none; }
.post-cartao h2 a:hover { color: var(--marca); text-decoration: underline; }
.post-resumo { color: var(--cinza); font-size: 15px; margin: 0 0 14px; }
.post-meta { font-size: 13px; color: var(--cinza); margin: auto 0 0; }
.conteudo-blog .paginacao { margin-top: 30px; }
@media (min-width: 720px) { .blog-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .blog-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.conteudo-artigo { padding-top: 22px; padding-bottom: 40px; }
.migalhas { font-size: 14px; color: var(--cinza); margin: 0 0 14px; }
.migalhas a { color: var(--cinza); }
.artigo h1 { margin: 4px 0 10px; }
.artigo .post-meta { margin: 0 0 22px; }
.artigo-corpo { font-size: 1.04rem; line-height: 1.7; }
.artigo-corpo h2 { font-size: 1.4rem; line-height: 1.25; margin: 34px 0 10px; }
.artigo-corpo h3 { font-size: 1.15rem; margin: 22px 0 8px; }
.artigo-corpo p { margin: 0 0 16px; }
.artigo-corpo ul, .artigo-corpo ol { margin: 0 0 18px; padding-left: 1.3em; }
.artigo-corpo li { margin-bottom: 8px; }
.aviso-encerrada, .aviso-rascunho { background: var(--ambar-fundo); border: 1px solid #f0dcae; color: var(--ambar); padding: 10px 14px; border-radius: 6px; font-size: 15px; }
.aviso-rascunho code { font-size: 14px; }

.cta-blog { margin: 40px 0 8px; padding: 28px 24px; border-radius: 12px; background: linear-gradient(135deg, #0a3429, #14634f); color: #fff; box-shadow: 0 6px 18px rgba(15, 74, 60, 0.28); }
.cta-blog .sobretitulo, .cta-blog h2, .cta-blog p, .cta-blog .nota { color: #fff; }
.cta-blog .sobretitulo { opacity: 0.8; margin-bottom: 8px; }
.cta-blog h2 { font-size: 1.5rem; margin-bottom: 10px; }
.cta-blog .nota { opacity: 0.85; margin: 12px 0 0; }
.cta-blog .botao { background: #fff; color: var(--marca); border-color: #fff; }
.cta-blog .botao:hover { background: var(--suave); border-color: var(--suave); }
.cta-blog .link-seta { color: #fff; }
.cta-blog-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 18px; }
.mais-artigos { margin-top: 44px; }
.mais-artigos h2 { margin-bottom: 14px; }
.mais-artigos .blog-grade { grid-template-columns: minmax(0, 1fr); }