:root{--blue:#4da6ff;--blue-hover:#1e90ff;--text:#0f172a;--muted:#64748b;--bg:#ffffff;--border:#e5e7eb}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
.container{max-width:1320px;margin:0 auto;padding:0 20px}
.topbar{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--border);z-index:10}
.topwrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;min-height:82px}
.brand{justify-self:start;display:flex;align-items:center}
.brand img{max-height:56px;height:auto;width:auto;display:block}
.nav{justify-self:center;display:flex;gap:8px;flex-wrap:nowrap !important;align-items:center}
.nav a{appearance:none;border:1px solid var(--border);background:#fff;padding:6px 12px;border-radius:999px;text-decoration:none;color:#111827;font-size:13px;white-space:nowrap}
.nav a:hover{background:#f8fafc}
.spacer{justify-self:end}
main{padding:40px 0 100px}
h1{font-weight:800;font-size:46px;line-height:1.18;margin:0 0 10px;text-align:center}
.lead{font-size:18px;color:var(--muted);text-align:center;margin:0 auto 24px;max-width:980px}
.section{border:1px solid var(--border);border-radius:14px;padding:28px 24px;margin:26px auto;text-align:center}
.section p{margin:10px 0;font-size:16px}
.actions{border:1px solid var(--border);border-radius:14px;padding:18px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.btn{padding:10px 16px;border-radius:10px;border:2px solid var(--blue);background:var(--blue);color:#fff;text-decoration:none;font-weight:600;font-size:14px;white-space:nowrap;display:inline-block}
.btn:hover{background:var(--blue-hover);border-color:var(--blue-hover)}
.btn-ghost{background:#fff;color:#0f172a}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.badge{border:1px solid var(--border);border-radius:999px;padding:6px 12px;font-size:13px;background:#fff}
.table{width:100%;border-collapse:collapse;font-size:14px;text-align:center;margin-top:10px}
.table th,.table td{border:1px solid var(--border);padding:12px}
.table thead{background:#f8fafc}
.form{max-width:980px;margin:0 auto;border:1px solid var(--border);border-radius:20px;padding:28px}
footer{padding:30px 0;color:#94a3b8;text-align:center;font-size:12px}

/* === MF FIX 2025-10-29 r4 — LOGO visível + à direita; NAV -56 sem esconder header; Chat visível === */
:root{ --logo-shift-x:90px; --nav-shift:-56px; }
html,body{ padding-top:56px; } /* compensa o translateY negativo para não cortar a LOGO */
.topbar{ position:sticky; top:0; transform:translateY(var(--nav-shift)); background:#fff; }
.topwrap{ display:none !important; } /* remove grid vazia */
.topbar__inner{ display:flex; align-items:center; gap:10px; padding:18px 20px 10px; min-height:86px; width:100%; }
.topbar__logo{ display:flex; align-items:center; margin-left:var(--logo-shift-x); }
.topbar__logo img{ height:54px; width:auto; display:block; }
.topbar__nav{ margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:nowrap !important; white-space:nowrap; overflow:visible; }
.topbar__nav a{ padding:.34rem .64rem; border-radius:999px; font-size:12.8px; }
@media (max-width:1280px){
  .topbar__logo img{ height:50px; }
  .topbar__nav a{ font-size:12.4px; padding:.30rem .58rem; }
}
@media (max-width:1024px){
  .topbar__logo img{ height:46px; }
}
/* =============================================================== */


/* === MF FIX 2025-10-29 r9 — Nav posicionada entre os pontos (offset controlado), sem overflow === */
:root{
  --nav-shift:-56px;        /* NAV vertical global (não muda) */
  --nav-offset-x: 180px;     /* DISTÂNCIA da LOGO até o começo dos botões (ajuste principal) */
  --nav-gap:8px;            /* espaçamento entre botões */
}
html,body{ padding-top:56px; overflow-x:hidden; } /* evita corte e barra horizontal */
.topbar{ position:sticky; top:0; transform:translateY(var(--nav-shift)); background:#fff; border-bottom:1px solid var(--border); z-index:10; }
.topwrap{ display:none !important; }

/* Mantém a LOGO onde está no HTML/CSS original — não mexer aqui */
.topbar__inner{ position:relative; display:flex; align-items:center; padding:20px 24px 12px; min-height:96px; width:100%; }

/* Reposiciona a NAV independentemente, partindo do fim da LOGO: usamos margin-left grande */
.topbar__nav{
  display:flex; align-items:center; white-space:nowrap; gap:var(--nav-gap);
  margin-left: var(--nav-offset-x);  /* empurra a nav para ficar entre os pontos */
}
.topbar__nav a{ padding:.34rem .66rem; border-radius:999px; font-size:12.8px; }

/* evitar que quebre alinhamento em notebooks 1366px */
@media (max-width:1366px){ :root{ --nav-offset-x: 180px; } }
@media (max-width:1280px){ :root{ --nav-offset-x: 180px; } .topbar__nav a{ font-size:12.4px; padding:.30rem .58rem; } }

/* Botões inferiores sempre visíveis (quebra sem overflow) */
.actions, .badges{ flex-wrap:wrap; justify-content:center; }
.container{ max-width:1320px; margin:0 auto; padding:0 20px; overflow:visible; }
/* =============================================================== */


/* === A6_r1 — NAV relativa mais para cima === */
:root{
  --nav-offset-y:-26px;   /* MEDIDA: -26px (sobe só os botões) */
}
.topbar__nav{ position:relative; top:var(--nav-offset-y); }
/* ajustes suaves por largura */
@media (max-width:1366px){ :root{ --nav-offset-y:-24px; } }
@media (max-width:1280px){ :root{ --nav-offset-y:-22px; } }


/* === A6_r2 — NAV relativa = -32px (sobe mais) === */
:root{ --nav-offset-y:-32px; }      /* MEDIDA pedida: -32px */
@media (max-width:1366px){ :root{ --nav-offset-y:-30px; } }
@media (max-width:1280px){ :root{ --nav-offset-y:-28px; } }


/* === A6_r3 — NAV relativa = -38px (sobe mais) === */
:root{ --nav-offset-y:-38px; }      /* MEDIDA pedida: -38px */
@media (max-width:1366px){ :root{ --nav-offset-y:-36px; } }
@media (max-width:1280px){ :root{ --nav-offset-y:-34px; } }


/* === A6_r4 — NAV relativa = -44px (sobe mais) === */
:root{ --nav-offset-y:-44px; }      /* MEDIDA pedida: -44px */
@media (max-width:1366px){ :root{ --nav-offset-y:-42px; } }
@media (max-width:1280px){ :root{ --nav-offset-y:-40px; } }


/* === A6_r5 — NAV relativa = -50px (sobe mais) === */
:root{ --nav-offset-y:-50px; }      /* MEDIDA pedida: -50px */
@media (max-width:1366px){ :root{ --nav-offset-y:-48px; } }
@media (max-width:1280px){ :root{ --nav-offset-y:-46px; } }


/* === A6_r6 — NAV relativa = -54px (sobe mais) === */
:root{ --nav-offset-y:-54px; }      /* MEDIDA pedida: -54px */
@media (max-width:1366px){ :root{ --nav-offset-y:-52px; } }
@media (max-width:1280px){ :root{ --nav-offset-y:-50px; } }


/* === A6_r7 — NAV relativa = -58px (sobe mais) === */
:root{ --nav-offset-y:-58px; }      /* MEDIDA pedida: -58px */
@media (max-width:1366px){ :root{ --nav-offset-y:-56px; } }
@media (max-width:1280px){ :root{ --nav-offset-y:-54px; } }


/* === A6_r8 — NAV relativa = -60px (final) === */
:root{ --nav-offset-y:-60px; }      /* MEDIDA pedida: -60px */
@media (max-width:1366px){ :root{ --nav-offset-y:-58px; } }
@media (max-width:1280px){ :root{ --nav-offset-y:-56px; } }


/* === A6_r9 — OFFSET horizontal para a ESQUERDA ===
   Move APENAS os botões da barra topo para a esquerda, aproximando da LOGO.
   Medidas: base -80px; 1366px -76px; 1280px -72px
*/
:root{ --nav-offset-x: 180px; }      /* ESQUERDA = valor negativo */
@media (max-width:1366px){ :root{ --nav-offset-x: 180px; } }
@media (max-width:1280px){ :root{ --nav-offset-x: 180px; } }


/* === A6_r10 — OFFSET horizontal mais forte para a ESQUERDA ===
   Aproxima bastante os botões da LOGO.
   Medidas: base -140px; 1366px -136px; 1280px -128px
*/
:root{ --nav-offset-x: 180px; }
@media (max-width:1366px){ :root{ --nav-offset-x: 180px; } }
@media (max-width:1280px){ :root{ --nav-offset-x: 180px; } }


/* === A6_r11 — OFFSET horizontal ainda mais à esquerda ===
   Medidas: base -160px; 1366px -156px; 1280px -148px
*/
:root{ --nav-offset-x: 180px; }
@media (max-width:1366px){ :root{ --nav-offset-x: 180px; } }
@media (max-width:1280px){ :root{ --nav-offset-x: 180px; } }