/* Fontes carregadas via no de cada página (mais rápido que @import) */ :root{--r:#C8102E;--rd:#9B0C22;--rl:#FFF0F2;--cinza:#F4F4F4;--borda:#E8E8E8;--texto:#111;--sub:#777;--br:#FFF;--fundo:#F0F0F0;--rtxt:#C8102E;--sombra:rgba(0,0,0,.10)} /* ── MODO ESCURO ── acompanha o aparelho e pode ser trocado no botão da barra */ @media (prefers-color-scheme: dark){ :root:not([data-tema="claro"]){ --rl:#3a1c22;--cinza:#272c37;--borda:#363d4b;--texto:#e9edf2;--sub:#9aa3b0;--br:#1e222b;--fundo:#14171e; --rtxt:#ff4d68;--sombra:rgba(0,0,0,.45);color-scheme:dark; } } :root[data-tema="escuro"]{ --rl:#3a1c22;--cinza:#272c37;--borda:#363d4b;--texto:#e9edf2;--sub:#9aa3b0;--br:#1e222b;--fundo:#14171e; --rtxt:#ff4d68;--sombra:rgba(0,0,0,.45);color-scheme:dark; } *{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth} body{font-family:'Inter',sans-serif;background:var(--fundo);color:var(--texto);font-size:15px} /* NAV */ nav{position:sticky;top:0;z-index:100;background:var(--br);border-bottom:3px solid var(--r);padding:0 16px;height:58px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 2px 12px rgba(0,0,0,.07)} .logo{font-family:'Syne',sans-serif;font-size:22px;font-weight:900;color:var(--texto);letter-spacing:-1px;cursor:pointer;user-select:none;line-height:1.05} .logo span{background:var(--r);color:#fff;border-radius:.2em;padding:.04em .3em .12em;margin-left:.07em;display:inline-block;line-height:1;letter-spacing:0}.logo small{font-size:9px;font-weight:600;color:var(--sub);letter-spacing:1.5px;text-transform:uppercase;display:block;margin-top:3px;line-height:1} .nav-r{display:flex;align-items:center;gap:8px} .btn-meus{background:none;border:1.5px solid var(--borda);color:var(--texto);font-weight:600;font-size:13px;padding:8px 14px;border-radius:8px;cursor:pointer} .btn-anunciar{background:var(--r);color:var(--br);font-weight:700;font-size:13px;padding:9px 16px;border-radius:8px;border:none;cursor:pointer;white-space:nowrap;transition:background .15s} .btn-anunciar:hover{background:var(--rd)} /* HERO */ .hero{background:var(--r);background-image:radial-gradient(circle at 85% 15%,rgba(255,255,255,.08) 0%,transparent 50%);padding:44px 20px 34px;text-align:center;position:relative;overflow:hidden} .hero::before{content:'MG';position:absolute;right:-15px;top:-15px;font-family:'Syne',sans-serif;font-size:180px;font-weight:900;color:rgba(255,255,255,.04);pointer-events:none;line-height:1} .hero-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.9);font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;padding:5px 14px;border-radius:20px;margin-bottom:20px} .hero h1{font-family:'Montserrat',sans-serif;font-size:34px;font-weight:800;color:var(--br);line-height:1.12;margin-bottom:10px;letter-spacing:-.5px} .hero h1 em{font-style:normal;border-bottom:3px solid rgba(255,255,255,.4)} .hero p{color:rgba(255,255,255,.7);font-size:14px;margin-bottom:32px} /* BUSCA CARD */ .busca-card{background:var(--br);border-radius:18px;padding:8px;max-width:480px;margin:0 auto;box-shadow:0 16px 48px rgba(0,0,0,.22)} .tipo-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(74px,1fr));gap:6px;padding:4px;background:var(--cinza);border-radius:12px;margin-bottom:10px} .tipo-tab{padding:13px 8px;border-radius:9px;border:none;background:transparent;font-size:14px;font-weight:700;color:var(--sub);cursor:pointer;transition:all .15s;text-align:center;white-space:nowrap} .tipo-tab.ativo{background:var(--br);color:var(--rtxt);box-shadow:0 2px 6px rgba(0,0,0,.1)} .busca-campos{display:flex;flex-direction:column;gap:8px;padding:4px} /* BUSCA AVANÇADA */ .busca-avancada{display:none;padding:4px 0 0} .busca-avancada.aberta{display:block} .toggle-avancada{background:none;border:none;color:var(--sub);font-size:12px;font-weight:600;cursor:pointer;padding:4px 0;text-decoration:underline;text-underline-offset:2px} .sel-wrap{position:relative} .sel-wrap::after{content:'▾';position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--sub);pointer-events:none;font-size:11px} .busca-campos select,.busca-campos input{width:100%;padding:13px 32px 13px 14px;border:1.5px solid var(--borda);border-radius:10px;font-size:14px;font-family:'Inter',sans-serif;color:var(--texto);background:var(--cinza);appearance:none;cursor:pointer} .busca-campos select:focus,.busca-campos input:focus{outline:none;border-color:var(--r);background:var(--br)} .busca-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px} .busca-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px} .btn-buscar{width:100%;padding:14px;background:var(--r);color:var(--br);font-weight:700;font-size:15px;border:none;border-radius:10px;cursor:pointer;transition:background .15s} .btn-buscar:hover{background:var(--rd)} .btn-anunciar-hero{width:100%;padding:13px;background:transparent;color:var(--rtxt);font-weight:700;font-size:14px;border:2px solid var(--r);border-radius:10px;cursor:pointer;transition:all .15s;margin-top:2px} .btn-anunciar-hero:hover{background:var(--rl)} /* STATS */ /* Barra de atalhos (Anunciar / Planos / Tabela FIPE) — de ponta a ponta no PC e no mobile */ .stats{background:var(--br);border-bottom:1px solid var(--borda);display:flex;gap:12px;padding:14px} .sm-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:var(--br);border:1px solid var(--borda);border-radius:12px;padding:16px 4px;font-size:14px;font-weight:700;color:var(--texto);cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.05);font-family:inherit;transition:background .15s,box-shadow .15s,transform .1s} .sm-btn:hover{background:var(--cinza);box-shadow:0 3px 10px rgba(0,0,0,.08)} .sm-btn:active{transform:translateY(1px)} @media(max-width:768px){ .stats{gap:8px;padding:10px} .sm-btn{padding:11px 4px;font-size:12px} } /* SEÇÃO */ .secao{padding:24px 16px;max-width:560px;margin:0 auto} .sec-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px} .sec-titulo{font-family:'Archivo',sans-serif;font-size:20px;font-weight:800;letter-spacing:-.5px} .sec-link{font-size:13px;font-weight:600;color:var(--rtxt);cursor:pointer} /* ORDENAÇÃO */ .ordenacao{display:flex;gap:6px;margin-bottom:16px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none} .ordenacao::-webkit-scrollbar{display:none} .ord-btn{flex-shrink:0;padding:7px 14px;border-radius:20px;border:1.5px solid var(--borda);background:var(--br);font-size:12px;font-weight:600;color:var(--sub);cursor:pointer;white-space:nowrap;transition:all .15s} .ord-btn.ativo{background:var(--r);color:var(--br);border-color:var(--r)} /* CARDS */ .cards-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px} .card{background:var(--br);border-radius:14px;overflow:hidden;border:1px solid var(--borda);cursor:pointer;transition:transform .2s,box-shadow .2s} .card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.1)} /* Card em DESTAQUE (pago): moldura vermelha premium */ .card-premium{border:2px solid var(--r);box-shadow:0 4px 18px rgba(200,16,46,.20)} .card-premium:hover{box-shadow:0 12px 30px rgba(200,16,46,.28)} .destaques-titulo{color:var(--texto);display:inline-flex;align-items:center;gap:6px} /* aproxima a faixa Destaques da barra acima e da listagem abaixo */ .secao.secao-destaques{padding-top:14px;padding-bottom:0} .secao-destaques + .secao{padding-top:14px} .card-img{width:100%;aspect-ratio:4/3;background:linear-gradient(135deg,#fff0f2,#ffd6db);display:flex;align-items:center;justify-content:center;font-size:44px;position:relative;overflow:hidden} .card-img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0} .card-carrossel{position:absolute;inset:0;overflow:hidden} .card-carrossel .card-slides{display:flex;height:100%;transition:transform .35s ease} .card-carrossel .card-slides img{position:static;flex:0 0 100%;width:100%;height:100%;object-fit:cover;display:block} .card-seta{position:absolute;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.42);color:#fff;border:none;font-size:16px;line-height:1;cursor:pointer;z-index:4;opacity:.85;display:flex;align-items:center;justify-content:center} .card-seta:hover{opacity:1;background:rgba(0,0,0,.62)} .card-seta-e{left:6px}.card-seta-d{right:6px} .card-dots{position:absolute;bottom:8px;left:0;right:0;display:flex;justify-content:center;gap:5px;z-index:4;pointer-events:none} .card-fotos-num{position:absolute;bottom:8px;left:8px;background:rgba(0,0,0,.55);color:#fff;font-size:10px;font-weight:600;padding:3px 8px;border-radius:5px;z-index:2} .card-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.65);box-shadow:0 1px 2px rgba(0,0,0,.3)} .card-dot.ativo{background:#fff;width:14px;border-radius:3px} .card-emoji{z-index:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))} /* Placeholder com a logo/nome da marca (quando não há foto) */ .ph-marca{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:18px;background:linear-gradient(135deg,#fff,#f6e9eb)} .ph-logo{max-width:72%;max-height:62%;object-fit:contain;opacity:.95;filter:drop-shadow(0 1px 2px rgba(0,0,0,.08))} .ph-nome{font-family:'Syne',sans-serif;font-weight:800;font-size:20px;color:var(--rtxt);text-transform:uppercase;letter-spacing:1.5px;text-align:center;line-height:1.15;align-items:center;justify-content:center;padding:0 6px} .det-galeria .ph-nome{font-size:30px;letter-spacing:2px} /* Placeholder de marca em miniaturas (Meus anúncios / favoritos) */ .meu-img .ph-marca,.perfil-anuncio-img .ph-marca{padding:6px} .meu-img .ph-logo,.perfil-anuncio-img .ph-logo{max-width:82%;max-height:74%} .meu-img .ph-nome,.perfil-anuncio-img .ph-nome{font-size:9px;letter-spacing:.4px} .card-badges{position:absolute;top:8px;left:8px;display:flex;flex-direction:column;gap:4px;z-index:2} .badge{font-size:9px;font-weight:700;padding:3px 8px;border-radius:5px;text-transform:uppercase;letter-spacing:.5px} .badge-dest{background:var(--r);color:var(--br)} .badge-novo{background:#16A34A;color:var(--br)} .card-tempo{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.55);color:var(--br);font-size:10px;font-weight:600;padding:3px 8px;border-radius:5px;z-index:2} .card-body{padding:12px 13px 13px} .card-nome{font-weight:700;font-size:14px;color:var(--texto);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .card-specs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px} .card-spec{background:var(--cinza);border-radius:4px;padding:3px 7px;font-size:10px;font-weight:600;color:var(--sub)} .card-preco{font-family:'Montserrat',sans-serif;font-size:19px;font-weight:800;color:var(--rtxt);margin-bottom:10px} .card-rodape{display:flex;justify-content:space-between;align-items:center} .card-cidade{font-size:10px;color:var(--sub)} .btn-zap{background:#25D366;color:var(--br);font-size:11px;font-weight:700;padding:6px 10px;border-radius:6px;border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:5px} /* CARD DESTAQUE — card normal, do mesmo tamanho dos outros (só ganha a tag) */ .card-dest{display:flex;flex-direction:column} .card-dest .card-img{font-size:52px} .card-dest .card-body{flex:1;display:flex;flex-direction:column;justify-content:flex-start;padding:12px 13px 13px} .card-dest .card-preco{font-size:19px} .card-dest .card-body>div:last-child{margin-top:auto} .card-dest .card-specs .card-spec:nth-child(n+3){display:none} /* OPCIONAIS — chips no formulário */ .opc-chips{display:flex;flex-wrap:wrap;gap:8px} .opc-chip{font-size:13px;padding:8px 13px;border-radius:20px;background:var(--cinza);border:1px solid var(--borda);color:var(--sub);cursor:pointer;font-family:inherit;transition:all .15s} .opc-chip:hover{border-color:var(--r)} .opc-chip.ativo{background:var(--r);border-color:var(--r);color:#fff} .opc-chip.ativo::before{content:'✓ ';font-weight:700} /* OPCIONAIS — lista no anúncio aberto */ .det-opcionais{border-top:1px solid var(--borda);padding-top:16px;margin-bottom:18px} .det-opc-titulo{font-size:16px;font-weight:700;margin-bottom:12px} .det-opc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px} .det-opc-item{font-size:14px;display:flex;align-items:center;gap:8px;color:var(--texto)} .det-opc-check{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--r);color:#fff;font-size:12px;font-weight:700;flex-shrink:0} /* OPCIONAIS — linha compacta no card */ .card-opc{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--sub);white-space:nowrap;overflow:hidden;margin-bottom:8px;min-height:1.2em} .card-opc-vazio{margin-bottom:8px} .card-opc-check{color:var(--rtxt);font-weight:700} .card-opc-mais{color:var(--rtxt);font-weight:700} /* SITUAÇÃO — leilão (botões Sim/Não no formulário) */ .leilao-wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--cinza);border:1px solid var(--borda);border-radius:12px;padding:12px 14px;margin-top:10px} .leilao-pergunta{font-size:14px;font-weight:600;color:var(--texto)} .leilao-btns{display:flex;gap:8px} .leilao-btn{font-size:14px;font-weight:600;padding:8px 20px;border-radius:9px;background:var(--br);border:1px solid var(--borda);color:var(--sub);cursor:pointer;font-family:inherit;transition:all .15s} .leilao-btn.ativo{background:var(--r);border-color:var(--r);color:#fff} @media(max-width:480px){ .leilao-wrap{flex-direction:column;align-items:stretch;gap:10px} .leilao-btns{width:100%} .leilao-btn{flex:1;padding:10px 8px} } /* SITUAÇÃO — selos no anúncio aberto */ .det-situacao{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px} .sit-selo{font-size:13px;font-weight:700;padding:7px 13px;border-radius:8px;display:inline-flex;align-items:center;gap:5px} .sit-ok{background:#E7F6EC;color:#15803D} .sit-alerta{background:#FBEEDC;color:#9A6700} /* LOADING / VAZIO */ .loading{text-align:center;padding:48px 20px;color:var(--sub);grid-column:span 2} .spinner{width:36px;height:36px;border:3px solid var(--borda);border-top-color:var(--r);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 14px} @keyframes spin{to{transform:rotate(360deg)}} .vazio{text-align:center;padding:48px 20px;color:var(--sub);grid-column:span 2} .vazio-icon{font-size:52px;margin-bottom:12px} .vazio p{font-size:14px;line-height:1.6} .vazio-btn{margin-top:16px;background:var(--r);color:var(--br);font-weight:700;font-size:14px;padding:12px 24px;border-radius:8px;border:none;cursor:pointer} /* DIVISOR */ .divisor{height:8px;background:var(--cinza);border-top:1px solid var(--borda);border-bottom:1px solid var(--borda)} /* CIDADES */ .cidades-scroll{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:none} .cidades-scroll::-webkit-scrollbar{display:none} .cidade-chip{flex-shrink:0;background:var(--br);border:1.5px solid var(--borda);border-radius:50px;padding:8px 16px;cursor:pointer;transition:all .15s} .cidade-chip:hover{border-color:var(--r);background:var(--rl)} .cidade-chip.ativa{background:var(--r);border-color:var(--r);color:var(--br)} .cidade-chip .cn{font-size:13px;font-weight:700;display:block} .cidade-chip .cq{font-size:10px;color:var(--sub);display:block} .cidade-chip.ativa .cq{color:rgba(255,255,255,.7)} /* POR QUÊ */ .porque{background:#111;padding:36px 20px} .porque-inner{max-width:560px;margin:0 auto} .porque-titulo{font-family:'Archivo',sans-serif;font-size:22px;font-weight:900;color:var(--br);margin-bottom:6px;letter-spacing:-.5px} .porque-sub{color:rgba(255,255,255,.4);font-size:13px;margin-bottom:28px} .vantagens{display:flex;flex-direction:column;gap:18px} .vantagem{display:flex;gap:14px;align-items:flex-start} .v-icon{width:46px;min-width:46px;height:46px;background:var(--r);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px} .v-texto strong{display:block;font-size:15px;font-weight:700;color:var(--br);margin-bottom:3px} .v-texto p{font-size:12px;color:rgba(255,255,255,.45);line-height:1.5} /* CTA */ .cta{background:var(--rl);border-top:3px solid var(--r);padding:36px 20px;text-align:center} .cta h2{font-family:'Archivo',sans-serif;font-size:26px;font-weight:900;color:var(--texto);margin-bottom:8px;letter-spacing:-.5px} .cta h2 span{color:var(--rtxt)} .cta p{color:var(--sub);font-size:14px;margin-bottom:28px} .cta-steps{display:flex;justify-content:center;gap:0;margin-bottom:28px;max-width:300px;margin-left:auto;margin-right:auto} .step{flex:1;text-align:center;position:relative} .step:not(:last-child)::after{content:'→';position:absolute;right:-4px;top:8px;color:var(--borda);font-size:16px} .step-num{width:34px;height:34px;background:var(--r);color:var(--br);border-radius:50%;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 7px} .step-label{font-size:11px;font-weight:600;color:var(--sub)} .btn-cta{background:var(--r);color:var(--br);font-weight:700;font-size:16px;padding:16px;border-radius:12px;border:none;cursor:pointer;width:100%;max-width:420px;transition:background .15s} .btn-cta:hover{background:var(--rd)} /* FOOTER */ footer{background:#0A0A0A;padding:32px 20px;text-align:center} .f-logo{font-family:'Syne',sans-serif;font-size:20px;font-weight:900;color:var(--br);letter-spacing:-.5px;margin-bottom:4px} .f-logo span{background:var(--r);color:#fff;border-radius:.2em;padding:.04em .3em .12em;margin-left:.07em;display:inline-block;line-height:1;letter-spacing:0} .f-tag{font-size:12px;color:rgba(255,255,255,.3);margin-bottom:18px} .f-links{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin-bottom:16px} .f-links a{font-size:12px;color:rgba(255,255,255,.35);cursor:pointer} .f-copy{font-size:11px;color:rgba(255,255,255,.15)} /* OVERLAY */ .overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:200;align-items:flex-end;backdrop-filter:blur(3px)} .overlay.aberto{display:flex} /* MODAL BASE */ .modal{background:var(--br);border-radius:24px 24px 0 0;padding:20px 20px 52px;width:100%;max-width:560px;margin:0 auto;max-height:95vh;overflow-y:auto} .modal-handle{width:42px;height:4px;background:var(--borda);border-radius:2px;margin:0 auto 22px} .modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px} .modal-titulo{font-family:'Archivo',sans-serif;font-size:22px;font-weight:900;letter-spacing:-.5px} .modal-fechar{width:34px;height:34px;border-radius:50%;background:var(--cinza);border:none;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;color:var(--sub)} /* FORM */ .campo{margin-bottom:16px} .campo label{display:block;font-size:11px;font-weight:700;color:var(--sub);text-transform:uppercase;letter-spacing:.8px;margin-bottom:7px} .campo input,.campo select,.campo textarea{width:100%;padding:13px 14px;border:1.5px solid var(--borda);border-radius:10px;font-size:14px;font-family:'Inter',sans-serif;color:var(--texto);background:var(--cinza);transition:border-color .15s,background .15s;appearance:none} .campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--r);background:var(--br)} .campo input.erro,.campo select.erro{border-color:var(--r);background:var(--rl)} .campo textarea{height:88px;resize:none} .campo-2col{display:grid;grid-template-columns:1fr 1fr;gap:12px} /* UPLOAD */ .upload-area{border:2px dashed var(--borda);border-radius:12px;padding:24px 16px;text-align:center;background:var(--cinza);cursor:pointer;transition:all .15s} .upload-area:hover{border-color:var(--r);background:var(--rl)} .upload-icon{font-size:36px;margin-bottom:8px} .upload-texto{font-size:13px;color:var(--sub);line-height:1.5} .upload-texto strong{color:var(--rtxt)} #input-fotos{display:none} .fotos-preview{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px} .foto-thumb{aspect-ratio:1;border-radius:8px;overflow:hidden;position:relative;background:var(--cinza)} .foto-thumb img{width:100%;height:100%;object-fit:cover} .foto-remove{position:absolute;top:3px;right:3px;background:rgba(0,0,0,.6);color:white;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center} /* Fotos no editar anúncio — fileira horizontal de miniaturas */ .ed-fotos{display:flex;gap:8px;overflow-x:auto;padding:8px 0 10px;-webkit-overflow-scrolling:touch} .ed-foto{flex:0 0 auto;width:74px;height:74px;border-radius:8px;overflow:hidden;position:relative;background:var(--cinza)} .ed-foto img{width:100%;height:100%;object-fit:cover;display:block} .ed-foto-x{position:absolute;top:4px;right:4px;background:rgba(0,0,0,.62);color:#fff;border:none;border-radius:50%;width:22px;height:22px;font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1} .ed-foto-x:hover{background:var(--r)} .ed-foto-add{flex:0 0 auto;width:74px;height:74px;border-radius:8px;border:1.5px dashed var(--borda);background:var(--cinza);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--sub);cursor:pointer;font-family:inherit;font-size:10px;font-weight:600} .ed-foto-add:hover{border-color:var(--r);color:var(--rtxt)} .ed-foto-add-i{font-size:24px;line-height:1;font-weight:400} .btn-publicar{width:100%;padding:16px;background:var(--r);color:var(--br);font-weight:700;font-size:16px;border:none;border-radius:12px;cursor:pointer;margin-top:12px;transition:background .15s} .btn-publicar:hover{background:var(--rd)} .btn-publicar:disabled{background:#ccc;cursor:not-allowed} .modal-nota{text-align:center;font-size:11px;color:var(--sub);margin-top:10px} /* MODAL DETALHE */ .modal-detalhe{background:var(--br);border-radius:24px 24px 0 0;width:100%;max-width:560px;margin:0 auto;max-height:95vh;overflow-y:auto} .det-galeria{width:100%;aspect-ratio:16/9;background:linear-gradient(135deg,#fff0f2,#ffd6db);display:flex;align-items:center;justify-content:center;font-size:80px;position:relative;overflow:hidden} .det-galeria img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0} .det-seta{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.42);color:#fff;border:none;font-size:22px;line-height:1;cursor:pointer;z-index:5;display:flex;align-items:center;justify-content:center} .det-seta:hover{background:rgba(0,0,0,.65)} .det-seta-e{left:10px}.det-seta-d{right:10px} .det-contador{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.5);color:#fff;font-size:12px;font-weight:600;padding:3px 10px;border-radius:12px;z-index:5} .det-thumbs{display:flex;gap:8px;padding:10px 14px;overflow-x:auto;background:var(--br)} .det-thumb{width:74px;height:54px;object-fit:cover;border-radius:8px;flex-shrink:0;cursor:pointer;opacity:.55;border:2px solid transparent;transition:all .15s} .det-thumb.ativa{opacity:1;border-color:var(--r)} .det-thumb:hover{opacity:1} /* LIGHTBOX (foto ampliada) */ .lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.93);z-index:1000;align-items:center;justify-content:center} .lightbox.aberto{display:flex} #lb-img{max-width:94vw;max-height:88vh;object-fit:contain;border-radius:6px} .lb-fechar{position:absolute;top:16px;right:16px;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;border:none;font-size:20px;cursor:pointer;z-index:2;display:flex;align-items:center;justify-content:center} .lb-seta{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;border:none;font-size:30px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2} .lb-seta-e{left:16px}.lb-seta-d{right:16px} .lb-seta:hover,.lb-fechar:hover{background:rgba(255,255,255,.32)} .lb-contador{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:#fff;font-size:14px;font-weight:600;background:rgba(0,0,0,.45);padding:5px 14px;border-radius:14px} .det-fechar{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.92);border:none;border-radius:50%;width:38px;height:38px;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;box-shadow:0 2px 8px rgba(0,0,0,.15)} .det-corpo{padding:20px} .det-titulo{font-family:'Archivo',sans-serif;font-size:24px;font-weight:900;margin-bottom:4px;letter-spacing:-.5px} .det-local{font-size:13px;color:var(--sub);margin-bottom:4px} .det-tempo{font-size:11px;color:var(--sub);margin-bottom:16px} .det-preco{font-family:'Montserrat',sans-serif;font-size:32px;font-weight:800;color:var(--rtxt);margin-bottom:20px} .det-specs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px} .spec{background:var(--cinza);border-radius:10px;padding:12px 14px} .spec-label{font-size:10px;font-weight:700;color:var(--sub);text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px} .spec-valor{font-size:14px;font-weight:700;color:var(--texto)} .det-desc{font-size:14px;color:var(--sub);line-height:1.7;margin-bottom:20px;padding:16px;background:var(--cinza);border-radius:10px} .det-views{font-size:12px;color:var(--sub);text-align:center;margin-bottom:16px} .btn-zap-g{width:100%;padding:16px;background:#25D366;color:var(--br);font-weight:700;font-size:16px;border:none;border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px} /* MEUS ANÚNCIOS */ .meus-container{background:var(--br);border-radius:24px 24px 0 0;padding:20px 20px 52px;width:100%;max-width:560px;margin:0 auto;max-height:95vh;overflow-y:auto} .meus-busca{display:flex;gap:8px;margin-bottom:20px} .meus-busca input{flex:1;padding:12px 14px;border:1.5px solid var(--borda);border-radius:10px;font-size:14px;font-family:'Inter',sans-serif;background:var(--cinza)} .meus-busca input:focus{outline:none;border-color:var(--r)} .btn-buscar-tel{background:var(--r);color:var(--br);font-weight:700;font-size:13px;padding:12px 16px;border-radius:10px;border:none;cursor:pointer;white-space:nowrap} .meu-card{background:var(--br);border:1px solid var(--borda);border-radius:12px;padding:14px;margin-bottom:12px;display:flex;gap:12px;align-items:flex-start} .meu-img{width:80px;min-width:80px;height:70px;background:linear-gradient(135deg,#fff0f2,#ffd6db);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:30px;overflow:hidden;position:relative} .meu-img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0} .meu-info{flex:1} .meu-nome{font-weight:700;font-size:14px;margin-bottom:2px} .meu-preco{font-family:'Montserrat',sans-serif;font-size:16px;font-weight:800;color:var(--rtxt);margin-bottom:6px} .meu-detalhes{font-size:11px;color:var(--sub);margin-bottom:8px} .meu-acoes{display:flex;gap:6px;flex-wrap:wrap} .btn-acao{font-size:11px;font-weight:700;padding:6px 12px;border-radius:6px;border:none;cursor:pointer} .btn-pausar{background:var(--cinza);color:var(--texto)} .btn-vendido{background:#16A34A;color:var(--br)} .btn-excluir{background:#FEE2E2;color:var(--rtxt)} .btn-renovar{background:var(--r);color:#fff} .btn-renovar:hover{background:var(--rd)} .btn-dest-off{background:var(--cinza);color:var(--texto);border:1px solid var(--borda)} .btn-dest-off:hover{border-color:var(--r);color:var(--rtxt)} .btn-dest-on{background:var(--rl);color:var(--rtxt);border:1px solid var(--r)} /* Selo do plano no perfil */ .plano-box{background:var(--cinza);border:1px solid var(--borda);border-radius:12px;padding:12px 14px;margin-bottom:16px} .plano-box-pago{background:var(--rl);border-color:var(--r)} .plano-box-topo{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px} .plano-box-nome{font-family:'Montserrat',sans-serif;font-weight:800;font-size:15px;color:var(--texto)} .plano-box-pago .plano-box-nome{color:var(--rtxt)} .plano-box-tag{font-size:10px;font-weight:700;background:#E7F6EC;color:#15803D;padding:3px 8px;border-radius:10px} .plano-box-linhas{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--sub)} .plano-box-linhas strong{color:var(--texto);font-weight:800} .plano-box-btn{margin-top:10px;width:100%;background:var(--r);color:#fff;border:none;border-radius:9px;padding:10px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit} .plano-box-btn:hover{background:var(--rd)} .status-badge{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:4px;text-transform:uppercase;margin-bottom:6px} .status-ativo{background:#DCFCE7;color:#16A34A} .status-vendido{background:#DBEAFE;color:#1D4ED8} .status-pausado{background:#FEF9C3;color:#CA8A04} /* TOAST */ .toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:#111;color:var(--br);padding:13px 26px;border-radius:12px;font-size:14px;font-weight:600;z-index:999;opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap;box-shadow:0 4px 20px rgba(0,0,0,.2)} .toast.show{opacity:1} .toast.ok{background:#16A34A} .toast.err{background:var(--r)} /* PROGRESS */ .prog{height:3px;background:var(--rl);position:fixed;top:0;left:0;right:0;z-index:999;display:none} .prog-fill{height:100%;background:var(--r);width:0%;transition:width .3s} /* CHAT */ .chat-section{margin-top:20px;border-top:1px solid var(--borda);padding-top:20px} .chat-titulo{font-family:'Archivo',sans-serif;font-size:16px;font-weight:800;margin-bottom:14px;display:flex;align-items:center;gap:8px} .chat-msgs{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;max-height:260px;overflow-y:auto;padding:4px 0} .chat-msg{max-width:85%;padding:10px 13px;border-radius:12px;font-size:13px;line-height:1.5} .chat-msg.comprador{background:var(--cinza);border-radius:12px 12px 12px 2px;align-self:flex-start} .chat-msg.vendedor{background:var(--r);color:var(--br);border-radius:12px 12px 2px 12px;align-self:flex-end} .chat-msg-nome{font-size:10px;font-weight:700;margin-bottom:3px;opacity:.7} .chat-msg-tempo{font-size:10px;opacity:.55;margin-top:4px;text-align:right} .chat-vazio{text-align:center;padding:24px;color:var(--sub);font-size:13px} .chat-vazio-icon{font-size:32px;margin-bottom:8px} .chat-form{display:flex;flex-direction:column;gap:8px} .chat-nome-input{padding:11px 14px;border:1.5px solid var(--borda);border-radius:10px;font-size:13px;font-family:'Inter',sans-serif;background:var(--cinza)} .chat-nome-input:focus{outline:none;border-color:var(--r);background:var(--br)} .chat-input-row{display:flex;gap:8px} .chat-input{flex:1;padding:11px 14px;border:1.5px solid var(--borda);border-radius:10px;font-size:13px;font-family:'Inter',sans-serif;background:var(--cinza);resize:none} .chat-input:focus{outline:none;border-color:var(--r);background:var(--br)} .btn-chat-send{background:var(--r);color:var(--br);border:none;border-radius:10px;padding:11px 16px;font-size:18px;cursor:pointer;flex-shrink:0} .btn-chat-send:hover{background:var(--rd)} .chat-wpp-hint{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;padding:12px;font-size:12px;color:#166534;display:flex;align-items:center;gap:8px;margin-top:8px} .chat-wpp-hint strong{display:block;margin-bottom:2px} /* AUTH */ .nav-perfil{display:flex;align-items:center;gap:8px;cursor:pointer} .nav-avatar{width:32px;height:32px;border-radius:50%;background:var(--r);color:var(--br);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;overflow:hidden} .nav-avatar img{width:100%;height:100%;object-fit:cover} .nav-usuario-nome{font-size:13px;font-weight:600;color:var(--texto);max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .btn-login-nav{background:none;border:1.5px solid var(--borda);color:var(--texto);font-weight:600;font-size:13px;padding:8px 14px;border-radius:8px;cursor:pointer} /* TABS AUTH */ .auth-tabs{display:flex;gap:0;margin-bottom:24px;background:var(--cinza);border-radius:10px;padding:4px} .auth-tab{flex:1;padding:10px;border-radius:8px;border:none;background:transparent;font-size:14px;font-weight:600;color:var(--sub);cursor:pointer;transition:all .15s} .auth-tab.ativo{background:var(--br);color:var(--texto);box-shadow:0 1px 4px rgba(0,0,0,.1)} /* PERFIL */ .perfil-header{background:linear-gradient(135deg,var(--r),var(--rd));padding:28px 20px;text-align:center;border-radius:0} .perfil-avatar-grande{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.2);border:3px solid rgba(255,255,255,.5);color:var(--br);font-size:28px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;overflow:hidden} .perfil-avatar-grande img{width:100%;height:100%;object-fit:cover} .perfil-nome{font-family:'Archivo',sans-serif;font-size:20px;font-weight:900;color:var(--br);margin-bottom:4px} .perfil-cidade{font-size:13px;color:rgba(255,255,255,.7);margin-bottom:4px} .perfil-tel{font-size:12px;color:rgba(255,255,255,.55)} .perfil-corpo{padding:20px} .perfil-secao-titulo{font-family:'Archivo',sans-serif;font-size:16px;font-weight:800;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center} .btn-sair{font-size:12px;font-weight:600;color:var(--rtxt);background:var(--rl);border:none;padding:6px 12px;border-radius:6px;cursor:pointer} .perfil-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px} .perfil-stat{background:var(--cinza);border-radius:10px;padding:14px;text-align:center} .perfil-stat strong{display:block;font-family:'Montserrat',sans-serif;font-size:22px;font-weight:800;color:var(--rtxt)} .perfil-stat span{font-size:11px;color:var(--sub);text-transform:uppercase;letter-spacing:.5px} .perfil-anuncio-mini{display:flex;gap:10px;align-items:center;padding:12px;background:var(--cinza);border-radius:10px;margin-bottom:8px;cursor:pointer} .perfil-anuncio-img{width:52px;height:44px;border-radius:7px;background:var(--rl);display:flex;align-items:center;justify-content:center;font-size:20px;overflow:hidden;position:relative;flex-shrink:0} .perfil-anuncio-img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0} .perfil-anuncio-info{flex:1} .perfil-anuncio-nome{font-size:13px;font-weight:700;margin-bottom:2px} .perfil-anuncio-preco{font-family:'Montserrat',sans-serif;font-size:13px;font-weight:800;color:var(--rtxt)} .perfil-anuncio-status{font-size:10px;color:var(--sub)} /* ── MOBILE RESPONSIVO ── */ @media (max-width: 480px) { /* FONTES MAIORES */ body { font-size: 16px; } .hero h1 { font-size: 28px; } .hero p { font-size: 15px; } .sec-titulo { font-size: 22px; } .card-preco { font-size: 20px; } .card-detalhe { font-size: 13px; } .card-cidade { font-size: 12px; } .btn-zap { font-size: 13px; padding: 8px 12px; } /* CARDS — grade organizada de 2 colunas, todos do mesmo tamanho */ .cards-grid { grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; } .card { display: flex; flex-direction: column; } .card-img { aspect-ratio: 4/3; font-size: 44px; } .card-body { flex: 1; display: flex; flex-direction: column; padding: 10px 11px 11px; } .card-nome { font-size: 13.5px; margin-bottom: 5px; line-height: 1.3; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; } .card-specs { gap: 5px; flex-wrap: nowrap; overflow: hidden; margin-bottom: 8px; } .card-spec { font-size: 11px; padding: 3px 7px; white-space: nowrap; } .card-preco { font-size: 17px; margin: 0 0 8px; } .card-rodape { margin-top: auto; flex-direction: column; align-items: stretch; gap: 7px; } .card-cidade { font-size: 11px; } .btn-zap { font-size: 12px; padding: 9px 10px; width: 100%; text-align: center; } /* o card destaque vira um card normal no mobile (mesmo tamanho dos outros) */ .card-dest { grid-column: auto; flex-direction: column; } .card-dest .card-img { width: 100%; min-width: 0; aspect-ratio: 4/3; min-height: 0; border-radius: 0; font-size: 44px; } .card-dest .card-body { justify-content: flex-start; padding: 10px 11px 11px; } .card-dest .card-nome { font-size: 13.5px; line-height: 1.3; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; } .card-dest .card-preco { font-size: 17px; } .card-dest .card-body > div:last-child { margin-top: auto; } .card-dest .card-specs .card-spec:nth-child(n+3) { display: none; } /* só ano + km, igual aos outros */ /* FORMULÁRIO MAIOR */ .campo label { font-size: 13px; margin-bottom: 8px; } .campo input, .campo select, .campo textarea { font-size: 16px; padding: 15px 14px; border-radius: 12px; } .campo textarea { height: 100px; } .campo-2col { grid-template-columns: 1fr; gap: 0; } .btn-publicar { font-size: 17px; padding: 18px; border-radius: 14px; } .modal-titulo { font-size: 24px; } .upload-area { padding: 28px 16px; } .upload-icon { font-size: 44px; } .upload-texto { font-size: 15px; } /* BUSCA MAIOR */ .busca-campos select, .busca-campos input { font-size: 16px; padding: 15px 14px; } .btn-buscar { font-size: 17px; padding: 16px; } .btn-anunciar-hero { font-size: 16px; padding: 15px; } .tipo-tab { font-size: 14px; padding: 13px 6px; } /* NAV */ .logo { font-size: 20px; } .btn-anunciar { font-size: 13px; padding: 9px 12px; } .btn-login-nav { font-size: 13px; padding: 8px 10px; } .nav-usuario-nome { max-width: 60px; } /* DETALHE DO ANÚNCIO */ .det-titulo { font-size: 22px; } .det-preco { font-size: 28px; } .det-specs { grid-template-columns: 1fr 1fr; gap: 8px; } .spec-valor { font-size: 15px; } .btn-zap-g { font-size: 17px; padding: 18px; } /* CHAT */ .chat-input { font-size: 16px; } .chat-nome-input { font-size: 16px; } .chat-msg { font-size: 14px; } /* CIDADES */ .cidade-chip .cn { font-size: 14px; } .cidade-chip .cq { font-size: 12px; } /* MEUS ANÚNCIOS */ .meu-nome { font-size: 15px; } .meu-preco { font-size: 17px; } .btn-acao { font-size: 12px; padding: 8px 12px; } /* PERFIL */ .perfil-nome { font-size: 22px; } .perfil-stat strong { font-size: 24px; } /* ORDENAÇÃO */ .ord-btn { font-size: 13px; padding: 9px 16px; } } /* BUSCA CIDADE */ .cidade-wrap { position: relative; } .cidade-search-wrap { position: relative; } .cidade-search-icon { display: none; } .cidade-search { width: 100%; padding: 15px 14px; border: 2px solid var(--borda); border-radius: 12px; font-size: 15px; font-family: 'Inter', sans-serif; background: var(--br); color: var(--texto); box-shadow: 0 2px 8px rgba(0,0,0,.06); transition: all .2s; text-indent: 0; } .cidade-search:focus { outline: none; border-color: var(--r); box-shadow: 0 0 0 4px rgba(200,16,46,.1); } .cidade-dropdown { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--br); border: 2px solid var(--r); border-radius: 14px; margin-top: 6px; max-height: 320px; overflow-y: auto; z-index: 99; box-shadow: 0 12px 32px rgba(0,0,0,.15); } .cidade-dropdown.aberta { display: block; } .cidade-regiao-header { padding: 10px 14px 6px; font-size: 10px; font-weight: 800; color: var(--rtxt); text-transform: uppercase; letter-spacing: 1px; background: var(--rl); border-bottom: 1px solid var(--borda); position: sticky; top: 0; } .cidade-option { padding: 12px 16px; font-size: 14px; font-weight: 500; cursor: pointer; border-bottom: 1px solid var(--borda); transition: background .1s; display: flex; justify-content: space-between; align-items: center; } .cidade-option:last-child { border-bottom: none; } .cidade-option:hover { background: var(--rl); color: var(--rtxt); } .cidade-option-nome { flex: 1; } .cidade-option-cnt { font-size: 11px; font-weight: 700; color: var(--sub); background: var(--cinza); padding: 2px 8px; border-radius: 20px; } .cidade-option:hover .cidade-option-cnt { background: var(--br); } @media (max-width: 480px) { .cidade-search { font-size: 16px; padding: 17px 14px; } .cidade-option { font-size: 15px; padding: 14px 16px; } } /* PÁGINA CADASTRO */ .pg-cadastro { display:none; position:fixed; inset:0; background:var(--fundo); z-index:300; overflow-y:auto; } .pg-cadastro.aberta { display:block; } .cad-nav { background:var(--br); border-bottom:3px solid var(--r); padding:0 20px; height:58px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:10; box-shadow:0 2px 12px rgba(0,0,0,.07); } .cad-nav-logo { font-family:'Syne',sans-serif; font-size:20px; font-weight:900; color:var(--texto); letter-spacing:-1px; cursor:pointer; } .cad-nav-logo span { background:var(--r);color:#fff;border-radius:.2em;padding:.04em .3em .12em;margin-left:.07em;display:inline-block;line-height:1;letter-spacing:0; } .btn-voltar { background:none; border:none; font-size:13px; font-weight:600; color:var(--sub); cursor:pointer; display:flex; align-items:center; gap:6px; } .cad-hero { background:var(--r); padding:36px 20px 48px; text-align:center; position:relative; overflow:hidden; } .cad-hero::before { content:'MG'; position:absolute; right:-15px; top:-10px; font-family:'Syne',sans-serif; font-size:160px; font-weight:900; color:rgba(255,255,255,.04); pointer-events:none; } .cad-hero h1 { font-family:'Archivo',sans-serif; font-size:28px; font-weight:900; color:var(--br); margin-bottom:8px; letter-spacing:-1px; } .cad-hero p { color:rgba(255,255,255,.7); font-size:14px; } .cad-beneficios { display:flex; justify-content:center; gap:20px; margin-top:20px; flex-wrap:wrap; } .cad-ben { display:flex; align-items:center; gap:6px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); border-radius:20px; padding:6px 14px; } .cad-ben span { font-size:13px; color:rgba(255,255,255,.9); font-weight:600; } .cad-form-wrap { max-width:480px; margin:0 auto; padding:28px 20px 52px; } .cad-card { background:var(--br); border-radius:20px; padding:28px 20px; box-shadow:0 4px 20px rgba(0,0,0,.08); border:1px solid var(--borda); } .cad-titulo { font-family:'Archivo',sans-serif; font-size:20px; font-weight:900; margin-bottom:6px; letter-spacing:-.5px; } .cad-subtitulo { font-size:13px; color:var(--sub); margin-bottom:24px; } .cad-divider { display:flex; align-items:center; gap:12px; margin:20px 0; } .cad-divider::before, .cad-divider::after { content:''; flex:1; height:1px; background:var(--borda); } .cad-divider span { font-size:12px; color:var(--sub); font-weight:600; } .cad-login-link { text-align:center; font-size:14px; color:var(--sub); margin-top:16px; } .cad-login-link a { color:var(--rtxt); font-weight:700; cursor:pointer; } .cad-termos { font-size:11px; color:var(--sub); text-align:center; margin-top:12px; line-height:1.5; } .cad-termos a { color:var(--rtxt); cursor:pointer; } .cad-steps { display:flex; gap:0; margin-bottom:24px; } .cad-step { flex:1; text-align:center; position:relative; } .cad-step:not(:last-child)::after { content:''; position:absolute; top:16px; right:0; width:100%; height:2px; background:var(--borda); z-index:0; } .cad-step-num { width:32px; height:32px; border-radius:50%; background:var(--borda); color:var(--sub); font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; margin:0 auto 6px; position:relative; z-index:1; transition:all .3s; } .cad-step.ativo .cad-step-num { background:var(--r); color:var(--br); } .cad-step.completo .cad-step-num { background:#16A34A; color:var(--br); } .cad-step-label { font-size:10px; color:var(--sub); font-weight:600; } .cad-step.ativo .cad-step-label { color:var(--rtxt); font-weight:700; } /* ── MELHORIAS VISUAIS ── */ .card { box-shadow: 0 2px 8px rgba(0,0,0,.06); } .card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.12); } .card-img { border-bottom: 1px solid var(--borda); } .card-preco { letter-spacing: -.5px; } .secao { padding: 32px 16px; } .hero h1 { font-size: 36px; } /* FAVORITOS */ .btn-fav { position: absolute; top: 8px; right: 8px; background: rgba(255,255,255,.92); border: none; border-radius: 50%; width: 34px; height: 34px; font-size: 18px; line-height: 1; color: #999; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 3; box-shadow: 0 2px 8px rgba(0,0,0,.15); transition: transform .2s, color .2s; } .btn-fav:hover { transform: scale(1.15); } .btn-fav.favoritado { background: var(--rl); color: var(--rtxt); } /* PERFIL MELHORADO */ .perfil-tabs { display: flex; gap: 0; background: var(--cinza); border-radius: 10px; padding: 4px; margin-bottom: 20px; } .perfil-tab { flex: 1; padding: 9px; border-radius: 8px; border: none; background: transparent; font-size: 13px; font-weight: 600; color: var(--sub); cursor: pointer; transition: all .15s; } .perfil-tab.ativo { background: var(--br); color: var(--texto); box-shadow: 0 1px 4px rgba(0,0,0,.1); } .perfil-edit-form { display: none; } .perfil-edit-form.aberto { display: block; } .btn-editar-perfil { background: var(--cinza); border: none; color: var(--texto); font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 8px; cursor: pointer; width: 100%; margin-bottom: 16px; } .btn-editar-perfil:hover { background: var(--borda); } /* DETALHE MELHORADO */ .det-galeria-wrap { position: relative; } .det-fotos-nav { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 5; } .det-foto-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.5); cursor: pointer; transition: all .2s; } .det-foto-dot.ativo { background: var(--br); width: 20px; border-radius: 4px; } .det-share { display: flex; gap: 8px; margin-bottom: 16px; } .btn-share { flex: 1; padding: 11px; border-radius: 10px; border: 1.5px solid var(--borda); background: var(--br); font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--texto); transition: all .15s; } .btn-share:hover { border-color: var(--r); color: var(--rtxt); background: var(--rl); } .det-vendedor { background: var(--cinza); border-radius: 12px; padding: 14px; margin-bottom: 16px; display: flex; align-items: center; gap: 12px; } .det-vend-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--r); color: var(--br); font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .det-vend-info strong { display: block; font-size: 14px; font-weight: 700; } .det-vend-info span { font-size: 12px; color: var(--sub); } /* Card do vendedor clicável + perfil público */ .det-vendedor-click{cursor:pointer;transition:background .15s,border-color .15s;border:1px solid transparent} .det-vendedor-click:hover{background:var(--rl);border-color:var(--r)} .det-vendedor .det-vend-info{flex:1;min-width:0} .vend-avatar{width:44px;height:44px;border-radius:50%;background:var(--r);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Montserrat',sans-serif;font-weight:800;font-size:18px;flex-shrink:0} .vend-avatar-loja{border-radius:11px;background:#1f2533} .vend-selo{font-size:10px;font-weight:700;background:#E7F6EC;color:#15803D;padding:2px 7px;border-radius:9px;margin-left:4px;white-space:nowrap} .vend-seta{color:var(--sub);font-size:22px;flex-shrink:0} /* Modal do perfil público */ .pp-topo{background:linear-gradient(160deg,var(--r),var(--rd));padding:26px 20px 20px;text-align:center;color:#fff;position:relative;border-radius:24px 24px 0 0} .pp-fechar{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.2);border:none;color:#fff;font-size:16px;cursor:pointer} .pp-avatar{width:70px;height:70px;border-radius:50%;background:#fff;color:var(--rtxt);font-family:'Montserrat',sans-serif;font-weight:800;font-size:28px;display:flex;align-items:center;justify-content:center;margin:0 auto 10px} .pp-nome{font-family:'Archivo',sans-serif;font-weight:800;font-size:19px} .pp-cidade{font-size:13px;opacity:.9;margin-top:3px} .pp-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--borda)} .pp-stat{background:var(--br);padding:14px;text-align:center} .pp-stat strong{display:block;font-family:'Montserrat',sans-serif;font-weight:800;font-size:22px;color:var(--rtxt)} .pp-stat span{font-size:10px;color:var(--sub);text-transform:uppercase;letter-spacing:.5px} .pp-corpo{padding:18px 16px 30px} .pp-titulo{font-family:'Archivo',sans-serif;font-weight:800;font-size:16px;margin-bottom:12px} /* SECAO FAVORITOS */ .favs-vazio { text-align: center; padding: 32px 20px; color: var(--sub); } .favs-vazio-icon { font-size: 48px; margin-bottom: 12px; } /* DENÚNCIA */ .btn-denunciar { background: none; border: none; font-size: 11px; color: var(--sub); cursor: pointer; padding: 4px 0; text-decoration: underline; text-underline-offset: 2px; } .btn-denunciar:hover { color: var(--rtxt); } /* DESTAQUE / PLANOS */ .planos-grid { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; } .plano-card { border: 2px solid var(--borda); border-radius: 14px; padding: 16px; cursor: pointer; transition: all .2s; position: relative; } .plano-card:hover { border-color: var(--r); background: var(--rl); } .plano-card.selecionado { border-color: var(--r); background: var(--rl); } .plano-card.popular::before { content: '🔥 Mais popular'; position: absolute; top: -10px; left: 16px; background: var(--r); color: var(--br); font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 20px; } .plano-nome { font-family: 'Archivo', sans-serif; font-size: 16px; font-weight: 800; margin-bottom: 4px; } .plano-preco { font-size: 24px; font-weight: 800; color: var(--rtxt); font-family: 'Montserrat', sans-serif; } .plano-preco small { font-size: 13px; color: var(--sub); font-family: 'Inter', sans-serif; font-weight: 400; } .plano-beneficios { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; } .plano-ben { font-size: 12px; color: var(--sub); display: flex; align-items: center; gap: 6px; } .plano-ben::before { content: '✓'; color: #16A34A; font-weight: 700; } /* REVENDAS */ .revenda-planos { display: flex; flex-direction: column; gap: 10px; } .revenda-plano { background: var(--cinza); border-radius: 12px; padding: 16px; border: 2px solid transparent; cursor: pointer; transition: all .2s; } .revenda-plano:hover { border-color: var(--r); background: var(--rl); } .revenda-plano.selecionado { border-color: var(--r); background: var(--rl); box-shadow: 0 4px 14px rgba(200,16,46,.18); } /* Plano TOPO — Diamante (visual premium escuro) */ .rp-diamante { background: linear-gradient(135deg,#1f2533,#10131b); border-color: #10131b; } .rp-diamante:hover, .rp-diamante.selecionado { background: linear-gradient(135deg,#232b3c,#10131b); border-color: #7dd3fc; box-shadow: 0 8px 22px rgba(0,0,0,.30); } .rp-diamante .rp-nome { color: #fff; } .rp-diamante .rp-preco { color: #fff; } .rp-diamante .rp-desc { color: #c9cdd6; } .rp-tag-premium { display:inline-block; font-size:10px; font-weight:800; letter-spacing:.6px; color:#0b1220; background:linear-gradient(135deg,#a5f3fc,#7dd3fc); padding:3px 9px; border-radius:10px; margin-bottom:8px; } /* ── PAINEL DA LOJA (CRM) ── */ .btn-painel-loja{background:var(--r);color:#fff;border:none;border-radius:9px;font-size:13px;font-weight:700;padding:8px 14px;cursor:pointer;font-family:inherit;align-items:center;gap:5px;margin-right:8px} .btn-painel-loja:hover{background:var(--rd)} .modal-largo{max-width:720px} .painel-header{display:flex;align-items:center;gap:12px;background:var(--cinza);border-radius:14px;padding:14px 16px;margin-bottom:14px} .painel-logo{width:46px;height:46px;border-radius:11px;background:var(--r);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;font-family:'Montserrat',sans-serif;flex-shrink:0} .painel-nome{font-weight:700;font-size:16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .painel-selo{font-size:10px;font-weight:700;color:#15803D;background:#E7F6EC;padding:2px 8px;border-radius:10px} .painel-plano{font-size:12px;color:var(--sub);margin-top:2px} .painel-kpis{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:18px} .painel-kpi{background:var(--cinza);border-radius:11px;padding:12px 14px} .pk-label{font-size:11px;color:var(--sub)} .pk-num{font-family:'Montserrat',sans-serif;font-weight:800;font-size:24px;margin-top:2px;line-height:1} .pk-vermelho{color:var(--rtxt)} .crm-titulo{font-weight:700;font-size:15px;margin-bottom:10px} .crm-funil{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px} .crm-chip{font-size:12px;font-weight:600;padding:6px 12px;border-radius:20px} .st-novo{background:#E6F1FB;color:#0C447C} .st-atend{background:#FAEEDA;color:#854F0B} .st-nego{background:#FBEAF0;color:#993556} .st-vend{background:#E7F6EC;color:#15803D} .st-perd{background:#F1EFE8;color:#5f5e5a} .crm-vazio{background:var(--cinza);border-radius:12px;padding:20px;text-align:center;font-size:13px;color:var(--sub)} .lead-lista{display:flex;flex-direction:column;gap:9px} .lead-card{display:flex;align-items:center;gap:11px;border:1px solid var(--borda);border-radius:12px;padding:10px 12px} .lead-avatar{width:36px;height:36px;border-radius:50%;background:#E6F1FB;color:#0C447C;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0} .lead-info{flex:1;min-width:0} .lead-nome{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lead-veic{font-size:12px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lead-status-sel{font-size:12px;font-weight:600;border:1px solid var(--borda);border-radius:8px;padding:6px 8px;background:var(--br);color:var(--texto);cursor:pointer;font-family:inherit} .lead-zap{text-decoration:none;font-size:18px;flex-shrink:0} .lead-chat{background:none;border:none;cursor:pointer;padding:0;line-height:1} /* de onde veio o interesse */ .lead-via{font-size:10px;font-weight:700;padding:2px 6px;border-radius:5px;vertical-align:1px;white-space:nowrap} .lead-via-chat{background:var(--rl);color:var(--rtxt)} .lead-via-wpp{background:#E7F6EC;color:#15803D} @media(prefers-color-scheme:dark){:root:not([data-tema="claro"]) .lead-via-wpp{background:#14351f;color:#7CE0A3}} :root[data-tema="escuro"] .lead-via-wpp{background:#14351f;color:#7CE0A3} @media(max-width:560px){ .painel-kpis{gap:6px} .painel-kpi{padding:10px 8px} .pk-num{font-size:19px} .lead-veic{white-space:normal} } .revenda-plano .rp-nome { font-weight: 700; font-size: 15px; margin-bottom: 4px; } .revenda-plano .rp-preco { font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: 800; color: var(--rtxt); } .revenda-plano .rp-desc { font-size: 12px; color: var(--sub); margin-top: 6px; line-height: 1.5; } /* ANÚNCIO EXPIRADO */ .pg-expirado { display: none; position: fixed; inset: 0; background:var(--fundo); z-index: 300; overflow-y: auto; align-items: center; justify-content: center; } .pg-expirado.aberta { display: flex; } .expirado-card { background: var(--br); border-radius: 20px; padding: 40px 24px; text-align: center; max-width: 360px; margin: 20px; box-shadow: 0 8px 32px rgba(0,0,0,.1); } .expirado-icon { font-size: 64px; margin-bottom: 16px; } .expirado-titulo { font-family: 'Archivo', sans-serif; font-size: 22px; font-weight: 900; margin-bottom: 8px; } .expirado-sub { font-size: 14px; color: var(--sub); margin-bottom: 24px; line-height: 1.6; } /* WHATSAPP FLUTUANTE */ .wpp-float { position: fixed; bottom: 24px; right: 20px; background: #25D366; color: var(--br); width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; cursor: pointer; box-shadow: 0 4px 16px rgba(37,211,102,.4); z-index: 90; transition: transform .2s; text-decoration: none; } .wpp-float:hover { transform: scale(1.1); } .wpp-float-tooltip { position: absolute; right: 64px; background: var(--texto); color: var(--br); font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 8px; white-space: nowrap; opacity: 0; transition: opacity .2s; pointer-events: none; } .wpp-float:hover .wpp-float-tooltip { opacity: 1; } /* BADGE DESTAQUE */ .badge-destaque-gold { background: linear-gradient(135deg, #F59E0B, #D97706); color: var(--br); } /* CARDS DEMO */ .card-demo-badge { position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,.6); color: var(--br); font-size: 9px; font-weight: 700; padding: 3px 8px; border-radius: 5px; text-transform: uppercase; letter-spacing: .5px; z-index: 2; } .demo-section { background: linear-gradient(180deg, #fff 0%, #f9f0f2 100%); padding: 32px 16px; } .demo-titulo-wrap { text-align: center; margin-bottom: 24px; } .demo-titulo { font-family: 'Archivo', sans-serif; font-size: 22px; font-weight: 900; letter-spacing: -.5px; } .demo-sub { font-size: 14px; color: var(--sub); margin-top: 6px; } .demo-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 560px; margin: 0 auto; } .demo-card { background: var(--br); border-radius: 14px; overflow: hidden; border: 1px solid var(--borda); box-shadow: 0 2px 8px rgba(0,0,0,.06); } .demo-card-img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; } .demo-card-body { padding: 10px 12px 12px; } .demo-card-nome { font-weight: 700; font-size: 13px; margin-bottom: 3px; } .demo-card-info { font-size: 11px; color: var(--sub); margin-bottom: 8px; } .demo-card-preco { font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 800; color: var(--rtxt); margin-bottom: 8px; } .demo-cta { text-align: center; margin-top: 24px; } .demo-cta p { font-size: 14px; color: var(--sub); margin-bottom: 14px; } @media (max-width: 480px) { .demo-cards { grid-template-columns: 1fr 1fr; gap: 10px; } .demo-card-nome { font-size: 12px; } .demo-card-preco { font-size: 15px; } } /* TROCA */ .badge-troca { background: #1D4ED8; color: var(--br); font-size: 9px; font-weight: 700; padding: 3px 8px; border-radius: 5px; text-transform: uppercase; letter-spacing: .5px; } .badge-financia { background: #16A34A; color: var(--br); font-size: 9px; font-weight: 700; padding: 3px 8px; border-radius: 5px; text-transform: uppercase; letter-spacing: .5px; } /* checkbox "Faço financiamento" em verde */ .fin-check input { accent-color: #16A34A; } .fin-check:hover { border-color: #16A34A; background: #E7F6EC; } .badge-fipe { background: #16A34A; color: #fff; } .det-fipe { font-size: 13px; color: #16A34A; font-weight: 800; margin: -12px 0 18px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .det-fipe span { color: var(--sub); font-weight: 600; } .det-fipe-neutro { font-size: 12px; color: var(--sub); margin: -12px 0 18px; } .troca-check-wrap { display: flex; align-items: center; gap: 10px; background: var(--cinza); border-radius: 10px; padding: 14px; cursor: pointer; border: 2px solid transparent; transition: all .15s; margin-bottom: 16px; } .troca-check-wrap:hover { border-color: #1D4ED8; background: #EFF6FF; } .troca-check-wrap input { width: 18px; height: 18px; accent-color: #1D4ED8; cursor: pointer; flex-shrink: 0; } /* Tela do Termo de Responsabilidade no cadastro */ .termo-box{max-height:min(46vh,340px);overflow-y:auto;background:var(--cinza);border:1px solid var(--borda);border-radius:12px;padding:16px;font-size:13.5px;line-height:1.6;color:var(--texto)} .termo-box h4{font-family:'Archivo',sans-serif;font-size:13px;font-weight:800;color:var(--rtxt);margin:14px 0 6px;text-transform:uppercase;letter-spacing:.3px} .termo-box ul{margin:0 0 0 18px} .termo-box li{margin-bottom:5px} .termo-box a{color:var(--rtxt);font-weight:700} .termo-forte{background:var(--rl);border-left:4px solid var(--r);border-radius:0 8px 8px 0;padding:12px 14px;margin:0;font-weight:600;color:var(--rtxt)} .termo-dica{background:#FFF8E6;border:1px solid #F0C36D;border-radius:8px;padding:11px 13px;margin-top:14px;font-size:13px;color:#6B4E00} .btn-termo-recusar{width:100%;margin-top:8px;padding:12px;background:transparent;color:var(--sub);border:none;font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit} .btn-termo-recusar:hover{color:var(--rtxt);text-decoration:underline} /* Aceite obrigatório do Termo de Responsabilidade */ .aceite-check .troca-check-sub{line-height:1.5;display:block} .aceite-check .troca-check-sub a{color:var(--rtxt);font-weight:700;text-decoration:underline} .aceite-check input{accent-color:var(--r)} .aceite-check:hover{border-color:var(--r);background:var(--rl)} .aceite-check.erro{border-color:var(--r);background:var(--rl);animation:tremer .3s} @keyframes tremer{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}} /* Chave de tema (claro | escuro) */ .tema-switch{display:flex;background:var(--cinza);border-radius:20px;padding:3px;margin-right:8px;flex-shrink:0} .tema-opt{width:32px;height:27px;border:none;background:transparent;border-radius:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--sub);padding:0;transition:all .15s} .tema-opt:hover{color:var(--rtxt)} .tema-opt.ativo{background:var(--br);color:var(--r);box-shadow:0 1px 3px rgba(0,0,0,.15)} /* no escuro, a opção ativa fica vermelha com ícone branco */ @media (prefers-color-scheme: dark){ :root:not([data-tema="claro"]) .tema-opt.ativo{background:var(--r);color:#fff;box-shadow:none} } :root[data-tema="escuro"] .tema-opt.ativo{background:var(--r);color:#fff;box-shadow:none} /* Minhas conversas (chat privado 1 a 1) */ .btn-conversas{position:relative;background:var(--cinza);border:1px solid var(--borda);border-radius:9px;height:36px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;color:var(--texto);margin-right:8px;padding:0 12px;font-size:14px;font-weight:700;font-family:inherit;flex-shrink:0} .btn-conversas svg{flex:none} .btn-conversas:hover{border-color:var(--r);color:var(--rtxt)} /* pílula com o número de conversas não lidas — fica em linha, nunca é cortada */ .badge-conversas{background:var(--r);color:#fff;font-size:11px;font-weight:800;min-width:19px;height:19px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;flex:none} .menu-mobile .badge-conversas{margin-left:6px} .btn-conversas.tem-novas{border-color:var(--r);background:var(--rl);color:var(--rtxt)} .conv-lista{display:flex;flex-direction:column;gap:8px} .conv-item{display:flex;align-items:center;gap:11px;border:1px solid var(--borda);border-radius:12px;padding:10px 12px;cursor:pointer;transition:all .15s} .conv-item:hover{border-color:var(--r);background:var(--rl)} .conv-nova{border-color:var(--r);background:var(--rl)} .conv-nova .conv-nome{font-weight:800} .conv-nova .conv-previa{color:var(--texto);font-weight:600} .conv-foto{width:52px;height:52px;border-radius:10px;overflow:hidden;background:var(--cinza);display:flex;align-items:center;justify-content:center;flex-shrink:0} .conv-foto img{width:100%;height:100%;object-fit:cover} .conv-sem-foto{font-size:22px} .conv-info{flex:1;min-width:0} .conv-linha1{display:flex;justify-content:space-between;align-items:baseline;gap:8px} .conv-nome{font-size:14px;font-weight:700;color:var(--texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .conv-tempo{font-size:11px;color:var(--sub);flex-shrink:0} .conv-veic{font-size:11.5px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:1px 0} .conv-previa{font-size:12.5px;color:var(--texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.8} .conv-badge{background:var(--r);color:#fff;font-size:11px;font-weight:800;min-width:20px;height:20px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .conv-vazio{text-align:center;padding:30px 16px;color:var(--sub)} .conv-vazio-sub{font-size:13px;margin-top:6px} .conv-voltar{background:none;border:none;color:var(--rtxt);font-size:13px;font-weight:700;cursor:pointer;padding:0 0 10px;font-family:inherit} .conv-cabec{display:flex;align-items:center;gap:11px;background:var(--cinza);border-radius:12px;padding:10px 12px;margin-bottom:12px;cursor:pointer} .conv-cabec:hover{background:var(--rl)} .conv-veic-tit{font-size:14px;font-weight:700} .conv-preco{font-family:'Montserrat',sans-serif;font-weight:800;font-size:15px;color:var(--rtxt)} .chat-priv{font-size:11px;font-weight:700;background:var(--cinza);color:var(--sub);padding:2px 8px;border-radius:10px;margin-left:6px} .chat-entrar{text-align:center;padding:16px 10px;color:var(--sub)} .chat-entrar p{font-size:13.5px;margin-bottom:12px;line-height:1.5} /* Editar dados da loja (Painel de Gestão) */ .painel-link-loja{font-size:12px;color:var(--rtxt);font-weight:600;text-decoration:none;display:inline-block;margin-top:4px} .painel-link-loja:hover{text-decoration:underline} .loja-edit-topo{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} .adm-link-loja{background:none;border:none;color:var(--rtxt);font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;text-decoration:underline} .loja-form{background:var(--cinza);border:1px solid var(--borda);border-radius:12px;padding:14px;margin-bottom:18px} .loja-form .campo{margin-bottom:12px} .lj-slug-wrap{display:flex;align-items:center;background:var(--br);border:1.5px solid var(--borda);border-radius:10px;padding:0 0 0 10px;overflow:hidden} .lj-slug-wrap span{font-size:12px;color:var(--sub);white-space:nowrap} .lj-slug-wrap input{border:none!important;background:transparent!important;padding:12px 8px!important;flex:1;min-width:0} .lj-dica{font-size:11px;color:var(--sub);margin-top:5px} .lj-logo-linha{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .lj-logo-prev{width:64px;height:64px;border-radius:14px;background:var(--r);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Montserrat',sans-serif;font-weight:800;font-size:26px;overflow:hidden;flex-shrink:0} .lj-logo-prev img{width:100%;height:100%;object-fit:cover} /* Caixas de fundo claro fixo — precisam de versão escura, senão o texto some no modo escuro */ .fipe-box{background:#eff6ff;border:1px solid #cfe2ff;border-radius:12px;padding:14px;margin-bottom:16px} @media (prefers-color-scheme: dark){ :root:not([data-tema="claro"]) .fipe-box{background:#16253c;border-color:#27405f} :root:not([data-tema="claro"]) .fin-check:hover{background:#16301f;border-color:#16A34A} :root:not([data-tema="claro"]) .troca-check-wrap:hover, :root:not([data-tema="claro"]) .filtro-troca-wrap:hover{background:#16253c;border-color:#4d84d8} } :root[data-tema="escuro"] .fipe-box{background:#16253c;border-color:#27405f} :root[data-tema="escuro"] .fin-check:hover{background:#16301f;border-color:#16A34A} :root[data-tema="escuro"] .troca-check-wrap:hover, :root[data-tema="escuro"] .filtro-troca-wrap:hover{background:#16253c;border-color:#4d84d8} /* no celular a chave sai da barra e vai pro menu das 3 barrinhas */ .menu-tema{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;margin-top:4px;border-top:1px solid var(--borda)} .menu-tema-lbl{font-size:15px;font-weight:600;color:var(--texto)} .menu-tema .tema-switch{margin-right:0} @media(max-width:900px){ .nav-r > .tema-switch{display:none} /* o chat sai da barra e fica no menu das 3 barrinhas */ #nav-logado > .btn-conversas{display:none} /* pontinho no hambúrguer quando há mensagem nova */ .nav-burger{position:relative} .nav-burger.tem-novas::after{content:'';position:absolute;top:6px;right:6px;width:9px;height:9px;border-radius:50%;background:var(--r);border:2px solid var(--br)} } /* Entrar com o Google */ .btn-google{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--br);border:1.5px solid var(--borda);border-radius:12px;padding:14px;font-size:15px;font-weight:700;color:var(--texto);cursor:pointer;font-family:inherit;transition:all .15s} .btn-google:hover{background:var(--cinza);border-color:#c6c6c6;box-shadow:0 2px 8px rgba(0,0,0,.07)} .auth-ou{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--sub);font-size:12px} .auth-ou::before,.auth-ou::after{content:'';flex:1;height:1px;background:var(--borda)} /* IPVA pago: quadrado personalizado que fica VERMELHO com ✓ quando marcado */ .ipva-check input { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border: 2px solid var(--borda); border-radius: 7px; background:var(--br); cursor: pointer; transition: all .15s; } .ipva-check input:checked { background: var(--r) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 15px no-repeat; border-color: var(--r); } .ipva-check:hover { border-color: var(--r); background: var(--rl); } .ipva-check:has(input:checked) { border-color: var(--r); background: var(--rl); } .ipva-check:has(input:checked) .troca-check-label { color: var(--rtxt); } .troca-check-label { font-size: 14px; font-weight: 600; color: var(--texto); } .troca-check-sub { font-size: 11px; color: var(--sub); display: block; margin-top: 2px; } .filtro-troca-wrap { display: flex; align-items: center; gap: 8px; background: var(--cinza); border-radius: 10px; padding: 12px 14px; border: 2px solid transparent; cursor: pointer; transition: all .15s; } .filtro-troca-wrap:hover { border-color: #1D4ED8; background: #EFF6FF; } .filtro-troca-wrap.ativo { border-color: #1D4ED8; background: #EFF6FF; } .filtro-troca-wrap input { accent-color: #1D4ED8; width: 16px; height: 16px; cursor: pointer; } .filtro-troca-label { font-size: 13px; font-weight: 600; color: var(--texto); } .senha-wrap{position:relative} .senha-wrap input{width:100%;padding-right:88px} .senha-olho{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--rtxt);font-size:12px;font-weight:700;cursor:pointer;padding:8px;font-family:inherit} /* MENU CENTRAL (nav) */ .nav-menu{flex:1;display:flex;justify-content:center;gap:18px} .nav-menu a{font-size:14px;font-weight:600;color:var(--texto);cursor:pointer;text-decoration:none;white-space:nowrap;transition:color .15s} .nav-menu a:hover{color:var(--rtxt)} @media(max-width:900px){.nav-menu{display:none}} .nav-burger{display:none;background:none;border:none;cursor:pointer;padding:6px;color:var(--texto);align-items:center;justify-content:center} @media(max-width:900px){.nav-burger{display:flex}} .menu-mobile{display:none;position:fixed;top:58px;left:0;right:0;background:var(--br);border-bottom:3px solid var(--r);box-shadow:0 8px 24px rgba(0,0,0,.14);z-index:95;flex-direction:column;padding:8px} .menu-mobile.aberto{display:flex} .menu-mobile a{padding:14px 16px;font-size:15px;font-weight:600;color:var(--texto);cursor:pointer;border-radius:8px;text-decoration:none} .menu-mobile a:active,.menu-mobile a:hover{background:var(--cinza);color:var(--rtxt)} /* Chat em destaque no topo do menu, separado do resto */ .menu-mobile a.menu-chat{display:flex;align-items:center;gap:9px;color:var(--rtxt);font-weight:700} .menu-mobile a.menu-chat svg{flex:none} .menu-sep{height:1px;background:var(--borda);margin:4px 8px 8px} /* RESULTADO TABELA FIPE */ .fc-resultado{background:var(--cinza);border-radius:12px;padding:18px;text-align:center;margin-top:6px} .fc-res-label{font-size:11px;color:var(--sub);text-transform:uppercase;letter-spacing:.5px;font-weight:700} .fc-res-valor{font-family:'Montserrat',sans-serif;font-weight:800;font-size:34px;color:var(--rtxt);margin:4px 0;line-height:1} .fc-res-modelo{font-size:14px;font-weight:600;color:var(--texto)} .fc-res-ref{font-size:11px;color:var(--sub);margin-top:4px} /* BUSCA RÁPIDA (abas + autocompletar) */ .modo-tabs{display:flex;gap:6px;margin-bottom:12px} .modo-tab{flex:1;padding:10px;border:none;background:var(--cinza);border-radius:9px;font-size:13px;font-weight:700;color:var(--sub);cursor:pointer;transition:all .15s} .modo-tab.ativo{background:var(--r);color:#fff} .q-wrap{position:relative;margin-bottom:10px} #q-input{width:100%;padding:15px 16px;border:1.5px solid var(--r);border-radius:12px;font-size:15px;font-family:'Inter',sans-serif;background:var(--br);color:var(--texto)} #q-input:focus{outline:none;box-shadow:0 0 0 3px rgba(200,16,46,.12)} .q-sugestoes{display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--br);border:1px solid var(--borda);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.14);z-index:30;overflow:hidden;max-height:264px;overflow-y:auto;text-align:left} .q-sugestoes.aberta{display:block} .q-sug{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;cursor:pointer;font-size:14px} .q-sug:hover{background:var(--cinza)} .q-sug strong{font-weight:600;color:var(--texto)} .q-sug span{font-size:12px;color:var(--sub)} /* CARD BUSCA RÁPIDA (separado) */ .busca-rapida-card{margin-bottom:32px} .bq-card-head{display:flex;align-items:center;gap:7px;margin-bottom:10px} .bq-card-titulo{font-family:'Montserrat',sans-serif;font-weight:800;font-size:15px;color:var(--texto)} .bq-card-badge{background:var(--rl);color:var(--rd);font-size:9px;font-weight:700;padding:3px 8px;border-radius:10px;text-transform:uppercase;letter-spacing:.5px} .bq-badge{display:inline-block;background:var(--rl);color:var(--rd);font-size:11px;font-weight:700;padding:5px 12px;border-radius:20px;letter-spacing:.5px;text-transform:uppercase;margin-bottom:12px} .bq-titulo{font-family:'Montserrat',sans-serif;font-weight:800;font-size:24px;letter-spacing:-.5px;margin-bottom:4px} .bq-sub{font-size:13px;color:var(--sub);margin-bottom:16px} .bq-tipos{display:flex;gap:6px;margin-bottom:12px} .bq-tipo{padding:8px 18px;border:1.5px solid var(--borda);background:var(--br);border-radius:20px;font-size:13px;font-weight:600;color:var(--sub);cursor:pointer} .bq-tipo.ativo{border-color:var(--r);color:var(--rtxt)} .bq-pop-label{font-size:12px;color:var(--sub);margin:16px 0 8px} .bq-chips{display:flex;flex-wrap:wrap;gap:7px} .bq-chip{background:var(--cinza);border:none;font-size:13px;padding:7px 14px;border-radius:18px;color:var(--texto);cursor:pointer;transition:all .15s} .bq-chip:hover{background:var(--rl);color:var(--rtxt)} /* CARROSSEL como FUNDO do hero (no lugar do vermelho) */ .hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden} .hero-bg .carrossel-slides{display:flex;height:100%;transition:transform .55s ease} .hero-bg .carrossel-slides img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;display:block} .hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(150,12,34,.5) 55%,rgba(200,16,46,.96) 100%)} .hero>*:not(.hero-bg){position:relative;z-index:2} .carrossel-seta{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:none;background:rgba(0,0,0,.35);color:#fff;font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;transition:background .15s} .carrossel-seta:hover{background:rgba(0,0,0,.6)} .seta-esq{left:12px}.seta-dir{right:12px} .carrossel-dots{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;gap:7px;z-index:2} .cdot{width:8px;height:8px;border-radius:50%;border:none;background:rgba(255,255,255,.6);cursor:pointer;padding:0;transition:all .2s;box-shadow:0 1px 3px rgba(0,0,0,.35)} .cdot.ativo{background:#fff;width:20px;border-radius:4px} /* FAIXA MAPA DE MG */ .confianca{background:var(--r);background-image:radial-gradient(circle at 15% 20%,rgba(255,255,255,.08),transparent 45%);padding:40px 20px;color:#fff} .conf-mapa{display:flex;align-items:center;gap:20px;justify-content:center;max-width:680px;margin:0 auto;flex-wrap:wrap;text-align:left} .mapa-mg{width:120px;height:auto;filter:drop-shadow(0 4px 14px rgba(0,0,0,.22))} .conf-mapa-texto{max-width:340px} .conf-mapa-texto strong{display:block;font-family:'Montserrat',sans-serif;font-weight:800;font-size:22px;margin-bottom:6px;line-height:1.15} .conf-mapa-texto span{font-size:14px;color:rgba(255,255,255,.85);line-height:1.5} @media(min-width:769px){ .hero-carrossel{max-width:620px} .mapa-mg{width:150px} } /* ══════════════════════════════════════════════════════ DESKTOP / PC — layout mais amplo, cheio e bonito. Só atua em telas largas (min-width). O mobile (≤480px) continua exatamente como está. ══════════════════════════════════════════════════════ */ @media (min-width: 769px) { /* NAV mais espaçada */ nav { padding: 0 40px; height: 66px; } .logo { font-size: 26px; } .logo small { font-size: 10px; } .btn-anunciar, .btn-login-nav { font-size: 14px; padding: 10px 18px; } /* HERO maior e mais respirável */ .hero { padding: 76px 24px 54px; } .hero::before { font-size: 300px; right: 20px; top: -10px; } .hero-badge { font-size: 12px; margin-bottom: 28px; } .hero h1 { font-size: 58px; margin-bottom: 18px; } .hero p { font-size: 18px; margin-bottom: 42px; } .busca-card { max-width: 620px; padding: 12px; border-radius: 22px; } .busca-grid { gap: 10px; } /* Barra de atalhos maior no PC */ .stats { width: 100%; padding: 16px; gap: 16px; } .sm-btn { padding: 20px 4px; font-size: 15px; } /* SEÇÕES bem mais largas */ .secao { max-width: 1240px; padding: 56px 40px; } .sec-titulo { font-size: 28px; } .sec-link { font-size: 15px; } .ordenacao { gap: 8px; flex-wrap: wrap; overflow: visible; } .ord-btn { font-size: 13px; padding: 9px 18px; } /* GRID de cards: 3 colunas no desktop */ .cards-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } .loading, .vazio { grid-column: 1 / -1; } /* Card destaque = card normal, do mesmo tamanho dos outros (só com a tag) */ .card-dest { grid-column: auto; flex-direction: column; } .card-dest .card-img { width: 100%; min-width: 0; aspect-ratio: 4/3; min-height: 0; border-radius: 0; font-size: 52px; } .card-dest .card-body { padding: 14px 16px 16px; justify-content: flex-start; } .card-dest .card-nome { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card-dest .card-preco { font-size: 22px; } .card-dest .card-body > div:last-child { margin-top: auto; } .card-dest .card-specs .card-spec:nth-child(n+3) { display: none; } /* Cards normais um pouco maiores */ .card-nome { font-size: 16px; } .card-preco { font-size: 22px; } .card-spec { font-size: 11px; padding: 4px 8px; } .btn-zap { font-size: 12px; padding: 7px 12px; } .card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,.14); } /* DEMO em 3 colunas e largo */ .demo-section { padding: 56px 40px; } .demo-cards { max-width: 1140px; grid-template-columns: repeat(3, 1fr); gap: 22px; } .demo-titulo { font-size: 30px; } .demo-sub { font-size: 16px; } .demo-card-nome { font-size: 16px; } .demo-card-info { font-size: 13px; } .demo-card-preco { font-size: 20px; } /* POR QUÊ — vantagens em grade de cartões */ .porque { padding: 68px 40px; } .porque-inner { max-width: 1140px; } .porque-titulo { font-size: 30px; } .porque-sub { font-size: 15px; margin-bottom: 36px; } .vantagens { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .vantagem { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: 16px; padding: 22px 22px; align-items: center; } .v-texto strong { font-size: 17px; } .v-texto p { font-size: 13px; } /* CTA maior */ .cta { padding: 76px 24px; } .cta h2 { font-size: 40px; } .cta p { font-size: 16px; margin-bottom: 34px; } /* FOOTER mais arejado */ footer { padding: 48px 24px; } .f-links { gap: 28px; } .f-links a { font-size: 13px; } /* MODAIS centralizados (em vez de bottom-sheet) */ .overlay { align-items: center; padding: 28px; } .modal, .modal-detalhe, .meus-container { border-radius: 20px; max-height: 88vh; } .modal, .meus-container { padding: 32px 34px 36px; } .modal-detalhe { max-width: 700px; } .modal-handle { display: none; } .det-corpo { padding: 30px 34px; } /* WhatsApp flutuante levemente maior */ .wpp-float { width: 60px; height: 60px; font-size: 28px; bottom: 28px; right: 28px; } } /* Telas bem largas: 4 colunas de cards e vantagens em linha */ @media (min-width: 1200px) { .cards-grid { grid-template-columns: repeat(4, 1fr); } .vantagens { grid-template-columns: repeat(4, 1fr); } }