/*
 * ----------------------------------------------------
 * Variáveis & Tipografia (Tema Escuro Otimizado)
 * ----------------------------------------------------
 */

:root {
    --color-primary: #D32F2F;       /* Vermelho Destaque Principal (Mantido) */
    --color-dark: #000000;          /* Preto Puro (Fundo Principal) */
    --color-dark-lighter: #212121;  /* Cinza Escuro para Cards/Contraste */
    --color-text-light: #F5F5F5;    /* Branco Suave (Texto Principal) */
    --color-text-muted: #aaaaaa;    /* Cinza Claro (Texto Secundário) */
    
    /* Fontes */
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Poppins', sans-serif;
    
    /* CAMINHOS DE IMAGENS PARA ANIMAÇÃO */
    --image-abstract-circuits: url('../imagens/teste1.jpg');
    --image-dark-strategy: url('../imagens/consultoria.jpg');
    --image-red-light-abstract: url('../imagens/site.jpeg');

    /* Sombras refinadas para o tema escuro */
    --shadow-base: 0 5px 15px rgba(0, 0, 0, 0.5);
    --shadow-hover: 0 15px 30px rgba(0, 0, 0, 0.7);

    /* Overlay para o fundo do Hero */
    --hero-overlay: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.85));
}

/* ================================================= */
/* ANIMAÇÃO DE CARROSSEL DE FUNDO PARA O HERO (COM OVERLAY)*/
/* ================================================= */

@keyframes background-cycle {
    /* Imagem 1: Display/Hold (~6 segundos de exibição) */
    0% { background-image: var(--hero-overlay), var(--image-abstract-circuits); }
    30% { background-image: var(--hero-overlay), var(--image-abstract-circuits); }

    /* Transição/Start Imagem 2 */
    33% { background-image: var(--hero-overlay), var(--image-dark-strategy); }
    
    /* Imagem 2: Display/Hold */
    63% { background-image: var(--hero-overlay), var(--image-dark-strategy); }

    /* Transição/Start Imagem 3 */
    66% { background-image: var(--hero-overlay), var(--image-red-light-abstract); }
    
    /* Imagem 3: Display/Hold */
    96% { background-image: var(--hero-overlay), var(--image-red-light-abstract); }
    
    /* Transição de volta para Imagem 1 */
    100% { background-image: var(--hero-overlay), var(--image-abstract-circuits); }
}

/* ================================================= */
/* CONTÊINER OTIMIZADO E POSICIONAMENTO DA HOME (#home)*/
/* ================================================= */

.hero-bg {
    animation: background-cycle 20s infinite ease-in-out; 
    
    width: 100%; 
    /* Altura definida no HTML para 90vh, mas assegurada a funcionalidade aqui */
    min-height: 500px; 
    
    /* CORREÇÃO CRÍTICA: COVER para preencher o fundo, garantindo bom visual */
    background-size: cover; 
    background-repeat: no-repeat;
    
    background-position: center center; 
    background-attachment: fixed; 
    transition: background-image 2s ease; 
}

/* Ajuste de padding da HOME: O padding superior é crucial por causa do navbar fixo */
#home {
    padding-top: 100px; /* Garante que o conteúdo fique abaixo do navbar fixo */
    /* Remove padding-bottom fixo aqui e confia no 'py-5' (3rem) do Bootstrap */
}


/* ------------------ Media Query: Otimização e Reposicionamento ------------------ */

@media (max-width: 992px) {
    .hero-bg {
        /* Altura mínima de 60% da tela em mobile/tablet */
        min-height: 60vh; 
        height: auto;
        
        background-attachment: scroll; 
        
        background-size: cover; /* Mantém cover para preenchimento */
        background-repeat: no-repeat;
    }

    /* Ajuste de padding na home para mobile */
    #home {
        padding-bottom: 3rem !important; 
        padding-top: 80px;
    }

    /* Otimização de Mobile do WhatsApp */
    .whatsapp-float {
        bottom: 20px; 
        left: 15px;
        width: 55px;
        height: 55px;
        line-height: 55px;
    }
}

@media (min-width: 993px) {
    .hero-bg {
        /* Altura padrão para desktop */
        height: 90vh; 
        min-height: 600px; 

        background-size: cover; 
        background-repeat: no-repeat;
    }
}


/* ------------------ Reset e Fundo Global Escuro ------------------ */

body {
    font-family: var(--font-body);
    line-height: 1.6; 
    background-color: var(--color-dark); 
    color: var(--color-text-light); 
    scroll-behavior: smooth; 
}

/* Títulos: Montserrat para impacto */
h1, h2, h3, h4, h5, .section-title, .navbar-brand {
    font-family: var(--font-heading);
    color: var(--color-text-light);
    transition: color 0.3s ease; 
}

/* Texto Principal (lead, p) herda Poppins do body */
.lead, p {
    font-weight: 300; 
}

/* ------------------ Classes de Cor Customizadas (Sincronizado com HTML) ------------------ */

.text-danger-custom {
    color: var(--color-primary) !important;
}

/* Certificando que o tema escuro do Bootstrap é remapeado corretamente */
.bg-dark-custom { 
    background-color: var(--color-dark) !important;
}
.bg-dark { 
    background-color: var(--color-dark-lighter) !important;
}
.bg-black { 
    background-color: var(--color-dark) !important;
}

/* Cores do Texto para melhor contraste */
p.lead, p.text-muted {
    color: var(--color-text-light) !important;
}
.text-secondary { 
    /* Aumentado o contraste do texto secundário */
    color: var(--color-text-muted) !important;
}

/* ------------------ Navbar (Limpo) ------------------ */
.navbar {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
}
.navbar-nav .nav-link {
    font-family: var(--font-heading);
    font-weight: 600;
    color: rgba(245, 245, 245, 0.8) !important; 
    transition: color 0.3s ease, border-bottom 0.3s ease;
    border-bottom: 2px solid transparent; 
}
.navbar-nav .nav-link.active, .nav-link:hover {
    color: var(--color-primary) !important;
    border-color: var(--color-primary); 
}

/* ------------------ Botões ------------------ */

.btn {
    font-family: var(--font-heading);
}

.btn-danger-custom {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    transition: all 0.3s ease;
}

.btn-danger-custom:hover {
    background-color: #b22020; 
    border-color: #b22020;
    transform: scale(1.05);
}

.btn-outline-danger-custom {
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.btn-outline-danger-custom:hover {
    background-color: var(--color-primary);
    color: var(--color-text-light);
}

/* ------------------ Cards e Elementos de Contraste ------------------ */

.card-hover-effect, .card-testimonial, .result-card-effect {
    background-color: var(--color-dark-lighter) !important;
    box-shadow: var(--shadow-base);
    border-radius: 8px; /* Garantir bordas arredondadas */
}

.card-hover-effect {
    border-top: 3px solid transparent !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-top 0.3s ease;
}

.card-hover-effect:hover {
    transform: translateY(-8px); 
    box-shadow: var(--shadow-hover) !important;
    border-top-color: var(--color-primary) !important; 
}

#sobre .bg-black { 
    background-color: var(--color-dark) !important; 
    border-left: 5px solid var(--color-primary) !important;
}

/* Formulário de Contato */
.form-control {
    color: var(--color-text-light) !important; 
    background-color: var(--color-dark) !important; 
    border-color: #333 !important; 
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-control:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(211, 47, 47, 0.4) !important; 
}

/* Rodapé */
footer {
    background-color: var(--color-dark) !important;
    border-top-color: #333 !important;
}

/* ================================================= */
/* REPOSICIONAMENTO: WhatsApp Fixo (Inferior Esquerda) */
/* ================================================= */

.whatsapp-float {
    background-color: #d32525; /* Cor oficial do WhatsApp */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    transition: background-color 0.3s ease;
    
    /* Reposicionamento (Mantido no canto inferior esquerdo) */
    position: fixed;
    bottom: 35px; 
    left: 20px; 
    right: auto; 
    z-index: 1050; 

    /* Estilo Circular */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.whatsapp-float:hover {
    background-color: #128C7E; /* Tonalidade mais escura */
}

.hover-scale:hover {
    transform: scale(1.1); /* Um pouco mais de escala para elementos interativos */
}
/* --- Estilos para a Seção de Serviços (#servicos) com Background Images --- */

/* 1. Estilos Base para o Contêiner da Imagem */
.service-image-placeholder {
    width: 100%;       /* Ocupa a largura total da coluna */
    height: 200px;     /* Altura fixa para todos os cartões (pode ajustar aqui) */
    overflow: hidden;
    /* Comportamento da imagem de fundo: */
    background-size: cover;       /* Garante que a imagem cubra toda a área, cortando se necessário */
    background-position: center;  /* Centraliza a imagem no contêiner */
    background-repeat: no-repeat; /* Não repete a imagem */
    transition: transform 0.3s ease; /* Adiciona uma transição suave para o efeito hover */
    /* Garante que o placeholder seja o bloco de visualização */
    position: relative;
    z-index: 1; /* Para garantir que o placeholder esteja numa camada visível */
}

/* 2. Efeito de Zoom (Hover) */
/* Quando o card é hover, o placeholder (e a imagem de fundo) aumenta um pouco */
.card-hover-effect:hover .service-image-placeholder {
    transform: scale(1.05); /* Pequeno zoom */
}

/* --- Estilos para a Seção de Serviços (#servicos) com Background Images --- */

/* Contêiner da imagem do serviço */
.service-image-placeholder {
    width: 100%;
    height: 220px; /* altura equilibrada para cards */
    overflow: hidden;
    background-color: #111; /* fallback escuro */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    position: relative;
    z-index: 1;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Imagens internas — agora preenchem completamente o espaço */
.service-image-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Preenche o container completamente */
    object-position: center;
    transition: transform 0.4s ease;
}

/* Efeito de zoom leve ao passar o mouse */
.card-hover-effect:hover .service-image-placeholder img {
    transform: scale(1.05);
}

/* Efeito de destaque no container */
.card-hover-effect:hover .service-image-placeholder {
    transform: scale(1.03);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
}

/* Responsividade: ajusta a altura das imagens em telas menores */
@media (max-width: 768px) {
    .service-image-placeholder {
        height: 180px;
        border-radius: 6px;
    }
}


/* --- FIM dos Estilos de Background Image --- */