:root {
    --azul-principal: #102138;
    --laranja-destaque: #dd4920;
    --branco-base: #f9f3ec;
}

.bg-azul { background-color: var(--azul-principal); }
        .bg-laranja { background-color: var(--laranja-destaque); }
        .bg-branco { background-color: var(--branco-base); }
        .text-azul { color: var(--azul-principal); }
        .text-laranja { color: var(--laranja-destaque); }
        .text-branco { color: var(--branco-base); }
        .border-laranja { border-color: var(--laranja-destaque); }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===== LOGO RESPONSIVO ===== */
@media (max-width: 768px) {
    header img {
        
    }
}

.hero-bottomspace {
	padding-bottom: 60px !important;
	background: none !important;
}

.hero-bottomspace2 {
	margin-bottom: 60px !important;
	
}

.menu-top {
    font-weight: 600;
}

/* ===== MENU DESKTOP ===== */
.menu-top a {
    font-weight: 500;
    font-size: 16px;
    position: relative;
    padding: 8px 0;
}

/* ===== ÍCONES LARANJA NO DESKTOP ===== */
.menu-top a i {
    color: #dd4920 !important;
    transition: all 0.3s ease;
}

/* ===== EXCEÇÃO PARA NEURODIVERGENTES ===== */
.menu-top a[href*="#neurodivergentes"] i {
    color: inherit !important; /* Usa a cor do ícone original */
}

/* ===== HOVER EFFECTS DESKTOP ===== */
.menu-top a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    background-color: #dd4920;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.menu-top a:hover::after {
    width: 100%;
}

.menu-top a:hover i {
    transform: scale(1.1);
}

/* ===== EXCEÇÃO HOVER PARA NEURODIVERGENTES ===== */
.menu-top a[href*="#neurodivergentes"]:hover i {
    transform: scale(1.1);
    color: inherit !important; /* Mantém cor original no hover também */
}

/* ===== BOTÃO MOBILE ===== */
#menuBtn {
    padding: 8px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

#menuBtn:hover {
    background-color: rgba(221, 73, 32, 0.1);
}

/* ===== MENU MOBILE ===== */
#mobileMenu {
    transition: all 0.3s ease;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
}

/* ===== LINKS MOBILE ===== */
#mobileMenu a {
    font-weight: 500;
    font-size: 16px;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

#mobileMenu a:hover {
    background-color: rgba(221, 73, 32, 0.05);
    transform: translateX(5px);
}

/* ===== ÍCONES MOBILE (PERMANECEM LARANJA) ===== */
#mobileMenu a i {
    color: #dd4920;
    width: 20px;
    text-align: center;
}

/* ===== EXCEÇÃO MOBILE PARA NEURODIVERGENTES ===== */
#mobileMenu a[href*="#neurodivergentes"] i {
    color: inherit !important; /* Preserva cor original no mobile também */
}

/* ===== RESPONSIVIDADE ===== */
@media (max-width: 640px) {
    nav {
        padding: 12px 16px !important;
    }
    
    #mobileMenu a {
        font-size: 15px;
        padding: 12px 16px !important;
    }
}

/* ===== ANIMAÇÃO DO ÍCONE ===== */
#menuIcon {
    transition: transform 0.3s ease;
}

/* ===== Z-INDEX ===== */
header {
    z-index: 9999 !important;
}

#mobileMenu {
    z-index: 9998 !important;
}

#mobile-menu {
    position: relative;
    z-index: 51;
}

/* ===== SMOOTH SCROLL ===== */
html {
    scroll-behavior: smooth;
}

/* ===== ACTIVE LINK STYLE ===== */
.menu-top a.active,
.mobile-menu-link.active {
    color: #dd4920 !important;
    font-weight: 600;
}

.menu-top a.active::after {
    width: 100%;
}

/* ===== ACTIVE LINK ICONS ===== */
.menu-top a.active i {
    color: #dd4920 !important;
    transform: scale(1.1);
}

/* ===== HOVER STATES APRIMORADOS ===== */
.mobile-menu-link:active {
    transform: translateX(5px) scale(0.98);
}

#mobile-menu-button:active {
    transform: scale(0.95);
}

/* ===== TRANSIÇÕES SUAVES ===== */
* {
    transition: color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
}

/* ===== PREPARAÇÃO PARA ÍCONE WEBP ===== */
.menu-neurodivergentes-icon {
    width: 20px;
    height: 20px;
    margin-right: 5px;
    vertical-align: middle;
    display: inline-block;
}

/* ===== ESTILO ADICIONAL PARA ÍCONES ===== */
.menu-top a i,
#mobileMenu a i {
	width: 20px !important;
    height: 20px !important;
    font-size: 16px;
    margin-right: 12px;
    transition: all 0.3s ease;
}