/* ==========================================================================
   MLSuite UI Kit
   Única fonte de estilo do painel e das páginas públicas. Regras (CLAUDE.md,
   "Regras de Frontend"): proibido style= inline, <style> em template e botão
   fora das classes .btn. Precisa de algo novo? Crie aqui, como componente ou
   utilitário, e use pela classe.

   Índice
     1. Tokens (cores, espaçamento, raios, sombras)
     2. Base
     3. Utilitários (espaçamento, layout, texto)
     4. Botões (.btn)
     5. Formulários (.field, .input)
     6. Componentes (card, kpi, badge, chip, tabs, callout, flash, empty, table…)
     7. Layout do app (sidebar, header) e público
     8. Páginas (paywall, alertas, modos, custos)
     9. Responsivo
     10. Landing pública (tema escuro próprio, escopado em .landing)
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --bg: #f5f5f2;
  --surface: #ffffff;
  --text: #1d1d1b;
  --muted: #66665f;
  --line: #e4e4de;
  --accent: #229ed9;
  --accent-hover: #1b86b9;
  --accent-text: #ffffff;
  --good: #1f8a4c;
  --bad: #c0392b;
  --warn: #b9770e;
  --sidebar: #1d2733;
  --sidebar-text: #d7dde4;
  --sidebar-active: #2c3a4a;

  /* Escala de espaçamento (base 4 px). Use pelos utilitários .mt-*, .mb-*, .gap-*. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --radius: 8px;      /* botões, campos */
  --radius-lg: 12px;  /* cartões */
  --control-height: 40px;
  --transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14181d;
    --surface: #1d232a;
    --text: #e8eaed;
    --muted: #9aa3ad;
    --line: #2c343d;
    --accent-hover: #3aaee3;
    --good: #4cc27f;
    --bad: #ef6b5b;
    --warn: #e3a93b;
    --sidebar: #0f1318;
    --sidebar-active: #1f2833;
  }
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
}
a { color: var(--accent); }
h1, h2, h3 { line-height: 1.25; }
p { margin: 0 0 var(--space-3); }
p:last-child { margin-bottom: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 3. Utilitários ----------------------------------------------------------- */
.mt-0 { margin-top: 0; }               .mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: var(--space-1); }  .mb-1 { margin-bottom: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }  .mb-2 { margin-bottom: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }  .mb-3 { margin-bottom: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }  .mb-4 { margin-bottom: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }  .mb-5 { margin-bottom: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }  .mb-6 { margin-bottom: var(--space-6); }

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }

/* .row: itens lado a lado (quebra no celular). .stack: um embaixo do outro. */
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.items-start { align-items: flex-start; }
.items-baseline { align-items: baseline; }
.nowrap { flex-wrap: nowrap; white-space: nowrap; }

.text-muted, .muted { color: var(--muted); }
.good { color: var(--good); }
.bad { color: var(--bad); }
.warn { color: var(--warn); }
.small { font-size: .9rem; color: var(--muted); }
.lead { color: var(--muted); margin: 0 0 var(--space-5); }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* 4. Botões ---------------------------------------------------------------- */
/* Todo botão (ou link com cara de botão) é .btn + UMA variante. Mesmo tamanho,
   mesmo raio e mesma transição em todos: não crie tamanhos nem botões novos. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition);
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.btn-primary { background: var(--accent); color: var(--accent-text); }
.btn-primary:hover { background: var(--accent-hover); }

.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--muted); background: var(--bg); }

.btn-danger { background: var(--surface); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.btn-danger:hover { background: var(--bad); border-color: var(--bad); color: #fff; }

/* 5. Formulários ----------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: var(--space-4); }
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.label { font-size: .9rem; font-weight: 600; }
.hint { font-size: .85rem; font-weight: 400; color: var(--muted); }
.input {
  font: inherit;
  min-height: var(--control-height);
  padding: 0 var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  min-width: 0;
  transition: var(--transition);
}
.input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.input-money { width: 120px; text-align: right; }
.input-prefix { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--muted); }
.field-error { color: var(--bad); font-size: .85rem; }
.input-file { font: inherit; font-size: .9rem; color: var(--muted); }
.input-file::file-selector-button {
  font: inherit; font-weight: 600; font-size: .9rem;
  min-height: var(--control-height); padding: 0 var(--space-4); margin-right: var(--space-3);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--text); cursor: pointer; transition: var(--transition);
}
.input-file::file-selector-button:hover { border-color: var(--muted); background: var(--bg); }

/* 6. Componentes ----------------------------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); }
.card-title { font-size: 1.05rem; margin: 0 0 var(--space-3); }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px 20px; }
.kpi h2 { font-size: .85rem; font-weight: 600; color: var(--muted); margin: 0 0 var(--space-2); text-transform: uppercase; letter-spacing: .4px; }
.kpi .value { font-size: 2rem; font-weight: 700; margin: 0; font-variant-numeric: tabular-nums; }
.kpi .value small { font-size: 1rem; font-weight: 500; color: var(--muted); }
.kpi .note { color: var(--muted); font-size: .88rem; margin: var(--space-2) 0 0; }
.kpi.alert-card { border-color: var(--bad); }
progress { width: 100%; height: 8px; margin-top: 10px; accent-color: var(--accent); }
progress.full { accent-color: var(--bad); }

.badge { display: inline-block; border-radius: 99px; padding: 1px 9px; font-size: .8rem; font-weight: 600; border: 1px solid currentColor; }

/* Chip: filtro/ordenação (não é botão de ação). */
.chip {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--space-3);
  border: 1px solid var(--line); border-radius: 99px; background: var(--surface);
  color: var(--text); font-size: .88rem; text-decoration: none; transition: var(--transition);
}
.chip:hover { border-color: var(--muted); }
.chip[aria-current] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }

.tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--line); margin-bottom: var(--space-5); overflow-x: auto; }
.tab {
  padding: 10px 14px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: .95rem;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: var(--transition);
}
.tab:hover { color: var(--text); }
.tab[aria-current] { color: var(--text); border-bottom-color: var(--accent); }

.callout {
  display: flex; gap: var(--space-3); align-items: flex-start;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: var(--radius-lg); padding: 14px var(--space-4); margin: 0 0 var(--space-5);
}
.callout-icon { flex: none; font-size: 1.15rem; line-height: 1.45; }
.callout-danger { background: color-mix(in srgb, var(--bad) 8%, var(--surface)); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.consent-check { display: flex; gap: var(--space-2); align-items: flex-start; font-weight: 600; }
.consent-check input { margin-top: 4px; flex: none; }

.flash { border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-4); border: 1px solid; background: var(--surface); }
.flash-ok { color: var(--good); border-color: var(--good); }
.flash-bad { color: var(--bad); border-color: var(--bad); }

.empty { background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius-lg); padding: 18px; color: var(--muted); margin: 0; }

.help { cursor: help; font-size: .8rem; text-transform: none; }

.summary { display: flex; flex-wrap: wrap; gap: var(--space-2) 20px; color: var(--muted); font-size: .92rem; margin: 0; }
.summary strong { color: var(--text); }

.disclosure { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px var(--space-4); font-size: .9rem; }
.disclosure summary { cursor: pointer; font-weight: 600; color: var(--warn); }

.steps { margin: 0; padding-left: 20px; font-size: .9rem; color: var(--muted); display: grid; gap: var(--space-1); }

/* Tabela de dados. No celular, cada linha vira um cartão (td com data-label). */
.table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th, .table td { padding: var(--space-3) 14px; text-align: right; border-top: 1px solid var(--line); vertical-align: middle; }
.table th { border-top: 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 600; background: var(--bg); }
.table th:first-child, .table td:first-child { text-align: left; }
.table td { font-variant-numeric: tabular-nums; }
.table td:not(:first-child) { white-space: nowrap; } /* valores não quebram ("R$" e número juntos) */
.table .title { font-weight: 600; overflow-wrap: anywhere; }
.table .sub { display: block; color: var(--muted); font-size: .8rem; font-weight: 400; }
.table .est { color: var(--warn); font-size: .78rem; display: block; }
.table-text th, .table-text td { text-align: left; } /* tabela de texto (ex: auditoria): tudo à esquerda */
.table .actions-cell { white-space: nowrap; }
.table td.wrap { white-space: normal; overflow-wrap: anywhere; } /* texto longo (ex: erro de um job) quebra a linha */
.table .actions-cell .row { justify-content: flex-end; flex-wrap: nowrap; }
.table tr.saved td { background: color-mix(in srgb, var(--good) 8%, transparent); }
.table tr.editing td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.htmx-request .table-wrap { opacity: .6; transition: opacity .2s; }

/* 7. Layout ---------------------------------------------------------------- */
.app { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.sidebar { background: var(--sidebar); color: var(--sidebar-text); padding: 20px var(--space-3); }
.brand { font-weight: 700; font-size: 1.15rem; color: #fff; padding: 0 10px 20px; letter-spacing: .2px; }
.nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.nav a, .nav span { display: flex; justify-content: space-between; align-items: center; padding: 9px 10px; border-radius: var(--radius); color: var(--sidebar-text); text-decoration: none; font-size: .95rem; }
.nav a:hover { background: var(--sidebar-active); }
.nav .active { background: var(--sidebar-active); color: #fff; font-weight: 600; }
.nav .soon { opacity: .55; cursor: default; }
.nav .soon small { font-size: .7rem; border: 1px solid currentColor; border-radius: 99px; padding: 0 6px; }
.nav .locked { opacity: .75; }
.nav .locked span { font-size: .8rem; }
.main { display: flex; flex-direction: column; min-width: 0; }
.header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: 14px 28px; background: var(--surface); border-bottom: 1px solid var(--line); }
.header h1 { font-size: 1.1rem; margin: 0; }
.who { display: flex; align-items: center; gap: var(--space-3); color: var(--muted); font-size: .9rem; }
.who form { margin: 0; }
.content { padding: 28px; max-width: 1100px; width: 100%; }
.section { margin-top: var(--space-6); }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.section h2 { font-size: 1.05rem; margin: 0; }

.public { max-width: 440px; margin: 64px auto; padding: 0 var(--space-4); }
.public h1 { font-size: 1.3rem; margin-top: 0; }
/* Termos e Privacidade: texto longo, largura de leitura confortável. */
.legal { max-width: 760px; margin: 40px auto; padding: 0 var(--space-4); line-height: 1.6; }
.legal h1 { font-size: 1.5rem; margin-top: 0; }
.legal h2 { font-size: 1.1rem; margin: var(--space-5) 0 var(--space-2); }
.legal li { margin-bottom: var(--space-2); }

/* Administração (body.admin): usada mais no computador. Mais largura, cabeçalho fixo e tabelas mais
   densas; o painel do vendedor não muda. No celular volta ao layout de sempre (ver 9. Responsivo). */
.admin .content { max-width: 1440px; }
.admin .header { position: sticky; top: 0; z-index: 10; }
/* Grade de cartões: uma coluna no celular, duas ou três em tela larga. */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: var(--space-5); align-items: start; }
.card-grid > .card { margin: 0; max-width: none; }
/* Barra de ferramentas: busca e filtros na mesma linha (quebra quando não cabe). */
.toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); }
.toolbar form { flex: 1 1 320px; max-width: 520px; min-width: 0; }
.toolbar .input { flex: 1; min-width: 0; }
 (min-width: 861px) {
  .admin .table th, .admin .table td { padding: var(--space-2) var(--space-3); }
}

/* 8. Páginas --------------------------------------------------------------- */
.hello { font-size: 1.5rem; margin: 0 0 var(--space-1); }

.alerts { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.alerts li { display: flex; gap: var(--space-3); padding: 14px 18px; border-top: 1px solid var(--line); }
.alerts li:first-child { border-top: 0; }
.alerts .dot { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 7px; background: var(--accent); }
.alerts .critical .dot { background: var(--bad); }
.alerts p { margin: 0; overflow-wrap: anywhere; }
.alerts time { display: block; color: var(--muted); font-size: .82rem; margin-top: 2px; }

/* Linha do tempo (histórico do Escudo): pontos ligados por uma linha vertical. */
.timeline { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.timeline li { position: relative; display: flex; gap: var(--space-4); padding: var(--space-4) 18px; border-top: 1px solid var(--line); }
.timeline li:first-child { border-top: 0; }
.timeline li::before { content: ""; position: absolute; left: 22px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.timeline li:first-child::before { top: 24px; }
.timeline li:last-child::before { bottom: calc(100% - 24px); }
.timeline .dot { position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 7px; background: var(--accent); box-shadow: 0 0 0 3px var(--surface); }
.timeline .critical .dot { background: var(--bad); }
.timeline p { margin: 0; overflow-wrap: anywhere; }
.timeline p + p { margin-top: var(--space-1); }

.metric-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); font-size: .9rem; }
.metric-list li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }

.paywall { text-align: center; max-width: 620px; margin: var(--space-2) auto; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 36px 28px; }
.paywall .lock { font-size: 2.6rem; line-height: 1; }
.paywall h2 { font-size: 1.45rem; margin: 14px 0 var(--space-2); }
.benefits { list-style: none; padding: 0; margin: 0 0 26px; text-align: left; display: grid; gap: var(--space-3); }
.benefits li { display: flex; gap: var(--space-3); align-items: flex-start; }
.benefits .icon { flex: none; font-size: 1.2rem; }
.benefits strong { display: block; }
.benefits .muted { font-size: .92rem; }

.modes { max-width: 720px; }
.modes fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.modes legend { font-weight: 600; margin-bottom: 10px; }
.mode-card { display: flex; gap: var(--space-3); align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px var(--space-4); cursor: pointer; transition: var(--transition); }
.mode-card:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.mode-card input { margin-top: 4px; accent-color: var(--accent); }
.mode-card .muted { display: block; font-size: .9rem; margin-top: 2px; }

.textarea { min-height: 110px; padding: 10px var(--space-3); line-height: 1.45; resize: vertical; }

/* Perguntas: um cartão por pergunta do comprador. */
.question-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-3); }
.question-item { display: block; font-weight: 600; overflow-wrap: anywhere; }
.question-text { font-size: 1.05rem; margin: 0 0 var(--space-3); overflow-wrap: anywhere; }
.suggestion {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border-left: 3px solid var(--accent); border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
}
.suggestion .label { display: block; margin-bottom: var(--space-1); }
.suggestion p { overflow-wrap: anywhere; }
/* Prévia de mensagem (Comunicação): mantém as quebras de linha como o Telegram mostra. */
.message-preview { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

.costs th:nth-child(2), .costs td:nth-child(2) { width: 240px; }
.costs th:last-child, .costs td:last-child { width: 230px; }
.cost-panel { max-width: 560px; }

/* 9. Responsivo ------------------------------------------------------------ */
@media (max-width: 860px) {
  .table-wrap { background: none; border: 0; overflow: visible; }
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); margin-bottom: var(--space-3); padding: 6px 0; }
  .table td { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); border-top: 0; padding: 6px var(--space-4); text-align: right; }
  .table td::before { content: attr(data-label); color: var(--muted); font-size: .85rem; text-align: left; }
  .table td:first-child { display: block; text-align: left; border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: var(--space-1); }
  .table td:first-child::before { content: none; }
  /* Texto longo e ações não podem alargar o cartão: a nota vai para a própria linha e as ações quebram. */
  .table td { flex-wrap: wrap; }
  .table td > .sub { flex-basis: 100%; white-space: normal; overflow-wrap: anywhere; }
  .table .actions-cell .row { flex-wrap: wrap; justify-content: flex-start; min-width: 0; }
  .costs th:nth-child(2), .costs td:nth-child(2), .costs th:last-child, .costs td:last-child { width: auto; }
}

@media (max-width: 720px) {
  /* minmax(0, 1fr): a barra de navegação (rolagem lateral) não pode alargar a página. */
  /* grid-template-rows: a barra fica do tamanho dela; só o conteúdo estica (página curta não alonga a barra). */
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .sidebar { padding: var(--space-3) var(--space-4); min-width: 0; }
  .brand { padding: 0 0 var(--space-2); }
  .nav { flex-direction: row; overflow-x: auto; }
  .nav a, .nav span { white-space: nowrap; gap: 6px; }
  .header, .content { padding-left: var(--space-4); padding-right: var(--space-4); }
}

/* 10. Landing -------------------------------------------------------------- */
/* Tema escuro próprio, escopado em .landing (não afeta painel nem administração). Neon com
   contraste >= 4.5:1 sobre o fundo. Animações desligadas em prefers-reduced-motion. */
.landing {
  --bg: #050a14;
  --surface: rgba(18, 32, 56, .55);
  --text: #e6f1ff;
  --muted: #9fb3cc;
  --line: rgba(120, 180, 255, .18);
  --accent: #22d3ee;
  --accent-hover: #67e8f9;
  --accent-text: #04111d;
  --good: #34d399;
  --bad: #fb7185;
  --neon: #22d3ee;
  --neon-soft: rgba(34, 211, 238, .25);
  background: radial-gradient(1200px 600px at 80% -10%, rgba(34, 211, 238, .12), transparent 60%),
              radial-gradient(900px 500px at -10% 30%, rgba(59, 130, 246, .12), transparent 60%), var(--bg);
  color: var(--text);
  min-height: 100vh;
}
.landing a:not(.btn) { color: var(--neon); } /* :not(.btn): botão usa as cores do kit */
.landing h1, .landing h2, .landing h3 { font-family: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: -.02em; margin: 0; }
.landing h1 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.08; }
.landing h2 { font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.15; }
.landing h3 { font-size: 1.1rem; }
.landing p { margin: 0; }
.landing-wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-4); }
.landing-nav { position: sticky; top: 0; z-index: 10; backdrop-filter: blur(10px); background: rgba(5, 10, 20, .7); border-bottom: 1px solid var(--line); }
.landing-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-3); padding-bottom: var(--space-3); }
.landing-brand { font-weight: 700; font-size: 1.2rem; }
.landing-glow { color: var(--neon); text-shadow: 0 0 12px var(--neon-soft); }
.landing-links { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.landing-links a { color: var(--muted); text-decoration: none; }
.landing-links a:hover, .landing-links a:focus-visible { color: var(--text); }
.landing-hero { padding: 72px 0 48px; }
.landing-section { padding: 56px 0; border-top: 1px solid var(--line); }
.landing-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); align-items: center; }
.landing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }
.landing-kicker { color: var(--neon); text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; font-weight: 600; }
.landing-lead { color: var(--muted); font-size: 1.08rem; line-height: 1.6; max-width: 62ch; }
.landing-section .landing-lead { margin-top: var(--space-3); }
.landing-note { color: var(--muted); font-size: .9rem; }
.landing-glass { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-5); backdrop-filter: blur(14px); box-shadow: 0 0 0 1px rgba(34, 211, 238, .04), 0 20px 60px rgba(0, 0, 0, .35);
  transition: border-color .2s ease, box-shadow .2s ease; }
.landing-card { display: flex; flex-direction: column; gap: var(--space-3); }
.landing-card:hover { border-color: var(--neon-soft); box-shadow: 0 0 24px var(--neon-soft); }
.landing-tag { position: absolute; top: var(--space-3); right: var(--space-3); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.landing-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-4); }
.landing-kpis strong { display: block; font-size: 1.5rem; }
.landing-kpi-label { color: var(--muted); font-size: .8rem; }
.landing-good { color: var(--good); }
.landing-bad { color: var(--bad); }
.landing-big { font-size: 1.8rem; font-weight: 700; }
.landing-big small { font-size: .9rem; font-weight: 500; color: var(--muted); margin-left: var(--space-1); }
.landing-list { margin: 0; padding-left: 1.1rem; color: var(--muted); line-height: 1.8; }
.landing-msg { position: relative; background: rgba(5, 10, 20, .55); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3) var(--space-4); line-height: 1.5; }
.landing-bubble { background: rgba(5, 10, 20, .55); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; padding: var(--space-3) var(--space-4); max-width: 90%; line-height: 1.5; }
.landing-bubble-me { align-self: flex-end; margin-left: auto; border-radius: 14px 14px 4px 14px; border-color: var(--neon-soft); background: rgba(34, 211, 238, .08); }
.landing-footer { padding: var(--space-6) 0; border-top: 1px solid var(--line); }

/* Radar girando e alerta piscando (CSS puro). */
.landing-radar { position: relative; width: 160px; height: 160px; margin: var(--space-5) auto 0; border-radius: 50%;
  border: 1px solid var(--neon-soft); background: repeating-radial-gradient(circle, transparent 0 26px, rgba(34, 211, 238, .12) 27px 28px); overflow: hidden; }
.landing-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(34, 211, 238, .45), transparent 70deg); animation: landing-spin 4s linear infinite; }
.landing-blip { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 10px var(--good); animation: landing-blink 2s ease-in-out infinite; }
.landing-blip-1 { top: 38px; left: 96px; }
.landing-blip-2 { top: 104px; left: 44px; background: var(--bad); box-shadow: 0 0 10px var(--bad); animation-delay: 1s; }
.landing-pulse { position: absolute; top: var(--space-3); right: var(--space-3); width: 10px; height: 10px; border-radius: 50%; background: var(--bad); animation: landing-blink 1.4s ease-in-out infinite; }
@keyframes landing-spin { to { transform: rotate(360deg); } }
@keyframes landing-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
  .landing-sweep, .landing-blip, .landing-pulse { animation: none; }
  .landing-glass, .landing-card { transition: none; }
}
@media (max-width: 720px) {
  .landing-split { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .landing-hero { padding: 40px 0 32px; }
  .landing-section { padding: 40px 0; }
  .landing-links a:not(:last-child) { display: none; }
}