/* Conteúdo de assets/css/styles.css */
html,
body {
  height: 100%; /* Essencial para o FullPage.js */
  margin: 0;
  padding: 0;
}

body {
  font-family: "Inter", sans-serif;
  background-color: #0d1117; /* Um tom escuro para o fundo global (fallback) */
  color: #e2e8f0; /* Cor de texto clara */
  overflow: hidden; /* FullPage.js gerencia a rolagem, então ocultamos o overflow do body */

  /* Wallpaper aplicado ao body */
  background-image: url("../img/wallpepr.png");
  background-size: cover; /* Cobre a área inteira, redimensionando se necessário */
  background-position: center; /* Centraliza a imagem */
  background-repeat: no-repeat; /* Não repete a imagem */
  background-attachment: fixed; /* Mantém o fundo fixo enquanto o conteúdo rola */
}

/* Canvas para o efeito de fundo (agora global novamente) */
#backgroundCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1; /* Fica acima do wallpaper do body, mas abaixo do conteúdo das seções */
  background-color: transparent; /* Permite que o wallpaper do body apareça por baixo */
}

/* FullPage.js usa a classe 'section' para suas "páginas" */
.section {
  display: flex; /* Centraliza o conteúdo verticalmente */
  flex-direction: column;
  justify-content: center; /* Padrão, pode ser sobrescrito em seções específicas */
  align-items: center;
  padding: 2rem 1rem; /* Adiciona um padding padrão para todas as seções */
  text-align: center; /* Centraliza o texto dentro da seção */
  box-sizing: border-box; /* Inclui padding e border no cálculo da largura/altura */
  position: relative; /* Necessário para z-index e posicionamento absoluto de children */
  z-index: 1; /* Garante que o conteúdo da seção esteja acima do canvas e do wallpaper */
}

/* Ajuste para o container de conteúdo para evitar sobreposição com a navegação lateral */
.section .container {
  max-width: 90%; /* Limita a largura do container para dar espaço */
  margin-right: 5rem; /* Adiciona margem à direita para a navegação */
  position: relative; /* Garante que o conteúdo esteja em sua própria camada */
  z-index: 3; /* Conteúdo sempre no topo */
}
/* Ajuste para telas menores, se necessário, reduzindo a margem ou largura */
@media (max-width: 768px) {
  .section .container {
    margin-right: auto; /* Remove a margem para a navegação em mobile */
    max-width: 100%;
  }
}

/* Hero Section (removidos backgrounds específicos, agora o body gerencia o wallpaper) */
.hero-section {
  background: linear-gradient(
    to bottom,
    rgba(13, 17, 23, 0.7),
    rgba(13, 17, 23, 0.9)
  ); /* Gradiente overlay */
}

/* Novas classes de fundo para alternância (com transparência para o wallpaper do body aparecer) */
.bg-gradient-primary {
  background: linear-gradient(
    to bottom,
    rgba(26, 32, 44, 0.8),
    rgba(13, 17, 23, 0.8)
  );
}
.bg-dark-secondary {
  background-color: rgba(22, 27, 34, 0.8);
}

.text-gradient {
  background: linear-gradient(to right, #8b5cf6, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.feature-card {
  background-color: #161b22;
  border: 1px solid #2f363d;
}
.btn-primary {
  background: linear-gradient(to right, #8b5cf6, #ec4899);
  transition: all 0.3s ease;
}
.btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(139, 92, 246, 0.4);
}

/* Remover efeito arredondado das logos ESPECIFICAMENTE */
img[alt^="Logo ApexLauncher"] {
  /* Seleciona imagens cujo alt começa com "Logo ApexLauncher" */
  border-radius: 0 !important; /* Sobrescreve para remover o arredondamento */
}

/* AJUSTES PARA A ÚLTIMA SEÇÃO E O RODAPÉ FIXO */
.section-contact-footer {
  display: flex;
  flex-direction: column;
  /* Remover justify-content para deixar a altura ser controlada pelos filhos */
  /* justify-content: space-between; */
  padding: 0;
  box-sizing: border-box;
  height: 100vh; /* Garante que a seção ocupe a altura total da viewport */
}

.section-contact-footer .content-wrapper {
  flex-grow: 1; /* Faz o conteúdo principal preencher o espaço restante */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centraliza o conteúdo dentro da área principal */
  align-items: center;
  width: 100%; /* Ocupa a largura total da área principal */
  /* Definir altura fixa para o content-wrapper */
  height: 90%;
  padding: 2rem 1rem; /* Adiciona padding ao conteúdo principal */
  box-sizing: border-box;
  margin-right: 5rem; /* Mantém a margem para a navegação FullPage.js */
}
@media (max-width: 768px) {
  .section-contact-footer .content-wrapper {
    margin-right: auto;
  }
}

/* Estilos para o rodapé simples no final da última seção */
.simple-footer {
  background-color: rgba(
    13,
    17,
    23,
    0.9
  ); /* Fundo escuro com leve transparência para o fundo */
  color: #718096; /* Texto cinza suave */
  padding: 1rem 0; /* Padding vertical */
  width: 100%; /* Ocupa toda a largura */
  text-align: center; /* Centraliza o texto */
  box-sizing: border-box;
  font-size: 0.875rem; /* Tamanho de texto menor */

  /* Flexbox para organizar o conteúdo interno (logo, texto, ícones) */
  display: flex;
  flex-direction: row; /* Itens em linha por padrão */
  align-items: center; /* Alinha verticalmente no centro */
  justify-content: space-between; /* Distribui o espaço entre os itens */

  /* Margens de 10% nas extremidades */
  padding-left: 10%; /* Margem à esquerda para a logo */
  padding-right: 10%; /* Margem à direita para os ícones */

  /* Definir altura fixa para o footer */
  height: 10%;
}

/* Estilo para os ícones sociais */
.social-icons a {
  color: #718096; /* Cor padrão */
  transition: color 0.2s ease-in-out;
  margin: 0 0.5rem; /* Espaçamento entre os ícones */
}
.social-icons a:hover {
  color: #fff; /* Cor ao passar o mouse */
}

/* AJUSTES PARA A NAVEGAÇÃO LATERAL DO FULLPAGE.JS */
#fp-nav {
  z-index: 100; /* Garante que a navegação esteja sempre acima do conteúdo */
}
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
  background: #8b5cf6 !important; /* Cor dos pontinhos */
  border: 2px solid #ec4899; /* Aro nos pontinhos */
  width: 12px !important; /* Tamanho do pontinho */
  height: 12px !important; /* Tamanho do pontinho */
  margin: -6px 0 0 -6px !important; /* Centraliza o pontinho */
  transition: all 0.3s ease-in-out; /* Transição suave */
}
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span {
  width: 16px !important; /* Tamanho maior para ativo */
  height: 16px !important; /* Tamanho maior para ativo */
  margin: -8px 0 0 -8px !important; /* Centraliza o pontinho ativo */
  background: #ec4899 !important; /* Cor do pontinho ativo */
}
#fp-nav ul li .fp-tooltip {
  color: #fff;
  font-size: 0.9rem;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
  opacity: 1 !important;
  white-space: nowrap;
}
#fp-nav ul li:hover .fp-tooltip {
  opacity: 1;
}
#fp-nav.fp-left {
  left: 15px;
}
#fp-nav.fp-right {
  right: 15px;
}