/* ==========================================================================
   ARENA 1X1.BET - LANDING PAGE STYLESHEET (lp.css)
   Desenvolvido com foco em Gamer, Neon, Futurista e Responsivo
   Versão: 1.0 - CAPRICHADA!
   ========================================================================== */

/* ==========================================================================
   0. IMPORTS, VARIÁVEIS E CONFIGURAÇÕES GLOBAIS
   ========================================================================== */

/* Importando fontes (já no HTML via link, mas podemos adicionar fallbacks) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

/* -------------------- Variáveis CSS (Custom Properties) -------------------- */
:root {
  /* Paleta de Cores Oficial */
  --primary-color: #adff2f; /* Verde Neon Principal */
  --primary-hover-color: #98e729; /* Verde Neon Hover */
  --primary-glow-color: rgba(173, 255, 47, 0.7); /* Glow Verde */
  --primary-glow-intense: rgba(173, 255, 47, 1);

  --dark-bg-primary: #0a0a0a; /* Quase Preto */
  --dark-bg-secondary: #121212; /* Cinza Super Escuro */
  --dark-bg-tertiary: #1a1a1a; /* Cinza Escuro Elementos */

  --text-primary-color: #ffffff; /* Texto Principal Branco */
  --text-secondary-color: #cccccc; /* Texto Secundário Cinza Claro */
  --text-muted-color: #777777; /* Texto Muted/Copyright */

  --border-color-subtle: #333333; /* Bordas Sutis */
  --border-color-medium: #555555; /* Bordas Médias */
  --border-color-neon: var(--primary-color);

  /* Tipografia */
  --font-family-base: 'Montserrat', sans-serif;
  --font-size-base: 1rem; /* Base 16px */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* Tamanhos de Fonte Responsivos (Exemplos) */
  --h1-font-size: clamp(2.5rem, 6vw + 1rem, 4.5rem); /* Fluido */
  --h2-font-size: clamp(1.8rem, 4vw + 1rem, 3rem);
  --h3-font-size: clamp(1.2rem, 2vw + 0.8rem, 1.75rem);
  --normal-font-size: var(--font-size-base);
  --small-font-size: 0.875rem; /* 14px */
  --smaller-font-size: 0.75rem; /* 12px */

  /* Espaçamentos */
  --spacing-xs: 0.25rem; /* 4px */
  --spacing-sm: 0.5rem;  /* 8px */
  --spacing-md: 1rem;    /* 16px */
  --spacing-lg: 1.5rem;  /* 24px */
  --spacing-xl: 2rem;    /* 32px */
  --spacing-xxl: 3rem;   /* 48px */
  --spacing-xxxl: 5rem;  /* 80px */

  /* Header */
  --header-height: 4.5rem; /* Altura do Header */
  --header-height-scroll: 4rem; /* Altura do Header ao rolar */

  /* Transições e Animações */
  --transition-speed-fast: 0.2s;
  --transition-speed-medium: 0.4s;
  --transition-speed-slow: 0.6s;
  --transition-cubic: cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Efeito elástico */
  --transition-default: all var(--transition-speed-medium) ease-in-out;

  /* Z-Index */
  --z-back: -10;
  --z-base: 1;
  --z-medium: 10;
  --z-high: 50;
  --z-header: 100;
  --z-modal: 1000;
  --z-preloader: 9999;

  /* Efeitos Neon */
  --neon-text-shadow-light: 0 0 5px var(--primary-glow-color),
                            0 0 10px var(--primary-glow-color);
  --neon-text-shadow-medium: 0 0 8px var(--primary-glow-color),
                             0 0 15px var(--primary-glow-color),
                             0 0 25px var(--primary-glow-color);
  --neon-box-shadow-light: 0 0 10px var(--primary-glow-color),
                           0 0 20px var(--primary-glow-color);
  --neon-box-shadow-medium: 0 0 15px var(--primary-glow-color),
                            0 0 30px var(--primary-glow-color),
                            inset 0 0 5px var(--primary-glow-color);
  --neon-box-shadow-intense: 0 0 20px 5px var(--primary-glow-intense),
                             0 0 40px 10px var(--primary-glow-color),
                             inset 0 0 15px var(--primary-glow-color);
}

/* -------------------- Configurações Globais -------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* Removendo outline padrão, mas ADICIONANDO ESTILOS DE FOCO VISÍVEIS ABAIXO */
  outline: none;
}

/* Estilo de foco visível para acessibilidade */
*:focus-visible {
  outline: 2px solid var(--primary-hover-color);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(152, 231, 41, 0.3); /* Glow suave no foco */
}

html {
  font-size: 100%; /* Garante que 1rem = 16px por padrão */
  scroll-behavior: smooth; /* Rolagem suave para links internos */
  height: 100%; /* Necessário para alguns layouts de altura total */
}








/* Dentro de lp.css */

body {
    font-family: var(--font-family-base);
    font-size: var(--normal-font-size);
    font-weight: var(--font-weight-regular);
    background-color: var(--dark-bg-primary);
    color: var(--text-secondary-color);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  
    /* --- Cursor Customizado ATIVADO --- */
    /* Define 'mouse.png' como cursor padrão */
    /* O navegador usará 'auto' (cursor padrão do sistema) se a imagem falhar */
    cursor: url('imageslp/mouse.png'), auto; /* <<< LINHA DESCOMENTADA E AJUSTADA */
    /* A linha 'cursor: default;' anterior foi removida pois 'auto' já é o fallback */
  }
  
  /* --- Cursor Customizado para Itens Clicáveis ATIVADO --- */
  button,
  a,
  [role="button"],
  input[type="submit"],
  input[type="checkbox"],
  input[type="radio"],
  label,
  .game-card, /* Adicionando outras classes interativas se desejar */
  .faq-question /* Exemplo: se perguntas do FAQ forem clicáveis */
  {
    /* Define 'mouse-clicavel.png' para itens interativos */
    /* O navegador usará 'pointer' (mãozinha) se a imagem falhar */
    cursor: url('imageslp/mouse-clicavel.png'), pointer; /* <<< LINHA DESCOMENTADA E AJUSTADA */
    /* A linha 'cursor: pointer;' anterior foi removida pois 'pointer' já é o fallback */
  }
  
  /* Você pode adicionar mais seletores na regra acima para outros elementos */
  /* que devem ter o cursor 'clicável', como os cards, etc. */
  
  /* Restante do seu CSS continua aqui... */














/* Estilização da Barra de Rolagem (Webkit - Chrome, Safari, Edge) */
body::-webkit-scrollbar {
  width: 12px; /* Largura da barra */
  background-color: var(--dark-bg-secondary);
}

body::-webkit-scrollbar-track {
  background-color: var(--dark-bg-secondary);
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

body::-webkit-scrollbar-thumb {
  background-image: linear-gradient(
    to bottom,
    var(--primary-color),
    var(--primary-hover-color)
  ); /* Gradiente neon */
  border-radius: 10px;
  border: 2px solid var(--dark-bg-secondary); /* Borda para separar do track */
}

body::-webkit-scrollbar-thumb:hover {
  background-image: linear-gradient(
    to bottom,
    var(--primary-hover-color),
    var(--primary-color)
  );
  box-shadow: var(--neon-box-shadow-light);
}

/* Estilização da Barra de Rolagem (Firefox) */
/* Nota: Firefox tem menos opções de customização */
html {
  scrollbar-width: thin; /* 'auto' ou 'thin' */
  scrollbar-color: var(--primary-color) var(--dark-bg-secondary); /* thumb track */
}


h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-bold);
  color: var(--text-primary-color);
  margin-bottom: var(--spacing-md);
  line-height: 1.2; /* Linhas mais justas para títulos */
  letter-spacing: -0.5px; /* Leve ajuste no espaçamento */
}

h1 { font-size: var(--h1-font-size); font-weight: var(--font-weight-black); }
h2 { font-size: var(--h2-font-size); font-weight: var(--font-weight-extrabold); }
h3 { font-size: var(--h3-font-size); font-weight: var(--font-weight-bold); }
/* Definir outros tamanhos se necessário */

p {
  margin-bottom: var(--spacing-md);
  color: var(--text-secondary-color);
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: var(--transition-default);
}

a:hover {
  color: var(--primary-hover-color);
  text-decoration: none; /* Manter sem sublinhado no hover também */
}

img {
  max-width: 100%;
  height: auto;
  display: block; /* Remove espaço extra abaixo da imagem */
  object-fit: cover; /* Garante que a imagem cubra a área sem distorcer */
}

ul {
  list-style: none; /* Remove marcadores padrão */
}

/* ==========================================================================
   1. UTILIDADES E CLASSES REUTILIZÁVEIS
   ========================================================================== */

/* -------------------- Container -------------------- */
.container {
  max-width: 1200px; /* Largura máxima do conteúdo */
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-lg); /* 24px */
  padding-right: var(--spacing-lg);
  width: 100%;
}

/* Ajustes de padding para telas menores */
@media screen and (max-width: 768px) {
  .container {
    padding-left: var(--spacing-md); /* 16px */
    padding-right: var(--spacing-md);
  }
}

/* -------------------- Grid Layout -------------------- */
/* Flexbox Grid Simples (pode usar CSS Grid também) */
.grid {
  display: grid;
  gap: var(--spacing-xl); /* Espaço entre itens do grid */
}

/* -------------------- Seções -------------------- */
.section {
  padding-top: var(--spacing-xxxl); /* 80px */
  padding-bottom: var(--spacing-xxxl);
  position: relative; /* Para posicionar efeitos */
  overflow: hidden; /* Conter efeitos dentro da seção */
}

/* Ajuste de padding para seções em telas menores */
@media screen and (max-width: 768px) {
  .section {
    padding-top: var(--spacing-xxl); /* 48px */
    padding-bottom: var(--spacing-xxl);
  }
}

.section__header {
  text-align: center;
  margin-bottom: var(--spacing-xxl); /* 48px */
}

.section__subtitle {
  display: block;
  font-size: var(--small-font-size);
  color: var(--primary-color);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-sm);
  /* Efeito Neon sutil */
  text-shadow: 0 0 3px var(--primary-glow-color);
}

.section__title {
  font-size: var(--h2-font-size);
  color: var(--text-primary-color);
  position: relative; /* Para pseudo-elementos decorativos */
}

/* Linha decorativa abaixo do título (opcional) */
.section__title::after {
  content: '';
  display: block;
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
  margin: var(--spacing-md) auto 0;
  border-radius: 2px;
  box-shadow: var(--neon-box-shadow-light);
}

/* Variante de Header para seções com fundo claro/imagem */
.section__header--light .section__subtitle {
    /* Pode precisar de ajuste de cor se o fundo for claro demais */
     color: var(--primary-hover-color); /* Um pouco mais escuro */
}
.section__header--light .section__title {
    color: var(--text-primary-color); /* Manter branco ou ajustar se necessário */
}

/* -------------------- Text Highlighting -------------------- */
.highlight-neon {
  color: var(--primary-color);
  font-weight: var(--font-weight-bold);
  text-shadow: var(--neon-text-shadow-light);
}

.highlight-green { /* Sem o glow, só a cor */
  color: var(--primary-color);
  font-weight: var(--font-weight-bold);
}

/* -------------------- Button Styles -------------------- */
.button {
  display: inline-block;
  background-color: transparent; /* Base transparente */
  color: var(--primary-color);
  padding: var(--spacing-md) var(--spacing-xl); /* 16px 32px */
  border: 2px solid var(--primary-color);
  border-radius: 50px; /* Botões arredondados */
  font-weight: var(--font-weight-semibold);
  font-size: var(--normal-font-size);
  text-align: center;
  cursor: pointer;
  transition: var(--transition-default), transform var(--transition-speed-fast) ease;
  position: relative; /* Para pseudo-elementos e efeitos */
  overflow: hidden; /* Conter efeitos internos */
  z-index: var(--z-base);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.button:hover {
  background-color: var(--primary-color);
  color: var(--dark-bg-primary);
  box-shadow: var(--neon-box-shadow-medium);
  transform: translateY(-3px) scale(1.03); /* Leve levantada e zoom */
}

.button:active {
  transform: translateY(-1px) scale(0.98); /* Efeito de clique */
  box-shadow: var(--neon-box-shadow-light);
}

/* Botão Primário (Header) */
.button--primary {
  background-color: var(--primary-color);
  color: var(--dark-bg-primary);
  border-color: var(--primary-color);
}

.button--primary:hover {
  background-color: var(--primary-hover-color);
  border-color: var(--primary-hover-color);
  color: #000; /* Preto mais forte no hover */
  box-shadow: var(--neon-box-shadow-medium);
}

/* Botão de Call to Action (CTA) */
.button--cta {
  padding: var(--spacing-lg) var(--spacing-xxl); /* Maior */
  font-size: 1.1rem;
  font-weight: var(--font-weight-bold);
  background: linear-gradient(45deg, var(--primary-hover-color), var(--primary-color));
  color: #000; /* Texto preto para contraste */
  border: none; /* CTA não precisa de borda inicial */
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  /* Animação de fundo no hover */
  background-size: 200% auto;
  transition: background-position var(--transition-speed-medium) ease, var(--transition-default);
}

.button--cta:hover {
  background-position: right center; /* Muda a posição do gradiente */
  color: #000;
  box-shadow: var(--neon-box-shadow-intense);
  transform: translateY(-5px) scale(1.05);
}

/* Botão com Ícone */
.button--flex {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm); /* Espaço entre texto e ícone */
}

.button__icon {
  font-size: 1.3em; /* Ícone um pouco maior que o texto */
  transition: transform var(--transition-speed-medium) ease;
}

.button:hover .button__icon {
  transform: translateX(4px); /* Move o ícone para a direita */
}

/* Botão Grande */
.button--large {
    padding: var(--spacing-xl) var(--spacing-xxxl); /* Ainda maior */
    font-size: 1.2rem;
}

/* Efeitos Neon Específicos para Botões */
.button--neon-glow::before { /* Pseudo-elemento para o brilho */
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%; /* Maior que o botão */
  height: 250%; /* Maior que o botão */
  background: radial-gradient(circle, var(--primary-glow-color) 0%, transparent 70%);
  transform: translate(-50%, -50%) scale(0); /* Começa invisível */
  transition: transform var(--transition-speed-medium) ease;
  z-index: -1;
  opacity: 0;
}

.button--neon-glow:hover::before {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.button--neon-intense { /* CTA Final */
    border: 2px solid var(--primary-color); /* Adiciona borda neon */
    box-shadow: var(--neon-box-shadow-medium), 0 8px 25px rgba(0,0,0,0.3);
}

.button--neon-intense:hover {
    box-shadow: var(--neon-box-shadow-intense), 0 12px 35px rgba(0,0,0,0.4);
    transform: translateY(-6px) scale(1.08);
}

/* ==========================================================================
   2. PRELOADER
   ========================================================================== */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--dark-bg-primary); /* Mesmo fundo do site */
  z-index: var(--z-preloader);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  opacity: 1;
  visibility: visible;
  transition: opacity var(--transition-speed-medium) ease-in-out, visibility var(--transition-speed-medium) ease-in-out;
}

.preloader--hidden { /* Classe adicionada via JS */
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* Impede interação após escondido */
}

.preloader-inner {
  text-align: center;
  position: relative; /* Para posicionar elementos internos */
  z-index: 2; /* Acima da fumaça do preloader */
}

.preloader-logo {
  max-width: 150px;
  margin-bottom: var(--spacing-xl);
  animation: pulseLogo 2s infinite ease-in-out; /* Animação de pulso */
}

@keyframes pulseLogo {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 5px var(--primary-glow-color));
  }
  50% {
    transform: scale(1.05);
    filter: drop-shadow(0 0 15px var(--primary-glow-intense));
  }
}

.preloader-bar {
  width: 200px;
  height: 6px;
  background-color: var(--border-color-subtle);
  border-radius: 3px;
  margin: 0 auto var(--spacing-md);
  overflow: hidden; /* Para conter a barra de progresso */
  position: relative;
}

.preloader-bar::after { /* Barra de progresso animada */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--primary-hover-color), var(--primary-color));
  border-radius: 3px;
  animation: loadingBar 2.5s infinite linear; /* Animação da barra */
  box-shadow: var(--neon-box-shadow-light);
}

@keyframes loadingBar {
  0% { width: 0%; }
  25% { width: 40%; }
  50% { width: 75%; }
  75% { width: 90%; }
  100% { width: 100%; } /* Simula o carregamento */
}

.preloader-text {
  color: var(--primary-color);
  font-size: var(--normal-font-size);
  font-weight: var(--font-weight-medium);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: var(--spacing-md);
  text-shadow: var(--neon-text-shadow-light);
}

/* Efeito de Fumaça no Preloader (Opcional) */
.preloader-smoke {
  position: absolute;
  bottom: -50px; /* Começa abaixo */
  left: 50%;
  width: 300px;
  height: 200px;
  background: radial-gradient(ellipse at bottom, rgba(173, 255, 47, 0.1) 0%, transparent 60%);
  transform: translateX(-50%);
  opacity: 0;
  animation: smokeFadeUp 5s infinite ease-in-out;
  z-index: 1; /* Atrás dos elementos internos */
}

.preloader-smoke.smoke-layer-2 {
  width: 400px;
  height: 250px;
  animation-delay: 1s; /* Delay para segunda camada */
  opacity: 0;
  background: radial-gradient(ellipse at bottom, rgba(173, 255, 47, 0.05) 0%, transparent 70%);
}

@keyframes smokeFadeUp {
  0% { bottom: -80px; opacity: 0; }
  50% { bottom: -20px; opacity: 0.3; }
  100% { bottom: 20px; opacity: 0; }
}


/* ==========================================================================
   3. HEADER E NAVEGAÇÃO
   ========================================================================== */
.header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-header);
  background-color: transparent;
  transition: background-color var(--transition-speed-medium) ease-in-out,
              height var(--transition-speed-medium) ease-in-out,
              box-shadow var(--transition-speed-medium) ease-in-out;
  height: var(--header-height);
}

.header.scrolled {
  background-color: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  height: var(--header-height-scroll);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* --- BARRA DE NAVEGAÇÃO PRINCIPAL (.nav) --- */
.nav {
  height: 100%;
  /* ESTILO BASE (DESKTOP): Flexbox */
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg);
  /* Resetar estilos de Grid que podem ser aplicados no mobile */
  display: flex !important; /* Força Flex para Desktop como base */
  grid-template-columns: none; /* Remove colunas de grid */
}
 /* Ajuste de padding para nav em telas menores */
 @media screen and (max-width: 768px) {
    .nav {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
 }

/* --- LOGO (Estilos Base/Desktop) --- */
.nav__logo {
  /* Resetar estilos de Grid */
  grid-column: initial;
  justify-self: initial;
  /* Estilos Flex */
  flex-shrink: 0; /* Não encolhe */
  margin: 0;
  line-height: 0; /* Ajuda no alinhamento vertical */
}
.nav__logo img {
  max-height: calc(var(--header-height) - 2rem);
  width: auto;
  transition: max-height var(--transition-speed-medium) ease-in-out;
  display: block;
  vertical-align: middle;
}
.header.scrolled .nav__logo img {
  max-height: calc(var(--header-height-scroll) - 1.5rem);
}

/* --- CONTAINER DO MENU DESKTOP E PAINEL MOBILE (#nav-menu) --- */
/* Este container comporta a lista de links */
#nav-menu { /* Usando ID para especificidade */
  /* Base (Desktop): Comportamento normal no fluxo flex */
  display: block; /* Ou flex, dependendo do alinhamento interno desejado */
  position: static; /* Garante que não seja fixed/absolute no desktop */
  width: auto; /* Largura automática no desktop */
  height: auto;
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  border-left: none;
  box-shadow: none;
  /* Transição é aplicada apenas no mobile */
  transition: none;
}

/* LISTA DE LINKS (ul) DENTRO DE #nav-menu */
/* Estilo Base (Desktop) */
#nav-menu > .nav__list {
  display: flex; /* <<< VISÍVEL E HORIZONTAL NO DESKTOP */
  flex-direction: row;
  gap: var(--spacing-xl);
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
  /* Resetar estilos do painel mobile */
  height: auto;
  background: none;
  box-shadow: none;
  padding: 0;
  border: none;
}

/* LINKS (a) DENTRO DA LISTA */
/* Estilo Base (Desktop e Mobile Panel) */
.nav__link {
  color: var(--text-primary-color);
  font-weight: var(--font-weight-medium);
  position: relative;
  padding: var(--spacing-sm) 0;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: var(--small-font-size);
  text-decoration: none;
  display: inline-block;
}
.nav__link::after { /* Linha neon */
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  background-color: var(--primary-color);
  border-radius: 2px;
  transition: width var(--transition-speed-medium) ease;
  box-shadow: var(--neon-box-shadow-light);
}
.nav__link:hover::after,
.nav__link.active-link::after { width: 100%; }
.nav__link:hover,
.nav__link.active-link { color: var(--primary-color); text-shadow: var(--neon-text-shadow-light); }

/* --- CONTAINER DOS BOTÕES (.nav__buttons) --- */
/* Estilo Base (Desktop) */
.nav__buttons {
    display: flex; /* <<< VISÍVEL NO DESKTOP */
    align-items: center;
    gap: var(--spacing-md);
    /* Resetar Grid */
    grid-column: initial;
    justify-self: initial;
}

/* Botão Cadastrar/Login Específico */
/* Estilo Base (Desktop) */
.header__button {
    display: inline-flex !important; /* Garante visibilidade (tente sem !important) */
}

/* --- ÍCONES MOBILE (Toggle e Close) --- */
/* Estilo Base (Desktop) = Ocultos */
.nav__toggle { display: none; }
.nav__close { display: none; }

/* Estilos comuns para os ícones quando visíveis */
.nav__toggle,
.nav__close {
    font-size: 1.8rem;
    color: var(--primary-color);
    cursor: pointer;
    transition: transform var(--transition-speed-fast) ease, color var(--transition-speed-fast) ease;
    z-index: var(--z-high) + 1; /* Acima do painel */
    padding: var(--spacing-sm);
    background: none;
    border: none;
    margin: 0;
}
.nav__toggle:hover,
.nav__close:hover {
  transform: rotate(90deg) scale(1.1);
  color: var(--primary-hover-color);
}


/* ================================================= */
/* === AJUSTES ESPECÍFICOS PARA MOBILE E TABLET === */
/* ================================================= */
@media screen and (max-width: 992px) { /* Ponto de quebra */

    /* --- Layout da Barra Principal (.nav) no Mobile --- */
    .nav {
      display: grid !important; /* <<< MUDA PARA GRID NO MOBILE (Forçado) */
      grid-template-columns: 50px 1fr 50px; /* Ajuste '50px' */
      align-items: center;
      padding-left: var(--spacing-sm);
      padding-right: var(--spacing-sm);
      /* Remover justify-content do flex */
      justify-content: initial;
    }

    /* --- Logo no Mobile --- */
    .nav__logo {
      grid-column: 2 / 3;     /* Coluna Central */
      justify-self: center; /* Centraliza */
      line-height: 0;
      display: inline-block;
    }
    .nav__logo img {
      max-height: calc(var(--header-height) - 1.8rem); /* Logo Maior */
    }
    .header.scrolled .nav__logo img {
      max-height: calc(var(--header-height-scroll) - 1.5rem); /* Logo Maior Scroll */
    }

    /* --- Container dos Botões/Toggle no Mobile --- */
    .nav__buttons { /* Container que segura o toggle (e o botão escondido) */
       display: flex; /* Mantém flex interno */
       grid-column: 3 / 4;    /* Coluna Direita */
       justify-self: end;   /* Alinha container à direita */
       align-items: center;
       gap: 0;
       padding: 0;
    }

    /* Esconde o botão Cadastrar/Login no Mobile */
    .header__button {
       display: none !important;
    }

    /* Mostra o botão Hamburger no Mobile */
    .nav__toggle {
       display: block !important; /* <<< MOSTRA HAMBURGER */
       margin: 0;
    }

    /* --- Configuração do Painel Lateral Mobile (#nav-menu) --- */
    #nav-menu { /* O painel em si */
        display: flex !important; /* <<< Garante que o painel possa ser mostrado */
        flex-direction: column;
        position: fixed;
        top: 0;
        right: -100%; /* Começa fora da tela */
        width: 70%;
        max-width: 350px;
        height: 100%;
        background-color: rgba(18, 18, 18, 0.9);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        z-index: var(--z-high);
        padding: var(--spacing-xxxl) var(--spacing-xl);
        transition: right var(--transition-speed-medium) ease-in-out; /* Só transição aqui */
        border-left: 2px solid var(--primary-color);
        box-shadow: -10px 0 30px rgba(0,0,0,0.6);
    }

    /* Mostra o Painel Lateral */
    #nav-menu.show-menu {
        right: 0;
    }

    /* ESCONDE a lista de links que seria do DESKTOP */
    /* Adapte o seletor se sua estrutura HTML for diferente */
    /* Se #nav-menu contém APENAS a lista mobile, esta regra não é necessária */
     /* Removendo a regra que escondia a lista de forma genérica */
     /* .nav > #nav-menu > .nav__list { display: none; } */ /* <<< REMOVIDA/COMENTADA */

    /* --- Lista de Links DENTRO do Painel Mobile --- */
    #nav-menu > .nav__list { /* Lista DENTRO do painel */
        display: flex !important; /* <<< MOSTRA A LISTA AQUI DENTRO */
        flex-direction: column;
        gap: var(--spacing-xl);
        text-align: center;
        width: 100%;
        list-style: none;
        margin: 0;
        padding: 0;
        /* Herdará outros estilos de .nav__list se não sobrescritos */
    }

    /* Links DENTRO do painel */
    #nav-menu .nav__link {
        display: block;
        font-size: var(--h3-font-size);
        font-weight: var(--font-weight-semibold);
        padding: var(--spacing-md) 0;
        color: var(--text-primary-color);
    }
    /* Ajustes da linha neon e hover/active para links no painel */
    #nav-menu .nav__link::after { height: 4px; bottom: -5px; }
    #nav-menu .nav__link:hover,
    #nav-menu .nav__link.active-link { color: var(--primary-color); text-shadow: var(--neon-text-shadow-light); }
    #nav-menu .nav__link:hover::after,
    #nav-menu .nav__link.active-link::after { width: 60%; }

    /* Botão 'X' (Fechar) DENTRO do painel mobile */
    .nav__close {
        display: block !important; /* <<< MOSTRA BOTÃO 'X' */
        position: absolute; /* Posicionamento dentro do painel */
        top: var(--spacing-lg);
        right: var(--spacing-xl);
        /* Outros estilos base já definidos */
    }

} /* Fim da Media Query Mobile (max-width: 992px) */

/* ==========================================================================
   4. SEÇÃO HERO (BANNER PRINCIPAL)
   ========================================================================== */
   .hero {
    height: 100vh; /* Altura total da tela */
    min-height: 700px; /* Altura mínima */
    display: flex;
    align-items: center; /* Alinha conteúdo verticalmente */
    padding-top: var(--header-height); /* Evita sobreposição com header */
    color: var(--text-primary-color);
    position: relative;
    overflow: hidden; /* Conter efeitos */
  }
  
  .hero__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-back); /* Atrás do conteúdo */
  }
  
.hero__bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Cobre toda a área */
  /* Ajusta a posição horizontal da imagem */
  /* 'center center' é o padrão. Valores menores que 50% movem para a esquerda */
  object-position: 35% center; /* <<< AJUSTE AQUI (Ex: 35% - experimente valores) */
  /* Outras opções: 'left center', '40% center', '30% center' etc. */
  filter: brightness(0.4); /* Mantém o escurecimento */
}
  
  .hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradiente escuro sutil para melhorar contraste */
    background: linear-gradient(to bottom, rgba(10, 10, 10, 0.5) 0%, rgba(10, 10, 10, 0.8) 70%, var(--dark-bg-primary) 100%);
    z-index: 1;
  }
  
  .hero__container {
    position: relative; /* Para que o conteúdo fique acima do overlay/fundo */
    z-index: var(--z-base);
    display: grid; /* Usar grid para layout */
    align-items: center;
    /* Grid de 1 coluna por padrão (Mobile First) */
    grid-template-columns: 1fr;
    text-align: center; /* Centraliza texto por padrão no mobile */
    width: 100%; /* Garante que o container use a largura disponível */
  }
  
  .hero__title {
    font-size: var(--h1-font-size);
    margin-bottom: var(--spacing-md);
    font-weight: var(--font-weight-black);
    line-height: 1.1;
    /* Efeito Neon mais intenso no título */
    text-shadow: 0 0 10px var(--primary-glow-color),
                 0 0 25px var(--primary-glow-color),
                 0 0 50px var(--primary-glow-intense);
  }
  
  .hero__subtitle {
    font-size: var(--h3-font-size);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary-color);
    margin-bottom: var(--spacing-xl);
    line-height: 1.5;
  }
  
  .hero__description {
    font-size: var(--normal-font-size);
    color: var(--text-secondary-color);
    margin-bottom: var(--spacing-xxl);
    max-width: 550px; /* Limita largura do parágrafo no mobile/centro */
    margin-left: auto; /* Centraliza no mobile */
    margin-right: auto; /* Centraliza no mobile */
  }
  
  /* Botão CTA no Hero */
  .hero__container .button--cta {
    margin-bottom: var(--spacing-xl); /* Espaçamento padrão */
  }
  
  /* Elementos de Confiança (Seguro, Pix, etc.) */
  .hero__trust-elements {
    display: flex;
    flex-wrap: wrap; /* Quebra linha se necessário */
    justify-content: center; /* Centraliza no mobile */
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
    font-size: var(--small-font-size);
    color: var(--text-secondary-color);
  }
  
  .hero__trust-elements span {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
  }
  
  .hero__trust-elements i {
    color: var(--primary-color);
    font-size: 1.2em; /* Ícone um pouco maior */
    text-shadow: var(--neon-text-shadow-light);
  }
  
  /* Indicador de Scroll Down */
  .scroll-down-indicator {
    position: absolute;
    bottom: var(--spacing-xl);
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-medium);
    color: var(--primary-color);
    text-align: center;
    animation: bounceUpDown 2s infinite ease-in-out;
    opacity: 0.7;
    transition: opacity var(--transition-speed-medium) ease;
  }
  
  .scroll-down-indicator:hover {
      opacity: 1;
      animation-play-state: paused; /* Pausa animação no hover */
  }
  
  .scroll-down-indicator i {
    font-size: 2rem;
    display: block;
  }
  
  .scroll-down-indicator span {
    font-size: var(--smaller-font-size);
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
  }
  
  @keyframes bounceUpDown {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, -10px); }
  }
  
  
  /* ============================================= */
  /* === AJUSTES HERO PARA DESKTOP (Telas Maiores) === */
  /* ============================================= */
  @media screen and (min-width: 992px) {
  
    .hero__container {
      /* Muda para 2 colunas no desktop */
      grid-template-columns: 1fr 1fr; /* Duas colunas iguais */
      /* gap: var(--spacing-xxl); */ /* Espaço opcional entre colunas */
      text-align: left; /* Alinhamento base do container muda para esquerda */
    }
  
    .hero__data {
       /* Coloca este bloco na segunda coluna (direita) */
      grid-column: 2 / 3;
      /* Garante alinhamento à esquerda dentro de sua coluna */
      text-align: left;
      /* Remove a largura máxima anterior para ocupar a coluna */
      max-width: 100%;
      /* Remove margens automáticas que centralizavam */
      margin-left: 0;
      margin-right: 0;
    }
  
    .hero__description {
      /* Garante que a descrição também não tenha margens automáticas */
      margin-left: 0;
      margin-right: 0;
      /* Ajusta a largura máxima se necessário para o novo layout */
      max-width: 100%;
    }
  
    /* Botão CTA no Hero no Desktop */
    .hero__container .button--cta {
       margin-bottom: var(--spacing-xl); /* Mantém ou ajusta espaçamento */
    }
  
    /* Elementos de Confiança no Desktop */
    .hero__trust-elements {
      /* Alinha os elementos à esquerda dentro da coluna da direita */
      justify-content: flex-start;
    }
  
  } /* Fim da Media Query min-width: 992px */

/* ==========================================================================
   5. EFEITOS VISUAIS (Fumaça, Neon Grid, etc.)
   ========================================================================== */

/* -------------------- Efeito Fumaça (Genérico) -------------------- */
/* Use estas classes nos divs placeholders do HTML */
.smoke-effect {
  position: absolute;
  bottom: -20%; /* Começa fora da área visível */
  left: 0;
  width: 100%;
  height: 50%; /* Altura da fumaça */
  background: radial-gradient(ellipse at bottom, rgba(173, 255, 47, 0.05) 0%, transparent 70%);
  opacity: 0;
  pointer-events: none; /* Não interfere com cliques */
  z-index: 2; /* Acima do overlay, abaixo do conteúdo */
  animation: subtleSmoke 15s infinite linear alternate; /* Animação lenta */
}

/* Variações de Fumaça */
.smoke-effect.smoke-layer-1 {
  animation-duration: 15s;
  background: radial-gradient(ellipse at 50% 100%, rgba(173, 255, 47, 0.08) 0%, transparent 60%);
  height: 60%;
}

.smoke-effect.smoke-layer-2 {
  animation-duration: 20s;
  animation-delay: 2s; /* Delay para movimento diferente */
  background: radial-gradient(ellipse at 30% 100%, rgba(173, 255, 47, 0.04) 0%, transparent 75%);
  height: 70%;
  left: -10%; /* Posição diferente */
  width: 120%;
}

.smoke-effect.smoke-layer-3 {
  animation-duration: 25s;
  animation-delay: 4s;
  background: radial-gradient(ellipse at 70% 100%, rgba(173, 255, 47, 0.06) 0%, transparent 65%);
  height: 55%;
  left: -5%;
  width: 110%;
}

/* Fumaça mais densa para algumas seções */
.smoke-layer-dense {
    height: 70%;
    background: radial-gradient(ellipse at bottom, rgba(173, 255, 47, 0.15) 0%, transparent 70%);
    animation-duration: 12s;
}

/* Fumaça para seções específicas */
.smoke-layer-testimonial-1 {
    height: 60%;
    background: radial-gradient(ellipse at bottom, rgba(255, 255, 255, 0.05) 0%, transparent 70%); /* Fumaça branca sutil */
    animation-duration: 18s;
}
.smoke-layer-cta-1 {
    height: 80%;
    background: radial-gradient(ellipse at bottom, rgba(173, 255, 47, 0.2) 0%, transparent 65%);
    animation-duration: 10s;
}
.smoke-layer-cta-2 {
    height: 70%;
    background: radial-gradient(ellipse at 20% 100%, rgba(173, 255, 47, 0.1) 0%, transparent 70%);
    animation-duration: 14s;
    animation-delay: 1s;
}


@keyframes subtleSmoke {
  0% {
    opacity: 0;
    transform: translateY(10%) scale(1);
  }
  50% {
    opacity: 0.6; /* Opacidade máxima da fumaça */
    transform: translateY(0) scale(1.1) rotate(-2deg); /* Leve rotação e escala */
  }
  100% {
    opacity: 0;
    transform: translateY(-10%) scale(1.05) rotate(2deg);
  }
}

/* -------------------- Efeito Neon Grid -------------------- */
.neon-grid-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(to right, rgba(173, 255, 47, 0.05) 1px, transparent 1px), /* Linhas verticais */
    linear-gradient(to bottom, rgba(173, 255, 47, 0.05) 1px, transparent 1px); /* Linhas horizontais */
  background-size: 50px 50px; /* Tamanho da célula da grade */
  z-index: 1; /* Abaixo da fumaça, acima do overlay */
  pointer-events: none;
  opacity: 0.5;
  animation: gridPulse 10s infinite linear alternate;
}

@keyframes gridPulse {
    0% { opacity: 0.3; background-size: 50px 50px; }
    50% { opacity: 0.6; background-size: 55px 55px; } /* Leve mudança de tamanho */
    100% { opacity: 0.3; background-size: 50px 50px; }
}

/* -------------------- Efeito Neon Pulse (Para CTA) -------------------- */
.neon-pulse-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background-color: var(--primary-color);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    animation: neonPulseExpand 4s infinite ease-out;
}

@keyframes neonPulseExpand {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
        box-shadow: 0 0 10px 5px var(--primary-glow-color), 0 0 20px 10px var(--primary-glow-color);
    }
    100% {
        transform: translate(-50%, -50%) scale(30); /* Expande bastante */
        opacity: 0;
        box-shadow: 0 0 50px 25px rgba(173, 255, 47, 0), 0 0 100px 50px rgba(173, 255, 47, 0);
    }
}

/* -------------------- Linhas Decorativas Futuristas -------------------- */
.decorative-lines {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: var(--z-base);
    overflow: hidden;
}

.decorative-lines::before,
.decorative-lines::after {
    content: '';
    position: absolute;
    background-color: rgba(173, 255, 47, 0.1); /* Cor da linha */
    box-shadow: var(--neon-box-shadow-light);
    opacity: 0.5;
}

/* Estilo 1 (Ex: seção Sobre) */
.lines-style-1::before {
    width: 150px;
    height: 2px;
    top: 20%;
    left: -50px;
    transform: rotate(-45deg);
    animation: lineAnim1 15s infinite linear alternate;
}
.lines-style-1::after {
    width: 200px;
    height: 3px;
    bottom: 15%;
    right: -70px;
    transform: rotate(30deg);
    animation: lineAnim2 18s infinite linear alternate;
}

/* Estilo 2 (Ex: seção Como Funciona) */
.lines-style-2::before {
    width: 3px;
    height: 180px;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    animation: lineAnim3 12s infinite linear alternate;
}
.lines-style-2::after {
    width: 4px;
    height: 220px;
    bottom: 10%;
    right: 8%;
    transform: rotate(10deg);
     animation: lineAnim4 16s infinite linear alternate;
}

@keyframes lineAnim1 { 0% { transform: translate(-50px, 0) rotate(-45deg); } 100% { transform: translate(50px, -20px) rotate(-50deg); } }
@keyframes lineAnim2 { 0% { transform: translate(70px, 0) rotate(30deg); } 100% { transform: translate(-70px, 30px) rotate(35deg); } }
@keyframes lineAnim3 { 0% { transform: translateY(-50%) scaleY(0.8); } 100% { transform: translateY(-50%) scaleY(1.2); } }
@keyframes lineAnim4 { 0% { transform: rotate(10deg) scaleY(1.1); } 100% { transform: rotate(15deg) scaleY(0.9); } }

/* ==========================================================================
   6. SEÇÃO SOBRE A ARENA
   ========================================================================== */
.about {
    background-color: var(--dark-bg-secondary); /* Fundo ligeiramente diferente */
}

.about__container {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Grid responsivo */
  gap: var(--spacing-xl);
}

.about__card {
  background-color: var(--dark-bg-tertiary);
  padding: var(--spacing-xl);
  border-radius: 15px; /* Bordas arredondadas */
  text-align: center;
  border: 1px solid var(--border-color-subtle);
  transition: var(--transition-default), transform var(--transition-speed-medium) ease;
  position: relative; /* Para o glow */
  overflow: hidden; /* Conter o glow */
}

.about__card:hover {
  transform: translateY(-10px) scale(1.03);
  border-color: var(--primary-color);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5), var(--neon-box-shadow-medium);
}

/* Efeito de borda neon no hover (Opcional, se card-border-glow não for usado) */
/* .about__card:hover { ... border-image: linear-gradient(...) ... } */

/* Glow interno sutil */
.about__card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(173, 255, 47, 0.05) 0%, transparent 40%);
    transform: scale(0);
    transition: transform 0.8s ease;
    z-index: 0;
    opacity: 0;
}

.about__card:hover::before {
    transform: scale(1);
    opacity: 1;
}

.about__card-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--dark-bg-secondary), var(--dark-bg-tertiary));
  border-radius: 50%;
  margin: 0 auto var(--spacing-lg);
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid var(--border-color-medium);
  position: relative; /* Para z-index */
  z-index: 1; /* Acima do ::before */
  transition: var(--transition-default);
}

.about__card:hover .about__card-icon {
    border-color: var(--primary-color);
    background: linear-gradient(135deg, var(--primary-hover-color), var(--primary-color));
    box-shadow: var(--neon-box-shadow-light);
}

/* Estilo para usar IMAGENS como ícones */
.about__card-img-icon {
    width: 60%; /* Ajustar tamanho da imagem dentro do círculo */
    height: 60%;
    object-fit: contain;
    transition: transform var(--transition-speed-medium) ease;
}

.about__card:hover .about__card-img-icon {
    transform: scale(1.1) rotate(-5deg);
}

.about__card-title {
  font-size: var(--h3-font-size);
  color: var(--text-primary-color);
  margin-bottom: var(--spacing-sm);
  position: relative;
  z-index: 1;
}

.about__card-description {
  font-size: var(--small-font-size);
  color: var(--text-secondary-color);
  line-height: 1.7;
  margin-bottom: 0; /* Remover margem do último parágrafo */
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   7. SEÇÃO COMO FUNCIONA
   ========================================================================== */
.how-it-works {
  background-color: var(--dark-bg-primary); /* Volta pro fundo principal */
   /* Adicionar uma textura sutil ou gradiente aqui se quiser */
  /* background-image: linear-gradient(rgba(10,10,10,0.9), rgba(10,10,10,0.9)), url('imageslp/tech-pattern.png'); */
}

.how-it-works__container {
  display: flex; /* Usar flexbox para alinhar horizontalmente (desktop) */
  flex-wrap: wrap; /* Quebra linha no mobile */
  justify-content: space-between; /* Espaçar itens */
  align-items: flex-start; /* Alinhar ao topo */
  position: relative; /* Para as linhas conectoras */
  gap: var(--spacing-lg); /* Espaço entre itens quando quebrar linha */
}

.how-it-works__step {
  flex: 1; /* Cada passo ocupa espaço igual (desktop) */
  min-width: 220px; /* Largura mínima antes de quebrar */
  text-align: center;
  padding: var(--spacing-lg);
  position: relative; /* Para o número */
  margin-bottom: var(--spacing-xl); /* Espaço abaixo no mobile */
}

/* Números Neon Circulares */
.how-it-works__number {
    position: absolute;
    top: -25px; /* Posição acima do card */
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--dark-bg-tertiary);
    border: 3px solid var(--primary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: var(--z-medium);
    box-shadow: var(--neon-box-shadow-medium);
    margin-bottom: var(--spacing-xl); /* Espaço empurrando o conteúdo */
}

.how-it-works__number span {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    text-shadow: var(--neon-text-shadow-light);
}

/* Conteúdo do Passo */
.how-it-works__content {
    background-color: var(--dark-bg-secondary);
    padding: var(--spacing-xxl) var(--spacing-lg) var(--spacing-lg); /* Padding maior em cima por causa do número */
    border-radius: 10px;
    border: 1px solid var(--border-color-subtle);
    margin-top: 25px; /* Espaço para o número */
    transition: var(--transition-default);
}

.how-it-works__step:hover .how-it-works__content {
    border-color: var(--primary-hover-color);
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}

.how-it-works__icon {
  font-size: 3rem; /* Ícone grande */
  color: var(--primary-color);
  margin-bottom: var(--spacing-md);
  display: inline-block; /* Para aplicar margem */
  text-shadow: var(--neon-text-shadow-medium);
  transition: transform var(--transition-speed-medium) ease;
}

.how-it-works__step:hover .how-it-works__icon {
    transform: scale(1.1) rotate(-5deg);
}

.how-it-works__title {
  font-size: 1.3rem;
  color: var(--text-primary-color);
  margin-bottom: var(--spacing-sm);
}

.how-it-works__description {
  font-size: var(--small-font-size);
  color: var(--text-secondary-color);
  line-height: 1.6;
  margin-bottom: 0;
}

/* Linhas Conectoras (Visíveis apenas em Desktop) */
.connector-line {
  display: none; /* Escondido por padrão */
}

@media screen and (min-width: 992px) {
  .how-it-works__container {
    flex-wrap: nowrap; /* Impede quebra de linha no desktop */
    gap: 0; /* Remover gap do flex, usar margens se necessário */
    align-items: stretch; /* Faz os cards terem a mesma altura */
  }

  .how-it-works__step {
      margin-bottom: 0; /* Remover margem inferior no desktop */
      padding-left: var(--spacing-md);
      padding-right: var(--spacing-md);
  }

  .connector-line {
    display: block; /* Mostra a linha no desktop */
    flex-grow: 1; /* Ocupa espaço entre os steps */
    height: 4px; /* Espessura da linha */
    background: linear-gradient(90deg, var(--border-color-subtle), var(--primary-color), var(--border-color-subtle));
    margin: 75px var(--spacing-sm) 0; /* Posição vertical (ajustar conforme altura do número) e horizontal */
    position: relative;
    top: 0; /* Ajustar se necessário */
    opacity: 0.5;
    box-shadow: 0 0 8px var(--primary-glow-color);
    animation: flowLine 5s infinite linear;
  }

  @keyframes flowLine {
      0% { background-position: -200px 0; } /* Ajustar distância */
      100% { background-position: 200px 0; }
  }
}

/* Ajustes finos para alinhamento em telas médias */
@media screen and (min-width: 768px) and (max-width: 991px) {
    .how-it-works__container {
        grid-template-columns: repeat(2, 1fr); /* 2 colunas */
        gap: var(--spacing-xl);
    }
     /* Esconder linhas conectoras no modo 2 colunas */
     .connector-line { display: none; }
}

/* ==========================================================================
   8. SEÇÃO JOGOS DISPONÍVEIS
   ========================================================================== */
.games {
    background-color: var(--dark-bg-secondary);
}

.games__container {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Grid responsivo para jogos */
  gap: var(--spacing-xl);
}

.game-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden; /* Para conter overlay e imagem */
  border: 2px solid transparent; /* Borda inicial transparente */
  transition: var(--transition-default), transform var(--transition-speed-medium) ease;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.game-card:hover {
  transform: scale(1.05) translateY(-8px);
  border-color: var(--primary-color);
  box-shadow: 0 12px 30px rgba(0,0,0,0.6), var(--neon-box-shadow-medium);
}

.game-card__image {
  width: 100%;
  height: 350px; /* Altura fixa para os cards de jogo */
  object-fit: cover;
  display: block;
  transition: transform var(--transition-speed-medium) ease, filter var(--transition-speed-medium) ease;
}

.game-card:hover .game-card__image {
  transform: scale(1.1); /* Zoom na imagem */
  filter: brightness(0.7); /* Escurece um pouco a imagem */
}

.game-card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.95) 0%, rgba(10, 10, 10, 0.7) 60%, transparent 100%);
  padding: var(--spacing-lg);
  color: var(--text-primary-color);
  opacity: 1; /* Começa visível */
  transform: translateY(0); /* Começa na posição normal */
  transition: opacity var(--transition-speed-medium) ease, transform var(--transition-speed-medium) ease;
}

/* Opcional: Esconder overlay e mostrar no hover */
/* .game-card__overlay { opacity: 0; transform: translateY(100%); } */
/* .game-card:hover .game-card__overlay { opacity: 1; transform: translateY(0); } */

.game-card__title {
  font-size: 1.4rem;
  margin-bottom: var(--spacing-xs);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary-color);
}

.game-card:hover .game-card__title {
    color: var(--primary-color);
    text-shadow: var(--neon-text-shadow-light);
}

/* Ícone da plataforma (PC/Console) */
.game-card__platform-icon {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.7);
    background-color: rgba(0, 0, 0, 0.5);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 5px;
}

/* Estilo para jogos "Em Breve" */
.game-card--placeholder .game-card__image {
    filter: grayscale(80%) brightness(0.6); /* Imagem dessaturada e escura */
}
.game-card--placeholder .game-card__overlay {
    /* Pode adicionar um overlay mais forte ou texto específico */
}
.game-card__coming-soon {
    font-size: var(--small-font-size);
    color: var(--primary-color);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.games__more {
    text-align: center;
    margin-top: var(--spacing-xxl);
    font-size: var(--normal-font-size);
    color: var(--text-secondary-color);
}

/* ==========================================================================
   9. SEÇÃO DEPOIMENTOS
   ========================================================================== */
.testimonials {
  position: relative;
  /* Background será aplicado via .testimonials__background */
}

.testimonials__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-back);
}

.testimonials__bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.3); /* Escurecer bastante o fundo */
}

.testimonials__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Overlay escuro para garantir legibilidade */
  background-color: rgba(10, 10, 10, 0.7);
  z-index: 1;
}

/* Ajustar cores do header para esta seção */
.testimonials .section__header {
  position: relative; /* Acima do overlay */
  z-index: var(--z-base);
}
.testimonials .section__subtitle {
  color: var(--primary-hover-color); /* Ajuste para fundo escuro */
}
.testimonials .section__title {
  color: var(--text-primary-color);
}
/* Ajustar cor da linha abaixo do título se existir */
/* .testimonials .section__title::after { background: var(--primary-hover-color); } */

.testimonials__container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-xl);
  position: relative; /* Acima do overlay */
  z-index: var(--z-base);
  /* Para JS Slider: configurar overflow, etc. */
}

.testimonial-card {
  background-color: rgba(30, 30, 30, 0.8); /* Fundo semi-transparente */
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  padding: var(--spacing-xl);
  border-radius: 15px;
  border: 1px solid var(--border-color-subtle);
  border-left: 5px solid var(--primary-color); /* Destaque lateral neon */
  box-shadow: 0 8px 25px rgba(0,0,0,0.4);
  transition: var(--transition-default);
  position: relative; /* Para glow alternativo */
}

.testimonial-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-hover-color);
    border-left-color: var(--primary-hover-color);
    box-shadow: 0 12px 35px rgba(0,0,0,0.6), 0 0 15px var(--primary-glow-color);
}

/* Glow Alternativo (se .card-border-glow-alt for usado) */
/* .card-border-glow-alt { ... } */

.testimonial-card__rating {
  margin-bottom: var(--spacing-md);
  color: var(--primary-color); /* Estrelas neon */
  font-size: 1.2rem;
}

.testimonial-card__rating i {
    text-shadow: var(--neon-text-shadow-light);
}

.testimonial-card__quote {
  font-size: var(--normal-font-size);
  font-style: italic;
  color: var(--text-primary-color);
  margin-bottom: var(--spacing-lg);
  position: relative;
  padding-left: var(--spacing-lg); /* Espaço para aspas */
}

.testimonial-card__quote::before { /* Aspas decorativas */
  content: '\201C'; /* Aspas esquerdas */
  font-family: Georgia, serif;
  font-size: 3rem;
  color: var(--primary-color);
  opacity: 0.3;
  position: absolute;
  left: -5px;
  top: -10px;
}

.testimonial-card__author {
  display: block;
  font-style: normal;
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary-color);
  font-size: var(--small-font-size);
  text-align: right;
}

.testimonial-card__author .author-name {
    color: var(--text-primary-color);
    font-weight: var(--font-weight-bold);
}
.testimonial-card__author .author-game {
    display: block; /* Jogo em linha separada */
    font-size: var(--smaller-font-size);
    color: var(--primary-color);
    opacity: 0.8;
}

/* ==========================================================================
   10. SEÇÃO CHAMADA FINAL (CTA)
   ========================================================================== */
.cta {
  background: linear-gradient(135deg, var(--dark-bg-tertiary) 0%, var(--dark-bg-secondary) 50%, var(--dark-bg-primary) 100%);
  padding-top: var(--spacing-xxxl);
  padding-bottom: var(--spacing-xxxl);
  text-align: center;
  position: relative; /* Para efeitos */
  overflow: hidden;
}

.cta__background { /* Div separada para os efeitos de fundo */
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0; /* Atrás do conteúdo */
}

.cta__container {
    position: relative; /* Acima do fundo */
    z-index: 1;
}

.cta__title {
  font-size: clamp(1.8rem, 5vw + 1rem, 3.5rem); /* Tamanho grande e fluido */
  color: var(--text-primary-color);
  margin-bottom: var(--spacing-md);
  font-weight: var(--font-weight-extrabold);
  line-height: 1.2;
}

.cta__description {
  font-size: 1.1rem;
  color: var(--text-secondary-color);
  max-width: 600px;
  margin: 0 auto var(--spacing-xxl); /* Centraliza e adiciona espaço */
  line-height: 1.7;
}

/* Botão CTA Grande e Intenso */
.cta__container .button--cta {
    /* Já estilizado como .button--large e .button--neon-intense */
    /* Pode adicionar mais estilos específicos aqui se necessário */
}

/* ==========================================================================
   11. FOOTER (RODAPÉ)
   ========================================================================== */
.footer {
  background-color: var(--dark-bg-primary); /* Fundo escuro padrão */
  /* A imagem de fundo será aplicada via CSS inline ou classe específica se necessário */
  /* background: url('imageslp/background_footer.png') no-repeat center/cover; */
  padding: var(--spacing-xxxl) 0 var(--spacing-lg); /* Mais padding em cima */
  color: var(--text-secondary-color);
  position: relative; /* Para efeitos */
  border-top: 2px solid var(--border-color-subtle); /* Linha sutil no topo */
}

/* Efeito Neon no Topo do Footer */
.footer::before {
    content: '';
    position: absolute;
    top: -2px; /* Acima da borda */
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    opacity: 0.5;
    box-shadow: var(--neon-box-shadow-medium);
    z-index: 1;
}

.footer__container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Grid responsivo */
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
  text-align: center; /* Centraliza por padrão */
}

@media screen and (min-width: 768px) {
  .footer__container {
    text-align: left; /* Alinha à esquerda no desktop */
  }
}

.footer__section {
  margin-bottom: var(--spacing-lg);
}

.footer__title {
  font-size: 1.1rem;
  color: var(--primary-color); /* Títulos do footer em neon */
  margin-bottom: var(--spacing-lg);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: var(--neon-text-shadow-light);
}

.footer__link {
  color: var(--text-secondary-color);
  display: block; /* Links em linhas separadas */
  margin-bottom: var(--spacing-sm);
  font-size: var(--small-font-size);
  transition: var(--transition-default);
}

.footer__link:hover {
  color: var(--primary-hover-color);
  text-decoration: underline;
  transform: translateX(5px);
}

.footer__email {
    font-weight: var(--font-weight-medium);
    color: var(--text-primary-color); /* Email destacado */
}
.footer__email:hover {
    color: var(--primary-hover-color);
}

/* Estilos específicos para as redes sociais (usando o HTML fornecido) */
.socials {
  margin-top: 0; /* Resetar margem padrão se necessário */
}

.socials a {
  display: inline-block;
  margin: 0 var(--spacing-sm);
  opacity: 0.8;
  transition: var(--transition-default), transform var(--transition-speed-fast) ease;
}

.socials img {
  width: 35px; /* Tamanho dos ícones sociais */
  height: 35px;
  vertical-align: middle;
  filter: grayscale(50%); /* Ícones levemente dessaturados */
  transition: var(--transition-default);
}

.socials a:hover {
  opacity: 1;
  transform: scale(1.2) rotate(5deg);
}

.socials a:hover img {
    filter: grayscale(0%); /* Cor total no hover */
    filter: drop-shadow(0 0 5px var(--primary-glow-color));
}

/* Links do footer (termos, privacidade, etc) */
.footer-links {
  margin-top: 0;
}

.footer-links a {
  /* Usa o .footer__link já definido */
}

/* Seção Inferior do Footer */
.footer__bottom {
  border-top: 1px solid var(--border-color-subtle);
  padding-top: var(--spacing-xl);
  margin-top: var(--spacing-xl);
  text-align: center;
}

.copyright {
  font-size: var(--smaller-font-size);
  color: var(--text-muted-color);
  margin-bottom: var(--spacing-sm);
}

.footer__legal-notice {
    font-size: var(--smaller-font-size);
    color: var(--text-muted-color);
    max-width: 600px;
    margin: 0 auto; /* Centraliza */
    line-height: 1.5;
}

/* ==========================================================================
   12. BOTÃO SCROLL UP (VOLTAR AO TOPO)
   ========================================================================== */
.scrollup {
  position: fixed;
  right: 1.5rem;
  bottom: -30%; /* Começa escondido abaixo */
  background-color: var(--primary-color);
  color: var(--dark-bg-primary);
  padding: var(--spacing-sm) var(--spacing-md); /* Padding quadrado */
  border-radius: 8px; /* Quadrado com cantos arredondados */
  z-index: var(--z-high);
  transition: bottom var(--transition-speed-medium) ease, transform var(--transition-speed-medium) ease, box-shadow var(--transition-speed-medium) ease;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid var(--primary-color);
}

.scrollup__icon {
  font-size: 1.5rem;
}

.scrollup:hover {
  background-color: var(--primary-hover-color);
  transform: translateY(-5px);
  box-shadow: var(--neon-box-shadow-medium);
}

/* Classe 'show-scroll' adicionada via JS */
.show-scroll {
  bottom: 2rem; /* Mostra o botão */
}

/* ==========================================================================
   13. ANIMAÇÕES GLOBAIS (Além das já definidas)
   ========================================================================== */

/* Keyframes adicionais podem ser adicionados aqui */
/* Exemplo: Animação de fade in genérica */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Exemplo: Animação de slide in */
@keyframes slideInUp {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ==========================================================================
   14. RESPONSIVIDADE DETALHADA (Ajustes Finos)
   ========================================================================== */

/* -------------------- Telas Extra Grandes (Desktops Maiores) >= 1400px -------------------- */
@media screen and (min-width: 1400px) {
  .container {
    max-width: 1350px; /* Container um pouco maior */
  }
  /* Aumentar fontes base ligeiramente */
  :root {
     --h1-font-size: 5rem;
     --h2-font-size: 3.5rem;
     /* --normal-font-size: 1.1rem; */
  }
   /* Espaços maiores entre seções */
   .section {
       padding-top: 7rem;
       padding-bottom: 7rem;
   }
   .about__container, .games__container, .testimonials__container, .footer__container {
       gap: var(--spacing-xxl); /* Mais espaço entre cards */
   }
}

/* -------------------- Telas de Tablet (Portrait e Landscape) >= 768px -------------------- */
@media screen and (min-width: 768px) {
  body {
    /* Fontes podem ser ligeiramente maiores que no mobile */
  }
  .section__title {
      /* Títulos maiores */
  }
   /* Ajustar grid para 2 colunas onde fizer sentido */
   /* .about__container { grid-template-columns: repeat(2, 1fr); } */
   /* .testimonials__container { grid-template-columns: repeat(2, 1fr); } */
}

/* -------------------- Telas Pequenas (Mobile Landscape) >= 576px -------------------- */
@media screen and (min-width: 576px) {
   .hero__title {
       /* Ajustar tamanho se necessário */
   }
   .hero__subtitle {
       /* Ajustar tamanho se necessário */
   }
    .how-it-works__container {
       /* Pode voltar a ter 2 colunas aqui */
       /* grid-template-columns: repeat(2, 1fr); */
    }
}

/* -------------------- Telas Muito Pequenas (Mobile Portrait) < 576px -------------------- */
@media screen and (max-width: 575px) {
   /* Reduzir fontes base e títulos */
   :root {
     --h1-font-size: 2.2rem;
     --h2-font-size: 1.6rem;
     --h3-font-size: 1.1rem;
     --normal-font-size: 0.95rem;
     --small-font-size: 0.8rem;
     --smaller-font-size: 0.7rem;
   }
   .section {
       padding-top: var(--spacing-xl); /* Menos padding vertical */
       padding-bottom: var(--spacing-xl);
   }
    .container {
        padding-left: var(--spacing-sm); /* Menos padding lateral */
        padding-right: var(--spacing-sm);
    }
    .button {
        padding: var(--spacing-sm) var(--spacing-lg); /* Botões menores */
        font-size: var(--small-font-size);
    }
     .button--cta {
        padding: var(--spacing-md) var(--spacing-xl);
        font-size: var(--normal-font-size);
    }
    .hero__trust-elements {
        gap: var(--spacing-md); /* Menos espaço */
        flex-direction: column; /* Empilhar em telas muito pequenas */
        align-items: center;
    }
     .nav__menu {
         width: 85%; /* Menu mobile ocupa mais espaço */
     }
     .footer__container {
         grid-template-columns: 1fr; /* Garante 1 coluna no footer */
         text-align: center; /* Força centralização */
     }
     .footer__section {
         margin-bottom: var(--spacing-xl);
     }
     .socials a {
         margin: 0 var(--spacing-md); /* Mais espaço entre ícones sociais */
     }
      .scrollup {
          right: 1rem;
          bottom: -30%; /* Garantir que comece fora */
      }
      .show-scroll {
          bottom: 1rem; /* Posição final mais baixa */
      }
}

/* ==========================================================================
   15. CORREÇÕES E AJUSTES FINOS ADICIONAIS
   ========================================================================== */

/* Garantir que imagens dentro de links não tenham borda azul padrão */
a img {
  border: none;
}

/* Melhorar contraste de links de texto em alguns fundos */
.about__card a:hover, .how-it-works__step a:hover {
    /* Estilo específico se houver links dentro desses cards */
}

/* Forçar word-wrap para evitar que textos longos quebrem o layout */
h1, h2, h3, h4, h5, h6, p, blockquote, cite, span, a {
  word-wrap: break-word; /* Método antigo */
  overflow-wrap: break-word; /* Método moderno */
  hyphens: auto; /* Hifenização automática (suporte variado) */
}

/* Esconder visualmente, mas manter acessível para leitores de tela */
.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap; /* Previne quebra de linha */
}


/* FIM DO ARQUIVO CSS - Arena 1x1.BET - lp.css */
/* Linhas totais: MUITAS! :) */




/* ==========================================================================
   16. EFEITO DE FUMAÇA NO CURSOR (Partículas)
   ========================================================================== */

/* Estilo base da partícula de fumaça */
.smoke-particle {
    position: fixed; /* Usa fixed para seguir o viewport, não o scroll */
    width: 15px; /* Tamanho da partícula */
    height: 15px;
    background-color: var(--primary-glow-color, rgba(173, 255, 47, 0.7)); /* Cor neon com transparência */
    border-radius: 50%; /* Círculo */
    z-index: 9998; /* Abaixo do cursor customizado, mas acima do resto */
    pointer-events: none; /* Não interfere com cliques */
    opacity: 0; /* Começa invisível */
    transform: translate(-50%, -50%) scale(1); /* Centraliza e define escala inicial */
    filter: blur(2px); /* Efeito de fumaça/desfoque */
    /* Transição suave para entrada (opcional) */
    /* transition: opacity 0.1s ease-out; */
  }
  
  /* Classe adicionada via JS para animar a partícula */
  .smoke-particle.animate {
    animation: smokeFadeOut 0.6s ease-out forwards; /* Duração e tipo da animação */
  }
  
  /* Animação de desaparecer e diminuir */
  @keyframes smokeFadeOut {
    0% {
      opacity: 0.7; /* Opacidade inicial */
      transform: translate(-50%, -50%) scale(1);
    }
    100% {
      opacity: 0; /* Desaparece */
      transform: translate(-50%, -70%) scale(0.2); /* Move um pouco para cima e diminui */
    }
  }
  
  /* Opcional: Esconder em telas muito pequenas onde pode atrapalhar */
  @media (max-width: 768px) {
    .smoke-particle {
      /* display: none; */ /* Descomente se quiser desativar em mobile */
    }
  }