:root

{
--primary:#0057D9;
--secondary:#00C7B7;
--cta:#FF7A00;
--dark:#1A1A1A;
--light:#f4f6f831;
}
body{font-family:'Inter',sans-serif;color:var(--dark)}
h1,h2,h3,h4,h5{font-family:'Montserrat',sans-serif;font-weight:700}
.navbar{background:#7a262600;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.hero{
background:linear-gradient(135deg,#0057D9,#003b94);
color:#fff;padding:120px 0;
background: url(../imagens/crm_background_hero.svg) no-repeat center center fixed;
}

.hero h1{font-size:3.2rem}
.btn-primary-custom{background:var(--cta);border:none}
.btn-whats{background:var(--secondary);border:none;color:#ffffff}
.section{padding:90px 0}
.card-custom{
border:none;border-radius:18px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
height:100%;
transition:.3s;
}
.card-custom:hover{transform:translateY(-5px)}
.icon-box{font-size:50px}
.cta{
background: linear-gradient(135deg, rgba(0, 87, 217, 0.842), rgba(0, 59, 148, 0.4));

color:#ffffff;
}
footer{
background:#111111d5;
color:#fff;
padding:40px 0;
}
.whatsapp-float{
position:fixed;
bottom:20px;
right:20px;
z-index:9999;
}
.col-md-3 {
     width: 100%;
}
/* 1. CONFIGURAÇÃO DA IMAGEM FIXA (Fica por baixo de tudo) */
/* 1. CONFIGURAÇÃO DA IMAGEM FIXA (Fica por baixo de tudo) */
html {
    height: 100%;
}
.section-transparente {
  /* Fundo branco com 40% de opacidade (deixa ver o fundo da página atrás) */
  background-color: rgba(255, 255, 255, 0.4) !important; 
  
  /* Opcional: Adiciona o efeito de vidro fosco elegante */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}


body {
    margin: 0;
    min-height: 100%;
    /* Coloque aqui o link da imagem que você quer exibir ao fundo */
    background-image: url(../imagens/crm_background_hero.svg); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* 2. CONFIGURAÇÃO DO BACKGROUND ANIMADO (Fica no meio com transparência) */
.bg {
    animation: slide 12s ease-in-out infinite alternate;
    background-image: linear-gradient(-60deg, #ADD8E6 50%, #4169E1 50%);
    bottom: 0;
    left: -50%;
    
    /* TRANSPARÊNCIA: Controla o quanto a imagem de fundo aparece através dessa camada (60%) */
    opacity: .6; 
    
    position: fixed;
    right: -50%;
    top: 0;
    
    /* CAMADA DE PROFUNDIDADE: Coloca o efeito acima da imagem do body, mas atrás do texto do site */
    z-index: -1; 
    
    /* SEGURANÇA: Evita que as camadas animadas interfiram nos cliques dos botões do site */
    pointer-events: none; 
}

.bg2 {
    animation-direction: alternate-reverse;
    animation-duration: 16s;
    opacity: .5;
    background-image: linear-gradient(-60deg, #4169E1 50%, #00008B 50%);
}

.bg3 {
    animation-duration: 20s;
    opacity: .4;
    background-image: linear-gradient(-60deg, #ADD8E6 30%, #4169E1 70%, #00008B 90%);
}

/* 3. ANIMAÇÃO DE MOVIMENTO (Mantida exatamente como a IA gerou) */
@keyframes slide {
    0% { transform: translateX(-25%); }
    100% { transform: translateX(25%); }
}
/* Formata o container do formulário */
#meuFormulario {
  display: flex;
  flex-direction: column; /* Força os elementos a ficarem um em cima do outro */
  gap: 15px;              /* Cria um espaçamento uniforme entre os campos */
  max-width: 400px;       /* Define uma largura máxima confortável */
  margin: 0 auto;         /* Centraliza o formulário na tela */
  padding: 20px;
}

/* Formata todos os campos de entrada de dados */
#meuFormulario input,
#meuFormulario textarea {
  width: 100%;            /* Garante que ocupem toda a largura do container */
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;     /* Arredonda levemente as bordas */
  box-sizing: border-box; /* Garante que o padding não quebre a largura total */
  font-family: sans-serif;
  font-size: 16px;        /* Evita zoom automático indesejado no mobile */
}

/* Permite redimensionar a área de texto apenas verticalmente */
#meuFormulario textarea {
  resize: vertical;
  min-height: 100px;
}

/* Formata o botão de envio */
#meuFormulario button {
  width: 100%;
  padding: 12px;
  background-color: #007bff; /* Cor azul padrão */
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s ease; /* Efeito suave ao passar o mouse */
}

/* Efeito ao passar o mouse no botão */
#meuFormulario button:hover {
  background-color: #0056b3; /* Azul mais escuro */
}