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


/* 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[type=tel], 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; }
/* Formulário compacto (cadastro e painel): campos em 2 colunas, entradas baixas, ramo em linhas pequenas. */
.formulario.compacto { padding: 2px 18px 18px; }
.formulario.compacto label { margin: 10px 0; font-size: 13px; }
.formulario.compacto input[type=text], .formulario.compacto input[type=email], .formulario.compacto input[type=password], .formulario.compacto input[type=tel], .formulario.compacto input:not([type]), .formulario.compacto select { min-height: 38px; padding: 6px 10px; font-size: 16px; margin-top: 3px; }
.grade-2 { display: grid; gap: 0 12px; }
/* Celular: campos com folga (48 px de altura, 14 px de espaço entre um campo e o seguinte). A fonte dos campos
   fica em 16 px (menos que isso o iOS dá zoom ao tocar); o respiro vem do espaçamento, não de fonte menor. */
@media (max-width: 719px) {
  .formulario.compacto { padding: 0 14px 14px; }
  .formulario .grade-2 > label, .formulario > label:not(.consentimento) { margin: 14px 0 0; font-size: 13px; font-weight: 600; line-height: 1.15; }
  .formulario .grade-2 > label:first-child, .formulario > label:not(.consentimento):first-child { margin-top: 0; }
  .formulario label > :is(input[type=text], input[type=email], input[type=password], input[type=tel], input:not([type]), select),
  .formulario.compacto label > :is(input[type=text], input[type=email], input[type=password], input[type=tel], input:not([type]), select) { min-height: 48px; padding: 11px 14px; margin-top: 6px; }
  .formulario label > select, .formulario.compacto label > select { padding-right: 36px; }
  .formulario ::placeholder { color: #8a948f; opacity: 1; }
}
@media (min-width: 480px) { .grade-2 { grid-template-columns: 1fr 1fr; } .grade-2 .inteira { grid-column: 1 / -1; } }
.compacto .consentimento { font-size: 12.5px; margin: 8px 0; gap: 8px; }
.compacto .consentimento input { width: 18px; height: 18px; }
.compacto .escolha-ramo { margin: 12px 0 6px; }
.compacto .botao:not(.grande) { margin-top: 6px; }
.compacto .escolha-ramo legend { font-size: 13px; margin-bottom: 2px; }
/* Bloco recolhido do cadastro (home.html): tudo o que não é obrigatório. */
details.mais-opcoes { margin: 12px 0 6px; padding: 0 14px; border: 1px solid #aeb7b2; border-radius: 8px; background: #fff; }
details.mais-opcoes[open] { padding-bottom: 8px; }
details.mais-opcoes > summary { align-items: center; min-height: 44px; padding: 8px 0; font-size: 14px; }
details.mais-opcoes > summary .ajuda-linha { display: block; margin: 2px 0 0; font-weight: 400; }
details.mais-opcoes[open] > summary .ajuda-linha { display: none; }
details.mais-opcoes p { padding-bottom: 0; }
details.mais-opcoes .grade-2 > label { grid-column: 1 / -1; }
.formulario label.opcao-linha, .formulario.compacto label.opcao-linha { display: flex; gap: 8px; align-items: baseline; margin: 6px 0 0; font-weight: 400; font-size: 15px; cursor: pointer; }
.opcao-linha input { width: 18px; height: 18px; flex: none; margin: 0; align-self: center; accent-color: var(--marca); }
.opcao-linha strong { font-weight: 700; }
.ajuda-linha { font-size: 12.5px; color: var(--cinza); margin-left: 4px; }
.ramo-extra { display: none; margin: 0 0 4px 26px; }
.ramo-opcao:has(.opcao-linha input:checked) .ramo-extra { display: block; }
@supports not selector(:has(*)) { .ramo-extra { display: block; } }
.ramo-extra > label { margin: 6px 0 4px; }
details.linhas { margin-top: 0; padding: 0; border: 0; font-size: 14px; }
details.linhas summary { display: block; cursor: pointer; color: var(--tinta); font-weight: 400; padding: 4px 0; }
details.linhas summary .rotulo-linhas { font-weight: 600; }
details.linhas summary::after { content: none; }
details.linhas summary strong { color: var(--marca); font-weight: 700; font-size: 15px; }
details.linhas summary .escolher { display: inline-block; margin-left: 8px; padding: 2px 10px; border: 1.5px solid var(--marca); border-radius: 999px; color: var(--marca); font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.4; }
details.linhas summary .escolher::after { content: " ▾"; }
details.linhas[open] summary .escolher::after { content: " ▴"; }
details.linhas summary:hover .escolher, details.linhas summary:focus-visible .escolher { background: var(--marca); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.formulario label.chip, .formulario.compacto label.chip { display: inline-block; margin: 0; font-size: 12.5px; font-weight: 500; position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-block; padding: 3px 10px; border: 1px solid #aeb7b2; border-radius: 999px; background: #fff; color: var(--cinza); cursor: pointer; line-height: 1.4; }
.chip input:checked + span { background: var(--suave); border-color: var(--marca); color: var(--marca); font-weight: 600; }
.chip input:checked + span::before { content: "✓ "; }
.chip input:focus-visible + span { outline: 2px solid var(--marca); outline-offset: 2px; }
.lista-espera { margin-top: 16px; }
.lista-espera .ajuda-linha { display: block; margin: 0 0 4px; }
.formulario label.outros-ramos, .formulario.compacto label.outros-ramos { display: block; margin: 6px 0 0; font-size: 13px; }
.outros-ramos input { margin-top: 3px; }
.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; }
/* A mesma nota em uma linha ("Nota 92 · Serve em cheio"), só no celular e nos cartões que a trazem (`.com-nota-linha`): o bloco
   grande custava ~80 px por cartão. A home anotada (`anotar`) não tem a linha: os pinos explicam o bloco. */
.nota-linha { --cor: var(--marca); display: none; margin: 3px 0 0; padding: 1px 8px; border: 1px solid var(--filete); border-radius: 4px; background: var(--suave); font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--cor); cursor: help; }
.nota-linha.boa { --cor: #2c7a5d; }
.nota-linha.media { --cor: var(--ambar); }
.nota-linha strong { font-size: 14px; }
@media (max-width: 719px) {
  .com-nota-linha .nota-linha { display: inline-block; }
  .com-nota-linha .cartao-cabeca > .nota-ia { display: none; }
}
@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.linha-produto { background: var(--suave); border-color: transparent; color: var(--marca); }
.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; }

/* Lista de compras: cartões mais compactos que os da home (resumo em 15px, nota menor, menos ar). */
#lista .cartao { margin: 10px 0; }
#lista .cartao-prazo { padding: 6px 14px; font-size: 13px; }
#lista .cartao-prazo strong { font-size: 14px; }
#lista .cartao-corpo { padding: 11px 14px 13px; }
#lista .selo-tipo { margin: 0 0 5px; padding: 1px 9px; font-size: 11px; }
#lista .cartao h3 { font-size: 0.95rem; }
#lista .local { font-size: 13px; margin: 0 0 6px; }
#lista .resumo { font-size: 15px; line-height: 1.5; margin: 0 0 9px; }
#lista .etiquetas { margin-bottom: 11px; gap: 5px; }
#lista .etiquetas li { font-size: 12px; padding: 0 7px; }
#lista .etiquetas li.valor { font-size: 14px; padding-left: 0; }
#lista .acoes { gap: 6px 16px; }
#lista .acoes .botao { min-height: 36px; padding: 6px 14px; font-size: 14px; }
#lista .acoes .link { font-size: 14px; }
@media (min-width: 480px) {
  #lista .nota-ia { width: 104px; padding: 6px 10px 7px; gap: 2px; }
  #lista .nota-num { font-size: 1.6rem; }
  #lista .nota-titulo { font-size: 9.5px; }
  #lista .nota-rotulo { font-size: 12px; }
}

/* Barra do topo do cartão de quem tem acesso: o prazo à esquerda e os botões "Já vi" e "Incluir no
   PDF" à direita (a caixa de verdade fica invisível por cima do botão, então o clique e o teclado
   funcionam como numa caixa comum). */
.cartao-prazo.com-marcas { align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.prazo-info { display: flex; align-items: baseline; gap: 10px; }
.marcas { display: flex; flex-wrap: wrap; gap: 8px; }
.marca-card { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 3px 12px 3px 8px; border: 1px solid #c3cbc5; border-radius: 999px; background: #fff; color: var(--cinza); font: 600 13px/1.2 var(--sans); cursor: pointer; user-select: none; }
.marca-card:hover { border-color: var(--marca); color: var(--marca); }
.marca-card input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.marca-card::before { content: ""; flex: none; width: 15px; height: 15px; border: 1.7px solid currentColor; border-radius: 4px; background: #fff center / 11px no-repeat; }
.marca-card:has(input:checked) { background: var(--marca); border-color: var(--marca); color: #fff; }
.marca-vi:has(input:checked) { background: #5d6b65; border-color: #5d6b65; }
.marca-card:has(input:checked)::before { border-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.3l2.4 2.4 4.8-5.2' fill='none' stroke='%230f4a3c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.marca-card:has(input:focus-visible) { outline: 3px solid #e0a800; outline-offset: 2px; }
.cartao:has(.js-visto:checked) .cartao-corpo, .cartao:has(.js-visto:checked) .prazo-info { opacity: 0.55; }
.cartao:has(.js-selecionar:checked) { border-color: var(--marca); box-shadow: 0 0 0 1px var(--marca); }
.link-botao { background: none; border: 0; padding: 0; margin-left: 6px; font: inherit; font-size: 14px; color: var(--marca); text-decoration: underline; cursor: pointer; }
/* Barra fixa embaixo com o que foi escolhido para o PDF; aparece só com pelo menos uma compra. */
.barra-pdf { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 16px; background: #fff; border-top: 2px solid var(--marca); }
.barra-pdf[hidden], .aviso-barra[hidden] { display: none; }
.barra-pdf p { margin: 0; font-size: 15px; }
.barra-pdf .barra-acoes { display: flex; align-items: center; gap: 16px; }
.barra-pdf .botao { min-height: 40px; padding: 8px 18px; font-size: 15px; }
.aviso-barra { color: var(--ambar); font-size: 13px; margin-left: 6px; }
body.com-barra-pdf { padding-bottom: 72px; }

/* 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; }
.filtros label[hidden] { display: none; }
/* Celular: os filtros sempre à vista, mas densos (a tela é da lista). Palavra, ramo e linha têm o rótulo ao lado do
   campo (uma linha cada); os pares de campos mantêm o rótulo em cima. Fonte de 16 px nos campos: abaixo disso o
   iPhone dá zoom ao tocar. */
@media (max-width: 719px) {
  .filtros { gap: 6px 8px; padding: 10px; margin: 8px 0 12px; }
  .filtros label { margin: 0; line-height: 1.2; }
  .filtros select, .filtros input[type=search] { margin-top: 2px; min-height: 42px; padding: 8px 10px; font-size: 16px; }
  .filtros select { padding-right: 34px; }
  .filtros label.largo > select { padding-right: 28px; }
  .filtros label.largo:not(.caixa) { display: grid; grid-template-columns: 6.4rem minmax(0, 1fr); column-gap: 8px; align-items: center; }
  .filtros label.largo:not(.caixa) > select, .filtros label.largo:not(.caixa) > input { margin-top: 0; }
  .filtros label.largo:not(.caixa) > .ajuda { grid-column: 1 / -1; margin-top: 2px; }
  .filtros .ajuda { font-size: 12px; line-height: 1.3; }
  .filtros .caixa { margin: 0; font-size: 12px; line-height: 1.25; gap: 8px; }
  .filtros .caixa input { width: 20px; height: 20px; }
}
.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: minmax(0, max-content) minmax(0, 1fr); gap: 4px 18px; margin: 0; }
.dados dt { color: var(--cinza); overflow-wrap: anywhere; }
@media (max-width: 479px) { .dados { grid-template-columns: minmax(0, 1fr); gap: 0; } .dados dd { margin-bottom: 8px; } }
.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; }
  .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); }

.borrado { filter: blur(6px); }
.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; }
/* Aviso discreto no cartão de quem não tem o plano pago: nota e resumo da IA ficam no Radar. */
.trava-ia { margin: 0 0 10px; font-size: 14px; color: var(--cinza); }
.trava-ia a { color: var(--marca); font-weight: 600; }
/* Convite da busca livre para quem ainda não tem conta (uma linha de texto e dois atalhos). */
.convite-conta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--filete); border-radius: 8px; background: var(--suave); }
.convite-conta p { margin: 0; font-size: 15px; flex: 1 1 280px; }
.convite-conta .convite-acoes { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; }

/* Home no celular: CTA do cadastro preso no rodapé enquanto a página passa. */
.barra-cta-home .botao { width: 100%; }
.barra-cta-home p { margin: 6px 0 0; font-size: 13px; color: var(--cinza); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-cta-home.escondida { opacity: 0; visibility: hidden; pointer-events: none; }
@media (min-width: 720px) { .barra-cta-home { display: none; } }
/* Home no celular: mesma barra, mas fixa na tela; só aparece depois que o botão do topo sai e some no
   formulário e no rodapé (ver o script da home.html). */
.barra-cta-home { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 10px 20px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--filete); box-shadow: 0 -6px 16px rgba(15, 40, 33, 0.1); text-align: center; transition: opacity 0.15s, visibility 0.15s; }

.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; }

/* Caixinhas do campo da busca (`caixinhas.js`): cada produto digitado vira uma caixinha dentro do campo. */
.busca-linha .caixinhas { margin-top: 0; }
.caixinhas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex: 1; min-width: 0; padding: 4px 6px; min-height: 46px; border: 1px solid #aeb7b2; border-radius: 6px; background: #fff; cursor: text; }
.caixinhas:focus-within { outline: 3px solid #e0a800; outline-offset: 2px; }
.caixinhas input[type=search] { display: block; width: auto; flex: 1 1 7em; min-width: 6em; min-height: 36px; margin: 0; padding: 6px 4px; border: 0; outline: 0; background: transparent; border-radius: 0; }
.caixinha { display: inline-flex; align-items: center; max-width: 100%; padding: 2px 2px 2px 10px; background: var(--suave); border: 1px solid var(--marca); color: var(--marca); border-radius: 999px; font-weight: 600; font-size: 14.5px; }
.caixinha-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.caixinha-tirar { flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; font: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
.caixinha-tirar:hover { background: rgba(15, 74, 60, 0.12); }
.caixinhas-dica { margin: 6px 0 0; color: var(--cinza); font-size: 13.5px; }
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 */

/* 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; }
.pedir-ramo-busca { padding: 10px 14px; margin: 10px 0 6px; gap: 8px; }
.pedir-ramo-busca h3 { font-size: 0.98rem; margin: 0 0 2px; }
.pedir-ramo-busca p { font-size: 14px; }
.pedir-ramo-busca .botao { min-height: 38px; padding: 7px 14px; font-size: 14px; }
.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) {
  .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; }
/* Quem recebe mais de um ramo troca de ramo na lista por estas abas. */
.ramos-do-lead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 12px; }
.ramos-do-lead-rotulo { font-size: 13px; font-weight: 600; color: var(--cinza); }
.ramo-aba { padding: 5px 12px; border: 1.5px solid var(--filete); border-radius: 999px; background: #fff; color: var(--tinta); font-size: 14px; text-decoration: none; }
a.ramo-aba:hover { border-color: var(--marca); }
.ramo-aba.ativa { border-color: var(--marca); background: var(--suave); font-weight: 700; }
@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-cartao .lista-marcas { font-size: 15px; margin-bottom: 14px; }
@media (min-width: 720px) {
  .comparar { grid-template-columns: 1fr 1fr; gap: 24px; }
}
.selo-tipo { align-self: flex-start; }
.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; }
.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; }

/* Painel (/panel): topo curto, plano (só para quem não paga), cartão de alertas e a conta
   recolhida. Tudo sob .painel para não mexer nos <details> do FAQ nem nos formulários de fora.
   Celular primeiro (95% das visitas): uma coluna, alvos de toque de 44 px ou mais. */
.painel { padding: 8px 0 24px; }
.painel-topo { margin: 20px 0 6px; }
.painel h1 { font-size: 1.45rem; margin: 0 0 8px; }
.painel-id { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; }
.painel-pilula { display: inline-block; padding: 2px 10px; border: 1px solid var(--filete); border-radius: 999px; background: var(--suave); color: var(--cinza); font-size: 12.5px; font-weight: 600; line-height: 1.5; }
.painel-pilula.radar { background: var(--marca); border-color: var(--marca); color: #fff; }
.painel-email { font-size: 13px; color: var(--cinza); overflow-wrap: anywhere; }
.painel .aviso-ok, .painel .erro { margin: 12px 0 0; }
.painel-novas { display: inline-block; margin-left: 4px; padding: 0 8px; border-radius: 999px; background: var(--marca); color: #fff; font-size: 12.5px; font-style: normal; font-weight: 600; line-height: 1.6; }
.painel-cartao { margin: 0 0 14px; padding: 16px 18px; background: var(--suave); border: 1px solid var(--filete); border-radius: 12px; }
.painel-cartao h2 { margin: 0 0 6px; font-size: 1.1rem; }
.painel-cartao p { margin: 8px 0; }
.painel-cartao .botao { margin: 0; }
.painel-cartao .painel-acoes { margin: 0 0 4px; }
.painel-cartao .painel-acoes .botao { width: 100%; }
/* Plano no topo (quem não paga): uma frase e um botão cheio; no celular o botão ocupa a largura. */
.painel-plano { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 14px; border-left: 4px solid var(--marca); }
.painel-cartao .painel-plano-texto { flex: 1 1 20em; margin: 0; }
.painel-plano .botao { flex: none; width: 100%; }
.painel-plano.alerta { background: var(--ambar-fundo); border-color: #f0dcae; border-left-color: var(--ambar); }
.painel-plano.alerta .painel-plano-texto { color: var(--ambar); }
/* Pausar alertas e Mis licitaciones: linha discreta no fim do cartão de alertas. */
.painel-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; margin-top: 8px; }
.painel-pie form { margin: 0; }
.painel-pie a, .painel .link-botao { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
.painel .link-botao { margin: 0; padding: 0 2px; }
.painel-resumo { margin: 4px 0 12px; }
.painel-resumo > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 8px; padding: 8px 0; border-top: 1px solid var(--filete); font-size: 15px; }
.painel-resumo dt { color: var(--cinza); font-size: 13px; padding-top: 1px; }
.painel-resumo dd { margin: 0; min-width: 0; }
.painel-vazio { color: var(--erro); font-weight: 600; }
.painel .botao.pequeno { min-height: 44px; }
.painel details.painel-recolhe { margin: 10px 0 0; padding: 0 16px; background: #fff; border: 1px solid var(--filete); border-radius: 12px; }
.painel details.painel-recolhe > summary { align-items: center; min-height: 52px; padding: 8px 0; font-size: 16px; }
.painel details.painel-recolhe > summary::after,
.painel details.painel-recolhe[open] > summary::after { content: ""; flex: none; width: 9px; height: 9px; margin: 0 4px 3px 0; border-right: 2px solid var(--cinza); border-bottom: 2px solid var(--cinza); transform: rotate(45deg); transition: transform 0.15s; }
.painel details.painel-recolhe[open] > summary::after { margin-bottom: 0; margin-top: 4px; transform: rotate(-135deg); }
.painel details.painel-recolhe[open] { padding-bottom: 6px; }
.painel details.painel-recolhe .formulario { background: transparent; padding: 0 0 12px; }
.painel details.painel-recolhe > p { padding-bottom: 8px; }
.painel details.zona-perigo > summary { color: var(--erro); }
.painel-conta { margin-top: 22px; }
.painel-conta h2 { margin: 0; font-size: 1.1rem; }
.painel-plano-conta { margin: 10px 0 0; padding: 14px 16px; background: #fff; border: 1px solid var(--filete); border-radius: 12px; }
.painel-plano-conta p { margin: 0 0 10px; }
.painel-plano-conta .nota { margin: 8px 0 0; }
.painel-sair { margin: 14px 0 0; text-align: center; }
@media (min-width: 560px) {
  .painel-resumo > div { grid-template-columns: 8.5em minmax(0, 1fr); }
  .painel-cartao .painel-acoes .botao, .painel-plano .botao { width: auto; }
}

/* 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: 24px; }
.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 */
/* O topo do computador (28/10/2026) tem um item só, "Licitações" (busca e ramos), e desde 29/10 também "Ferramentas" (desertas e consulta de empenho), então o Blog volta mais cedo: a partir de 800 px. */
.menu-item.largo { display: none; }
@media (min-width: 800px) { .menu-item.largo { 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; } }
/* Busca feita: só o botão verde, embaixo do campo, sem a descrição (no celular: selo e contagem numa linha, título na outra). */
.abas-compras.compacta { grid-template-columns: 1fr; margin: 10px 0 0; }
.compacta .aba-compra { padding: 8px 14px; }
.compacta .aba-desc { display: none; }
@media (max-width: 719px) {
  .compacta .aba-selo { order: 1; }
  .compacta .aba-num { order: 2; }
  .compacta .aba-linha strong { order: 3; flex-basis: 100%; }
}
/* Lista do ramo no celular (`enxuta`): as duas abas lado a lado, sem a descrição; cabeçalho curto. */
@media (max-width: 719px) {
  .cabecalho-pagina.enxuto { padding: 16px 0 14px; }
  .cabecalho-pagina.enxuto .sobretitulo { margin-bottom: 4px; }
  .cabecalho-pagina.enxuto h1 { font-size: 1.6rem; margin-bottom: 0; }
  .cabecalho-pagina.enxuto + .conteudo-lista { padding-top: 12px; }
  .abas-compras.enxuta { grid-template-columns: 1.3fr 1fr; gap: 8px; margin: 8px 0 0; }
  .enxuta .aba-compra { padding: 8px 10px; gap: 2px; border-radius: 8px; justify-content: center; }
  .enxuta .aba-desc { display: none; }
  .enxuta .aba-compra strong { font-size: 14px; line-height: 1.25; }
  .enxuta .aba-selo { order: 1; }
  .enxuta .aba-num { order: 2; margin-left: 0; }
  .enxuta .aba-linha strong { order: 3; flex-basis: 100%; }
}
/* 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; } }
/* O cadastro do topo nunca some (24/10/2026): é o botão mais clicado do site. */
.topo-acoes .botao.testar-topo { display: inline-block; }

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

/* Celular (a maior parte do tráfego do Google Ads): o botão cheio do topo, para visitante, é o do cadastro e
   não "Meu ramo", e os alvos de toque chegam perto de 44 px. Links dentro de frase ficam como estão. */
@media (max-width: 719px) {
  /* Topo do celular: o link "Entrar" e o botão de cadastro (contornado só na home). */
  .topo-acoes .botao.testar-topo { display: inline-block; min-height: 44px; }
  .topo-acoes .menu-item.entrar { padding: 12px 8px; }
  .marca { padding: 9px 0; }
  .cta-final .intro { display: none; }
  .exemplos-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
  .exemplos-chips .sep { display: none; }
  .exemplos-chips a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--filete); border-radius: 999px; background: #fff; color: var(--tinta); font-weight: 500; text-decoration: none; }
  .heroi-amostra .acoes, .anotado .acoes { row-gap: 2px; }
  .heroi-amostra .acoes .link, .anotado .acoes .link { padding: 10px 0; }
  .ramo-cartao .link-seta { display: inline-block; padding: 10px 0; }
  .rodape-links { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .rodape-links li { margin: 0; }
  .rodape-links a { display: flex; align-items: center; min-height: 44px; }
}

/* Aviso de cookies: barra fixa embaixo até a pessoa escolher (por cima das barras de CTA e do PDF). */
.aviso-cookies { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: #fff; border-top: 2px solid var(--marca); box-shadow: 0 -6px 16px rgba(15, 40, 33, 0.12); }
.aviso-cookies p { margin: 0; flex: 1 1 320px; font-size: 14px; }
.aviso-cookies form { display: flex; gap: 10px; margin: 0; }
.aviso-cookies .botao { min-height: 44px; }
@media (max-width: 480px) { .aviso-cookies form { width: 100%; } .aviso-cookies .botao { flex: 1; } }
.escolha-cookies { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }

/* Páginas públicas de /licitacoes */
.trilha { font-size: 14px; color: var(--cinza); margin: 18px 0 10px; }
.trilha a { color: var(--cinza); }
.resumo-pagina { font-size: 1.05rem; margin-bottom: 14px; }
.resumo-pagina .numero-grande { font-family: var(--serifa); font-size: 1.6rem; color: var(--marca); }
.resumo-pagina .atualizado { display: block; font-size: 14px; color: var(--cinza); margin-top: 2px; }
.intro-categoria { max-width: 40em; }
.cidades-da-pagina { color: var(--cinza); font-size: 15px; }
.subtitulo-vitrine { font-size: 1.25rem; margin: 30px 0 10px; }
.lista-compras { list-style: none; margin: 0 0 8px; padding: 0; border: 1px solid var(--filete); border-radius: 8px; overflow: hidden; background: #fff; }
.item-compra { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 12px 16px; border-bottom: 1px solid var(--filete); }
.item-compra:last-child { border-bottom: 0; }
.item-quem { display: flex; flex-direction: column; min-width: 0; }
.item-quem strong { font-size: 15px; overflow-wrap: anywhere; }
.item-quem span, .item-prazo span { color: var(--cinza); font-size: 14px; }
.item-prazo { display: flex; flex-direction: column; text-align: right; white-space: nowrap; font-size: 15px; }
.item-prazo.urgente strong { color: var(--ambar); }
.item-trancado { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; user-select: none; }
.item-trancado > .barra { flex: 1; margin: 0; }
.nota-trancada { display: flex; align-items: center; gap: 6px; width: 90px; font-size: 13px; color: var(--cinza); }
.nota-trancada .barra { flex: 1; margin: 0; }
.lista-compras.encerradas .item-compra { opacity: 0.8; }
.vitrine-cta { margin: 22px auto; max-width: none; box-shadow: none; background: var(--suave); }
.links-vitrine { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.links-vitrine li { border: 1px solid var(--filete); border-radius: 999px; padding: 4px 12px; background: #fff; font-size: 15px; }
.links-vitrine li span { color: var(--cinza); font-size: 13px; margin-left: 4px; }
.links-vitrine.guias { flex-direction: column; flex-wrap: nowrap; }
.links-vitrine.guias li { border-radius: 8px; }
.rodape-vitrine { margin-top: 32px; color: var(--cinza); font-size: 14px; }
.links-vitrine li.pouca { background: var(--suave); }
.links-vitrine li.pouca a { color: var(--cinza); }
.volta-vitrine { margin-top: 24px; }
.orgaos-top .item-quem span { font-size: 13px; }
.faq-vitrine h3 { font-size: 1.05rem; line-height: 1.3; margin: 20px 0 6px; }
.faq-vitrine p { margin: 0; font-size: 1rem; line-height: 1.5; max-width: 40em; }
.titulo-chips-ramos { font-size: 1.15rem; margin: 28px 0 10px; }
.resumo-pagina p { font-size: 1rem; line-height: 1.5; margin: 0 0 10px; }
/* Hub e páginas por ramo (`/licitacoes`): a grade de ramos, 2 por linha no celular. */
.ramos-grade { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ramos-grade li > a, .ramos-grade li > .ramo-aqui { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; height: 100%; padding: 8px; border: 1px solid var(--filete); border-radius: 10px; background: #fff; color: inherit; text-decoration: none; }
.ramos-grade li > a:hover { border-color: var(--marca); }
.ramos-grade .ramo-aqui { background: var(--suave); }
.ramos-grade .icone-ramo { grid-row: 1 / span 2; font-size: 1.25rem; line-height: 1; }
.ramos-grade .ramo-nome { font-weight: 600; font-size: 14px; line-height: 1.2; overflow-wrap: break-word; min-width: 0; }
.ramos-grade .ramo-conta { color: var(--cinza); font-size: 13px; }
.links-vitrine .icone-ramo { margin-right: 2px; font-size: 14px; margin-left: 0; color: inherit; }
@media (max-width: 400px) { .ramos-grade .ramo-nome { font-size: 13px; } .ramos-grade li > a, .ramos-grade li > .ramo-aqui { column-gap: 6px; padding: 8px 6px; } }
/* /ramos: o campo "Filtrar ramo" (static/js/ramos-filtro.js) e o rodapé da lista. */
.ramos-filtro { margin: 0 0 14px; }
.ramos-filtro[hidden] { display: none; }
.ramos-filtro label { display: block; margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--cinza); }
.ramos-filtro input { width: 100%; max-width: 420px; min-height: 44px; padding: 8px 12px; font: 400 16px var(--sans); color: var(--tinta); background: #fff; border: 1px solid #aeb7b2; border-radius: 6px; }
.ramos-rodape { margin: 18px 0 0; }
@media (min-width: 640px) { .ramos-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .ramos-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .resumo-pagina .numero-grande { font-size: 1.4rem; } h1 { font-size: 1.6rem; } }


/* Botão de ajuda flutuante (WhatsApp de suporte): contornado, no canto; sobe acima das barras fixas. */
.ajuda-flutuante { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 25; }
.ajuda-flutuante > summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 48px; min-width: 48px; padding: 0 16px; border: 2px solid var(--marca); border-radius: 999px; background: var(--fundo); color: var(--marca); font-weight: 700; font-size: 15px; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .14); }
.ajuda-flutuante > summary::-webkit-details-marker { display: none; }
details.ajuda-flutuante > summary::after, details.ajuda-flutuante[open] > summary::after { content: none; display: none; }
.ajuda-flutuante[open] > summary { background: var(--suave); }
.ajuda-balao { position: absolute; right: 0; bottom: calc(100% + 10px); width: min(320px, calc(100vw - 32px)); padding: 16px; background: var(--fundo); border: 1px solid var(--filete); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.ajuda-balao p { margin: 0 0 12px; font-size: 15px; }
.ajuda-balao .ajuda-titulo { font-weight: 700; font-size: 17px; margin-bottom: 6px; }
.ajuda-balao .botao { width: 100%; text-align: center; }
.ajuda-balao .nota { margin: 12px 0 0; font-size: 14px; }
.aviso-cookies ~ .ajuda-flutuante { display: none; }
body.com-barra-pdf .ajuda-flutuante { bottom: calc(84px + env(safe-area-inset-bottom)); }
@media (max-width: 719px) {
  .ajuda-flutuante > summary { padding: 0; justify-content: center; }
  .ajuda-flutuante .ajuda-rotulo { display: none; }
  body:has(.barra-cta-home:not(.escondida)) .ajuda-flutuante { bottom: calc(96px + env(safe-area-inset-bottom)); }
  body:has(.barra-fixa) .ajuda-flutuante { bottom: calc(92px + env(safe-area-inset-bottom)); }
}
@media print { .ajuda-flutuante { display: none; } }

/* Pergunta de um clique "O que você está buscando aqui?" (static/js/pesquisa.js, que cria o cartão).
   Celular: embaixo, de ponta a ponta com 16 px de cada lado e as opções em duas colunas (compacto);
   computador: canto de baixo à direita, 320 px. O JS põe `bottom` em px quando há barra fixa ou o
   botão de ajuda ocupando o rodapé; sem nada ali vale o 16 px daqui. */
.pesquisa { position: fixed; z-index: 27; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); padding: 8px 12px 12px; background: var(--fundo); border: 1px solid var(--filete); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); animation: pesquisa-sobe .25s ease-out; }
@keyframes pesquisa-sobe { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pesquisa { animation: none; } }
.pesquisa-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.pesquisa-titulo { margin: 0; padding-top: 10px; font: 700 15px/1.3 var(--sans); letter-spacing: 0; }
.pesquisa-fechar { flex: none; width: 44px; height: 44px; margin: 0 -8px 0 0; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--cinza); font: 18px/1 var(--sans); cursor: pointer; }
.pesquisa-fechar:hover { background: var(--suave); color: var(--tinta); }
.pesquisa-opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pesquisa-opcao { min-height: 48px; padding: 6px 10px; border: 1px solid var(--filete); border-radius: 8px; background: var(--suave); color: var(--tinta); font: 500 14px/1.25 var(--sans); text-align: left; cursor: pointer; }
.pesquisa-opcao:hover, .pesquisa-opcao:focus-visible { border-color: var(--marca); background: #fff; }
.pesquisa-outro { display: flex; gap: 8px; margin-top: 8px; }
.pesquisa-outro input { flex: 1; min-width: 0; min-height: 44px; padding: 0 10px; border: 1px solid var(--filete); border-radius: 8px; background: #fff; color: var(--tinta); font: 16px var(--sans); }
.pesquisa-outro .botao { min-height: 44px; padding: 0 16px; font-size: 15px; }
.pesquisa-obrigado { margin: 0 0 4px; padding: 4px 0; font-weight: 600; }
.pesquisa-convite { margin: 0 0 4px; }
.pesquisa-convite .botao { width: 100%; text-align: center; }
@media (min-width: 720px) {
  .pesquisa { left: auto; right: 16px; width: 320px; padding: 8px 14px 14px; }
  .pesquisa-opcoes { grid-template-columns: 1fr; gap: 6px; }
  .pesquisa-opcao { min-height: 44px; font-size: 15px; }
}
@media print { .pesquisa { display: none; } }

/* Celular nas listas e no detalhe (ver _celular_lista.html): objeto cortado com "Ler tudo", atalho
   "Mudar filtros" na contagem e o botão que leva à lista depois de trocar um filtro. */
.so-celular { display: none; }
.ler-tudo { display: block; margin: -6px 0 10px; padding: 6px 0; text-align: left; }
.ver-resultado { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 26; min-height: 46px; padding: 10px 22px; border: 0; border-radius: 999px; background: var(--marca); color: #fff; font: 600 15px/1.2 var(--sans); white-space: nowrap; box-shadow: 0 6px 18px rgba(15, 40, 33, 0.3); cursor: pointer; }
.ver-resultado[hidden] { display: none; }
.valor-detalhe { margin: 0 0 12px; font-size: 15px; color: var(--cinza); }
.valor-detalhe strong { margin-left: 4px; font-family: var(--serifa); font-size: 1.35rem; color: var(--tinta); }
.acoes-objeto { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; }
@media (max-width: 719px) {
  .so-celular { display: inline; margin-left: 6px; white-space: nowrap; }
  [data-recorta]:not(.aberto) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
  .objeto[data-recorta]:not(.aberto) { -webkit-line-clamp: 8; line-clamp: 8; }
  .acoes-objeto .link { display: inline-flex; align-items: center; min-height: 40px; }
  /* O botão de ajuda sai da frente enquanto a pessoa rola para baixo e volta quando ela sobe. */
  .ajuda-flutuante { transition: transform 0.2s ease, opacity 0.2s ease; }
  .ajuda-flutuante.recolhida:not([open]) { transform: translateY(140%); opacity: 0; pointer-events: none; }
}

/* Home no celular: menos telas até o cadastro. Sai o "Como ler cada alerta" (repete o cartão de
   exemplo do topo, e nenhum link aponta para ele) e a caixa "Onde estamos" (repete os ramos). */
@media (max-width: 719px) {
  #alerta, .pedir-ramo .situacao, .so-desktop { display: none; }
  .secao { padding: 32px 0; }
  /* Os ramos viram linhas: nome e contagem à esquerda, botão curto à direita. */
  .ramos { gap: 10px; }
  .ramo-cartao { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; align-content: center; padding: 14px 16px; }
  .ramo-cartao h3 { grid-column: 1; margin: 0; font-size: 1.05rem; }
  .ramo-cartao p { grid-column: 1; margin: 0; font-size: 14px; }
  .ramo-cartao .botao { grid-column: 2; grid-row: 1 / span 2; }
  .painel-lista a { min-height: 46px; padding: 4px 2px; }
  .painel-lista:not(.em-grade) .nome { font-size: 15px; line-height: 1.3; }
  .painel-lista:not(.em-grade) .num { font-size: 13px; }
  .painel-listas { gap: 16px; }
  .painel-dia .intro, #como-funciona .intro { margin-bottom: 16px; }
  #como-funciona .etapas { margin-top: 12px; }
  .etapas li { padding-bottom: 16px; }
  /* Planos: cartões mais baixos (o aviso "sem cartão" do grátis já está na lista dele). */
  .plano-cartao { padding: 18px; }
  .plano-valor strong { font-size: 2.1rem; }
  .plano-cartao .lista-marcas { margin: 8px 0 14px; }
  .plano-cartao:not(.destaque) .plano-micro { display: none; }
}

/* Painel do dia (home): números das compras abertas e atalhos para a busca já filtrada. */
.painel-numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 20px; }
.painel-tile { margin: 0; padding: 14px 14px 12px; border: 1px solid var(--filete); border-radius: 10px; background: var(--suave); display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.3; color: var(--cinza); }
.painel-tile strong { font: 600 1.45rem/1.15 var(--serifa); color: var(--marca); overflow-wrap: anywhere; }
.painel-tile.destaque { background: var(--marca); border-color: var(--marca); color: #dcebe5; }
.painel-tile.destaque strong { color: #fff; }
.painel-listas { display: grid; gap: 22px; margin: 0 0 14px; }
.painel-listas h3 { font-size: 1.05rem; margin: 0 0 6px; }
.painel-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filete); }
.painel-lista li { border-bottom: 1px solid var(--filete); }
.painel-lista a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 6px 2px; color: var(--tinta); text-decoration: none; }
.painel-lista a:hover .nome { color: var(--marca); text-decoration: underline; }
.painel-lista .nome { font-weight: 600; min-width: 0; }
.painel-lista .num { flex: none; font-size: 14px; color: var(--cinza); text-align: right; }
.painel-lista .num strong { color: var(--tinta); }
.painel-lista.em-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.painel-lista.em-grade a { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; }
.painel-lista.em-grade .num { text-align: left; font-size: 13px; }
.painel-acao { margin: 16px 0 0; }
@media (min-width: 720px) {
  .painel-numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .painel-tile { padding: 18px 18px 16px; font-size: 14px; }
  .painel-tile strong { font-size: 1.9rem; }
  .painel-listas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
}

/* Como funciona + comparação (home) e "Ver mais perguntas". */
.comparar-titulo { font-size: 1.3rem; margin: 28px 0 12px; }
details.mais-perguntas { border-bottom: 0; padding: 0; }
details.mais-perguntas > summary { color: var(--marca); }
details.mais-perguntas > details { margin-left: 0; }

/* Busca de um termo de ramo pronto: faixa no topo da lista (onde o celular chega) com a seleção da IA. */
.faixa-ramo-pronto { display: grid; gap: 10px; margin: 0 0 14px; padding: 12px 14px; border: 1.5px solid #0a3429; border-radius: 10px; background: var(--suave); }
.faixa-ramo-pronto p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--tinta); }
.faixa-ramo-pronto .aba-selo { margin-right: 4px; vertical-align: 1px; }
.faixa-ramo-pronto .botao { justify-self: start; }
@media (min-width: 720px) { .faixa-ramo-pronto { grid-template-columns: 1fr auto; align-items: center; gap: 20px; } }

/* Alerta da busca: cadastro de um campo só (e-mail) dentro da lista de resultados (busca e ramo). */
.alerta-busca { margin: 14px 0 18px; padding: 16px 18px; border: 1.5px solid var(--marca); border-radius: 10px; background: #fff; }
.alerta-busca.ok { border-color: #b9dcc8; background: #e3f3ea; }
.alerta-busca p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--cinza); }
.alerta-busca .alerta-titulo { font-family: var(--serifa); font-size: 1.2rem; line-height: 1.3; color: var(--tinta); margin-bottom: 4px; }
.alerta-busca .erro { margin: 10px 0 0; }
.alerta-campos { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; margin-top: 12px; }
.alerta-campos select, .alerta-campos input { margin-top: 0; }
.alerta-campos .botao { grid-column: 1 / -1; }
.alerta-busca .alerta-nota { margin-top: 8px; font-size: 13px; }
.alerta-busca .alerta-nota a { color: inherit; }
/* Sem o select de estado (alerta de /licitacoes-desertas): o e-mail ocupa a linha inteira. */
.alerta-campos.sem-estado { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) {
  .alerta-campos { grid-template-columns: 96px minmax(0, 1fr) auto; }
  .alerta-campos.sem-estado { grid-template-columns: minmax(0, 1fr) auto; }
  .alerta-campos .botao { grid-column: auto; }
}

/* Primeira tela (15/10/2026): no celular o campo de busca ocupa a linha e o botão vem embaixo. */
@media (max-width: 479px) {
  .heroi .busca-linha { flex-direction: column; }
  .heroi .busca-linha .botao { width: 100%; }
}

/* Acompanhar licitação (15/10/2026): um clique para quem tem conta; só o e-mail para o visitante. */
.acompanhar { margin: 10px 0 0; }
.acompanhar.grande { margin: 14px 0 18px; padding: 14px 16px; border: 1px solid var(--filete); border-radius: 10px; background: var(--suave); }
.acompanhar-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.acompanhar-linha .nota { margin: 0; flex: 1 1 220px; }
.acompanhar-estado { font-weight: 600; color: var(--marca); }
.acompanhar-ok { margin: 0; padding: 10px 12px; background: #e3f3ea; border: 1px solid #b9dcc8; border-radius: 6px; color: var(--tinta); font-size: 15px; }
.acompanhar-visitante { border: 0; padding: 0; }
.acompanhar-visitante summary { display: inline-block; list-style: none; cursor: pointer; }
.acompanhar-visitante summary.link-botao { padding: 0; }
.acompanhar-visitante summary::after { content: none; }
.acompanhar-visitante summary.link-botao { margin-left: 0; }
.acompanhar-visitante form { margin-top: 10px; }
.acompanhar-visitante form p { margin: 0 0 8px; font-size: 14px; color: var(--cinza); }
/* "Digitou errado? Corrigir o e-mail" (tela de confirmação e blocos de alerta/salvar) */
.email-destaque { overflow-wrap: anywhere; color: var(--tinta); }
.corrigir-email { margin: 14px 0; padding: 0 14px; border: 1px solid #aeb7b2; border-radius: 8px; background: #fff; }
.corrigir-email summary { justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: 0 6px; min-height: 48px; padding: 10px 0; font-weight: 400; font-size: 15px; color: var(--tinta); }
.corrigir-email summary::after, .corrigir-email[open] > summary::after { content: none; }
.corrigir-link { color: var(--marca); font-weight: 600; text-decoration: underline; }
.corrigir-email form { padding-bottom: 14px; }
.corrigir-email label { display: block; font-weight: 600; font-size: 14px; }
.corrigir-campos { display: grid; gap: 8px; margin-top: 6px; }
.corrigir-campos input { margin-top: 0; }
@media (min-width: 640px) { .corrigir-campos { grid-template-columns: minmax(0, 1fr) auto; } }
.acompanhar-campos { display: flex; gap: 8px; }
.acompanhar-campos input { margin-top: 0; flex: 1; min-width: 0; }
.acompanhar-campos .botao { flex: none; }
.movimentacoes { list-style: none; padding: 0; margin: 0; }
/* Compras parecidas e outras do órgão no detalhe (26/10/2026): objeto como link, dados embaixo. */
.relacionadas { list-style: none; padding: 0; margin: 0; }
.relacionadas li { padding: 8px 0; border-bottom: 1px solid var(--filete); font-size: 15px; }
.relacionadas li a { font-weight: 600; }
.relacionadas .rel-dados { display: block; color: var(--texto-fraco, #555); font-size: 14px; margin-top: 2px; }
.movimentacoes li { padding: 8px 0; border-bottom: 1px solid var(--filete); font-size: 15px; }
.movimentacoes li strong { color: var(--marca); margin-right: 6px; }
.acompanhando { list-style: none; padding: 0; margin: 0; }
.acompanhando li { padding: 10px 0; border-bottom: 1px solid var(--filete); }
.acompanhando li p { margin: 0 0 4px; }

/* Salvar e Minhas licitações (20/10/2026): "Salvar esta busca" na busca; na página, as buscas salvas
   com o que há de novo e as licitações salvas. A maior parte das visitas é de celular: alvos de toque
   de pelo menos 40 px. */
.salvar-busca { margin: 0 0 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 15px; }
.salvar-busca form { margin: 0; }
.salvar-busca .erro { flex: 1 1 100%; margin: 0; }
.salvar-busca-ok { font-weight: 600; color: var(--marca); }
.pilula { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1.5px solid var(--marca); border-radius: 999px; background: #fff; color: var(--marca); font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; }
.pilula:hover { background: var(--marca); color: #fff; }
.minhas-bloco { margin: 28px 0 0; }
.minhas-bloco h2 { margin-bottom: 12px; }
.minhas-sub { margin: 24px 0 8px; font-size: 1.05rem; color: var(--cinza); }
.buscas-salvas, .encerradas { list-style: none; padding: 0; margin: 0; }
.buscas-salvas li { display: flex; align-items: center; gap: 12px; border: 1px solid var(--filete); border-radius: 10px; background: #fff; margin-bottom: 10px; }
.busca-salva-link { flex: 1; min-width: 0; display: block; padding: 12px 0 12px 14px; min-height: 56px; color: var(--tinta); text-decoration: none; }
.busca-salva-link:hover .busca-salva-nome { color: var(--marca); text-decoration: underline; }
.busca-salva-nome { display: block; font-size: 17px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.busca-salva-nums { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px; font-size: 14px; color: var(--cinza); }
.pilula-nova { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--marca); color: #fff; font-weight: 700; font-size: 13px; }
.buscas-salvas li form { margin: 0; flex: none; }
.buscas-salvas li .link-botao { min-height: 44px; min-width: 56px; padding: 0 14px; margin: 0; }
.encerradas li { padding: 10px 0; border-bottom: 1px solid var(--filete); }
.encerradas li p { margin: 0 0 4px; }
.encerradas li form { margin: 0; }
.encerradas li .link-botao { min-height: 40px; margin: 0; padding: 0 12px 0 0; }
@media (max-width: 479px) {
  /* "Salvas" e "Painel" cabem ao lado da marca e do botão verde: o botão encolhe para "Meu ramo". */
  .topo-acoes { gap: 10px; }
  .topo-acoes .menu-item.entrar { padding: 12px 4px; }
}

/* Escolha do ramo na busca (`_filtro_ramo.html`, `ramo.js`): fileira de chips com ícone e contagem
   (no celular rola para o lado, com a borda direita esmaecida dizendo que tem mais; no computador quebra
   linha) e o painel com todos os ramos. No celular o painel sobe do rodapé e ocupa 85% da tela. */
.ramo { position: relative; margin: 2px 0 10px; }
.ramo-cab { display: flex; align-items: baseline; gap: 12px; margin: 0 0 6px; }
.ramo-titulo { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cinza); }
.ramo-limpar { font-size: 14px; }
.ramo-abrir { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1.5px solid var(--marca); border-radius: 999px; background: #fff; color: var(--marca); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.ramo-abrir:hover { background: var(--suave); }
.ramo-abrir::before { content: "☰"; font-size: 14px; }
.ramo-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ramo-chips li { flex: none; margin: 0; }
.ramo-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; background: #fff; border: 1px solid var(--filete); border-radius: 999px; color: var(--tinta); font: inherit; font-size: 14.5px; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; }
.ramo-chip:hover { border-color: var(--marca); background: var(--suave); }
.ramo-chip[aria-current="true"] { background: var(--marca); border-color: var(--marca); color: #fff; font-weight: 700; }
.ramo-chip .ramo-n { min-width: 0; color: inherit; opacity: 0.7; font-size: 12.5px; }
.ramo-chip .ramo-ic { font-size: 16px; }
.ramo-mais { border: 1.5px solid var(--marca); color: var(--marca); font-weight: 700; }
.ramo-mais::after { content: "›"; font-size: 18px; margin-left: 2px; }
@media (min-width: 720px) { .ramo-chips li:has(.ramo-mais) { display: none; } }  /* no computador o atalho do cabeçalho basta */
.ramo-painel { position: absolute; z-index: 50; left: 0; top: calc(100% + 6px); width: min(100%, 34em); background: #fff; border: 1px solid var(--filete); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16); padding: 12px; }
.ramo-alca { display: none; }
.ramo-painel-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
.ramo-painel-titulo { margin: 0; font-size: 18px; }
.ramo-fechar { flex: none; width: 40px; height: 40px; border: 0; border-radius: 999px; background: var(--suave); color: var(--tinta); font-size: 16px; cursor: pointer; }
.ramo-busca { width: 100%; margin: 0; min-height: 46px; font-size: 16px; }
.ramo-lista { position: relative; list-style: none; margin: 8px 0 0; padding: 0; max-height: 50vh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.ramo-lista li { margin: 0; }
.ramo-lista li a { display: flex; gap: 12px; align-items: center; min-height: 48px; padding: 6px 10px; border-radius: 8px; color: var(--tinta); text-decoration: none; font-size: 15.5px; }
.ramo-lista li a:hover { background: var(--suave); }
.ramo-lista li a[aria-current="true"] { background: var(--suave); color: var(--marca); font-weight: 700; box-shadow: inset 3px 0 0 var(--marca); }
.ramo-lista .ramo-ic { flex: none; width: 1.5em; text-align: center; font-size: 18px; }
.ramo-nome { flex: 1; min-width: 0; }
.ramo-n { flex: none; min-width: 2.2em; text-align: right; color: var(--cinza); font-size: 13px; font-variant-numeric: tabular-nums; }
.ramo-vazio { margin: 10px 4px 4px; color: var(--cinza); font-size: 14px; }
@media (max-width: 719px) {
  /* Fileira que rola para o lado, de borda a borda, com o fim esmaecido; o chip não encolhe. */
  .ramo-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 6px; scroll-padding: 0 16px; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  .ramo-chips::-webkit-scrollbar { display: none; }
  /* Painel: sobe do rodapé com altura fixa (a lista não pula quando o filtro encolhe), acima do aviso de cookies (40). */
  .ramo-painel { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; height: 85vh; height: 85dvh; display: flex; flex-direction: column; border: 0; border-radius: 16px 16px 0 0; padding: 6px 16px calc(12px + env(safe-area-inset-bottom)); }
  .ramo-painel[hidden] { display: none; }
  .ramo-alca { display: block; width: 40px; height: 4px; margin: 4px auto 10px; border-radius: 2px; background: var(--filete); }
  .ramo-lista { max-height: none; flex: 1; }
  body.ramo-aberto { overflow: hidden; }
  body.ramo-aberto::after { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 49; }
}

/* Cartão compacto da busca (`_card_busca.html`): cabeçalho numa linha, objeto em 2 linhas, itens numa
   linha, valor e ações na mesma linha. Medido em 19/10/2026 no celular: de 408 px para ~240 px. */
.cartao.compacto { margin: 10px 0; }
.cartao.compacto .cc-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 5px 14px; border-bottom: 1px solid var(--filete); font-size: 12.5px; line-height: 1.35; color: var(--cinza); }
.cartao.compacto .cc-topo.urgente { background: var(--ambar-fundo); color: var(--ambar); border-color: #f0dcae; }
.cartao.compacto .cc-prazo { flex: none; }
.cartao.compacto .cc-prazo strong { color: var(--tinta); font-size: 14px; }
.cartao.compacto .cc-topo.urgente .cc-prazo strong { color: var(--ambar); }
.cartao.compacto .cc-meta { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }  /* uma linha: o que não cabe vira reticência */
.cartao.compacto .cc-fonte { white-space: nowrap; }
.cartao.compacto .cc-topo .marcas { margin-left: auto; }
.cartao.compacto .cartao-corpo { padding: 9px 14px 11px; }
.cartao.compacto h3 { font-size: 15px; margin: 0 0 3px; }
.cartao.compacto .cc-objeto { margin: 0 0 6px; font-size: 14px; line-height: 1.45; }
.cartao.compacto .cc-objeto[data-recorta]:not(.aberto) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.cartao.compacto .ler-tudo { margin: -4px 0 6px; padding: 2px 0; font-size: 13px; }
/* A linha de itens é um <details> (cartão da busca e da lista do ramo): zera o estilo das perguntas do FAQ. */
.cartao .cc-itens { margin: 0 0 8px; padding: 0; border: 0; font-size: 14px; color: var(--tinta); }
.cartao .cc-itens summary { display: flex; align-items: center; gap: 8px; padding: 2px 0; font-weight: 400; list-style: none; cursor: pointer; }
.cartao .cc-itens summary::-webkit-details-marker { display: none; }
.cartao .cc-itens summary::after { content: none; }
.cartao .cc-itens-resumo { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cartao .cc-itens-resumo span { font-weight: 600; color: var(--marca); }
.cartao .cc-abrir { flex: none; padding: 1px 8px; border: 1px solid var(--marca); border-radius: 999px; color: var(--marca); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.cartao .cc-abrir::before { content: "ver todos ▾"; }
.cartao .cc-itens[open] .cc-abrir::before { content: "fechar ▴"; }
.cartao .cc-lista-itens { margin: 6px 0 0; padding: 6px 0 0 18px; border-top: 1px solid var(--filete); max-height: 220px; overflow-y: auto; font-size: 13px; line-height: 1.4; color: var(--cinza); }
.cartao .cc-lista-itens li.casou { color: var(--marca); font-weight: 600; }
.cartao.compacto .cc-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: auto; }
.cartao.compacto .etiquetas { margin: 0; gap: 4px 6px; }
.cartao.compacto .etiquetas li { font-size: 12px; padding: 0 6px; }
.cartao.compacto .etiquetas li.valor { font-size: 15px; padding-left: 0; }
.cartao.compacto .acoes { gap: 8px 14px; margin: 0; }
#lista .cartao.compacto .acoes .botao { min-height: 44px; padding: 10px 14px; font-size: 14px; }  /* vence o `#lista .acoes .botao` de 36 px */
.cartao.compacto .acoes .link, .cartao.compacto .acoes .link-botao { font-size: 14px; white-space: nowrap; }
.cartao.compacto .acompanhar { margin: 0; }
.cartao.compacto .acompanhar-visitante form { margin-top: 8px; width: 100%; }
.cartao.compacto .acompanhar-estado { font-size: 14px; }
/* Computador: a lista da busca em duas colunas; o alerta de e-mail ocupa a linha inteira. */
@media (min-width: 1100px) {
  .miolo.lista-larga, main.lista-larga { max-width: 1040px; }  /* vence o `.miolo.estreito` de 780 px */
  .lista-larga .cartoes { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; align-items: stretch; }
  .lista-larga .cartoes > .alerta-busca { grid-column: 1 / -1; }
}
/* Celular: o aviso de cookies em pouco mais de uma linha (tinha 149 px, 18% da tela). */
@media (max-width: 719px) {
  .aviso-cookies { padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); gap: 6px 10px; }
  .aviso-cookies p { flex: 1 1 100%; font-size: 12.5px; line-height: 1.3; }
  .aviso-cookies form { width: 100%; }
  .aviso-cookies form .botao { flex: 1; min-height: 38px; padding: 6px 10px; font-size: 13px; }
  /* No celular o cabeçalho do cartão é uma linha só: data, publicação e fonte ficam para o computador. */
  .cartao.compacto .cc-fonte, .cartao.compacto .cc-data, .cartao.compacto .cc-topo .publicada { display: none; }
  .cartao.compacto .cc-rodape { gap: 4px 10px; }
}

/* Cartão compacto também na lista do ramo (`_card.html`): nota menor ao lado do órgão, resumo e aviso do
   plano mais curtos; o resto vem das regras de `.cartao.compacto`. */
.cartao.compacto .cartao-cabeca { gap: 10px; margin-bottom: 2px; }
.cartao.compacto .selo-tipo { margin: 0 0 3px; padding: 1px 8px; font-size: 11px; }
/* Os botões "Já vi" e "Incluir no PDF" (quem tem conta) ganham a segunda linha do cabeçalho, menores. */
.cartao.compacto .cc-topo .marcas { flex: 1 1 100%; order: 3; gap: 6px; margin-left: 0; }
.cartao.compacto .marca-card { min-height: 26px; padding: 2px 10px 2px 7px; font-size: 12px; }
.cartao.compacto .resumo { margin: 0 0 6px; font-size: 14px; line-height: 1.45; }
.cartao.compacto .trava-ia { margin: 0 0 6px; font-size: 13px; }
.cartao.compacto .etiquetas li.linha-produto, .cartao.compacto .etiquetas li.alerta { font-size: 12px; }


/* Busca livre, cartão com a análise do setor (`_card_busca.html`): o texto oficial fica a um toque, em
   uma linha fechada; quem não paga vê só a pílula do cadeado. */
.cartao .cc-oficial { margin: 0 0 8px; padding: 0; border: 0; font-size: 13px; color: var(--cinza); }
.cartao .cc-oficial summary { display: block; padding: 2px 0; font-weight: 400; list-style: none; cursor: pointer; color: var(--marca); }
.cartao .cc-oficial summary::-webkit-details-marker { display: none; }
.cartao .cc-oficial summary::after { content: " ▾"; position: static; }
.cartao .cc-oficial[open] summary::after { content: " ▴"; }
.cartao .cc-oficial .objeto-oficial { margin: 4px 0 0; font-size: 13px; line-height: 1.45; }
.cartao.compacto .etiquetas li.ia-trava { border-color: var(--marca); background: var(--suave); }
.cartao.compacto .etiquetas li.ia-trava a { color: var(--marca); font-weight: 600; text-decoration: none; }

/* Celular, lista do ramo e busca (20/10/2026: o primeiro cartão tinha ~540 px e a contagem ficava 3 linhas): contagem em
   menos linhas, cartão mais baixo (sem o selo, que a página já diz; resumo em 3 linhas; ações numa linha só). */
@media (max-width: 719px) {
  .resumo-lista { font-size: 14px; line-height: 1.35; margin: 2px 0 6px; }
  .resumo-lista .link-botao { font-size: 14px; }
  #lista .cartao.ramo .selo-tipo { display: none; }
  .cartao.compacto .resumo[data-recorta]:not(.aberto) { -webkit-line-clamp: 3; line-clamp: 3; }
  .cartao.compacto .etiquetas { margin-bottom: 8px; }
  #lista .cartao.compacto .acoes { gap: 2px 8px; }
  #lista .cartao.compacto .acoes .botao { min-height: 40px; padding: 8px 10px; }
  #lista .cartao.compacto .acoes .link, #lista .cartao.compacto .acoes .link-botao, #lista .cartao.compacto .acompanhar-estado { font-size: 13px; }
}

/* Detalhe de qualquer compra (21/10/2026): faixa de prazo encerrado, ações no topo, itens e arquivos
   do PNCP. A maior parte das visitas é de celular: uma coluna e toque de pelo menos 44 px. */
.faixa-prazo.encerrada { background: #f1ecec; border-color: #ddd0d0; color: #6b3a3a; }
.acoes-detalhe .acompanhar.grande { margin: 8px 0 6px; }
.acoes-links { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 0 0 10px; }
.acoes-links .link { display: inline-flex; align-items: center; min-height: 44px; }
.itens-detalhe { list-style: none; margin: 0; padding: 0; }
.itens-detalhe li { padding: 9px 0; border-top: 1px solid var(--filete); }
.itens-detalhe li:first-child { border-top: 0; }
.item-descricao { display: block; font-size: 15px; overflow-wrap: anywhere; }
.item-dados { display: block; margin-top: 2px; font-size: 13px; color: var(--cinza); }
.itens-resto { border-bottom: 0; padding: 0; }
.itens-resto > summary { align-items: center; min-height: 44px; padding: 8px 0; color: var(--marca); border-top: 1px solid var(--filete); }
.arquivos { list-style: none; margin: 0 0 8px; padding: 0; }
.arquivos li { border-top: 1px solid var(--filete); }
.arquivos li:first-child { border-top: 0; }
.arquivo { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 52px; padding: 8px 0; color: var(--tinta); text-decoration: none; }
.arquivo-texto { min-width: 0; flex: 1; }
.arquivo-nome { display: block; font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.arquivo-meta { display: block; font-size: 13px; color: var(--cinza); }
.arquivo-baixar { flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 88px; padding: 0 14px; border: 1px solid var(--marca); border-radius: 6px; color: var(--marca); font-weight: 600; font-size: 15px; }
.arquivo:hover .arquivo-baixar { background: var(--suave); }

/* Consulta de empenho (/consulta-empenho): celular primeiro; os cartões reaproveitam .cartao */
.emp-pagina { padding-top: 22px; padding-bottom: 40px; }
.emp-h1 { font-size: 1.65rem; line-height: 1.2; margin: 4px 0 6px; overflow-wrap: anywhere; }
.emp-intro { font-size: 1.04rem; color: var(--cinza); margin: 0 0 16px; }
.emp-form { border: 1px solid var(--filete); background: var(--suave); padding: 4px 16px 16px; }
.emp-form .erro { margin: 12px 0 0; }
.emp-form label { margin: 12px 0; }
.emp-aviso-fonte { margin: 10px 0 0; }
.emp-quem { margin: 0 0 14px; }
.emp-texto { margin-top: 34px; }
.emp-texto h2:first-child { margin-top: 0; }
.emp-meta { margin: 0 0 12px; }
/* Consulta de empenho: totais lado a lado e documentos como extrato (uma linha compacta cada). */
.emp-resumo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 14px 0 8px; }
.emp-total { padding: 8px 10px; border: 1px solid var(--filete); border-radius: 8px; background: var(--suave); min-width: 0; }
.emp-total span { display: block; font-size: 12.5px; font-weight: 600; color: var(--cinza); }
.emp-total strong { display: block; margin-top: 2px; font: 700 .95rem/1.2 var(--serifa); color: var(--marca); overflow-wrap: anywhere; }
.emp-abas { display: flex; gap: 6px; margin: 14px 0 4px; }
.emp-abas a { flex: 1 1 0; min-width: 0; text-align: center; padding: 7px 6px; border: 1px solid var(--filete); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 600; text-decoration: none; color: var(--tinta); white-space: nowrap; }
.emp-limitado { margin: 0 0 6px; }
.emp-abas a span { color: var(--cinza); font-weight: 500; }
.emp-abas a[aria-selected="true"] { background: var(--marca); border-color: var(--marca); color: #fff; }
.emp-abas a[aria-selected="true"] span { color: #fff; }
.emp-fase { margin-top: 18px; scroll-margin-top: 76px; }
.com-abas .emp-fase { margin-top: 10px; }
.com-abas .emp-fase-titulo { display: none; }
.emp-extrato { list-style: none; margin: 6px 0 0; padding: 0; border-top: 1px solid var(--filete); }
.emp-linha a { display: flex; gap: 10px; align-items: flex-start; padding: 9px 2px; border-bottom: 1px solid var(--filete); color: var(--tinta); text-decoration: none; }
.emp-linha a:hover { background: var(--suave); }
.emp-linha-txt { flex: 1; min-width: 0; }
.emp-linha-1, .emp-linha-2 { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emp-linha-1 { font-size: 14px; }
.emp-linha-1 strong { margin-right: 4px; }
.emp-linha-2 { font-size: 12.5px; color: var(--cinza); margin-top: 1px; }
.emp-linha-valor { flex: none; text-align: right; font-weight: 700; font-size: 14px; white-space: nowrap; }
.emp-linha-valor small { display: block; font-weight: 500; font-size: 12px; color: var(--cinza); }
.emp-inter { color: #8a5a00 !important; }
.emp-qtd { font: 500 1rem var(--sans); color: var(--cinza); }
.emp-fase-total { margin: 0 0 4px; }
.emp-paginas { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 0 0; }
.emp-paginas[hidden] { display: none; }
.emp-paginas button { min-height: 44px; padding: 8px 14px; border: 1px solid var(--filete); border-radius: 8px; background: #fff; font: 600 14px var(--sans); color: var(--marca); cursor: pointer; }
.emp-paginas button:disabled { color: var(--cinza); opacity: .5; cursor: default; }
.emp-pag-onde { font-size: 14px; color: var(--cinza); }
.emp-abas { scroll-margin-top: 76px; }
.emp-entenda { margin-top: 22px; }
.emp-outro { margin-top: 36px; }
.emp-outro h2 { font-size: 1.2rem; }
@media (min-width: 720px) {
  .emp-h1 { font-size: 2rem; }
  .emp-resumo { grid-template-columns: repeat(3, 1fr); }
  .emp-total { padding: 11px 14px; }
  .emp-total span { font-size: 14px; }
  .emp-total strong { font-size: 1.35rem; }
}
/* "O que mais você encontra aqui" (home): 1 coluna no celular, 2 no computador; só link de texto em cada cartão. */
.extras-grade { display: grid; gap: 14px; margin-top: 18px; }
.extra-cartao { background: var(--suave); border: 1px solid var(--filete); border-radius: 10px; padding: 18px 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.extra-cartao h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: 1.1rem; line-height: 1.3; }
.extra-cartao h3 .icone { flex: none; color: var(--marca); }
.extra-cartao p { margin: 0; flex: 1; color: var(--cinza); font-size: 15px; }
.extra-cartao .link-seta { margin-top: 4px; font-size: 15px; }
.extra-etiqueta { padding: 1px 9px; border: 1px solid var(--filete); border-radius: 999px; background: #fff; color: var(--cinza); font: 600 11.5px/1.5 var(--sans); letter-spacing: 0.03em; text-transform: uppercase; }
.extra-etiqueta.radar { background: var(--marca); border-color: var(--marca); color: #fff; }
@media (min-width: 720px) {
  .extras-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

/* Menu do celular (☰): só abaixo de 720 px, onde o menu do topo some. "Entrar", "Salvas" e "Painel" vão para dentro dele. Em grupos (rótulo cinza), cada linha com ícone e no mínimo 44 px de altura; se a lista passar da tela, rola dentro do menu. */
.menu-celular-botao { display: none; }
.menu-celular[hidden] { display: none; }
@media (max-width: 719px) {
  .menu-celular-botao { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -6px; border: 0; background: none; font-size: 24px; line-height: 1; color: var(--tinta); cursor: pointer; }
  .topo-acoes .menu-item.entrar { display: none; }
  .menu-celular { display: flex; flex-direction: column; padding: 4px 16px 14px; border-top: 1px solid var(--filete); background: #fff; max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain; }
  .menu-celular .menu-rotulo { margin: 16px 0 0; padding: 0 4px 4px; border-bottom: 1px solid var(--filete); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cinza); }
  .menu-celular .menu-rotulo:first-child { margin-top: 10px; }
  .menu-celular a { display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 10px 4px; border-bottom: 1px solid var(--filete); color: var(--tinta); font-size: 16px; font-weight: 500; text-decoration: none; }
  .menu-celular a .icone { flex: none; color: var(--marca); }
  .menu-celular a.botao { display: block; margin-top: 16px; border-bottom: 0; text-align: center; color: #fff; font-weight: 700; }
  /* A pergunta "O que você está buscando aqui?" (pesquisa.js) não abre por cima do menu aberto. */
  body.menu-aberto .pesquisa { display: none; }
}

/* Menu "Licitações" do topo do computador (28/10/2026): um <details> que abre um painel flutuante com os ícones do menu do celular e uma linha de apoio em cinza. */
.menu-grupo { position: relative; border-bottom: 0; padding: 0; }  /* sem o filete e o respiro do details padrão do site */
.menu-grupo-resumo { display: flex; align-items: center; justify-content: flex-start; gap: 4px; padding: 6px 0; border-bottom: 2px solid transparent; font-size: 15px; font-weight: 500; color: var(--tinta); cursor: pointer; list-style: none; white-space: nowrap; user-select: none; }
.menu-grupo-resumo::-webkit-details-marker { display: none; }
.menu-grupo-resumo::after, .menu-grupo[open] > .menu-grupo-resumo::after { content: none; }  /* sem o "+" e o "−" do summary padrão do site */
.menu-grupo-resumo:hover, .menu-grupo[open] > .menu-grupo-resumo { color: var(--marca); border-bottom-color: var(--marca); }
.menu-grupo-resumo .icone { width: 14px; height: 14px; transition: transform .15s; }
.menu-grupo[open] > .menu-grupo-resumo .icone { transform: rotate(180deg); }
.menu-grupo-painel { position: absolute; z-index: 30; top: calc(100% + 10px); left: -14px; width: 330px; max-width: calc(100vw - 32px); padding: 6px; background: #fff; border: 1px solid var(--filete); border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, .12); }
.menu-grupo-painel a { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 8px; color: var(--tinta); text-decoration: none; }
.menu-grupo-painel a:hover, .menu-grupo-painel a:focus-visible { background: var(--suave); }
.menu-grupo-painel .icone { flex: none; margin-top: 2px; color: var(--marca); }
.menu-grupo-painel strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.menu-grupo-painel small { display: block; font-size: 13px; line-height: 1.35; color: var(--cinza); white-space: normal; }
@media (max-width: 719px) { .menu-grupo { display: none; } }

/* Licitações desertas e fracassadas (`_card_deserta.html`, `_itens_detalhe.html`, aviso do detalhe): o cartão é o compacto da busca; aqui só a lista de itens sem vencedor, o selo e a frase da dispensa. */
.itens-sem-vencedor { list-style: none; margin: 0 0 8px; padding: 0; font-size: 14px; line-height: 1.4; }
.itens-sem-vencedor li { padding: 5px 0; border-top: 1px solid var(--filete); }
.itens-sem-vencedor li:first-child { border-top: 0; padding-top: 0; }
.itens-sem-vencedor .isv-dados { display: block; font-size: 13px; color: var(--cinza); }
.itens-sem-vencedor .isv-mais { font-size: 13px; }
.selo-sv { display: inline-block; margin-right: 4px; padding: 0 7px; border: 1px solid #f0dcae; border-radius: 4px; background: var(--ambar-fundo); font-size: 11.5px; font-weight: 600; line-height: 1.5; color: var(--ambar); vertical-align: 1px; }
.selo-sv.fracassado { border-color: #e7c2bd; background: #fbeae8; color: #8a2a1f; }
.selo-item { display: inline-block; margin-left: 6px; padding: 0 7px; border: 1px solid var(--filete); border-radius: 4px; background: var(--suave); font-size: 11.5px; font-weight: 600; line-height: 1.5; color: var(--cinza); vertical-align: 1px; }
.selo-item.deserto { border-color: #f0dcae; background: var(--ambar-fundo); color: var(--ambar); }
.selo-item.fracassado { border-color: #e7c2bd; background: #fbeae8; color: #8a2a1f; }
.dispensa-sv { margin: 0 0 10px; padding: 8px 10px; border-left: 3px solid var(--marca); border-radius: 0 6px 6px 0; background: var(--suave); font-size: 13.5px; line-height: 1.45; color: var(--tinta); }
/* Cartão de /licitacoes-desertas (`_card_deserta.html`): feito para o celular. Cabeçalho que quebra de linha em vez de cortar, a data da dispensa em destaque, resumo e itens em grade (selo + descrição de até 2 linhas). */
.cartao-deserta .cd-topo { align-items: center; gap: 4px 8px; padding: 8px 14px; background: var(--suave); }
.chip-mod { display: inline-block; padding: 1px 9px; border: 1px solid var(--marca); border-radius: 999px; background: #fff; font-size: 12px; font-weight: 700; line-height: 1.5; color: var(--marca); white-space: nowrap; }
.cd-portal { font-weight: 600; color: var(--tinta); overflow-wrap: anywhere; }
.cd-local { color: var(--cinza); overflow-wrap: anywhere; }
.dispensa-destaque { margin: 0 0 8px; padding: 8px 12px; border-left: 4px solid var(--marca); border-radius: 0 6px 6px 0; background: #e8f1ed; }
.dispensa-destaque p { margin: 0; }
.dispensa-destaque .dd-prazo { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--marca-escura); }
.dispensa-destaque .dd-prazo strong { font-size: 17px; font-weight: 800; }
.dispensa-destaque .dd-nota { margin-top: 1px; font-size: 12px; line-height: 1.35; color: var(--cinza); }
.cd-resumo { margin: 0 0 6px; font-size: 14px; line-height: 1.4; color: var(--cinza); }
.cd-resumo strong { color: var(--tinta); }
.cartao-deserta .itens-sem-vencedor { margin-bottom: 4px; }
.cartao-deserta .itens-sem-vencedor li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 1px 8px; padding: 6px 0; }
.cartao-deserta .itens-sem-vencedor li:first-child { padding-top: 0; }
.cartao-deserta .selo-sv { min-width: 80px; margin: 1px 0 0; text-align: center; }  /* mesma largura: as descrições alinham */
.cartao-deserta .isv-descricao { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.cartao-deserta .itens-sem-vencedor .isv-dados { grid-column: 1 / -1; }
/* Ramo e Portal têm nomes longos: no celular ocupam a linha inteira, com o rótulo ao lado do campo (como a palavra e o ramo da busca), para o valor escolhido não ser cortado. */
@media (max-width: 719px) {
  .filtros .filtro-longo { grid-column: 1 / -1; }
  .filtros label.filtro-longo { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); column-gap: 8px; align-items: center; }
  .filtros label.filtro-longo > select { margin-top: 0; }
}
.dispensa-destaque.neutro { border-left-color: var(--cinza); background: var(--suave); }
.dispensa-destaque.neutro .dd-prazo { color: var(--tinta); }
.cd-mais { margin: 0 0 8px; border-top: 1px solid var(--filete); }
.cd-mais > summary { align-items: center; min-height: 44px; padding: 4px 0; font-size: 14px; color: var(--marca); }
.cd-mais > summary::after { content: "▾"; font-size: 14px; }
.cd-mais[open] > summary::after { content: "▴"; }
.cd-mais .itens-sem-vencedor { margin-bottom: 4px; }
.cd-ver-todos { margin: 0 0 4px; font-size: 13px; }
/* Preço de quem ganhou compras parecidas (detalhe da compra aberta) */
.preco-resumo { margin: 0 0 10px; font-weight: 600; font-size: 1.02rem; line-height: 1.4; color: var(--tinta); }
.preco-item { padding: 10px 0; border-top: 1px solid var(--filete); }
.preco-item h3 { font-family: var(--sans); font-size: 1rem; line-height: 1.35; margin: 0 0 2px; color: var(--tinta); overflow-wrap: anywhere; }
.preco-item .nota { margin: 0 0 6px; }
.preco-lista { list-style: none; margin: 0; padding: 0; }
.preco-lista li { padding: 8px 0 8px 10px; border-left: 3px solid var(--filete); margin: 6px 0; }
.preco-linha { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.preco-valor { font-size: 1.1rem; color: var(--tinta); }
.preco-var { font-size: 13.5px; font-weight: 600; color: var(--cinza); }
.preco-var.abaixo { color: #2c7a5d; }
.preco-var.acima { color: var(--ambar); }
.preco-desc { display: block; font-size: 14px; line-height: 1.35; color: var(--tinta); overflow-wrap: anywhere; }
.preco-dados { display: block; font-size: 13px; line-height: 1.4; color: var(--cinza); overflow-wrap: anywhere; }
.preco-itens { margin: 0 0 10px; padding-left: 18px; }
.preco-itens li { margin: 4px 0; font-size: 15px; }
.preco-convite { padding: 4px 12px 8px; border: 1px solid var(--filete); border-radius: 8px; background: var(--suave); }
#precos-parecidos > .nota { margin: 16px 0; }
/* /licitacoes-desertas: situação em três botões, selects com busca e aviso de carregando (27 e 28/10/2026) */
.so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.filtros .filtro-busca { grid-column: span 2; }
.filtros .seg { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; min-width: 0; margin: 6px 0; padding: 0; border: 0; }
.filtros .seg label { position: relative; margin: 0; }
.filtros .seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.filtros .seg span { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 46px; padding: 4px 6px; border: 1px solid #aeb7b2; border-radius: 6px; background: #fff; color: var(--tinta); font-size: 14px; font-weight: 700; line-height: 1.2; text-align: center; }
.filtros .seg small { font-size: 12px; font-weight: 500; color: var(--cinza); }
.filtros .seg input:checked + span { border-color: var(--marca); background: var(--marca); color: #fff; }
.filtros .seg input:checked + span small { color: rgba(255, 255, 255, 0.85); }
.filtros .seg input:focus-visible + span { outline: 3px solid var(--marca); outline-offset: 2px; }
/* Select com busca (pesquisavel.js): o select nativo fica escondido e o campo de texto faz o papel dele. */
.pq-oculto { display: none !important; }
.pq { position: relative; display: block; scroll-margin-top: 76px; }
.filtros .pq-campo { margin-top: 3px; min-height: 34px; padding: 5px 30px 5px 8px; font-size: 14px; color: var(--tinta); text-overflow: ellipsis; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2355615c' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 10px center; }
.pq-lista { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; max-height: min(15rem, 45vh); margin: 4px 0 0; padding: 4px 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; border: 1px solid #aeb7b2; border-radius: 8px; background: #fff; box-shadow: 0 8px 22px rgba(15, 40, 33, 0.18); }
.pq-lista[hidden] { display: none; }
.pq-lista li { padding: 11px 12px; font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--tinta); cursor: pointer; }
.pq-lista li[aria-selected="true"] { font-weight: 700; color: var(--marca); }
.pq-lista li.ativo { background: #e8f1ed; }
.pq-lista li.pq-vazio { color: var(--cinza); cursor: default; }
@media (max-width: 719px) {
  .filtros .pq-campo { min-height: 42px; padding: 8px 32px 8px 10px; font-size: 16px; }
  .filtros label.filtro-longo > .pq { margin: 0; }
  .filtros label.filtro-longo > .pq > .pq-campo { margin-top: 0; }
  .filtros .seg { margin: 0; }
  .filtros .seg span { min-height: 48px; font-size: 15px; }
  .pq-lista li { padding: 13px 12px; font-size: 16px; }
}
/* Carregando: enquanto o HTMX busca o resultado de um filtro (o formulário ganha `htmx-request`), a lista
   escurece e um aro gira ao lado da contagem. O aro fica no `#lista` (a contagem é trocada junto com a
   lista, então um aviso dentro dela sumiria). Quem prefere menos movimento vê o aro parado. */
#lista { position: relative; }
#lista > * { transition: opacity 0.15s ease; }
.filtros.htmx-request ~ #lista > * { opacity: 0.45; }
.filtros.htmx-request ~ #lista::before { content: ""; position: absolute; top: 3px; right: 2px; z-index: 2; width: 18px; height: 18px; border: 3px solid var(--filete); border-top-color: var(--marca); border-radius: 50%; animation: carregando 0.8s linear infinite; }
#filtros ~ #lista .contagem { padding-right: 28px; }
@keyframes carregando { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  #lista > * { transition: none; }
  .filtros.htmx-request ~ #lista::before { animation: none; border-top-color: var(--marca); border-right-color: var(--marca); }
}


/* Home da Colômbia: a proposta em poucas linhas e a lista de processos logo abaixo (o resultado na
   primeira tela). O título é mais baixo que o de uma página de lista comum. */
.cabecalho-pagina.heroi-co { padding: 22px 0 18px; }
.cabecalho-pagina.heroi-co .sobretitulo { margin-bottom: 6px; }
.cabecalho-pagina.heroi-co h1 { font-size: clamp(1.45rem, 3.6vw, 2.15rem); line-height: 1.2; max-width: 30em; margin-bottom: 12px; }
.cabecalho-pagina.heroi-co .busca { margin-top: 0; }
.cabecalho-pagina.heroi-co .subtitulo { font-size: 15px; margin: 8px 0 12px; }
.cabecalho-pagina.heroi-co + .conteudo-lista { padding-top: 14px; }