/* =========================================================================
   O QUE É NOSSO EM CIMA DO TEMPLATE.

   O CSS do Synex fica intacto no main.css, com uma exceção anotada lá dentro.
   Tudo que a página de vendas do Cortex acrescenta mora aqui, e o arquivo
   é carregado DEPOIS do main.css de propósito, para vencer no empate sem
   precisar de !important em lugar nenhum.

   POR QUE A FONTE VEM DE DENTRO DE CASA

   O main.css original abria com um @import da fonte no Google. Isso não
   funcionaria aqui: o vercel.json aplica `style-src 'self'` e `font-src
   'self'`, e as duas regras barram o Google. A página abriria com a fonte
   errada, sem erro visível, e o desenho inteiro do template ia junto.

   Fora isso, servir a fonte daqui é mais coerente com o que a nossa própria
   Política de Privacidade promete: nada de terceiro carregando junto com a
   página. Fonte do Google entrega o IP de cada visitante para o Google, e nós
   escrevemos por extenso que não existe rastreador de terceiro no site.
   ========================================================================= */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../webfonts/jakarta-latin.woff2") format("woff2");
  /* Latim básico, que já cobre o português inteiro. */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../webfonts/jakarta-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* ------------------------------------------------------------ a marca ---
   A logo do Cortex é um lettering largo, e o template foi desenhado para uma
   marca mais quadrada. Sem uma altura fixa aqui, ela entra gigante no
   cabeçalho e empurra o menu para baixo. */
.cortex-logo {
  height: 34px;
  width: auto;
  display: block;
}
.mobile-menu-main .cortex-logo,
.footer-logo .cortex-logo {
  height: 30px;
}

/* ------------------------------------------------------- entrar, no topo -
   Um link de texto ao lado do botão. Quem já é cliente procura "Entrar", e
   quem não é procura o botão colorido: os dois públicos chegam pelo mesmo
   canto da tela e não podem disputar o mesmo peso visual. */
.cortex-entrar {
  font-size: 16px;
  font-weight: 600;
  color: var(--header, #101010);
  margin-right: 22px;
  white-space: nowrap;
  transition: color .25s ease;
}
.cortex-entrar:hover {
  color: #007BFF;
}

/* --------------------------------------------------- as ações do herói ---
   O template trazia um campo de e-mail aqui. Trocamos por dois botões porque
   não existe captura de e-mail no sistema: um formulário que não leva a lugar
   nenhum é pior que botão nenhum. */
.cortex-hero-acoes {
  display: flex;
  align-items: center;
  /* Centralizado no eixo, e não só pelo alinhamento de texto. O herói é
     centralizado por texto, que alcança conteúdo em linha e NÃO alcança item
     de flex: os dois botões ficavam encostados na esquerda enquanto o título,
     o parágrafo e o selo estavam no meio. */
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 34px;
}
.cortex-btn-vazado {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 30px;
  border: 1px solid rgba(16, 16, 16, .18);
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  color: #101010;
  background: transparent;
  transition: border-color .25s ease, background .25s ease, color .25s ease;
}
.cortex-btn-vazado:hover {
  border-color: #007BFF;
  background: #007BFF;
  color: #fff;
}
.cortex-hero-selo {
  margin-top: 18px;
  font-size: 14.5px;
  opacity: .72;
}

/* -------------------------------------------------- a chamada do rodapé --
   O bloco de assinatura de newsletter do template virou chamada para o
   cadastro, pelo mesmo motivo do herói: não existe lista de e-mail. */
.cortex-rodape-chamada {
  margin-bottom: 22px;
  font-size: 16px;
  line-height: 1.6;
  max-width: 46ch;
}

/* ------------------------------------------------------------- preços ----
   Três cartões que precisam terminar na mesma linha. Sem isto, o do meio
   fica mais alto porque tem uma linha a mais de texto, e a régua de baixo
   fica torta em telas grandes. */
@media (min-width: 1200px) {
  .pricing-section .row > [class*="col-"] {
    display: flex;
  }
  .pricing-section .pricing-box-items {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .pricing-section .pricing-list {
    margin-top: auto;
  }
}

/* ------------------------------------------------------- acessibilidade -
   O template não marca o foco do teclado em lugar nenhum. Quem navega por
   Tab fica sem saber onde está, e isso some do olho de quem usa mouse, que
   é justamente por que passa despercebido. */
a:focus-visible,
button:focus-visible,
.accordion .acc-btn:focus-visible {
  outline: 2px solid #007BFF;
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================================
   LEITURA

   O template define o texto do corpo como `--text: #15171ACC`, que é preto a
   oitenta por cento, no peso 400, e boa parte dos parágrafos em 14px. A conta
   dá texto lavado: passa em contraste na régua automática e cansa de ler na
   prática, que é o que importa.

   Três correções, e nenhuma delas mexe no desenho:

   A cor vira sólida. Transparência sobre fundo branco já é um cinza; escrever
   o cinza direto tira a surpresa quando o mesmo texto cai sobre um cartão
   colorido, onde os oitenta por cento deixavam o fundo atravessar.

   O peso sobe de 400 para 450. A Plus Jakarta é fonte variável de 200 a 800,
   então 450 existe de verdade e não é o navegador engordando o traço.

   E o corpo pequeno sai de 14 para 15 pixels, que é onde o texto de cartão
   volta a ser lido em vez de decifrado.
   ========================================================================= */
:root{
  --text: #263544;
  --header: #0d1b2a;
}

body{
  font-weight:450;
  color:#263544;
}

p, li, .price-text, .acc-content .text, .footer-content p, .contact-list li{
  font-weight:450;
}

/* Os parágrafos que estavam em 14px. Não subo o corpo inteiro para não
   empurrar o desenho: só os pequenos, que eram os ilegíveis. */
.service-box-items .content p,
.choose-us-items .content p,
.how-it-items .content p,
.pricing-box-items .price-text,
.pricing-list li,
.acc-content .text,
.footer-content p,
.gt-list-area li a,
.contact-list li{
  font-size:15px;
  line-height:1.62;
}

/* Título de cartão e rótulo de seção ganham corpo. Estavam competindo com o
   texto ao redor em vez de mandar nele. */
.service-box-items .content .title,
.choose-us-items .content .title,
.how-it-items .content .title{
  font-weight:700;
  color:#0d1b2a;
}
.sub-title{font-weight:600}
.acc-btn{font-weight:650;color:#0d1b2a}
.pricing-box-items .sub-price{font-weight:700}
.widget-title{font-weight:700;color:#0d1b2a}
.gt-list-area li a{font-weight:500}

/* O número das razões era decoração clara demais para servir de âncora. */
.choose-us-items .number{font-weight:800}

/* =========================================================================
   O DEDO, NO CELULAR

   Os links do rodapé tinham 19 pixels de altura. A régua de acessibilidade
   pede 44, e a razão é prática: com 19 a pessoa erra, volta, erra de novo, e
   desiste de achar a Política de Privacidade.

   A folga é vertical e o texto não muda de tamanho, então o rodapé continua
   com a mesma cara e passa a ser clicável.
   ========================================================================= */
@media (max-width: 991px){
  .gt-list-area li a,
  .contact-list li a,
  .footer-list li a{
    display:inline-flex;
    align-items:center;
    min-height:44px;
  }
  .footer-list{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:0 10px;
    justify-content:center;
  }
  .footer-bottom-wrapper{
    flex-direction:column;
    gap:4px;
    text-align:center;
  }
}

/* O texto do rodapé estava em branco a oitenta por cento sobre fundo escuro,
   que é o mesmo problema do corpo da página, do outro lado da escala. */
.footer-section p,
.footer-section .contact-list li{
  color:rgba(255,255,255,.92);
  font-weight:450;
}
.footer-section .gt-list-area li a{
  color:rgba(255,255,255,.88);
}
.footer-section .gt-list-area li a:hover{color:#ffffff}

/* O selo do herói estava a 72% de opacidade em cima do céu, e some. */
.cortex-hero-selo{
  opacity:1;
  color:#2b4257;
  font-weight:600;
}

/* =========================================================================
   O PRELOADER, E POR QUE ELE PRECISAVA DE COLEIRA

   O template cobre a tela inteira com um retângulo branco em z-index sete
   milhões e tira ele um segundo depois de a página carregar. Duas coisas
   erradas nisso, numa página que recebe tráfego pago:

   O SEGUNDO A MAIS É DE GRAÇA E CUSTA CARO. A página está pronta em pouco
   mais de trezentos milissegundos. Segurar a tela branca por mais um segundo
   depois disso não esconde lentidão nenhuma, só inventa uma.

   E O PIOR: quem tira o retângulo é o JavaScript. Se qualquer script falhar
   antes daquela linha, a tela fica branca PARA SEMPRE, sem erro visível e sem
   conteúdo. Numa página de anúncio, é pagar pelo clique para mostrar nada.

   A animação abaixo tira o preloader sozinha, sem depender de script nenhum.
   O JavaScript continua tirando antes, quando funciona; isto é o que acontece
   quando ele não funciona.
   ========================================================================= */
#preloader{
  animation: cortex-sai-preloader .45s ease .8s forwards;
}
@keyframes cortex-sai-preloader{
  to{ opacity:0; visibility:hidden; pointer-events:none; }
}
@media (prefers-reduced-motion: reduce){
  #preloader{ animation-duration:.01ms; animation-delay:.01ms; }
}

/* =========================================================================
   O BOTÃO DO WHATSAPP

   Fica preso no canto, acima de tudo, e some na hora de imprimir.

   No canto ESQUERDO de propósito. O template já usa o canto direito para o
   botão de voltar ao topo, e dois botões redondos empilhados no mesmo canto
   viram um só borrão em que ninguém acerta o que quer.

   O rótulo aparece só em tela grande. No celular ele empurraria o botão para
   dentro do polegar de quem está rolando a página, que é o gesto mais comum
   e o que menos pode ser atrapalhado.
   ========================================================================= */
.zap{
  position:fixed;
  left:18px;
  bottom:18px;
  z-index:60;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 18px 12px 14px;
  border-radius:999px;
  background:#25d366;
  color:#0a2e18;
  font-size:15px;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 8px 24px rgba(9,80,45,.28), 0 2px 6px rgba(9,80,45,.18);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.zap:hover{
  background:#1fbe5a;
  color:#0a2e18;
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(9,80,45,.34), 0 2px 8px rgba(9,80,45,.2);
}
.zap:focus-visible{outline:3px solid #0a2e18;outline-offset:3px}
.zap svg{width:24px;height:24px;flex:none;fill:currentColor}

@media (max-width: 767px){
  .zap{
    left:14px;
    bottom:14px;
    padding:0;
    width:54px;
    height:54px;
    justify-content:center;
    gap:0;
  }
  .zap span{
    /* Fora da tela, mas ainda anunciado por leitor de tela: o botão continua
       tendo nome para quem não enxerga o ícone. */
    position:absolute;
    width:1px;height:1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
  }
}

@media print{ .zap{display:none} }