/* --- Header & Nav (Correção de Transição) --- */
header {
    background: var(--white);
    position: fixed; /* Mudado para fixed para garantir que fique sempre no topo */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 15px 0; /* Padding inicial maior */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Curva suave "Ease-Out-Expo" */
    box-shadow: 0 0 0 rgba(0,0,0,0); /* Sem sombra inicialmente */
}

/* Espaçamento para o conteúdo não ficar escondido atrás do header fixo */
body {
    padding-top: 140px; /* Ajuste conforme a altura do Topbar + Header */
}

header.scrolled {
    padding: 5px 0; /* Reduz o padding suavemente */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); /* Sombra suave aparece */
    background: rgba(255, 255, 255, 0.98); /* Leve transparência */
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Removemos a altura fixa para deixar o padding controlar o tamanho */
}

/* Logo */
.logo a {
    font-size: 24px;
    font-weight: 800;
    color: var(--secondary-color);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    transition: 0.3s;
}

/* Efeito Hover nos Links (Sublinhado expandindo do centro) */
.nav-menu ul { display: flex; align-items: center; gap: 30px; }
.nav-link {
    font-weight: 500;
    font-size: 15px;
    color: var(--secondary-color);
    position: relative;
    padding: 10px 0;
    transition: color 0.3s;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%; /* Começa do meio */
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: width 0.3s ease-in-out, left 0.3s ease-in-out;
}

.nav-link:hover { color: var(--primary-color); }

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
    left: 0; /* Expande para os lados */
}

/* --- Menu Mobile (Correção de Slide e Overlay) --- */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease;
    backdrop-filter: blur(3px); /* Efeito de desfoque no fundo */
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu {
    position: fixed;
    top: 0;
    right: -320px; /* Escondido totalmente na direita */
    width: 300px;
    height: 100vh;
    background: var(--white);
    z-index: 1002;
    padding: 25px;
    box-shadow: -5px 0 30px rgba(0,0,0,0.15);
    transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1); /* Efeito elástico suave */
    display: flex;
    flex-direction: column;
}

.mobile-menu.active {
    right: 0; /* Desliza para dentro */
}

.mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 15px;
}

.mobile-header h4 { font-size: 1.2rem; color: var(--primary-color); }
.close-menu { font-size: 28px; cursor: pointer; color: #888; transition: 0.3s; }
.close-menu:hover { color: var(--primary-color); transform: rotate(90deg); }

/* Links do Mobile com animação de entrada */
.mobile-menu ul li {
    margin-bottom: 0;
    border-bottom: 1px solid #f9f9f9;
}

.mobile-menu ul li a {
    font-size: 1.1rem;
    font-weight: 500;
    display: block;
    padding: 15px 0;
    color: var(--text-color);
    transition: 0.3s;
    transform: translateX(20px); /* Posição inicial levemente deslocada */
    opacity: 0;
}

.mobile-menu ul li a:hover {
    color: var(--primary-color);
    padding-left: 10px;
}

/* Animação cascata nos itens do menu mobile */
.mobile-menu.active ul li a {
    transform: translateX(0);
    opacity: 1;
    transition: transform 0.4s ease, opacity 0.4s ease;
}
/* Atraso para cada item (efeito cascata) */
.mobile-menu.active ul li:nth-child(1) a { transition-delay: 0.1s; }
.mobile-menu.active ul li:nth-child(2) a { transition-delay: 0.2s; }
.mobile-menu.active ul li:nth-child(3) a { transition-delay: 0.3s; }
.mobile-menu.active ul li:nth-child(4) a { transition-delay: 0.4s; }
.mobile-menu.active ul li:nth-child(5) a { transition-delay: 0.5s; }
.mobile-menu.active ul li:nth-child(6) a { transition-delay: 0.6s; }

/* --- Top Bar (Comportamento correto) --- */
.top-bar {
    background: var(--secondary-color);
    color: var(--white);
    padding: 10px 0;
    position: absolute; /* Absolute joga ele para o topo real */
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    z-index: 1001;
    display: flex;
    align-items: center;
}

/* Ajuste Responsivo para Header */
@media (max-width: 992px) {
    header { padding: 10px 0; }
    body { padding-top: 100px; } /* Menor padding no mobile */
    .top-bar { display: none; } /* Oculta topbar no mobile como no original ou ajusta layout */
}