/* ══════════════════════════════════════════════════════════════════════════
   /diagnostico — folha AUTÔNOMA da página.

   Antes esta página dependia de plano-de-marketing.css para nav, reset,
   tokens de cor e @font-face — mas aquele arquivo é da variante VERMELHA
   (plano de marketing) e trazia junto um :root com --primary/--bg/--text-dark
   que não tem nada a ver com o laranja daqui. Ficamos presos ao arquivo
   errado só para herdar meia dúzia de regras genéricas.

   Este arquivo agora traz essa meia dúzia sozinho (seção BASE abaixo) e mais
   nada — nenhuma regra de layout da variante vermelha foi copiada. O cartão
   do formulário continua vindo de plano-de-marketing-form.css, que é
   realmente compartilhado entre as duas telas de qualificação.

   Se no futuro outra página também precisar deste nav/reset/tokens, vale a
   pena promover a seção BASE para um arquivo próprio (ex.: base.css) e
   importar dos dois lados — duplicar esta seção em uma terceira página é
   que recriaria o problema que resolvemos aqui.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   BASE — fontes, tokens de cor, reset e nav.

   Extraído de plano-de-marketing.css, mantendo só o que diagnostico.html e
   plano-de-marketing-form.css efetivamente usam (conferido por grep nos dois
   arquivos): var(--dark), var(--orange), var(--orange-dark), 'Neulis Sans' e
   'Telegraf', mais o reset e a nav — que são idênticos em todas as páginas
   do site, não uma decisão desta página.

   NÃO redefinir --dark/--orange em nenhum outro arquivo carregado depois
   deste na página — como são custom properties, a última definição no
   :root que o navegador processar é a que vale, e um valor divergente aqui
   dessincronizaria o laranja do card do formulário do laranja do resto da
   página sem nenhum erro visível no console.
   ══════════════════════════════════════════════════════════════════════════ */

   @font-face {
    font-family: 'Telegraf';
    src: url('../fonts/TelegrafRegular_272984568a25d8528fe2de8b20b29011.woff2') format('woff2'),
         url('../fonts/TelegrafRegular_272984568a25d8528fe2de8b20b29011.otf') format('opentype');
    font-display: swap;
  }
  
  @font-face {
    font-family: 'Neulis Sans';
    src: url('../fonts/fonnts.com-Neulis_Sans_Regular.woff2') format('woff2'),
         url('../fonts/fonnts.com-Neulis_Sans_Regular.otf') format('opentype');
    font-weight: 400;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'Neulis Sans';
    src: url('../fonts/fonnts.com-Neulis_Sans_Medium.woff2') format('woff2'),
         url('../fonts/fonnts.com-Neulis_Sans_Medium.otf') format('opentype');
    font-weight: 500;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'Neulis Sans';
    src: url('../fonts/fonnts.com-Neulis_Sans_Bold.woff2') format('woff2'),
         url('../fonts/fonnts.com-Neulis_Sans_Bold.otf') format('opentype');
    font-weight: 700;
    font-display: swap;
  }
  
  :root {
    --dark:   #171717;
  
    /* F8A81C (o valor herdado de plano-de-marketing.css) rendia amarelo-ouro,
       não laranja — troquei para F97316, que é o tom que já aparece correto
       no card do formulário e nos acentos do hero na screenshot de
       referência. Se existir um hex de marca oficial diferente deste,
       é só trocar aqui — é a única linha que precisa mudar, o resto do
       arquivo consome a variável. */
    --orange: #F97316;
  
    /* Não existia em plano-de-marketing.css — plano-de-marketing-form.css já
       consumia var(--orange-dark) no :focus do input (.form-input:focus) sem
       ninguém nunca ter definido o token, então o outline de foco saía
       inválido e o navegador descartava a declaração inteira (sem erro, sem
       aviso). Escolhido para dar ~6,8:1 de contraste com texto branco — é o
       que os chips de qualificação e o hover dos pills da nav usam para
       ficar escuro o bastante sem sair da família do laranja (ver
       plano-de-marketing-form.css, seção CHIPS DE QUALIFICAÇÃO). */
    --orange-dark: #9A3E0F;
  }
  
  /* ===== RESET ===== */
  *, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html, body {
    overflow-x: hidden;
  }
  
  body {
    background: #fff;
    font-family: 'Neulis Sans', Arial, Helvetica, sans-serif;
    color: #1f1f1f;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  /* ============================================================
     NAV
  
     ATENÇÃO — divergência deliberada em relação ao que estava no ar:
     em produção esta página herdava .site-nav { background: var(--primary) }
     de plano-de-marketing.css, ou seja, a barra de navegação do /diagnostico
     saía VERMELHA (cor da variante de plano de marketing), destoando do hero
     escuro+laranja da própria página — exatamente a divergência "sem ninguém
     perceber" que o comentário do topo deste arquivo descreve. Troquei para
     var(--dark), que já é o fundo do hero, e o pill da nav para --orange no
     hover, para casar com o resto da página e com o pedido de manter a
     consistência do laranja. Se a barra vermelha era intencional (ex.: para
     bater com algum outro ponto de contato do funil), reverta esta regra para
     background: #FF0901 e o hover do .nav-pill para var(--dark)/#262626.
     ============================================================ */
  
  .site-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--dark);
    transition: box-shadow 0.3s ease;
  }
  
  .site-nav.scrolled {
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.22);
  }
  
  .topbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(16px, 2.2vw, 36px);
    width: 100%;
    padding: 14px 28px;
  }
  
  .nav-group {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.6vw, 24px);
  }
  /* grid-column explícito (em vez de depender do auto-placement) — assim,
     quando .nav-group.right some no mobile (display:none via .desktop-nav),
     o .menu-toggle ainda consegue reivindicar a coluna 3 pelo mesmo motivo:
     sem isso ele cairia na coluna 2, colado no logo, em vez de na ponta
     direita. */
  .nav-group.left  { justify-content: flex-start; grid-column: 1; }
  .nav-group.right { justify-content: flex-end; grid-column: 3; }
  
  .nav-item { position: relative; }
  
  .nav-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(130px, 10vw, 175px);
    height: 50px;
    padding: 0 28px;
    border-radius: 999px;
    /* Pill sólido no laranja da marca (var(--orange), o mesmo do card do
       formulário e dos acentos do hero) com texto escuro — mesma lógica de
       contraste documentada em plano-de-marketing-form.css para o chip
       "selecionado": laranja vívido não tem contraste suficiente para texto
       branco, mas sobra contraste de sobra para texto var(--dark) (~6:1). */
    background: var(--orange);
    color: var(--dark);
    text-decoration: none;
    font-size: clamp(15px, 1vw, 18px);
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    transition: background 0.25s ease, transform 0.2s ease;
  }
  
  .nav-pill:hover {
    background: var(--orange-dark);
    color: #000000;
    transform: translateY(-1px);
  }
  
  .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-column: 2;
  }
  
  .logo img {
    height: clamp(70px, 6vw, 100px);
    width: auto;
    object-fit: contain;
    display: block;
  }
  
  /* Dropdown desktop */
  .has-dropdown .dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 280px;
    background: var(--dark);
    border-radius: 0 16px 16px 16px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
    z-index: 20;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }
  
  .has-dropdown:hover .dropdown-menu,
  .has-dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  
  .dropdown-menu a {
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    padding: 4px 0;
    transition: opacity 0.15s ease;
  }
  .dropdown-menu a:hover { opacity: 0.85; text-decoration: underline; text-underline-offset: 4px; }
  
  /* Seletor composto de propósito: `.has-dropdown .dropdown-menu` (0,2,0) define
     left:0 e vence o left:auto daqui (0,1,0). Sem isso o menu do Blog abre para
     a direita e parte dele fica cortada pelo overflow-x. */
  .has-dropdown .dropdown-menu.dropdown-right { left: auto; right: 0; border-radius: 16px 0 16px 16px; }
  
  /* Hamburguer */
  .menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    grid-column: 3;
    justify-self: end;
  }
  .menu-toggle span {
    display: block;
    width: 26px;
    height: 3px;
    background: #fff;
    border-radius: 999px;
    transition: 0.25s ease;
  }
  .menu-toggle.active span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  .menu-toggle.active span:nth-child(2) { opacity: 0; }
  .menu-toggle.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
  
  /* Menu mobile */
  .mobile-menu {
    display: none;
    padding: 0 28px 16px;
    background: rgba(23, 23, 23, 0.92);
    backdrop-filter: blur(6px);
  }
  .mobile-menu.active { display: block; }
  
  .mobile-item,
  .mobile-menu > a {
    display: block;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  }
  .mobile-menu > a:last-child,
  .mobile-item:last-child { border-bottom: none; }
  
  .mobile-link {
    width: 100%;
    background: none;
    border: none;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    color: #fff;
    text-decoration: none;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    padding: 14px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-family: inherit;
  }
  
  .mobile-submenu {
    display: none;
    padding: 0 0 10px 14px;
  }
  .mobile-submenu a {
    display: block;
    color: rgba(255, 255, 255, 0.95);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    padding: 7px 0;
  }
  .mobile-item.active .mobile-submenu { display: block; }
  .mobile-item.active .mobile-submenu-toggle span { transform: rotate(45deg); }
  
  .mobile-submenu-toggle span {
    display: inline-block;
    background: none;
    border-radius: 0;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    transition: transform 0.2s ease;
  }
  
  /* Container genérico usado pelas seções abaixo do hero. Não existia em
     nenhum dos dois arquivos herdados — .diag-steps e .diag-servicos já
     contavam com ele sem que nada o definisse, então o conteúdo corria de
     ponta a ponta da viewport sem as margens/max-width pretendidos. Escopado
     em .diag para não colidir com um .container global que outra página do
     site venha a ter. */
  .diag .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
  }
  
  /* ── Hero: pitch à esquerda, formulário à direita ─────────────────────────── */
  
  .diag-hero {
    background: var(--dark);
    padding: 120px 0 72px;   /* 120 no topo porque a nav é fixa e cobriria o H1 */
  }
  
  .diag-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
  }
  
  .diag-eyebrow {
    color: var(--orange);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 12px;
  }
  
  .diag-title {
    color: #fff;
    font-size: clamp(32px, 4.4vw, 52px);
    line-height: 1.1;
    font-weight: 700;
    margin: 0 0 20px;
  }
  
  .diag-lead {
    color: #d1d5db;
    font-size: 17px;
    line-height: 1.65;
    margin: 0 0 28px;
    max-width: 46ch;
  }
  
  .diag-list {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
  }
  
  .diag-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    color: #e5e7eb;
    font-size: 15px;
    line-height: 1.55;
  }
  
  /* Marcador desenhado em CSS em vez de imagem: são quatro itens, não vale uma
     requisição a mais nem um SVG inline repetido quatro vezes. */
  .diag-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 6px;
    width: 6px;
    height: 11px;
    border: solid var(--orange);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
  
  .diag-stats {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    border-top: 1px solid #374151;
    padding-top: 24px;
  }
  
  .diag-stat .value {
    color: var(--orange);
    font-size: 28px;
    font-weight: 700;
    margin: 0;
  }
  
  .diag-stat .label {
    color: #9ca3af;
    font-size: 12px;
    margin: 4px 0 0;
  }
  
  /* O cartão do formulário já tem fundo e raio próprios; aqui só o encaixe. */
  .diag-form-wrap {
    position: sticky;
    top: 96px;
  }
  
  /* Container dos botões do formulário */
  .form-nav {
    display: flex;
    flex-direction: column-reverse;
    gap: 12px;
    margin-top: 20px;
  }
  
  /* Container dos botões do formulário */
  .lead-form .form-nav {
    display: flex;
    flex-direction: column-reverse;
    gap: 12px;
    margin-top: 20px;
  }
  
  /* Botão Continuar */
  .lead-form ._submit {
    display: block;
    width: 100%;
    padding: 13px 20px;
    border: none;
    border-radius: 8px 0px 8px 0px;
    background: #ffffff;
    color: #000000;
    font-family: 'Neulis Sans';
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
  }
  
  .lead-form ._submit:hover {
    background: var(--orange-dark);
    color: #000000;
    transform: translateY(-1px);
  }
  
  /* Botão Voltar */
  .lead-form .btn-back {
    background: transparent;
    border: none;
    color: #000000;
    font-family: 'Neulis Sans';
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    padding: 8px;
    transition: opacity 0.2s ease;
  }
  
  .lead-form .btn-back:hover {
    color: #000000;
    opacity: 0.75;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  
  /* Pílulas de Navegação (Menu Superior) */
  .site-nav .nav-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(130px, 10vw, 175px);
    height: 50px;
    padding: 0 28px;
    border-radius: 999px;
    background: var(--orange);
    color: #000000;
    text-decoration: none;
    font-size: clamp(15px, 1vw, 18px);
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    transition: background 0.25s ease, transform 0.2s ease;
  }
  
  .site-nav .nav-pill:hover {
    background: var(--orange-dark);
    color: #000000;
    transform: translateY(-1px);
  }
  
  /* ── O que acontece depois ─────────────────────────────────────────────────── */
  
  .diag-steps {
    background: #fff;
    padding: 72px 0;
  }
  
  .diag-steps h2,
  .diag-servicos h2 {
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 700;
    margin: 0 0 40px;
    text-align: center;
  }
  
  .diag-steps-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
  
  .diag-steps-list li {
    background: #fafafa;
    border: 1px solid #ececec;
    border-radius: 16px;
    padding: 28px 24px;
  }
  
  .diag-step-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--orange);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 16px;
  }
  
  .diag-steps-list h3 {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 8px;
  }
  
  .diag-steps-list p {
    font-size: 14px;
    line-height: 1.6;
    color: #525252;
    margin: 0;
  }
  
  /* ── Atalhos para os serviços ──────────────────────────────────────────────── */
  
  .diag-servicos {
    background: #fafafa;
    border-top: 1px solid #ececec;
    padding: 64px 0 72px;
  }
  
  .diag-servicos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  
  .diag-servicos-grid a {
    display: block;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 16px 18px;
    color: #171717;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    transition: border-color .18s ease, transform .18s ease;
  }
  
  .diag-servicos-grid a:hover,
  .diag-servicos-grid a:focus-visible {
    border-color: var(--orange);
    transform: translateY(-2px);
  }
  
  /* ── Responsivo ────────────────────────────────────────────────────────────── */
  
  @media (max-width: 960px) {
    .diag-inner {
      grid-template-columns: 1fr;
      gap: 40px;
    }
    /* Sticky numa coluna só faz o formulário perseguir a rolagem sobre o próprio
       conteúdo que ele deveria acompanhar. */
    .diag-form-wrap { position: static; }
    .diag-steps-list,
    .diag-servicos-grid { grid-template-columns: 1fr; }
  }
  
  /* ── Nav mobile ───────────────────────────────────────────────────────────
     Regra que faltava nesta folha: a seção NAV (acima) foi extraída de
     plano-de-marketing.css junto com .menu-toggle/.mobile-menu, mas o
     breakpoint que liga um e desliga o outro ficou para trás — sem ele
     .menu-toggle nunca sai do display:none base e as duas .nav-group
     desktop nunca saem da tela, então no celular a página tenta
     espremer os dois grupos de pills + logo na mesma linha e não sobra
     hambúrguer nenhum para abrir o .mobile-menu.
     Mesmo breakpoint (768px) usado pelo resto do site para colapsar a
     topbar (ver `.topbar .logo img` em home2.css). */
  @media (max-width: 768px) {
    .logo {
      /* Antes ficava centralizada (grid-column:2, justify-content:center),
         herdando o layout desktop de 3 colunas. Com .nav-group.left oculto
         no mobile, a coluna 1 sobra vazia e "empurra" a logo para o centro
         da tela em vez de mantê-la colada à esquerda. */
      grid-column: 1;
      justify-content: flex-start;
    }
    .logo img {
      width: 200px; /* Tamanho reduzido para mobile */
  }
    .desktop-nav { display: none; }
    .menu-toggle { display: flex; }
  }
  
  @media (max-width: 600px) {
    .diag-hero { padding: 100px 0 56px; }
    .diag-stats {
      /* flex-wrap:wrap (regra base) deixava os 3 itens quebrarem em linhas
         separadas nas telas estreitas. Aqui forçamos nowrap + centralização
         e reduzimos gap/fonte para os 3 caberem lado a lado numa só linha. */
      flex-wrap: nowrap;
      justify-content: center;
      gap: 12px;
    }
    .diag-stat {
      flex: 1;
      min-width: 0;
      text-align: center;
    }
    .diag-stat .value {
      font-size: 19px;
    }
    .diag-stat .label {
      font-size: 10px;
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .diag-servicos-grid a { transition: none; }
    .diag-servicos-grid a:hover,
    .diag-servicos-grid a:focus-visible { transform: none; }
  }