/* LOP DIVULGAÇÕES — CSS PARA PC / DESKTOP */
/* Regras de desktop ficam aqui. Regras max-width/mobile ficam no mobile.css. */

/* Este arquivo reúne as regras gerais e de desktop do projeto. */



/* ===== 01-base.css ===== */
/* ==================================================
   CONFIGURAÇÕES GERAIS
   Arquivo modular: 01-base.css
   ================================================== */

/* ==================================================
   CONFIGURAÇÕES GERAIS
   ================================================== */

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

body {
    font-family: Arial, sans-serif;
    background: #f5f7fa;
    color: #222;
}

a {
    text-decoration: none;
}


.menu-conta-dropdown img {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
    display: block;
}

.icone-categoria {
    width: 48px !important;
    height: 48px !important;
    object-fit: contain !important;
}

.opcao-icone img {
    width: 38px !important;
    height: 38px !important;
    object-fit: contain !important;
}


/* ===== 02-cabecalho.css ===== */
/* ==================================================
   CABEÇALHO E MENU BASE
   Arquivo modular: 02-cabecalho.css
   ================================================== */

/* ==================================================
   CABEÇALHO / MENU
   ================================================== */

.cabecalho {
    background-image: url("../img/icones/fundo-menu.png") !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    min-height: 70px;
    padding: 16px 5%;
    box-sizing: border-box;

    position: relative;
    z-index: 1000;
}

.logo {
    font-size: 24px;
    font-weight: 800;
    color: #222;
}

.logo span {
    color: #1769ff;
}

.menu {
    display: flex;
    gap: 25px;
}

.menu a {
    color: #333;
    font-weight: 600;
}

.menu a:hover {
    color: #1769ff;
}

.acoes-cabecalho {
    display: flex;
    align-items: center;
    gap: 10px;
}

.conta-menu {
    position: relative;
}

.menu-conta-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 220px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 12px 35px rgba(0,0,0,.14);
    z-index: 1000;
}

.menu-conta-dropdown.aberto {
    display: block;
}

.menu-conta-dropdown a,
.menu-conta-dropdown button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #222;
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.menu-conta-dropdown a:hover,
.menu-conta-dropdown button:hover {
    background: #f1f5ff;
    color: #1769ff;
}

.menu-conta-dropdown button {
    color: #dc2626;
}

.menu-conta-dropdown button:hover {
    background: #fff1f2;
    color: #dc2626;
}

.botao-conta {
    background: white;
    color: #1769ff;
    border: 2px solid #1769ff;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: bold;
    transition: 0.2s;
}

.botao-conta:hover,
.botao-conta.logado {
    background: #1769ff;
    color: white;
}

.botao-anunciar {
    display: none !important;
    background: #1769ff;
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: bold;
}


/* ===== 03-banner.css ===== */
/* ==================================================
   BANNER PRINCIPAL
   Arquivo modular: 03-banner.css
   ================================================== */

/* ==================================================
   BANNER PRINCIPAL
   ================================================== */

.banner {
    width: 102%;
    height: 434px;
    background-image: url(../img/fundo.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}   

.banner h1 {
    font-size: 42px;
    margin-bottom: 15px;
}

.banner p {
    font-size: 18px;
}


/* ===== 04-pesquisa.css ===== */
/* ==================================================
   ÁREA DE PESQUISA
   Arquivo modular: 04-pesquisa.css
   ================================================== */

/* ==================================================
   ÁREA DE PESQUISA
   ================================================== */

.pesquisa {
    width: 88%;
    max-width: 1000px;
    margin: -30px auto 50px;
    padding: 20px;
    background: white;
    border-radius: 12px;
    display: flex;
    gap: 10px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.08);
}

.pesquisa input,
.pesquisa select {
    flex: 1;
    padding: 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.pesquisa button {
    padding: 14px 25px;
    border: none;
    border-radius: 8px;
    background: #1769ff;
    color: white;
    font-weight: bold;
    cursor: pointer;
}


/* ===== 05-categorias.css ===== */
/* ==================================================
   CATEGORIAS
   Arquivo modular: 05-categorias.css
   ================================================== */

/* ==================================================
   CATEGORIAS
   ================================================== */

.categorias {
    padding: 40px 6%;
    text-align: center;
}

.categorias h2 {
    margin-bottom: 30px;
}

.categorias-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.categoria-card {
    padding: 30px 20px;
    background: white;
    border-radius: 15px;
    color: #222;
    box-shadow: 0 5px 20px rgba(0,0,0,0.06);
    transition: 0.2s;
}

.categoria-card:hover {
    transform: translateY(-5px);
}

.categoria-icone {
    font-size: 40px;
    margin-bottom: 15px;
}

.categoria-card h3 {
    margin-bottom: 10px;
}

.categoria-card p {
    color: #777;
}


/* ===== 06-patrocinadores.css ===== */
/* ==================================================
   PATROCINADORES
   Arquivo modular: 06-patrocinadores.css
   ================================================== */

/* ==================================================
   PATROCINADORES
   ================================================== */

.area-patrocinadores {
    padding: 60px 6%;
    text-align: center;
    background: white;
}

.area-patrocinadores h2 {
    margin-bottom: 10px;
}

.area-patrocinadores p {
    color: #777;
    margin-bottom: 30px;
}

.patrocinadores-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.patrocinador-card {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed #ccc;
    border-radius: 12px;
    color: #999;
}


/* ===== 07-anuncios-destaque.css ===== */
/* ==================================================
   ANÚNCIOS EM DESTAQUE
   Arquivo modular: 07-anuncios-destaque.css
   ================================================== */

/* ==================================================
   ANÚNCIOS EM DESTAQUE
   ================================================== */

.destaques {
    padding: 60px 6%;
}

.destaques h2 {
    margin-bottom: 30px;
}

.anuncios-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.anuncio-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    padding-bottom: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.06);
}

.anuncio-imagem {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e9edf3;
    color: #888;
}

.anuncio-card h3,
.anuncio-card p {
    margin: 15px 20px 0;
}


/* ===== 08-rodape.css ===== */
/* ==================================================
   RODAPÉ BASE
   Arquivo modular: 08-rodape.css
   ================================================== */

/* ==================================================
   RODAPÉ
   ================================================== */

.rodape {
    padding: 40px 6%;
    text-align: center;
    background: #111;
    color: white;
}

.rodape p {
    margin-top: 10px;
    color: #aaa;
}


/* ===== 09-responsivo-geral.css ===== */
/* ==================================================
   RESPONSIVIDADE GERAL
   Arquivo modular: 09-responsivo-geral.css
   ================================================== */

/* ==================================================
   RESPONSIVIDADE — CELULAR
   ================================================== */


/* ===== 10-anunciar.css ===== */
/* ==================================================
   PÁGINA DE ANÚNCIO
   Arquivo modular: 10-anunciar.css
   ================================================== */

/* ==================================================
   PÁGINA — ESCOLHA DO TIPO DE ANÚNCIO
   ================================================== */

.pagina-anunciar {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 70px 0 80px;
}

.anunciar-cabecalho {
    text-align: center;
    margin-bottom: 40px;
}

.anunciar-etapa {
    display: inline-block;
    margin-bottom: 12px;
    padding: 7px 12px;
    border-radius: 20px;
    background: #eaf1ff;
    color: #1769ff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
}

.anunciar-cabecalho h1 {
    font-size: 36px;
    margin-bottom: 10px;
}

.anunciar-cabecalho p {
    color: #777;
    font-size: 17px;
}


/* ==================================================
   OPÇÕES DE ANÚNCIO
   ================================================== */

.opcoes-anuncio {
    display: grid;
    gap: 16px;
}

.opcao-anuncio {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    background: white;
    border-radius: 15px;
    color: #222;
    border: 1px solid #e8ebf0;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    transition: 0.2s;
}

.opcao-anuncio:hover {
    transform: translateY(-3px);
    border-color: #1769ff;
    box-shadow: 0 10px 28px rgba(0,0,0,0.09);
}

.opcao-icone {
    width: 65px;
    height: 65px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;
    background: #f1f5ff;
    font-size: 32px;
}

.opcao-texto {
    flex: 1;
}

.opcao-texto h2 {
    font-size: 20px;
    margin-bottom: 7px;
}

.opcao-texto p {
    color: #777;
    line-height: 1.5;
}

.opcao-seta {
    font-size: 28px;
    color: #1769ff;
    font-weight: bold;
}


/* ==================================================
   AVISO DE PAGAMENTO
   ================================================== */

.aviso-pagamento {
    margin-top: 30px;
    padding: 20px;
    background: white;
    border: 1px solid #e8ebf0;
    border-radius: 12px;
    text-align: center;
}

.aviso-pagamento strong {
    display: block;
    margin-bottom: 8px;
}

.aviso-pagamento p {
    color: #777;
    line-height: 1.5;
}


/* ==================================================
   RESPONSIVIDADE — PÁGINA DE ANÚNCIO
   ================================================== */


/* ===== 11-busca-resultados.css ===== */
/* ==================================================
   BUSCA
   Arquivo modular: 11-busca-resultados.css
   ================================================== */

/* ==================================================
   BUSCA — TÍTULO E FORMULÁRIO
   ================================================== */

.pesquisa {
    display: block;
}

.pesquisa-cabecalho {
    text-align: center;
    margin-bottom: 18px;
}

.pesquisa-cabecalho h2 {
    margin-bottom: 7px;
}

.pesquisa-cabecalho p {
    color: #777;
}

.pesquisa-formulario {
    display: flex;
    gap: 10px;
}

.pesquisa-formulario input,
.pesquisa-formulario select {
    min-width: 0;
    flex: 1;
    padding: 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: white;
}

.pesquisa-formulario button {
    padding: 14px 25px;
    border: none;
    border-radius: 8px;
    background: #1769ff;
    color: white;
    font-weight: bold;
    cursor: pointer;
}

.pesquisa-formulario button:hover {
    background: #0f57dc;
}


/* ===== 12-anuncios-recentes.css ===== */
/* ==================================================
   ANÚNCIOS RECENTES
   Arquivo modular: 12-anuncios-recentes.css
   ================================================== */

/* ==================================================
   ANÚNCIOS RECENTES
   ================================================== */

.anuncios-recentes {
    padding: 20px 6% 60px;
}

.secao-titulo {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 25px;
}

.etiqueta-secao {
    display: inline-block;
    margin-bottom: 8px;
    padding: 6px 10px;
    border-radius: 20px;
    background: #eaf1ff;
    color: #1769ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
}

.link-ver-todos {
    color: #1769ff;
    font-weight: bold;
}


/* ===== 13-card-anuncio.css ===== */
/* ==================================================
   CARD DE ANÚNCIO
   Arquivo modular: 13-card-anuncio.css
   ================================================== */

/* ==================================================
   CARD DE ANÚNCIO
   ================================================== */

.anuncio-card {
    padding-bottom: 0;
}

.anuncio-conteudo {
    padding: 18px 20px 20px;
}

.anuncio-tipo {
    display: inline-block;
    margin-bottom: 8px;
    color: #1769ff;
    font-size: 13px;
    font-weight: bold;
}

.anuncio-descricao {
    color: #777;
    line-height: 1.5;
    margin-top: 8px;
}

.anuncio-valor {
    display: block;
    margin-top: 14px;
    font-size: 18px;
}

.anuncio-localizacao {
    color: #666;
    margin-top: 8px;
}

.anuncio-imagem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.botao-ver-anuncio {
    width: 100%;
    margin-top: 15px;
    padding: 11px;
    border: none;
    border-radius: 8px;
    background: #f0f4ff;
    color: #1769ff;
    font-weight: bold;
    cursor: pointer;
}

.botao-ver-anuncio:hover {
    background: #e3ebff;
}


/* ===== 14-resultados.css ===== */
/* ==================================================
   PÁGINA DE RESULTADOS
   Arquivo modular: 14-resultados.css
   ================================================== */

/* ==================================================
   PÁGINA DE RESULTADOS
   ================================================== */

.pagina-resultados {
    width: 88%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 0 80px;
}

.resultados-cabecalho {
    margin-bottom: 30px;
}

.resultados-cabecalho h1 {
    font-size: 36px;
    margin-bottom: 8px;
}

.resultados-cabecalho p {
    color: #777;
}

.pesquisa-resultados {
    width: 100%;
    max-width: none;
    margin: 0 0 35px;
}

.resultados-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.resultados-info span {
    color: #777;
}

.grade-resultados {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.nenhum-resultado {
    grid-column: 1 / -1;
    padding: 60px 20px;
    background: white;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.06);
}

.nenhum-resultado div {
    font-size: 45px;
    margin-bottom: 15px;
}

.nenhum-resultado p {
    color: #777;
    margin-top: 8px;
}


/* ==================================================
   RESPONSIVIDADE — BUSCA E RESULTADOS
   ================================================== */


/* ===== 15-categorias-extra.css ===== */
/* ==================================================
   AJUSTES DE CATEGORIAS
   Arquivo modular: 15-categorias-extra.css
   ================================================== */

/* ==================================================
   SUBTÍTULO DAS CATEGORIAS
   ================================================== */

.categorias-subtitulo {
    color: #777;
    margin-top: -18px;
    margin-bottom: 30px;
}


/* ==================================================
   CATEGORIAS — ENCONTRAR ANÚNCIOS
   ================================================== */

.categoria-card {
    cursor: pointer;
}

.categoria-card h3 {
    font-size: 21px;
}

.categoria-card p {
    line-height: 1.5;
}


/* ===== 16-planos.css ===== */
/* ==================================================
   PLANOS
   Arquivo modular: 16-planos.css
   ================================================== */

/* ==================================================
   PÁGINA — PLANOS DE TRABALHO
   ================================================== */

.pagina-planos {
    width: 92%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 55px 0 80px;
}

.planos-cabecalho {
    text-align: center;
    margin-bottom: 45px;
}

.voltar-planos {
    display: inline-block;
    margin-bottom: 25px;
    color: #1769ff;
    font-weight: bold;
}

.planos-cabecalho h1 {
    font-size: 38px;
    margin-bottom: 10px;
}

.planos-cabecalho p {
    color: #777;
    font-size: 17px;
}


/* ==================================================
   CARDS DOS PLANOS
   ================================================== */

.planos-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    align-items: stretch;
}

.plano-card {
    position: relative;
    display: flex;
    flex-direction: column;

    padding: 30px 25px 25px;

    background: white;
    border: 1px solid #e4e8ef;
    border-radius: 18px;

    box-shadow: 0 8px 30px rgba(0,0,0,0.06);
}

.plano-card:hover {
    transform: translateY(-4px);
    transition: 0.2s;
}

.plano-destaque {
    border: 2px solid #1769ff;
    box-shadow: 0 12px 35px rgba(23,105,255,0.15);
}

.plano-premium {
    border: 2px solid #6c3cff;
}

.plano-topo {
    text-align: center;
}

.plano-indicador {
    display: inline-block;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .5px;
}

.plano-topo h2 {
    margin-top: 14px;
    font-size: 34px;
}

.plano-topo p {
    margin-top: 5px;
    color: #777;
}

.plano-linha {
    height: 1px;
    background: #e8ebf0;
    margin: 25px 0;
}

.plano-inclui {
    margin-bottom: 12px;
    font-weight: bold;
    color: #444;
}


/* ==================================================
   BENEFÍCIOS DOS PLANOS
   ================================================== */

.plano-beneficios {
    list-style: none;
    display: grid;
    gap: 12px;
    margin-bottom: 28px;
    flex: 1;
}

.plano-beneficios li {
    color: #555;
    line-height: 1.4;
}

.plano-beneficios strong {
    color: #222;
}


/* ==================================================
   SELO MAIS ESCOLHIDO
   ================================================== */

.selo-mais-escolhido {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);

    white-space: nowrap;

    padding: 7px 14px;

    border-radius: 20px;

    background: #1769ff;
    color: white;

    font-size: 12px;
    font-weight: 800;
}


/* ==================================================
   BOTÕES DOS PLANOS
   ================================================== */

.botao-plano {
    display: block;
    width: 100%;

    padding: 14px;

    border-radius: 9px;

    text-align: center;

    font-weight: bold;

    transition: .2s;
}

.botao-essencial {
    background: #eef3ff;
    color: #1769ff;
}

.botao-destaque {
    background: #1769ff;
    color: white;
}

.botao-premium {
    background: #6c3cff;
    color: white;
}

.botao-plano:hover {
    transform: translateY(-2px);
}


/* ==================================================
   AVISO DOS PLANOS
   ================================================== */

.aviso-planos {
    max-width: 850px;
    margin: 35px auto 0;

    padding: 20px;

    background: white;
    border: 1px solid #e4e8ef;
    border-radius: 12px;

    text-align: center;
}

.aviso-planos strong {
    display: block;
    margin-bottom: 8px;
}

.aviso-planos p {
    color: #777;
    line-height: 1.5;
}


/* ===== 17-pagamento.css ===== */
/* ==================================================
   PAGAMENTO E RESPONSIVIDADE DOS PLANOS
   Arquivo modular: 17-pagamento.css
   ================================================== */

/* ==================================================
   PÁGINA — PAGAMENTO
   ================================================== */

.pagina-pagamento {
    min-height: 70vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 60px 20px;
}

.pagamento-card {
    width: 100%;
    max-width: 620px;

    padding: 40px;

    background: white;
    border-radius: 18px;

    text-align: center;

    box-shadow: 0 10px 35px rgba(0,0,0,0.07);
}

.pagamento-card h1 {
    margin: 12px 0 10px;
}

.pagamento-subtitulo {
    color: #777;
}

.pagamento-resumo {
    margin: 30px 0;

    padding: 20px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;

    background: #f5f7fa;
    border-radius: 12px;
    text-align: left;
}

.pagamento-resumo span {
    color: #777;
}

.pagamento-resumo strong {
    text-align: right;
}

.pix-em-breve {
    padding: 25px;

    border: 2px dashed #cfd6e2;
    border-radius: 14px;
}

.pix-em-breve div {
    font-size: 38px;
    margin-bottom: 10px;
}

.pix-em-breve h2 {
    font-size: 20px;
    margin-bottom: 8px;
}

.pix-em-breve p {
    color: #777;
    line-height: 1.5;
}

.botao-voltar-pagamento {
    display: inline-block;
    margin-top: 25px;
    color: #1769ff;
    font-weight: bold;
}


/* ==================================================
   OPÇÕES AINDA NÃO CONFIGURADAS
   ================================================== */

.opcao-em-breve {
    cursor: default;
}

.opcao-em-breve:hover {
    transform: none;
    border-color: #e8ebf0;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}


/* ==================================================
   RESPONSIVIDADE — PLANOS
   ================================================== */


/* ===== 18-cadastro-anuncio.css ===== */
/* ==================================================
   CADASTRO DO ANÚNCIO
   Arquivo modular: 18-cadastro-anuncio.css
   ================================================== */

/* =========================================================
   CADASTRO DO ANÚNCIO PROFISSIONAL
   ========================================================= */

.cadastro-trabalho {
    max-width: 1050px;
    margin: 0 auto;
    padding: 55px 20px 80px;
}

.titulo-pagina {
    text-align: center;
    margin-bottom: 30px;
}

.etiqueta-formulario {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.titulo-pagina h1 {
    margin: 0 0 10px;
}

.titulo-pagina p {
    margin: 0;
    opacity: .75;
}


/* =========================================================
   PLANO SELECIONADO
   ========================================================= */

.plano-selecionado-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 22px;
    margin-bottom: 25px;
    border-radius: 16px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
}

.plano-selecionado-box small {
    opacity: .65;
    font-weight: 700;
}

.plano-selecionado-box h2 {
    margin: 6px 0;
}

.plano-selecionado-box p {
    margin: 0;
    opacity: .75;
}


/* =========================================================
   FORMULÁRIO
   ========================================================= */

.formulario-anuncio {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bloco-form {
    padding: 25px;
    border-radius: 16px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.10);
}

.bloco-form h2 {
    margin-top: 0;
    margin-bottom: 20px;
}

.linha-campos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.campo {
    display: flex;
    flex-direction: column;
    margin-bottom: 18px;
}

.campo:last-child {
    margin-bottom: 0;
}

.campo label {
    margin-bottom: 8px;
    font-weight: 600;
}

.campo input,
.campo textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(0,0,0,.18);
    color: inherit;
    font: inherit;
    outline: none;
}

.campo textarea {
    resize: vertical;
    min-height: 130px;
}

.campo input:focus,
.campo textarea:focus {
    border-color: rgba(255,255,255,.45);
}

.ajuda-media {
    opacity: .75;
    margin-top: -10px;
}

.campo small {
    margin-top: 8px;
}

.erro-media {
    opacity: 1;
}

.sucesso-media {
    opacity: .8;
}


/* =========================================================
   AVISO E BOTÃO
   ========================================================= */

.aviso-prototipo {
    padding: 18px;
    border-radius: 12px;
    background: rgba(255, 193, 7, .10);
    border: 1px solid rgba(255, 193, 7, .25);
    line-height: 1.5;
}

.btn-enviar-anuncio {
    border: 0;
    border-radius: 12px;
    padding: 16px 22px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.mensagem-formulario {
    display: none;
    padding: 18px;
    border-radius: 12px;
    line-height: 1.6;
}

.mensagem-formulario.sucesso {
    display: block;
    border: 1px solid rgba(0, 200, 100, .3);
    background: rgba(0, 200, 100, .10);
}


/* =========================================================
   RESPONSIVO — CADASTRO
   ========================================================= */


/* ===== 19-menu-conta.css ===== */
/* ==================================================
   MENU DA CONTA
   Arquivo modular: 19-menu-conta.css
   ================================================== */

/* Menu da conta padronizado em todas as páginas */
.conta-menu .botao-conta {
    border: 0;
    cursor: pointer;
}

.menu-conta-dropdown a#menu-admin {
    color: #1769ff;
    font-weight: 800;
}

.menu-conta-dropdown a#menu-admin:hover {
    background: #eef4ff;
    color: #1769ff;
}


/* ===== 20-botoes.css ===== */
/* ==================================================
   PADRONIZAÇÃO DE BOTÕES
   Arquivo modular: 20-botoes.css
   ================================================== */

/* =========================================================
   PADRONIZAÇÃO FINAL DOS BOTÕES — LOP DIVULGAÇÕES
   ========================================================= */

.botao-conta,
.botao-anunciar,
.pesquisa button,
.pesquisa-formulario button,
.btn-enviar-anuncio,
.botao-plano,
.botao-ver-anuncio {
    font-family: Arial, sans-serif;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s ease;
}

.botao-conta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #1769ff;
    color: #fff;
    border: 0;
    border-radius: 10px;
    padding: 11px 18px;
    box-shadow: 0 4px 12px rgba(23,105,255,.18);
}

.botao-conta:hover,
.botao-conta.logado {
    background: #0f57dc;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 7px 18px rgba(23,105,255,.25);
}

.botao-anunciar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1769ff;
    color: #fff;
    border: 0;
    border-radius: 10px;
    padding: 12px 20px;
    box-shadow: 0 4px 12px rgba(23,105,255,.18);
}

.botao-anunciar:hover {
    background: #0f57dc;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 7px 18px rgba(23,105,255,.25);
}

.pesquisa button,
.pesquisa-formulario button {
    background: #1769ff;
    color: #fff;
    border: 0;
    border-radius: 10px;
    padding: 14px 25px;
    box-shadow: 0 4px 12px rgba(23,105,255,.16);
}

.pesquisa button:hover,
.pesquisa-formulario button:hover {
    background: #0f57dc;
    color: #fff;
    transform: translateY(-1px);
}

.botao-ver-anuncio {
    display: block;
    width: 100%;
    background: #eef4ff;
    color: #1769ff;
    border: 1px solid #d7e4ff;
    border-radius: 10px;
    padding: 12px 15px;
}

.botao-ver-anuncio:hover {
    background: #1769ff;
    color: #fff;
    border-color: #1769ff;
    transform: translateY(-1px);
}

.botao-plano {
    border: 0;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(23,105,255,.12);
}

.botao-essencial {
    background: #eef4ff;
    color: #1769ff;
    border: 1px solid #d7e4ff;
}

.botao-essencial:hover {
    background: #1769ff;
    color: #fff;
}

.botao-destaque {
    background: #1769ff;
    color: #fff;
}

.botao-destaque:hover {
    background: #0f57dc;
    color: #fff;
}

.botao-premium {
    background: #0b45b5;
    color: #fff;
}

.botao-premium:hover {
    background: #08398f;
    color: #fff;
}

.btn-enviar-anuncio {
    width: 100%;
    background: #1769ff;
    color: #fff;
    border: 0;
    border-radius: 10px;
    padding: 16px 22px;
    box-shadow: 0 5px 15px rgba(23,105,255,.18);
}

.btn-enviar-anuncio:hover {
    background: #0f57dc;
    color: #fff;
    transform: translateY(-1px);
}

.link-ver-todos,
.voltar-planos,
.botao-voltar-pagamento {
    color: #1769ff;
    font-weight: 700;
}

.link-ver-todos:hover,
.voltar-planos:hover,
.botao-voltar-pagamento:hover {
    color: #0f57dc;
}

/* O botão Sair continua vermelho */
.menu-conta-dropdown button {
    color: #dc2626;
}

.menu-conta-dropdown button:hover {
    background: #fff1f2;
    color: #dc2626;
}


/* ===== 21-banner-final.css ===== */
/* ==================================================
   CORREÇÕES FINAIS DO BANNER
   Arquivo modular: 21-banner-final.css
   ================================================== */

/* ===== CORREÇÃO DA BANNER ===== */

.banner {
    position: relative;
}

/* Conteúdo da banner */
.banner h1 {
    color: #ffffff !important;
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.banner p {
    color: #ffffff !important;
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

/* Botão da banner */
.banner .pesquisa-button,
.banner button,
.banner .btn {
    position: relative;
    z-index: 3;
}

/* Mantém o conteúdo organizado no centro */
.banner-content {
    position: relative;
    z-index: 2;
    text-align: center;
}


/* =========================================================
   CORREÇÃO FINAL DA BANNER — LOP DIVULGAÇÕES
   ========================================================= */

.banner {
    width: 100% !important;
    height: clamp(360px, 33.4vw, 684px) !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-image: url(../img/fundo.jpg) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.banner-conteudo {
    width: 100% !important;
    max-width: 1200px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    position: relative !important;
    z-index: 10 !important;
}

.banner-conteudo h1 {
    color: #ffffff !important;
    font-size: 42px !important;
    margin: -86px 0 12px !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.7) !important;
}

.banner-conteudo p {
    color: #ffffff !important;
    font-size: 18px !important;
    margin: 0 !important;
    text-shadow: 0 2px 8px rgba(0,0,0,.7) !important;
}

.banner-botao {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 20px !important;
    margin: 0 0 20px !important;
    background: #1769ff !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    box-shadow: 0 5px 18px rgba(23,105,255,.35) !important;
    transition: .2s ease !important;
}

.banner-botao:hover {
    background: #0f57dc !important;
    color: #ffffff !important;
    transform: translateY(-2px);
}


/* ===== 22-cabecalho-visual.css ===== */
/* ==================================================
   CABEÇALHO PADRÃO VISUAL
   Arquivo modular: 22-cabecalho-visual.css
   ================================================== */

/* ==================================================
   LOP — CABEÇALHO E BOTÕES (PADRÃO VISUAL)
   ================================================== */
.cabecalho{min-height:76px;padding:14px clamp(18px,6vw,80px);gap:24px;border-bottom:1px solid #edf1f7;box-shadow:0 3px 14px rgba(15,23,42,.04);position:relative;z-index:100}
.menu{align-items:center;gap:28px}
.menu a{position:relative;padding:10px 2px;transition:color .2s ease}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:#1769ff;border-radius:2px;transform:scaleX(0);transform-origin:center;transition:transform .2s ease}
.menu a:hover::after,.menu a.ativo::after{transform:scaleX(1)}
.menu a.ativo,.menu a:hover{color:#1769ff}
.menu-inicio{margin-left:auto;margin-right:auto}
.acoes-cabecalho{display:flex;align-items:center;gap:10px}
.botao-conta,.botao-anunciar{min-height:42px;padding:10px 16px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-weight:800;white-space:nowrap}
.botao-conta{background:#1769ff!important;color:#fff!important;border:0!important;box-shadow:0 5px 16px rgba(23,105,255,.18)}
.botao-conta:hover{background:#0f57dc!important;transform:translateY(-1px)}
.botao-anunciar{background:#1769ff!important;color:#fff!important;box-shadow:0 5px 16px rgba(23,105,255,.18)}
.botao-anunciar:hover{background:#0f57dc!important;transform:translateY(-1px)}
.menu-conta-dropdown{top:calc(100% + 8px);width:235px;padding:8px;border-radius:15px;box-shadow:0 16px 40px rgba(15,23,42,.18)}
.menu-conta-dropdown a,.menu-conta-dropdown button{padding:12px 13px;border-radius:10px}


/* ===== 23-card-selo.css ===== */
/* ==================================================
   SELO DO CARD
   Arquivo modular: 23-card-selo.css
   ================================================== */

/* ==================================================
   CARD
   ================================================== */

   .card {
    position: relative;
}

.card .selo-card {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 55px !important;
    height: 55px !important;
    object-fit: contain;
    margin: 0;
    padding: 0;
    border-radius: 0;
    z-index: 10;
}


/* ===== 24-cabecalho-definitivo.css ===== */
/* ==================================================
   CORREÇÃO DEFINITIVA DO CABEÇALHO
   Arquivo modular: 24-cabecalho-definitivo.css
   ================================================== */

/* =========================================================
   CORREÇÃO DEFINITIVA DO CABEÇALHO
   ========================================================= */

.cabecalho {
    width: 100%;
    height: 72px;
    background: #ffffff;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 4.5%;
    box-sizing: border-box;
    position: relative;
    z-index: 1000;
    border-bottom: 1px solid #e8edf5;
}

/* LOGO */
.cabecalho .logo {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    text-decoration: none;
    font-size: 21px;
    font-weight: 900;
    color: #111827;
    margin: 0 !important;
}

/* parte azul do logo */
.cabecalho .logo span {
    color: #1769ff;
    margin-left: 5px;
}

/* MENU CENTRAL */
.cabecalho .menu {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 28px;
    margin: 0 auto !important;
    padding: 0 !important;
    width: auto !important;
    height: 100%;
}

/* LINKS DO MENU */
.cabecalho .menu a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    height: auto !important;
    padding: 8px 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    text-decoration: none;
    color: #f7f8f9;
    font-size: 16px;
    font-weight: 700;
    transition: 0.2s ease;
}

/* HOVER */
.cabecalho .menu a:hover {
    color: #1769ff;
}

/* PÁGINA ATUAL */
.cabecalho .menu a.ativo {
    color: #ffffff;
}

/* BOTÕES DA DIREITA */
.cabecalho .acoes-cabecalho {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 9px;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* BOTÃO MINHA CONTA */
.cabecalho .botao-conta {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 18px;
    box-sizing: border-box;
    border-radius: 10px;
    background: #1769ff;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 5px 15px rgba(23, 105, 255, .18);
    transition: .2s ease;
}

.cabecalho .botao-conta:hover {
    background: #0d5ce8;
    transform: translateY(-1px);
}

/* BOTÃO ANUNCIAR */
.cabecalho .botao-anunciar {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 18px;
    box-sizing: border-box;
    border-radius: 10px;
    background: #1769ff;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 5px 15px rgba(23, 105, 255, .18);
    transition: .2s ease;
}

.cabecalho .botao-anunciar:hover {
    background: #0d5ce8;
    transform: translateY(-1px);
}

/* =========================================================
   CELULAR
   ========================================================= */


/* ===== 25-login.css ===== */
/* ==================================================
   BOTÃO DO LOGIN E LOGO
   Arquivo modular: 25-login.css
   ================================================== */

/* ================================
   BOTÃO DO LOGIN
   ================================ */

.form-login button[type="submit"],
form button[type="submit"] {
    width: 100%;
    height: 44px;
    border: none;
    border-radius: 10px;
    background: #1769ff;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: .2s ease;
    box-shadow: 0 5px 15px rgba(23, 105, 255, 0.18);
}

.form-login button[type="submit"]:hover,
form button[type="submit"]:hover {
    background: #0d5ce8;
    transform: translateY(-1px);
}

.form-login button[type="submit"]:active,
form button[type="submit"]:active {
    transform: translateY(0);
}

.icone-categoria {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
    margin: 0 auto 12px;
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    height: 50px;
}

.logo img {
    width: 348px;
    height: auto;
    display: block;
    object-fit: contain;
    height: max-content;
}


/* ===== 26-rodape-final.css ===== */
/* ==================================================
   RODAPÉ FINAL E MENU DE CONTA
   Arquivo modular: 26-rodape-final.css
   ================================================== */

/* =========================================
   RODAPÉ PADRÃO - TODAS AS PÁGINAS
========================================= */

.rodape {
    width: 100%;
    padding: 40px 6%;
    text-align: center;
    background: #111;
    color: white;
    margin-top: 40px;
}

.rodape p {
    margin: 0;
    color: #aaa;
    font-size: 14px;
}


/* =========================================
   RODAPÉ SEM ESPAÇO VAZIO
========================================= */

html,
body {
    min-height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

.rodape {
        width: 100%;
        margin-top: auto;
        padding: 22px 6%;
        text-align: center;
        background: #111;
        color: #fff;
}

.rodape p {
    margin: 0;
    color: #aaa;
}


/* ===== 27-cards-final.css ===== */
/* ==================================================
   CORREÇÕES FINAIS DOS CARDS
   Arquivo modular: 27-cards-final.css
   ================================================== */

/* CORREÇÃO DOS CARDS DE ANÚNCIOS */
.cards {
    align-items: stretch;
}

.card {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-height: 350px;
}

.card > img:not(.selo-card) {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    margin-bottom: 12px;
}

.card .badge {
    align-self: flex-start;
    flex-shrink: 0;
    margin-bottom: 6px;
}

.card h2 {
    margin: 4px 0 2px;
    line-height: 1.15;
}

.card b {
    display: block;
    margin: 0 0 2px;
    line-height: 1.25;
}

.card p {
    margin: 2px 0;
    line-height: 1.3;
}

.card .btn {
    align-self: flex-start;
    margin-top: 10px;
    flex-shrink: 0;
}

.card .selo-card {
    position: absolute;
    top: 10px;
    right: 9px;
    width: 70px !important;
    height: 69px !important;
    object-fit: contain !important;
    margin: 0 !important;
}


/* ===== 28-ordem-botoes.css ===== */
/* ==================================================
   ORDEM ANUNCIAR → CONTA
   Arquivo modular: 28-ordem-botoes.css
   ================================================== */

/* =========================================
   ORDEM DOS BOTÕES DO CABEÇALHO
   ANUNCIAR → CONTA
   ========================================= */

.acoes-cabecalho {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* + Anunciar fica primeiro */
.acoes-cabecalho .botao-anunciar {
    order: 1;
}

/* Conta fica depois */
.acoes-cabecalho .conta-menu {
    order: 2;
}


/* ===== 29-menu-conta-final.css ===== */
/* =========================================================
   CORREÇÃO FINAL — MENU DA CONTA
   Evita a "barra branca" nas páginas internas.
   ========================================================= */

.cabecalho {
    overflow: visible !important;
}

.cabecalho .acoes-cabecalho,
.cabecalho .conta-menu {
    overflow: visible !important;
}

.cabecalho .conta-menu {
    position: relative !important;
    z-index: 999999 !important;
}

/* FECHADO: totalmente invisível */
.cabecalho .menu-conta-dropdown {
    display: none !important;

    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: 0 !important;

    width: 245px !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;

    background: #fff !important;
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: none !important;

    z-index: 1000000 !important;
}

/* ABERTO: menu completo */
.cabecalho .menu-conta-dropdown.aberto {
    display: flex !important;
    flex-direction: column !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    padding: 8px !important;

    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;

    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
}

.cabecalho .menu-conta-dropdown a,
.cabecalho .menu-conta-dropdown button {
    display: flex !important;
    align-items: center !important;

    width: 100% !important;
    height: auto !important;
    min-height: 44px !important;
    max-height: none !important;

    padding: 10px 12px !important;
    margin: 0 !important;

    box-sizing: border-box !important;

    border: 0 !important;
    border-radius: 9px !important;

    background: transparent !important;

    color: #222 !important;
    font: inherit !important;
    font-size: 15px !important;
    font-weight: 700 !important;

    text-decoration: none !important;
    text-align: left !important;

    cursor: pointer !important;
}

.cabecalho .menu-conta-dropdown img {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;

    margin: 0 !important;

    object-fit: contain !important;
    flex: 0 0 20px !important;
}

.cabecalho .menu-conta-dropdown span {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    margin-left: 0 !important;
}

.cabecalho .menu-conta-dropdown a:hover {
    background: #eef4ff !important;
    color: #1769ff !important;
}

.cabecalho .menu-conta-dropdown button {
    color: #dc2626 !important;
}

.cabecalho .menu-conta-dropdown button:hover {
    background: #fff1f2 !important;
    color: #dc2626 !important;
}

/* Remove qualquer barra causada por dimensões herdadas */
.cabecalho .menu-conta-dropdown::before,
.cabecalho .menu-conta-dropdown::after {
    content: none !important;
}

/* Logo: sem limite de 54px */
.cabecalho .logo img {
    max-height: none !important;
}


/* ==========================================
   CORREÇÃO DEFINITIVA DO MENU DA CONTA
   ========================================== */

.conta-menu {
    position: relative !important;
    z-index: 99999 !important;
    overflow: visible !important;
}

.menu-conta-dropdown {
    display: none !important;

    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: 0 !important;

    width: 240px !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 8px !important;

    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;

    box-shadow: 0 15px 40px rgba(0,0,0,.20) !important;

    box-sizing: border-box !important;
    z-index: 999999 !important;
}

.menu-conta-dropdown.aberto {
    display: flex !important;
    flex-direction: column !important;
}

.menu-conta-dropdown a,
.menu-conta-dropdown button {
    width: 100% !important;
    min-height: 44px !important;
    height: auto !important;

    display: flex !important;
    align-items: center !important;

    gap: 10px !important;
    padding: 10px 12px !important;
    margin: 0 !important;

    border: 0 !important;
    border-radius: 9px !important;

    background: transparent !important;
    color: #222 !important;

    font-family: Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;

    text-decoration: none !important;
    text-align: left !important;
    box-sizing: border-box !important;

    cursor: pointer !important;
}

.menu-conta-dropdown a:hover {
    background: #eef4ff !important;
    color: #1769ff !important;
}

.menu-conta-dropdown button {
    color: #dc2626 !important;
}

.menu-conta-dropdown button:hover {
    background: #fff1f2 !important;
    color: #dc2626 !important;
}

.menu-conta-dropdown img {
    display: block !important;

    width: 20px !important;
    height: 20px !important;

    min-width: 20px !important;
    min-height: 20px !important;

    max-width: 20px !important;
    max-height: 20px !important;

    object-fit: contain !important;
    flex-shrink: 0 !important;
}

.cabecalho .logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.cabecalho .logo img {
    width: 285px;
    height: auto;
    display: block;
    object-fit: contain;
}

/* ==========================================
   CARD DESTAQUE MENOR
   ========================================== */

.anuncios-container {
    grid-template-columns: repeat(3, 280px) !important;
    justify-content: start !important;
    gap: 18px !important;
}

.anuncio-card {
    width: 280px !important;
    max-width: 280px !important;
    padding-bottom: 14px !important;
}

.anuncio-imagem-foto {
    width: 100% !important;
    height: 155px !important;
    object-fit: cover !important;
    display: block !important;
}

.anuncio-card h3 {
    font-size: 18px !important;
    margin: 12px 16px 6px !important;
}

.anuncio-card p {
    margin: 6px 16px !important;
    font-size: 14px !important;
}

/* ==========================================
   DESTAQUE - TAMANHO REALMENTE MENOR
   ========================================== */

.destaques .anuncios-container {
    display: grid !important;
    grid-template-columns: repeat(3, 300px) !important;
    justify-content: start !important;
    gap: 16px !important;
}

.destaques .anuncio-card {
    width: 300px !important;
    max-width: 300px !important;
    min-width: 0 !important;
    padding: 0 0 12px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.destaques .anuncio-imagem-foto {
        width: 407px !important;
        height: 361px !important;
        object-fit: cover !important;
        display: block !important;
        margin: 0 !important;
}

.destaques .anuncio-imagem {
    width: 300px !important;
    height: 125px !important;
}

.destaques .anuncio-card h3 {
    margin: 10px 14px 5px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
}

.destaques .anuncio-card p {
    margin: 5px 14px !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
}

.destaques .nome-anunciante {
    margin: 5px 14px !important;
}

.destaques .selo-nome {
    width: 18px !important;
    height: 18px !important;
}



/* ===== REGRAS GERAIS / DESKTOP ===== */
/* GRID DOS ANÚNCIOS */
.cards {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* CARD */
.cards .card {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* =========================================================
   LOP DIVULGAÇÕES — HOME RESPONSIVA FINAL
   ========================================================= */

.banner-busca{
    display:flex;
    align-items:center;
    gap:9px;
    width:min(760px, calc(100% - 40px));
    height:48px;
    margin:-72px auto 24px;
    padding:0 8px 0 14px;
    position:relative;
    z-index:20;
    border:1px solid rgba(255,255,255,.65);
    border-radius:25px;
    background:rgba(21,57,150,.72);
    backdrop-filter:blur(9px);
    box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.banner-busca-icone{
    color:#fff;
    font-size:24px;
    line-height:1;
}
.banner-busca input{
    flex:1;
    min-width:0;
    height:40px;
    border:0;
    outline:0;
    background:transparent;
    color:#fff;
    font-size:14px;
}
.banner-busca input::placeholder{
    color:rgba(255,255,255,.9);
}
.banner-busca button{
    width:34px;
    height:34px;
    flex:0 0 34px;
    border:0;
    border-radius:50%;
    background:#1769ff;
    color:#fff;
    font-size:20px;
    cursor:pointer;
}

/* =========================================================
   CORREÇÃO FINAL — MENU NO TOPO DO PC
   Início | Categorias | Destaques | Contato
   ========================================================= */

@media (min-width: 701px) {

    .cabecalho {
        position: relative !important;
    }

    /* Coloca os links no topo do cabeçalho */
    .cabecalho .menu {
        position: absolute !important;
        top: 12px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 32px !important;
        width: max-content !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;

        z-index: 1100 !important;
    }

    .cabecalho .menu a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        padding: 8px 4px !important;
        margin: 0 !important;

        color: #ffffff !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .cabecalho .menu a:hover {
        color: #1769ff !important;
    }

    .cabecalho .menu a.ativo {
        color: #ffffff !important;
    }

    /* Mantém a linha azul de página ativa */
    .cabecalho .menu a::after {
        bottom: 0 !important;
    }

    /* Mantém os botões da direita funcionando */
    .cabecalho .acoes-cabecalho {
        position: relative !important;
        z-index: 1101 !important;
    }
}
/* CORREÇÃO FINAL — LOCALIZAÇÃO PEQUENA */
.localizacao-com-icone{
    display:flex!important;
    align-items:center!important;
    gap:6px!important;
    width:auto!important;
    max-width:calc(100% - 28px)!important;
    margin:6px 14px!important;
    padding:0!important;
}
.localizacao-com-icone .icone-localizacao,
.anuncio-card .localizacao-com-icone img,
.icone-localizacao{
    width:16px!important;
    height:16px!important;
    min-width:16px!important;
    max-width:16px!important;
    min-height:16px!important;
    max-height:16px!important;
    object-fit:contain!important;
    display:block!important;
    flex:0 0 16px!important;
}
.anuncio-card .localizacao-com-icone strong{
    font-size:13px!important;
    line-height:1.2!important;
}
@media (min-width:701px){
    .mobile-bottom-nav{display:none!important}
}


/* =========================================================
   CORREÇÃO PC — NAVEGAÇÃO EXCLUSIVA DO DESKTOP
   A barra .mobile-top-nav pertence somente ao celular.
   ========================================================= */
@media (min-width: 801px) {
    .mobile-top-nav {
        display: none !important;
    }

    .cabecalho > .mobile-menu-btn,
    .mobile-menu-btn {
        display: none !important;
    }
}


/* =========================================================
   LOP DIVULGAÇÕES — SELO PREMIUM + TIPOGRAFIA DOS DESTAQUES
   DESKTOP / PC
   ========================================================= */

.destaques .anuncio-card.anuncio-destaque-real {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
    text-decoration: none !important;
    color: #111827 !important;
    cursor: pointer;
}

.destaques .anuncio-card.anuncio-destaque-real:link,
.destaques .anuncio-card.anuncio-destaque-real:visited,
.destaques .anuncio-card.anuncio-destaque-real:hover,
.destaques .anuncio-card.anuncio-destaque-real:active {
    color: #111827 !important;
    text-decoration: none !important;
}

.destaques .anuncio-card.anuncio-destaque-real h3,
.destaques .anuncio-card.anuncio-destaque-real h3:link,
.destaques .anuncio-card.anuncio-destaque-real h3:visited {
    color: #06144f !important;
    text-decoration: none !important;
}

.destaques .anuncio-card.anuncio-destaque-real p,
.destaques .anuncio-card.anuncio-destaque-real b {
    color: #334155 !important;
    text-decoration: none !important;
}

.destaques .anuncio-card.anuncio-destaque-real .nome-anunciante {
    color: #475569 !important;
}

.destaques .anuncio-card.anuncio-destaque-real .profissao-card {
    color: #111827 !important;
}

.destaques .anuncio-card.anuncio-destaque-real .descricao-card {
    color: #64748b !important;
}

.destaques .anuncio-card.anuncio-destaque-real .valor-card {
    color: #111827 !important;
    font-weight: 800 !important;
}

.destaques .anuncio-card.anuncio-destaque-real .local-card,
.destaques .anuncio-card.anuncio-destaque-real .local-card strong {
    color: #111827 !important;
}

.destaques .anuncio-card.anuncio-destaque-real .btn-home-anuncio,
.destaques .anuncio-card.anuncio-destaque-real .btn-home-anuncio:visited,
.destaques .anuncio-card.anuncio-destaque-real .btn-home-anuncio:hover,
.destaques .anuncio-card.anuncio-destaque-real .btn-home-anuncio:active {
    color: #fff !important;
    text-decoration: none !important;
}

/* Selo: SOMENTE Premium */
.destaques .anuncio-card.anuncio-destaque-real .premium-badge {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 50 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 8px 16px !important;
    box-sizing: border-box !important;

    background: linear-gradient(135deg, #6d00ff 0%, #b400ff 100%) !important;
    color: #fff !important;

    border: 2px solid rgba(255,255,255,.92) !important;
    border-radius: 999px !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: .4px !important;

    text-decoration: none !important;

    box-shadow:
        0 0 8px rgba(174,0,255,.85),
        0 0 20px rgba(174,0,255,.55) !important;
}

.destaques .anuncio-card.anuncio-destaque-real .premium-badge *,
.destaques .anuncio-card.anuncio-destaque-real .premium-badge:hover,
.destaques .anuncio-card.anuncio-destaque-real .premium-badge:visited {
    color: #fff !important;
    text-decoration: none !important;
}

.destaques .anuncio-card.anuncio-destaque-real .premium-coroa {
    font-size: 19px !important;
    line-height: 1 !important;
}


/* =========================================================
   DESCRIÇÃO CURTA — ANÚNCIOS
   Máximo de 300 caracteres no formulário e 3 linhas no card.
========================================================= */

.campo textarea#descricao,
.field textarea#descricao {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 96px;
    max-height: 180px;
}

.contador-descricao {
    margin-top: 5px;
    text-align: right;
    font-size: 12px;
    line-height: 1.2;
    color: #64748b;
}

.destaques .anuncio-card.anuncio-destaque-real .descricao-card {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
    max-height: 4.2em !important;
    line-height: 1.4 !important;
    color: #475569 !important;
    text-decoration: none !important;
}

/* =========================================================
   PERFIL + SELO DE VERIFICADO — CABEÇALHO PC E MOBILE
   ========================================================= */
.cabecalho .botao-conta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
}

.cabecalho .selo-verificado-menu {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    object-fit: contain !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 0 0 2px !important;
    position: static !important;
    flex: 0 0 18px !important;
}

.cabecalho .menu-perfil-resumo {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 10px !important;
    margin: 0 0 6px !important;
    border-bottom: 1px solid #e5e7eb !important;
    background: linear-gradient(135deg,#f7faff,#fff) !important;
    border-radius: 10px !important;
}
.cabecalho .menu-perfil-avatar {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #eef4ff !important;
    font-size: 20px !important;
}
.cabecalho .menu-perfil-info { min-width: 0 !important; }
.cabecalho .menu-perfil-nome {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    color: #0f172a !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 20px !important;
}
.cabecalho .menu-perfil-info small {
    display: block !important;
    color: #64748b !important;
    font-size: 11px !important;
    margin-top: 1px !important;
}

@media (max-width: 800px) {
    .cabecalho .menu-conta-dropdown {
        width: min(290px, calc(100vw - 24px)) !important;
        right: 0 !important;
    }
    .cabecalho .menu-perfil-resumo {
        padding: 12px !important;
    }
    .cabecalho .menu-perfil-nome {
        font-size: 14px !important;
    }
}


/* =====================================================
   SELO DE VERIFICADO — MENU DA CONTA (PC + MOBILE)
   ===================================================== */
.cabecalho .selo-verificado-menu {
    width:18px !important;
    height:18px !important;
    max-width:18px !important;
    max-height:18px !important;
    min-width:18px !important;
    min-height:18px !important;
    object-fit:contain !important;
    display:inline-block !important;
    flex:0 0 18px !important;
    vertical-align:middle !important;
    margin:0 0 0 5px !important;
    position:static !important;
}
.cabecalho .selo-verificado-botao {
    width:16px !important;
    height:16px !important;
    max-width:16px !important;
    max-height:16px !important;
    min-width:16px !important;
    min-height:16px !important;
    flex:0 0 16px !important;
}
.cabecalho .menu-perfil-nome {
    display:flex !important;
    align-items:center !important;
    gap:0 !important;
}


/* =====================================================
   AJUSTE DESKTOP — CARD DE ANÚNCIOS EM DESTAQUE
   Somente PC: não altera as configurações mobile.
   ===================================================== */
@media screen and (min-width: 801px) {
    .destaques .anuncio-card.anuncio-destaque-real .anuncio-home-conteudo .profissao-card {
        margin-left: 14px !important;
    }

    .destaques .anuncio-card.anuncio-destaque-real .anuncio-home-conteudo .nome-anunciante {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
    }

    .destaques .anuncio-card.anuncio-destaque-real .anuncio-home-conteudo .selo-nome {
        width: 18px !important;
        height: 18px !important;
        max-width: 18px !important;
        max-height: 18px !important;
        object-fit: contain !important;
        display: inline-block !important;
        margin: 0 !important;
        transform: translateY(0px) !important;
        flex: 0 0 18px !important;
    }
}


/* =========================================================
   CADASTRO — VISUAL PROFISSIONAL (PC)
   Apenas aparência; não altera regras do formulário.
   ========================================================= */
@media (min-width: 801px) {
  .cadastro-trabalho {
    max-width: 1080px !important;
    padding: 46px 20px 80px !important;
  }
  .cadastro-trabalho .titulo-pagina h1 { font-size: 34px !important; color:#06144f !important; }
  .cadastro-trabalho .titulo-pagina p { font-size:15px !important; color:#64748b !important; }
  .cadastro-trabalho .plano-selecionado-box {
    background:#fff !important; border:1px solid #dbe5f5 !important;
    box-shadow:0 8px 28px rgba(15,35,80,.07) !important;
  }
  .cadastro-trabalho .bloco-form {
    background:#fff !important; border:1px solid #e2e8f0 !important;
    box-shadow:0 8px 28px rgba(15,35,80,.06) !important;
    padding:28px !important;
  }
  .cadastro-trabalho .bloco-form h2 { color:#0f1f4d !important; font-size:20px !important; }
  .cadastro-trabalho .campo label { color:#334155 !important; }
  .cadastro-trabalho .campo input,
  .cadastro-trabalho .campo textarea,
  .cadastro-trabalho .campo select {
    background:#f8fafc !important; color:#0f172a !important;
    border:1px solid #d7e0ec !important; border-radius:11px !important;
    min-height:46px !important;
  }
  .cadastro-trabalho .campo textarea { min-height:145px !important; }
}

/* Cadastro de venda/aluguel */
@media (min-width: 801px) {
  body:has(main.wrap) .wrap { max-width:820px !important; margin:42px auto 80px !important; }
  body:has(main.wrap) .wrap .form {
    padding:34px !important; border-radius:20px !important;
    border:1px solid #e2e8f0 !important;
    box-shadow:0 12px 35px rgba(15,35,80,.08) !important;
  }
  body:has(main.wrap) .wrap .field { margin-bottom:20px !important; }
  body:has(main.wrap) .wrap .field input,
  body:has(main.wrap) .wrap .field textarea,
  body:has(main.wrap) .wrap .field select {
    min-height:46px !important; background:#f8fafc !important;
    border:1px solid #d7e0ec !important; border-radius:11px !important;
  }
  body:has(main.wrap) .wrap .field textarea { min-height:145px !important; }
}


/* =========================================================
   DESTAQUES — 4 CARDS NO PC + CARROSSEL COM SETAS
   Aplicado por último para prevalecer sobre estilos antigos.
   ========================================================= */
@media (min-width: 801px) {
  .destaques .anuncios-carousel {
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    width:100% !important;
    box-sizing:border-box !important;
  }
  .destaques .anuncios-viewport {
    flex:1 1 auto !important;
    width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }
  .destaques .anuncios-container {
    display:flex !important;
    flex-wrap:nowrap !important;
    width:100% !important;
    min-width:100% !important;
    max-width:none !important;
    gap:18px !important;
    overflow:visible !important;
    justify-content:flex-start !important;
    transition:transform .28s ease !important;
    box-sizing:border-box !important;
  }
  .destaques .anuncios-container .anuncio-card.anuncio-destaque-real {
    flex:0 0 calc((100% - 54px) / 4) !important;
    width:calc((100% - 54px) / 4) !important;
    min-width:calc((100% - 54px) / 4) !important;
    max-width:calc((100% - 54px) / 4) !important;
    box-sizing:border-box !important;
  }
  .destaques .carousel-arrow {
    flex:0 0 40px !important;
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:50% !important;
    background:#1769ff !important;
    color:#fff !important;
    font-size:26px !important;
    font-weight:800 !important;
    line-height:40px !important;
    cursor:pointer !important;
    box-shadow:0 5px 15px rgba(23,105,255,.22) !important;
    z-index:5 !important;
  }
  .destaques .carousel-arrow[disabled] { opacity:.30 !important; cursor:default !important; }
}

/* =========================================================
   DESTAQUES PC — PADRÃO DA HOME: 4 CARDS + SETAS
   ========================================================= */
@media (min-width:801px) {
  .destaques .anuncios-carousel {
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    width:100% !important;
    box-sizing:border-box !important;
  }
  .destaques .anuncios-viewport {
    flex:1 1 auto !important;
    width:0 !important;
    min-width:0 !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }
  .destaques .anuncios-container {
    display:flex !important;
    flex-wrap:nowrap !important;
    width:100% !important;
    min-width:100% !important;
    max-width:none !important;
    gap:18px !important;
    justify-content:flex-start !important;
    transition:transform .28s ease !important;
    box-sizing:border-box !important;
  }
  .destaques .anuncios-container .anuncio-card.anuncio-destaque-real {
    flex:0 0 calc((100% - 54px) / 4) !important;
    width:calc((100% - 54px) / 4) !important;
    min-width:calc((100% - 54px) / 4) !important;
    max-width:calc((100% - 54px) / 4) !important;
    box-sizing:border-box !important;
  }
  .destaques .carousel-arrow {
    flex:0 0 40px !important;
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:50% !important;
    background:#1769ff !important;
    color:#fff !important;
    font-size:26px !important;
    font-weight:800 !important;
    line-height:40px !important;
    box-shadow:0 5px 15px rgba(23,105,255,.22) !important;
    z-index:10 !important;
  }
  .destaques .carousel-arrow[disabled] { opacity:.30 !important; }
}


/* ===== HOME: HERO E CATEGORIAS NO ESTILO DE REFERENCIA ===== */
@media (min-width:801px){
 body{overflow-x:hidden}
 .banner{
   width:100%; height:290px; min-height:290px;
   background-image:linear-gradient(90deg,rgba(2,13,57,.68),rgba(4,28,93,.18)),url('../img/fundo.jpg');
   background-size:cover; background-position:center 48%;
   justify-content:flex-start; align-items:flex-start;
 }
 .banner-conteudo{
   width:min(100%, 1100px); margin:0 auto;
   padding:34px 28px 0; text-align:left; color:#fff;
 }
 .banner-conteudo h1{font-size:42px;line-height:1.08;max-width:760px;margin:0 0 8px;font-weight:850}
 .banner-conteudo p{font-size:17px;margin:0;color:#f1f5ff}
 .banner-busca{
   width:min(760px,calc(100% - 48px));height:48px;
   margin:-100px auto 22px; position:relative;z-index:5;
   background:#fff;border:1px solid #dbeafe;border-radius:28px;
   box-shadow:0 8px 22px rgba(0,0,0,.2);padding:0 8px 0 18px;
 }
 .banner-busca input{color:#172554}
 .banner-busca input::placeholder{color:#64748b}
 .banner-busca button{width:38px;height:38px;flex-basis:38px}
 .categorias{padding:67px 5.5% 34px;background:#f3f7fc;text-align:center}
 .categorias h2{font-size:25px;margin:0 0 5px;color:#101c45}
 .categorias-subtitulo{font-size:13px;color:#71809c;margin:0 0 14px}
 .categorias-container{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
 .categoria-card{
   display:grid;grid-template-columns:68px minmax(0,1fr) 26px;
   grid-template-rows:auto auto;align-items:center;column-gap:12px;
   min-height:88px;padding:10px 12px;background:#fff;border-radius:12px;
   text-align:left;box-shadow:0 4px 16px rgba(15,23,42,.07);
 }
 .categoria-icone{grid-column:1;grid-row:1/3;width:68px;height:68px;margin:0;border-radius:50%;background:#eaf3ff;display:flex;align-items:center;justify-content:center}
 .categoria-icone img{width:35px;height:35px;object-fit:contain}
 .categoria-card h3{grid-column:2;grid-row:1;align-self:end;font-size:15px;margin:0 0 3px;color:#101c45}
 .categoria-card p{grid-column:2;grid-row:2;align-self:start;font-size:11px;line-height:1.35;margin:0;color:#71809c}
 .categoria-card:after{content:'›';grid-column:3;grid-row:1/3;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#edf5ff;color:#1672ff;font-size:22px}
}


/* ===== AJUSTE DO BANNER: ALTURA MAIS COMPACTA ===== */
@media (min-width: 801px) {
  .banner {
    height: 360px !important;
    min-height: 360px !important;
    max-height: 360px !important;
    background-size: cover !important;
    background-position: center center !important;
  }
}



/* CORREÇÃO: foto preenche exatamente o círculo do resumo do menu da conta */
.cabecalho .menu-perfil-resumo .menu-perfil-avatar {
    box-sizing: border-box !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    flex: 0 0 38px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
}
.cabecalho .menu-perfil-resumo .menu-perfil-avatar > img {
    box-sizing: border-box !important;
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    flex: 0 0 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    border: 0 !important;
    border-radius: 50% !important;
    padding: 0 !important;
    margin: 0 !important;
}