/*
 * Cabeçalho: barra de topo, logo, menu e preloader
 * (extraído dos templates — não misturar CSS com HTML)
 */

		/* Animação de Scroll (Fade In) */
		.reveal {
			opacity: 0;
			transform: translateY(30px);
			transition: all 0.8s ease;
		}

		.reveal.active {
			opacity: 1;
			transform: translateY(0);
		}

		/* --- 2. BARRA DE TOPO --- */
		.top-bar {
			background: linear-gradient(to right, var(--dark-blue), var(--primary-blue));
			color: rgba(255, 255, 255, 0.9);
			font-size: 0.85rem;
			padding: 10px 0;
		}

		.top-bar .container {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.top-info i {
			color: var(--accent-yellow);
			margin-right: 8px;
		}

		.top-info span {
			margin-right: 25px;
		}

		.top-social a {
			color: var(--white);
			margin-left: 15px;
			font-size: 1rem;
		}

		.top-social a:hover {
			color: var(--accent-yellow);
			transform: translateY(-2px);
		}

		/* --- 3. HEADER & MENU --- */
		header {
			background: var(--white);
			box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
			position: sticky;
			top: 0;
			z-index: 1000;
		}

		/* Área da Logo */
		.logo-area {
			padding: 20px 0;
			text-align: center;
			position: relative;
		}

		.logo-area .container {
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
		}

		.logo img {
			width: 440px;
			max-width: 100%;
			height: auto;
		}

		/* Área de Navegação Fullwidth Azul */
		.nav-area {
			background: var(--primary-blue);
			/* Fundo azul em 100% da largura */
			width: 100%;
		}

		.nav-area .container {
			display: flex;
			justify-content: center;
			/* Centraliza os itens do menu */
		}

		.nav-menu {
			display: flex;
			align-items: center;
			gap: 30px;
			margin: 0;
			padding: 0;
		}

		.nav-item {
			position: relative;
		}

		.nav-link {
			font-family: 'Montserrat', sans-serif;
			font-weight: 600;
			font-size: 0.9rem;
			color: var(--white);
			/* Mudou para branco para dar contraste */
			padding: 15px 0;
			/* Aumentei o clique vertical */
			text-transform: uppercase;
			letter-spacing: 0.5px;
			display: block;
		}

		.nav-link:hover {
			color: var(--accent-yellow);
			/* Hover amarelo ao invés de azul */
		}

		/* Indicador de Hover */
		.nav-link::after {
			content: '';
			position: absolute;
			width: 0;
			height: 3px;
			bottom: 5px;
			left: 0;
			background: var(--accent-yellow);
			/* Traço amarelo no hover */
			transition: width 0.3s;
		}

		.nav-item:hover .nav-link::after {
			width: 100%;
		}

		/* Dropdown Menu */
		.dropdown {
			position: absolute;
			top: 100%;
			left: 50%;
			transform: translateX(-50%) translateY(20px);
			background: var(--white);
			min-width: 240px;
			box-shadow: var(--shadow-hover);
			border-radius: 8px;
			padding: 15px 0;
			opacity: 0;
			visibility: hidden;
			transition: all 0.3s ease;
			border-top: 4px solid var(--accent-yellow);
		}

		.nav-item:hover .dropdown {
			opacity: 1;
			visibility: visible;
			transform: translateX(-50%) translateY(0);
		}

		/* Ponte invisível para não fechar o menu */
		.nav-item::before {
			content: '';
			position: absolute;
			width: 100%;
			height: 20px;
			top: 100%;
			left: 0;
		}

		.dropdown li a {
			display: block;
			padding: 12px 25px;
			font-size: 0.9rem;
			color: var(--text-gray);
			border-bottom: 1px solid #f0f0f0;
			text-transform: none;
		}

		.dropdown li:last-child a {
			border-bottom: none;
		}

		.dropdown li a:hover {
			background: var(--light-green);
			color: var(--primary-green);
			padding-left: 30px;
		}

		/* Botão CTA Menu ajustado para fundo azul */
		.btn-header {
			background: var(--accent-yellow);
			color: var(--dark-blue) !important;
			padding: 10px 25px !important;
			border-radius: var(--radius-btn);
			box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
		}

		.btn-header:hover {
			background: var(--white);
			color: var(--primary-blue) !important;
			transform: translateY(-2px);
		}

		.nav-item:hover .btn-header::after {
			width: 0;
		}

		/* Mobile Toggle */
		.mobile-toggle {
			display: none;
			font-size: 1.8rem;
			color: var(--primary-blue);
			cursor: pointer;
			position: absolute;
			right: 20px;
		}

		/* Ajustes responsivos básicos para mobile */
		@media (max-width: 768px) {
			.mobile-toggle {
				display: block;
			}
		.logo img {
           width: 330px;
           max-width: 330px;
		}
			.logo-area .container{
                    justify-content: space-between;
			}
			.nav-area {
				background: transparent;
			}

			.nav-menu {
				/* Assegure-se de que o CSS mobile que você já tem no footer funcione bem aqui */
				display: none;
			}

			.nav-menu.active {
				display: flex;
			}

			.nav-link {
				color: var(--text-dark);
				/* Volta para escuro no menu mobile branco */
			}
		}
	

    /* Estilos do overlay de tela cheia */
    .preloader-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #ffffff; /* Fundo branco para destacar a logo */
        z-index: 999999; /* Fica acima de tudo no site */
        display: flex;
        justify-content: center;
        align-items: center;
        transition: opacity 0.6s ease, visibility 0.6s ease;
    }

    /* Oculta o preloader quando a classe .hidden é adicionada */
    .preloader-overlay.hidden {
        opacity: 0;
        visibility: hidden;
    }

    /* Container centralizado */
    .preloader-content {
        text-align: center;
        width: 60%;
        max-width: 780px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Animação suave na logo */
    .preloader-logo {
        width: 80%;
        height: auto;
        margin-bottom: 30px;
        animation: pulseLogo 2s infinite ease-in-out;
    }
			@media (max-width: 768px) {
		
			    .preloader-logo {	
					
					max-width: 580px;
				
				}
	
	}

    /* Container da barra cinza de fundo */
    .preloader-bar-container {
        width: 100%;
        height: 6px;
        background-color: #f0f0f0;
        border-radius: 10px;
        overflow: hidden;
        margin-bottom: 15px;
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
    }

    /* A barra colorida que vai encher */
    .preloader-bar-fill {
        height: 100%;
        width: 0%; /* Inicia zerada */
        /* Gradiente fluindo entre o Azul, Amarelo e Verde */
        background: linear-gradient(90deg, #003399 0%, #FFCC00 50%, #009933 100%);
        border-radius: 10px;
        transition: width 0.1s linear;
    }

    /* Texto da porcentagem */
    .preloader-percentage {
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        font-size: 1.4rem;
        color: #003399;
    }

    @keyframes pulseLogo {
        0% { transform: scale(1); }
        50% { transform: scale(1.05); }
        100% { transform: scale(1); }
    }