/* Seletor universal para resetar estilos padrão do navegador. */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Habilita a rolagem suave ao clicar em links de âncora (ex: <a href="#sobre">). */

html {
  scroll-behavior: smooth;
}

/* Estilos base para todo o corpo da página. */

body {
  background-color: var(--cor-preto-principal);
  /* Cor de fundo principal. */

  color: var(--cor-branco-texto);
  /* Cor padrão do texto. */

  font-family: var(--fonte-titulo);
  /* Fonte padrão para o corpo do texto. */

  line-height: 1.7;
  /* Altura da linha para melhor legibilidade. */

  overflow-x: hidden;
  /* Impede a rolagem horizontal. */

  /* Adiciona um efeito de scanline sutil ao fundo. */

  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(208, 102, 61, 0.03) 2px,
    rgba(208, 102, 61, 0.03) 4px
  );
}

/* Classe de container para centralizar o conteúdo e limitar sua largura máxima. */

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Estilos comuns para os títulos. */

h1,
h2,
h3,
h4 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  margin-bottom: 20px;
}

/* Estilos específicos para o título principal (H1). */

h1 {
  font-size: 6rem;
  /* Tamanho da fonte. */

  font-weight: 900;
  /* Espessura da fonte. */

  letter-spacing: 8px;
  /* Espaçamento entre as letras. */

  text-transform: uppercase;
  /* Converte o texto para maiúsculas. */

  /* Cria um gradiente de cores para o texto. */

  background: linear-gradient(
    45deg,
    var(--cor-laranja-destaque),
    var(--cor-laranja-neon),
    var(--cor-branco-texto)
  );

  /* As duas linhas seguintes aplicam o gradiente como a cor do texto, tornando o fundo transparente. */

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

  filter: drop-shadow(0 0 20px rgba(208, 102, 61, 0.5));
  /* Adiciona uma sombra de brilho. */

  animation: glow-pulse 3s ease-in-out infinite;
  /* Aplica uma animação de pulsação. */
}

/* Define a animação 'glow-pulse' para o H1. */

@keyframes glow-pulse {
  0%,
  100% {
    filter: drop-shadow(0 0 20px rgba(208, 102, 61, 0.5));
  }

  /* Estado inicial e final. */

  50% {
    filter: drop-shadow(0 0 40px rgba(208, 102, 61, 0.9))
      drop-shadow(0 0 60px rgba(208, 102, 61, 0.6));
  }

  /* Ponto médio da animação, com brilho máximo. */
}

/* Estilos para os títulos de seção (H2). */

h2 {
  font-size: 3.5rem;

  text-align: center;
  /* Centraliza o texto. */

  margin-bottom: 60px;
  /* Margem inferior. */

  position: relative;
  /* Necessário para posicionar o pseudo-elemento '::after'. */

  /* Aplica um gradiente ao texto. */

  background: linear-gradient(
    135deg,
    var(--cor-laranja-destaque),
    var(--cor-laranja-neon),
    var(--cor-branco-texto)
  );

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

  text-transform: uppercase;

  letter-spacing: 4px;

  filter: drop-shadow(0 0 10px rgba(208, 102, 61, 0.3));
  /* Sombra de brilho sutil. */
}

/* Cria uma linha decorativa animada abaixo dos títulos H2. */

h2::after {
  content: "";
  /* Conteúdo vazio, pois é um elemento puramente visual. */

  position: absolute;
  /* Posicionamento absoluto em relação ao H2. */

  left: 50%;
  /* Centraliza horizontalmente. */

  transform: translateX(-50%);
  /* Ajuste fino para centralização perfeita. */

  bottom: -15px;
  /* Posição abaixo do texto. */

  width: 0px;
  /* Largura inicial, para a animação. */

  height: 4px;
  /* Altura da linha. */

  background: linear-gradient(
    90deg,
    transparent,
    var(--cor-laranja-destaque),
    transparent
  );
  /* Gradiente da linha. */

  box-shadow: 0 0 20px var(--cor-laranja-destaque);
  /* Brilho na linha. */

  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  /* Transição suave para a largura. */
}

/* Quando a seção se torna visível (via JS), a linha abaixo do H2 se expande. */

section.visible h2::after {
  width: 200px;
}

/* Estilos para subtítulos (H3). */

h3 {
  font-size: 2rem;
  color: var(--cor-laranja-destaque);
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Estilos para outros títulos (H4). */

h4 {
  font-size: 1.4rem;
  text-transform: uppercase;
}

/* Estilos para parágrafos. */

p {
  color: var(--cor-cinza-texto);
  margin-bottom: 20px;
  font-size: 1.1rem;
}

/* Estilos para links. */

a {
  color: var(--cor-laranja-destaque);
  text-decoration: none;
  transition: var(--transition-fast);
}

/* Efeito hover para links. */

a:hover {
  color: var(--cor-laranja-destaque);
  text-shadow: 0 0 10px var(--cor-laranja-destaque);
}

/* Estilos padrão para todas as seções principais da página. */

section {
  padding: 120px 0;
  border-bottom: 1px solid var(--cor-borda-sutil);
  overflow: hidden;
  position: relative;
}

/* Container para as partículas de fundo. Posicionado para cobrir toda a seção. */

.particles-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
  opacity: 0.3;
}

/* Estilo individual de cada partícula. */

.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--cor-laranja-destaque);
  border-radius: 50%;
  animation: float-particle 10s linear infinite;
}

/* Animação para fazer as partículas flutuarem para cima. */

@keyframes float-particle {
  0% {
    transform: translateY(100vh) translateX(0);
    opacity: 0;
  }

  /* Começa fora da tela, abaixo. */

  10% {
    opacity: 1;
  }

  /* Aparece. */

  90% {
    opacity: 1;
  }

  /* Permanece visível. */

  100% {
    transform: translateY(-100vh) translateX(100px);
    opacity: 0;
  }

  /* Desaparece fora da tela, acima. */
}

/* --- Sistema de Animação de Scroll --- */

/* Estado inicial dos elementos que serão animados ao rolar a página. */

[data-animation] {
  opacity: 0;
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

/* Posição inicial para a animação 'fade-in'. */

[data-animation="fade-in"] {
  transform: translateY(40px);
}

/* Posição inicial para a animação 'slide-in-left'. */

[data-animation="slide-in-left"] {
  transform: translateX(-80px);
}

/* Posição inicial para a animação 'slide-in-right'. */

[data-animation="slide-in-right"] {
  transform: translateX(80px);
}

/* Posição inicial para a animação 'zoom-in'. */

[data-animation="zoom-in"] {
  transform: scale(0.8);
}

/* Estado final (visível) dos elementos animados. O JS adiciona a classe '.visible'. */

.visible[data-animation] {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* Efeitos de hover no botão: eleva, aumenta e adiciona brilho. */

.cta-button:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: var(--glow-shadow-intense);
  border-color: var(--cor-laranja-neon);
}

/* --- Tela de Carregamento (Preloader) --- */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Um fundo sólido escuro é mais profissional */
  background: #151515;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* Transição de fade-out quando sumir */
  transition:
    opacity 0.8s ease,
    visibility 0.8s ease;
  opacity: 1;
  visibility: visible;
}

.loading-logo {
  margin-bottom: 30px;
}

.loading-logo img {
  /* Animação suave de pulsação no logo */
  animation: pulse-logo 1.5s ease-in-out infinite;
}

/* Animação de pulsação suave para o logo */
@keyframes pulse-logo {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

/* Container da barra de progresso (o trilho) */
.loading-bar-container {
  width: 80%;
  max-width: 300px;
  height: 8px;
  background: #333; /* Cor do trilho */
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 20px;
}

/* Barra de progresso interna (a que cresce) */
#loading-bar {
  width: 0%; /* Começa em 0% */
  height: 100%;
  /* Usa as cores do seu site para a barra */
  background: linear-gradient(
    90deg,
    var(--cor-laranja-destaque),
    var(--cor-laranja-neon)
  );
  border-radius: 4px;
  /* Transição suave para o crescimento da barra */
  transition: width 0.2s ease-out;
}

/* Texto da porcentagem */
#loading-percentage {
  font-family: var(--fonte-titulo);
  font-size: 1.5rem;
  color: var(--cor-laranja-destaque);
  letter-spacing: 2px;
}

.header {
  background: linear-gradient(
    180deg,
    rgba(21, 21, 21, 0.95),
    rgba(21, 21, 21, 0.7)
  );
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  transition: all var(--transition-medium);
  backdrop-filter: blur(15px) saturate(180%);
  -webkit-backdrop-filter: blur(15px) saturate(180%);
  border-bottom: 2px solid transparent;
  height: 90px;
}

/* Estilo do cabeçalho quando a página é rolada. */

.header.scrolled {
  background: linear-gradient(
    180deg,
    rgba(21, 21, 21, 0.98),
    rgba(21, 21, 21, 0.95)
  );
  height: 75px;
  border-bottom-color: var(--cor-laranja-destaque);
  box-shadow: 0 5px 30px rgba(208, 102, 61, 0.3);
}

/* Container da barra de navegação (logo e menu). */

.navbar {
  display: flex;
  /* Alinha os itens horizontalmente. */

  justify-content: space-between;
  /* Espaça a logo e o menu. */

  align-items: center;
  /* Centraliza verticalmente. */

  height: 100%;
  /* Ocupa toda a altura do header. */

  padding: 0 5%;
  /* Espaçamento lateral. */

  gap: 2rem;
  /* Adiciona um espaço mínimo entre a logo e o menu. */
}

/* Estilo da logo. */

.logo {
  height: 55px;
  transition: all var(--transition-fast);
  filter: drop-shadow(0 0 10px rgba(208, 102, 61, 0.5));
}

/* Diminui a logo quando a página é rolada. */

.header.scrolled .logo {
  height: 50px;
}

/* Efeito hover na logo. */

.logo:hover {
  transform: scale(1.15) rotate(-5deg);
  filter: drop-shadow(0 0 20px rgba(208, 102, 61, 0.9))
    drop-shadow(0 0 30px rgba(255, 221, 0, 0.5));
}

/* Lista de links do menu de navegação. */

.nav-menu {
  list-style: none;
  display: flex;
  gap: 30px;
}

/* Estilo de cada link do menu. */

.nav-link {
  color: var(--cor-branco-texto);
  text-decoration: none;
  font-family: var(--fonte-titulo);
  font-weight: 500;
  font-size: 1rem;
  position: relative;
  padding: 8px 0;
  transition: color var(--transition-fast);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Linha decorativa animada abaixo do link do menu. */

.nav-link::after {
  content: "";
  position: absolute;
  width: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--cor-laranja-destaque),
    var(--cor-laranja-neon)
  );
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: 0 0 10px var(--cor-laranja-destaque);
}

/* Efeitos no link quando o mouse passa por cima ou quando está ativo. */

.nav-link:hover,
.nav-link.active {
  color: var(--cor-laranja-destaque);
  text-shadow: 0 0 10px rgba(208, 102, 61, 0.8);
}

/* Expande a linha abaixo do link no hover ou quando ativo. */

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* Ícone do menu hamburguer para telas menores (inicialmente escondido). */

.hamburger {
  display: none;
  cursor: pointer;
  z-index: 1002;
}

/* Barras que formam o ícone hamburguer. */

.bar {
  display: block;
  width: 28px;
  height: 3px;
  margin: 6px auto;
  transition: all var(--transition-medium);
  background: linear-gradient(
    90deg,
    var(--cor-laranja-destaque),
    var(--cor-laranja-neon)
  );
  border-radius: 2px;
  box-shadow: 0 0 5px var(--cor-laranja-destaque);
}
/* Efeitos Visuais Adicionais para a Seção Home */

/* --- Rodapé --- */

.footer {
  background-color: #151515;
  text-align: center;
  padding: 50px 20px;
  border-top: 4px solid var(--cor-laranja-destaque);
  box-shadow: 0 -5px 30px rgba(208, 102, 61, 0.3);
}

/* Links para redes sociais. */

.social-links a {
  color: var(--cor-branco-texto);
  font-size: 2rem;
  margin: 0 20px;
  display: inline-block;
  transition: all var(--transition-fast);
}

/* Efeito de elevação e destaque no ícone social no hover. */

.social-links a:hover {
  color: var(--cor-laranja-destaque);
  transform: translateY(-8px) scale(1.2);
  text-shadow: var(--glow-shadow);
}

.footer p {
  margin-top: 30px;
}

/* --- Botão Voltar ao Topo --- */

/* Estilo do botão fixo no canto inferior direito. */

#back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: linear-gradient(
    135deg,
    var(--cor-laranja-destaque),
    var(--cor-laranja-neon)
  );
  color: #fbfbfb;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  font-size: 1.8rem;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-fast);
  z-index: 999;
  border: 2px solid var(--cor-laranja-neon);
}

/* Estilo do botão quando visível (controlado por JS). */

#back-to-top.show {
  opacity: 1;
  visibility: visible;
}

/* Efeito de rotação no botão no hover. */

#back-to-top:hover {
  transform: scale(1.15) rotate(360deg);
  box-shadow: var(--glow-shadow-intense);
}

/* --- Animações Genéricas --- */

/* Animação para elementos aparecerem de baixo para cima. */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Media Queries (Responsividade) --- */

/* Estilos para telas menores que 992px (tablets e desktops pequenos). */

@media (max-width: 992px) {
  h1 {
    font-size: 4rem;
    letter-spacing: 4px;
  }

  h2 {
    font-size: 2.8rem;
  }
}

/* Estilos para telas menores que 768px (celulares). */

@media (max-width: 768px) {
  h1 {
    font-size: 3rem;
    letter-spacing: 2px;
  }

  h2 {
    font-size: 2.2rem;
  }

  section {
    padding: 80px 0;
  }

  /* Estilos para o menu de navegação móvel (hamburguer). */

  .nav-menu {
    position: fixed;
    left: -100%;
    top: 0;
    height: 100vh;
    gap: 0;
    flex-direction: column;
    background-color: rgba(21, 21, 21, 0.95);
    backdrop-filter: blur(15px);
    width: 100%;
    text-align: center;
    transition: 0.5s cubic-bezier(0.7, 0, 0.3, 1);
    z-index: 1001;
    justify-content: center;
  }

  /* Quando o menu está ativo, ele desliza para a tela. */

  .nav-menu.active {
    left: 0;
  }

  .nav-item {
    padding: 20px 0;
    width: 100%;
  }

  /* Mostra o ícone hamburguer. */

  .hamburger {
    display: block;
  }

  /* Animação do ícone hamburguer para se transformar em um 'X'. */

  .hamburger.active .bar:nth-child(2) {
    opacity: 0;
  }

  .hamburger.active .bar:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }

  .hamburger.active .bar:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }
}

/* --- ESTILOS DOS CRÉDITOS (RODAPÉ) --- */

.credits {
  margin-top: 15px;
  font-size: 0.85rem; /* Um pouco menor que o texto padrão para ficar sutil */
  color: var(--cor-cinza-texto); /* Usa a cor cinza do seu tema */
  letter-spacing: 0.5px;
  opacity: 0.8;
}

/* O Link dos Nomes */
.dev-link {
  color: var(--cor-cinza-texto); /* Começa cinza (oculto) */
  text-decoration: none;
  font-weight: 700; /* Negrito para destacar levemente */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  padding-bottom: 2px;
}

/* Efeito Hover (Quando passa o mouse) */
.dev-link:hover {
  color: var(--cor-laranja-destaque); /* Vira laranja */
  text-shadow: 0 0 10px rgba(221, 102, 63, 0.6); /* Brilho neon */
  cursor: pointer;
}

/* Sublinhado animado que aparece no hover */
.dev-link::after {
  content: "";
  position: absolute;
  width: 0;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: var(--cor-laranja-destaque);
  transition: width 0.3s ease;
}

.dev-link:hover::after {
  width: 100%;
}

/* Estilo do separador "| DevOps" */
.division-tag {
  font-size: 0.8rem;
  color: #666; /* Um cinza mais escuro para dar menos destaque que os nomes */
  margin-left: 5px;
  font-weight: 400;
}

/* --- WIDGETS (VLibras + bloqueio de anúncios) --- */
[vw] [vw-access-button] {
  display: none;
  flex-direction: row-reverse;
  width: 40px;
  height: 40px;
  cursor: pointer;
  overflow: hidden;
  position: absolute;
  border-radius: 8px;
  transition: all 0.5s ease;
  right: 0;
  left: auto;
}
[vw] [vw-access-button] img {
  max-height: 40px;
  transition: all 0.5s ease;
  border-radius: 8px;
  opacity: 1 !important;
  visibility: visible !important;
}
[vw] [vw-access-button] .vp-access-button {
  width: 40px;
  height: 40px;
  z-index: 1;
}
[vw] [vw-access-button] .vp-pop-up {
  position: absolute;
  height: 40px;
  min-width: 150px;
  z-index: 0;
  left: 0;
  right: auto;
}
[vw] [vw-access-button]:hover {
  width: 200px;
}
[vw] [vw-access-button].isLeft {
  flex-direction: row;
  left: 0;
  right: auto;
}
[vw] [vw-access-button].isLeft .vp-pop-up {
  left: auto;
  right: 0;
}
[vw] [vw-access-button].isTopOrBottom:hover {
  bottom: -20px;
  top: 0;
  margin-right: -80px;
}
[vw] [vw-access-button].active {
  display: flex;
}

[vw].left [vw-plugin-wrapper] {
  float: left;
}
[vw] [vw-plugin-wrapper] {
  position: relative;
  display: none;
  width: 300px;
  height: 100%;
  float: right;
  background: white;
  -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
}
[vw] [vw-plugin-wrapper].active {
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  height: 450px;
  max-width: 100%;
  min-height: 100%;
}

div[vw] {
  position: fixed;
  max-width: 95vw;
  min-height: 40px;
  min-width: 40px;
  z-index: 2147483645 !important;
  display: none;
  margin: 10px !important;
}
div[vw].enabled {
  display: block;
}
div[vw].active {
  margin-top: -285px;
}
div[vw].left {
  left: 0;
  right: initial;
}

:is(
  [id*="google_ads_iframe"],
  [id*="taboola-"],
  .taboolaHeight,
  .taboola-placeholder,
  #top-ad,
  #credential_picker_container,
  #credentials-picker-container,
  #credential_picker_iframe,
  [id*="google-one-tap-iframe"],
  #google-one-tap-popup-container,
  .google-one-tap__module,
  .google-one-tap-modal-div,
  #amp_floatingAdDiv,
  #ez-content-blocker-container
) {
  display: none !important;
  min-height: 0 !important;
  height: 0 !important;
}