/* =====================================================================
   AXIUM BASE — a casca compartilhada por TODAS as paginas do dominio.
   Servido em https://axiumcontroller.com.br/axium-base.css
   ---------------------------------------------------------------------
   POR QUE ESTE ARQUIVO EXISTE.

   Ate 06/09/2026 cada pagina do dominio tinha a sua propria ideia do que
   era "o site da Axium". O logo aparecia em tres tamanhos diferentes (a
   raiz usava width:50% numa imagem sem altura, /solucoes/ usava 34px de
   altura, as paginas do Remember usavam um logo OUTRO, o do produto), e a
   largura util mudava de 1280px na raiz para 1000px no Carreiras e 720px
   no resto. Quem navegava entre elas sentia que tinha trocado de empresa.

   Aqui mora UMA definicao de cada peca da casca: cores, largura, topo,
   logo, migalhas, rodape e a barra do aplicativo. Toda pagina nova puxa
   este arquivo e ganha a casca pronta.

   COMO USAR numa pagina:

     <link rel="stylesheet" href="https://axiumcontroller.com.br/axium-base.css?v=1">

   Caminho ABSOLUTO de proposito: as paginas moram em pastas de
   profundidades diferentes (/solucoes/remember/manual/ e /carreiras/), e
   caminho relativo quebra em silencio quando a pagina muda de lugar.

   A ORDEM IMPORTA. Este arquivo vem PRIMEIRO, antes do CSS proprio da
   pagina. Ele define a casca; a pagina define o miolo e pode sobrescrever
   o que precisar.

   AO MEXER AQUI voce mexe no site inteiro de uma vez. E o objetivo — mas
   confira /solucoes/, /carreiras/ e a raiz antes de publicar, que sao as
   tres que usam a casca de jeitos mais diferentes.
   ===================================================================== */


/* =====================================================================
   1. TOKENS — a paleta e a tipografia do Manual de Marca.
   Os mesmos valores que ja estavam no style.css da raiz. Nomes com
   prefixo --ax- para nunca colidir com as variaveis internas de cada
   pagina (o Carreiras, por exemplo, ja tem um --blue proprio).
   ===================================================================== */
:root {
  /* Fundos, do mais escuro ao mais claro */
  --ax-bg:            #0D1725;
  --ax-bg-claro:      #121E30;
  --ax-bg-cartao:     #15243B;
  --ax-bg-cartao-alt: #1D314E;

  /* Azul da marca */
  --ax-azul:          #9AC7E6;   /* azul acinzentado — o tom principal */
  --ax-azul-rgb:      154, 199, 230;
  --ax-azul-medio:    #243854;
  --ax-azul-forte:    #2F5994;
  --ax-azul-claro:    #6295DD;

  /* Neutros */
  --ax-branco:        #FFFFFF;
  --ax-prata:         #C8CFD8;
  --ax-texto:         #FFFFFF;
  --ax-texto-suave:   #A6BAD6;
  --ax-texto-fraco:   #6E85A6;

  /* Gradientes */
  --ax-grad-azul:     linear-gradient(135deg, #9AC7E6 0%, #2F5994 100%);
  --ax-grad-cartao:   linear-gradient(135deg, rgba(21,36,59,.85) 0%, rgba(13,23,37,.95) 100%);

  /* Fios e sombras */
  --ax-fio:           1px solid rgba(154, 199, 230, .12);
  --ax-fio-forte:     1px solid rgba(154, 199, 230, .28);
  --ax-sombra:        0 10px 30px rgba(0, 0, 0, .3);
  --ax-brilho:        0 0 20px rgba(154, 199, 230, .15);

  /* Cantos */
  --ax-r-p:           8px;
  --ax-r-m:           16px;
  --ax-r-g:           24px;

  /* Tipografia */
  --ax-fonte-titulo:  'Outfit', system-ui, -apple-system, sans-serif;
  --ax-fonte-texto:   'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* Medidas da casca — mude AQUI e muda no site inteiro */
  --ax-largura:       1280px;  /* largura util, igual a da raiz */
  --ax-respiro:       40px;    /* respiro lateral no computador */
  --ax-respiro-cel:   20px;    /* respiro lateral no celular */
  --ax-topo-altura:   80px;    /* altura do topo parado */
  --ax-topo-altura-r: 64px;    /* altura do topo depois de rolar */
  --ax-logo-altura:   38px;    /* ALTURA DO LOGO. E so isso: altura. */
  --ax-logo-altura-c: 30px;    /* ...e a versao do celular */

  --ax-transicao:     all .35s cubic-bezier(.16, 1, .3, 1);
}


/* =====================================================================
   2. LARGURA — o fim dos tres containers diferentes.

   Uma classe so, com a largura da raiz. As secoes continuam podendo ter
   fundo que ocupa a tela inteira: o fundo vai na <section>, o conteudo
   vem dentro de um .ax-container.
   ===================================================================== */
.ax-container {
  width: 100%;
  max-width: var(--ax-largura);
  margin: 0 auto;
  padding: 0 var(--ax-respiro);
  position: relative;
  z-index: 2;
}

/* Para texto corrido (artigo, manual, documento legal): a largura total
   de 1280px da uma linha longa demais para ler. Esta variante estreita
   SO a coluna de texto, mantendo o resto da pagina no padrao. */
.ax-container.ax-leitura { max-width: 820px; }

@media (max-width: 768px) {
  .ax-container { padding: 0 var(--ax-respiro-cel); }
}


/* =====================================================================
   3. TOPO E LOGO — uma altura so, para sempre.

   O logo e um PNG de 1000x350 (proporcao 2,86:1). A regra e travar a
   ALTURA e deixar a largura seguir: assim ele fica identico em todas as
   paginas independente do espaco disponivel. Nunca use width em
   porcentagem aqui — foi exatamente o que descontrolou o logo da raiz.
   ===================================================================== */
.ax-topo {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(13, 23, 37, .82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(154, 199, 230, .08);
  transition: var(--ax-transicao);
}

/* A classe .rolou e posta por JavaScript quando a pagina desce.
   Sem JavaScript o topo simplesmente nao encolhe — nada quebra. */
.ax-topo.rolou {
  background: rgba(13, 23, 37, .96);
  border-bottom-color: rgba(154, 199, 230, .16);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
}

.ax-topo-interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--ax-topo-altura);
  transition: var(--ax-transicao);
}

.ax-topo.rolou .ax-topo-interno { height: var(--ax-topo-altura-r); }

.ax-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  line-height: 0;
}

.ax-logo img {
  display: block;
  height: var(--ax-logo-altura);
  width: auto;          /* segue a altura, sempre */
  max-width: none;      /* imuniza contra `img{max-width:100%}` da pagina */
  transition: var(--ax-transicao);
}

@media (max-width: 768px) {
  .ax-logo img { height: var(--ax-logo-altura-c); }
}


/* --- Menu do topo ---------------------------------------------------- */
.ax-menu {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ax-menu a {
  font-family: var(--ax-fonte-titulo);
  font-size: 14px;
  font-weight: 600;
  color: var(--ax-texto-suave);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: var(--ax-transicao);
  white-space: nowrap;
}

.ax-menu a:hover { color: var(--ax-azul); }

/* A pagina em que voce esta. Marque com class="atual" no link. */
.ax-menu a.atual {
  color: var(--ax-azul);
  border-bottom-color: var(--ax-azul);
}

/* O botao de acao do topo (Diagnostico, Falar conosco...). */
.ax-menu a.ax-cta {
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--ax-grad-azul);
  color: #08111C;
  font-weight: 700;
  border-bottom: none;
}
.ax-menu a.ax-cta:hover {
  color: #08111C;
  box-shadow: 0 8px 24px -8px rgba(154, 199, 230, .6);
}

/*
 * O TOPO NO CELULAR.
 *
 * Numa linha so, logo e menu nao cabem: o menu quebrava e o topo virava
 * um bloco de 170px de altura antes de qualquer conteudo aparecer.
 *
 * Aqui o topo passa a ter duas linhas — logo e botao de acao em cima, os
 * links do menu embaixo numa faixa que ROLA NA HORIZONTAL em vez de
 * quebrar. Assim o topo tem altura previsivel por mais itens que o menu
 * tenha, e nenhum link precisa ser escondido para caber.
 */
@media (max-width: 860px) {
  .ax-topo-interno {
    height: auto;
    flex-wrap: wrap;
    gap: 0;
    padding: 12px 0 0;
    row-gap: 4px;
  }
  .ax-topo.rolou .ax-topo-interno { height: auto; }

  .ax-menu {
    order: 3;
    width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 18px;
    overflow-x: auto;
    /* some com a barra de rolagem, que aqui e ruido visual */
    scrollbar-width: none;
    /* respiro no fim para o ultimo item nao colar na borda ao rolar */
    padding: 6px var(--ax-respiro-cel) 10px 0;
    margin-bottom: 2px;
    -webkit-overflow-scrolling: touch;
  }
  .ax-menu::-webkit-scrollbar { display: none; }
  .ax-menu a { font-size: 13px; }

  /* O botao de acao sai da faixa rolavel e fica fixo na primeira linha,
     ao lado do logo, onde o polegar acha. */
  .ax-menu a.ax-cta {
    order: -1;
    position: absolute;
    top: 12px;
    right: var(--ax-respiro-cel);
    padding: 9px 16px;
    font-size: 13px;
  }
  .ax-topo-interno { position: relative; }
}


/* =====================================================================
   4. MIGALHAS — o caminho de volta.

   Toda pagina que nao e a raiz mostra esta faixa. Ela resolve o pedido de
   "botao para voltar para a raiz e para solucoes" de um jeito melhor do
   que dois botoes soltos: alem de voltar, ela DIZ onde voce esta.
   ===================================================================== */
.ax-migalhas {
  border-bottom: 1px solid rgba(154, 199, 230, .08);
  background: rgba(18, 30, 48, .5);
}

.ax-migalhas .ax-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  min-height: 46px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-family: var(--ax-fonte-titulo);
  font-size: 13px;
  font-weight: 600;
}

.ax-migalhas a {
  color: var(--ax-texto-suave);
  text-decoration: none;
  transition: var(--ax-transicao);
}
.ax-migalhas a:hover { color: var(--ax-azul); }

/* O separador e decorativo: aria-hidden no HTML para o leitor de tela
   nao anunciar "sinal de maior" entre cada nivel. */
.ax-migalhas .sep { color: var(--ax-texto-fraco); }

/* O ultimo nivel e a pagina atual — texto, nao link. */
.ax-migalhas b { color: var(--ax-branco); font-weight: 700; }


/* =====================================================================
   5. RODAPE
   ===================================================================== */
.ax-rodape {
  background: var(--ax-bg-claro);
  border-top: 1px solid rgba(154, 199, 230, .1);
  margin-top: 80px;
  padding: 56px 0 32px;
}

.ax-rodape-grade {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
}

@media (max-width: 900px) {
  .ax-rodape-grade { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  .ax-rodape-grade { grid-template-columns: 1fr; }
}

.ax-rodape h4 {
  font-family: var(--ax-fonte-titulo);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ax-azul);
  margin: 0 0 16px;
}

.ax-rodape ul { list-style: none; margin: 0; padding: 0; }
.ax-rodape li { margin-bottom: 10px; }

.ax-rodape a {
  color: var(--ax-texto-suave);
  text-decoration: none;
  font-size: 14px;
  transition: var(--ax-transicao);
}
.ax-rodape a:hover { color: var(--ax-azul); }

.ax-rodape-sobre p {
  color: var(--ax-texto-suave);
  font-size: 14px;
  line-height: 1.7;
  margin: 16px 0 0;
  max-width: 42ch;
}

.ax-rodape-fim {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(154, 199, 230, .1);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ax-texto-fraco);
}


/* =====================================================================
   6. BARRA DO APLICATIVO — fica colada no fim da tela, sempre visivel.

   Vai nas paginas de produto e de manual, onde a pessoa pode querer abrir
   o aplicativo a qualquer altura da leitura sem ter que rolar de volta ao
   topo ou ate o fim.

   O padding-bottom no <body> abaixo evita que a barra cubra a ultima
   linha do rodape. Para ligar a barra numa pagina, ponha a classe
   `tem-barra-app` no <body>.
   ===================================================================== */
.ax-barra-app {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1200;
  background: rgba(13, 23, 37, .94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(154, 199, 230, .18);
  /* respeita a barra de gestos do iPhone */
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
}

.ax-barra-app .ax-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ax-barra-app .ax-texto {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  color: var(--ax-texto-suave);
  line-height: 1.4;
}
.ax-barra-app .ax-texto b { color: var(--ax-branco); display: block; }

.ax-barra-app .ax-botao {
  flex-shrink: 0;
  width: auto;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 999px;
  background: var(--ax-grad-azul);
  color: #08111C;
  font-family: var(--ax-fonte-titulo);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: var(--ax-transicao);
}
.ax-barra-app .ax-botao:hover {
  box-shadow: 0 10px 28px -8px rgba(154, 199, 230, .65);
  transform: translateY(-1px);
}

body.tem-barra-app { padding-bottom: 92px; }

@media (max-width: 620px) {
  /* No celular o texto explicativo sai e sobra so o botao, ocupando a
     largura toda — alvo grande para o dedo. */
  .ax-barra-app .ax-texto { display: none; }
  .ax-barra-app .ax-botao { width: 100%; justify-content: center; }
  body.tem-barra-app { padding-bottom: 84px; }
}


/* =====================================================================
   7. FILETE DA MARCA — a faixa de gradiente que abre a pagina.
   ===================================================================== */
.ax-filete { height: 4px; background: var(--ax-grad-azul); }


/* =====================================================================
   8. RESPEITO A QUEM PEDIU MENOS MOVIMENTO no sistema operacional.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ax-topo, .ax-topo-interno, .ax-logo img,
  .ax-menu a, .ax-migalhas a, .ax-rodape a, .ax-barra-app .ax-botao {
    transition: none;
  }
  .ax-barra-app .ax-botao:hover { transform: none; }
}


/* =====================================================================
   SUB-MENU DO TOPO + BOTAO FLUTUANTE DO WHATSAPP   (17/09/2026)
   Acrescentado para deixar o menu igual em todas as paginas do dominio.
   ===================================================================== */
.ax-drop { position: relative; display: inline-flex; align-items: center; }
.ax-drop > a, .ax-drop > a.nav-link { display: inline-flex; align-items: center; gap: 6px; }
.ax-seta { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; display: inline-block; transition: transform .2s; }
.ax-sub { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px); min-width: 214px; background: var(--ax-bg-cartao, #15243B); border: 1px solid rgba(154,199,230,.14); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.85); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, transform .18s ease; z-index: 1200; }
.ax-drop:hover .ax-sub, .ax-drop:focus-within .ax-sub { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.ax-drop:hover .ax-seta { transform: rotate(180deg); }
.ax-sub a { padding: 9px 12px; border-radius: 8px; border-bottom: none; white-space: nowrap; }
.ax-sub a:hover { background: rgba(154,199,230,.10); color: var(--ax-azul, #9AC7E6); }

/* No celular o menu rola na horizontal e nao ha hover: o item Solucoes
   leva direto para a pagina que lista tudo, entao a caixa some. */
@media (max-width: 860px) { .ax-sub { display: none; } }

/* Botao flutuante do WhatsApp — igual em todas as paginas. */
.whatsapp-float { position: fixed; right: 20px; bottom: 20px; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px -8px rgba(37,211,102,.55); z-index: 1500; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.whatsapp-float:hover { transform: scale(1.08); color: #fff; box-shadow: 0 14px 34px -8px rgba(37,211,102,.75); }
.whatsapp-float svg { width: 28px; height: 28px; }
@media (max-width: 560px) { .whatsapp-float { right: 14px; bottom: 14px; width: 52px; height: 52px; } }

/* O menu da home usa .nav-list/.nav-link (style.css da raiz). A caixa do
   sub-menu precisa funcionar la tambem, entao ela nao depende de .ax-menu. */
.nav-list .ax-drop { position: relative; display: inline-flex; align-items: center; }
.nav-list .ax-sub a { color: var(--ax-texto-suave, #A6BAD6); text-decoration: none; font-size: 14px; font-weight: 600; }
.nav-list .ax-sub a:hover { color: var(--ax-azul, #9AC7E6); }

/* Onde existe a barra do aplicativo no rodape, o botao do WhatsApp sobe
   para nao ficar por cima dela. */
body.tem-barra-app .whatsapp-float { bottom: 92px; }
@media (max-width: 620px) { body.tem-barra-app .whatsapp-float { bottom: 104px; } }

/* =====================================================================
   ALINHAMENTO NA HOME (17/09/2026)
   Na raiz o menu e uma <ul class="nav-list"> com links inline. O item
   Solucoes virou um <li> com caixa, e o display:flex dele descia o texto
   4px em relacao aos vizinhos. Aqui ele volta a se comportar como os
   outros: link inline, seta como icone ao lado.
   ===================================================================== */
.nav-list .ax-drop { display: block; position: relative; }
.nav-list .ax-drop > a,
.nav-list .ax-drop > a.nav-link { display: inline; align-items: initial; gap: 0; }
.nav-list .ax-drop > a .ax-seta { margin-left: 5px; vertical-align: middle; }
.nav-list .ax-sub { margin-top: 0; }

/* =====================================================================
   BARRA DO PRODUTO  (17/09/2026)
   Segunda linha de menu, so nas paginas de um produto (hoje o Axium
   Remember). O topo de cima continua sendo o do site; esta aqui leva
   para as paginas do proprio produto. Mesmo tipo de letra, mesmo tom de
   azul e mesma marcacao de pagina atual do menu principal.
   ===================================================================== */
.ax-barra-produto {
  background: rgba(18, 30, 48, .92);
  border-bottom: 1px solid rgba(154, 199, 230, .08);
}
.ax-barra-produto-interna {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 54px;
}
.ax-produto-nome {
  font-family: var(--ax-fonte-titulo);
  font-size: 15px;
  font-weight: 700;
  color: var(--ax-branco, #fff);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.ax-produto-nome:hover { color: var(--ax-azul, #9AC7E6); }
.ax-produto-links {
  display: flex;
  align-items: center;
  gap: 26px;
  justify-content: flex-end;
}
.ax-produto-links a {
  font-family: var(--ax-fonte-titulo);
  font-size: 14px;
  font-weight: 600;
  color: var(--ax-texto-suave, #A6BAD6);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: var(--ax-transicao);
}
.ax-produto-links a:hover { color: var(--ax-azul, #9AC7E6); }
.ax-produto-links a.atual {
  color: var(--ax-azul, #9AC7E6);
  border-bottom-color: var(--ax-azul, #9AC7E6);
}

/* No celular os links viram uma faixa que rola na horizontal, como o
   menu de cima, em vez de quebrar em varias linhas. */
@media (max-width: 720px) {
  .ax-barra-produto-interna { flex-wrap: wrap; gap: 0; padding-top: 8px; padding-bottom: 8px; }
  .ax-produto-nome { width: 100%; font-size: 14px; }
  .ax-produto-links {
    width: 100%;
    justify-content: flex-start;
    gap: 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 6px 0 2px;
  }
  .ax-produto-links::-webkit-scrollbar { display: none; }
}