/* FiscaliBra: identidade visual v1 (docs/branding). Tokens da marca e semânticos do handoff com
   o prefixo --fb-*, componentes e gráficos só em CSS. A CSP (style-src 'self') proíbe estilo
   inline, por isso as larguras dos gráficos usam as classes .w-0 … .w-100 (fim do arquivo). */

/* --- Fontes locais (sem CDN; licenças OFL em static/marca/fontes) ---------------------------- */
@font-face {
  font-family: "Instrument Sans";
  src: url("/static/marca/fontes/InstrumentSans.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/marca/fontes/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/marca/fontes/JetBrainsMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/marca/fontes/JetBrainsMono-SemiBold.woff2") format("woff2");
  font-weight: 600 700;
  font-display: swap;
}

/* --- Tokens ----------------------------------------------------------------------------------- */
:root {
  /* marca */
  --fb-tinta: #102A33;
  --fb-petroleo: #1B5E6B;
  --fb-petroleo-700: #164D58;
  --fb-petroleo-50: #E7F1F2;
  --fb-petroleo-claro: #8FB7BD;
  --fb-ambar: #F2B33D;
  --fb-ambar-50: #FDF1D8;
  --fb-ambar-borda: #F4D491;
  --fb-ambar-texto: #7D5810;
  --fb-nevoa: #F5F8F8;
  --fb-branco: #FFFFFF;
  /* superfícies, linhas e textos */
  --fb-superficie: #FFFFFF;
  --fb-selecionada: #F2F8F8;
  --fb-linha: #DFE7E8;
  --fb-linha-suave: #EEF3F3;
  --fb-borda-input: #C9D6D8;
  --fb-texto: #102A33;
  --fb-texto-2: #33484F;
  --fb-mudo: #5B6F75;
  --fb-mudo-2: #7A8D92; /* o #9AABB0 do handoff não passa no AA; só em texto grande */
  --fb-vazio: #E2EAEB;
  /* semânticas: forte / fundo / texto sobre o fundo */
  --fb-sucesso: #2F9768; --fb-sucesso-50: #E3F3EA; --fb-sucesso-texto: #1F6E4A;
  --fb-risco: #CF5B4B; --fb-risco-50: #FAE6E2; --fb-risco-texto: #9E3A2C;
  --fb-bloqueio: #B07D1C; --fb-bloqueio-50: #F7EDD6; --fb-bloqueio-texto: #7D5810;
  --fb-ia: #6B6BCF; --fb-ia-50: #EBEBFA; --fb-ia-texto: #4A4AA8;
  --fb-neutro: #C9D6D8; --fb-neutro-50: #EEF1F1; --fb-neutro-texto: #5B6F75;
  /* barra lateral */
  --fb-lateral: #102A33;
  --fb-lateral-ativo: #1B3C46;
  --fb-lateral-texto: #B9CFD2;
  --fb-lateral-2: #7FA2A8;
  --fb-lateral-3: #9FC1C6;
  --fb-lateral-caixa: #173741;
  --fb-lateral-trilho: #24434C;
  /* tipografia */
  --fb-fonte: "Instrument Sans", system-ui, "Segoe UI", Roboto, sans-serif;
  --fb-fonte-codigos: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  /* compatibilidade com o nome antigo */
  --vf-primaria: var(--fb-petroleo);
}

/* --- Pico: variáveis (o mesmo seletor do tema claro do Pico, carregado depois dele) ---------- */
:root:not([data-theme=dark]), [data-theme=light] {
  --pico-font-family: var(--fb-fonte);
  --pico-font-family-sans-serif: var(--fb-fonte);
  --pico-font-family-monospace: var(--fb-fonte-codigos);
  --pico-background-color: var(--fb-nevoa);
  --pico-color: var(--fb-texto);
  --pico-h1-color: var(--fb-texto);
  --pico-h2-color: var(--fb-texto);
  --pico-h3-color: var(--fb-texto);
  --pico-h4-color: var(--fb-texto);
  --pico-muted-color: var(--fb-mudo);
  --pico-muted-border-color: var(--fb-linha-suave);
  --pico-primary: var(--fb-petroleo);
  --pico-primary-background: var(--fb-petroleo);
  --pico-primary-border: var(--fb-petroleo);
  --pico-primary-underline: rgba(27, 94, 107, .45);
  --pico-primary-hover: var(--fb-petroleo-700);
  --pico-primary-hover-background: var(--fb-petroleo-700);
  --pico-primary-hover-border: var(--fb-petroleo-700);
  --pico-primary-hover-underline: var(--fb-petroleo-700);
  --pico-primary-focus: rgba(27, 94, 107, .35);
  --pico-primary-inverse: #fff;
  --pico-secondary: var(--fb-texto-2);
  --pico-secondary-background: var(--fb-superficie);
  --pico-secondary-border: var(--fb-borda-input);
  --pico-secondary-hover: var(--fb-tinta);
  --pico-secondary-hover-background: var(--fb-nevoa);
  --pico-secondary-hover-border: var(--fb-mudo-2);
  --pico-secondary-focus: rgba(27, 94, 107, .25);
  --pico-secondary-inverse: var(--fb-tinta);
  --pico-contrast: var(--fb-tinta);
  --pico-contrast-background: var(--fb-tinta);
  --pico-contrast-border: var(--fb-tinta);
  --pico-contrast-inverse: #fff;
  --pico-card-background-color: var(--fb-superficie);
  --pico-card-sectioning-background-color: var(--fb-superficie);
  --pico-card-box-shadow: none;
  --pico-box-shadow: none;
  --pico-table-border-color: var(--fb-linha-suave);
  --pico-form-element-background-color: var(--fb-superficie);
  --pico-form-element-border-color: var(--fb-borda-input);
  --pico-form-element-active-border-color: var(--fb-petroleo);
  --pico-form-element-focus-color: rgba(27, 94, 107, .3);
  --pico-form-element-placeholder-color: var(--fb-mudo);
  --pico-form-element-spacing-vertical: .55rem;
  --pico-form-element-spacing-horizontal: .8rem;
  --pico-border-radius: 8px;
  --pico-text-selection-color: rgba(242, 179, 61, .35);
  --pico-mark-background-color: var(--fb-ambar-50);
  --pico-mark-color: var(--fb-tinta);
  --pico-code-background-color: var(--fb-linha-suave);
  --pico-code-color: var(--fb-tinta);
  --pico-ins-color: var(--fb-sucesso-texto);
  --pico-del-color: var(--fb-risco-texto);
  --pico-progress-background-color: var(--fb-vazio);
  --pico-progress-color: var(--fb-petroleo);
  --pico-switch-checked-background-color: var(--fb-petroleo);
}
/* Corpo de 15 px em qualquer largura (o Pico aumentava a fonte nas telas largas). */
:root:root { --pico-font-size: 93.75%; --pico-line-height: 1.5; }

/* --- Base ------------------------------------------------------------------------------------- */
body { background: var(--fb-nevoa); color: var(--fb-texto); }
h1 { font-size: 1.85rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
h2 { font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em; }
h3 { font-size: 1.1rem; font-weight: 600; }
h1, h2, h3 { margin-bottom: .6rem; }
a { text-underline-offset: .15em; }
code, kbd, samp, pre, .mono { font-family: var(--fb-fonte-codigos); }
code { font-size: .85em; padding: .1rem .35rem; border-radius: 4px; }
.mono { font-size: .88em; }
small, .mudo { color: var(--fb-mudo); }
.mudo-2 { color: var(--fb-mudo-2); }
table { font-variant-numeric: tabular-nums; }
th { font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--fb-mudo); }
td, th { border-bottom-color: var(--fb-linha-suave); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
kbd {
  font-size: .72rem; font-weight: 500; padding: .05rem .4rem; border-radius: 4px;
  background: var(--fb-superficie); color: var(--fb-texto); border: 1px solid var(--fb-borda-input);
  box-shadow: inset 0 -1px 0 var(--fb-borda-input);
}
:focus-visible { outline: 2px solid var(--fb-petroleo); outline-offset: 2px; }

/* Cartões: superfície branca, borda de 1 px e sem sombra. */
article, .cartao, #ranking {
  background: var(--fb-superficie); border: 1px solid var(--fb-linha); border-radius: 10px;
  box-shadow: none; padding: 1.1rem 1.25rem; margin-bottom: 1rem;
}
article > header, article > footer {
  background: transparent; margin: -1.1rem -1.25rem 1rem; padding: .9rem 1.25rem;
  border-bottom: 1px solid var(--fb-linha-suave); font-weight: 600;
}
article > footer { margin: 1rem -1.25rem -1.1rem; border-top: 1px solid var(--fb-linha-suave); border-bottom: 0; }
.cartao h2, article h2 { font-size: 1.07rem; }
.cartao-titulo { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-bottom: .8rem; }
.cartao-titulo h2, .cartao-titulo h3 { margin: 0; font-size: 1.07rem; }
.cartao-titulo small { font-size: .8rem; }

/* --- Botões ----------------------------------------------------------------------------------- */
button, [role=button], input[type=submit] { font-weight: 600; }
button.secondary, [role=button].secondary, button.outline, [role=button].outline,
input[type=submit].secondary {
  background: var(--fb-superficie); color: var(--fb-tinta); border: 1px solid var(--fb-borda-input);
}
button.secondary:hover, [role=button].secondary:hover, button.outline:hover, [role=button].outline:hover {
  background: var(--fb-nevoa); color: var(--fb-tinta); border-color: var(--fb-mudo-2);
}
/* Destaque âmbar: só para "Enviar XMLs". */
.destaque[role=button], button.destaque {
  background: var(--fb-ambar); border-color: var(--fb-ambar); color: var(--fb-tinta);
}
.destaque[role=button]:hover, button.destaque:hover { background: #E6A52C; border-color: #E6A52C; color: var(--fb-tinta); }
/* Escuro: "Aprovar em lote (N)". */
.escuro[role=button], button.escuro {
  background: var(--fb-tinta); border-color: var(--fb-tinta); color: #fff;
}
.escuro[role=button]:hover, button.escuro:hover { background: #1B3C46; border-color: #1B3C46; color: #fff; }
/* Perigo: texto vermelho sobre o secundário ("Rejeitar", "Excluir"). */
.perigo[role=button], button.perigo {
  background: var(--fb-superficie); border: 1px solid var(--fb-borda-input); color: var(--fb-risco-texto);
}
.perigo[role=button]:hover, button.perigo:hover { background: var(--fb-risco-50); border-color: var(--fb-risco); color: var(--fb-risco-texto); }
button.ia, [role=button].ia { background: var(--fb-ia); border-color: var(--fb-ia); color: #fff; }
button.bloqueio, [role=button].bloqueio { background: var(--fb-bloqueio-50); border-color: var(--fb-bloqueio-50); color: var(--fb-bloqueio-texto); }
.pequeno, .acoes button, .acoes a[role=button], .acoes input[type=submit] {
  margin: 0; padding: .3rem .7rem; font-size: .84rem; border-radius: 6px; width: auto;
}
.form-inline { margin: 0; }
.form-inline button { margin: 0; padding: .3rem .8rem; }
.acoes { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.acoes form { margin: 0; }

/* --- Chips (999 px) e selos de estado (6 px) ------------------------------------------------- */
.chip, .estado, .selo {
  display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 600;
  line-height: 1.35; padding: .12rem .55rem; border-radius: 999px; white-space: nowrap;
  background: var(--fb-neutro-50); color: var(--fb-neutro-texto); vertical-align: middle;
}
.estado { border-radius: 6px; }
.chip-regra, .estado-sugerido { background: var(--fb-petroleo-50); color: var(--fb-petroleo-700); }
.chip-sucesso, .estado-sucesso { background: var(--fb-sucesso-50); color: var(--fb-sucesso-texto); }
.chip-risco, .estado-risco { background: var(--fb-risco-50); color: var(--fb-risco-texto); }
.chip-bloqueio, .estado-bloqueio { background: var(--fb-bloqueio-50); color: var(--fb-bloqueio-texto); }
.chip-ia, .estado-ia { background: var(--fb-ia-50); color: var(--fb-ia-texto); }
.chip-neutro, .estado-neutro { background: var(--fb-neutro-50); color: var(--fb-neutro-texto); }
.chip-ambar { background: var(--fb-ambar-50); color: var(--fb-ambar-texto); border: 1px solid var(--fb-ambar-borda); }
.chip-escuro { background: var(--fb-petroleo); color: #fff; }
/* Ícone de texto antes do rótulo: a distinção não depende só da cor. */
.chip-regra::before { content: "▤"; font-weight: 400; }
.chip-ia::before { content: "✦"; font-weight: 400; }
.chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }

/* --- Avisos ----------------------------------------------------------------------------------- */
.aviso, .erro, .ok, .info, .minuta {
  border-radius: 8px; padding: .7rem 1rem; margin-bottom: 1rem; border: 1px solid; border-left-width: 4px;
}
.aviso { background: var(--fb-ambar-50); border-color: var(--fb-ambar-borda); border-left-color: var(--fb-bloqueio); color: var(--fb-tinta); }
.erro { background: var(--fb-risco-50); border-color: #F1C6BF; border-left-color: var(--fb-risco); color: var(--fb-tinta); }
.ok { background: var(--fb-sucesso-50); border-color: #BFE3CE; border-left-color: var(--fb-sucesso); color: var(--fb-tinta); }
.info { background: var(--fb-petroleo-50); border-color: #C7DEE1; border-left-color: var(--fb-petroleo); color: var(--fb-tinta); }
.minuta { background: var(--fb-risco-50); border: 2px dashed var(--fb-risco); font-weight: 600; }
.cartao-alerta { border-left: 4px solid var(--fb-bloqueio); background: var(--fb-superficie); }
.cartao-alerta > strong:first-child, .cartao-alerta header { color: var(--fb-bloqueio-texto); }

/* --- Shell: barra lateral (logado) ------------------------------------------------------------ */
.shell {
  display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh;
  /* a coluna escura vai até o fim de páginas longas (a barra lateral é sticky) */
  background: linear-gradient(to right, var(--fb-lateral) 232px, var(--fb-nevoa) 232px);
}
.lateral {
  background: var(--fb-lateral); color: var(--fb-lateral-texto); padding: 22px 14px;
  display: flex; flex-direction: column; gap: 24px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.lateral a { color: var(--fb-lateral-texto); text-decoration: none; }
.lateral .logo { display: block; padding: 0 8px; }
.lateral .logo img { display: block; width: 160px; height: auto; }
.lateral nav { display: block; }
.lateral nav .nav-lateral { display: flex; flex-direction: column; align-items: stretch; gap: 2px; margin: 0; padding: 0; list-style: none; }
.lateral nav .nav-lateral li { display: block; list-style: none; margin: 0; padding: 0; }
.lateral nav .nav-lateral a { margin: 0; }
.nav-lateral a {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  font-size: 14px; padding: 9px 10px; border-radius: 7px;
}
.nav-lateral a:hover { background: var(--fb-lateral-ativo); color: #fff; }
.nav-lateral a[aria-current=page] { background: var(--fb-lateral-ativo); color: #fff; font-weight: 600; }
.nav-lateral .contador { font-family: var(--fb-fonte-codigos); font-size: 11px; color: var(--fb-lateral-2); }
.nav-lateral .contador.ambar { color: var(--fb-ambar); font-weight: 600; }
.lateral nav .nav-lateral li.sub-empresa { margin: 4px 0 6px 12px; padding-left: 8px; border-left: 1px solid var(--fb-lateral-trilho); display: flex; flex-direction: column; gap: 1px; }
.sub-empresa .titulo-empresa { display: block; font-size: 12px; color: var(--fb-lateral-2); padding: 4px 10px 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-empresa a { font-size: 13px; padding: 6px 10px; }
.lateral-rodape { margin-top: auto; display: flex; flex-direction: column; gap: 14px; }
.cota-caixa { background: var(--fb-lateral-caixa); border-radius: 10px; padding: 12px 14px; font-size: 12.5px; display: flex; flex-direction: column; gap: 10px; }
.cota-caixa .linha { display: flex; justify-content: space-between; gap: .5rem; color: var(--fb-lateral-3); }
.cota-caixa .linha .mono { color: #fff; font-size: 12px; }
.cota-caixa .trilho { height: 5px; border-radius: 3px; background: var(--fb-lateral-trilho); overflow: hidden; margin-top: 5px; }
.cota-caixa .trilho > span { display: block; height: 100%; background: var(--fb-ambar); border-radius: 3px; }
.cota-caixa small { color: var(--fb-lateral-2); font-size: 11.5px; }
.cota-caixa a { color: var(--fb-lateral-3); text-decoration: underline; }
.quem { display: flex; gap: 10px; align-items: center; padding: 0 4px; }
.avatar {
  flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--fb-lateral-ativo);
  color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; border: 1px solid var(--fb-lateral-trilho);
}
.quem strong { display: block; color: #fff; font-size: 13px; line-height: 1.2; }
.quem small { display: block; color: var(--fb-lateral-3); font-size: 12px; line-height: 1.25; overflow-wrap: anywhere; }
.lateral .sair button {
  width: 100%; margin: 0; padding: 7px 10px; font-size: 13px; font-weight: 500;
  background: transparent; color: var(--fb-lateral-texto); border: 1px solid var(--fb-lateral-trilho); border-radius: 7px;
}
.lateral .sair button:hover { background: var(--fb-lateral-ativo); color: #fff; }
.area { min-width: 0; display: flex; flex-direction: column; }
.area > main.container { max-width: 1440px; width: 100%; margin: 0; padding: 28px 32px 8px; flex: 1; }
.area > footer.container { max-width: 1440px; width: 100%; margin: 0; padding: 12px 32px 24px; }

/* --- Shell público e pré-venda: nav superior ------------------------------------------------- */
.topo { background: var(--fb-superficie); border-bottom: 1px solid var(--fb-linha); }
.topo nav { padding: .2rem 0; }
.topo nav a:not([role=button]) { color: var(--fb-texto-2); }
.topo nav a:not([role=button]):hover { color: var(--fb-petroleo); }
.marca { display: inline-flex; align-items: center; }
.marca img { display: block; width: 160px; height: auto; }
.marca strong { white-space: nowrap; }
.rodape { color: var(--fb-mudo); padding-top: 1.5rem; padding-bottom: 1.5rem; }
.rodape small, .rodape .aviso-legal { font-size: 12px; color: var(--fb-mudo); }
.rodape .identidade { margin: .4rem 0 0; }
.rodape .assinatura { font-size: 12px; margin: .4rem 0 0; color: var(--fb-mudo); }
.publico .rodape { border-top: 1px solid var(--fb-linha); margin-top: 2rem; }

/* --- Cabeçalho das páginas -------------------------------------------------------------------- */
.cabecalho-pagina { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.cabecalho-pagina h1 { margin: 0; }
.cabecalho-pagina .sobre { font-size: 13px; color: var(--fb-mudo); margin: 0 0 .2rem; }
.cabecalho-acoes { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.cabecalho-acoes > a[role=button], .cabecalho-acoes > button, .cabecalho-acoes form button { margin: 0; padding: .55rem .9rem; font-size: .9rem; }
.cabecalho-acoes form { margin: 0; }
.trilha { font-size: 13px; color: var(--fb-mudo); margin: 0 0 .25rem; }
.trilha a { color: var(--fb-mudo); }
.trilha .mono { font-size: 12px; }
.contagem {
  display: inline-flex; align-items: center; gap: .55rem; padding: .35rem .75rem; border-radius: 8px;
  background: var(--fb-ambar-50); border: 1px solid var(--fb-ambar-borda); color: var(--fb-ambar-texto);
}
.contagem strong { font-family: var(--fb-fonte-codigos); font-size: 20px; font-weight: 600; color: var(--fb-tinta); }
.contagem span { font-size: 11.5px; line-height: 1.2; }
.barra-acoes { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; }
.barra-acoes a[role=button] { margin: 0; padding: .45rem .8rem; font-size: .88rem; }

/* --- Grades ----------------------------------------------------------------------------------- */
.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.grade > article { margin-bottom: 0; }
/* 6 cartões: 3 por linha no computador, sem um cartão sozinho na última linha (F09). */
.grade-3 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.kpis > * { margin: 0; }
.duas-colunas { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 14px; margin-bottom: 20px; }
.duas-colunas.iguais { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.duas-colunas > * { margin: 0; }
.kpi .rotulo { font-size: 13px; color: var(--fb-mudo); display: flex; align-items: center; gap: .4rem; }
.kpi .numero { font-size: 28px; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; margin: .35rem 0 .6rem; font-variant-numeric: tabular-nums; }
.kpi .numero .den { color: var(--fb-mudo-2); font-weight: 500; }
.kpi .numero.medio { font-size: 24px; }
.kpi small { font-size: 12.5px; display: block; line-height: 1.4; }
.ponto { display: inline-block; width: 9px; height: 9px; border-radius: 2px; flex: none; }

.erro-objetivo-mini { display: flex; align-items: center; gap: .45rem; white-space: nowrap; }
.erro-objetivo-mini .barra { width: 52px; flex: none; }
.erro-objetivo-mini .mono { font-size: 12px; }

.detalhe-valores { list-style: none; padding: 0; margin: .9rem 0 0; font-size: 12.5px; color: var(--fb-texto-2); }
.detalhe-valores li { list-style: none; margin: 0 0 .25rem; }
.vazio-tabela { padding: 0 1rem 1rem; margin: 0; }
.kpi .numero .pct-kpi { font-size: 14px; font-weight: 500; }
.kpi .numero strong { font-weight: 600; }

.marcador-inline { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: .3rem; vertical-align: baseline; }
.acoes a[role=button].grande, .acoes button.grande { padding: .6rem 1.1rem; font-size: .95rem; }
#achados article > header { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.form-envio { border: 2px dashed var(--fb-borda-input); border-radius: 10px; padding: 1rem; background: var(--fb-nevoa); margin-bottom: 1rem; }
.form-envio button { margin-top: .6rem; }
.area-envio h2, .cota-envio h2 { font-size: 1.07rem; }
.cota-linha { display: flex; justify-content: space-between; font-size: 13px; margin: .7rem 0 .3rem; }
.guia-passos summary { font-weight: 600; }
.passos { list-style: none; counter-reset: passo; padding: 0; margin: 1rem 0 .5rem; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.passos li { list-style: none; counter-increment: passo; position: relative; padding: 0 0 0 2.4rem; margin: 0; font-size: 13.5px; }
.passos li::before {
  content: counter(passo); position: absolute; left: 0; top: 0; width: 1.8rem; height: 1.8rem; border-radius: 50%;
  background: var(--fb-petroleo); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 13px;
}

.filtro-chips { margin: 0 0 1rem; gap: .4rem; justify-content: flex-start; }
.kpis.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#achados { margin-top: 1rem; }
.filtro-chips a.chip { text-decoration: none; font-size: .78rem; padding: .25rem .65rem; }
.filtro-chips a.chip .mono { font-size: 11px; opacity: .85; }

.cartao-mensagem textarea { font-family: var(--fb-fonte); font-size: 14px; background: var(--fb-nevoa); }
.cartao-mensagem h2 { font-size: 1.07rem; }
.grade-exportar { margin-bottom: 1rem; }

.cota-barra { margin: .6rem 0 .3rem; }

/* Entrada e cadastro: marca de um lado, formulário do outro (empilhado no celular). */
.autenticacao { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 0; margin: 1.5rem auto; max-width: 980px; border-radius: 12px; overflow: hidden; border: 1px solid var(--fb-linha); }
.autenticacao > article { margin: 0; border: 0; border-radius: 0; padding: 2rem; }
.lado-marca { background: var(--fb-tinta); color: var(--fb-lateral-texto); padding: 2rem; display: flex; flex-direction: column; gap: 1rem; }
.lado-marca img { width: 240px; height: auto; }
.lado-marca-titulo { color: #fff; font-size: 1.15rem; font-weight: 600; line-height: 1.35; margin: 0; }
.lado-marca ul { margin: 0; padding-left: 1.1rem; font-size: 13.5px; }
.lado-marca li { margin-bottom: .45rem; color: var(--fb-lateral-texto); }
.lado-marca li::marker { color: var(--fb-ambar); }
.logo-hero { display: block; width: 280px; height: auto; margin: 0 0 1rem -10px; }
.hero-curto { padding-top: 1.5rem; }
.hero-curto .chip { white-space: normal; max-width: 100%; }
.titulo-linha-tempo { margin-top: 1.5rem; }
.linha-tempo-landing { margin-bottom: 1rem; }
.linha-tempo-landing li { font-size: 13.5px; }
.passo header { display: flex; align-items: center; gap: .6rem; }
.icone-passo { color: var(--fb-petroleo); flex: none; }
.destaque-exemplo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: center; margin: 2rem 0; }
.destaque-exemplo .exemplo-relatorio { margin: 0; }
.destaque-exemplo h2 { font-size: 1.3rem; }
.grade-planos { margin-bottom: 1.25rem; }
.cartao-plano { display: flex; flex-direction: column; }
.cartao-plano .preco { margin: .2rem 0 .6rem; }
.plano-limites { list-style: none; padding: 0; margin: 0 0 .6rem; display: flex; gap: 1rem; flex-wrap: wrap; font-size: 13.5px; }
.plano-limites li { list-style: none; margin: 0; }
.plano-destaque { border: 2px solid var(--fb-petroleo); background: linear-gradient(var(--fb-selecionada), var(--fb-superficie) 40%); }

.cartao-marca { max-width: 760px; margin: 2rem auto; padding: 2rem; border-top: 4px solid var(--fb-petroleo); }
.simbolo-cartao { display: block; width: 48px; height: 48px; margin-bottom: .8rem; }
.liberacao { background: var(--fb-ambar-50); border: 1px solid var(--fb-ambar-borda); border-radius: 8px; padding: .7rem 1rem; }

/* --- Gráficos (HTML/CSS, sem JS) ------------------------------------------------------------- */
.barra, .trilho-barra { height: 8px; background: var(--fb-vazio); border-radius: 4px; overflow: hidden; display: flex; }
.barra.grossa { height: 14px; border-radius: 3px; }
.barra.media { height: 10px; }
.barra.fina { height: 6px; }
.barra > span { display: block; height: 100%; background: var(--fb-petroleo); }
.barra > span + span { border-left: 1px solid var(--fb-superficie); }
.barra.sem-fundo { background: transparent; }
.c-petroleo { background-color: var(--fb-petroleo) !important; }
.c-petroleo-claro { background-color: var(--fb-petroleo-claro) !important; }
.c-ia { background-color: var(--fb-ia) !important; }
.c-bloqueio { background-color: var(--fb-bloqueio) !important; }
.c-risco { background-color: var(--fb-risco) !important; }
.c-sucesso { background-color: var(--fb-sucesso) !important; }
.c-neutro { background-color: var(--fb-neutro) !important; }
.c-ambar { background-color: var(--fb-ambar) !important; }
.c-vazio { background-color: var(--fb-vazio) !important; }
/* Hachura: "em análise" (ainda não revisado) × sólido: revisado. Vai junto com o rótulo em texto. */
.hachura.c-sucesso, .hachura.c-risco, .hachura.c-petroleo, .hachura {
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .62) 0 3px, transparent 3px 6px);
}
.legenda { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: 12.5px; color: var(--fb-texto-2); }
.legenda li { list-style: none; display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
.legenda.vertical { flex-direction: column; gap: .45rem; }
.legenda.vertical li { display: flex; justify-content: space-between; gap: 1rem; }
.legenda .valor { font-family: var(--fb-fonte-codigos); font-size: 12px; color: var(--fb-tinta); margin-left: auto; }
.legenda .marcador { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.legenda .marcador.hachura { border: 1px solid rgba(16, 42, 51, .25); }
.faixa-segmentos { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; }
.faixa-segmentos > span { height: 8px; border-radius: 2px; background: var(--fb-vazio); }
.grafico-vazio {
  border: 1px dashed var(--fb-borda-input); border-radius: 8px; padding: 1rem; text-align: center;
  color: var(--fb-mudo); font-size: 13px; background: var(--fb-nevoa);
}
/* Barras horizontais com rótulo e valor. */
.barras-h { display: flex; flex-direction: column; gap: .8rem; }
.barras-h .item-barra { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto; gap: .8rem; align-items: center; }
.barras-h .item-barra .rotulo { font-size: 13px; color: var(--fb-texto-2); }
.barras-h .item-barra .valor { font-size: 13px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Ranking "Clientes para abordar primeiro". */
.ranking { list-style: none; padding: 0; margin: 0; }
.ranking li {
  list-style: none; display: grid; grid-template-columns: 22px minmax(0, 200px) minmax(0, 1fr) 150px 120px;
  gap: 14px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--fb-linha-suave); margin: 0;
}
.ranking li:last-child { border-bottom: 0; }
.ranking .pos { color: var(--fb-mudo); font-size: 12px; font-family: var(--fb-fonte-codigos); }
.ranking .nome a { font-weight: 600; color: var(--fb-tinta); text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking .nome a:hover { text-decoration: underline; }
.ranking .nome small { display: block; font-size: 11.5px; }
.ranking .total { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ranking .total small { display: block; font-weight: 400; font-size: 11px; white-space: normal; line-height: 1.3; }
.ranking .link { text-align: right; font-size: 13px; }
/* Rosca: SVG com um círculo por categoria (stroke-dasharray), furo branco com o percentual. */
.rosca-bloco { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.rosca { position: relative; width: 150px; height: 150px; flex: none; }
.rosca svg { width: 150px; height: 150px; transform: rotate(-90deg); display: block; }
.rosca .centro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.rosca .centro strong { font-size: 22px; font-weight: 600; letter-spacing: -.01em; line-height: 1.1; }
.rosca .centro small { font-size: 11.5px; }
.rosca-bloco .legenda { flex: 1; min-width: 180px; }
.s-petroleo { stroke: var(--fb-petroleo); }
.s-petroleo-claro { stroke: var(--fb-petroleo-claro); }
.s-ia { stroke: var(--fb-ia); }
.s-bloqueio { stroke: var(--fb-bloqueio); }
.s-risco { stroke: var(--fb-risco); }
.s-neutro { stroke: var(--fb-neutro); }
.s-vazio { stroke: var(--fb-vazio); }
/* Colunas: ritmo da revisão por semana. */
.colunas { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; align-items: end; height: 150px; margin-top: .4rem; }
.colunas .coluna { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; height: 100%; text-align: center; }
.colunas .coluna .valor { font-family: var(--fb-fonte-codigos); font-size: 11px; color: var(--fb-mudo); margin-bottom: 3px; }
.colunas .coluna .trilho-col { height: 120px; display: flex; align-items: flex-end; }
.colunas .coluna .trilho-col > span { display: block; width: 100%; background: var(--fb-petroleo); border-radius: 3px 3px 0 0; min-height: 2px; }
.colunas .coluna.atual .trilho-col > span { background: var(--fb-ambar); }
.colunas-eixo { display: flex; justify-content: space-between; font-family: var(--fb-fonte-codigos); font-size: 11px; color: var(--fb-mudo); margin-top: .35rem; }
/* Linha do tempo (Até a virada; landing). */
.linha-tempo { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: relative; }
.linha-tempo::before { content: ""; position: absolute; left: 6px; right: 6px; top: 6px; height: 2px; background: var(--fb-linha); }
.linha-tempo li { list-style: none; position: relative; padding: 22px .6rem 0 0; margin: 0; font-size: 12.5px; color: var(--fb-texto-2); line-height: 1.35; }
.linha-tempo li::before {
  content: ""; position: absolute; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%;
  background: var(--fb-superficie); border: 2px solid var(--fb-petroleo-claro); box-sizing: border-box;
}
.linha-tempo li.passado::before { background: var(--fb-petroleo); border-color: var(--fb-petroleo); }
.linha-tempo li.marco::before { border-radius: 2px; transform: rotate(45deg); background: var(--fb-ambar); border-color: var(--fb-ambar); }
.linha-tempo li strong { display: block; color: var(--fb-tinta); font-size: 13px; }
.linha-tempo li .situacao { display: block; font-size: 11.5px; color: var(--fb-mudo); }
.linha-tempo li .fonte { display: block; font-size: 11px; color: var(--fb-mudo); margin-top: .2rem; }
/* Funil horizontal (importação, leads). */
.funil { display: flex; flex-direction: column; gap: .55rem; }
.funil .etapa { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr) 90px; gap: .8rem; align-items: center; font-size: 13px; }
.funil .etapa .valor { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Medidor de confiança: 3 segmentos. */
.medidor { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: .3rem; }
.medidor > span { height: 6px; border-radius: 2px; background: var(--fb-vazio); }

/* --- Tabelas e fila --------------------------------------------------------------------------- */
table.compacta td, table.compacta th { padding: .45rem .6rem; font-size: .9rem; }
table.compacta th { font-size: .72rem; }
.tabela-cartao { background: var(--fb-superficie); border: 1px solid var(--fb-linha); border-radius: 10px; overflow: hidden; margin-bottom: 1rem; }
.tabela-cartao table { margin: 0; }
.tabela-cartao th, .tabela-cartao td { padding-left: 1rem; padding-right: 1rem; background: transparent; }
.tabela-cartao thead th { background: var(--fb-superficie); }
.tabela-cartao tbody tr:last-child td { border-bottom: 0; }
.tabela-cartao .cartao-titulo { padding: 1rem 1rem 0; }
.par { font-family: var(--fb-fonte-codigos); font-size: 12.5px; white-space: nowrap; }
.par del, .par-atual { color: var(--fb-mudo); text-decoration: line-through; font-weight: 400; }
.par .seta { color: var(--fb-mudo); margin: 0 .25rem; }
.par strong, .par-novo { font-weight: 600; color: var(--fb-tinta); }
.item-desc { font-weight: 600; display: block; }
.item-cod { display: block; font-family: var(--fb-fonte-codigos); font-size: 11px; color: var(--fb-mudo); }
tr.selecionada > td { background: var(--fb-selecionada); }
tr.selecionada > td:first-child { box-shadow: inset 3px 0 0 var(--fb-petroleo); }
tr.selecionada { outline: 0; }
.resolvido { opacity: .6; }
.feito { text-decoration: line-through; }
.decidido-ok { color: var(--fb-sucesso-texto); font-weight: 600; font-size: .85rem; white-space: nowrap; }
.abas { display: inline-flex; gap: 2px; background: #E7EEEF; padding: 3px; border-radius: 9px; flex-wrap: wrap; margin-bottom: .8rem; }
.abas a { padding: .35rem .8rem; border-radius: 7px; font-size: 13.5px; color: var(--fb-texto-2); text-decoration: none; font-weight: 500; }
.abas a[aria-current=page] { background: var(--fb-superficie); color: var(--fb-tinta); font-weight: 600; box-shadow: 0 1px 2px rgba(16, 42, 51, .1); }
.abas .mono { font-size: 11px; color: var(--fb-mudo); margin-left: .25rem; }
.progresso-fila { display: flex; flex-direction: column; gap: .3rem; align-items: flex-end; font-size: 12.5px; color: var(--fb-mudo); }
.progresso-fila .barra { width: 200px; height: 6px; }
.legenda-atalhos { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; font-size: 12.5px; color: var(--fb-mudo); margin: .6rem 0 1rem; }
tr.decidida > td { opacity: .6; }
tr.decidida > td.acoes { opacity: 1; }
.linha-fila td { vertical-align: top; padding-top: .7rem; padding-bottom: .7rem; }
.linha-fila .item-desc { color: var(--fb-tinta); text-decoration: none; max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-fila .item-desc:hover { text-decoration: underline; }
.linha-fila .descricao-cc, .linha-fila td > small { display: block; font-size: 12px; margin-top: .2rem; }
@media (min-width: 769px) {
  table#fila td.acoes { display: table-cell; white-space: nowrap; }
  table#fila td.acoes > form, table#fila td.acoes > a, table#fila td.acoes > span { display: inline-flex; vertical-align: middle; margin: 0 .25rem .25rem 0; }
}
.filtros-linha { display: grid; grid-template-columns: minmax(180px, 2fr) repeat(4, minmax(110px, 1fr)) auto; gap: .5rem; align-items: end; margin-bottom: .6rem; }
.filtros-linha label { margin: 0; }
.filtros-linha .acoes { padding-bottom: .4rem; }
.paginacao { margin-top: .5rem; }
.detalhe-titulo { font-size: 18px; font-weight: 600; margin: .2rem 0 .2rem; }
.detalhe .confianca .cartao-titulo { margin-bottom: 0; }
.detalhe-acoes { margin-top: .8rem; }
.detalhe-acoes form button, .detalhe-acoes a[role=button] { padding: .45rem .8rem; font-size: .88rem; }
.detalhe-acoes kbd { margin-left: .3rem; font-size: .65rem; padding: 0 .3rem; }
.detalhe-links { margin: .6rem 0 0; }
.fila-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 14px; align-items: start; }
.fila-corpo > * { margin: 0; }
.detalhe-lateral { position: sticky; top: 16px; }
.detalhe-lateral > article, .detalhe-lateral > .cartao { margin: 0; }
.comparacao { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); gap: 6px; align-items: stretch; margin: .8rem 0; }
.comparacao .lado { border: 1px solid var(--fb-linha); border-radius: 8px; padding: .6rem .7rem; font-size: 12px; color: var(--fb-mudo); }
.comparacao .lado.sugestao { border-color: var(--fb-petroleo); background: var(--fb-selecionada); }
.comparacao .lado .mono { display: block; font-size: 15px; color: var(--fb-tinta); font-weight: 600; margin: .15rem 0; }
.comparacao .lado:not(.sugestao) .mono { color: var(--fb-mudo); font-weight: 500; }
.comparacao .seta { display: grid; place-items: center; color: var(--fb-mudo); }
.fundamento { background: var(--fb-nevoa); border-radius: 8px; padding: .8rem .9rem; font-size: 13px; margin: .8rem 0; }
.fundamento .titulo { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--fb-mudo); display: block; margin-bottom: .3rem; }
.fundamento .versoes { font-family: var(--fb-fonte-codigos); font-size: 11px; color: var(--fb-mudo); margin-top: .4rem; display: block; }

/* --- Formulários e utilitários --------------------------------------------------------------- */
input:not([type=checkbox], [type=radio], [type=range], [type=file]), select, textarea { border-radius: 8px; }
input[type=file] { background: var(--fb-superficie); }
.filtros .grid { gap: .5rem; }
/* O form role=search do Pico deixa o botão em pílula; esticado pela altura da célula, ele virava
   um círculo (dogfood da Fase 16, F02). Alinhado embaixo, fica do tamanho do texto. */
.filtros .acoes { align-items: flex-end; }
.filtros input, .filtros select { margin-bottom: .4rem; font-size: .9rem; }
.filtros label { font-size: 12.5px; color: var(--fb-mudo); }
/* Códigos longos (ex.: as colunas do CSV de empresas) quebram linha no celular (F06). */
main code { overflow-wrap: anywhere; }
.oculto { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }
.logo-previa { max-height: 80px; }
.em-linha { display: inline; }
.hero { padding: 2rem 0 1rem; }
.hero h1 { font-size: 2.1rem; line-height: 1.2; }
.destaque-texto, p.destaque { font-size: 1.15rem; color: var(--fb-texto-2); }
.preco-cheio { text-decoration: line-through; color: var(--fb-mudo); }
.preco-prevenda { font-size: 1.6rem; font-weight: 700; color: var(--fb-petroleo); }
.preco-prevenda, .preco-cheio { white-space: nowrap; }
.nao-prometemos li::marker { content: "✕ "; color: var(--fb-risco-texto); }
.entregamos li::marker { content: "✓ "; color: var(--fb-sucesso-texto); }
.exemplo-relatorio { margin: 1rem 0; text-align: center; }
.exemplo-relatorio img { max-width: 100%; height: auto; border: 1px solid var(--fb-linha); border-radius: 6px; box-shadow: 0 6px 24px rgba(16, 42, 51, .12); }
.sim-nao { display: flex; gap: .25rem; }
.sim-nao button { margin: 0; }
.descricao-cc { color: var(--fb-mudo); }
.plano-destaque { border: 2px solid var(--fb-petroleo); }
.plano-destaque .selo { background: var(--fb-petroleo); color: #fff; margin-left: .4rem; }
.linha-fila td:nth-child(4) { white-space: nowrap; }
details summary { color: var(--fb-petroleo); }
progress { height: 8px; border-radius: 4px; }


/* --- Celular ---------------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .kpis, .kpis.tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duas-colunas, .duas-colunas.iguais { grid-template-columns: minmax(0, 1fr); }
  .fila-corpo { grid-template-columns: minmax(0, 1fr); }
  .detalhe-lateral { position: static; }
  .filtros-linha { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filtros-linha .busca { grid-column: 1 / -1; }
}
/* Celular: as tabelas rolam dentro delas mesmas, não a página inteira; o menu quebra linha.
   A barra lateral vira um menu superior que quebra linha. */
@media (max-width: 768px) {
  main table { display: block; overflow-x: auto; max-width: 100%; }
  header nav { flex-wrap: wrap; }
  header nav ul { flex-wrap: wrap; }
  .shell { display: block; background: var(--fb-nevoa); }
  .lateral { position: static; height: auto; padding: 12px 16px; gap: 10px; overflow: visible; }
  .lateral .logo img { width: 132px; }
  .lateral nav .nav-lateral { flex-direction: row; flex-wrap: wrap; gap: 2px 4px; }
  .lateral nav .nav-lateral a { padding: 6px 9px; font-size: 13.5px; }
  .lateral nav .nav-lateral li.sub-empresa { order: 10; margin: 4px 0 0; padding: 6px 0 0; border-left: 0; border-top: 1px solid var(--fb-lateral-trilho); width: 100%; flex-direction: row; flex-wrap: wrap; gap: 2px 4px; }
  .sub-empresa .titulo-empresa { width: 100%; padding: 0 9px; }
  .lateral-rodape { margin-top: 0; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
  .cota-caixa { width: 100%; flex-direction: row; flex-wrap: wrap; gap: 8px 16px; padding: 8px 12px; }
  .cota-caixa > div { flex: 1 1 140px; }
  .quem { flex: 1; }
  .lateral .sair { flex: none; }
  .area > main.container { padding: 18px 16px 8px; }
  .area > footer.container { padding: 12px 16px 20px; }
  .topo nav { flex-wrap: wrap; }
  .topo nav ul:last-child { margin-right: 0; flex-wrap: wrap; }
  .topo nav ul:last-child li:last-child a { margin-right: 0; }
  .marca img { width: 140px; }
  .kpis, .kpis.tres { grid-template-columns: minmax(0, 1fr); }
  .kpi .numero { font-size: 24px; }
  .ranking li { grid-template-columns: 18px minmax(0, 1fr); gap: 4px 10px; }
  .ranking li > * { grid-column: 2; }
  .ranking li .pos { grid-column: 1; grid-row: 1; }
  .ranking .total, .ranking .link { text-align: left; }
  .barras-h .item-barra { grid-template-columns: minmax(0, 1fr) auto; }
  .barras-h .item-barra .barra { grid-column: 1 / 3; grid-row: 2; }
  .funil .etapa { grid-template-columns: minmax(0, 1fr) auto; }
  .funil .etapa .barra { grid-column: 1 / 3; grid-row: 2; }
  .linha-tempo { grid-auto-flow: row; gap: .8rem; }
  .linha-tempo::before { left: 6px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; }
  .linha-tempo li { padding: 0 0 0 26px; }
  .colunas { gap: 4px; }
  .cabecalho-pagina { align-items: flex-start; }
  .progresso-fila { align-items: flex-start; }
  .comparacao { grid-template-columns: minmax(0, 1fr); }
  .autenticacao, .destaque-exemplo { grid-template-columns: minmax(0, 1fr); }
  .autenticacao > article, .lado-marca { padding: 1.25rem; }
  .lado-marca img { width: 200px; }
  .logo-hero { width: 240px; }
  .filtros-linha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .comparacao .seta { transform: rotate(90deg); }
  article, .cartao { padding: 1rem; }
  article > header, article > footer { margin-left: -1rem; margin-right: -1rem; padding-left: 1rem; padding-right: 1rem; }
}

/* Celular (<= 768 px): a fila vira uma lista de cartões, sem rolagem horizontal, para o botão
   "Aprovar" (e Sim/Não) ficar sempre à vista. O cabeçalho some e cada célula ganha seu rótulo. */
@media (max-width: 768px) {
  main table#fila { display: block; overflow-x: visible; }
  #fila thead { display: none; }
  #fila tbody, #fila tr, #fila td { display: block; width: 100%; }
  #fila tr { border: 1px solid var(--fb-linha); border-radius: 8px; margin-bottom: .8rem; padding: .3rem 0; background: var(--fb-superficie); }
  #fila td { border: 0; padding: .2rem .7rem; white-space: normal !important; }
  #fila td:nth-child(2)::before { content: "Par atual → sugestão: "; color: var(--fb-mudo); font-size: 12px; }
  #fila td:nth-child(4)::before { content: "Vendas: "; color: var(--fb-mudo); }
  #fila td.num { text-align: left; }
  .detalhe-lateral { display: none; }
  #fila td:empty { display: none; }
  #fila td.acoes { display: flex; }
}

/* --- Larguras e alturas dos gráficos (1 em 1 %), no lugar de style="width: …" ---------------- */
.w-0{width:0}.w-1{width:1%}.w-2{width:2%}.w-3{width:3%}.w-4{width:4%}.w-5{width:5%}.w-6{width:6%}.w-7{width:7%}.w-8{width:8%}.w-9{width:9%}
.w-10{width:10%}.w-11{width:11%}.w-12{width:12%}.w-13{width:13%}.w-14{width:14%}.w-15{width:15%}.w-16{width:16%}.w-17{width:17%}.w-18{width:18%}.w-19{width:19%}
.w-20{width:20%}.w-21{width:21%}.w-22{width:22%}.w-23{width:23%}.w-24{width:24%}.w-25{width:25%}.w-26{width:26%}.w-27{width:27%}.w-28{width:28%}.w-29{width:29%}
.w-30{width:30%}.w-31{width:31%}.w-32{width:32%}.w-33{width:33%}.w-34{width:34%}.w-35{width:35%}.w-36{width:36%}.w-37{width:37%}.w-38{width:38%}.w-39{width:39%}
.w-40{width:40%}.w-41{width:41%}.w-42{width:42%}.w-43{width:43%}.w-44{width:44%}.w-45{width:45%}.w-46{width:46%}.w-47{width:47%}.w-48{width:48%}.w-49{width:49%}
.w-50{width:50%}.w-51{width:51%}.w-52{width:52%}.w-53{width:53%}.w-54{width:54%}.w-55{width:55%}.w-56{width:56%}.w-57{width:57%}.w-58{width:58%}.w-59{width:59%}
.w-60{width:60%}.w-61{width:61%}.w-62{width:62%}.w-63{width:63%}.w-64{width:64%}.w-65{width:65%}.w-66{width:66%}.w-67{width:67%}.w-68{width:68%}.w-69{width:69%}
.w-70{width:70%}.w-71{width:71%}.w-72{width:72%}.w-73{width:73%}.w-74{width:74%}.w-75{width:75%}.w-76{width:76%}.w-77{width:77%}.w-78{width:78%}.w-79{width:79%}
.w-80{width:80%}.w-81{width:81%}.w-82{width:82%}.w-83{width:83%}.w-84{width:84%}.w-85{width:85%}.w-86{width:86%}.w-87{width:87%}.w-88{width:88%}.w-89{width:89%}
.w-90{width:90%}.w-91{width:91%}.w-92{width:92%}.w-93{width:93%}.w-94{width:94%}.w-95{width:95%}.w-96{width:96%}.w-97{width:97%}.w-98{width:98%}.w-99{width:99%}.w-100{width:100%}
.h-0{height:0}.h-1{height:1%}.h-2{height:2%}.h-3{height:3%}.h-4{height:4%}.h-5{height:5%}.h-6{height:6%}.h-7{height:7%}.h-8{height:8%}.h-9{height:9%}
.h-10{height:10%}.h-11{height:11%}.h-12{height:12%}.h-13{height:13%}.h-14{height:14%}.h-15{height:15%}.h-16{height:16%}.h-17{height:17%}.h-18{height:18%}.h-19{height:19%}
.h-20{height:20%}.h-21{height:21%}.h-22{height:22%}.h-23{height:23%}.h-24{height:24%}.h-25{height:25%}.h-26{height:26%}.h-27{height:27%}.h-28{height:28%}.h-29{height:29%}
.h-30{height:30%}.h-31{height:31%}.h-32{height:32%}.h-33{height:33%}.h-34{height:34%}.h-35{height:35%}.h-36{height:36%}.h-37{height:37%}.h-38{height:38%}.h-39{height:39%}
.h-40{height:40%}.h-41{height:41%}.h-42{height:42%}.h-43{height:43%}.h-44{height:44%}.h-45{height:45%}.h-46{height:46%}.h-47{height:47%}.h-48{height:48%}.h-49{height:49%}
.h-50{height:50%}.h-51{height:51%}.h-52{height:52%}.h-53{height:53%}.h-54{height:54%}.h-55{height:55%}.h-56{height:56%}.h-57{height:57%}.h-58{height:58%}.h-59{height:59%}
.h-60{height:60%}.h-61{height:61%}.h-62{height:62%}.h-63{height:63%}.h-64{height:64%}.h-65{height:65%}.h-66{height:66%}.h-67{height:67%}.h-68{height:68%}.h-69{height:69%}
.h-70{height:70%}.h-71{height:71%}.h-72{height:72%}.h-73{height:73%}.h-74{height:74%}.h-75{height:75%}.h-76{height:76%}.h-77{height:77%}.h-78{height:78%}.h-79{height:79%}
.h-80{height:80%}.h-81{height:81%}.h-82{height:82%}.h-83{height:83%}.h-84{height:84%}.h-85{height:85%}.h-86{height:86%}.h-87{height:87%}.h-88{height:88%}.h-89{height:89%}
.h-90{height:90%}.h-91{height:91%}.h-92{height:92%}.h-93{height:93%}.h-94{height:94%}.h-95{height:95%}.h-96{height:96%}.h-97{height:97%}.h-98{height:98%}.h-99{height:99%}.h-100{height:100%}

/* --- Landing (D58): faixas de largura total, a partir da VSL --------------------------------- */
/* O <main> da landing não tem .container: cada faixa ocupa a largura toda e centraliza o
   conteúdo no .container dela. A nota com o 000001 marcado é o elemento visual da página;
   o resto fica sóbrio. Só uma animação (o ano da abertura), desligada com reduced-motion. */
main.landing { padding: 0; }
main.landing + .rodape { margin-top: 0; }
.landing .faixa { padding: clamp(3rem, 6vw, 5.5rem) 0; margin: 0; background: var(--fb-superficie); }
.landing .faixa-nevoa { background: var(--fb-nevoa); }
.landing .faixa-tinta { background: var(--fb-tinta); color: #DCE8EA; }
.landing .faixa-tinta a:not([role=button]) { color: var(--fb-lateral-3); }
.landing h2 { font-size: clamp(1.6rem, 2.8vw, 2.25rem); line-height: 1.15; letter-spacing: -.02em; color: var(--fb-tinta); margin-bottom: .8rem; max-width: 30ch; }
.landing h3 { color: var(--fb-tinta); }
.landing .lide { font-size: 1.1rem; line-height: 1.55; color: var(--fb-texto-2); max-width: 62ch; }
.landing .fonte { font-size: 12.5px; color: var(--fb-mudo); margin: .4rem 0 0; }
.landing article { margin: 0; }
.landing .acoes { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.6rem 0 0; }
.landing .acoes a[role=button], .entrada a[role=button], .plano a[role=button] { margin: 0; padding: .8rem 1.35rem; font-size: 1rem; }
.landing code { background: var(--fb-ambar-50); color: var(--fb-ambar-texto); border: 1px solid var(--fb-ambar-borda); border-radius: 5px; padding: .05rem .35rem; font-size: .92em; }
.landing .estreito { max-width: 780px; }

/* Botões da landing */
a[role=button].botao-ambar { background: var(--fb-ambar); border: 1px solid var(--fb-ambar); color: var(--fb-tinta); font-weight: 600; }
a[role=button].botao-ambar:hover { background: #F5C35F; border-color: #F5C35F; color: var(--fb-tinta); }
a[role=button].botao-ambar:focus-visible, a[role=button].botao-claro:focus-visible { outline: 3px solid var(--fb-ambar); outline-offset: 3px; box-shadow: none; }
a[role=button].botao-claro { background: transparent; border: 1px solid rgba(255, 255, 255, .38); color: #fff; }
a[role=button].botao-claro:hover { background: rgba(255, 255, 255, .08); border-color: #fff; color: #fff; }

/* Abertura */
.landing .abertura { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 7vw, 6rem); }
.abertura-grade { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.data-virada { font-size: clamp(3.4rem, 8.5vw, 7.2rem); font-weight: 700; line-height: .9; letter-spacing: -.045em; color: #fff; margin: 0 0 1.4rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-virada .ano { color: var(--fb-ambar); display: inline-block; }
.abertura h1 { font-size: clamp(1.45rem, 2.4vw, 2rem); line-height: 1.22; font-weight: 600; color: #fff; margin: 0 0 1rem; max-width: 26ch; }
.abertura-lide { font-size: 1.08rem; line-height: 1.6; color: var(--fb-lateral-texto); max-width: 58ch; margin: 0; }
.abertura-lide strong { color: #fff; }
.abertura-nota { font-size: .9rem; color: var(--fb-lateral-3); margin: 1rem 0 0; }
.video-vsl { margin: 0; }
.video-vsl video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #0B1D23; border: 1px solid var(--fb-lateral-trilho); border-radius: 12px; box-shadow: 0 28px 60px rgba(0, 0, 0, .35); }
.video-vsl figcaption { font-size: .85rem; color: var(--fb-lateral-3); margin-top: .7rem; }
@media (prefers-reduced-motion: no-preference) {
  .data-virada .ano { animation: virada-ano .9s .25s cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes virada-ano { from { opacity: 0; transform: translateY(.18em); } to { opacity: 1; transform: none; } }
}

/* O problema: a nota com o 000001 marcado */
.problema-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.estatistica { border-left: 4px solid var(--fb-ambar); padding: .2rem 0 .2rem 1rem; margin: 1.6rem 0 0; color: var(--fb-texto-2); font-size: .95rem; max-width: 52ch; }
.estatistica strong { display: block; font-size: 2.8rem; line-height: 1; letter-spacing: -.03em; color: var(--fb-tinta); margin-bottom: .35rem; }
.estatistica a { font-size: 12.5px; }
.nota-exemplo { margin: 0; background: var(--fb-superficie); border: 1px solid var(--fb-linha); border-radius: 14px; padding: 1.1rem 1.25rem 1rem; box-shadow: 0 20px 44px rgba(16, 42, 51, .12); }
.nota-cabecalho { display: flex; justify-content: space-between; gap: 1rem; font-family: var(--fb-fonte-codigos); font-size: 11.5px; color: var(--fb-mudo); padding-bottom: .6rem; border-bottom: 1px solid var(--fb-linha); }
.nota-exemplo table { margin: 0; font-size: 14px; }
.nota-exemplo th { font-size: 11.5px; font-weight: 600; color: var(--fb-mudo); background: transparent; }
.nota-exemplo td, .nota-exemplo th { padding: .55rem .4rem; background: transparent; }
.nota-exemplo td.mono { font-size: 13px; white-space: nowrap; }
.nota-exemplo mark { background: var(--fb-ambar-50); color: var(--fb-ambar-texto); border: 1px solid var(--fb-ambar-borda); border-radius: 4px; padding: .05rem .35rem; }
.nota-exemplo tr.marcado td { background: var(--fb-selecionada); }
.nota-sugestao { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .6rem; margin-top: .9rem; padding: .8rem .9rem; border: 1px solid var(--fb-petroleo); border-radius: 10px; background: var(--fb-selecionada); }
.nota-sugestao .rotulo { width: 100%; font-size: 12.5px; font-weight: 600; color: var(--fb-petroleo-700); }
.nota-sugestao .antes { color: var(--fb-mudo); text-decoration: line-through; font-size: 14px; }
.nota-sugestao .seta { color: var(--fb-mudo); }
.nota-sugestao .depois { background: var(--fb-petroleo); color: #fff; font-size: 14px; font-weight: 600; padding: .15rem .55rem; border-radius: 6px; }
.nota-sugestao small { width: 100%; color: var(--fb-texto-2); font-size: 12.5px; }
.nota-exemplo figcaption { font-size: 11.5px; color: var(--fb-mudo); margin-top: .6rem; }
.landing .titulo-riscos { margin-top: clamp(3rem, 6vw, 4.5rem); }
.riscos { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.riscos li { list-style: none; margin: 0; background: var(--fb-superficie); border: 1px solid var(--fb-linha); border-top: 4px solid var(--fb-petroleo); border-radius: 10px; padding: 1.2rem 1.3rem; color: var(--fb-texto-2); font-size: 15px; line-height: 1.5; }
.riscos li strong { display: block; font-size: 1.15rem; color: var(--fb-tinta); }
.riscos .efeito { display: block; font-weight: 600; margin: .15rem 0 .55rem; }
.riscos .risco-pago .efeito { color: var(--fb-petroleo-700); }
.riscos .risco-exposto { border-top-color: var(--fb-risco); }
.riscos .risco-exposto .efeito { color: var(--fb-risco-texto); }
.riscos .risco-nota { border-top-color: var(--fb-bloqueio); }
.riscos .risco-nota .efeito { color: var(--fb-bloqueio-texto); }
.quem-procura { font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.4; font-weight: 600; color: var(--fb-tinta); max-width: 44ch; margin: clamp(2rem, 4vw, 3rem) 0 0; }

/* Por que agora */
.fatos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 3rem; margin-top: 1.4rem; }
.landing .fatos article { background: transparent; box-shadow: none; padding: 1rem 0 0; border: 0; border-top: 2px solid var(--fb-linha); border-radius: 0; }
.fatos h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.fatos p { color: var(--fb-texto-2); margin-bottom: 0; }
.landing .titulo-linha-tempo { margin-top: 2.5rem; font-size: 1.1rem; }

/* Como funciona: uma sequência de verdade, por isso numerada */
.etapas { list-style: none; counter-reset: etapa; padding: 0; margin: 1.8rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.etapas.etapas-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.etapas li { list-style: none; counter-increment: etapa; position: relative; margin: 0; padding-top: 3.4rem; color: var(--fb-texto-2); line-height: 1.55; }
.etapas li::before { content: counter(etapa); position: absolute; top: 0; left: 0; width: 2.4rem; height: 2.4rem; border-radius: 8px; display: grid; place-items: center; background: var(--fb-petroleo); color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.etapas li strong { display: block; font-size: 1.2rem; color: var(--fb-tinta); margin-bottom: .4rem; }

/* Exemplo, revenda e transparência */
.landing .destaque-exemplo { margin: 0 auto; gap: clamp(2rem, 4vw, 3.5rem); }
.landing .destaque-exemplo h2 { font-size: clamp(1.6rem, 2.8vw, 2.25rem); }
.landing .exemplo-relatorio img { max-width: 420px; width: 100%; }
.landing .entregamos, .landing .nao-prometemos { padding-left: 1.2rem; }
.landing .entregamos li, .landing .nao-prometemos li { margin-bottom: .55rem; color: var(--fb-texto-2); }
.revenda { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.4rem; }
.landing .revenda article { background: var(--fb-superficie); border: 1px solid var(--fb-linha); border-radius: 12px; box-shadow: none; padding: 1.3rem 1.4rem; }
.revenda h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.revenda p { margin: 0; color: var(--fb-texto-2); }
.landing .revenda .revenda-conta { background: var(--fb-tinta); border-color: var(--fb-tinta); }
.revenda .revenda-conta h3 { color: #fff; }
.revenda .revenda-conta p { color: var(--fb-lateral-texto); }
.landing .duas-colunas { gap: 2.5rem; margin-top: 1.4rem; }
.landing .duas-colunas h3 { font-size: 1.1rem; }

/* Preços */
.entrada { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .9rem 1.5rem; align-items: center; background: var(--fb-superficie); border: 1px solid var(--fb-ambar-borda); border-left: 5px solid var(--fb-ambar); border-radius: 12px; padding: 1.2rem 1.4rem; margin: 1.6rem 0; }
.entrada a[role=button] { margin: 0; white-space: nowrap; }
.planos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.landing .planos .plano { display: flex; flex-direction: column; background: var(--fb-superficie); border: 1px solid var(--fb-linha); border-radius: 14px; box-shadow: none; padding: 1.5rem; }
.plano h3 { font-size: 1.15rem; margin-bottom: .3rem; }
.plano .preco { margin: .2rem 0 .5rem; }
.plano .preco-prevenda { font-size: 2.1rem; letter-spacing: -.02em; }
.plano .plano-limites { display: block; font-size: 14px; color: var(--fb-texto-2); margin-bottom: 1rem; }
.plano .plano-limites strong { color: var(--fb-petroleo-700); }
.plano > p:last-child { margin: auto 0 0; }
.plano a[role=button] { width: 100%; margin: 0; }
.landing .planos .plano-destaque { border: 2px solid var(--fb-petroleo); box-shadow: 0 18px 40px rgba(27, 94, 107, .16); }
.plano .selo { display: inline-block; font-size: 11px; font-weight: 600; vertical-align: middle; padding: .15rem .55rem; border-radius: 999px; background: var(--fb-petroleo); color: #fff; margin-left: .35rem; }
.landing .garantia { margin: 1.4rem 0 .8rem; }

/* Dúvidas, contato e fechamento */
.landing #faq details { background: var(--fb-superficie); border: 1px solid var(--fb-linha); border-radius: 10px; padding: .9rem 1.1rem; margin-bottom: .6rem; }
.landing #faq details summary { font-weight: 600; }
.landing #faq details p { margin: .7rem 0 0; color: var(--fb-texto-2); }
.lead-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.landing .fechamento { text-align: center; }
.logo-fechamento { display: block; width: 220px; height: auto; margin: 0 auto 1.4rem; }
.fechamento-titulo { font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.2; font-weight: 700; letter-spacing: -.02em; color: #fff; max-width: 24ch; margin: 0 auto; }
.landing .fechamento .acoes { justify-content: center; }

/* Topo e rodapé: o caminho de volta para o site da Ludai Labs */
.topo nav a.voltar-site { font-size: 13.5px; color: var(--fb-mudo); border-left: 1px solid var(--fb-linha); padding-left: 1rem; }
.rodape .assinatura a { color: var(--fb-mudo); }

@media (max-width: 960px) {
  .abertura-grade, .problema-grade, .lead-grade { grid-template-columns: minmax(0, 1fr); }
  .riscos, .revenda, .planos, .etapas, .etapas.etapas-4 { grid-template-columns: minmax(0, 1fr); }
  .fatos { grid-template-columns: minmax(0, 1fr); }
  .etapas { gap: 1.4rem; }
}
@media (max-width: 768px) {
  .landing .container { padding-left: 16px; padding-right: 16px; }
  .entrada { grid-template-columns: minmax(0, 1fr); }
  .entrada a[role=button] { width: 100%; }
  .landing .acoes a[role=button] { flex: 1 1 100%; text-align: center; }
  .topo nav a.voltar-site { border-left: 0; padding-left: 0; }
  .nota-exemplo { padding: .9rem; }
}