/* --- GERAL E FONTES --- */
:root {
    --bravotech-blue: #004481;
    --bravotech-orange: #ff8c00;
}

body {
    font-family: 'Poppins', sans-serif;
}

/* --- NAVBAR --- */
.navbar {
    transition: background-color 0.4s ease-out;
}

.navbar.scrolled {
    background-color: var(--bravotech-blue) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.nav-link.btn {
    transition: all 0.3s ease;
}

/* --- HERO SECTION --- */
.hero-section {
    background-color: var(--bravotech-blue);
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(255, 140, 0, 0.1), transparent 30%),
        radial-gradient(circle at 90% 80%, rgba(255, 140, 0, 0.1), transparent 30%);
    padding: 180px 0;
    position: relative;
    overflow: hidden;
}

.typed-text {
    color: var(--bravotech-orange);
}

.btn-bravotech-orange {
    background-color: var(--bravotech-orange);
    border-color: var(--bravotech-orange);
    color: #fff;
    font-weight: 600;
    padding: 12px 30px;
    border-radius: 50px;
    transition: all 0.3s ease;
}
.btn-bravotech-orange:hover {
    background-color: #e67e00;
    border-color: #e67e00;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(255, 140, 0, 0.4);
}

/* --- SEÇÃO DE SOLUÇÕES --- */
.service-card {
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
    height: 100%;
}
.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.service-card .icon-circle {
    width: 70px;
    height: 70px;
    background-color: var(--bravotech-orange);
    color: white;
    font-size: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.service-card:hover .icon-circle {
    background-color: var(--bravotech-blue);
}

/* --- NOVOS AJUSTES NA NAVBAR --- */

/* Define um espaçamento interno fixo para a navbar */
.navbar {
    padding-top: 10px;
    padding-bottom: 10px;
    transition: padding 0.3s ease; /* Animação suave */
}

/* Quando a página rola, a navbar fica um pouco menor */
.navbar.scrolled {
    padding-top: 5px;
    padding-bottom: 5px;
}

/* Controla o tamanho da logo dentro da navbar */
.navbar-brand img {
    /* Aumentei a altura máxima inicial para 80 pixels */
    max-height: 200px; 
    width: auto;      
    transition: max-height 0.4s ease;
}

/* Quando a página rola, a logo também diminui para 60px */
.navbar.scrolled .navbar-brand img {
    max-height: 60px;
}

.btn-outline-bravotech-orange {
    color: var(--bravotech-orange);
    border-color: var(--bravotech-orange);
    font-weight: 600;
}

.btn-outline-bravotech-orange:hover {
    color: #fff;
    background-color: var(--bravotech-orange);
    border-color: var(--bravotech-orange);
}

/* --- NOVA SEÇÃO DE CONTATO DIRETO --- */
.contact-card {
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.contact-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* --- EFEITOS DE HOVER NA NAVBAR --- */

/* Efeito para os links normais da navbar (Início, Soluções, etc.) */
.navbar .nav-link:not(.btn) {
    position: relative; /* Necessário para o pseudo-elemento ::after */
    padding-bottom: 8px; /* Adiciona um pequeno espaço abaixo do link */
}

/* Cria uma linha laranja animada abaixo do link */
.navbar .nav-link:not(.btn)::after {
    content: '';
    position: absolute;
    width: 0%;
    height: 2px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--bravotech-orange);
    transition: width 0.3s ease-in-out;
}

/* Ao passar o mouse, a linha cresce até 100% da largura */
.navbar .nav-link:not(.btn):hover::after {
    width: 70%;
}

/* Efeito para o botão "Fale Conosco" na navbar */
.navbar .nav-link.btn.btn-outline-light:hover {
    background-color: var(--bravotech-orange);  /* Preenche com a cor laranja */
    border-color: var(--bravotech-orange);      /* Garante que a borda também seja laranja */
    color: #fff;                                /* Mantém o texto branco */
    transform: translateY(-2px);                /* Efeito de "levantar" sutil */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);   /* Adiciona uma sombra para dar profundidade */
}

/* --- ESTILIZAÇÃO DEFINITIVA DO CHAT N8N (MÉTODO OFICIAL COM VARIÁVEIS) --- */

:root {
	/* --- Cores Base da Marca BravoTech --- */
	--chat--color-primary: #ff8c00;          /* Laranja BravoTech para ações principais (botão de abrir) */
	--chat--color-secondary: #004481;        /* Azul BravoTech para cabeçalho e mensagens do usuário */
	
	/* --- Cores Neutras --- */
	--chat--color-white: #ffffff;
	--chat--color-light: #f8f9fa;
	--chat--color-dark: #212529;
	--chat--color-typing: #495057;

	/* --- Estilo Geral --- */
	--chat--border-radius: 12px;             /* Cantos arredondados para combinar com o site */

	/* --- Cabeçalho do Chat --- */
	--chat--header--background: var(--chat--color-secondary); /* Usa o Azul BravoTech */
	--chat--header--color: var(--chat--color-white);

	/* --- Mensagens --- */
	/* Estilo do Bot (Bravo) */
	--chat--message--bot--background: #e9ecef; /* Fundo cinza claro para diferenciar */
	--chat--message--bot--color: var(--chat--color-dark);
	
	/* Estilo do Usuário */
	--chat--message--user--background: var(--chat--color-secondary); /* Usa o Azul BravoTech */
	--chat--message--user--color: var(--chat--color-white);

	/* --- Botão de Abrir/Fechar o Chat --- */
	--chat--toggle--background: var(--chat--color-primary); /* Usa o Laranja BravoTech */
}