/* ======================================================= */
/* 1. DEFINIÇÃO DE CORES DA MARCA (VARIÁVEIS CSS) */
/* ======================================================= */
:root {
    /* Verde Escuro (Cor Principal da GD Inforcell) */
    --gd-green: #004D40; 
    /* Dourado (Cor de Destaque / Brilho da GD Inforcell) */
    --gd-gold: #FFD700;
    /* Fundo Claro (para contraste) */
    --gd-light: #f8f9fa;
    /* Preto (Para texto em fundos claros) */
    --gd-dark: #212529;
}


/* ======================================================= */
/* 2. CLASSES DE CORES PERSONALIZADAS (INTEGRAÇÃO BOOTSTRAP) */
/* ======================================================= */

/* Backgrounds */
.bg-green-gd {
    background-color: var(--gd-green) !important;
}

.bg-light-gd {
    background-color: var(--gd-light) !important;
}

/* bg-dark-gd: Usado no scroll para ser translúcido */
.bg-dark-gd {
    /* Fundo Translúcido: 40% opaco */
    background-color: rgba(33, 37, 41, 0.4) !important; 
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); 
}

/* Textos */
.text-gold-gd {
    color: var(--gd-gold) !important;
}

.text-green-gd {
    color: var(--gd-green) !important;
}

/* Bordas */
.border-gold-gd {
    border: 3px solid var(--gd-gold) !important;
}


/* ======================================================= */
/* 3. ESTILO DO CABEÇALHO (NAVBAR) - COM SCROLL ANIMATION */
/* ======================================================= */

#mainNavbar {
    transition: all 0.4s ease; 
    color: white !important; 
    /* Efeito moderno para barra transparente: desfoca o que está atrás */
    backdrop-filter: blur(3px); 
}

/* Navbar Transparente no Início (Large padding, fully transparent) */
.navbar-transparent {
    background-color: transparent !important;
    box-shadow: none; 
}

/* Logo: Estilo da Moldura Dourada e Transição de Altura */
.navbar-brand img {
    border-radius: 50%;
    height: 50px;
    /* Brilho Dourado (Sua logo) */
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.8), 0 0 5px rgba(255, 215, 0, 0.6); 
    transition: transform 0.3s, height 0.4s; /* Transição de altura adicionada */
}

.navbar-brand img:hover {
    transform: scale(1.05);
}

/* Altura da Logo Reduzida no Scroll (A classe p-2 é adicionada pelo JS) */
.p-2 .navbar-brand img {
    height: 40px; 
}

/* Diminuição da fonte dos links no scroll (Opcional, para deixar mais sutil) */
.p-2 #navbarNav .nav-link {
    font-size: 0.9rem;
}

.nav-link {
    font-weight: 500;
}

/* Botão de Destaque na Navegação */
.btn-gold-gd {
    background-color: var(--gd-gold);
    color: var(--gd-dark);
    font-weight: bold;
    border: 2px solid var(--gd-gold);
    transition: background-color 0.3s;
}

.btn-gold-gd:hover {
    background-color: #e6c200; 
    color: var(--gd-dark);
    border-color: #e6c200;
}
/* ======================================================= */
/* 3.1. ESTILO DO BOTÃO TOGGLER (MENU) DA NAVBAR */
/* ======================================================= */

.navbar-toggler {
    border-color: rgba(255, 215, 0, 0.5); /* Borda sutilmente dourada */
    background-color: rgba(255, 215, 0, 0.1); /* Fundo sutilmente dourado */
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.6); /* Brilho dourado */
    transition: all 0.3s ease;
}

.navbar-toggler:hover {
    border-color: var(--gd-gold); /* Borda dourada mais forte no hover */
    box-shadow: 0 0 10px var(--gd-gold); /* Brilho mais intenso no hover */
}

.navbar-toggler-icon {
    /* CORREÇÃO: Ícone do menu "sanduíche" dourado */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 215, 0, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Opcional: Efeito de brilho no ícone ao abrir/fechar o menu */
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    box-shadow: 0 0 8px var(--gd-gold);
}

/* ======================================================= */
/* 4. ESTILO DA SEÇÃO HERO (VÍDEO DE FUNDO) */
/* ======================================================= */

#hero {
    /* CORREÇÃO: Define o padding superior para garantir que o conteúdo fique abaixo da navbar fixa */
    padding-top: 120px; 
    padding-bottom: 50px; /* Mantém o padding de baixo */
    
    position: relative;
    overflow: hidden; 
    min-height: 500px;
    z-index: 1; 
}

/* Camada escura sobre o vídeo para garantir a leitura do texto branco */
#hero::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 77, 64, 0.75); 
    z-index: 2;
}

.video-background {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 1;
    transform: translate(-50%, -50%);
}

#hero .container {
    position: relative;
    z-index: 3; 
}


/* ======================================================= */
/* 5. ESTILO DE BOTÕES CTA DEGRADÊ (Geração Z) */
/* ======================================================= */

/* Botão CTA Principal do Hero */
.btn-cta-degrade {
    background: linear-gradient(45deg, var(--gd-green), #00a08e); 
    color: white;
    font-weight: 700;
    border: none;
    padding: 12px 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 77, 64, 0.5), 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    letter-spacing: 1px;
}

.btn-cta-degrade:hover {
    background: linear-gradient(45deg, #00a08e, var(--gd-green));
    color: white;
    box-shadow: 0 8px 20px rgba(0, 77, 64, 0.7), 0 4px 10px rgba(0, 0, 0, 0.5);
    transform: scale(1.05); 
}

/* Botão CTA Final (Com Efeito Neon/Brilho) */
.btn-cta-degrade-neon {
    /* Degradê igual ao principal */
    background: linear-gradient(45deg, var(--gd-green), #00a08e); 
    color: white;
    font-weight: 700;
    border: 2px solid var(--gd-gold); /* Borda Dourada */
    padding: 15px 40px;
    border-radius: 10px;
    /* Sombra Dupla: Verde (neon) e Dourada (brilho) */
    box-shadow: 
        0 0 10px var(--gd-gold), 
        0 0 20px #00a08e,
        0 0 30px var(--gd-green); 
    transition: all 0.4s ease;
    letter-spacing: 2px;
}

.btn-cta-degrade-neon:hover {
    background: linear-gradient(45deg, #00a08e, var(--gd-green));
    color: white;
    transform: scale(1.08); 
    /* Brilho mais intenso no hover */
    box-shadow: 
        0 0 15px var(--gd-gold), 
        0 0 30px #00a08e,
        0 0 45px var(--gd-green); 
}
/* ======================================================= */
/* 5.1. ESTILO DO BOTÃO CTA GOOGLE (NOVO) */
/* ======================================================= */

.btn-cta-google {
    /* Degradê de cores do Google: Vermelho, Amarelo, Verde, Azul */
    background: linear-gradient(90deg, #db4437 0%, #f4b400 25%, #0f9d58 50%, #4285f4 100%); 
    color: white;
    font-weight: 700;
    border: none;
    padding: 12px 30px;
    border-radius: 8px;
    /* Sombra Dupla: Azul e Vermelho */
    box-shadow: 0 4px 15px rgba(66, 133, 244, 0.5), 0 2px 5px rgba(219, 68, 55, 0.5);
    transition: all 0.3s ease;
    letter-spacing: 1px;
}

.btn-cta-google:hover {
    /* Degradê no Hover (Invertido ou com mais Brilho) */
    background: linear-gradient(90deg, #4285f4 0%, #0f9d58 25%, #f4b400 50%, #db4437 100%); 
    color: white;
    box-shadow: 0 8px 20px rgba(66, 133, 244, 0.7), 0 4px 10px rgba(219, 68, 55, 0.7);
    transform: scale(1.05); 
}
/* ======================================================= */
/* 5.2. ESTILO DOS CARDS DE VENDA PREMIUM (NOVO) */
/* ======================================================= */

.card-venda-premium {
    border-radius: 15px; /* Bordas mais arredondadas (Estilo Geração Z) */
    overflow: hidden; 
    border: none;
    transition: transform 0.3s ease, box-shadow 0.5s ease;
}

.card-venda-premium:hover {
    transform: translateY(-8px); /* Efeito de 'levantar' no hover */
    box-shadow: 0 15px 30px rgba(0, 77, 64, 0.4), 0 5px 15px rgba(255, 215, 0, 0.5) !important; 
}

/* Tamanho e Estilo da Imagem (para encaixar melhor) */
.card-img-product {
    height: 250px; /* Altura fixa para simetria */
    overflow: hidden;
    display: flex; /* Para centralizar a imagem dentro do container */
    align-items: center;
    justify-content: center;
}

.card-img-product img {
    /* Garante que a imagem preencha o container e corte o excesso */
    object-fit: cover; 
    width: 100%;
    height: 100%;
    filter: brightness(0.9); /* Escurece a imagem suavemente */
}

/* Fundo Degradê na área da Imagem (Super criativo!) */
/* Degradê da Cor da Marca no fundo do iPhone */
.iphone-img-cover {
    background: linear-gradient(135deg, var(--gd-green), #00a08e);
}

/* Degradê da Cor da Marca no fundo do Android */
.android-img-cover {
    background: linear-gradient(135deg, var(--gd-gold), #e6c200);
}


/* ======================================================= */
/* 5.3. ESTILO DOS NOVOS BOTÕES DE VENDA (Geração Z) */
/* ======================================================= */

/* Botão IPHONE: Verde/Dourado com brilho Dourado Forte */
.btn-cta-iphone {
    background: linear-gradient(45deg, var(--gd-green), #00a08e); 
    color: white;
    font-weight: 700;
    border: none;
    padding: 12px 30px;
    border-radius: 50px; /* Borda bem arredondada */
    box-shadow: 0 0 10px var(--gd-gold), 0 0 20px rgba(255, 215, 0, 0.6); 
    transition: all 0.3s ease;
}

.btn-cta-iphone:hover {
    background: linear-gradient(45deg, #00a08e, var(--gd-green));
    color: white;
    box-shadow: 0 0 15px var(--gd-gold), 0 0 30px rgba(255, 215, 0, 0.8);
    transform: scale(1.05); 
}

/* Botão ANDROID: Dourado com brilho Verde Forte */
.btn-cta-android {
    background-color: var(--gd-gold); 
    color: var(--gd-dark);
    font-weight: 700;
    border: none;
    padding: 12px 30px;
    border-radius: 50px; /* Borda bem arredondada */
    /* Brilho Verde (Cor do Android/Sua marca) */
    box-shadow: 0 0 10px var(--gd-green), 0 0 20px rgba(0, 77, 64, 0.6); 
    transition: all 0.3s ease;
}

.btn-cta-android:hover {
    background-color: #e6c200;
    color: var(--gd-dark);
    box-shadow: 0 0 15px var(--gd-green), 0 0 30px rgba(0, 77, 64, 0.8);
    transform: scale(1.05); 
}

/* ======================================================= */
/* 6. ESTILO DE DEGRADÊS PARA TEXTO (FONTES BONITAS) */
/* ======================================================= */

/* Títulos com Degradê Verde/Dourado */
.text-degrade-title {
    background: linear-gradient(45deg, var(--gd-green), var(--gd-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    font-weight: 700;
    font-size: 2.5rem;
}

/* Parágrafos com Degradê Suave */
.text-degrade-paragraph {
    /* Degradê de cores escuras para manter a leitura em fundo claro */
    background: linear-gradient(90deg, var(--gd-dark), #4b4b4b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    line-height: 1.8;
}

/* Sombra de texto Neon para o CTA Final */
.text-shadow-neon {
    text-shadow: 0 0 5px var(--gd-gold), 0 0 10px #00a08e;
}
/* ======================================================= */
/* 6.1. ESTILO DO DEGRADÊ PARA NOMES DA EQUIPE (NOVO) */
/* ======================================================= */

.text-degrade-member-name {
    /* Degradê da Marca, forte e moderno */
    background: linear-gradient(90deg, var(--gd-gold) 0%, #00a08e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    /* Fonte maior e mais impactante */
    font-weight: 900; /* Extra Bold */
    font-size: 1.8rem; 
    letter-spacing: 1px;
    /* Brilho suave para destacar */
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5); 
}
/* ======================================================= */
/* 7. ESTILO DA SEÇÃO QUEM SOMOS (FOTO COM NEON DOURADO) */
/* ======================================================= */

/* Efeito de Moldura Neon Dourada */
.equipe-neon-frame {
    background-color: var(--gd-dark); 
    border-radius: 10px;
    border: 2px solid var(--gd-gold);
    /* O Efeito Neon Dourado */
    box-shadow: 0 0 15px var(--gd-gold), inset 0 0 10px var(--gd-gold); 
    transition: box-shadow 0.5s ease;
}

.equipe-neon-frame:hover {
    box-shadow: 0 0 25px var(--gd-gold), inset 0 0 15px var(--gd-gold);
}

.equipe-neon-frame img {
    border-radius: 8px;
}

/* ======================================================= */
/* 8. ESTILO DE CARROSSEL (SERVIÇOS E ACESSÓRIOS) */
/* ======================================================= */

#servicos .carousel-inner, #acessorios .carousel-inner {
    min-height: 350px; 
}

.carousel-img-cover {
    height: 350px; 
    object-fit: cover;
}

/* ======================================================= */
/* 9. ESTILO DA SEÇÃO CONTATO (CTA) - COM SLIDESHOW DE FUNDO */
/* ======================================================= */

#contato {
    position: relative; 
    overflow: hidden;
    min-height: 450px; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 5rem !important; 
    padding-bottom: 5rem !important;
}

/* Container para as imagens de fundo que se alternam */
.background-slideshow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    animation: imageSlide 10s infinite; 
    z-index: 1; /* Nível 1: Fundo */
}

/* CORREÇÃO FINAL DA PELÍCULA (Overlay) */
#contato::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Usei o preto com alta opacidade (0.9) para manter a cor da sua marca, mas você pode voltar ao seu teste (rgba(177, 6, 6, 0.9)) se preferir */
    background: rgba(27, 35, 28, 0.685); 
    z-index: 2; /* Nível 2: Fica por cima do Slideshow (z-index: 1) */
}


/* NOVO: Força todos os filhos diretos do container (Conteúdo, texto, ícones) a ficarem na camada superior */
#contato .container,
#contato h2, 
#contato h3, 
#contato a, 
#contato p,
.social-icons {
    position: relative; /* Essencial para que o z-index funcione */
    z-index: 3 !important; /* Nível 3: Fica por cima da Película (z-index: 2) */
}


/* Definição da Animação para trocar as imagens de fundo (slideshow) */
@keyframes imageSlide {
    0% {
        background-image: url('../img/fundocontato.jpg'); /* Imagem 1 no início */
    }
    45% {
        background-image: url('../img/fundocontato.jpg'); 
    }
    50% {
        background-image: url('../img/fundocontato1.jpg'); /* Transição para Imagem 2 */
    }
    95% {
        background-image: url('../img/fundocontato1.jpg'); 
    }
    100% {
        background-image: url('../img/fundocontato.jpg'); /* Volta para Imagem 1 */
    }
}

/* ======================================================= */
/* 11. AJUSTES GERAIS */
/* ======================================================= */

body {
    font-family: 'Arial', sans-serif;
    color: var(--gd-dark);
}
/* ======================================================= */
/* 11. ESTILO DOS ÍCONES DAS REDES SOCIAIS (DEGRADÊ) */
/* ======================================================= */

.social-icons a {
    font-size: 2.5em; /* Aumenta um pouco o tamanho dos ícones */
    margin: 0 15px; /* Espaçamento entre os ícones */
    display: inline-block;
    transition: transform 0.3s ease, filter 0.3s ease; /* Animação ao passar o mouse */
    text-decoration: none; /* Remove sublinhado */
}

.social-icons a:hover {
    transform: translateY(-5px) scale(1.1); /* Efeito de "levitar" e aumentar */
    filter: brightness(1.2); /* Mais brilho no hover */
}

/* Ícone do WhatsApp (Verde Degradê) */
.social-icons .fa-whatsapp {
    color: #25D366; /* Cor base do WhatsApp */
    text-shadow: 0 0 10px rgba(37, 211, 102, 0.8), 
                 0 0 20px rgba(37, 211, 102, 0.6); /* Efeito neon verde */
}

/* Ícone do Instagram (Degradê Laranja/Roxo) */
.social-icons .fa-instagram {
    background: -webkit-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    -webkit-background-clip: text; /* Aplica o degradê ao texto */
    -webkit-text-fill-color: transparent; /* Torna o texto transparente para mostrar o background */
    text-shadow: 0 0 10px rgba(225, 48, 108, 0.8), 
                 0 0 20px rgba(225, 48, 108, 0.6); /* Efeito neon rosa/roxo */
}

/* Ícone do Facebook (Azul Degradê) */
.social-icons .fa-facebook-f {
    color: #1877F2; /* Cor base do Facebook */
    text-shadow: 0 0 10px rgba(24, 119, 242, 0.8), 
                 0 0 20px rgba(24, 119, 242, 0.6); /* Efeito neon azul */
}
/* ======================================================= */
/* 11.1. ESTILO DO FOOTER MODERNO (Geração Z) - CORRIGIDO */
/* ======================================================= */

/* Títulos do Footer com Degradê Verde-Dourado (Para o toque Geração Z) */
.text-gold-degrade-footer {
    /* Define o degradê */
    background: linear-gradient(90deg, var(--gd-green) 0%, var(--gd-gold) 100%);
    -webkit-background-clip: text; /* Aplica o degradê ao texto no Chrome/Safari */
    -webkit-text-fill-color: transparent; /* Remove a cor de preenchimento original */
    /* NOVO: Sombra mais nítida para remover o "borrão" */
    text-shadow: 0 0 1px var(--gd-gold), 0 0 1px rgba(255, 215, 0, 0.5); 
    font-size: 1.2rem; /* Aumenta um pouco o tamanho para os títulos */
    letter-spacing: 0.5px;
}

/* Links do Footer - Efeito Hover Dourado */
.hover-gold:hover {
    color: var(--gd-gold) !important;
    text-shadow: 0 0 5px var(--gd-gold);
    transition: all 0.3s ease;
}

/* Iframe do Mapa - Mais Elegante */
.map-style-gd iframe {
    border-radius: 8px; /* Bordas arredondadas */
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5); /* Sombra dourada suave (Brilho) */
    filter: grayscale(80%); /* Deixa o mapa mais sóbrio e harmonioso com as cores */
    transition: all 0.5s ease;
}

.map-style-gd iframe:hover {
    filter: grayscale(0%); /* Remove o filtro ao passar o mouse */
    box-shadow: 0 0 15px var(--gd-gold);
}


/* ======================================================= */
/* 11.2. ÍCONES SOCIAIS (COMPLEMENTO) */
/* ======================================================= */
/* Define o estilo base dos ícones */
.social-icons a {
    color: white; 
    margin: 0 15px 0 0; 
    display: inline-block;
    transition: transform 0.3s ease, filter 0.3s ease; 
    text-decoration: none; 
}

.social-icons a:hover {
    transform: translateY(-3px) scale(1.1); 
}

/* Aplicando Efeito Neon (Cores nativas com Text-shadow) */
.social-icons .fa-whatsapp {
    color: #25D366; 
    text-shadow: 0 0 10px rgba(37, 211, 102, 0.8), 0 0 20px rgba(37, 211, 102, 0.6); 
}

.social-icons .fa-instagram {
     color: #dc2743; 
     text-shadow: 0 0 10px rgba(220, 39, 67, 0.8), 0 0 20px rgba(220, 39, 67, 0.6);
}

.social-icons .fa-facebook-f {
    color: #1877F2;
    text-shadow: 0 0 10px rgba(24, 119, 242, 0.8), 0 0 20px rgba(24, 119, 242, 0.6);
}
/* ======================================================= */
/* 11.3. ESTILO DO FOOTER COM IMAGEM DE FUNDO (GD INFORCELL) - CORRIGIDO */
/* ======================================================= */

.footer-custom-bg {
    /* ATENÇÃO: SUBSTITUA PELA SUA IMAGEM CORRETA */
    background: url('../img/salmo91.webp') no-repeat center center;
    background-size: cover; /* Garante que a imagem cubra todo o footer */
    position: relative;
    /* Adiciona uma Camada Escura (Overlay) para o texto branco se destacar (Geração Z/Moderno) */
    isolation: isolate; 
}

/* Pseudo-elemento para criar o Overlay Escuro com a cor da marca */
.footer-custom-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Degradê sutil com alto contraste (Opacidade reduzida de 0.95 para 0.85/0.8) para clarear o fundo */
    background: linear-gradient(135deg, rgba(0, 77, 64, 0.85), rgba(33, 37, 41, 0.8)); 
    z-index: -1; 
}

/* NOVO BLOCO DE CORREÇÃO CRUCIAL: Garante nitidez forçando cor e camada */
.footer-custom-bg .container {
    position: relative;
    z-index: 10; /* Eleva o conteúdo acima de qualquer sombra */
}

.footer-custom-bg ul li,
.footer-custom-bg p,
.footer-custom-bg a {
    /* Garante a cor branca pura e remove qualquer sombra não intencional */
    color: #ffffff !important; 
    text-shadow: none !important; /* CORREÇÃO: Remove qualquer sombra residual que cause embaçamento */
    filter: brightness(1.2); /* NOVO: Aumenta ligeiramente o brilho para compensar o fundo escuro */
}