/* LeadIA by Reveno · Design system claro, denso e de dados (modelo IDE).
   Laranja Reveno só em ação primária e destaque; o resto é tinta e cinza.
   Contraste AA em todo par texto e fundo. Sem dependência externa. */
@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/inter-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/inter-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/inter-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/inter-latin-700-normal.woff2) format("woff2"); }

:root {
  --canvas: #f5f6f8; --surface: #ffffff; --raised: #f8f9fb; --hover: #f1f3f6; --select: #fff4ec;
  --line: #e2e6ec; --line-soft: #edf0f4; --line-strong: #cfd5de;
  --text: #0f172a; --text-2: #1e293b; --text-3: #475569; --muted: #556072;
  --brand: #c2410c; --brand-strong: #9a3412; --brand-vivo: #f97316; --brand-soft: #fff1e6; --on-brand: #ffffff;
  --ok: #047857; --ok-soft: #ecfdf5; --warn: #b45309; --warn-soft: #fffbeb; --danger: #b91c1c; --danger-soft: #fef2f2;
  --info: #1d4ed8; --info-soft: #eff6ff;
  --ink: #0b1220;
  --radius: 10px; --radius-sm: 7px; --radius-xs: 5px;
  --shadow-1: 0 1px 2px rgb(15 23 42 / .06), 0 1px 1px rgb(15 23 42 / .04);
  --shadow-2: 0 12px 32px -12px rgb(15 23 42 / .18), 0 2px 6px rgb(15 23 42 / .06);
  --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --gutter: clamp(1rem, 4vw, 2.5rem); --max: 76rem;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--canvas); color: var(--text-2); font: 400 .9375rem/1.55 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-strong); text-decoration: underline; text-underline-offset: .2em; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0 0 .5em; color: var(--text); line-height: 1.2; letter-spacing: -.015em; font-weight: 650; }
p { margin: 0 0 1em; }
code, pre, .mono { font-family: var(--mono); }
:focus-visible { outline: 2px solid var(--brand-vivo); outline-offset: 2px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: -999px; top: .5rem; z-index: 90; padding: .5rem 1rem; border-radius: var(--radius-sm); background: var(--ink); color: #fff; }
.pular:focus { left: .5rem; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.ajuda { color: var(--muted); font-size: .8125rem; }
.meta { color: var(--muted); font-size: .8125rem; }
.num, .tabular { font-variant-numeric: tabular-nums; }

/* Marca */
.marca { display: inline-flex; align-items: center; gap: .55rem; color: var(--text); font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; text-decoration: none; }
.marca:hover { color: var(--text); text-decoration: none; }
.marca img { width: 26px; height: 26px; }
.marca b { color: var(--brand); font-weight: 700; }
.marca small { color: var(--muted); font-size: .75rem; font-weight: 500; }

/* Botões */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 38px; padding: .5rem 1rem; border: 1px solid transparent; border-radius: var(--radius-sm);
  background: var(--brand); color: var(--on-brand); font: 600 .875rem/1.2 var(--font); text-decoration: none; cursor: pointer; box-shadow: var(--shadow-1); transition: background .12s, border-color .12s, box-shadow .12s; white-space: nowrap; }
.botao:hover { background: var(--brand-strong); color: var(--on-brand); text-decoration: none; }
.botao:disabled { opacity: .55; cursor: not-allowed; }
.botao--sec { border-color: var(--line-strong); background: var(--surface); color: var(--text); }
.botao--sec:hover { border-color: #b8c0cc; background: var(--hover); color: var(--text); }
.botao--peq { min-height: 32px; padding: .3rem .7rem; font-size: .8125rem; }
.botao--fantasma { border-color: transparent; background: transparent; color: var(--text-3); box-shadow: none; }
.botao--fantasma:hover { background: var(--hover); color: var(--text); }
.botao--perigo { border-color: #f1c4c4; background: var(--surface); color: var(--danger); }
.botao--perigo:hover { background: var(--danger-soft); color: var(--danger); }
.botao--google { width: 100%; border-color: var(--line-strong); background: var(--surface); color: var(--text); }
.botao--google:hover { background: var(--hover); color: var(--text); }
.link-botao { padding: 0; border: 0; background: none; color: var(--brand); font: 500 .8125rem var(--font); cursor: pointer; text-align: left; }
.link-botao:hover { color: var(--brand-strong); text-decoration: underline; }
.copiar { margin-left: .4rem; padding: .05rem .4rem; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--surface); color: var(--text-3); font-size: .75rem; cursor: pointer; }
.copiar:hover { border-color: var(--line-strong); color: var(--text); }
.fecha { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-3); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.fecha:hover { background: var(--hover); color: var(--text); }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1.25rem; }

/* Formulários */
.campo { display: grid; gap: .3rem; margin-bottom: .85rem; }
.campo label, fieldset legend { color: var(--text-2); font-size: .8125rem; font-weight: 600; }
input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="number"], input[type="search"], select, textarea {
  width: 100%; min-height: 36px; padding: .45rem .65rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: 400 .875rem var(--font); }
input::placeholder, textarea::placeholder { color: #8a94a6; }
input:hover, select:hover, textarea:hover { border-color: #b8c0cc; }
input:focus, select:focus, textarea:focus { border-color: var(--brand-vivo); outline: none; box-shadow: 0 0 0 3px rgb(249 115 22 / .18); }
textarea { min-height: 8rem; font: 400 .8125rem/1.5 var(--mono); }
fieldset { margin: 0 0 .85rem; padding: 0; border: 0; }
fieldset legend { margin-bottom: .35rem; padding: 0; }
.check { display: flex; align-items: flex-start; gap: .5rem; color: var(--text-2); font-size: .8125rem; line-height: 1.4; cursor: pointer; }
.check input { flex: none; width: 15px; height: 15px; margin: .12rem 0 0; accent-color: var(--brand); }
.lista-checks { display: grid; gap: .3rem; }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.campo-erro { color: var(--danger); font-size: .78rem; }
.senha-campo { display: flex; align-items: center; gap: .5rem; }
.senha-campo input { flex: 1; }
.linha-form { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 1rem; }
.linha-form input { flex: 1 1 14rem; width: auto; }

/* Tags e avisos */
.tag { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .5rem; border: 1px solid #fed7aa; border-radius: 999px; background: var(--brand-soft); color: var(--brand-strong); font-size: .75rem; font-weight: 600; white-space: nowrap; line-height: 1.45; }
.tag--ok { border-color: #a7f3d0; background: var(--ok-soft); color: var(--ok); }
.tag--neutra { border-color: var(--line); background: var(--raised); color: var(--text-3); }
.tag--alerta { border-color: #fde68a; background: var(--warn-soft); color: var(--warn); }
.tag--perigo { border-color: #fecaca; background: var(--danger-soft); color: var(--danger); }
.tag--info { border-color: #bfdbfe; background: var(--info-soft); color: var(--info); }
.rotulo-inline { margin-left: .4rem; vertical-align: middle; }
.aviso { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .7rem .9rem; border: 1px solid #fed7aa; border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--text-2); font-size: .8125rem; }
.aviso strong { color: var(--text); }
.aviso--pacote { margin-top: 1rem; }
.erro-msg, .ok-msg { padding: .6rem .8rem; border-radius: var(--radius-sm); font-size: .8125rem; }
.erro-msg { border: 1px solid #fecaca; background: var(--danger-soft); color: var(--danger); }
.ok-msg { border: 1px solid #a7f3d0; background: var(--ok-soft); color: var(--ok); }
.toast { position: fixed; bottom: 2.6rem; left: 50%; z-index: 80; max-width: calc(100vw - 2rem); padding: .65rem 1rem; border-radius: var(--radius-sm); background: var(--ink); color: #fff; font-size: .8125rem; transform: translateX(-50%); box-shadow: var(--shadow-2); }

/* Cartões, KPIs e tabelas */
.cartao { padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1); }
.cartao h3 { margin-bottom: .35rem; font-size: 1rem; }
.cartao p { color: var(--text-3); font-size: .875rem; }
.cartao .n { display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; margin-bottom: .7rem; border-radius: 6px; background: var(--brand-soft); color: var(--brand); font-weight: 700; font-size: .85rem; }
.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; }
.kpi { padding: .85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1); }
.kpi span { display: block; color: var(--muted); font-size: .75rem; font-weight: 600; }
.kpi strong { display: block; margin-top: .2rem; color: var(--text); font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi small { color: var(--muted); font-size: .75rem; }
.kpi--marca strong { color: var(--brand); }
.tabela-rolagem { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.tabela { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.tabela th, .tabela td { padding: .55rem .8rem; border-bottom: 1px solid var(--line-soft); text-align: left; white-space: nowrap; }
.tabela th { position: sticky; top: 0; background: var(--raised); color: var(--muted); font-size: .75rem; font-weight: 600; }
.tabela td { color: var(--text-2); }
.tabela td:nth-child(2) { white-space: normal; min-width: 10rem; }
.tabela tbody tr:hover { background: var(--hover); }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.compara { width: 100%; border-collapse: collapse; font-size: .875rem; }
.compara th, .compara td { padding: .7rem .9rem; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
.compara th { background: var(--raised); color: var(--muted); font-size: .75rem; font-weight: 600; }
.compara td:first-child { color: var(--text); font-weight: 600; }
.linhas { display: grid; gap: 0; margin: 0 0 1rem; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.linhas li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; padding: .55rem .8rem; border-bottom: 1px solid var(--line-soft); font-size: .8125rem; }
.linhas li:last-child { border-bottom: 0; }
.linhas strong { color: var(--text); }
/* Reporte por contato: motivo escolhido no lugar do botão. */
.motivo-reporte { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.motivo-reporte select { width: auto; max-width: 16rem; }
.contato--reportado .valor { color: var(--muted); text-decoration: line-through; }
.subtitulo-contatos { margin: .9rem 0 .35rem; color: var(--muted); font-size: .75rem; font-weight: 600; }
/* Contatos abertos pelo time: filtro por pessoa e período (só o dono vê). */
.abertos-filtros { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem 1rem; margin: 0 0 .75rem; }
.abertos-filtros .ajuda { flex-basis: 100%; margin: 0; }
.campo-inline { display: grid; gap: .25rem; color: var(--muted); font-size: .75rem; }
.campo-inline select { width: auto; min-width: 12rem; }
code { padding: .08rem .35rem; border-radius: 4px; background: var(--hover); color: var(--text); font-size: max(12px, .86em); overflow-wrap: anywhere; }
pre { margin: 0 0 1.2rem; padding: .9rem 1rem; border: 1px solid #1e293b; border-radius: var(--radius-sm); background: var(--ink); color: #e2e8f0; overflow-x: auto; font-size: .8125rem; }
pre code { padding: 0; background: none; color: inherit; font-size: inherit; white-space: pre; overflow-wrap: normal; }
pre:focus-visible { outline: 2px solid var(--brand-vivo); outline-offset: 2px; }

/* Diálogos */
dialog { max-width: min(32rem, calc(100vw - 2rem)); padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text-2); box-shadow: var(--shadow-2); }
dialog::backdrop { background: rgb(15 23 42 / .35); }
dialog:has(.modal--largo) { width: min(40rem, calc(100vw - 2rem)); max-width: min(40rem, calc(100vw - 2rem)); }
.modal { padding: 1.4rem; }
.modal h2 { font-size: 1.15rem; }

/* ========== Páginas públicas (venda, entrar, termos, SEO) ========== */
.topo { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--line); background: rgb(255 255 255 / .9); backdrop-filter: saturate(1.4) blur(8px); }
.topo .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 56px; }
.topo nav { display: flex; align-items: center; gap: .25rem; }
.topo nav a:not(.botao) { padding: .4rem .65rem; border-radius: var(--radius-sm); color: var(--text-3); font-size: .875rem; font-weight: 500; text-decoration: none; }
.topo nav a:not(.botao):hover, .topo nav a[aria-current="page"] { background: var(--hover); color: var(--text); }
.saldo { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.saldo i { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-vivo); }
body:has(> .rodape) { display: flex; flex-direction: column; min-height: 100svh; }
body:has(> .rodape) > main { flex: 1; }
.rodape { margin-top: 3rem; padding: 1.75rem 0 2.25rem; border-top: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: .8125rem; }
.rodape .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.rodape nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.rodape a { color: var(--text-3); }
.olho { display: inline-block; margin-bottom: .75rem; color: var(--brand); font: 700 .75rem/1.4 var(--font); }
.lead { color: var(--text-3); font-size: 1.0625rem; }
.hero { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--line); background: radial-gradient(circle at 1px 1px, #e3e7ee 1px, transparent 0) 0 0 / 22px 22px, var(--canvas); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
.hero h1 { max-width: 15ch; font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 700; letter-spacing: -.03em; }
.hero h1 { text-wrap: balance; }
.hero p.lead { max-width: 46ch; font-size: clamp(1rem, 1.5vw, 1.15rem); }
.selo { margin-top: .85rem; color: var(--muted); font-size: .8125rem; }
.vitrine { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-2); overflow: hidden; }
.vitrine-topo { display: flex; align-items: center; gap: .4rem; padding: .55rem .8rem; border-bottom: 1px solid var(--line); background: var(--raised); }
.vitrine-topo i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.vitrine { margin: 0; }
.vitrine-cmd { flex: 1; min-width: 0; margin-left: .5rem; padding: .25rem .6rem; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text-3); font: 500 .75rem var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.vitrine-grade { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.vitrine-grade th { padding: .45rem .75rem; border-bottom: 1px solid var(--line); background: var(--raised); color: var(--muted); font-size: .75rem; font-weight: 600; text-align: left; }
.vitrine-grade td { padding: .55rem .75rem; border-bottom: 1px solid var(--line-soft); color: var(--text-3); vertical-align: top; white-space: nowrap; }
.vitrine-grade td strong { display: block; color: var(--text); font-weight: 600; }
.vitrine-grade td small { color: var(--muted); font-size: .75rem; }
.vitrine-grade .num { text-align: right; color: var(--text); font-weight: 600; }
.vitrine-grade tr.sel td { background: var(--select); }
.vitrine-grade tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--brand-vivo); }
.vitrine figcaption { padding: .55rem .75rem; color: var(--muted); font-size: .75rem; }
.pr-96 { width: 96%; } .pr-88 { width: 88%; } .pr-81 { width: 81%; } .pr-64 { width: 64%; }
.auth-caixa .botao[type="submit"] { width: 100%; }
.vitrine-corpo { display: grid; gap: 0; padding: 0; }
.linha-demo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem 1rem; padding: .65rem .9rem; border-bottom: 1px solid var(--line-soft); }
.linha-demo strong { color: var(--text); font-size: .875rem; }
.linha-demo span { color: var(--muted); font-size: .78rem; }
.linha-demo .tag { align-self: center; grid-row: span 2; }
.numeros { border-bottom: 1px solid var(--line); background: var(--surface); }
.numeros .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; padding-block: 1.4rem; }
.numero strong { display: block; color: var(--text); font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.numero span { color: var(--muted); font-size: .8125rem; }
.secao { padding: clamp(2.75rem, 6vw, 4.5rem) 0; }
.secao h2 { max-width: 26ch; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.025em; }
.secao .intro { max-width: 62ch; color: var(--text-3); }
.grade-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; margin-top: 1.75rem; }
.planos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; margin-top: 1.75rem; }
.plano { display: flex; flex-direction: column; gap: .4rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1); }
.plano--destaque { border-color: var(--brand-vivo); box-shadow: 0 0 0 1px var(--brand-vivo) inset, var(--shadow-2); }
.plano h3 { margin: 0; font-size: 1rem; }
.plano .preco { margin: 0; color: var(--text); font-size: 1.9rem; font-weight: 700; letter-spacing: -.03em; }
.plano .preco small { color: var(--muted); font-size: .8125rem; font-weight: 500; }
.plano ul { flex: 1; margin: .4rem 0 1rem; padding: 0; list-style: none; color: var(--text-3); font-size: .8125rem; }
.plano li { padding: .28rem 0 .28rem 1.3rem; background: no-repeat left .62rem / .65rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6.5 4.5 10 11 2' fill='none' stroke='%23c2410c' stroke-width='2'/%3E%3C/svg%3E"); }
.conta-exemplo { margin-top: 1rem; }
.faq details { padding: .9rem 0; border-bottom: 1px solid var(--line); }
.faq summary { color: var(--text); font-weight: 600; cursor: pointer; }
.faq p { margin: .6rem 0 0; color: var(--text-3); }
.cta-final { padding: clamp(2rem, 5vw, 3rem); border: 1px solid var(--line); border-radius: 14px; background: radial-gradient(circle at 1px 1px, #e3e7ee 1px, transparent 0) 0 0 / 22px 22px, var(--surface); text-align: center; box-shadow: var(--shadow-1); }
.cta-final h2 { margin-inline: auto; }
.cta-final .intro { margin-inline: auto; }
.cta-final .acoes { justify-content: center; }
.pagina { padding-block: 2rem 3rem; }
.pagina h1 { font-size: clamp(1.5rem, 3vw, 2rem); }
.pagina section { margin-top: 2rem; }
.doc h2 { margin-top: 2rem; font-size: 1.25rem; }
.doc ul { color: var(--text-3); }

/* Entrar */
.auth { display: grid; place-items: center; min-height: calc(100svh - 57px); padding: 2rem var(--gutter); background: radial-gradient(circle at 1px 1px, #e3e7ee 1px, transparent 0) 0 0 / 22px 22px, var(--canvas); }
.auth-caixa { width: 100%; max-width: 25rem; padding: clamp(1.3rem, 4vw, 1.8rem); border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-2); }
.auth-caixa h1 { font-size: 1.4rem; }
.abas { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; margin-bottom: 1.1rem; padding: .2rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--raised); }
.abas button { min-height: 34px; border: 0; border-radius: 5px; background: transparent; color: var(--text-3); font: 600 .8125rem var(--font); cursor: pointer; }
.abas button[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.ou { display: flex; align-items: center; gap: .75rem; margin: 1rem 0; color: var(--muted); font-size: .78rem; }
.ou::before, .ou::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Páginas públicas por atividade */
.migalhas ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: 0 0 1rem; padding: 0; list-style: none; color: var(--muted); font-size: .8125rem; }
.plano li.nao { color: var(--muted); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6h8' fill='none' stroke='%23556072' stroke-width='2'/%3E%3C/svg%3E"); }
.migalhas li + li::before { content: "/"; margin-right: .5rem; color: var(--line-strong); }
.migalhas a { color: var(--text-3); }
.seo h1 { font-size: clamp(1.5rem, 3.6vw, 2.1rem); }
.seo h2 { margin-top: 2rem; font-size: 1.1rem; }
.seo-numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin: 1.25rem 0; }
.seo-numeros div { display: grid; gap: .15rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1); }
.seo-numeros strong { color: var(--text); font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.seo-numeros span { color: var(--muted); font-size: .78rem; }
.seo-lista { display: grid; gap: 0; margin: 0 0 1rem; padding: 0; list-style: none; }
.seo-lista--colunas { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); column-gap: 1.5rem; }
.seo-lista li { display: flex; justify-content: space-between; gap: .75rem; padding: .35rem 0; border-bottom: 1px solid var(--line-soft); font-size: .875rem; }
.seo-lista span { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.seo-cta { margin-top: 2.25rem; }

/* ========== App no modelo IDE ========== */
.app-corpo { height: 100svh; overflow: hidden; }
.shell { display: grid; height: 100svh; grid-template-columns: 56px var(--lateral, 288px) minmax(0, 1fr) var(--inspetor, 0px); grid-template-rows: 48px minmax(0, 1fr) 28px;
  grid-template-areas: "barra barra barra barra" "trilho lateral area inspetor" "status status status status"; }
.shell--sem-lateral { --lateral: 0px; }
.shell--inspetor { --inspetor: min(460px, 38vw); }
.barra { grid-area: barra; display: flex; align-items: center; gap: .75rem; padding: 0 .75rem 0 .9rem; border-bottom: 1px solid var(--line); background: var(--surface); }
.barra .marca { min-width: 13rem; }
.comando { position: relative; flex: 1; max-width: 40rem; }
.comando input { min-height: 34px; padding-left: 2.1rem; padding-right: 3rem; border-color: var(--line); background: var(--raised); }
.comando input:focus { background: var(--surface); }
.comando svg { position: absolute; top: 50%; left: .7rem; width: 15px; height: 15px; color: var(--muted); transform: translateY(-50%); pointer-events: none; }
.comando kbd { position: absolute; top: 50%; right: .55rem; padding: .05rem .35rem; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--muted); font: 500 .7rem var(--font); transform: translateY(-50%); }
.barra-acoes { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.barra-acoes a:not(.botao) { padding: .35rem .55rem; border-radius: var(--radius-sm); color: var(--text-3); font-size: .8125rem; font-weight: 500; }
.barra-acoes a:not(.botao):hover { background: var(--hover); color: var(--text); text-decoration: none; }
.plano-selo { padding: .15rem .5rem; border-radius: 999px; background: var(--ink); color: #fff; font-size: .7rem; font-weight: 700; }
.trilho { grid-area: trilho; display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .5rem 0; border-right: 1px solid var(--line); background: var(--surface); }
.trilho a, .trilho button { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); cursor: pointer; }
.trilho a:hover, .trilho button:hover { background: var(--hover); color: var(--text); text-decoration: none; }
.trilho [aria-current="page"], .trilho [aria-pressed="true"] { background: var(--brand-soft); color: var(--brand); }
.trilho [aria-current="page"]::before, .trilho [aria-pressed="true"]::before { content: ""; position: absolute; left: -8px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand-vivo); }
.trilho svg { width: 19px; height: 19px; }
.trilho .rotulo { position: absolute; left: 48px; z-index: 40; padding: .25rem .5rem; border-radius: var(--radius-xs); background: var(--ink); color: #fff; font-size: .75rem; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .1s; }
.trilho a:hover .rotulo, .trilho button:hover .rotulo, .trilho a:focus-visible .rotulo, .trilho button:focus-visible .rotulo { opacity: 1; }
.trilho .espaco { flex: 1; }
.lateral { grid-area: lateral; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: var(--surface); }
.lateral-topo { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem .9rem; border-bottom: 1px solid var(--line-soft); }
.lateral-topo h2 { margin: 0; font-size: .78rem; font-weight: 700; color: var(--text-3); }
.area { grid-area: area; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: auto; background: var(--canvas); }
.area-cabeca { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; padding: .75rem 1.1rem; border-bottom: 1px solid var(--line); background: rgb(255 255 255 / .94); backdrop-filter: blur(6px); }
.area-cabeca h1 { margin: 0; font-size: 1.05rem; letter-spacing: -.01em; }
.area-cabeca p { margin: .1rem 0 0; color: var(--muted); font-size: .78rem; }
.area-corpo { padding: 1rem 1.1rem 2rem; }
.inspetor { grid-area: inspetor; display: flex; flex-direction: column; min-width: 0; min-height: 0; border-left: 1px solid var(--line); background: var(--surface); }
.status { grid-area: status; display: flex; align-items: center; gap: 1.1rem; padding: 0 .9rem; border-top: 1px solid var(--line); background: var(--raised); color: var(--muted); font-size: .75rem; white-space: nowrap; overflow: hidden; }
.status > span { display: inline-flex; align-items: center; gap: .35rem; }
.status > span + span:not(.direita) { padding-left: 1.1rem; border-left: 1px solid var(--line); }
.status kbd { padding: 0 .3rem; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--surface); color: var(--text-3); font: 600 .75rem/1.5 var(--font); }
.status .direita { gap: .3rem; }
.status i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.status .direita { margin-left: auto; }
.status b { color: var(--text-2); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Filtros (painel lateral) */
.filtros { flex: 1; min-height: 0; overflow-y: auto; padding: .4rem 0 0; }
.filtros > .campo, .filtros > fieldset, .filtros > details:not(.grupo) { margin: 0; padding: .6rem .9rem; }
.grupo { border-bottom: 1px solid var(--line-soft); }
.grupo > summary { display: flex; align-items: center; justify-content: space-between; padding: .6rem .9rem; color: var(--text-2); font-size: .8125rem; font-weight: 600; list-style: none; cursor: pointer; }
.grupo > summary::-webkit-details-marker { display: none; }
.grupo > summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); transition: transform .12s; }
.grupo[open] > summary::after { transform: rotate(45deg); }
.grupo > summary:hover { background: var(--hover); }
.grupo-corpo { padding: .1rem .9rem .8rem; }
.grupo-corpo > .campo:last-child, .grupo-corpo > fieldset:last-child { margin-bottom: 0; }
.ufs { display: grid; grid-template-columns: repeat(6, 1fr); gap: .25rem; }
.ufs label { position: relative; display: grid; place-items: center; min-height: 28px; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--surface); color: var(--text-3); font-size: .75rem; font-weight: 600; cursor: pointer; }
.ufs label:hover { border-color: var(--line-strong); }
.ufs input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ufs label:has(input:checked) { border-color: var(--brand-vivo); background: var(--brand-soft); color: var(--brand-strong); }
.ufs label:has(input:focus-visible) { outline: 2px solid var(--brand-vivo); outline-offset: 1px; }
.filtros .acoes { position: sticky; bottom: 0; z-index: 2; margin: 0; padding: .65rem .9rem; border-top: 1px solid var(--line); background: var(--surface); }
.filtros .acoes .botao { flex: 1; }
.minhas-listas { margin: .2rem .9rem .5rem; padding: .5rem .65rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--raised); }
.minhas-listas summary { color: var(--text-2); font-weight: 600; font-size: .8125rem; cursor: pointer; }
.minhas-listas ul { display: grid; gap: .45rem; margin: .55rem 0 0; padding: 0; list-style: none; }
.lista-item { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; font-size: .8125rem; }
.lista-item > .link-botao:first-child { color: var(--text); font-weight: 600; }
.mostrar-filtros { display: none; }

/* Barra de ferramentas da área */
.ferramentas { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.modos { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--raised); }
.modo { min-height: 28px; padding: .2rem .7rem; border: 0; border-radius: 5px; background: transparent; color: var(--text-3); font: 600 .78rem var(--font); cursor: pointer; }
.modo[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.ordem { width: auto; min-height: 32px; padding: .25rem .55rem; font-size: .8125rem; }
.novidades-opcoes { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; padding: .55rem 1.1rem; border-bottom: 1px solid var(--line); background: var(--surface); }
.novidades-opcoes select { width: auto; min-height: 30px; }
.como-prioridade { font-size: .78rem; }
.como-prioridade summary { color: var(--text-3); cursor: pointer; }
.como-prioridade p { max-width: 30rem; margin: .35rem 0 0; color: var(--muted); }
.avisos-area { display: grid; gap: .5rem; padding: .75rem 1.1rem 0; }
.avisos-area:empty { display: none; }

/* Grade de resultados */
.vista-grade, [data-vista-grade] { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.grade-envolta { flex: 1; min-height: 14rem; margin: .75rem 1.1rem 0; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1); }
.grade { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .8125rem; }
.grade th { position: sticky; top: 0; z-index: 2; padding: .5rem .6rem; border-bottom: 1px solid var(--line); background: var(--raised); color: var(--muted); font-size: .75rem; font-weight: 700; text-align: left; white-space: nowrap; }
.grade th:first-child, .grade td:first-child { padding-left: .9rem; }
.grade th button { display: inline-flex; align-items: center; gap: .25rem; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.grade th button:hover { color: var(--text); }
.grade th button::after { content: "↕"; opacity: .35; font-size: .8em; }
.grade th[aria-sort] button { color: var(--brand); }
.grade th[aria-sort] button::after { content: "↓"; opacity: 1; }
.grade td { max-width: 0; padding: .45rem .6rem; border-bottom: 1px solid var(--line-soft); color: var(--text-2); vertical-align: top; white-space: nowrap; }
.grade td > *, .grade td .linha1 { display: block; overflow: hidden; text-overflow: ellipsis; }
.grade td.c-sinais > * { display: inline-flex; }
.grade tbody tr { cursor: pointer; }
.grade tbody tr:hover td { background: var(--hover); }
.grade tbody tr[aria-selected="true"] td { background: var(--select); }
.grade tbody tr[aria-selected="true"] td:first-child { box-shadow: inset 3px 0 0 var(--brand-vivo); }
.grade tbody tr:focus-visible { outline: 2px solid var(--brand-vivo); outline-offset: -2px; }
.grade tbody tr:last-child td { border-bottom: 0; }
.grade .c-empresa { width: 30%; }
.grade .c-empresa strong { color: var(--text); font-weight: 600; }
.grade .c-empresa small { color: var(--muted); font-size: .75rem; }
.grade .c-empresa small .desde, .vitrine-grade small .fat { margin-left: .6rem; }
.grade .c-local { width: 24%; }
.grade .c-porte { width: 11%; }
.grade .num { width: 7%; text-align: right; font-variant-numeric: tabular-nums; }
.grade .c-cont { width: 8%; }
.grade .c-sinais { width: 13%; white-space: normal; }
.grade .c-sinais .tag { margin: 0 .2rem .2rem 0; }
.grade .c-prio { width: 8.25rem; }
.grade .sub { color: var(--muted); font-size: .75rem; }
.grade .sub--ok { color: var(--ok); font-weight: 600; }
.grade .zero { color: #94a0b0; }
.grade .vazio td { max-width: none; padding: 3rem 1rem; color: var(--muted); text-align: center; white-space: normal; cursor: default; }
.mono { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.grade .c-empresa .so-estreito, .so-estreito { display: none; }
.barra-prio { display: inline-flex !important; align-items: center; gap: .45rem; }
.barra-prio i { position: relative; display: block; width: 46px; height: 6px; border-radius: 3px; background: var(--line-soft); overflow: hidden; }
.barra-prio i b { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--brand-vivo); }
.barra-prio i b.alta { background: var(--ok); }
.barra-prio .num { width: auto; color: var(--text); font-weight: 600; }
@media (max-width: 1899px) { .shell--inspetor .grade .c-sinais, .shell--inspetor .grade .c-porte { display: none; } }
@media (max-width: 1599px) { .shell--inspetor .grade .c-local { display: none; } .shell--inspetor .grade .c-empresa { width: 50%; } .shell--inspetor .grade .c-cont { width: 15%; } }
.paginacao { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: 0 1.1rem; padding: .6rem 0; color: var(--muted); font-size: .8125rem; }
.evento { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: .25rem 0 0; color: var(--muted); font-size: .75rem; }

/* Inspetor (ficha da empresa) */
.inspetor-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: .85rem 1rem .6rem; }
.inspetor-topo h2 { margin: 0; font-size: 1.05rem; }
.inspetor-topo .ajuda { margin: .15rem 0 0; }
.inspetor-abas { display: flex; gap: 0; padding: 0 .6rem; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.inspetor-abas button { position: relative; display: inline-flex; flex: none; align-items: center; gap: .3rem; min-height: 38px; padding: 0 .5rem; white-space: nowrap; border: 0; background: none; color: var(--text-3); font: 600 .8125rem var(--font); cursor: pointer; }
.inspetor-abas button[aria-selected="true"] { color: var(--text); }
.inspetor-abas button[aria-selected="true"]::after { content: ""; position: absolute; left: .5rem; right: .5rem; bottom: -1px; height: 2px; border-radius: 2px; background: var(--brand-vivo); }
.inspetor-abas button .tag { margin-left: .3rem; }
.inspetor-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: .9rem 1rem 2rem; }
.inspetor-vazio { display: grid; place-items: center; height: 100%; padding: 2rem; color: var(--muted); font-size: .8125rem; text-align: center; }
.bloco-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin: 1rem 0 .5rem; }
.bloco-titulo:first-child { margin-top: 0; }
.bloco-titulo h3 { flex: none; margin: 0; font-size: .8125rem; font-weight: 700; color: var(--text-3); }
.contato { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .9rem; align-items: center; padding: .65rem .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.contato + .contato { margin-top: .4rem; }
.contato strong { color: var(--text); font-size: .875rem; }
.contato .meta { font-size: .75rem; }
.contato .valor { color: var(--text); font: 500 .8125rem var(--mono); }
.contato--aberto { border-color: #a7f3d0; background: #f6fefb; }
.outros-contatos { margin: .6rem 0 0; }
.outros-contatos summary { padding: .45rem 0; color: var(--text-3); font-size: .8125rem; cursor: pointer; }
.outros-contatos .contato { margin-top: .4rem; }
.sinais-tel { display: inline-flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; }
.sinais { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.dados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem 1rem; margin: 0 0 1rem; padding: .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--raised); }
.dados dt { color: var(--muted); font-size: .7rem; font-weight: 600; }
.dados dd { margin: .05rem 0 0; color: var(--text); font-size: .8125rem; overflow-wrap: anywhere; }
.fonte { margin-top: 1rem; }

/* Mercado e resumo */
.mercado-topo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem; margin-bottom: .9rem; }
.mercado-topo h2 { margin: 0 0 .15rem; font-size: 1rem; }
.mercado-topo .ajuda { margin: 0; }
.kpis--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: .9rem; }
.grade-envolta--solta { flex: none; margin: 0; }
.grade--mercado td { max-width: none; }
.grade--mercado tbody tr { cursor: default; }
.barra-prio--larga i { width: 120px; }
.passos { margin: 0 0 .5rem; padding-left: 1.2rem; color: var(--text-2); font-size: .8125rem; }
.passos li { padding: .2rem 0; }
.fatores li { justify-content: space-between; }
.fatores .num { color: var(--ok); }
.fatores-total { background: var(--raised); }
.fatores-total .num { color: var(--text); }

/* Início (painel Hoje) e outras vistas */
.hoje { padding-top: 1rem; }
.hoje h2 { margin-bottom: .15rem; font-size: 1rem; }
.hoje-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: .75rem; margin-top: .75rem; }
.hoje-bloco { display: flex; flex-direction: column; gap: .5rem; }
.hoje-bloco h3 { margin: 0; font-size: .9375rem; }
.hoje-bloco .botao { align-self: flex-start; margin-top: auto; }
.hoje-bloco--sugestao { border-style: dashed; box-shadow: none; }
.hoje-bloco .olho { margin: 0; font-size: .75rem; }
.hoje-numeros { margin: 0; color: var(--text-3); font-size: .8125rem; }
.hoje-numeros strong { color: var(--text); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.hoje-itens { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.hoje-itens li { display: grid; gap: .05rem; padding: .45rem .6rem; border-bottom: 1px solid var(--line-soft); }
.hoje-itens li:last-child { border-bottom: 0; }
.hoje-itens .link-botao { color: var(--text); font-weight: 600; font-size: .8125rem; text-decoration: none; }
.hoje-itens .meta { font-size: .75rem; }
.vista[hidden] { display: none !important; }
.caixa-msg { display: grid !important; gap: .35rem; }
.caixa-msg p { margin: 0; white-space: pre-line; color: var(--text-3); font-size: .8125rem; }
.caixa-msg .botao { justify-self: start; }

/* Conta e painel dentro do shell */
.conteudo { width: 100%; max-width: 72rem; padding: 1.25rem 1.5rem 3rem; }
.conteudo--largo { max-width: 96rem; }
.conteudo > h1 { margin-bottom: .2rem; font-size: 1.25rem; }
.conteudo section { margin-top: 1.75rem; }
.conteudo section > h2 { padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
.status a { color: var(--text-3); }
.conteudo h2 { margin-top: 1.75rem; font-size: 1rem; }
.conteudo section:first-of-type h2 { margin-top: 1rem; }
.sub-h { margin: 1.25rem 0 .5rem; font-size: .875rem; color: var(--text-2); }
.uso { display: grid; gap: .45rem; max-width: 40rem; }
.uso-linha { display: grid; grid-template-columns: 13rem minmax(0, 1fr) 9rem; gap: .75rem; align-items: center; font-size: .8125rem; }
.uso-linha span { color: var(--text-3); }
.uso-linha b { color: var(--text); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.uso-barra { height: 8px; border-radius: 4px; background: var(--line-soft); overflow: hidden; }
.uso-barra i { display: block; height: 100%; border-radius: 4px; background: var(--ok); }
.uso-barra i.cheio { background: var(--warn); }
.resumo-conta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin: 1rem 0 1.25rem; }
.painel-topo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.painel-topo h1 { margin: 0; font-size: 1.15rem; }
.painel-topo p { margin: 0; color: var(--muted); font-size: .78rem; }
.painel-grade { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: .6rem; margin-top: .6rem; }
.quadro { padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1); }
.quadro h2 { margin: 0; font-size: .9375rem; }
.quadro .sub { margin: .1rem 0 .75rem; color: var(--muted); font-size: .75rem; }
.legenda { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .5rem; color: var(--text-3); font-size: .75rem; }
.legenda i { display: inline-block; width: 10px; height: 10px; margin-right: .35rem; border-radius: 2px; vertical-align: -1px; }
.grafico svg { width: 100%; height: auto; }
.grafico text { fill: var(--muted); font: 500 12px var(--font); }
.funil { display: grid; gap: .4rem; }
.funil-linha { display: grid; grid-template-columns: 9rem minmax(0, 1fr) 4.5rem; gap: .6rem; align-items: center; font-size: .78rem; }
.funil-linha span { color: var(--text-3); }
.funil-barra { height: 20px; border-radius: 4px; background: var(--line-soft); overflow: hidden; }
.funil-barra i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--brand-vivo), #fdba74); }
.funil-linha b { color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.demanda { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.demanda h3 { font-size: .75rem; color: var(--muted); }
.abas-lista { display: flex; flex-wrap: wrap; gap: .3rem; margin: 1.25rem 0 .6rem; }
.abas-lista button { min-height: 30px; padding: .25rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text-3); font: 600 .75rem var(--font); cursor: pointer; }
.abas-lista button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.barra-lista { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .6rem; }
.barra-lista input { flex: 1 1 14rem; }
.barra-lista select { flex: 0 1 12rem; width: auto; }
.tabela-usuarios tbody tr { cursor: pointer; }
.pessoa { display: flex; align-items: center; gap: .55rem; }
.pessoa img, .pessoa .ini { width: 26px; height: 26px; border-radius: 50%; flex: none; }
.pessoa .ini { display: grid; place-items: center; background: var(--hover); color: var(--text-2); font-size: .7rem; font-weight: 700; }
.pessoa div { display: grid; line-height: 1.3; }
.pessoa small { color: var(--muted); font-size: .75rem; }
.temp { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; }
.temp i { width: 8px; height: 8px; border-radius: 50%; }
.temp--quente i { background: var(--brand-vivo); box-shadow: 0 0 0 3px rgb(249 115 22 / .2); }
.temp--morno i { background: #f59e0b; }
.temp--frio i { background: #60a5fa; }
.detalhe-acoes { display: grid; grid-template-columns: 1fr auto; gap: .5rem; margin: 1rem 0; }
.linha-tempo { margin: 0; padding: 0; list-style: none; font-size: .78rem; }
.linha-tempo li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .75rem; padding: .4rem 0; border-bottom: 1px solid var(--line-soft); }
.linha-tempo time { color: var(--muted); font-variant-numeric: tabular-nums; }
.gaveta-fundo { position: fixed; inset: 0; z-index: 60; background: rgb(15 23 42 / .3); }
.gaveta-fundo[hidden] { display: none; }
.gaveta { position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; display: flex; flex-direction: column; width: min(36rem, 100vw); border-left: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-2); }
.gaveta[hidden] { display: none; }
.gaveta-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); }
.gaveta-corpo { flex: 1; overflow-y: auto; padding: 1.1rem; }
.vazio { padding: 2.5rem 1rem; border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--muted); text-align: center; }


/* Mapas (2D e 3D) */
.mapa-hero { position: relative; margin: 0; padding: 1rem 1rem .75rem; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, #fff, #fbfcfd); box-shadow: var(--shadow-2); }
.mapa-hero-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: .25rem .25rem 0; }
.mapa-hero-topo span { display: block; color: var(--text-3); font-size: .8125rem; font-weight: 600; }
.mapa-hero-topo strong { display: block; color: var(--text); font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.mapa-hero-topo small { color: var(--muted); font-size: .75rem; text-align: right; }
.mapa-palco { position: relative; height: clamp(300px, 31vw, 410px); margin-top: .25rem; }
.mapa-palco canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }
.mapa-hero figcaption { padding: .25rem .25rem 0; color: var(--muted); font-size: .75rem; }
.mapa-hero:not(.mapa-hero--pronto) .mapa-palco { background: radial-gradient(ellipse at 50% 60%, var(--brand-soft), transparent 65%); }
.mapa-dica { position: absolute; z-index: 20; display: grid; gap: .1rem; min-width: 9rem; padding: .5rem .65rem; border-radius: var(--radius-sm); background: var(--ink); color: #fff; font-size: .75rem; pointer-events: none; box-shadow: var(--shadow-2); }
.mapa-dica strong { font-size: .8125rem; }
.mapa-dica span { color: #cbd5e1; font-variant-numeric: tabular-nums; }
.mapa-caixa { position: relative; }
.mapa-svg { display: block; width: 100%; height: auto; max-height: 560px; }
.mapa-fundo path { fill: #f1f3f6; stroke: #fff; stroke-width: 1; }
.mapa-area { stroke: #fff; stroke-width: .8; transition: fill .2s, stroke .15s; cursor: pointer; vector-effect: non-scaling-stroke; }
.mapa-area:hover, .mapa-area:focus-visible { stroke: var(--ink); stroke-width: 1.6; outline: none; }
.mapa-area--sel { stroke: var(--brand-strong); stroke-width: 2.2; }
.mapa-legenda { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; color: var(--muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
.mapa-legenda i { display: flex; flex: 0 1 12rem; height: 8px; overflow: hidden; border-radius: 4px; }
.mapa-legenda b { flex: 1; }
.secao--vitrine { border-bottom: 1px solid var(--line); background: var(--surface); }
.vitrine-wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }

.mercado-grade { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: .75rem; align-items: start; }
.mapa-quadro { padding: .75rem 1rem 1rem; }
.mapa-barra { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .5rem; }
.mapa-barra .migalhas ol { margin: 0; }
.mapa-barra .link-botao { color: var(--brand); font-weight: 600; }
.mapa-palco--app { height: 420px; }
.mapa-dica-uso { margin: .5rem 0 0; }
.mercado-tabela-topo { display: flex; justify-content: flex-end; margin-bottom: .5rem; }
.grade--mercado td:first-child { max-width: 14rem; }

/* Links dentro de texto corrido: sublinhados (não dependem só da cor) */
p a:not(.botao), li a:not(.botao), dd a, .ajuda a, .intro a, .lead a, .faq a, .seo-cta a:not(.botao) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.seo-lista a, .topo nav a, .rodape a, .migalhas a, .hoje-itens .link-botao { text-decoration: none; }
.esqueleto-bloco { padding: .8rem; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.esqueleto-bloco + .esqueleto-bloco { margin-top: .5rem; }
.esqueleto-bloco span { display: block; height: 10px; border-radius: 4px; background: linear-gradient(90deg, var(--line-soft) 0, #e6eaf0 40%, var(--line-soft) 80%) 0 0 / 480px 100%; animation: brilho 1.1s linear infinite; }
.esqueleto-bloco span + span { width: 55%; margin-top: .5rem; }

/* Movimento que responde à pessoa */
@keyframes deslizar { from { transform: translateX(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes surgir { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes brilho { from { background-position: -240px 0; } to { background-position: 240px 0; } }
.inspetor:not([hidden]) { animation: deslizar .22s cubic-bezier(.2, .8, .2, 1); }
.toast { animation: surgir .18s ease-out; }
.grade tbody tr { animation: surgir .2s ease-out both; }
.esqueleto td span { display: block; height: 10px; border-radius: 4px; background: linear-gradient(90deg, var(--line-soft) 0, #e6eaf0 40%, var(--line-soft) 80%) 0 0 / 480px 100%; animation: brilho 1.1s linear infinite; }
.esqueleto td span + span { width: 60%; margin-top: .35rem; }

/* Responsivo */
@media (max-width: 1180px) {
  .shell { --lateral: 260px; }
  .shell--inspetor { --inspetor: 0px; }
  .shell--inspetor .inspetor { position: fixed; top: 48px; right: 0; bottom: 28px; z-index: 50; width: min(30rem, 100vw); box-shadow: var(--shadow-2); }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .planos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .painel-grade { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .app-corpo { height: auto; overflow: visible; }
  .shell { display: block; height: auto; min-height: 100svh; padding-bottom: 60px; }
  .barra { position: sticky; top: 0; z-index: 40; height: 52px; padding: 0 .75rem; }
  .barra .marca { min-width: 0; }
  .barra .marca small, .esconder-celular { display: none; }
  .comando kbd { display: none; }
  .trilho { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; flex-direction: row; justify-content: space-around; height: 58px; padding: 0 .25rem; border-top: 1px solid var(--line); border-right: 0; }
  .trilho .espaco, .trilho .so-desktop { display: none; }
  .trilho [aria-current="page"]::before, .trilho [aria-pressed="true"]::before { left: 9px; right: 9px; top: -9px; bottom: auto; width: auto; height: 3px; border-radius: 0 0 3px 3px; }
  .trilho .rotulo { display: none; }
  .lateral { border-right: 0; border-bottom: 1px solid var(--line); }
  .mostrar-filtros { display: inline-flex; margin: .6rem .9rem; }
  .lateral:not(:has(.filtros--aberto)) .lateral-topo { display: none; }
  .grade .c-empresa { width: 52%; }
  .grade .c-prio { width: 4.6rem; }
  .barra-prio i { width: 26px; }
  .conteudo { padding: 1rem var(--gutter) 2rem; }
  .filtros:not(.filtros--aberto) { display: none; }
  .filtros { overflow: visible; }
  .area { overflow: visible; }
  .area-cabeca { position: static; }
  .shell--inspetor .inspetor, .inspetor:not([hidden]) { position: fixed; inset: 52px 0 58px 0; z-index: 50; width: auto; }
  .status { display: none; }
  .vitrine-grade th:nth-child(3), .vitrine-grade td:nth-child(3) { display: none; }
  .vitrine-wrap, .mercado-grade { grid-template-columns: minmax(0, 1fr); }
  .mapa-palco--app { height: 300px; }
  .mapa-palco { height: 300px; }
  .hero .wrap, .grade-3, .resumo-conta, .demanda { grid-template-columns: minmax(0, 1fr); }
  .numeros .wrap, .seo-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade .c-porte, .grade .c-sinais { display: none; }
  .so-celular { display: inline; }
  .topo nav { gap: .1rem; font-size: .8125rem; }
  .topo nav a:not(.botao) { padding-inline: .45rem; }
}
@media (min-width: 861px) { .so-celular { display: none; } }
/* 320 px: "by Reveno" empurrava o botão Começar grátis para fora da tela. */
@media (max-width: 360px) { .topo .marca small { display: none; } .topo .wrap { gap: .5rem; } }
@media (max-width: 560px) {
  .planos { grid-template-columns: minmax(0, 1fr); }
  .kpis--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .barra-prio--larga i { width: 50px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi strong { font-size: 1.2rem; }
  .vitrine-grade td:first-child { white-space: normal; }
  .vitrine-grade th, .vitrine-grade td { padding-inline: .55rem; }
  .vitrine-grade .barra-prio i { width: 24px; }
  .dados { grid-template-columns: minmax(0, 1fr); }
  .funil-linha { grid-template-columns: 6.5rem minmax(0, 1fr) 3.5rem; }
  .uso-linha { grid-template-columns: minmax(0, 1fr) 7rem; }
  .uso-linha .uso-barra { grid-column: 1 / -1; grid-row: 2; }
  .grade .c-local, .grade .c-cont { display: none; }
  .grade .c-empresa .so-estreito { display: block; }
  .barra-acoes .plano-selo { display: none; }
  .contato .botao--peq, .empresa .botao--peq { min-height: 44px; }
  .contato { grid-template-columns: minmax(0, 1fr); }
  .contato > :last-child { justify-self: start; }
  .contato .valor { overflow-wrap: anywhere; }
  .topo nav a, .abas button, .botao, .botao--peq, .link-botao, .mostrar-filtros, input[type="text"], input[type="email"], input[type="password"], input[type="search"], select { min-height: 44px; }
  .marca { min-height: 44px; }
  .faq summary { display: flex; align-items: center; min-height: 44px; }
  .seo-lista li { padding: 0; } .seo-lista li a { display: inline-flex; align-items: center; min-height: 44px; }
  .rodape nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .senha-campo .link-botao, .senha-campo button { min-width: 44px; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }