/* Vigia da Marca — páginas públicas (landing, consulta, ficha de marca, institucionais).
   Complementa app.css (tokens, .cartao, .botao, .tabela, .hero…). Sem build. */

.pular-para-conteudo { position: absolute; left: -9999px; top: 0; background: var(--tinta); color: #fff; padding: 10px 14px; z-index: 10; }
.pular-para-conteudo:focus { left: 8px; top: 8px; border-radius: var(--raio); }
.somente-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.centro { text-align: center; }
.lista-limpa { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lista-limpa a { color: var(--tinta-suave); text-decoration: none; }
.lista-limpa a:hover { color: var(--tinta); text-decoration: underline; }

/* Cabeçalho */
.site-topo { background: var(--cartao); border-bottom: 1px solid var(--linha); position: sticky; top: 0; z-index: 5; }
.site-topo .site-cabecalho { border-bottom: 0; flex-wrap: wrap; height: auto; min-height: 60px; padding: 8px 0; gap: 10px 18px; }
.site-topo nav { align-items: center; flex-wrap: wrap; gap: 6px 16px; }
.site-topo nav a:not(.botao) { color: var(--tinta-suave); text-decoration: none; }
.site-topo nav a:not(.botao):hover { color: var(--tinta); }
.botao-pequeno { padding: 8px 14px; font-size: 13px; }
.botao-grande { padding: 14px 24px; font-size: 16px; }
@media (max-width: 640px) { .somente-largo { display: none; } }
/* Celular: marca + "Criar conta" na primeira linha; os links numa segunda linha com alvo de 40 px. */
@media (max-width: 560px) {
  .site-topo .site-cabecalho { position: relative; flex-direction: column; align-items: stretch; gap: 4px; padding: 10px 0 2px; }
  .site-topo .app-marca { min-height: 40px; }
  .site-topo nav { margin-left: 0; flex-wrap: nowrap; justify-content: space-between; gap: 4px; font-size: 15px; }
  .site-topo nav a:not(.botao) { min-height: 40px; display: inline-flex; align-items: center; }
  .site-topo nav .botao { position: absolute; right: 0; top: 10px; min-height: 40px; }
  .hero-acoes { width: 100%; }
  .hero-acoes > * { flex: 1 1 100%; justify-content: center; text-align: center; }
  .hero-landing { padding-top: 28px; }
  .form-busca .botao { flex: 1 1 100%; justify-content: center; }
  .cartao-dono .botao-fantasma, .duas-faixas .botao { width: 100%; justify-content: center; }
}

/* Herói */
.hero-landing { padding: 44px 0 28px; flex-wrap: wrap; }
.hero-landing .hero-texto { flex: 1 1 360px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.hero-landing h1 { max-width: 22ch; font-size: clamp(28px, 4.6vw, 42px); }
.hero-landing img { flex: 0 1 420px; width: 100%; max-width: 420px; height: auto; }
.hero-sub { font-size: 17px; color: var(--tinta-suave); max-width: 52ch; margin: 0; }
.hero-acoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Busca */
.busca-rapida { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.form-busca { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 340px; max-width: 560px; }
.form-busca input[type=search] { flex: 1 1 220px; font-family: var(--fonte); font-size: 15px; padding: 12px 14px; border: 1px solid var(--borda-botao); border-radius: var(--raio); background: #fff; color: var(--tinta); min-width: 0; }
.form-busca input[type=search]:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
.form-busca-grande { max-width: 720px; margin-top: 8px; }
.form-busca-grande input[type=search] { font-size: 17px; padding: 14px 16px; }

/* Seções */
.secao { padding: 34px 0 0; }
.secao-topo { padding-top: 40px; }
.secao-titulo { font-size: clamp(22px, 3vw, 28px); margin-bottom: 16px; }
.secao-sub { max-width: 64ch; margin: 8px 0 20px; }
.secao h1 { font-size: clamp(26px, 4vw, 36px); max-width: 26ch; margin: 6px 0 8px; }

/* Promessas */
.promessa img { width: 100%; height: auto; border-radius: 10px; background: var(--cinza-fundo); }
.promessa p { margin: 0; }
.prova { background: var(--acento-lavado); color: var(--acento-escuro); border-radius: var(--raio); padding: 10px 12px; font-size: 13px; }

/* Passos */
.passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.passos li p { margin: 0; font-size: 14px; color: var(--tinta-suave); }
.passo-numero { width: 30px; height: 30px; border-radius: 999px; background: var(--acento); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-weight: 600; }
@media (max-width: 1000px) { .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .passos { grid-template-columns: 1fr; } }

/* Duas faixas: escritórios x dono */
.duas-faixas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.cartao-dono { flex-direction: row; gap: 18px; align-items: flex-start; }
.cartao-dono img { width: 150px; height: auto; border-radius: 10px; flex: none; }
.cartao-dono > div { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
@media (max-width: 860px) { .duas-faixas { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .cartao-dono { flex-direction: column; } .cartao-dono img { width: 100%; max-width: 220px; } }
.lista-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.lista-ticks li { padding-left: 24px; position: relative; }
.lista-ticks li::before { content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 999px; background: var(--acento-lavado) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2l2 2 4-4.4' fill='none' stroke='%231F7A4C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }

/* Planos */
.plano { position: relative; }
.plano-destaque { border: 2px solid var(--acento); }
.plano-selo { position: absolute; top: -12px; right: 16px; }
.plano-preco { display: flex; align-items: baseline; gap: 4px; }
.plano-preco .mono { font-size: 36px; font-weight: 600; }
.plano .botao { margin-top: auto; }
.planos { margin-bottom: 14px; }

/* Comparação */
.comparacao-linha { display: grid; grid-template-columns: 120px 1fr 120px; align-items: center; gap: 12px; }
.comparacao-barra { height: 22px; background: var(--cinza-fundo); border-radius: 999px; overflow: hidden; }
.comparacao-enchimento { height: 100%; border-radius: 999px; }
.comparacao-antigo { background: var(--atencao); }
.comparacao-novo { background: var(--acento); }
.comparacao-rotulo { font-weight: 700; font-size: 14px; }
.comparacao-valor { font-size: 14px; text-align: right; }
@media (max-width: 560px) { .comparacao-linha { grid-template-columns: 1fr; gap: 4px; } .comparacao-valor { text-align: left; } }

/* FAQ */
.faq { display: flex; flex-direction: column; gap: 8px; }
.faq-item { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 0 18px; }
.faq-item summary { cursor: pointer; font-weight: 700; padding: 14px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: var(--mono); color: var(--acento); font-size: 20px; line-height: 1; }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { color: var(--tinta-suave); margin: 0 0 16px; max-width: 70ch; }

.chamada-final { margin-top: 40px; text-align: center; align-items: center; padding: 34px 20px; background: var(--acento-lavado); border-color: var(--acento-borda); }
.chamada-final h2 { font-size: 24px; }

/* Rodapé */
.site-rodape-grande { margin-top: 56px; padding: 32px 0; border-top: 1px solid var(--linha); background: var(--cartao); font-size: 14px; color: var(--tinta-suave); }
.rodape-colunas { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 24px; margin-bottom: 18px; }
.rodape-colunas p { max-width: 36ch; margin-top: 6px; }
@media (max-width: 640px) { .rodape-colunas { grid-template-columns: 1fr; } }
.rodape-fonte { border-top: 1px solid var(--linha); padding-top: 14px; }

/* Texto corrido (termos, privacidade, sobre, contato) */
.texto-legal { max-width: 74ch; padding: 40px 0 0; }
.texto-legal h1 { font-size: clamp(26px, 4vw, 34px); margin: 6px 0 16px; }
.texto-legal h2 { font-size: 19px; margin: 26px 0 8px; }
.texto-legal p, .texto-legal li { color: var(--tinta-suave); }
.texto-legal ul { padding-left: 20px; }

/* Consulta */
.texto-consulta p { margin: 0; color: var(--tinta-suave); max-width: 78ch; }
.glossario { margin: 0; display: grid; gap: 6px 18px; grid-template-columns: minmax(180px, 1fr) 3fr; }
.glossario dt { font-weight: 700; }
.glossario dd { margin: 0; color: var(--tinta-suave); }
@media (max-width: 700px) { .glossario { grid-template-columns: 1fr; } .glossario dd { margin-bottom: 8px; } }
.tabela-cartao { padding: 6px 10px; }
.chamada-vigiar { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; background: var(--acento-lavado); border-color: var(--acento-borda); }
.chamada-vigiar > div { flex: 1 1 380px; }
.chamada-vigiar p { margin: 6px 0 0; }

/* Ficha da marca */
.migalhas { padding: 18px 0 0; color: var(--cinza); }
.migalhas a { color: var(--tinta-suave); }
.ficha-topo { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; padding: 22px 0; }
.ficha-topo > div { flex: 1 1 320px; min-width: 0; }
.ficha-topo h1 { font-size: clamp(26px, 4vw, 36px); margin: 4px 0 10px; overflow-wrap: anywhere; }
.ficha-topo p { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 8px; }
.ficha-topo p.ficha-explica { display: block; max-width: 64ch; }
.ficha-logo { width: 128px; height: 128px; object-fit: contain; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-g); padding: 6px; }
.ficha-dados { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.ficha-dados div { min-width: 0; }
.ficha-dados dt { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--cinza); }
.ficha-dados dd { margin: 2px 0 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .ficha-dados { grid-template-columns: 1fr; } }
.classe-bloco p { margin: 6px 0 0; }
.lista-marcas li { padding: 6px 0; border-bottom: 1px solid var(--linha); }
.lista-marcas li:last-child { border-bottom: 0; }
.lista-marcas a { color: var(--acento-escuro); }
.etiqueta-pequena { font-size: 12.5px; padding: 1px 8px; }
.cartao-vigiar { background: var(--acento-lavado); border-color: var(--acento-borda); }
.linha-tempo .item { grid-template-columns: 110px 1fr; }