/* Definição das Variáveis CSS com a Paleta de Cores */
:root {
    --primary-deep: #0A3D62; /* Azul Profundo */
    --secondary-light: #E8F1F8; /* Azul Gelo Tecnológico */
    --accent: #12CBC4; /* Azul Turquesa Inteligente */
    --dark-neutral: #2C3A47; /* Cinza Grafite */
    --light-neutral: #CED6E0; /* Cinza Claro */
}

/* Estilos Globais */
body {
    font-family: 'Poppins', sans-serif; /* Sugestão de fonte moderna */
    color: var(--dark-neutral);
    background-color: #fff;
}
/* Configurações da logo*/
/* Estilo para a Logo na Navbar */
#logo {
    max-width: 200px;
    height: auto;
    margin-bottom: 20px;
}

/* Classes de Cores do Bootstrap Personalizadas */
.bg-primary-deep { background-color: var(--primary-deep) !important; }
.text-primary-deep { color: var(--primary-deep) !important; }
.bg-secondary-light { background-color: var(--secondary-light) !important; }
.bg-accent { background-color: var(--accent) !important; }
.text-accent { color: var(--accent) !important; }
.bg-dark-neutral { background-color: var(--dark-neutral) !important; }
.text-dark-neutral { color: var(--dark-neutral) !important; }
.bg-light-neutral { background-color: var(--light-neutral) !important; }
.text-light-neutral { color: var(--light-neutral) !important; }

/* Estilo do Botão Principal (CTA) */
.btn-accent {
    background-color: var(--accent);
    border-color: var(--accent);
    transition: background-color 0.3s, transform 0.2s;
}

.btn-accent:hover {
    background-color: #0fb9b3; /* Um pouco mais escuro */
    border-color: #0fb9b3;
    transform: translateY(-2px);
}

/* Estilo para a seção "Como Funciona" */
.step-circle {
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    font-size: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Estilo para o Hero (para garantir que o fundo claro não fique totalmente branco) */
.hero-section {
    background-color: #fff;
    /* Pequeno gradiente para dar profundidade, se desejar */
    /* background: linear-gradient(180deg, var(--secondary-light) 0%, #fff 40%); */
}

/* Estilo para os inputs do formulário */
.form-control {
    border-color: var(--light-neutral);
}

.form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 0.25rem rgba(18, 203, 196, 0.25); /* Sombra turquesa */
}