/* Estilos Globais e Reset */
* {
  scroll-behavior: smooth;
  cursor: url('../img/cursor.png') 16 16, auto;
}
body {
  font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Fonte mais moderna */
  color: #333;
}

/* Cores da Marca (AJUSTE AQUI COM SEUS CÓDIGOS HEXADECIMAIS EXATOS!) */
:root {
  --rwp-primary: #FF4500; /* Laranja avermelhado, como sua cor principal (pode ser vermelho ou laranja puro) */
  --rwp-dark-primary: #E03E00; /* Tom mais escuro do primary para hover */
  --rwp-secondary: #FFD700; /* Amarelo */
  --rwp-accent: #FFA500; /* Laranja puro para detalhes */
}

/* Cabeçalho */
.main-header {
  background-color: transparent; /* Fundo transparente para se misturar com o banner */
  position: absolute; /* Posição absoluta para ficar sobre o banner */
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1030; /* Z-index alto para ficar acima de outros elementos */
  transition: background-color 0.3s ease; /* Transição para o sticky */
}

/* Estilo para quando o cabeçalho fica fixo */
.main-header.sticky-top {
    background-color: rgba(0, 0, 0, 0.8); /* Fundo escuro com transparência ao fixar */
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.main-header .container {
    display: flex;
    justify-content: space-between; /* Alinha logo à esquerda e nav à direita */
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
}

.main-header .navbar-brand {
    display: flex;
    align-items: center;
}

.main-header .navbar-brand img {
    height: 50px; /* Altura da logo */
    margin-right: 10px;
}

.main-header .nav-link {
    color: white;
    font-weight: 500;
    font-size: 1.1rem;
    margin-left: 25px; /* Espaçamento entre os itens do menu */
    transition: color 0.3s ease;
}

.main-header .nav-link:hover {
    color: var(--rwp-secondary); /* Amarelo no hover */
}

/* Hero Section */
.hero {
  background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('./../img/banner.png') center/cover no-repeat; /* A imagem que você gostou */
  color: white;
  padding: 150px 0 100px 0; /* Ajuste do padding para o conteúdo se encaixar */
  text-align: left; /* Texto alinhado à esquerda como no exemplo */
  display: flex;
  align-items: center;
  min-height: 80vh; /* Altura mínima para o hero */
  position: relative;
}
.hero h2 {
  font-size: 4rem; /* Título maior e mais impactante */
  font-weight: 900; /* Mais bold */
  margin-bottom: 15px;
  text-shadow: 3px 3px 6px rgba(0,0,0,0.7); /* Sombra mais forte */
  max-width: 600px; /* Limita a largura do título */
}
.hero p.lead {
  font-size: 1.6rem; /* Texto maior */
  margin-bottom: 30px;
  text-shadow: 2px 2px 5px rgba(0,0,0,0.6);
  max-width: 700px; /* Limita a largura do lead */
}

/* Botões CTA */
.cta-btn {
  font-size: 1.25rem;
  padding: 15px 45px;
  border-radius: 50px;
  font-weight: bold;
  transition: all 0.3s ease;
}
.btn-primary {
  background-color: var(--rwp-primary); /* Usando a cor primária da marca */
  border-color: var(--rwp-primary);
}
.btn-primary:hover {
  background-color: var(--rwp-dark-primary); /* Tom mais escuro no hover */
  border-color: var(--rwp-dark-primary);
  transform: translateY(-2px);
}
.btn-outline-light {
  border-color: white;
  color: white;
}
.btn-outline-light:hover {
  background-color: white;
  color: var(--rwp-primary); /* Cor do texto no hover para a primária da marca */
}
.btn-outline-success { /* Botão na seção "Sobre a Rede RWP" */
    border-color: var(--rwp-primary);
    color: var(--rwp-primary);
}
.btn-outline-success:hover {
    background-color: var(--rwp-primary);
    color: white;
}


/* Seções Comuns */
section {
  padding: 80px 0; /* Padding padrão para todas as seções */
}
h3 {
  font-weight: 700;
  font-size: 2.5rem;
  margin-bottom: 50px;
  position: relative; /* Para a linha decorativa */
  padding-bottom: 10px;
  color: #333; /* Cor padrão para títulos, pode ser ajustado */
}
h3::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background-color: var(--rwp-primary); /* Linha com a cor primária da marca */
  border-radius: 2px;
}
/* Alinhamento de título para seção "Sobre a Rede RWP" */
#sobre-rwp h3 {
    text-align: left;
}
#sobre-rwp h3::after {
    left: 0;
    transform: translateX(0);
}


/* Estilo dos Cards (Como Funciona, Destaques) */
.card-info {
  background-color: #fff;
  border: none;
  border-radius: 10px;
  padding: 30px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%; /* Garante altura uniforme */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.card-info:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
.card-info i {
  font-size: 3.5rem; /* Ícones maiores */
  margin-bottom: 20px;
  color: var(--rwp-primary); /* Padronizado para a cor primária da marca */
}
.card-info h5 {
  font-weight: 600;
  margin-bottom: 15px;
  font-size: 1.3rem;
  color: #333;
}
.card-info p {
  color: #555;
}

/* Destaque Financeiro */
.faturamento-card {
    background: linear-gradient(45deg, var(--rwp-primary), var(--rwp-accent)); /* Gradiente com suas cores */
    color: white;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
}
.faturamento-card:hover {
    transform: translateY(-5px);
}
.faturamento-card h4 {
    font-size: 2.8rem;
    font-weight: 800;
    margin-bottom: 10px;
}
.faturamento-card p {
    font-size: 1.1rem;
    opacity: 0.9;
}
.faturamento-card i {
    font-size: 4rem;
    margin-bottom: 20px;
    color: rgba(255,255,255,0.8);
}

/* Vantagens / Diferenciais */
.vantagens-item {
    text-align: center;
    padding: 20px;
}
.vantagens-item i {
    font-size: 3rem;
    color: var(--rwp-primary); /* Ícones padronizados para a cor primária */
    margin-bottom: 15px;
}
.vantagens-item h5 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
}
.vantagens-item span {
    color: var(--rwp-accent); /* Destaque para os números com a cor laranja/amarela */
    font-weight: bold;
}
.vantagens-item p {
    font-size: 1rem;
    color: #666;
    margin-top: 10px;
}

/* Seção "Sobre a Rede RWP" */
.about-section {
    background-color: #f8f9fa; /* Fundo claro */
}
.about-section img {
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.about-section p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
}


/* Formulário */
#formulario {
  background-color: #f0f2f5;
  padding-top: 100px;
  padding-bottom: 100px;
}
#formulario h3 {
  color: var(--rwp-primary); /* Título com a cor primária da marca */
}
#formulario .form-label {
  font-weight: 600;
  color: #444;
}
#formulario .form-control,
#formulario .form-select {
  border-radius: 8px;
  padding: 12px 15px;
  border: 1px solid #ddd;
}
#formulario .form-control:focus,
#formulario .form-select:focus {
    border-color: var(--rwp-primary); /* Borda de foco com a cor primária da marca */
    box-shadow: 0 0 0 0.25rem rgba(255, 69, 0, 0.25); /* Usando RGBA da cor primária */
}
.form-text-muted {
    font-size: 0.9em;
    color: #6c757d;
}

/* Rodapé */
footer {
  background-color: #212529; /* Cor do cabeçalho */
  color: rgba(255,255,255,0.7);
  font-size: 0.9rem;
}
footer small {
    opacity: 0.8;
}
footer .bi {
    color: white; /* Ícones sociais brancos */
    font-size: 1.5rem;
    transition: color 0.3s ease;
}
footer .bi:hover {
    color: var(--rwp-accent); /* Ícones sociais amarelos/laranjas no hover */
}


/* Mídias Queries para Responsividade */
@media (max-width: 992px) { /* Ajuste para tablets */
    .main-header .nav-link {
        margin-left: 15px;
        font-size: 1rem;
    }
    .hero {
        padding: 120px 0 80px 0;
        min-height: 60vh;
    }
    .hero h2 {
        font-size: 3rem;
    }
    .hero p.lead {
        font-size: 1.3rem;
    }
}

@media (max-width: 768px) { /* Ajuste para mobile */
  .main-header .container {
      flex-direction: column;
      padding-top: 15px;
      padding-bottom: 15px;
  }
  .main-header .navbar-brand {
      margin-bottom: 15px;
  }
  .main-header nav {
      width: 100%;
      text-align: center;
  }
  .main-header .nav-link {
      margin: 0 10px;
  }
  .hero {
    text-align: center; /* Centraliza o texto no mobile */
    padding: 100px 0 60px 0;
    min-height: 50vh;
  }
  .hero h2 {
    font-size: 2.5rem;
    max-width: none;
  }
  .hero p.lead {
    font-size: 1.2rem;
    max-width: none;
  }
  .cta-btn {
    font-size: 1rem;
    padding: 12px 30px;
  }
  h3 {
    font-size: 2rem;
  }
  h3::after {
    width: 60px;
  }
  section {
    padding: 60px 0;
  }
  #sobre-rwp h3 {
      text-align: center; /* Centraliza no mobile */
  }
  #sobre-rwp h3::after {
      left: 50%;
      transform: translateX(-50%);
  }
}