/* ==========================================================================
   PLENUS — modo escuro (teste v2 — paleta "azul elétrico sobre quase-preto")
   ==========================================================================
   Carregado DEPOIS de style.css e plenus-brand.css (e do <style> inline do
   <head>), então vence os empates de especificidade. Onde precisei brigar
   com componentes do Bootstrap/inline styles mais específicos, usei
   !important.

   Aplicado em todas as 13 páginas do site.

   Paleta (v3, refinada pelo usuário — preto azulado, não preto puro):
     fundo (preto azulado)   #080A10
     fundo (carvão, meio)    #10131C
     fundo (preto azulado)   #0A0D15
     cards/áreas elevadas    #111521
     texto principal         #F4F5F7
     texto secundário        #B5BAC6
     texto terciário/mudo    #747B8C
     azul principal          #4038FF
     azul claro/destaque     #514AFF
     bordas                  #272B38
   ========================================================================== */

:root {
  /* var(--color-body) e var(--color-heading-1) são usadas em texto (nunca
     como fundo, já conferi), então redefinir aqui já resolve boa parte do
     site de uma vez, porque o style.css original já referencia essas vars.
     --color-primary também é redefinida aqui: como ela é usada em botões,
     links e bordas de destaque no site inteiro, isso já troca o azul da
     marca nesta página sem precisar caçar cada seletor. */
  --color-body: #b5bac6;
  --color-heading-1: #f4f5f7;
  --color-heading: #f4f5f7; /* no original nunca foi definida (bug do tema) */
  --color-border: #272b38;
  --color-primary: #4038ff;
}

html,
body {
  /* fallback sólido: sem isso, se a página tiver qualquer rolagem
     horizontal (algum elemento passando de 100vw), arrastar de lado no
     celular mostra o "bounce" do navegador revelando o preto padrão por
     trás — como só havia background-image (o degradê), não uma cor. */
  background-color: #080a10;
  /* receita em 5 camadas (topo -> base):
     1. grão (SVG/feTurbulence embutido, ~2%, mesclado com "overlay")
     2. glow azul discreto atrás da região das fotos
     3-4. duas manchas cinza-azuladas bem fracas ("atmosfera", não chapado)
     5. degradê de base — o #10131c no meio é o que evita parecer preto puro */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.02 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 65% 48%, rgba(45, 50, 160, 0.12) 0%, rgba(20, 25, 70, 0.05) 30%, transparent 65%),
    radial-gradient(ellipse at 58% 50%, rgba(80, 88, 115, 0.08) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 40%, rgba(40, 45, 80, 0.08) 0%, transparent 40%),
    linear-gradient(135deg, #080a10 0%, #10131c 48%, #0a0d15 100%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-blend-mode: overlay, normal, normal, normal, normal;
}
/* corta a rolagem horizontal (a causa real do "arrastar de lado fica
   preto") — só no <html>, não no <body>: colocar overflow-x:hidden no
   body também faz o navegador tratar overflow-y como "auto" ali, o que
   quebra o position:sticky do texto que revela ao rolar (ele depende do
   scroll normal do documento, não de um scroll dentro do body). */
html {
  overflow-x: hidden;
}

/* -------------------- Banner das páginas internas (Clientes, Sobre, Contato,
   Carreira, Sitemap, Ponto & Acesso e as 6 páginas de serviço) -------------------- */
.career-single-banner-area.blog-page {
  background: #080a10;
}
.career-page-single-banner .title span {
  color: #b5bac6;
}

/* -------------------- Header -------------------- */
.plenus-wordmark {
  color: #f4f5f7;
}
.header-style-one {
  background: #080a10;
}
.header-style-one.header--sticky.sticky {
  background: #080a10;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
}
.header-style-one .nav-area nav > ul > li > a.nav-link {
  color: #f4f5f7;
}
.menu-btn-toggle svg rect {
  fill: #f4f5f7 !important;
}
.rts-btn.btn-border {
  color: #f4f5f7;
  border-color: #272b38;
}

/* mega menu (dropdown "Serviços") */
li.has-dropdown .submenu {
  background: #111521;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55);
}
.single-menu.industry-signle-menu::after {
  background: #161a28 !important;
}
.industries {
  color: #514aff !important;
}
.single-service-area-wrapper {
  background: #161a28 !important;
  box-shadow: none;
}
.single-service-area-wrapper .info .title {
  color: #f4f5f7 !important;
}
.single-service-area-wrapper .info p {
  color: #b5bac6 !important;
}

/* -------------------- Hero -------------------- */
.pre-title {
  background: linear-gradient(90deg, #4038ff, #514aff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.banner-wrapper-one span.pre-title {
  border-color: #272b38 !important;
}
/* o ::after original é um "fade pra branco" atrás do badge, pensado pro
   header claro — é um retângulo reto (sem cantos arredondados) maior que a
   pílula, então qualquer cor visível nele aparece como uma caixa por trás
   do badge arredondado. Mais simples remover de vez. */
.banner-wrapper-one span.pre-title::after {
  display: none;
}
.banner-wrapper-one p {
  color: #b5bac6 !important;
}
.banner-wrapper-one p a {
  color: inherit !important;
  text-decoration: none;
}
.rts-banner-area-start .title span {
  background: linear-gradient(90deg, #4038ff, #514aff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* essas imagens decorativas (grades tipo "circuito") agora usam as versões
   -transparent.png (fundo branco removido), então funcionam bem tanto no
   claro quanto no escuro — não precisam mais ser escondidas aqui. */

/* -------------------- Texto grande (seção "empresa de TI é...") -------------------- */
.title-video-top p.large,
.title-video-top p.disc {
  color: #e3e5ee !important;
}
/* esse texto usa o efeito de scroll-reveal (main.js quebra em palavras,
   cada uma num <span class="rv-word">, e anima de "apagada" pra "acesa"
   conforme rola a tela). As cores originais (preto 18% opacidade -> preto
   sólido) foram pensadas pro fundo claro — em fundo escuro ficam pretas
   sobre preto, ou seja, o texto some por completo, ativo ou não. */
.reveal-text .rv-word {
  color: rgba(245, 247, 250, 0.22) !important;
}
.reveal-text .rv-word.is-active {
  color: #f4f5f7 !important;
}

/* -------------------- Cards das páginas internas -------------------- */
/* as páginas de serviço, Ponto & Acesso, Sobre, Contato e Carreira usam
   cards com "background:#fff" direto no style inline (não numa classe) —
   inline vence CSS externo normal, então só um seletor de atributo com
   !important consegue virar isso pro card elevado do tema escuro. */
[style*="background:#fff"] {
  background: #111521 !important;
}
/* exceção: os cards com a logo da Secullum/Henry/TopData (Ponto & Acesso)
   precisam continuar com fundo branco de propósito — a logo da Henry, por
   exemplo, é texto preto sólido, e ficaria invisível em fundo escuro. */
.brand-logo-card {
  background: #ffffff !important;
}

/* -------------------- Marcas/parceiros -------------------- */
/* logos costumam ser PNG/webp com fundo branco/transparente — um card
   claro por trás garante legibilidade em qualquer cor de logo */
.single-brand {
  background: #ffffff;
  border-radius: 12px;
}

/* -------------------- Contadores -------------------- */
.counter-up-wrapper {
  background: #080a10;
}
.single-counter-up-one {
  border-color: #272b38 !important;
}

/* -------------------- Painéis "do básico ao avançado" -------------------- */
.rts-service-area.service-section-area {
  background: #10131c;
}
.single-service-border-top {
  border-top-color: #272b38 !important;
}

/* -------------------- Casos de sucesso -------------------- */
.single-project-area-5 .inner-content {
  background: rgba(8, 10, 18, 0.8) !important;
}
.single-project-area-5 .inner-content .title,
.single-project-area-5 .inner-content span {
  color: #f4f5f7 !important;
}
.single-project-area-5 .inner-content span {
  color: #b9b4ff !important;
}
.category-badge {
  background: #111521 !important;
  color: #b9b4ff !important;
  border-color: #272b38 !important;
}

/* -------------------- Pricing -------------------- */
.bg-gradient-pricing {
  background: linear-gradient(180deg, #111521 0%, rgba(8, 10, 18, 0) 100%) !important;
}
.single-pricing-area,
.single-pricing-area.border-left {
  background: #111521 !important;
  border-color: #272b38 !important;
  box-shadow: none !important;
}
.single-pricing-area .head > div {
  color: #b5bac6;
}

/* -------------------- FAQ (accordion do Bootstrap) -------------------- */
.accordion-container-one,
.accordion-item {
  background: #111521 !important;
  border-color: #272b38 !important;
  color: #b5bac6;
}
.accordion-button {
  background: #111521 !important;
  color: #f4f5f7 !important;
}
.accordion-button:not(.collapsed) {
  background: #161a28 !important;
  color: #f4f5f7 !important;
  box-shadow: none !important;
}
.accordion-button::after {
  filter: invert(1) grayscale(1) brightness(2);
}
.accordion-body {
  color: #b5bac6 !important;
}

/* -------------------- Blog (cards reaproveitando .card do Bootstrap) -------------------- */
.blog-tech-area {
  background: linear-gradient(135deg, #10131c 0%, #080a10 100%) !important;
}
.blog-tech-area::before {
  opacity: 0.04;
}
.album .card,
.blog-post-item .card,
.work-item {
  background: #111521 !important;
  border-color: #272b38 !important;
}
.card-title,
.blog-title-2-lines,
.case-title {
  color: #f4f5f7 !important;
}
.card-text,
.blog-description-short,
.card-img-placeholder {
  color: #b5bac6 !important;
}
.date-badge {
  background: #4038ff !important;
}
.category-filters .btn {
  background: #111521;
  color: #b5bac6;
  border-color: #272b38;
}
.category-filters .btn:hover,
.category-filters .btn.active {
  background: #4038ff;
  color: #f4f5f7;
  border-color: #4038ff;
}
.pagination .page-link {
  background: #111521;
  border-color: #272b38;
  color: #b5bac6;
}
.pagination .page-item.disabled .page-link {
  background: #10131c;
  color: #747b8c; /* estado desabilitado — contraste baixo é proposital, mas ainda legível */
}

/* -------------------- CTA compacto -------------------- */
.rts-cts-area {
  background: #10131c;
}

/* -------------------- Menu mobile -------------------- */
.side-bar {
  background-color: #080a10 !important;
  backdrop-filter: blur(7px);
}
.side-bar .mainmenu > li > a.main {
  color: #f4f5f7;
}
.side-bar .mainmenu .submenu li a {
  color: #b5bac6;
}
.side-bar .mainmenu .mobile-menu-category {
  color: #514aff;
}
.close-icon-menu {
  background: #4038ff;
}
.mobile-menu-main nav ul li a.main {
  border-bottom-color: #272b38;
}

/* -- fallback pros ícones do menu mobile --
   Se a fonte do Font Awesome não carregar (comum ao abrir o arquivo direto,
   via file://, em vez de servir por http), o navegador mostra uma "caixinha"
   no lugar do glifo. Pro botão de fechar isso é crítico — sem X visível a
   pessoa não sabe como fechar o menu em tela cheia. Esses dois ícones (fechar
   e a seta do "Serviços") passam a usar um caractere comum de sistema, que
   não depende de nenhuma fonte externa carregar. */
.close-icon-menu i.fa-xmark::before {
  font-family: sans-serif !important;
  content: "\2715";
}
/* esse indicador (a setinha do "Serviços") usava font-family: "Font Awesome
   6 pro" — uma fonte PAGA que nunca existiu no projeto (só temos a Free).
   Sempre esteve quebrado, independente de file:// ou servidor. */
.mobile-menu-main nav ul li.has-droupdown::after {
  font-family: sans-serif !important;
  content: "\2304";
  font-size: 20px;
}
.mobile-menu-main nav ul li.has-droupdown.mm-active::after {
  content: "\2303";
}

/* -- menu ocupando a tela inteira no celular --
   No template original o painel tem largura fixa (465px, 310px em telas
   pequenas) e o botão de fechar fica FORA dele (margin-left: -53px), pendurado
   à esquerda. Em tela cheia esse "fora" não existe mais, então o botão precisa
   voltar pra dentro, no canto superior direito. */
@media only screen and (max-width: 991px) {
  .side-bar {
    width: 100%;
    max-width: 100%;
    padding: 70px 24px 40px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .side-bar button.close-icon-menu {
    position: absolute;
    top: 16px;
    right: 16px;
    left: auto;
    margin: 0;
    z-index: 2;
  }
  .side-bar button.close-icon-menu i {
    margin: 0;
    height: 44px;
    width: 44px;
    border-radius: 8px;
    font-size: 22px;
  }
  .mobile-menu-main nav ul {
    padding: 0;
  }
  .mobile-menu-main nav ul li a.main {
    font-size: 20px;
    padding: 16px 0;
  }
}

/* -------------------- Seções de fundo claro (.bg-light) --------------------
   .bg-light vem do bootstrap com !important (#f8f9fa), então essas seções
   ficam claras mesmo no tema escuro. Só que os títulos herdam
   --color-heading-1 (#f4f5f7) e os textos --color-body (#b5bac6), ambos
   claros: título sumia no fundo e o texto ficava quase ilegível.
   Aqui as cores voltam pro escuro dentro dessas seções. */
.rts-section-gap.bg-light .title,
.rts-section-gap.bg-light h1,
.rts-section-gap.bg-light h2,
.rts-section-gap.bg-light h3,
.rts-section-gap.bg-light h4,
.rts-section-gap.bg-light h5,
.rts-section-gap.bg-light h6 {
  color: #0b0a33 !important;
}
.rts-section-gap.bg-light p,
.rts-section-gap.bg-light .disc,
.rts-section-gap.bg-light li {
  color: #414356 !important;
}
/* exceção: dentro dessas seções claras ainda existem cards com
   "background:#fff" inline, que a regra acima (linha ~177) escurece pro card
   elevado do tema. Nesses o texto precisa voltar pro claro — menos no
   .brand-logo-card, que continua branco de propósito por causa das logos. */
.rts-section-gap.bg-light [style*="background:#fff"]:not(.brand-logo-card) .title,
.rts-section-gap.bg-light [style*="background:#fff"]:not(.brand-logo-card) h1,
.rts-section-gap.bg-light [style*="background:#fff"]:not(.brand-logo-card) h2,
.rts-section-gap.bg-light [style*="background:#fff"]:not(.brand-logo-card) h3,
.rts-section-gap.bg-light [style*="background:#fff"]:not(.brand-logo-card) h4,
.rts-section-gap.bg-light [style*="background:#fff"]:not(.brand-logo-card) h5,
.rts-section-gap.bg-light [style*="background:#fff"]:not(.brand-logo-card) h6 {
  color: #f4f5f7 !important;
}
.rts-section-gap.bg-light [style*="background:#fff"]:not(.brand-logo-card) p,
.rts-section-gap.bg-light [style*="background:#fff"]:not(.brand-logo-card) .disc,
.rts-section-gap.bg-light [style*="background:#fff"]:not(.brand-logo-card) li {
  color: #b5bac6 !important;
}
/* exceção: "Trabalhe conosco" (carreira.html) também carrega .bg-light,
   mas o fundo real ali é uma FOTO escura com camada escura por cima — a
   regra acima escurecia o título/texto pensando que fosse fundo claro de
   verdade, e ele quase sumia sobre a foto. */
#trabalhe-conosco .title,
#trabalhe-conosco p,
#trabalhe-conosco .disc {
  color: #f4f5f7 !important;
}
