/* =======================
        HERO
======================= */

.hero{

    background:#f8f9fc;

    padding:40px 0;

}

.hero .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:60px;

}

.hero-text{

    flex:1;

}

.hero-text span{

    color:#ff6b00;

    font-weight:bold;

    font-size:20px;

}

.hero-text h1{

    margin-top:20px;

    font-size:56px;

    line-height:1.1;

    color:#2d3748;

}

.hero-text p{

    margin-top:18px;

    font-size:22px;

    color:#666;

    line-height:1.7;

}

.hero-busca{
    margin-top:35px;
    max-width:1200px;
}

/* =======================
        CARDS
======================= */

.cards{

    padding:45px;

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(390px,1fr));

    gap:28px;

}

.card{

    background:white;

    border-radius:24px;

    overflow:hidden;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

    transition:.35s;

}

.card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 40px rgba(0,0,0,.18);

}

.card img{

    width:100%;

    height:270px;

    object-fit:cover;

    transition:.35s;

}

.card:hover img{

    transform:scale(1.05);

}

.card-body{

    padding:22px;

}

.top-card{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:18px;

}

.tipo{

    background:#fff3e8;

    color:#ff6b00;

    padding:8px 16px;

    border-radius:30px;

    font-size:13px;

    font-weight:bold;

}

.desconto{

    background:#ff6b00;

    color:white;

    padding:8px 14px;

    border-radius:30px;

    font-size:13px;

    font-weight:bold;

}

.card h3{

    font-size:26px;

    margin-bottom:15px;

    line-height:1.3;

}

.endereco{

    color:#666;

    margin-bottom:22px;

    line-height:1.5;

}

.precos{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px;

    margin-bottom:12px;

}

.box-preco{

    background:#f6f6f6;

    padding:15px;

    border-radius:14px;

}

.box-preco span{

    font-size:13px;

    color:#666;

}

.box-preco strong{

    display:block;

    margin-top:6px;

    font-size:21px;

}

.data-leilao{

    margin-top:10px;

    padding-top:8px;

    border-top:1px solid #ececec;

    font-size:12px;

    color:#666;

    line-height:1.5;

}
.segundo{

    background:#fff2e8;

}

.segundo strong{

    color:#ff6b00;

}

.economia{

    background:#ecfff3;

    border-radius:14px;

    padding:16px;

    text-align:center;

    margin-bottom:20px;

}

.economia small{

    color:#666;

}

.economia strong{

    display:block;

    margin-top:8px;

    color:#009c41;

    font-size:28px;

}

.info{

    margin-bottom:22px;

}

.botoes{

    display:flex;

    gap:12px;

}

.btn{

    flex:1;

    justify-content:center;

}

.btn:hover{

    transform:scale(1.03);

}

.btn-mapa{

    background:#ff6b00;

    color:white;

}

.btn-site{

    background:#1d1d1d;

    color:white;

}

.btn-favorito{

    background:none;
    border:none;
    cursor:pointer;
    font-size:28px;
    transition:.2s;

}

.btn-favorito:hover{

    transform:scale(1.15);

}
.loading{

    width:100%;

    grid-column:1/-1;

    text-align:center;

    padding:80px;

    font-size:34px;

    color:#ff6b00;

    font-weight:bold;

}

/* =======================
      PAGINAÇÃO
======================= */

.paginacao{

    grid-column:1/-1;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    margin:35px 0 80px;

}

.paginacao button{

    border:none;

    padding:16px 26px;

    border-radius:14px;

    cursor:pointer;

    font-weight:bold;

}

.btn-anterior{

    background:#222;

    color:white;

}

.btn-proxima{

    background:#ff6b00;

    color:white;

}

.btn-desabilitado{

    opacity:.4;

    cursor:not-allowed;

}

.pagina-info{

    font-weight:bold;

    color:#ff6b00;

}

/* =======================
      RESPONSIVO
======================= */

@media(max-width:768px){


.hero h1{

font-size:42px;

}

.cards{

padding:20px;

grid-template-columns:1fr;

}

.busca{

flex-direction:column;

}

.botoes{

flex-direction:column;

}

}
/* ===============================
   BUSCA MODERNA
================================ */

.busca{
    display:flex;
    align-items:center;
    gap:18px;
    margin-top:40px;
    flex-wrap:wrap;
}

.campo-busca{
    flex:1;
    display:flex;
    align-items:center;
    background:#fff;
    border-radius:18px;
    padding:0 22px;
    height:64px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.paginacao button:disabled{ pointer-events:none; }

@media(max-width:768px){
    .campo-cidade{ min-width:0; }
    .mais-filtros-conteudo{ grid-template-columns:1fr; }
    .acoes-busca{ flex-direction:column; }
}

.campo-cidade{ position:relative; min-width:280px; }
.limpar-cidade{ border:0; background:transparent; color:#6b7280; cursor:pointer; font-size:24px; line-height:1; }
.sugestoes-cidade{ position:absolute; z-index:30; top:calc(100% + 8px); left:0; right:0; max-height:270px; overflow:auto; padding:8px; border-radius:14px; background:#fff; box-shadow:0 16px 36px rgba(15,23,42,.2); }
.sugestao-cidade{ display:flex; width:100%; align-items:center; justify-content:space-between; gap:12px; padding:11px 13px; border:0; border-radius:9px; background:transparent; color:#1f2937; cursor:pointer; font:inherit; text-align:left; }
.sugestao-cidade span{ font-weight:700; }
.sugestao-cidade small{ flex:0 0 auto; color:#6b7280; font-size:12px; }
.sugestao-cidade:hover,.sugestao-cidade:focus{ background:#fff3e8; color:#d95700; outline:0; }
.campo-cidade-alerta{ position:relative; }
.sugestoes-cidade-alerta{ position:absolute; z-index:40; top:calc(100% + 4px); left:0; right:0; max-height:220px; overflow:auto; padding:6px; border:1px solid #e5e7eb; border-radius:12px; background:#fff; box-shadow:0 12px 26px rgba(15,23,42,.14); }
.sugestao-cidade-alerta{ display:flex; width:100%; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:0; border-radius:8px; background:transparent; color:#374151; cursor:pointer; font:inherit; text-align:left; }
.sugestao-cidade-alerta:hover,.sugestao-cidade-alerta:focus{ outline:0; background:#fff3e8; color:#c2410c; }
.sugestao-cidade-alerta small{ flex:none; color:#6b7280; font-size:12px; }
.mais-filtros{ width:100%; border:1px solid #e5e7eb; border-radius:16px; background:rgba(255,255,255,.76); padding:0 18px; }
.mais-filtros summary{ padding:15px 0; color:#374151; cursor:pointer; font-weight:700; }
.mais-filtros-conteudo{ display:grid; grid-template-columns:repeat(5,minmax(130px,1fr)); gap:12px; padding:0 0 16px; }
.mais-filtros-conteudo label{ display:grid; gap:6px; color:#4b5563; font-size:13px; font-weight:600; }
.mais-filtros-conteudo input,.mais-filtros-conteudo select{ box-sizing:border-box; width:100%; min-height:40px; border:1px solid #d1d5db; border-radius:10px; background:#fff; padding:0 10px; color:#1f2937; font:inherit; }

.campo-busca i{
    color:#ff6b00;
    font-size:22px;
    margin-right:15px;
}

.campo-busca input,
.campo-busca select{

    border:none;
    outline:none;
    width:100%;
    font-size:18px;
    background:transparent;

}

.filtros{

    display:flex;

    align-items:center;

    gap:15px;

    margin-top:18px;

}

.filtro{

    border:none;

    background:white;

    padding:12px 22px;

    border-radius:50px;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.filtro:hover{

    background:#ff6b00;

    color:white;

    transform:translateY(-3px);

}

.filtro.ativo{

    background:#ff6b00;

    color:#fff;

}
.btn-buscar{

    min-width:220px;

    height:64px;

    border:none;

    border-radius:18px;

    background:linear-gradient(135deg,#ff7b00,#ff5b00);

    color:#fff;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

    box-shadow:0 12px 30px rgba(255,107,0,.35);

}

.btn-buscar:hover{

    transform:translateY(-3px);

    box-shadow:0 18px 40px rgba(255,107,0,.45);

}

/* ===============================
   AÇÕES DA BUSCA
================================ */

.acoes-busca{

    display:flex;
    gap:15px;
    width:100%;

}

.btn-buscar{

    flex:1;

}

.btn-alerta{

    flex:1;

    height:64px;

    border:none;

    border-radius:18px;

    background:linear-gradient(135deg,#2563eb,#1d4ed8);

    color:#fff;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

    box-shadow:0 12px 30px rgba(37,99,235,.35);

}

.btn-alerta:hover{

    transform:translateY(-3px);

    box-shadow:0 18px 40px rgba(37,99,235,.45);

}

/* ===============================
   MODAL ALERTA
================================ */

.modal{

    position:fixed;
    inset:0;

    background:rgba(0,0,0,.45);

    display:none;

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

    z-index:9999;

    backdrop-filter:blur(4px);

}

.modal.ativo{

    display:flex;

}

.modal-box{

    width:100%;
    max-width:560px;

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    box-shadow:0 25px 60px rgba(0,0,0,.25);

    animation:modalEntrada .25s ease;

}

@keyframes modalEntrada{

    from{

        opacity:0;
        transform:translateY(20px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

.modal-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px 28px;

    border-bottom:1px solid #ececec;

}

.modal-header h2{

    margin:0;

}

.modal-header button{

    border:none;

    background:none;

    cursor:pointer;

    font-size:28px;

}

.modal-body{

    padding:28px;

    display:grid;

    gap:18px;

}

.campo-modal{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.campo-modal label{

    font-weight:600;

    color:#555;

}

.campo-modal input,
.campo-modal select{

    height:50px;

    border:1px solid #ddd;

    border-radius:12px;

    padding:0 15px;

    font-size:16px;

}

.modal-footer{

    padding:20px 28px;

    border-top:1px solid #ececec;

    display:flex;

    justify-content:flex-end;

    gap:12px;

}

/* ===============================
   TOAST
================================ */

.toast{

    position:fixed;

    top:25px;

    right:25px;

    background:#16a34a;

    color:#fff;

    padding:16px 22px;

    border-radius:14px;

    font-weight:600;

    box-shadow:0 15px 35px rgba(0,0,0,.2);

    opacity:0;

    transform:translateY(-20px);

    transition:.3s;

    z-index:10000;

    pointer-events:none;

}

.toast.mostrar{

    opacity:1;

    transform:translateY(0);

}

.badge-novo {

    background:
    linear-gradient(
        135deg,
        #22c55e,
        #16a34a
    );

    color:white;

    font-size:12px;

    font-weight:700;

    padding:
    5px 10px;

    border-radius:
    20px;

    display:
    inline-flex;

    align-items:center;

    gap:5px;

    box-shadow:
    0 3px 8px
    rgba(22,163,74,.35);

}

/* Busca e resultados: ajustes responsivos sem alterar a lógica dos filtros. */
.busca{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:stretch;
    gap:14px;
    margin-top:30px;
}
.busca .campo-busca{ min-width:0; height:58px; padding:0 16px; }
.busca .campo-cidade{ grid-column:span 2; }
.busca .campo-busca input,.busca .campo-busca select{ min-width:0; font-size:16px; }
.busca .mais-filtros,.busca .acoes-busca{ grid-column:1/-1; }
.busca .mais-filtros{ padding:0 16px; box-shadow:none; }
.mais-filtros summary{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:52px; list-style:none; }
.mais-filtros summary::-webkit-details-marker{ display:none; }
.mais-filtros summary::after{ content:"⌄"; color:#ff6b00; font-size:20px; transition:transform .2s ease; }
.mais-filtros[open] summary::after{ transform:rotate(180deg); }
.mais-filtros summary span{ color:#6b7280; font-size:13px; font-weight:500; }
.mais-filtros-conteudo{ grid-template-columns:repeat(4,minmax(140px,1fr)); }
.mais-filtros-conteudo .campo-busca{ box-sizing:border-box; min-width:0; }
.acoes-busca{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:12px; }
.btn-buscar,.btn-alerta{ width:100%; min-width:0; height:58px; font-size:16px; }
.filtros{ overflow-x:auto; flex-wrap:nowrap; padding:3px 2px 12px; scrollbar-width:thin; }
.filtro{ flex:0 0 auto; white-space:nowrap; }
.resumo-busca{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:16px 45px 0; color:#1f2937; }
.resultado-titulo{ font-size:17px; }
.chips-filtros{ display:flex; gap:7px; flex-wrap:wrap; }
.chip-filtro{ border:1px solid #fed7aa; border-radius:999px; background:#fff7ed; color:#9a3412; padding:5px 9px; font-size:12px; font-weight:700; }
.limpar-filtros{ margin-left:auto; border:0; background:transparent; color:#d95700; cursor:pointer; font:inherit; font-weight:700; text-decoration:underline; }
.card{ min-width:0; }
.card h3,.endereco{ overflow-wrap:anywhere; }

/* Triagem financeira e características do imóvel nos cards. */
.precos.tem-segunda{ grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); align-items:stretch; }
.precos.somente-primeira{ grid-template-columns:minmax(0,1fr); }
.primeiro-preco{ border:1px solid #e5e7eb; }
.destaque-segunda{ position:relative; border:1px solid #fdba74; background:linear-gradient(135deg,#fff7ed,#ffedd5); box-shadow:0 9px 20px rgba(234,88,12,.15); }
.destaque-segunda::before{ content:"2ª PRAÇA"; position:absolute; top:-9px; right:12px; border-radius:999px; background:#ea580c; color:#fff; padding:3px 8px; font-size:9px; font-weight:800; letter-spacing:.04em; }
.destaque-segunda.com-desconto::before{ content:"MELHOR VALOR"; }
.destaque-segunda strong{ color:#c2410c; font-size:24px; }
.indicadores-financeiros{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0 0 16px; }
.indicador-financeiro{ min-width:0; border-radius:13px; padding:12px 14px; }
.indicador-financeiro small{ display:block; color:#64748b; font-size:12px; font-weight:700; }
.indicador-financeiro strong{ display:block; margin-top:5px; overflow-wrap:anywhere; font-size:19px; }
.avaliacao{ border:1px solid #dbeafe; background:#eff6ff; }
.avaliacao strong{ color:#1d4ed8; }
.economia-avaliacao{ border:1px solid #bbf7d0; background:#f0fdf4; }
.economia-avaliacao strong{ color:#15803d; }
.caracteristicas-imovel{ margin:0 0 17px; border-top:1px solid #edf0f3; padding-top:15px; }
.caracteristicas-imovel h4{ margin:0 0 10px; color:#334155; font-size:14px; }
.caracteristicas-lista{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.caracteristica{ min-width:0; border-radius:11px; background:#f8fafc; padding:9px 10px; }
.caracteristica span{ display:block; color:#64748b; font-size:11px; font-weight:700; }
.caracteristica strong{ display:block; margin-top:3px; overflow-wrap:anywhere; color:#1e293b; font-size:14px; }

@media (max-width:1024px){
    .hero .container{ display:block; }
    .hero-busca{ max-width:none; }
    .busca{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .busca .campo-cidade{ grid-column:1/-1; }
    .mais-filtros-conteudo{ grid-template-columns:repeat(3,minmax(140px,1fr)); }
    .cards{ grid-template-columns:repeat(2,minmax(0,1fr)); padding:28px; }
}

@media (max-width:768px){
    body{ overflow-x:hidden; }
    .hero{ padding:24px 0 14px; }
    .hero .container{ gap:0; }
    .hero-text span{ font-size:15px; }
    .hero-text h1{ margin-top:10px; font-size:34px; }
    .hero-text p{ margin-top:12px; font-size:16px; line-height:1.5; }
    .hero-busca{ margin-top:22px; }
    .busca{ grid-template-columns:1fr; gap:11px; margin-top:0; }
    .busca .campo-cidade,.busca .mais-filtros,.busca .acoes-busca{ grid-column:1; }
    .busca .campo-busca{ height:56px; border-radius:15px; padding:0 15px; box-shadow:0 7px 18px rgba(15,23,42,.09); }
    .campo-cidade{ min-width:0; }
    .sugestoes-cidade{ top:calc(100% + 5px); max-height:min(280px,48vh); border-radius:13px; }
    .sugestao-cidade{ min-height:46px; padding:12px; }
    .mais-filtros{ border-radius:15px; background:#fff; }
    .mais-filtros summary span{ display:none; }
    .mais-filtros-conteudo{ grid-template-columns:1fr; gap:11px; padding-bottom:15px; }
    .mais-filtros-conteudo label{ font-size:14px; }
    .mais-filtros-conteudo input,.mais-filtros-conteudo select{ min-height:48px; font-size:16px; }
    .mais-filtros-conteudo .campo-busca{ height:52px; }
    .acoes-busca{ grid-template-columns:1fr; gap:10px; }
    .btn-buscar,.btn-alerta{ height:54px; border-radius:15px; font-size:16px; }
    .btn-alerta{ order:2; }
    .filtros{ gap:9px; margin-top:13px; margin-right:-16px; padding-right:16px; }
    .filtro{ padding:10px 15px; font-size:14px; }
    .resumo-busca{ display:grid; gap:10px; padding:15px 20px 0; }
    .resultado-titulo{ font-size:16px; }
    .limpar-filtros{ justify-self:start; margin-left:0; min-height:32px; }
    .cards{ grid-template-columns:1fr; gap:18px; padding:20px; }
    .card{ border-radius:18px; }
    .card:hover{ transform:none; }
    .card img{ height:210px; }
    .card-body{ padding:17px; }
    .top-card{ align-items:flex-start; gap:8px; margin-bottom:12px; }
    .tipo,.desconto{ padding:6px 10px; font-size:11px; }
    .btn-favorito{ font-size:26px; min-width:40px; min-height:40px; }
    .card h3{ font-size:20px; margin-bottom:10px; }
    .endereco{ margin-bottom:15px; font-size:14px; }
    .precos{ gap:9px; }
    .box-preco{ padding:12px; }
    .box-preco strong{ font-size:17px; }
    .destaque-segunda strong{ font-size:19px; }
    .destaque-segunda::before{ right:8px; font-size:8px; }
    .data-leilao{ font-size:11px; }
    .indicadores-financeiros{ gap:8px; margin-bottom:14px; }
    .indicador-financeiro{ padding:10px; }
    .indicador-financeiro strong{ font-size:16px; }
    .caracteristicas-imovel{ margin-bottom:14px; padding-top:13px; }
    .caracteristicas-lista{ gap:7px; }
    .caracteristica{ padding:8px 9px; }
    .economia{ padding:13px; margin-bottom:14px; }
    .economia strong{ font-size:23px; }
    .botoes{ gap:9px; flex-direction:row; }
    .botoes .btn{ min-height:46px; font-size:14px; }
    .loading{ padding:48px 16px; font-size:20px; }
    .paginacao{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:20px 0 36px; }
    .paginacao button{ min-height:50px; padding:12px; }
    .pagina-info{ grid-column:1/-1; grid-row:1; text-align:center; }
    .modal{ align-items:flex-end; }
    .modal-box{ max-width:none; max-height:88vh; border-radius:22px 22px 0 0; display:flex; flex-direction:column; }
    .modal-header,.modal-footer{ padding:16px 20px; }
    .modal-header h2{ font-size:20px; }
    .modal-body{ overflow-y:auto; padding:20px; gap:14px; }
    .campo-modal input,.campo-modal select{ min-height:50px; font-size:16px; }
    .modal-footer{ display:grid; grid-template-columns:1fr 1fr; }
    .modal-footer .btn{ min-height:48px; }
    .toast{ top:auto; right:14px; bottom:14px; left:14px; }
}

@media (max-width:374px){
    .hero-text h1{ font-size:30px; }
    .precos{ grid-template-columns:1fr; }
    .precos.tem-segunda{ grid-template-columns:1fr; gap:16px; }
    .indicadores-financeiros,.caracteristicas-lista{ grid-template-columns:1fr; }
    .botoes{ flex-direction:column; }
    .modal-footer{ grid-template-columns:1fr; }
}