@import url('https://googleapis.com');

/* ==========================================================================
   ESTILOS GERAIS DA PÁGINA INICIAL (HOME - TELA CHEIA E MODERNIZADO)
   ========================================================================== */

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

/* ==========================================================================
   1. TRAVA DE SEGURANÇA CONTRA TELA BAMBA (FIM DA ROLAGEM LATERAL)
   ========================================================================== */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    /* Corta e elimina qualquer barra de rolagem para os lados, deixando a tela firme */
    overflow-x: hidden; 
    box-sizing: border-box;
}

* {
    box-sizing: border-box;
}

body {
    background-color: #f4f4f4;
    font-family: sans-serif;
    padding-top: 55px; 
}

/* ==========================================================================
   2. MENU SUPERIOR SLIM FIXADO NO TOPO NA HOME
   ========================================================================== */
nav.topo-nav {
    background: linear-gradient(135deg, #2b3035 0%, #1a1d20 100%);
    padding: 14px 25px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); 
    border-bottom: 2px solid #8b7355; /* Bordinha dourada fina */
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99999; 
    box-sizing: border-box;
}

nav.topo-nav a,
nav.topo-nav a:link,
nav.topo-nav a:visited,
nav.topo-nav a:hover,
nav.topo-nav a:focus,
nav.topo-nav a:active {
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-family: Arial, sans-serif;
    display: inline-block;
    border-bottom: none;
}

/* ==========================================================================
   3. BARRA DE FILTROS CINZA - ESTRUTURA BASE DA CENTRALIZAÇÃO (FLEXBOX)
   ========================================================================== */
html body .novo-menu-container, 
html body .barra-filtros {
    background-color: #cccccc; 
    border-radius: 8px;
    margin: 12px 8px 15px 8px; 
    padding: 10px;
    font-family: Arial, sans-serif;
    box-sizing: border-box;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
    display: flex;
    flex-wrap: wrap;
    align-items: center; 
    gap: 8px;
}

/* ==========================================================================
   💻 4. CONFIGURAÇÕES EXCLUSIVAS PARA COMPUTADORES (TELA GRANDE)
   ========================================================================== */
@media (min-width: 769px) {
    /* Força os botões da barra a seguirem na mesma linha reta horizontal */
    html body .novo-menu-container, 
    html body .barra-filtros {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    /* Estrutura que segura os botões flutuantes */
    html body .dropdown-cidades, 
    html body .novo-dropdown-container {
        position: relative;
        display: inline-flex;
        align-items: center;
        height: 36px;
        vertical-align: middle;
    }

    /* Botões Cinzas Padrão (Home, Trans, Classificados, Anunciar) */
    html body .btn-filtro, 
    html body .novo-menu-link {
        background-color: #b8b8b8;
        color: #212529;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 13px;
        height: 36px; /* Altura unificada */
        padding: 0 15px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        text-decoration: none;
        cursor: pointer;
        box-sizing: border-box;
    }

    /* Botões Dourados de Regiões (DF e GO) */
    html body .btn-dropdown, 
    html body .novo-dropdown-container button {
        background-color: #8b7355;
        color: #ffffff;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 13px;
        height: 36px;
        padding: 0 15px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        cursor: pointer;
        box-sizing: border-box;
        border: none;
    }

    /* 🌟 O GRANDE SEGREDO: Transforma a caixinha em bloco relativo para não cobrir os botões do lado */
    html body .novo-dropdown-conteudo,
    html body .novo-menu-container .novo-dropdown-conteudo {
        position: absolute;
        top: 100%;
        left: 0;
        width: 220px;
        background-color: #ffffff;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        border-radius: 6px;
        border: 1px solid #ced4da;
        z-index: 100000;
        display: none;
        max-height: 380px;
        overflow-y: auto;
    }

    /* Links internos das cidades no PC */
    html body .novo-dropdown-conteudo a {
        color: #212529;
        padding: 10px 15px;
        border-bottom: 1px solid #f1f3f5;
        font-size: 13px;
        font-weight: 600;
        text-align: left;
        text-decoration: none;
        display: block;
    }

    html body .novo-dropdown-conteudo a:hover {
        background-color: #f8f9fa;
        color: #8b7355;
    }

    /* Ajuste da Caixa de Digitação de Pesquisa e Lupa no PC */
    html body .input-busca, 
    html body .novo-input-busca {
        padding: 0 10px;
        border-radius: 4px;
        border: 1px solid #ccc;
        font-size: 13px;
        outline: none;
        width: 160px;
        background-color: #ffffff;
        height: 36px;
        box-sizing: border-box;
    }

    html body .btn-buscar, 
    html body .novo-btn-buscar {
        background-color: #a8a8a8;
        border: none;
        color: #212529;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 13px;
        cursor: pointer;
        height: 36px;
        padding: 0 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        box-sizing: border-box;
    }
}

/* ==========================================================================
   📱 5. DIRETRIZ DE MANUTENÇÃO CONFORTÁVEL PARA CELULARES
   ========================================================================== */
@media (max-width: 768px) {
    html body .novo-menu-container, 
    html body .barra-filtros {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    /* Botões empilhados confortáveis no celular */
    html body .btn-filtro, 
    html body .novo-menu-link {
        display: block;
        width: 100%;
        height: auto;
        padding: 12px 15px;
        border-radius: 6px;
        text-align: center;
        box-sizing: border-box;
        text-decoration: none;
    }

    /* Força os blocos que envolvem os dropdowns a ocuparem a largura total do celular */
    html body .dropdown-cidades, 
    html body .novo-dropdown-container {
        display: block;
        width: 100%;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    /* Botões dourados esticados */
    html body .btn-dropdown, 
    html body .novo-dropdown-container button {
        display: block;
        width: 100%;
        height: auto;
        padding: 12px 15px;
        border-radius: 6px;
        text-align: center;
        box-sizing: border-box;
        border: none;
    }

    /* Transforma a lista lateral em uma sanfona vertical embutida abaixo do botão */
    html body .novo-dropdown-conteudo,
    html body .novo-menu-container .novo-dropdown-conteudo {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        max-height: none;   
        box-shadow: none;   
        border: 1px solid #ced4da;
        background-color: #f8f9fa;
        margin-top: 4px;
        border-radius: 6px;
        box-sizing: border-box;
        padding: 4px 0;
        display: none;
    }

    /* Links de cidades um embaixo do outro no mobile */
    html body .novo-dropdown-conteudo a,
    html body .novo-menu-container .novo-dropdown-conteudo a {
        color: #212529;
        padding: 12px 15px;
        border-bottom: 1px solid #ffffff;
        font-size: 14px;
        font-weight: 600;
        text-align: center;
        text-decoration: none;
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    html body .novo-dropdown-conteudo a:last-child {
        border-bottom: none;
    }

    /* Inputs e buscas em largura total no mobile */
    html body .input-busca, 
    html body .novo-input-busca {
        display: block;
        width: 100%;
        height: auto;
        padding: 12px 15px;
        border-radius: 6px;
        box-sizing: border-box;
    }

    html body .btn-buscar, 
    html body .novo-btn-buscar {
        display: flex;
        width: 100%;
        height: auto;
        padding: 12px 15px;
        border-radius: 6px;
        justify-content: center;
        box-sizing: border-box;
    }
}

/* ==========================================================================
   MODERNIZAÇÃO PREMIUM DO SUBMENU FLUTUANTE (DESIGN INFALÍVEL SEM TRAVAMENTOS)
   ========================================================================== */

/* 1. MANTÉM O GATILHO DE HOVER ATIVO DIRECTO NA MÃE */
.dropdown-cidades:hover .menu-suspenso {
    display: block !important; /* Força a abertura imediata ao passar o mouse */
}

/* 2. A CAIXA FLUTUANTE DO MENU */
.menu-suspenso {
    display: none;
    position: absolute;
    top: 100%;                 /* Cravado na base do botão para o mouse não perder o foco */
    left: 0;
    background-color: #ffffff;
    min-width: 240px;          
    
    /* INTERFACE PREMIUM: Cantos bem arredondados e sombra de profundidade */
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.03);
    border: 1px solid #edf2f7; 
    
    z-index: 99999;            /* Fica sempre por cima das fotos e de tudo no site */
    padding: 0;                /* Zerado para as linhas encostarem nas pontas */
    margin-top: 0;             /* Removida qualquer folga que desativava o mouse */
}

/* 3. OS LINKS DENTRO DO SUBMENU (SUPORTA TAGS DIRETAS OU ENVELOPADAS) */
.menu-suspenso a {
    color: #4a5568;            /* Cinza suave moderno idêntico ao modelo */
    padding: 12px 20px;        /* Espaçamento alto e confortável para o clique */
    text-decoration: none;
    display: block;
    font-size: 15px;
    font-weight: 500;          
    transition: all 0.2s ease; 
    text-align: left;
    
    /* O SEGREDO DO PRINT: Linha divisória cinza bem fininha entre cada cidade */
    border-bottom: 1px solid #edf2f7; 
}

/* 4. ARREDONDAMENTO DAS EXTREMIDADES (CANTOS TOP E BASE) */
.menu-suspenso a:first-of-type {
    border-top-left-radius: 11px;
    border-top-right-radius: 11px;
}

.menu-suspenso a:last-of-type {
    border-bottom: none; /* Remove a última linha para não vazar do fundo redondo */
    border-bottom-left-radius: 11px;
    border-bottom-right-radius: 11px;
}

/* 5. EFEITO HOVER PREMIUM */
.menu-suspenso a:hover {
    background-color: #fcf8f2; 
    color: #8b7355;            
    padding-left: 24px;        /* Efeito de empurrão dinâmico sutil para a direita */
}

/* 6. PONTE DE SEGURANÇA CONTRA DESCONEXÃO DO PONTEIRO */
.dropdown-cidades {
    position: relative;
    display: inline-block;
    padding-bottom: 10px;       /* Mantém uma área invisível ligando o botão ao menu */
    margin-bottom: -10px;
}
/* ==========================================================================
   SISTEMA DE GRADE EM TELA CHEIA INTEGRADO (CORRIGIDO SEM IMPORTANT)
   ========================================================================== */

/* 🌟 O DESEMPATADOR: Força o navegador a aplicar Grid e aceitar quebras de linha */
div.container-fluid div.grid-anuncios-container {
    display: grid;
    flex-direction: unset;
    flex-wrap: unset;
    grid-template-columns: repeat(7, 1fr); /* 7 Cards simétricos por linha no monitor */
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    align-items: start;
}

/* Responsividade dinâmica para telas menores e tablets */
@media (max-width: 1400px) { div.container-fluid div.grid-anuncios-container { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 1200px) { div.container-fluid div.grid-anuncios-container { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 992px)  { div.container-fluid div.grid-anuncios-container { grid-template-columns: repeat(4, 1fr); } }

/* 📱 TRAVA DE CONFIGURAÇÃO PARA CELULARES (FORÇA EXATAMENTE 3 COLUNAS POR LINHA) */
@media (max-width: 768px) {
    div.container-fluid div.grid-anuncios-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr); 
        gap: 6px;
        padding: 4px;
    }
}

@media (max-width: 480px) {
    div.container-fluid div.grid-anuncios-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr); 
        gap: 4px;
        padding: 2px;
    }
}

/* Caixa interna que envelopa o miolo de viagem */
div.grid-anuncios-container div.card-anuncio div.card-viagem-box {
    padding: 15px 5px;
    background-color: #f5ece2; /* Tom creme suave combinando com o fundo do card */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

/* Área que envolve a imagem da mala */
div.card-viagem-box div.box-mala {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 65px;
    height: 65px;
    background: transparent;
    background-color: transparent;
    border: none;
    transition: transform 0.3s ease;
}

/* 🌟 REMOVEDOR DE BORDA BRANCA: Funde o fundo branco quadrado com o bege do card */
div.box-mala img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    border: none;
    box-shadow: none;
    background: transparent;
    background-color: transparent;
    
    /* Faz o branco sumir digitalmente mantendo apenas o desenho da mala */
    mix-blend-mode: multiply; 
}

/* Efeito ao passar o mouse */
div.grid-anuncios-container div.card-anuncio:hover div.box-mala {
    transform: translateY(-4px);
}

/* ==========================================================================
   MOLDURA DA FOTO (PROPORÇÃO REBAIXADA 3:4 CONTRA CORTES)
   ========================================================================== */

.card-foto-box {
    width: 100%;
    height: auto;              
    
    /* 🌟 O SEGREDO DEFINITIVO: Mudado de 2/3 para 3/4. 
       Isso achata a altura do card automaticamente, mas mantém o enquadramento aberto 
       para não cobrir e nem cortar o topo das fotos das moças */
    aspect-ratio: 3 / 4;       
    
    /* REMOVIDO: O max-height antigo que cobria as fotos */
    max-height: none !important; 
    
    overflow: hidden;
    background-color: #eaeaea; 
    position: relative;
    display: block;
    border-radius: 8px;        
    margin-bottom: 6px;        
}

/* Renderização limpa da imagem sem achatamentos */
.card-foto-box img {
    width: 100%;
    height: 100%;
    display: block;
    
    /* Preenche o quadrado mantendo a proporção natural do corpo */
    object-fit: cover;         
    object-position: center center;
    
    transform: none; 
    transition: transform 0.3s ease;
}

.card-anuncio:hover .card-foto-box img {
    transform: scale(1.04);
}

/* Nome da Garota */
.card-nome {
    font-size: 12px;           
    font-weight: bold;
    color: #7b4b2a;            
    margin: 2px 0 6px 0;       
    padding: 0;                
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;   
}

/* Faixa de Localização na Base */
.card-faixa-cidade {
    background-color: #f7e1b5;
    color: #856404;
    font-size: 11px;           
    font-weight: bold;
    padding: 5px 0;            
    border-radius: 6px;        
    border-top: 1px solid rgba(0,0,0,0.03);
    margin-top: auto; /* Cola na base independente do conteúdo */        
}
/* ==========================================================================
   💻 INTELIGÊNCIA EXCLUSIVA PARA O MONITOR (7 COLUNAS PROPORCIONAIS)
   ========================================================================== */
@media (min-width: 992px) {
    .grid-anuncios-container { 
        grid-template-columns: repeat(7, 1fr); 
        gap: 8px; 
        align-items: start;
    }
    
    /* REMOVIDO !IMPORTANT: O caminho específico garante a aplicação nativa */
    div.grid-anuncios-container div.card-foto-box {
        aspect-ratio: 3 / 4;
        max-height: none;
    }
}

/* ==========================================================================
   🖤 RODAPÉ CORPORATIVO DE LUXO SIMÉTRICO AND RESPONSIVO
   ========================================================================== */

/* Container Principal do Rodapé */
footer, 
.rodape-site {
    background-color: #0b0b0e; /* Preto piano profundo ultra-elegante */
    border-top: 2px solid #8b7355; /* Divisória ouro/bronze de assinatura */
    color: #a0aec0;
    padding: 50px 20px 30px 20px;
    font-family: 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    margin-top: 60px;
}

/* Organização das Colunas em Grid Responsivo */
.rodape-grid {
    max-width: 1200px;
    margin: 0 auto 40px auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
    text-align: left;
}

/* Títulos das Colunas */
.rodape-coluna h4 {
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-top: 0;
    margin-bottom: 18px;
    position: relative;
    padding-bottom: 6px;
}

/* Linha sutil abaixo do título da coluna */
.rodape-coluna h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 35px;
    height: 2px;
    background-color: #8b7355;
}

/* Textos e Parágrafos internos */
.rodape-coluna p {
    font-size: 13px;
    line-height: 1.6;
    color: #718096;
    margin: 0;
}

/* Links do Menu do Rodapé */
.rodape-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rodape-links li {
    margin-bottom: 10px;
}

.rodape-links a {
    color: #a0aec0;
    text-decoration: none;
    transition: color 0.2s ease;
    font-size: 13.5px;
}

.rodape-links a:hover {
    color: #c8a27c; /* Tom champanhe acetinado ao passar o mouse */
    text-decoration: underline;
}

/* Faixa Inferior de Direitos Autorais e Avisos Legais */
.rodape-base {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 25px;
    border-top: 1px solid #1a1a24;
    text-align: center;
    font-size: 12px;
}

.rodape-links-legais {
    margin-bottom: 15px;
}

.rodape-links-legais a {
    color: #718096;
    text-decoration: none;
    margin: 0 12px;
}

.rodape-links-legais a:hover {
    color: #ffffff;
}

/* Caixa Vermelha Alerta de Maioridade + Termos Legais */
.rodape-aviso-legal {
    font-size: 11px;
    line-height: 1.6;
    color: #4a5568;
    max-width: 950px;
    margin: 15px auto 0 auto;
}

.rodape-alerta-18 {
    color: #f87171; /* Vermelho aviso sofisticado, sem ser gritante */
    font-weight: 700;
    margin-top: 15px;
    letter-spacing: 0.5px;
}

/* Ajustes automáticos para Celulares (Alinha tudo no centro) */
@media (max-width: 768px) {
    .rodape-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 25px;
    }
    .rodape-coluna h4::after {
        left: 50%;
        transform: translateX(-50%);
    }
}


/* ==========================================================================
   🔒 MODAL RESTRITO EXCLUSIVO - SEGURO, PROFISSIONAL E COMPATÍVEL COM NOTEBOOK
   ========================================================================= */

/* Fundo escuro transparente e elegante */
body .balao-modal-fundo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.65); 
    backdrop-filter: blur(4px); 
    z-index: 9999999; 
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    box-sizing: border-box;
}

/* Card Principal com proteção de altura para Notebooks */
body .balao-modal-card {
    background-color: #ffffff; 
    font-family: 'Inter', system-ui, -apple-system, sans-serif; 
    width: 100%;
    max-width: 520px;          
    max-height: 92vh;          
    overflow-y: auto;          
    padding: 35px 30px; 
    border-radius: 12px;       
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); 
    box-sizing: border-box;
    text-align: left;          
    animation: abrirBalaoSuave 0.3s ease-out;
    position: relative;
}

@keyframes abrirBalaoSuave {
    from { transform: scale(0.97); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Cabeçalho (Alinhamento do Ícone + Título) */
body .balao-modal-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
}

body .icon-cadeado {
    flex-shrink: 0;
    margin-top: 2px;
}

body .balao-modal-titulo {
    font-size: 22px; 
    font-weight: 700; 
    color: #0f172a;            
    line-height: 1.3;
    margin: 0;
}

/* Textos e Parágrafos */
body .balao-modal-texto {
    font-size: 15px; 
    line-height: 1.6; 
    color: #475569;            
    margin: 0 0 16px 0; 
}

body .balao-modal-texto-chamada {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 12px 0;
}

/* Lista de Termos */
body .balao-modal-lista {
    margin: 0 0 24px 0;
    padding-left: 20px;
    list-style-type: disc;
}

body .balao-modal-lista li {
    font-size: 15px;
    line-height: 1.6;
    color: #475569;
    margin-bottom: 8px;
}

/* Estilização dos Links */
body .balao-modal-card a {
    color: #2563eb;
    text-decoration: underline;
    font-weight: 500;
}

body .balao-modal-card a:hover {
    color: #1d4ed8;
}

/* Área dos Botões */
body .balao-modal-botoes {
    display: flex;
    flex-direction: row; 
    gap: 12px; 
    width: 100%;
    margin-bottom: 20px;
    box-sizing: border-box;
}

/* Base Geral dos Botões */
body .btn-balao {
    border: none;
    padding: 14px 20px; 
    font-size: 15px; 
    font-weight: 600; 
    border-radius: 6px; 
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

/* Botão Entrar */
body .btn-balao-entrar {
    flex: 1.8; 
    background-color: #0f172a; 
    color: #ffffff; 
}

body .btn-balao-entrar:hover {
    background-color: #1e293b;
}

/* Botão Sair */
body .btn-balao-sair {
    flex: 1; 
    background-color: #f8fafc; 
    color: #64748b; 
    border: 1px solid #cbd5e1;
}

body .btn-balao-sair:hover {
    background-color: #f1f5f9;
    color: #334155;
}

/* Nota Jurídica da LGPD abaixo dos botões (Estilo Rodapé) */
body .balao-modal-nota-lgpd {
    font-size: 13.5px;
    line-height: 1.5;
    color: #64748b;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9; 
    text-align: justify;
}

/* ==========================================================================
   🛠️ ESTILIZAÇÃO COMPLEMENTAR: POP-UPS DE TERMOS E PRIVACIDADE INLINE (AJUSTADO)
   ========================================================================= */
.popup-legal-overlay {
    display: none; /* Invisível por padrão */
    position: fixed;            /* Ajustado: Fixado na tela para ignorar distorções do fundo */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centraliza perfeitamente no meio do notebook */
    width: 90%;
    max-width: 520px;           /* Ajustado: Força o pop-up a ter o mesmo tamanho elegante do cartão */
    height: auto;
    max-height: 85vh;           /* Impede que o texto vaze para baixo no notebook */
    background-color: #ffffff;  
    border-radius: 12px;
    z-index: 10000000;          /* Fica por cima do modal principal */
    padding: 24px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    flex-direction: column;
}

/* Ajuste fino para os cards de conteúdo dos pop-ups */
.popup-legal-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.popup-legal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 12px;
    margin-bottom: 16px;
}

.popup-legal-header h3 {
    margin: 0;
    font-size: 18px;
    color: #0f172a;
    font-weight: 700;
}

.popup-legal-fechar {
    background: none;
    border: none;
    font-size: 28px;
    color: #94a3b8;
    cursor: pointer;
    line-height: 1;
}

.popup-legal-fechar:hover {
    color: #334155;
}

.popup-legal-conteudo {
    overflow-y: auto; /* Barra de rolagem interna exclusiva para os textos longos */
    flex-grow: 1;
    padding-right: 4px;
}

.popup-legal-conteudo p {
    font-size: 13.5px;
    line-height: 1.6;
    color: #334155;
    margin-top: 0;
    margin-bottom: 14px;
    text-align: justify;
}

/* Otimização para telas de Celular */
@media (max-width: 480px) {
    body .balao-modal-card {
        padding: 24px 20px;
    }
    body .balao-modal-titulo {
        font-size: 19px;
    }
    body .balao-modal-botoes {
        flex-direction: column-reverse; 
    }
    .popup-legal-overlay {
        width: 95%;
        max-height: 90vh;
    }
}

/* ==========================================================================
   SISTEMA DE GRADE DE ANÚNCIOS (CORREÇÃO COMPLETA DE ALINHAMENTO MOBILE)
   ========================================================================= */

.grid-anuncios-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Mantém as 3 colunas perfeitas */
    gap: 6px;                             /* Espaçamento sutil entre os cards */
    padding: 0 4px;                       /* Pequeno respiro nas laterais para não grudar na tela */
    width: 100%;
    box-sizing: border-box;               /* Garante que o padding não jogue o grid para fora */
    align-items: start;
}

/* 💻 COMPORTAMENTO PARA MONITOR/COMPUTADOR (Telas Grandes) */
@media (min-width: 992px) {
    .grid-anuncios-container { 
        grid-template-columns: repeat(7, 1fr); 
        gap: 8px; 
        padding: 0;                       /* Zera o respiro extra no computador */
        align-items: start;
    }
}

/* ==========================================================================
   ESTILIZAÇÃO DOS CARTÕES DE ANÚNCIOS (LARGURA FLEXÍVEL AJUSTADA)
   ========================================================================== */

.card-anuncio {
    /* REMOVIDO: O 'width: 100% !important' que quebrava o grid no celular */
    background-color: #f3eae1; 
    border-radius: 12px;       
    padding: 4px;                         /* Comprime o card para caber tudo no mobile */
    border: 1px solid #e1d3c5;
    height: auto;              
    display: flex;
    flex-direction: column;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
    transition: transform 0.2s ease;
    box-sizing: border-box;               /* Protege o tamanho interno do cartão */
}

/* Link de clique do card */
.card-link {
    text-decoration: none;
    display: flex;
    flex-direction: column;
}

/* Tarja do Topo (Data e ID) - Padrão Celular */
.card-topo {
    background: #3a3a3a;
    border-radius: 4px;
    font-weight: bold;
    color: #ffffff;
    line-height: 1.3;
    text-align: center;
    letter-spacing: 0.5px;
    font-size: 9px;
    padding: 4px 2px;
}

/* Caixa Proporcional da Imagem (Proporção vertical 2:3) */
.card-foto-box {
    position: relative;
    overflow: hidden;
    background: #eaeaea;
    text-align: center;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;
    min-height: unset;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
}



/* ==========================================================================
   ELEMENTOS INTERNOS DO STATUS VIAGEM (MODERNIZADO PREMIUM E TRANSPARENTE)
   ========================================================================== */

/* Caixa interna que envelopa o miolo de viagem */
div.grid-anuncios-container div.card-anuncio div.card-viagem-box {
    padding: 15px 5px;
    background-color: #f5ece2; /* Tom creme suave combinando com o fundo do card */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

/* 👤 TEXTO VIAJANDO: Limpo, elegante, sem fontes amadoras e com letras espaçadas */
div.card-viagem-box div.texto-viajando {
    font-family: Arial, sans-serif;
    color: #7a3d21;             /* Mesma cor terracota elegante usada no nome */
    font-weight: bold;
    text-transform: uppercase;  /* Letras maiúsculas organizadas */
    letter-spacing: 1px;        /* Espaçamento moderno entre as letras */
    margin-bottom: 12px;
    line-height: 1;
    font-size: 14px;            /* Perfeito e nítido no celular */
}

/* 🧳 CAIXINHA DA MALA: Força fundo transparente e remove bordas herdadas do Bootstrap */
div.card-viagem-box div.box-mala {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 65px;
    height: 65px;
    background: transparent;
    background-color: transparent;
    border: none;
    transition: transform 0.3s ease;
}

/* Garante que a imagem ignore qualquer preenchimento branco residual */
div.box-mala img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    background: transparent;
    background-color: transparent;
    border: none;
    box-shadow: none;
}

/* 🚀 EFEITO PREMIUM: Mala flutua de leve para cima quando passa o mouse no card */
div.grid-anuncios-container div.card-anuncio:hover div.box-mala {
    transform: translateY(-4px);
}

/* ==========================================================================
   💻 INTELIGÊNCIA DE AMPLIAÇÃO PARA O COMPUTADOR (7 COLUNAS)
   ========================================================================== */
@media (min-width: 992px) {
    .grid-anuncios-container .texto-viajando {
        font-size: 13px;        /* Ajuste de escala para o grid do computador */
        letter-spacing: 0.5px;
    }
    
    .grid-anuncios-container .box-mala {
        width: 55px;            /* Mantém a proporção baixa nas 7 colunas */
        height: 55px;
    }
}

/* Nome da Garota - Padrão Celular */
.card-nome {
    font-weight: bold;
    color: #7a3d21;
    margin-top: 6px;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 2px;
    font-family: Arial, sans-serif;
    text-transform: capitalize;
    font-size: 11px;
}

/* ==========================================================================
   💻 INTELIGÊNCIA DE AMPLIAÇÃO PARA O COMPUTADOR (TELAS GRANDES)
   ========================================================================== */
@media (min-width: 992px) {
    /* Ativa as 7 colunas solicitadas */
    .grid-anuncios-container { 
        grid-template-columns: repeat(7, 1fr); 
        gap: 8px; 
    }
    /* Aumenta a letra do topo */
    .grid-anuncios-container .card-topo {
        font-size: 13px;
        padding: 6px 2px;
    }
    /* Aumenta a letra do Viajando */
    .grid-anuncios-container .texto-viajando {
        font-size: 14px;
    }
    /* Aumenta a mala para 60px */
    .grid-anuncios-container .box-mala {
        width: 60px;
        height: 60px;
    }
    /* Aumenta a letra do Nome */
    .grid-anuncios-container .card-nome {
        font-size: 14px;
    }
}





/* Tarja Inferior do Card (Cidade) - Padrão Celular */
.card-faixa-cidade {
    background: #3a3a3a;
    color: #ffffff;
    border-radius: 4px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 9px;
    padding: 4px 2px;
}

/* Ampliação da faixa da cidade para o Computador (Telas Grandes) */
@media (min-width: 992px) {
    .grid-anuncios-container .card-faixa-cidade {
        font-size: 12px;
        padding: 5px 2px;
    }
}


/* ==========================================================================
   MÓDULO DO NOVO MENU HAMBÚRGUER RESPONSIVO
   ========================================================================== */

/* Container Principal do Menu (Substitui a barra-filtros antiga) */
.novo-menu-container {
    background-color: #cccccc;
    border-radius: 8px;
    margin: 10px 15px 15px 15px;
    padding: 10px;
    font-family: Arial, sans-serif;
    box-sizing: border-box;
}

/* Linha do Topo (Busca + Hambúrguer alinhados na mesma linha) */
.novo-menu-topo-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

/* Caixa de texto de busca */
.novo-input-busca {
    font-size: 13px;
    height: 36px;
    border-radius: 4px;
    border: 1px solid #ccc;
    padding: 0 10px;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    outline: none;
}

/* Botão do formulário de busca */
.novo-btn-buscar {
    background-color: #a8a8a8;
    border: none;
    color: #212529;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 13px;
    padding: 0 15px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
}

/* Botão de 3 listras (Aparece apenas no celular) */
.novo-btn-hamburger {
    background: #3a3a3a;
    border: none;
    border-radius: 4px;
    width: 42px;
    height: 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}
.novo-btn-hamburger div {
    width: 22px;
    height: 2px;
    background: white;
}

/* Área que guarda as opções (Escondida por padrão no celular) */
.novo-menu-retratil {
    display: none; 
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    width: 100%;
}

/* Estilo padrão de links e botões do menu */
.novo-menu-link {
    background-color: #b8b8b8;
    border: none;
    color: #212529;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 13px;
    padding: 10px;
    border-radius: 4px;
    text-decoration: none;
    text-align: center;
    display: block;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
}

/* Caixa com a lista de cidades (Dropdown) */
.novo-dropdown-conteudo {
    display: none; 
    background-color: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 12px;
    margin-top: 4px;
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.novo-dropdown-conteudo a {
    color: #4a5568;
    padding: 12px 20px;
    text-decoration: none;
    display: block;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    border-bottom: 1px solid #edf2f7;
}
.novo-dropdown-conteudo a:last-child {
    border-bottom: none;
}

/* ==========================================================================
   💻 REGRAS DE COMPORTAMENTO EXCLUSIVAS PARA O COMPUTADOR
   ========================================================================== */
@media (min-width: 992px) {
    .novo-menu-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
    }
    .novo-menu-topo-linha {
        width: auto;
        flex: 1;
        max-width: 320px;
    }
    .novo-btn-hamburger {
        display: none; /* Some com as 3 listras no monitor */
    }
    .novo-menu-retratil {
        display: flex; /* Deixa os botões sempre visíveis na horizontal */
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        gap: 8px;
        margin-top: 0;
        width: auto;
        flex: 2;
    }
    .novo-menu-link {
        width: auto;
        white-space: nowrap;
        padding: 6px 15px;
    }
    .novo-dropdown-container {
        position: relative;
    }
    .novo-dropdown-conteudo {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 240px;
        z-index: 9999;
    }
    .novo-dropdown-conteudo a {
        text-align: left;
    }
    /* No computador, abre a lista flutuante apenas passando o mouse */
    .novo-dropdown-container:hover .novo-dropdown-conteudo {
        display: block;
    }
}
/* ==========================================================================
   MÁSCARA PREMIUM DE PRIVACIDADE - ESTILO FIEL SOCINQUENTA (OVAL PREMIUM)
   ========================================================================== */

/* 🌟 ESPECIFICIDADE MÁXIMA NATIVA: Formato de elipse vertical focado no rosto */
div.container-fluid div.grid-anuncios-container div.card-anuncio a.card-link div.card-foto-box div.mascara-rosto-premium {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
    
    /* 🎯 SEGREDO DO MODELO: Trocado de 'circle' para 'ellipse' vertical, travando as bordas de forma nítida 
       Focado em 50% horizontal e 32% vertical, descendo o desfoque de forma concentrada sobre a face */
    mask-image: radial-gradient(ellipse 26% 38% at 50% 33%, black 45%, rgba(0, 0, 0, 0.2) 75%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 26% 38% at 50% 33%, black 45%, rgba(0, 0, 0, 0.2) 75%, transparent 100%);
    
    /* Vidro fosco acetinado de alta densidade para esconder totalmente as feições */
    backdrop-filter: blur(25px) brightness(0.97);
    -webkit-backdrop-filter: blur(25px) brightness(0.97);
    
    /* Película sutil para dar o acabamento fosco profissional idêntico ao print */
    background: rgba(255, 255, 255, 0.03);
    
    pointer-events: none; 
    z-index: 5; 
}



/* ==========================================================================
   📌 BARRA DE FILTROS FIXA NO TOPO (NAVEGAÇÃO PREMIUM CONTÍNUA)
   ========================================================================== */
.grid-filtros-container,
.barra-filtros,
.filtros-container,
.box-filtros {
    position: sticky;
    top: 0;                    /* Trava e gruda a barra exatamente no topo do navegador */
    z-index: 999;              /* Força os filtros a ficarem por cima das fotos ao rolar */
    background-color: #ffffff; /* Fundo branco sólido para as fotos não vazarem por trás */
    padding: 14px 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06); /* Sombra sutil de profundidade ao flutuar */
    border-bottom: 1px solid #ebdcb9; /* Linha fina champagne de assinatura */
}

/* ==========================================================================
   💬 BOTÃO FLUTUANTE DO WHATSAPP PREMIUM (SUPORTE DO PORTAL)
   ========================================================================== */
.btn-whatsapp-suporte {
    position: fixed;
    bottom: 30px;            /* Afasta 30px da borda inferior da tela */
    right: 30px;             /* Move para o lado direito padrão de suporte */
    background-color: #25d366; /* Aplica o verde oficial do WhatsApp */
    color: #ffffff;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 50px;     /* Formato arredondado de pílula luxuosa */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Segoe UI', Roboto, sans-serif;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35); /* Sombra suave de profundidade */
    z-index: 99999;          /* Garante que fique por cima de todas as mídias */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animação suave de elevação ao passar o mouse ou o dedo */
.btn-whatsapp-suporte:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 30px rgba(37, 211, 102, 0.5);
    background-color: #20ba59;
    color: #ffffff;
}

/* Configuração responsiva para celulares (Vira um botão circular compacto) */
@media (max-width: 480px) {
    .btn-whatsapp-suporte {
        padding: 14px;       
        bottom: 20px;
        right: 20px;
    }
    .btn-whatsapp-suporte span {
        display: none;       /* Oculta o texto e mantém apenas o ícone no mobile */
    }
}


/* ==========================================================================
   🎯 ANIMAÇÃO DE ONDAS PULSANTES PREMIUM PARA OS BOTÕES DE CONTATO
   ========================================================================== */

/* 🟢 1. ONDAS DO WHATSAPP (Efeito Neon Verde Inteligente) */
.pulse-contato-verde {
    position: relative;
    animation: pulsoVerdeEfeito 2s infinite;
}

@keyframes pulsoVerdeEfeito {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}