/* ============================================= */
/* --- ARQUIVO: base.css (VERSÃO FINAL E ESTÁVEL) --- */
/* ============================================= */

/* 1. FUNDAMENTOS E VARIÁVEIS GLOBAIS */
:root {
  --primary-color: #5d00ff; /* Seu roxo vibrante */
  --secondary-color: #2f00ff; /* Seu roxo para contraste */
  --accent-color: #270039;  /* Seu novo tom de azul para detalhes */
  --dark-color: hsl(0, 0%, 4%);
  --light-color: #f0f0f0;   /* Seu novo cinza claro */
  --white-color: #ffffff;
  --text-color: #181818;
  --font-headings: 'Montserrat', sans-serif;
  --font-body: 'Roboto', sans-serif;
  --border-radius: 8px;
}


/* Reset e Estilos Globais */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--text-color); line-height: 1.6; background-color: #ffffff; }
.container { width: 90%; max-width: 1200px; margin: 0 auto; }

/* 2. COMPONENTES E UTILITÁRIOS */
.btn { display: inline-block; padding: 12px 28px; border-radius: var(--border-radius); text-decoration: none; font-weight: 700; font-family: var(--font-headings); transition: transform 0.2s ease, background-color 0.2s ease; border: none; cursor: pointer; text-align: center; }
.btn-primary { background-color: var(--primary-color); color: var(--white-color); }
.btn-primary:hover { background-color: #30005d; transform: translateY(-3px); }
.btn-secondary { background-color: transparent; color: var(--primary-color); border: 2px solid var(--primary-color); }
.btn-secondary:hover { background-color: var(--primary-color); color: var(--white-color); }

/* [INÍCIO] CÓDIGO ADICIONADO CONFORME SOLICITADO */
.btn-light {
    background-color: var(--white-color);
    color: var(--dark-color);
}
.btn-light:hover {
    background-color: var(--light-color);
    transform: translateY(-3px);
}
/* [FIM] CÓDIGO ADICIONADO */

.btn-whatsapp { background-color: var(--secondary-color); color: var(--white-color); }
.btn-whatsapp:hover { background-color: #270039; transform: translateY(-3px); }
.btn-whatsapp i { margin-right: 8px; }

.section-title { font-family: var(--font-headings); color: var(--dark-color); font-size: 2.8rem; text-align: center; margin-bottom: 20px; }
.section-subtitle { text-align: center; font-size: 1.1rem; max-width: 600px; margin: 0 auto 60px auto; }
.rating-stars { color: #f1c40f; }

/* 3. HEADER E FOOTER (COMPONENTES GLOBAIS) */

/* [INÍCIO] CÓDIGO CORRIGIDO PARA O HEADER DE BARRA ÚNICA */
.main-header {
    /* Efeito de vidro "leitoso" */
    background: rgba(255, 255, 255, 0.84); /* transparência */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    /* Posicionamento flutuante */
    position: fixed; /* Fixo no topo da tela */
    top: 0;
    left: 0;
    width: 100%; /* Ocupa a largura toda */
    z-index: 1000;
    
    padding: 0 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 0.3s ease;
}
.main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
}
.logo {
    font-family: var(--font-headings);
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--dark-color);
    text-decoration: none;
}
.main-nav {
    flex-grow: 1;
    display: flex;
    justify-content: center;
}

/* CORREÇÃO: Aplica os estilos diretamente na classe .desktop-nav que está na tag <ul> */
.desktop-nav {
    list-style: none;
    display: flex; /* <-- Garante que os itens fiquem lado a lado */
    align-items: center;
    gap: 30px; /* <-- Recria o espaçamento entre os links */
    margin: 0;
    padding: 0;
}

/* Garante que o menu mobile nunca apareça no desktop */
.mobile-nav-menu {
    display: none;
}

/* Ajusta os links dentro da nova estrutura do desktop */
.desktop-nav a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
}

.desktop-nav a:hover {
    color: var(--primary-color);
}
.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}
.header-actions .nav-link {
    font-weight: 500;
    text-decoration: none;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s ease;
}
.header-actions .nav-link:hover {
    color: var(--primary-color);
}
.header-actions .nav-link--icon i {
    font-size: 1.1rem;
}
.header-actions .btn {
    padding: 10px 24px;
}
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.8rem;
    color: var(--dark-color);
    cursor: pointer;
    margin-left: 10px;
}
/* [FIM] CÓDIGO CORRIGIDO PARA O HEADER */


/* [INÍCIO] CÓDIGO FINAL E CORRIGIDO PARA O FOOTER */
.main-footer-section {
    background-color: #000000;
    color: #bdc3c7;
    padding: 60px 0 0 0;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr; 
    gap: 40px;
    padding-bottom: 40px;
}
.footer-logo {
    font-family: var(--font-headings);
    font-weight: 800;
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: var(--white-color);
}
.about-column p {
    color: #bdc3c7;
    margin-bottom: 20px;
}
.social-links a {
    color: #bdc3c7;
    text-decoration: none;
    font-size: 1.5rem;
    margin-right: 15px;
    transition: color 0.3s ease;
}
.social-links a:hover {
    color: var(--primary-color);
}
.footer-column h4 {
    font-family: var(--font-headings);
    font-size: 1.2rem;
    margin-bottom: 20px;
    color: var(--white-color);
}
.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-column ul li {
    margin-bottom: 12px;
}
.footer-column ul a {
    color: #bdc3c7;
    text-decoration: none;
    transition: color 0.3s ease;
}
.footer-column ul a:hover {
    color: var(--white-color);
    padding-left: 5px;
}
.footer-bottom {
    border-top: 1px solid #34495e;
    text-align: center;
    padding: 20px 0;
    font-size: 0.9rem;
    color: #95a5a6;
}
/* [FIM] CÓDIGO FINAL E CORRIGIDO PARA O FOOTER */


/* 4. ESTILOS GLOBAIS DO JS (NOTIFICAÇÕES) */
.notification { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); padding: 15px 25px; border-radius: var(--border-radius); color: var(--white-color); font-family: var(--font-body); font-weight: 500; z-index: 2000; box-shadow: 0 4px 15px rgba(0,0,0,0.2); text-align: center; }
.notification-info { background-color: #3498db; }
.notification-success { background-color: #2ecc71; }
.notification-warning { background-color: #f1c40f; color: #333; }
.notification-error { background-color: #e74c3c; }


/* 5. MEDIA QUERIES GLOBAIS */
@media (max-width: 992px) {
    .main-nav,
    .header-actions .nav-link,
    .header-actions .btn {
        display: none;
    }
    .mobile-menu-toggle {
        display: block;
    }
    .main-nav.active { display: block; position: absolute; top: 80px; left: 0; width: 100%; background-color: var(--white-color); box-shadow: 0 5px 10px rgba(0,0,0,0.1); }
    .main-nav.active ul { flex-direction: column; padding: 10px 0; gap: 0; }
    .main-nav.active ul a { display: block; padding: 15px; text-align: center; border-bottom: 1px solid var(--light-color); }
}
@media (max-width: 768px) {
    .section-title { font-size: 2.2rem; }
    .footer-grid { grid-template-columns: 1fr; text-align: center; }
    .about-column .social-links { justify-content: center; }
}
@media (max-width: 480px) {
    .section-title { font-size: 1.8rem; }
}

/* ============================================= */
/* --- 6. ESTILOS DO MEGA MENU (VERSÃO FINAL COM EFEITO 3D) --- */
/* ============================================= */

.nav-item-dropdown {
    position: static;
}

.mega-menu-wrapper {
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    z-index: 999;
    
    /* O DEGRADÊ GENIAL DE 4 PONTOS */
    background: linear-gradient(
        to bottom, 
        rgba(221, 221, 221, 0.97), /* Ponto 1: Topo quase sólido */
        rgba(222, 222, 222, 0.98) 30%,/* Ponto 2: Início da transição suave */
        rgba(220, 220, 220, 0.99) 70%,/* Ponto 3: Fica um pouco mais transparente */
        rgb(237, 237, 237)  /* Ponto 4: Base com a maior transparência */
    );
    
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 50px rgba(0,0,0,0.1);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    padding: 50px 0px 400px 0px; /* Mantendo seu padding personalizado */
}

/* Garante que o container interno se comporte como um bloco que pode ser alinhado */
.mega-menu-wrapper .container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Alinha todo o conteúdo para o topo do painel */
}

.mega-menu-wrapper.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.mega-menu-header {
    text-align: center;
    margin-bottom: 60px;
}

.mega-menu-header h2 {
    font-family: var(--font-headings);
    font-size: 2.5rem;
    color: var(--dark-color);
    margin-bottom: 8px;
}

.mega-menu-header p {
    font-size: 1.2rem;
    color: var(--text-color);
    max-width: 500px;
    margin: 0 auto;
}

.mega-menu-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 25px;
}

/* ESTILOS DO BOTÃO COM EFEITO 3D ATUALIZADO */
.mega-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 35px 20px;
    text-align: center;
    border-radius: 12px;
    background-color: var(--white-color);
    text-decoration: none;
    color: var(--dark-color);
    
    /* EFEITO 3D E SOMBRA MARCANTE */
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-bottom: 4px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-bottom-width 0.2s ease;
}

.mega-menu-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 35px rgba(0,0,0,0.12);
}

.mega-menu-item:active {
    transform: translateY(-1px);
    border-bottom-width: 2px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.mega-menu-item i {
    font-size: 2.5rem;
    color: var(--primary-color);
    transition: transform 0.3s ease;
}

.mega-menu-item:hover i {
    transform: scale(1.2);
}

.mega-menu-item span {
    font-family: var(--font-headings);
    color: var(--dark-color);
    font-size: 1.2rem;
    font-weight: 700;
}


/* Responsividade do Mega Menu */
@media (max-width: 1200px) {
    .mega-menu-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .mega-menu-wrapper {
        display: none;
    }
}

/* ============================================= */
/* --- ESTILOS FINAIS PARA O MEGA MENU "COMO FUNCIONA" --- */
/* ============================================= */

/* Seleciona a grid específica do menu "Como Funciona" */
#como-funciona-menu .mega-menu-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* Aplica os estilos de card 3D apenas aos itens dentro deste menu específico */
#como-funciona-menu .mega-menu-item {
    cursor: default; /* Deixa claro que não é um link */
    flex-direction: column;
    align-items: center; /* Centraliza o ícone e o título */
    text-align: center;
    padding: 40px 30px;
    
    /* AS BORDAS ARREDONDADAS CORRETAS */
    border-radius: 24px;
    
    /* EFEITO 3D E SOMBRA MARCANTE */
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-bottom: 4px solid rgba(0, 0, 0, 0.15);
    background-color: var(--white-color); /* Fundo branco sólido */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);

    /* Remove a transição de clique, pois não é um botão */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efeito de elevação no hover, agora direcionado corretamente */
#como-funciona-menu .mega-menu-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(93, 0, 255, 0.15);
}

/* Seleciona o ícone dentro deste menu */
#como-funciona-menu .mega-menu-item i {
    font-size: 2.5rem;
    margin-bottom: 15px; /* Espaço entre ícone e texto */
}

/* O container do texto para garantir o alinhamento */
#como-funciona-menu .mega-menu-item-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* O título do passo */
#como-funciona-menu .mega-menu-item-text span:first-child {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 10px;
}

/* A descrição do passo */
#como-funciona-menu .mega-menu-item-desc {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-color);
    opacity: 0.9;
    line-height: 1.6;
    max-width: 280px; /* Garante que o texto não fique muito largo */
}



/* --- CONTROLE DE VISIBILIDADE DO MENU (DESKTOP) --- */
/*----------------------------------------------------*/
/*----------------------------------------------------*/

.mobile-nav-menu {
    display: none; /* Esconde o menu mobile em telas grandes por padrão */
}

.desktop-nav {
    display: flex; /* Garante que o menu desktop original (agora com a classe .desktop-nav) continue aparecendo */
}

/* Esconde os links duplicados que agora só servem para o desktop */
.header-actions .nav-link.desktop-only,
.header-actions .btn.desktop-only {
    display: flex; /* Garante que os botões/links do header desktop fiquem visíveis */
}

/*----------------------------------------------------*/
/*----------------------------------------------------*/



/* --- ESTILO E ANIMAÇÃO DA SETA DO MENU DESKTOP --- */
.nav-arrow {
    font-size: 0.8rem; /* Tamanho pequeno e minimalista */
    margin-left: 8px;
    color: var(--primary-color); /* A cor roxa padrão do site */
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Animação suave */
}

/* Anima a seta quando o mouse passa sobre o link */
.nav-item-dropdown > a:hover .nav-arrow {
    transform: rotate(90deg); /* Gira a seta '>' para baixo 'v' */
}



/*----------------------------------------------------*/
/*----------------------------------------------------*/