/* Importando fontes do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&family=Mozilla+Headline:wght@200..700&family=Playwrite+HU:wght@100..400&display=swap');

/* Reset básico para tirar margens e espaçamentos padrão do navegador */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Faz com que padding e border entrem no cálculo da largura/altura */
}

/* Estilização do cabeçalho */
header {
  margin-bottom: 2rem; /* Espaço abaixo do header */
  background: #000000; /* Fundo preto */
  padding: 1rem; /* Espaçamento interno */
  position: relative; /* Para posicionar elementos filhos de forma absoluta */
  font-weight: bold;
  border-radius: 17px; /* Bordas arredondadas */
  box-shadow: 0 0 10px #9131b4, 0 0 15px #ea555e; /* Efeito de brilho neon */
  border: 3px solid #4332a7; /* Borda azul roxa */
}

/* Estilo do título principal (h1) dentro do header */
header h1 {
  font-size: 4rem; /* Tamanho bem grande */
  text-align: center;
  margin-top: 2rem;
  font-weight: bold;
  color: #9131b4; /* Cor roxa */
  text-transform: uppercase; /* Tudo maiúsculo */

  /* Efeito 3D usando múltiplas sombras */
  text-shadow: 
    2px 2px 0 #000000,   /* sombra preta próxima */
    4px 4px 0 #99d1f4,   /* sombra azul clara */
    8px 8px 0  #000000;  /* sombra preta mais distante */
}

/* Navegação (lista de links) */
nav ul {
  list-style: none; /* Remove bolinhas da lista */
  display: flex; /* Coloca os itens lado a lado */
  justify-content: center; /* Centraliza horizontalmente */
  gap: 25px; /* Espaçamento entre os itens */
  margin-top: 20px;
}

nav ul li {
  display: inline; /* Cada item aparece na mesma linha */
}

/* Estilo dos links de navegação */
nav a {
  margin-bottom: 2rem;
  padding: 0.50rem;
  color: #99d1f4; /* Azul claro */
  text-decoration: none; /* Remove sublinhado */
  font-weight: bold;
  background-color: #000000; /* Fundo preto */
  border-radius: 17px; /* Bordas arredondadas */
  display: flex;
  align-items: center;
  box-shadow: 0 0 10px #9131b4, 0 0 15px #ea555e; /* Glow neon */
  border: 3px solid #4332a7;
  margin-top: 2rem;
}

/* Efeito hover (quando o mouse passa em cima do link) */
nav a:hover {
  margin-bottom: 1rem;
  padding: 0.5rem;
  text-align: center;
  color: #99d1f4;
  font-weight: bold;
  border-radius: 17px;
  box-shadow: 0 0 10px #9131b4, 0 0 15px #ea555e; /* Brilho mais forte */
  border: 3px solid #4332a7;
  transform: translateY(-10px) scale(1.03); /* Levanta o botão e aumenta um pouco */
}

/* Estilo geral do corpo da página */
body {
  font-family: Arial, Tahoma, Helvetica, sans-serif; /* Fonte personalizada */
  background-color: #000000; /* Fundo preto */
  color: #99d1f4; /* Texto azul claro */
  line-height: 2rem; /* Altura da linha */
  padding: 2rem;
}

/* Área principal do conteúdo */
main {
  max-width: 800px; /* Largura máxima */
  margin: 40px auto;  /* Centraliza horizontalmente */
  padding: 0 20px;
}

/* Estilo dos subtítulos (h2) */
main h2 {
  font-size: 2.5rem;
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 3rem; /* Espaço entre o h2 e o parágrafo */
  font-weight: bold;
  color:#9131b4; /* Roxo */
  text-transform: uppercase;

  /* Sombras para dar efeito 3D */
  text-shadow: 
    2px 2px 0 #000000,
    4px 4px 0 #3daeff49,
    8px 8px 0 #000000;
}

/* Parágrafos dentro do main */
main p {
  margin-bottom: 20px;
}

/* Estilo das seções */
section {
  margin-bottom: 3rem;
  padding: 2rem;
  position: relative;
  color:#99d1f4;
  font-weight: bold;
  border-radius: 17px;
  box-shadow: 0 0 10px #9131b4, 0 0 15px #ea555e; /* Glow */
  transition: 
    box-shadow 0.3s, 
    border-color 0.3s, 
    background-color 0.3s,
    transform 0.3s;
  cursor: pointer; /* Cursor de mãozinha */
  border: 3px solid #4332a7;
}

/* Quando passa o mouse na seção */
section:hover {
  box-shadow: 0 8px 40px #9131b4, 0 0 20px #ea555e; /* Glow mais forte */
  border: 3px solid #99d1f4;
  background: linear-gradient(45deg, #cb3adb, ); /* Gradiente (faltando cor aqui 👀) */
  transform: translateY(-10px) scale(1.03); /* Levanta e aumenta */
}

/* Rodapé */
footer p {
  font-size: 1.2rem; /* Tamanho do texto do rodapé */
  margin-bottom: 2rem;
  padding: 2rem;
  text-align: center;
  font-weight: bold;
  border-radius: 17px;
  box-shadow: 0 0 10px #9131b4, 0 0 15px #ff00ff;
  border: 3px solid #4332a7;

  /* Gradiente animado no texto */
   background: linear-gradient(90deg, #9131b4, #ff00ff,#99d1f4, #4332a7);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  background-clip: text;
  color: transparent;
  animation: gradientMove 4s ease infinite; /* Animação do gradiente */
}

/* Keyframes da animação de gradiente */
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Logo no canto superior esquerdo */
.logo-superior-esquerdo {
  position: absolute;
  top: 40px;
  left: 70px;
  width: 150px;
  height: auto;
  z-index: 1000;
}

/* Responsividade (quando tela for menor que 768px) */
@media (max-width: 768px) {
  .logo-superior-esquerdo {
    top: 20px;
    right: 5px;
    width: 90px;
  }
}

/* Botão fixo do WhatsApp */
.whatsapp-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background-color: #000000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px #9131b4, 0 0 15px #ea555e;
  z-index: 1000;
  transition: 
    box-shadow 0.3s, 
    border-color 0.3s, 
    background-color 0.3s,
    transform 0.3s;
  cursor: pointer;
  border: 3px solid #4332a7;
}

/* Ícone dentro do botão do WhatsApp */
.whatsapp-button img {
  width: 40px;
  height: auto;
}

/* Hover no botão do WhatsApp */
.whatsapp-button:hover {
  box-shadow: 0 8px 40px #9131b4, 0 0 20px #ea555e;
  border: 3px solid #99d1f4;
  background: transparent; /* fundo transparente dentro do botão do whatsApp*/
  transform: translateY(-10px) scale(1.03);
}

/* Seção "sobre" (texto + imagem lado a lado) */
#sobre {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Div dentro do sobre */
#sobre > div {
  flex: 1; /* Cada div ocupa o mesmo espaço */
}

/* Imagem dentro do sobre */
#sobre img {
  max-width: 200px;
  height: auto;
}

/* Responsividade para a seção "sobre" */
@media (max-width: 768px) {
  #sobre {
    flex-direction: column; /* Fica em coluna no celular */
    text-align: center;
  }
}