/* style.css */

/* Definições básicas do corpo */
body {
    font-family: 'Roboto', sans-serif;
    color: var(--text-color); /* Usando a variável para consistência */
    line-height: 1.6; /* Melhora a legibilidade */
}

/* Adicione isso para ativar a rolagem suave */
html {
    scroll-behavior: smooth;
}

/* Cores e estilos personalizados (Variáveis CSS) */
:root {
    --primary-color: #585659; /* Cinza escuro principal */
    --primary-color-dark: #403e41; /* Tom mais escuro para hover */
    --secondary-color: #f8f9fa; /* Cor de fundo clara para seções (off-white) */
    --text-color: #495057; /* Cor principal do texto para contraste */
    --light-grey: #e9ecef; /* Cinza claro para bordas e fundos secundários */
}

/* --- Componentes da Barra de Navegação --- */

/* Adicione esta nova classe para o fundo do cabeçalho */
.bg-primary-custom {
    background-color: var(--primary-color) !important; /* Usa sua cor primária */
}

/* Ajusta a cor do texto da marca para ser visível em fundo escuro */
.navbar-brand .fw-bold {
    color: var(--secondary-color); /* Cor mais clara para o texto da marca */
    font-size: 1.5rem;
}

/* Estilo para a imagem do logotipo na Navbar */
.navbar-brand img {
    height: 95px; /* Aumenta o tamanho do logotipo para 80px */
    width: auto;
}

/* Ajusta as cores dos links de navegação para serem visíveis em fundo escuro */
.navbar-nav .nav-link {
    color: var(--secondary-color); /* Cor mais clara para os links de navegação */
    font-weight: 500;
    margin-right: 1.5rem;
    transition: color 0.3s ease;
}

/* Ajusta as cores dos links de navegação em hover/ativo para fundo escuro */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: white; /* Ainda mais claro em hover/ativo para contraste */
}

/* --- Botões Personalizados --- */
.btn-primary-custom {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    padding: 0.6rem 1.5rem;
    border-radius: 0.3rem;
    font-weight: 600;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.btn-primary-custom:hover {
    background-color: var(--primary-color-dark);
    border-color: var(--primary-color-dark);
}

.btn-primary-custom-large {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    padding: 1rem 2.5rem;
    border-radius: 0.5rem;
    font-weight: 700;
    font-size: 1.1rem;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.btn-primary-custom-large:hover {
    background-color: var(--primary-color-dark);
    border-color: var(--primary-color-dark);
}

/* Estilo invertido para o botão dentro da barra de navegação */
.navbar .btn-primary-custom {
    background-color: var(--secondary-color); /* Fundo claro para o botão */
    border-color: var(--secondary-color);
    color: var(--primary-color); /* Texto escuro para o botão */
}

.navbar .btn-primary-custom:hover {
    background-color: var(--light-grey); /* Ligeiramente mais escuro em hover */
    border-color: var(--light-grey);
    color: var(--primary-color-dark); /* Texto mais escuro em hover */
}

/* --- Seção Principal (Hero Section) --- */
.hero-section {
    min-height: 80vh; /* Ajuste conforme necessário */
    background-color: var(--secondary-color);
    overflow: hidden; /* Garante que a imagem não transborde */
    padding: 60px 0; /* Espaçamento interno */
}

.hero-section .text-section {
    padding-right: 3rem; /* Espaçamento entre texto e imagem em telas maiores */
}

.hero-section h1 {
    font-family: 'Montserrat', sans-serif;
    color: var(--primary-color);
    font-size: 3.5rem;
    line-height: 1.2;
}

.hero-section p.lead {
    font-size: 1.25rem;
    color: var(--text-color);
}

/* IMAGEM DIRETA */
.hero-section .image-section {
    display: flex; /* Para centralizar a imagem verticalmente, se necessário */
    align-items: center; /* Centraliza a imagem verticalmente */
    justify-content: center; /* Centraliza a imagem horizontalmente */
    padding: 1rem; /* Um pouco de padding para a imagem */
}

.hero-section .image-section img {
    max-width: 100%; /* Garante responsividade total */
    height: auto;
    display: block; /* Remove espaço extra abaixo da imagem */
    border-radius: 10px; /* Borda arredondada para a imagem */
    box-shadow: 0 10px 20px rgba(0,0,0,0.15); /* Sombra para a imagem */
}


/* --- Media Queries para Responsividade --- */
@media (max-width: 991.98px) { /* Para tablets e dispositivos menores */
    .hero-section .text-section {
        padding-right: 0; /* Remove padding em telas menores */
        padding-bottom: 2rem; /* Adiciona espaço abaixo do texto antes da imagem */
        text-align: center; /* Centraliza o texto em telas menores */
    }

    .hero-section h1 {
        font-size: 2.5rem; /* Reduz o tamanho da fonte do título em telas menores */
    }

    .hero-section p.lead {
        font-size: 1.1rem;
    }

    .hero-section .image-section {
        order: 1 !important; /* Força a imagem a vir primeiro no mobile, se desejado */
        margin-bottom: 2rem;
    }

    .d-none.d-lg-block { /* Esconde o botão da navbar no mobile */
        display: none !important;
    }

    .navbar-brand img {
        height: 25px; /* Ajuste se o logo da navbar precisar ser menor ainda no mobile */
    }
}

@media (max-width: 767.98px) { /* Para smartphones menores */
    .hero-section {
        padding: 40px 0;
    }

    .hero-section h1 {
        font-size: 2rem;
    }
}

/* --- Estilos Gerais para Títulos de Seção --- */
h2 {
    font-family: 'Montserrat', sans-serif;
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 1.5rem;
}

h3 {
    font-family: 'Montserrat'
}

/* Estilos adicionais para o footer */
.footer-icon-link {
    transition: color 0.3s ease;
}

.footer-icon-link:hover {
    color: #cccccc !important; /* Cor mais clara para o hover */
}
}