/* Estilos das páginas PÚBLICAS (fora do app): a landing e as páginas por intenção.
 *
 * Saiu de dentro do <style> da landing.html quando as páginas por intenção nasceram — quatro
 * cópias de 90 linhas de CSS divergem em semanas, e a primeira coisa a divergir seria a cor da
 * marca. Uma requisição a mais por visita, cacheada dali em diante.
 *
 * ⚠️ Caminhos AQUI dentro resolvem contra ESTE arquivo, não contra a página: por isso
 * `fonts/inter-*.woff2` funciona tanto em `/` (prod) quanto em `/licigo/` (sub-path do dev) —
 * e é também por isso que as páginas devem referenciá-lo como `landing.css` relativo, nunca
 * `/landing.css`, que quebraria no dev. */

/* Inter self-hosted (mesma fonte do app, via @fontsource) — sem isto a landing caía em system-ui
   (Segoe UI no Windows) e o wordmark destoava das telas de login/cadastro. Latin, pesos 400–700. */
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/inter-latin-400.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/inter-latin-500.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/inter-latin-600.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/inter-latin-700.woff2') format('woff2'); }
:root{ --bg:#f6f8fc; --panel:#fff; --fg:#0f1729; --muted:#5a6478; --line:rgba(15,23,41,.10);
  --brand:#2b5cff; --brand-ink:#1e42c8; --brand-soft:rgba(43,92,255,.10); --ok:#16a34a; --band:#0f1729; }
:root[data-mantine-color-scheme="dark"]{ --bg:#0b1020; --panel:#121a2e; --fg:#eaeefb; --muted:#9aa6be;
  --line:rgba(255,255,255,.10); --brand:#5b82ff; --brand-ink:#8aa4ff; --brand-soft:rgba(91,130,255,.16); --band:#060a15; }
*{ box-sizing:border-box; } body{ margin:0; }
.page{ background:var(--bg); color:var(--fg); min-height:100vh; font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; line-height:1.5; }
.wrap{ max-width:1080px; margin:0 auto; padding:0 22px; } a{ color:inherit; text-decoration:none; }
header{ position:sticky; top:0; z-index:5; background:var(--bg); border-bottom:1px solid var(--line); }
.nav{ display:flex; align-items:center; gap:16px; height:60px; }
.brand{ font-weight:700; letter-spacing:-.02em; font-size:18px; } .brand b{ color:var(--brand); }
.spacer{ flex:1; }
.btn{ display:inline-block; font-size:14px; font-weight:600; padding:9px 16px; border-radius:9px; border:1px solid transparent; }
.btn-primary{ background:var(--brand); color:#fff; } .btn-ghost{ color:var(--fg); border:1px solid var(--line); }
.hero{ display:grid; grid-template-columns:1.05fr .95fr; gap:36px; align-items:center; padding:64px 0 40px; }
@media (max-width:860px){ .hero{ grid-template-columns:1fr; padding:44px 0 28px; } }
.eyebrow{ display:inline-block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--brand-ink); background:var(--brand-soft); padding:5px 10px; border-radius:20px; }
h1{ font-size:clamp(30px,4.6vw,50px); line-height:1.06; letter-spacing:-.025em; margin:16px 0 14px; }
.sub{ font-size:17px; color:var(--muted); max-width:44ch; }
.cta-row{ display:flex; gap:12px; margin-top:24px; flex-wrap:wrap; } .note{ font-size:13px; color:var(--muted); margin-top:12px; }
.shot{ background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.shot-bar{ display:flex; gap:6px; padding:10px 12px; border-bottom:1px solid var(--line); }
.dot{ width:10px; height:10px; border-radius:50%; background:var(--line); }
.shot-body{ padding:14px; display:flex; flex-direction:column; gap:10px; }
.kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.kpi{ border:1px solid var(--line); border-radius:9px; padding:8px 10px; } .kpi .l{ font-size:9px; text-transform:uppercase; color:var(--muted); } .kpi .v{ font-size:16px; font-weight:800; }
.rowline{ display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:9px; padding:9px 11px; font-size:12px; }
.tag{ font-size:10px; font-weight:700; color:var(--brand-ink); background:var(--brand-soft); padding:2px 7px; border-radius:6px; }
.stats{ display:flex; gap:28px; flex-wrap:wrap; padding:14px 0 46px; border-bottom:1px solid var(--line); }
.stat b{ font-size:22px; font-weight:800; } .stat span{ color:var(--muted); font-size:13px; display:block; }
section h2{ font-size:clamp(22px,3vw,30px); letter-spacing:-.02em; margin:0 0 6px; } section .lead{ color:var(--muted); max-width:60ch; }
.pad{ padding:56px 0; } .grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:26px; }
@media (max-width:860px){ .grid3{ grid-template-columns:1fr; } }
.card{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px; } .card h3{ margin:6px 0; font-size:16px; } .card p{ margin:0; color:var(--muted); font-size:14px; }
.ico{ width:38px; height:38px; border-radius:9px; background:var(--brand-soft); color:var(--brand-ink); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:20px; line-height:1; }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:26px; } @media (max-width:860px){ .steps{ grid-template-columns:1fr; } }
.step .n{ width:30px; height:30px; border-radius:50%; background:var(--brand); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; } .step h4{ margin:12px 0 4px; font-size:15px; } .step p{ margin:0; color:var(--muted); font-size:14px; }
.check{ display:flex; gap:9px; margin:8px 0; font-size:14px; } .check .c{ color:var(--ok); font-weight:800; }
.band{ background:var(--band); color:#eef2fb; border-radius:18px; padding:40px; text-align:center; margin-top:10px; } .band h2{ color:#fff; }
footer{ border-top:1px solid var(--line); color:var(--muted); font-size:13px; padding:26px 0 40px; display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
/* logo do topo um pouco maior (coeso com o wordmark maior das telas de auth, v1.9.0) */
.nav .brand{ font-size:26px; }
.navlink{ font-size:14px; font-weight:600; color:var(--muted); } .navlink:hover{ color:var(--fg); }
/* âncoras (#planos, #recursos) não ficam sob o header sticky ao rolar */
/* = altura do header sticky: a âncora para com o topo da seção COLADO ao header, então o
   border-top da seção coincide com a borda do header (uma linha só, sem "linha dupla"). */
section[id]{ scroll-margin-top:60px; }
/* seção pública de planos */
.plans{ display:grid; grid-template-columns:repeat(2,minmax(0,340px)); gap:18px; justify-content:center; margin-top:30px; align-items:stretch; }
@media (max-width:720px){ .plans{ grid-template-columns:1fr; } }
.plan{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:24px; display:flex; flex-direction:column; gap:14px; text-align:left; }
.plan.hero-card{ border-color:var(--brand); box-shadow:0 0 0 1px var(--brand); background:linear-gradient(180deg, var(--brand-soft), transparent 40%), var(--panel); }
.p-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.p-name{ font-weight:700; font-size:19px; }
.tag{ font-size:11px; font-weight:800; color:#fff; background:var(--brand); padding:3px 10px; border-radius:20px; }
.p-price{ display:flex; align-items:baseline; gap:6px; } .p-price .amt{ font-size:30px; font-weight:800; letter-spacing:-.02em; } .p-price .per{ color:var(--muted); font-size:14px; }
ul.f{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
ul.f li{ display:flex; gap:9px; font-size:14px; align-items:flex-start; } ul.f .ck{ flex:0 0 auto; color:var(--ok); font-weight:800; }
ul.f li.extra{ font-weight:600; } ul.f li.extra .ck{ color:var(--brand); }
.plan-div{ display:flex; align-items:center; gap:8px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--brand-ink); margin-top:2px; } .plan-div::after{ content:""; flex:1; height:1px; background:var(--line); }
.plan .btn{ margin-top:auto; text-align:center; } .p-note{ color:var(--muted); font-size:12px; text-align:center; margin:0; }
/* FAQ — título fixo à ESQUERDA e o acordeão à direita. Não cria caixa nova: cada pergunta é
   separada pela mesma hairline (--line) que já divide as seções da página, então a seção não
   compete com os cards de recurso (sete painéis empilhados pesavam). O marcador fica à DIREITA,
   como nas referências que olhamos. */
.faq-grid{ display:grid; grid-template-columns:.8fr 1.4fr; gap:44px; align-items:start; }
@media (max-width:820px){ .faq-grid{ grid-template-columns:1fr; gap:22px; } }
.faq details{ border-top:1px solid var(--line); }
.faq details:last-child{ border-bottom:1px solid var(--line); }
.faq summary{ cursor:pointer; list-style:none; display:flex; align-items:center; gap:14px;
  padding:17px 0; font-size:15.5px; font-weight:600; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--brand-ink); }
.faq .n{ font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:12px;
  color:var(--muted); flex:0 0 22px; }
.faq .chev{ margin-left:auto; flex:0 0 auto; width:9px; height:9px;
  border-right:2px solid var(--brand-ink); border-bottom:2px solid var(--brand-ink);
  transform:rotate(45deg) translateY(-2px); transition:transform .18s ease; }
.faq details[open] .chev{ transform:rotate(-135deg) translateY(-2px); }
.faq p{ margin:0; padding:0 40px 20px 36px; color:var(--muted); font-size:14.5px;
  line-height:1.65; max-width:64ch; }
.faq strong{ color:var(--fg); font-weight:600; }
@media (prefers-reduced-motion:reduce){ .faq .chev{ transition:none; } }

/* --- páginas por intenção (SEO) -------------------------------------------------------------
 * A landing é uma grade de blocos; estas são TEXTO LONGO, que pede outra medida: coluna estreita
 * (~68ch), respiro entre parágrafos e hierarquia visível de h2/h3 — alguém lendo 2.000 palavras
 * numa coluna de 1080px desiste no terceiro parágrafo. */
.artigo{ max-width:70ch; }
.artigo h2{ font-size:clamp(20px,2.6vw,27px); letter-spacing:-.02em; margin:44px 0 10px; }
.artigo h2:first-child{ margin-top:0; }
.artigo h3{ font-size:17px; margin:26px 0 6px; }
.artigo p{ margin:0 0 14px; color:var(--muted); font-size:16px; line-height:1.68; }
.artigo p strong, .artigo li strong{ color:var(--fg); font-weight:600; }
.artigo ul{ margin:0 0 16px; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:9px; }
/* ⚠️ O `li` é BLOCO, e o marcador vem posicionado — nunca `display:flex` aqui. Com o li em flex,
   cada filho vira um item flex INDEPENDENTE: um `<strong>` ou `<a>` no meio da frase ganha coluna
   própria e o texto em volta se parte em torno dele ("Abrir | edital e os anexos | — termo de
   referência…" em três colunas). O sintoma aparece em toda lista que tenha negrito ou link no meio,
   que é quase todas. */
.artigo ul li{ position:relative; padding-left:19px; color:var(--muted); font-size:16px; line-height:1.6; }
.artigo ul li::before{ content:"–"; position:absolute; left:0; top:0; color:var(--brand-ink); font-weight:700; }
.artigo .destaque{ border-left:3px solid var(--brand); background:var(--brand-soft); border-radius:0 10px 10px 0;
  padding:14px 18px; margin:22px 0; } .artigo .destaque p{ margin:0; color:var(--fg); font-size:15px; }
/* Trilha de volta ao topo do site: uma página por intenção é porta de ENTRADA, então quem chega
   nela nunca passou pela home — sem isto, o visitante não sabe onde está. */
.trilha{ font-size:13px; color:var(--muted); padding:22px 0 0; }
.trilha a{ color:var(--brand-ink); font-weight:600; }
.trilha span{ margin:0 7px; opacity:.5; }
/* Rodapé de páginas irmãs: liga as páginas entre si (o Google acha todas a partir de qualquer
   uma) e oferece o próximo passo a quem leu até o fim. */
.irmas{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:24px; }
@media (max-width:860px){ .irmas{ grid-template-columns:1fr; } }
.irmas a{ border:1px solid var(--line); border-radius:12px; padding:16px; background:var(--panel); }
.irmas a:hover{ border-color:var(--brand); }
.irmas .t{ font-weight:600; font-size:15px; margin-bottom:4px; } .irmas .d{ color:var(--muted); font-size:13.5px; }
/* Rodapé em colunas. Substituiu a linha solta de links que ficava entre a faixa de CTA e o rodapé:
   sem título e sem hierarquia, ela lia-se como sobra de conteúdo. */
footer.rodape{ border-top:1px solid var(--line); margin-top:8px; padding:34px 0 44px; display:block; }
.rodape-cols{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:30px; }
@media (max-width:760px){ .rodape-cols{ grid-template-columns:1fr 1fr; gap:26px; } }
.rodape-desc{ color:var(--muted); font-size:13px; max-width:34ch; margin:10px 0 0; }
.rodape-tit{ font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin-bottom:11px; }
.rodape-cols ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.rodape-cols li{ font-size:13.5px; }
.rodape-cols a{ color:var(--muted); } .rodape-cols a:hover{ color:var(--fg); }
.rodape-base{ margin-top:30px; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:12.5px; }

/* Card que é link (os dois recursos com página própria). A borda mais viva e o "Saiba mais" existem
   para distinguir do card comum ao lado — sem isso, seis cards iguais dos quais dois clicam. */
a.card-link{ display:block; border-color:color-mix(in srgb, var(--brand) 38%, var(--line)); }
a.card-link:hover{ border-color:var(--brand); }
a.card-link .saiba{ display:inline-block; margin-top:10px; font-size:13px; font-weight:600; color:var(--brand-ink); }
a.card-link:hover .saiba::after{ content:" →"; }
a.card-link .saiba::after{ content:" →"; }