/* ========================================== */
/* IMPORTAÇÃO DE FONTES E VARIÁVEIS GLOBAIS   */
/* ========================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
    --apple-bg: #F5F5F7;
    --apple-text: #1D1D1F;
    --apple-blue: #0071E3;
    --glass: rgba(255, 255, 255, 0.85);
    --border: rgba(0, 0, 0, 0.08);
}

* { 
    box-sizing: border-box; 
    -webkit-font-smoothing: antialiased; 
    font-family: 'Plus Jakarta Sans', sans-serif; 
    letter-spacing: -0.02em; 
}

body { 
    background: radial-gradient(at 0% 0%, #f0f4ff 0, transparent 40%), 
                radial-gradient(at 100% 0%, #fff0f0 0, transparent 40%), 
                var(--apple-bg);
    color: var(--apple-text); 
    margin: 0; 
    padding: 120px 20px 40px;
}

/* ========================================== */
/* MENU SUPERIOR (NAVBAR & DROPDOWN)          */
/* ========================================== */
.navbar {
    position: fixed; top: 0; left: 0; width: 100%;
    background: var(--glass); 
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 5%; z-index: 1500; box-shadow: 0 4px 30px rgba(0,0,0,0.03);
}

.nav-logo-container { display: flex; align-items: center; cursor: pointer; text-decoration: none; }
.nav-logo-container img { height: 38px; width: auto; object-fit: contain; }

.menu-container { position: relative; }
.menu-btn {
    background: rgba(0,0,0,0.05); border: none; padding: 12px 20px;
    border-radius: 14px; font-weight: 700; font-size: 1rem; cursor: pointer;
    transition: 0.3s; color: var(--apple-text); display: flex; align-items: center; gap: 8px;
}
.menu-btn:hover { background: rgba(0,0,0,0.1); transform: scale(1.02); }

.dropdown-menu {
    display: none; position: absolute; top: 120%; right: 0;
    background: rgba(255, 255, 255, 0.95); 
    backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px);
    border-radius: 18px; border: 1px solid var(--border);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1); flex-direction: column;
    overflow: hidden; min-width: 260px; z-index: 2000;
}
.dropdown-menu a {
    padding: 18px 20px; color: var(--apple-text); text-decoration: none;
    font-weight: 600; font-size: 0.95rem; border-bottom: 1px solid rgba(0,0,0,0.05);
    cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 12px;
}
.dropdown-menu a:hover { background: #F5F5F7; color: var(--apple-blue); padding-left: 25px; }
.dropdown-menu a:last-child { border-bottom: none; }

@media (max-width: 600px) { .navbar { padding: 15px 20px; } }

/* ========================================== */
/* ESTRUTURA PRINCIPAL E FORMULÁRIO           */
/* ========================================== */
.container { max-width: 1200px; margin: 0 auto; }

.header { text-align: center; margin-bottom: 50px; }
.header h1 { font-size: 3.8rem; font-weight: 800; margin: 0; letter-spacing: -0.05em; background: linear-gradient(180deg, #000 0%, #444 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.header p { color: #86868B; font-size: 1.2rem; margin-top: 10px; font-weight: 500; }

.glass-panel {
    background: var(--glass); backdrop-filter: blur(50px) saturate(200%); border-radius: 35px;
    padding: 45px; border: 1px solid var(--border); box-shadow: 0 30px 60px rgba(0,0,0,0.05); margin-bottom: 40px;
}

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.field { display: flex; flex-direction: column; }
label { font-size: 0.75rem; font-weight: 800; margin-bottom: 10px; color: var(--apple-text); text-transform: uppercase; opacity: 0.6; }

select, input[type="text"], input[type="date"] {
    border: 1px solid rgba(0,0,0,0.1); padding: 16px; border-radius: 14px;
    background: #fff; font-size: 0.95rem; outline: none; transition: 0.3s;
    cursor: pointer; font-weight: 500; width: 100%;
}
select:focus, input:focus { border-color: var(--apple-blue); box-shadow: 0 0 0 4px rgba(0,113,227,0.12); }

.full-row { grid-column: 1 / -1; }

.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; background: #fff; padding: 20px; border-radius: 14px; border: 1px solid rgba(0,0,0,0.1); }
.cb-label { display: flex; align-items: center; gap: 10px; font-size: 0.95rem; font-weight: 600; cursor: pointer; text-transform: none; opacity: 1; color: var(--apple-text); margin: 0;}
.cb-label input { width: 22px; height: 22px; cursor: pointer; accent-color: var(--apple-blue); }

.btn-main {
    background: var(--apple-blue); color: #fff; border: none; padding: 22px;
    border-radius: 18px; font-weight: 700; font-size: 1.15rem; cursor: pointer; transition: 0.4s;
    box-shadow: 0 10px 20px rgba(0,113,227,0.2); margin-top: 10px; width: 100%;
}
.btn-main:hover { transform: scale(1.01); filter: brightness(1.1); }

/* ========================================== */
/* RESULTADOS E CARDS DE PAÍSES               */
/* ========================================== */
#resultado { display: none; margin-top: 60px; animation: slideUp 0.7s ease; }
.result-card {
    background: #fff; border-radius: 30px; padding: 35px; margin-bottom: 25px;
    border: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; transition: 0.4s;
}
.result-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.04); border-color: var(--apple-blue); }
.score-num { font-size: 3.2rem; font-weight: 900; color: var(--apple-blue); line-height: 1; text-align: right;}
.score-lbl { font-size: 0.8rem; color: #86868B; text-transform: uppercase; font-weight: 700; display: block; margin-top: 5px;}

/* ========================================== */
/* JANELAS MODAIS (VAGAS, PASSAGENS, MERCADO) */
/* ========================================== */
.modal-fullscreen { 
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: #F5F5F7; z-index: 2000; overflow-y: auto; 
    animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1); padding-bottom: 100px; 
}
.modal-header { 
    background: rgba(245, 245, 247, 0.8); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); 
    position: sticky; top: 0; padding: 20px 40px; border-bottom: 1px solid rgba(0,0,0,0.05); 
    display: flex; justify-content: space-between; align-items: center; z-index: 2001; 
}
.modal-header h2 { margin: 0; font-size: 1.8rem; font-weight: 800; letter-spacing: -0.04em; }
.btn-fechar { 
    background: #E5E5EA; border: none; padding: 10px 20px; border-radius: 100px; 
    font-weight: 700; color: #1D1D1F; cursor: pointer; transition: 0.2s; 
}
.btn-fechar:hover { background: #D1D1D6; }

/* Estilos específicos do Mapeamento de Mercados */
.card-mercado { background: #fff; border-radius: 24px; padding: 35px; box-shadow: 0 10px 20px rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.05); margin-bottom: 25px; transition: 0.3s; }
.card-mercado:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); border-color: var(--apple-blue); }
.hub-title { font-size: 1.5rem; font-weight: 800; color: #1D1D1F; margin: 0 0 15px 0; display: flex; align-items: center; gap: 10px; }
.hub-desc { color: #3A3A3C; font-size: 1.05rem; line-height: 1.6; margin-bottom: 20px; }
.hub-empresas { background: #F5F5F7; padding: 15px 20px; border-radius: 12px; font-weight: 600; color: #0071E3; font-size: 0.95rem; }
.tag-mercado { background: #1D1D1F; color: #fff; padding: 6px 12px; border-radius: 8px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 800; display: inline-block; margin-bottom: 15px; }

/* Animações Globais */
@keyframes slideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ========================================== */
/* LOGO GIGANTE NO TOPO (HERO SECTION)        */
/* ========================================== */
.hero-logo {
    max-width: 450px; 
    width: 100%; 
    height: auto;
    margin-top: 20px; /* Dá um respiro em relação ao menu lá no topo */
    margin-bottom: -30px; /* Puxa a logo para colar na frase de baixo! */
    filter: drop-shadow(0 15px 30px rgba(0, 113, 227, 0.15)); 
    animation: floatLogo 4s ease-in-out infinite;
}

/* Animação que faz a logo "respirar" na tela */
@keyframes floatLogo {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
    100% { transform: translateY(0px); }
}

/* Esconde o título em texto para deixar só a imagem brilhar */
.header h1 { 
    display: none; 
}

/* ========================================== */
/* AJUSTE DE MARGENS FANTASMAS                */
/* ========================================== */

/* Diminui o espaço entre todo o cabeçalho e a caixa de vidro do formulário */
.header {
    margin-bottom: 20px !important; /* Antes era 50px */
}

/* Puxa a frase "A arquitetura definitiva..." para colar na logo */
.header p {
    margin-top: 0px !important; 
}

/* Força a logo a descer mais um pouco ignorando limites */
.hero-logo {
    margin-bottom: -40px !important; 
}

/* ==============================================================
   📱 VERSÃO MOBILE (SMARTPHONES E TABLETS)
============================================================== */
@media (max-width: 768px) {
    /* 1. Ajustes do Formulário e Cabeçalho */
    .header h1 {
        font-size: 2.2rem; /* Diminui o título principal */
    }
    .form-grid {
        grid-template-columns: 1fr; /* Empilha as perguntas do formulário */
        gap: 15px;
    }
    .field label {
        font-size: 0.9rem;
    }
    
    /* 2. Ajustes dos Botões Principais */
    #resultado {
        text-align: center;
    }
    #resultado > div {
        flex-direction: column;
        gap: 15px;
    }
    #resultado button {
        width: 100% !important; /* Botões largos para clicar com o polegar */
    }

    /* 3. Ajustes do Card de Resultado (Os 10 Países) */
    .result-card h3 {
        font-size: 1.5rem !important;
    }
    .result-card > div:first-child {
        flex-direction: column; /* Coloca a nota embaixo do nome do país */
        text-align: left !important;
    }
    .result-card > div:first-child > div:last-child {
        text-align: left !important;
        margin-top: 10px;
    }

    /* 4. Ajustes do Dossiê PRO Master (A Tela do Dinheiro) */
    #modalDossie > div {
        padding: 25px 20px !important; /* Reduz o espaço em branco nas laterais */
        border-radius: 16px !important;
    }
    #modalDossie h2 {
        font-size: 2.2rem !important; /* Diminui o nome do país no dossiê */
    }
    #modalDossie .display-grid, 
    #modalDossie div[style*="display:grid"] {
        grid-template-columns: 1fr !important; /* Empilha as caixas financeiras e a timeline */
        gap: 15px !important;
    }
    #modalDossie h3 {
        font-size: 1.4rem !important;
    }
    #modalDossie button {
        width: 100% !important; /* Botão de baixar PDF gigante no celular */
        padding: 15px 20px !important;
        font-size: 1rem !important;
    }
    #modalDossie > div > div:first-child {
        padding: 25px 20px !important; /* Ajusta o header preto do Dossiê PRO */
    }

    /* 5. Ajustes das Telas de Vagas, Mercado e Passagens */
    .modal-fullscreen {
        padding: 20px 10px !important;
    }
    .modal-fullscreen h1 {
        font-size: 2rem !important;
    }
    .modal-header h2 {
        font-size: 1.2rem !important;
    }
}

/* ============================================================== */
/* TEMA TRAVGO: MODERN GLASSMORPHISM UI                           */
/* ============================================================== */

/* 1. Fundo Dinâmico e Vibrante (Estilo App de Viagem) */
body {
    background-image: 
        /* Gradiente para garantir leitura + Foto Premium de Fundo */
        linear-gradient(135deg, rgba(230, 240, 255, 0.4) 0%, rgba(255, 235, 240, 0.4) 100%), 
        url('https://images.unsplash.com/photo-1436491865332-7a61a109cc05?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* 2. O Verdadeiro Vidro Fosco (Cartão do Simulador e Painéis) */
.card-simulador, #view-galeria .modal-header, #view-passagens .modal-header {
    background: rgba(255, 255, 255, 0.25) !important; /* Mais transparente */
    backdrop-filter: blur(25px) saturate(150%) !important; /* Desfoque forte e cores vivas atrás */
    -webkit-backdrop-filter: blur(25px) saturate(150%) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important; /* Borda de vidro iluminada */
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    border-radius: 32px !important; /* Bordas mais arredondadas, típico do TravGo */
}

/* 3. Inputs de Vidro (Caixas de texto e seleção) */
input[type="text"], input[type="number"], select {
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.02) !important;
    color: #1D1D1F !important;
    border-radius: 16px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

input:focus, select:focus {
    background: rgba(255, 255, 255, 0.8) !important;
    border-color: #0071E3 !important;
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15) !important;
    outline: none;
}

/* 4. O Botão Mágico (Gradiente Fluido e Pulsante) */
button[type="submit"], .btn-principal {
    background: linear-gradient(135deg, #0071E3 0%, #00C6FF 100%) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 15px 30px rgba(0, 113, 227, 0.3), inset 0 2px 0 rgba(255,255,255,0.2) !important;
    border-radius: 50px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 900 !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; /* Efeito mola */
}

button[type="submit"]:hover, .btn-principal:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 20px 40px rgba(0, 113, 227, 0.4), inset 0 2px 0 rgba(255,255,255,0.3) !important;
}

/* 5. Cartões de Resultado em Vidro */
.result-card {
    background: rgba(255, 255, 255, 0.35) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.05) !important;
    border-radius: 24px !important;
    transition: transform 0.3s ease, background 0.3s ease !important;
}

.result-card:hover {
    transform: translateY(-5px) !important;
    background: rgba(255, 255, 255, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
}

/* 6. Textos mais nítidos para contrastar com o vidro */
h1, h2, h3, label {
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.8);
}

/* Efeito Hover nos Cartões da Galeria (TravGo Style) */
.travgo-card {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
.travgo-card:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 25px 50px rgba(0,0,0,0.2) !important;
}
.travgo-card:hover .travgo-img {
    transform: scale(1.1); /* Zoom suave na foto do país */
}