/* Gerado a partir do index.html em 2026-10-07T18:00 (separacao site x painel). Edite AQUI. */
/* ===================== CONFIGURAÇÃO VISUAL ===================== */
:root{
--vermelho-marca:#FF3B1F; /* cor principal Grupo Baena */
--vermelho-hover:#e02f15;
--preto:#000000;
--branco:#FFFFFF;
--fundo:#f6f6f6;
--card:#ffffff;
--texto:#111111;
--cinza:#6c6c6c;
--verde:#1e8e4e;
--borda:#e6e6e6;
--raio:12px;
--sombra:0 2px 10px rgba(0,0,0,.07);
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip}
body{font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;background:var(--fundo);color:var(--texto);line-height:1.5;overflow-x:clip}
header{background:var(--vermelho-marca);color:#fff;padding:30px 20px 26px;text-align:center}
header img.logo{width:150px;height:auto;display:block;margin:0 auto}
header p{color:rgba(255,255,255,.92);font-size:14px;margin-top:10px;letter-spacing:.2px}
.aviso-comissao{background:var(--preto);color:#fff;font-size:13.5px;text-align:center;padding:11px 16px}
.aviso-comissao strong{color:var(--vermelho-marca)}
/* LARGURA DA VITRINE — 21/09/2026 (pedido do Gabriel: "aumenta o card pros lados").
Eram 1100px para 4 cards, ou seja ~250px cada: estreito demais para a
ficha do lote, que quebrava em muitas linhas. Passando para 1500px cada
card ganha ~90px de largura SEM mudar o numero de colunas — a grade
continua 4 por fileira, como pede o PRD (RF-150). */
/* LARGURA DA VITRINE — 21/09/2026, 2a rodada (referencia: satoleiloes.com.br).
O que faz o card da Sato parecer maior nao e o card: e o site deles ocupar
a tela inteira. Aqui a pagina parava em 1500px e, num monitor ultrawide,
sobrava um vazio enorme dos dois lados.
Agora a vitrine usa 96% da largura da tela, com teto de 1900px (acima
disso a linha de texto fica longa demais para ler). Num monitor de 1920
cada card passa de ~350px para ~450px, mais largo que os da Sato — e a
grade continua com 4 por fileira, como manda o RF-150 do PRD. */
main{width:min(1900px, 96vw);max-width:none;margin:0 auto;padding:24px 16px 60px}
/* Telas pequenas voltam ao respiro normal das laterais. */
@media (max-width:1100px){ main{width:auto;max-width:1100px} }
.status-carregando{text-align:center;color:var(--cinza);padding:60px 0;font-size:15px}
/* GRADE DA VITRINE — RF-150 do PRD v2.0.
Antes era auto-fill com minimo de 300px, o que dava 3, 4 ou 5 colunas
dependendo da largura da janela: em 1440px sobrava um card orfao na
ultima fileira. Agora o numero de colunas e FIXO por faixa, entao a
vitrine tem sempre a mesma cara: 4 acima de 1280, 3 entre 1024 e 1280,
2 entre 640 e 1024, 1 abaixo de 640. */
.grade{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;align-items:stretch}
@media (max-width:1280px){ .grade{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:1024px){ .grade{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .grade{grid-template-columns:1fr;gap:16px} }
.grade > *{min-width:0}
/* ===== BorderGlow reutilizável (aplicado a .glow-card) ===== */
.glow-card{
--edge-proximity:0; --cursor-angle:45deg; --edge-sensitivity:30;
--color-sensitivity:calc(var(--edge-sensitivity) + 20);
--glow-padding:34px; --cone-spread:25; --fill-opacity:.5;
--glow-color:hsl(14deg 95% 55% / 100%);
--glow-color-60:hsl(14deg 95% 55% / 60%); --glow-color-50:hsl(14deg 95% 55% / 50%);
--glow-color-40:hsl(14deg 95% 55% / 40%); --glow-color-30:hsl(14deg 95% 55% / 30%);
--glow-color-20:hsl(14deg 95% 55% / 20%); --glow-color-10:hsl(14deg 95% 55% / 10%);
--g-one:radial-gradient(at 80% 55%, #FB3404 0px, transparent 50%);
--g-two:radial-gradient(at 69% 34%, #ff8a3d 0px, transparent 50%);
--g-three:radial-gradient(at 8% 6%, #ffd0a0 0px, transparent 50%);
--g-four:radial-gradient(at 41% 38%, #FB3404 0px, transparent 50%);
--g-five:radial-gradient(at 86% 85%, #ff8a3d 0px, transparent 50%);
--g-six:radial-gradient(at 82% 18%, #ffd0a0 0px, transparent 50%);
--g-seven:radial-gradient(at 51% 4%, #ff8a3d 0px, transparent 50%);
--g-base:linear-gradient(#FB3404 0 100%);
position:relative;isolation:isolate;transform:translate3d(0,0,.01px);overflow:visible}
.glow-card::before,.glow-card::after,.glow-card > .edge-light{content:"";position:absolute;inset:0;border-radius:inherit;transition:opacity .25s ease-out;z-index:-1;pointer-events:none}
.glow-card:not(:hover)::before,.glow-card:not(:hover)::after,.glow-card:not(:hover) > .edge-light{opacity:0;transition:opacity .75s ease-in-out}
.glow-card::before{border:1px solid transparent;
background:linear-gradient(var(--card) 0 100%) padding-box,linear-gradient(rgb(255 255 255 / 0%) 0 100%) border-box,
var(--g-one) border-box,var(--g-two) border-box,var(--g-three) border-box,var(--g-four) border-box,var(--g-five) border-box,var(--g-six) border-box,var(--g-seven) border-box,var(--g-base) border-box;
opacity:calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
mask-image:conic-gradient(from var(--cursor-angle) at center,black calc(var(--cone-spread)*1%),transparent calc((var(--cone-spread)+15)*1%),transparent calc((100 - var(--cone-spread) - 15)*1%),black calc((100 - var(--cone-spread))*1%))}
.glow-card::after{border:1px solid transparent;
background:var(--g-one) padding-box,var(--g-two) padding-box,var(--g-three) padding-box,var(--g-four) padding-box,var(--g-five) padding-box,var(--g-six) padding-box,var(--g-seven) padding-box,var(--g-base) padding-box;
mask-image:linear-gradient(to bottom,black,black),radial-gradient(ellipse at 50% 50%,black 40%,transparent 65%),radial-gradient(ellipse at 66% 66%,black 5%,transparent 40%),radial-gradient(ellipse at 33% 33%,black 5%,transparent 40%),radial-gradient(ellipse at 66% 33%,black 5%,transparent 40%),radial-gradient(ellipse at 33% 66%,black 5%,transparent 40%),conic-gradient(from var(--cursor-angle) at center,transparent 5%,black 15%,black 85%,transparent 95%);
mask-composite:subtract,add,add,add,add,add;
opacity:calc(var(--fill-opacity) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));mix-blend-mode:soft-light}
.glow-card > .edge-light{inset:calc(var(--glow-padding)*-1);z-index:1;
mask-image:conic-gradient(from var(--cursor-angle) at center,black 2.5%,transparent 10%,transparent 90%,black 97.5%);
opacity:calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));mix-blend-mode:plus-lighter}
.glow-card > .edge-light::before{content:"";position:absolute;inset:var(--glow-padding);border-radius:inherit;
box-shadow:inset 0 0 0 1px var(--glow-color),inset 0 0 1px 0 var(--glow-color-60),inset 0 0 3px 0 var(--glow-color-50),inset 0 0 6px 0 var(--glow-color-40),inset 0 0 15px 0 var(--glow-color-30),inset 0 0 25px 2px var(--glow-color-20),inset 0 0 50px 2px var(--glow-color-10),0 0 1px 0 var(--glow-color-60),0 0 3px 0 var(--glow-color-50),0 0 6px 0 var(--glow-color-40),0 0 15px 0 var(--glow-color-30),0 0 25px 2px var(--glow-color-20),0 0 50px 2px var(--glow-color-10)}
.lote{background:var(--card);border-radius:var(--raio);box-shadow:var(--sombra);display:flex;flex-direction:column;border:1px solid var(--borda);transition:transform .15s ease, box-shadow .15s ease}
.lote:hover{transform:translateY(-3px);box-shadow:0 6px 18px rgba(0,0,0,.13)}
.lote.destaque{outline:3px solid var(--vermelho-marca)}
.foto{position:relative;width:100%;aspect-ratio:4/3;background:#e9e9e9;overflow:hidden}
.foto img{width:100%;height:100%;object-fit:cover;display:block}
.foto .sem-foto{display:flex;align-items:center;justify-content:center;height:100%;color:#9a9a9a;font-size:14px}
.foto .nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.5);color:#fff;border:none;width:34px;height:34px;border-radius:50%;font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.foto .nav:hover{background:var(--vermelho-marca)}
.foto .nav.esq{left:8px}.foto .nav.dir{right:8px}
.foto .contador-fotos{position:absolute;bottom:8px;right:10px;background:rgba(0,0,0,.6);color:#fff;font-size:11.5px;padding:2px 9px;border-radius:20px}
.tag-encerrado{position:absolute;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center}
.tag-encerrado span{background:var(--preto);color:#fff;font-weight:700;padding:7px 22px;border-radius:6px;letter-spacing:1px;font-size:15px;border:1px solid rgba(255,255,255,.35)}
/* Selo da etapa (praça) por cima da foto do lote */
/* Selo de modalidade (Compra imediata / Proposta) sobre a foto do lote */
/* Quadro da etapa na página do lote (23/09/2026): só a etapa atual */
.regua-etapa.qe .re-tit{margin-bottom:10px}
.qe-linha{display:flex;align-items:center;gap:12px}
.qe-logo{width:46px;height:46px;border-radius:11px;flex:none;display:block;object-fit:cover}
.qe-praca{width:46px;height:46px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:var(--vermelho-marca,#FF3B1F);color:#fff;font-weight:800;font-size:16px}
.qe-praca.qe-martelo{font-size:20px}
.qe-txt{min-width:0}
.qe-txt b{display:block;font-size:17px;font-weight:800;color:#1d1d1f;line-height:1.2}
.qe-txt small{display:block;font-size:12px;color:var(--cinza);margin-top:2px;text-transform:uppercase;letter-spacing:.3px}
.qe-docs{display:flex;flex-direction:column;gap:7px}
.qe-docs:not(:empty){margin-top:12px;padding-top:12px;border-top:1px solid var(--borda)}
.qe-doc{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1.5px solid var(--borda);border-radius:9px;background:#fff;color:#1d1d1f;font-weight:700;font-size:14px;text-decoration:none;min-height:44px}
.qe-doc:hover{border-color:var(--vermelho-marca,#FF3B1F);color:var(--vermelho-marca,#FF3B1F)}
.qe-doc span:nth-child(2){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ld-card{background:#fff;border:1px solid var(--borda);border-radius:12px;padding:16px;margin-top:14px}
.ld-card h3{font-size:16px;margin:0 0 2px}
.ld-sub{font-size:13px;color:var(--cinza);margin:0 0 10px}
.ld-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid #f0f0f4}
.ld-item:first-of-type{border-top:0}
.ld-ic{font-size:24px;flex:none;width:34px;text-align:center}
.ld-txt{flex:1;min-width:0}
.ld-txt b{display:block;font-size:15px}
.ld-txt small{display:block;font-size:12px;color:var(--cinza);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ld-bts{display:flex;gap:6px;flex:none}
.ld-bt{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 14px;border:1.5px solid var(--borda);border-radius:9px;font-weight:700;font-size:14px;color:#1d1d1f;text-decoration:none;background:#fff}
.ld-bt:hover{border-color:var(--vermelho-marca,#FF3B1F);color:var(--vermelho-marca,#FF3B1F)}
.ld-bt.ld-bx{background:#1d1d1f;border-color:#1d1d1f;color:#fff}
.ld-bt.ld-bx:hover{background:#D42C03;border-color:#D42C03;color:#fff}
.qe-doc em{font-style:normal;font-size:11px;font-weight:800;color:#b3261e;background:#fdecea;border-radius:5px;padding:2px 6px}
/* Régua das etapas na página do lote */
.regua-etapa{background:#fff;border:1px solid var(--borda);border-radius:12px;padding:13px 12px;margin-bottom:12px;overflow:hidden}
.regua-etapa .re-tit{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--cinza);margin-bottom:12px}
.re-linha{display:flex;align-items:flex-start}
.re-passo{flex:1 1 0;min-width:0;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
/* linha de ligação entre as bolas (fica atrás, no nível do centro da bola) */
.re-passo::before{content:'';position:absolute;top:12px;left:-50%;width:100%;height:2px;background:#e3e3e3;z-index:0}
.re-passo:first-child::before{display:none}
.re-passo.feito::before,.re-passo.atual::before{background:#1c6b39}
.re-bola{position:relative;z-index:1;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;background:#eee;color:#888}
.re-cap{display:block;margin-top:6px;line-height:1.15;padding:0 2px}
.re-cap b{display:block;font-size:11px;font-weight:800;color:#333}
.re-cap small{display:block;font-size:8.5px;color:var(--cinza);text-transform:uppercase;letter-spacing:.2px;margin-top:1px}
.re-passo.atual .re-bola{background:var(--vermelho-marca,#FF3B1F);color:#fff;box-shadow:0 0 0 4px rgba(255,59,31,.18)}
.re-passo.atual .re-cap b{color:var(--vermelho-marca,#FF3B1F)}
@media(max-width:380px){ .re-cap small{display:none} .re-cap b{font-size:10px} }
.corpo{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.numero-lote{font-size:12px;font-weight:700;color:var(--vermelho-marca);letter-spacing:1.2px;text-transform:uppercase}
.titulo-lote{font-size:17px;font-weight:700;line-height:1.3}
.local-lote{font-size:13px;color:var(--cinza)}
.desc-lote{font-size:13.5px;color:var(--cinza);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.linha-valor{display:flex;align-items:baseline;justify-content:space-between;margin-top:auto;padding-top:10px;border-top:1px dashed var(--borda)}
.rotulo-valor{font-size:12px;color:var(--cinza)}
.valor-inicial{font-size:20px;font-weight:800;color:var(--preto)}
.prazo{font-size:12.5px;font-weight:600;padding:5px 10px;border-radius:6px;display:inline-block;width:fit-content}
.prazo.aberto{background:#efefef;color:#333}
.prazo.urgente{background:#ffe9e5;color:var(--vermelho-marca)}
.prazo.fechado{background:#efefef;color:var(--cinza)}
/* ===== Relógio de contagem regressiva do lote ===== */
/* "Pregao em ..." no card (29/09/2026). Discreto, mas legivel de longe. */
.pregao{display:flex;flex-direction:column;align-items:center;gap:1px;text-align:center;
padding:7px 10px 5px;line-height:1.25}
.pregao .pg-rot{font-size:11px;color:var(--cinza);letter-spacing:.3px}
.pregao .pg-txt{font-size:13.5px;font-weight:700;color:var(--texto)}
.pregao.urgente .pg-txt{color:var(--vermelho-marca)}
.pregao.fechado .pg-rot,.pregao.fechado .pg-txt{color:var(--cinza);font-weight:600}
.relogio{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;font-weight:700;color:#333;
background:#f1f3f5;padding:5px 10px;border-radius:6px;width:fit-content}
.relogio .rel-ico{font-size:13px;line-height:1}
.relogio .rel-txt{font-variant-numeric:tabular-nums}
.relogio .rel-data{color:var(--cinza);font-weight:500}
.relogio.urgente{background:#ffe9e5;color:var(--vermelho-marca)}
.relogio.urgente .rel-data{color:var(--vermelho-marca)}
.relogio.fechado{background:#efefef;color:var(--cinza)}
.relogio-grande{background:linear-gradient(180deg,#fff,#f7f8fa);border:1px solid var(--borda);border-radius:12px;padding:14px 16px;margin-bottom:14px}
.relogio-grande .rg-label{font-size:11.5px;text-transform:uppercase;letter-spacing:1px;color:var(--cinza);font-weight:800;margin-bottom:10px}
.rg-blocos{display:flex;gap:8px}
.rg-b{background:var(--preto);color:#fff;border-radius:8px;padding:8px 6px;min-width:54px;text-align:center;display:flex;flex-direction:column;line-height:1}
.rg-b b{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
/* filho direto apenas: senão esta regra pega também os spans dos dígitos rolantes */
.rg-b > span{font-size:10px;color:rgba(255,255,255,.72);margin-top:5px;text-transform:uppercase;letter-spacing:.5px}
.rg-sep{color:var(--cinza);font-weight:800;align-self:center;font-size:18px}
/* ---- Dígitos rolantes do cronômetro ----
Cada dígito é uma janelinha com uma coluna de 0 a 9 (repetida duas vezes,
para o giro do 0 para o 9 continuar descendo em vez de voltar). A coluna
desliza com um leve exagero no fim, imitando uma mola. */
.rolo{display:inline-block;position:relative;overflow:hidden;height:1em;line-height:1em;width:1ch;
vertical-align:text-bottom;font-size:inherit;font-variant-numeric:tabular-nums}
.rolo-col{display:block;will-change:transform;transition:transform .62s cubic-bezier(.34,1.42,.64,1)}
.rolo-col > span{display:flex;height:1em;line-height:1em;font-size:inherit;margin:0;padding:0;
color:inherit;letter-spacing:normal;text-transform:none;align-items:center;justify-content:center}
/* véu que apaga o topo e a base, como no componente original */
.rolo::before,.rolo::after{content:'';position:absolute;left:0;right:0;height:.16em;pointer-events:none;z-index:2}
.rolo::before{top:0;background:linear-gradient(to bottom,var(--rolo-bg,transparent),transparent)}
.rolo::after{bottom:0;background:linear-gradient(to top,var(--rolo-bg,transparent),transparent)}
.rg-b{--rolo-bg:#000}
.relogio-grande.urgente .rg-b{--rolo-bg:var(--vermelho-marca)}
.relogio-grande.fechado .rg-b{--rolo-bg:#9aa2ad}
@media (prefers-reduced-motion: reduce){ .rolo-col{transition:none} }
.rg-data{margin-top:11px;font-size:13px;color:var(--cinza)}
.rg-data b{color:var(--texto)}
.relogio-grande.urgente .rg-b{background:var(--vermelho-marca)}
.relogio-grande.fechado .rg-b{background:#9aa2ad}
.rg-enc{font-weight:800;color:var(--cinza)}
.btn-oferta{margin-top:12px;background:var(--vermelho-marca);color:#fff;font-weight:800;font-size:15px;border:none;border-radius:9px;padding:13px;cursor:pointer;transition:background .15s}
.btn-oferta:hover{background:var(--vermelho-hover)}
.btn-oferta:disabled{background:#e2e2e2;color:#9a9a9a;cursor:not-allowed}
/* ===================== MODAL ===================== */
.modal-fundo{position:fixed;inset:0;background:rgba(13,27,42,.6);display:none;align-items:center;justify-content:center;padding:16px;z-index:50}
.modal-fundo.aberto{display:flex}
.modal{background:#fff;border-radius:var(--raio);max-width:460px;width:100%;max-height:92vh;overflow-y:auto;padding:24px;position:relative}
.modal h2{font-size:19px;margin-bottom:2px}
.modal .sub{font-size:13px;color:var(--cinza);margin-bottom:16px}
.fechar{position:absolute;top:12px;right:14px;background:none;border:none;font-size:24px;color:var(--cinza);cursor:pointer}
.campo{margin-bottom:14px}
.campo label{display:block;font-size:13px;font-weight:600;margin-bottom:5px}
.campo input,.campo select{width:100%;padding:12px;border:1.5px solid var(--borda);border-radius:9px;font-size:16px;outline:none;background:#fff}
.campo input:focus,.campo select:focus{border-color:var(--vermelho-marca)}
.caixa-calculo{background:#f7f7f7;border:1px solid var(--borda);border-radius:10px;padding:14px;margin:16px 0;font-size:14px}
.caixa-calculo .linha{display:flex;justify-content:space-between;padding:4px 0}
.caixa-calculo .linha.total{border-top:1.5px solid var(--borda);margin-top:6px;padding-top:9px;font-weight:800;font-size:16.5px;color:var(--vermelho-marca)}
.caixa-calculo .obs{font-size:12px;color:var(--cinza);margin-top:8px;line-height:1.45}
/* Guia da 1ª oferta */
.guia-oferta{background:#fff7f3;border:1px solid #ffd9c7;border-radius:10px;padding:12px 14px;margin:12px 0 4px}
.guia-oferta .go-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.guia-oferta .go-head b{font-size:14px;color:var(--preto)}
.guia-oferta .go-x{background:none;border:none;font-size:20px;line-height:1;color:#b06a4c;cursor:pointer;padding:0 2px}
.guia-oferta ul{margin:0 0 10px;padding-left:18px}
.guia-oferta li{font-size:13px;color:var(--texto);line-height:1.5;margin:4px 0}
.guia-oferta .go-ok{background:var(--vermelho-marca);color:#fff;border:none;border-radius:8px;padding:8px 16px;font-weight:800;font-size:13px;cursor:pointer}
.go-link{background:none;border:none;color:var(--vermelho-marca);font-size:12.5px;font-weight:800;cursor:pointer;padding:2px 0;margin:2px 0 0}
.go-link:hover{text-decoration:underline}
/* Checklist pós-arremate */
.checklist-arremate{list-style:none;counter-reset:ck;margin:14px 0 18px;padding:0}
.checklist-arremate li{counter-increment:ck;position:relative;padding:0 0 14px 42px;min-height:30px}
.checklist-arremate li::before{content:counter(ck);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background:var(--vermelho-marca);color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center}
.checklist-arremate li::after{content:"";position:absolute;left:13px;top:30px;bottom:2px;width:2px;background:#f0d9cf}
.checklist-arremate li:last-child::after{display:none}
.checklist-arremate li b{display:block;font-size:14px;color:var(--preto);margin-bottom:2px}
.checklist-arremate li span{display:block;font-size:13px;color:var(--texto);line-height:1.5}
/* Botões de ação na tabela de ofertas do comprador */
.cp-acao{border:1.5px solid var(--vermelho-marca);background:var(--vermelho-marca);color:#fff;border-radius:8px;padding:7px 12px;font-size:12.5px;font-weight:800;cursor:pointer;white-space:nowrap}
.cp-acao:hover{filter:brightness(.94)}
.cp-acao.ok{background:#1c7d46;border-color:#1c7d46}
.cp-acao.ghost{background:#fff;color:var(--texto);border-color:var(--borda)}
.cp-acao.ghost:hover{border-color:var(--vermelho-marca);color:var(--vermelho-marca);filter:none}
.btn-enviar{width:100%;background:var(--preto);color:#fff;font-weight:800;font-size:16px;border:none;border-radius:9px;padding:14px;cursor:pointer;transition:background .15s}
.btn-enviar:hover{background:var(--vermelho-marca)}
.btn-enviar:disabled{background:#8a8a8a;cursor:wait}
/* Aviso do valor mínimo, embaixo do campo de oferta */
.minimo-aviso{font-size:12.5px;margin-top:6px;color:var(--cinza);min-height:17px}
.minimo-aviso.abaixo{color:var(--vermelho-marca);font-weight:700}
#fValor.abaixo{border-color:var(--vermelho-marca);background:#fff6f4}
.msg{padding:12px;border-radius:9px;font-size:14px;margin-top:12px;display:none}
.msg.ok{display:block;background:#e8f6ee;color:var(--verde);font-weight:600}
.msg.erro{display:block;background:#ffe9e5;color:var(--vermelho-marca);font-weight:600}
/* ===================== DETALHE DO LOTE (layout 2 colunas) ===================== */
.detalhe{max-width:1180px;margin:0 auto;padding:0 16px}
.sem-foto{color:#aaa;font-size:15px}
.copiado{font-size:12.5px;color:var(--verde);font-weight:700;margin-left:8px}
.lote-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.lote-bread{font-size:12.5px;color:var(--cinza);display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.lote-bread a{color:var(--cinza);text-decoration:none} .lote-bread a:hover{color:var(--vermelho-marca)}
.lote-bread b{color:var(--texto);font-weight:700}
.btn-voltar-lote{background:#fff;border:1.5px solid var(--borda);border-radius:8px;padding:8px 14px;font-size:13.5px;font-weight:600;cursor:pointer;color:var(--texto)}
.btn-voltar-lote:hover{border-color:var(--vermelho-marca);color:var(--vermelho-marca)}
.lote-cab{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:2px 0}
.lote-cab .numero-lote{font-size:12.5px;font-weight:800;color:var(--vermelho-marca);letter-spacing:1.4px;text-transform:uppercase}
.lote-cab .lc-local{font-size:13px;color:var(--cinza)}
.lc-acoes{display:flex;gap:18px;margin-left:auto;flex-wrap:wrap;align-items:center}
.lc-acao{background:none;border:none;color:var(--vermelho-marca);font-weight:700;font-size:13px;cursor:pointer;text-decoration:none;padding:0}
.lc-acao:hover{text-decoration:underline}
.lote-titulo{font-size:clamp(20px,2.6vw,30px);font-weight:800;line-height:1.14;margin:6px 0 18px;letter-spacing:-.4px}
.lote-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:start}
/* galeria */
.lg-main{position:relative;background:#0d0e12;border:1px solid var(--borda);border-radius:14px;overflow:hidden;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}
.lg-main img{width:100%;height:100%;object-fit:contain;display:block;cursor:zoom-in}
.lg-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.5);color:#fff;border:none;width:42px;height:42px;border-radius:50%;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lg-nav:hover{background:var(--vermelho-marca)} .lg-nav.esq{left:10px}.lg-nav.dir{right:10px}
.lg-full{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.5);color:#fff;border:none;width:38px;height:38px;border-radius:9px;cursor:pointer;font-size:16px}
.lg-full:hover{background:var(--vermelho-marca)}
.lg-cont{position:absolute;bottom:10px;right:12px;background:rgba(0,0,0,.6);color:#fff;font-size:12px;padding:3px 10px;border-radius:20px}
.lg-tag{position:absolute;top:10px;left:10px;background:#111;color:#fff;font-weight:800;font-size:12px;letter-spacing:1px;padding:5px 12px;border-radius:6px}
.lg-tag.cond{background:#F5B301;color:#3d2a00} /* mesma cor (dourado) da tarja do card */
/* Selo com a logo do fornecedor, no canto da foto do lote */
/* Campo da logo no formulário do fornecedor */
.fl-logo-box{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;
border:1.5px dashed var(--borda);background:#fafafa;border-radius:12px;padding:14px 16px;margin-top:12px}
.fl-logo-box .flg-info{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:3px}
.fl-logo-box .flg-info b{font-size:14.5px}
.fl-logo-box .flg-info span{font-size:12.5px;color:var(--cinza);line-height:1.5}
.fl-logo-box .flg-lado{display:flex;align-items:center;gap:12px;flex:none}
.flg-previa{width:96px;height:56px;border-radius:10px;background:#fff;border:1px solid var(--borda);
display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none}
.flg-previa img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.flg-vazia{font-size:11px;color:#aaa;font-weight:700;text-transform:uppercase;letter-spacing:.6px}
.flg-btn{white-space:nowrap}
@media(max-width:560px){ .fl-logo-box{flex-direction:column;align-items:stretch} .fl-logo-box .flg-lado{justify-content:space-between} }
.selo-forn{position:absolute;right:8px;bottom:8px;z-index:4;pointer-events:none;
width:62px;height:34px;padding:4px 6px;border-radius:8px;
background:rgba(255,255,255,.94);border:1px solid rgba(0,0,0,.10);
box-shadow:0 2px 8px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center}
.selo-forn img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.selo-forn.g{width:86px;height:46px;right:12px;bottom:12px;padding:5px 8px;border-radius:10px}
@media(max-width:520px){ .selo-forn{width:54px;height:30px;right:6px;bottom:6px} .selo-forn.g{width:66px;height:36px} }
.lg-thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.lg-thumbs img{width:74px;height:56px;object-fit:cover;border-radius:8px;border:2px solid transparent;cursor:pointer;opacity:.65;transition:all .15s}
.lg-thumbs img.on{border-color:var(--vermelho-marca);opacity:1} .lg-thumbs img:hover{opacity:1}
.lote-ficha{position:relative;margin-top:18px;background:#fff;border:1px solid var(--borda);border-radius:14px;box-shadow:var(--sombra);padding:18px 20px}
.lote-ficha h3{font-size:15px;font-weight:800;margin-bottom:12px}
.lf-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
.lf-item{border-bottom:1px solid #f3f3f5;padding-bottom:9px}
.lf-item .l{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--cinza);font-weight:700;display:block;margin-bottom:2px}
.lf-item .v{font-size:14.5px;font-weight:600;color:var(--texto)}
.lf-item .v .lf-na{color:#b7b9c0;font-weight:500;font-style:italic}
.lf-sobre{margin-top:16px;border-top:1px solid var(--borda);padding-top:14px}
.lf-sobre h4{font-size:12.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--cinza);font-weight:800;margin:0 0 6px}
.lf-sobre p{font-size:14px;color:var(--texto);line-height:1.55;margin:0;white-space:pre-wrap}
.lf-obs{grid-column:1/-1;margin-top:4px;font-size:14px;color:var(--texto);line-height:1.6;border-top:1px dashed var(--borda);padding-top:12px}
/* painel direito */
.lote-painel{position:sticky;top:14px;background:#fff;border:1px solid var(--borda);border-radius:16px;box-shadow:var(--sombra);padding:20px}
.lp-datas{display:flex;gap:10px;margin:2px 0 12px}
.lp-data{flex:1;background:#fafafa;border:1px solid var(--borda);border-radius:10px;padding:9px 12px}
.lp-data .l{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--cinza);font-weight:800}
.lp-data .v{font-size:13px;font-weight:700;color:var(--texto);margin-top:3px}
.lp-stats{display:flex;gap:8px;margin:0 0 16px;align-items:stretch}
.lp-stat{flex:1 1 0;text-align:center;background:#fff;border:1px solid var(--borda);border-radius:10px;padding:9px 6px;min-width:0;min-height:66px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
/* Valor limitado a 2 linhas com reticências (evita o box esticar com textos longos, ex.: quantidade grande). O texto completo fica na Ficha do lote. */
.lp-stat .n{font-size:18px;font-weight:900;color:var(--texto);line-height:1.15;max-width:100%;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.lp-stat .l{font-size:10px;color:var(--cinza);text-transform:uppercase;letter-spacing:.4px;font-weight:700}
/* ================= PAINEL DE DISPUTA (dentro do lote) =================
Blocos empilhados separados por fio fino: datas, contadores, ultimo lance,
proximo lance com o botao +, posicao do comprador e as acoes. */
.pd{border:1px solid var(--borda);border-radius:12px;background:#fff;margin:14px 0 0;overflow:hidden}
.pd-sec{padding:13px 15px;border-top:1px solid var(--borda)}
.pd-sec:first-child{border-top:none}
.pd-rot{font-size:10px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:var(--cinza)}
.pd-tipo{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
color:var(--vermelho-marca);background:#fdeceD;padding:4px 10px;border-radius:20px}
/* --- as duas datas lado a lado --- */
.pd-datas{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pd-datas>div{min-width:0}
.pd-datas .v{font-size:13.5px;font-weight:700;color:var(--texto);margin-top:3px;line-height:1.3}
/* --- visitas / participantes / lances --- */
.pd-cont{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:baseline}
.pd-cont>div{display:flex;align-items:baseline;gap:7px;min-width:0}
.pd-cont .n{font-size:15.5px;font-weight:900;color:var(--texto);font-variant-numeric:tabular-nums}
/* --- ultimo lance --- */
.pd-lance .num{font-size:clamp(24px,4.6vw,31px);font-weight:900;letter-spacing:-.8px;color:var(--texto);line-height:1.1}
.pd-lance .moeda{font-size:13px;font-weight:700;color:var(--cinza);margin-left:5px;letter-spacing:0}
.pd-lance .topo{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.pd-quem{margin-top:6px;font-size:13px;color:var(--cinza)}
.pd-quem b{color:var(--texto)}
/* --- proximo lance: campo com o + --- */
.pd-campo{position:relative;border:1.6px solid var(--borda);border-radius:30px;display:flex;align-items:center;
padding:2px 2px 2px 16px;margin-top:8px;background:#fff;transition:border-color .15s}
.pd-campo:focus-within{border-color:var(--vermelho-marca)}
.pd-campo input{flex:1;min-width:0;border:none;outline:none;background:transparent;font:inherit;
font-size:19px;font-weight:800;color:var(--texto);padding:10px 4px;font-variant-numeric:tabular-nums}
.pd-mais{flex:none;width:38px;height:38px;border-radius:50%;border:none;background:var(--vermelho-marca);
color:#fff;font-size:22px;font-weight:700;line-height:1;cursor:pointer;transition:background .15s}
.pd-mais:hover{background:var(--vermelho-hover)}
.pd-mais:disabled{background:#d6d6d6;cursor:not-allowed}
.pd-inc{margin-top:7px;font-size:12px;color:var(--cinza)}
/* --- posicao do comprador --- */
.pd-pos{font-size:13px;font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pd-pos .pill{padding:4px 11px;border-radius:20px;font-size:11.5px;font-weight:800;letter-spacing:.3px}
.pd-pos.lidera .pill{background:#e7f6ec;color:#1c6b39}
.pd-pos.perdeu .pill{background:#fff1e6;color:#a4490b}
.pd-pos.anon{font-weight:400;color:var(--cinza);font-size:12.5px}
.pd-pos.anon a{color:var(--vermelho-marca);font-weight:800;cursor:pointer;text-decoration:none}
/* --- chavinha do lance rapido --- */
.pd-rapido{display:flex;align-items:flex-start;gap:11px;cursor:pointer}
.pd-sw{flex:none;width:40px;height:23px;border-radius:20px;background:#d8d8d8;position:relative;
transition:background .18s;margin-top:1px}
.pd-sw::after{content:'';position:absolute;top:2.5px;left:2.5px;width:18px;height:18px;border-radius:50%;
background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.28);transition:transform .18s}
.pd-rapido input{position:absolute;opacity:0;width:0;height:0}
.pd-rapido input:checked + .pd-sw{background:var(--vermelho-marca)}
.pd-rapido input:checked + .pd-sw::after{transform:translateX(17px)}
.pd-rapido input:focus-visible + .pd-sw{outline:2px solid var(--vermelho-marca);outline-offset:2px}
.pd-rapido .txt{font-size:12.5px;color:var(--cinza);line-height:1.45}
.pd-rapido .txt b{color:var(--texto);display:block;font-size:13px;font-weight:800}
@media (max-width:420px){ .pd-datas{grid-template-columns:1fr} }
@media (prefers-reduced-motion: reduce){ .pd-sw,.pd-sw::after,.pd-campo{transition:none} }
/* ===== CONTADORES ANIMADOS DO LOTE =====
O numero antigo sai subindo e desfocando; o novo entra subindo e focando.
450ms, mesma curva de suavizacao do componente de referencia. Os dois
ficam na mesma celula do grid, entao nada se mexe de lugar na tela. */
.anim-num{display:inline-grid;place-items:center;font-variant-numeric:tabular-nums;letter-spacing:-.01em;vertical-align:baseline}
.anim-num>span{grid-area:1/1}
.anim-num .an-sai{animation:anNumSai .45s cubic-bezier(.23,.88,.26,.92) both;pointer-events:none}
.anim-num .an-entra{animation:anNumEntra .45s cubic-bezier(.23,.88,.26,.92) both}
@keyframes anNumSai{from{opacity:1;filter:blur(0px);transform:translateY(0)}
to{opacity:0;filter:blur(2px);transform:translateY(-12px)}}
@keyframes anNumEntra{from{opacity:0;filter:blur(2px);transform:translateY(8px)}
to{opacity:1;filter:blur(0px);transform:translateY(0)}}
/* Quem pediu no sistema para reduzir animacoes ve a troca seca, sem movimento. */
@media (prefers-reduced-motion: reduce){
.anim-num .an-entra{animation:none}
.anim-num .an-sai{display:none}
}
/* ===== VITRINE DE VALORES: lance inicial / maior lance / próximo lance ===== */
.vitrine{display:grid;gap:8px;margin-top:14px}
.vitrine.tres{grid-template-columns:1fr 1fr}
/* Lote ainda sem oferta: só o lance inicial, ocupando a linha inteira */
/* valor NUNCA é cortado: se não couber, quebra a linha */
/* maior lance: o destaque da tela */
/* próximo lance: o que a pessoa precisa fazer */
@media(max-width:520px){ .vitrine.tres{grid-template-columns:1fr} }
/* vitrine compacta, dentro do card da grade */
/* "Sua oferta" no painel do lote e selo no card da grade */
.lp-minha{margin:10px 0 0;padding:10px 12px;border-radius:10px;font-size:13px;line-height:1.45;
background:#eef7f0;border:1px solid #cfe7d6;color:#1c6b39}
.lp-minha.superada{background:#fff4ec;border-color:#f8d3b6;color:#a4490b}
.selo-minha-oferta{margin-top:6px;font-size:11.5px;font-weight:800;color:var(--cinza)}
.lp-valor{border-top:1px dashed var(--borda);padding-top:14px}
.lp-valor .l{font-size:12.5px;color:var(--cinza)}
.lp-valor .v{font-size:30px;font-weight:900;color:var(--preto);display:block;margin-top:2px;letter-spacing:-.5px}
.lp-aviso{font-size:12.5px;color:#8a4b3a;background:#fff7f4;border:1px solid #ffd9cc;border-radius:10px;padding:10px 12px;margin:12px 0}
.lp-aviso b{color:var(--vermelho-marca)}
.lp-estimar{background:none;border:none;color:var(--vermelho-marca);font-weight:800;font-size:13px;cursor:pointer;padding:0;margin:0 0 12px;text-decoration:underline}
.lote-cta{width:100%;background:var(--vermelho-marca);color:#fff;border:none;border-radius:12px;padding:15px;font-size:16px;font-weight:800;cursor:pointer;letter-spacing:.3px;box-shadow:0 8px 22px rgba(255,59,31,.32)}
.lote-cta:hover{background:var(--vermelho-hover)}
.lote-cta:disabled{background:#c7ccd3;box-shadow:none;cursor:not-allowed}
.lp-contato{margin-top:14px;border-top:1px solid var(--borda);padding-top:14px;display:flex;flex-direction:column;gap:12px}
.lp-link{display:flex;align-items:center;gap:11px;color:var(--texto);text-decoration:none;font-size:13px;line-height:1.35}
.lp-link b{color:var(--texto)} .lp-link:hover b{color:var(--vermelho-marca)}
.lp-link .ic{width:36px;height:36px;border-radius:50%;background:#f2f2f4;display:flex;align-items:center;justify-content:center;flex:none}
.lp-link .ic svg{width:20px;height:20px;display:block}
/* brilho laranja seguindo o cursor (mesmo efeito dos botões) nos dois cards */
.lote-painel,.lote-ficha{--mx:50%;--my:0%;--op:0}
.lote-painel::before,.lote-ficha::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:radial-gradient(240px circle at var(--mx) var(--my), rgba(251,52,4,.12), transparent 60%);opacity:var(--op);transition:opacity .3s}
.lote-painel::after,.lote-ficha::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
background:radial-gradient(240px circle at var(--mx) var(--my), rgba(251,52,4,.8), rgba(251,52,4,.28) 40%, transparent 62%);
opacity:var(--op);transition:opacity .3s;
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
@media(max-width:860px){ .lote-grid{grid-template-columns:1fr} .lote-painel{position:static} }
@media(max-width:520px){ .lf-grid{grid-template-columns:1fr} .lc-acoes{margin-left:0;width:100%} }
footer{text-align:center;color:var(--cinza);font-size:12.5px;padding:26px 16px}
footer .foot-legal{display:inline-block;margin-top:8px;font-size:12px;opacity:.9}
footer .foot-legal a{color:var(--cinza);text-decoration:underline;text-underline-offset:2px}
footer .foot-legal a:hover{color:var(--vermelho-marca)}
.honeypot{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.oculto{display:none !important}
/* ===================== TELA INICIAL: CARD DESLIZANTE ===================== */
.auth-wrap{min-height:calc(100vh - 210px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px 16px}
.acesso-galpoes{text-align:center;font-size:14px}
.acesso-galpoes a{color:var(--preto);font-weight:700;text-decoration:none;border-bottom:2px solid var(--vermelho-marca);padding-bottom:1px}
.acesso-galpoes a:hover{color:var(--vermelho-marca)}
.acesso-galpoes span{color:var(--cinza);margin:0 10px}
.auth-card{position:relative;width:760px;max-width:100%;min-height:500px;background:#fff;border-radius:18px;box-shadow:0 14px 40px rgba(0,0,0,.18);overflow:hidden}
.form-box{position:absolute;top:0;height:100%;width:50%;display:flex;align-items:center;justify-content:center;transition:all .6s ease-in-out}
.form-box form{display:flex;flex-direction:column;align-items:center;gap:13px;width:100%;padding:0 44px;text-align:center}
.form-box h2{font-size:24px;font-weight:800}
.form-box .mini{font-size:13px;color:var(--cinza);margin-top:-6px;margin-bottom:4px}
.form-box input{width:100%;padding:13px 14px;border:none;background:#efefef;border-radius:9px;font-size:15px;outline:none}
.form-box input:focus{box-shadow:0 0 0 2px var(--vermelho-marca) inset}
.btn-auth{margin-top:4px;background:var(--vermelho-marca);color:#fff;font-weight:800;font-size:15px;border:none;border-radius:24px;padding:13px 46px;cursor:pointer;letter-spacing:.5px;transition:background .15s}
.btn-auth:hover{background:var(--vermelho-hover)}
.btn-auth:disabled{background:#c9c9c9;cursor:wait}
.link-mobile{display:none;color:var(--vermelho-marca);font-weight:700;font-size:13.5px;text-decoration:none;margin-top:4px}
.manter{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--cinza);cursor:pointer;user-select:none}
.consent{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;color:var(--cinza);cursor:pointer;line-height:1.45;margin:8px 0 4px;text-align:left}
.consent input[type=checkbox]{width:18px !important;height:18px;flex:none;margin:1px 0 0;accent-color:var(--vermelho-marca);cursor:pointer}
.consent span{flex:1;min-width:0}
.consent a{color:var(--vermelho-marca);font-weight:600}
.manter input{width:auto;padding:0;margin:0}
.captcha-box{display:flex;justify-content:center;min-height:0}
.captcha-box:empty{display:none}
.entrar{left:0;z-index:2}
.cadastro{left:0;opacity:0;z-index:1}
.auth-card.ativo-cadastro .entrar{transform:translateX(100%);opacity:0;z-index:1}
.auth-card.ativo-cadastro .cadastro{transform:translateX(100%);opacity:1;z-index:5;animation:apar .6s}
@keyframes apar{0%,49.99%{opacity:0;z-index:1}50%,100%{opacity:1;z-index:5}}
.overlay-box{position:absolute;top:0;left:50%;width:50%;height:100%;overflow:hidden;transition:transform .6s ease-in-out;z-index:100}
.auth-card.ativo-cadastro .overlay-box{transform:translateX(-100%)}
.overlay{position:relative;left:-100%;width:200%;height:100%;background:linear-gradient(135deg,var(--vermelho-marca),var(--vermelho-hover));color:#fff;transform:translateX(0);transition:transform .6s ease-in-out}
.auth-card.ativo-cadastro .overlay{transform:translateX(50%)}
.overlay-panel{position:absolute;top:0;width:50%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 36px;transition:transform .6s ease-in-out}
.overlay-panel h2{font-size:24px;font-weight:800;margin-bottom:10px}
.overlay-panel p{font-size:14px;line-height:1.5;opacity:.95;margin-bottom:22px}
.overlay-left{transform:translateX(-20%)}
.auth-card.ativo-cadastro .overlay-left{transform:translateX(0)}
.overlay-right{right:0;transform:translateX(0)}
.auth-card.ativo-cadastro .overlay-right{transform:translateX(20%)}
.btn-ghost{background:transparent;border:2px solid #fff;color:#fff;font-weight:800;font-size:14px;border-radius:24px;padding:12px 34px;cursor:pointer;letter-spacing:.5px}
.btn-ghost:hover{background:rgba(255,255,255,.16)}
.opcoes-cadastro-mobile{display:none}
@media(max-width:640px){
/* No celular o card CRESCE conforme o conteúdo (sem cortar o "Criar cadastro") */
.auth-wrap{min-height:auto;padding:24px 14px}
.auth-card{min-height:auto;overflow:visible;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.overlay-box{display:none}
/* mostra só o formulário ativo, em fluxo normal (não sobreposto) */
.form-box{position:relative;left:auto;width:100%;height:auto;transform:none;opacity:1;animation:none}
.form-box form{padding:26px 22px}
.cadastro{display:none}
.entrar{display:flex}
.auth-card.ativo-cadastro .entrar{display:none}
.auth-card.ativo-cadastro .cadastro{display:flex;transform:none;opacity:1;animation:none}
.link-mobile{display:inline-block}
/* na tela de Entrar, mostra as opções de cadastro (comprador/fornecedor) no celular */
.entrar .link-mobile{display:none}
.opcoes-cadastro-mobile{display:flex;flex-direction:column;gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid #eee;text-align:center}
.ocm-titulo{font-weight:800;color:var(--texto);font-size:15px}
.btn-ocm{background:transparent;border:2px solid var(--vermelho-marca);color:var(--vermelho-marca);font-weight:800;font-size:14px;border-radius:24px;padding:11px 20px;cursor:pointer}
.btn-ocm:active{background:rgba(232,70,42,.08)}
}
/* barra de identificação do cliente */
.barra-cliente{max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:0 16px 4px;font-size:14px;color:var(--texto)}
.barra-cliente span{font-weight:600}
/* abas do painel admin */
.abas{display:flex;gap:6px;max-width:1100px;margin:0 auto 4px;padding:0 16px;flex-wrap:wrap}
.aba{background:#eee;border:none;border-radius:9px 9px 0 0;padding:11px 18px;font-size:14px;font-weight:700;color:var(--cinza);cursor:pointer}
.aba.ativa{background:var(--vermelho-marca);color:#fff}
.conteudo-aba{animation:fade .2s ease}
/* botão de destaque no card do lote (admin) */
/* aba de banners (admin) */
/* Estes estilos eram presos a .banner-card, mas o card de Comitentes e
parceiros usa .admin-card e ficava sem estilo nenhum (botoes Editar/Excluir
colados no canto). Agora valem em qualquer card que use .bc-acoes. */
/* ---- Ações em massa (Etapa 5c) ---- */
/* ---- Conferência (Etapa 8) ---- */
/* ---- Interesse por lote ---- */
/* ---- Aviso de cotações ---- */
/* Recado no lugar da opção de agendar, que foi desligada. */
@keyframes fade{from{opacity:0}to{opacity:1}}
/* tabelas de lances e clientes */
.tabela-wrap{max-width:100%;margin:0 auto;padding:0;overflow-x:auto}
table.dados{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--borda);border-radius:var(--raio);overflow:hidden;font-size:13.5px}
table.dados th{background:var(--preto);color:#fff;text-align:left;padding:10px 12px;font-weight:700;white-space:nowrap}
table.dados td{padding:9px 12px;border-top:1px solid var(--borda);white-space:normal;word-break:break-word}
table.dados tr:nth-child(even) td{background:#fafafa}
table.dados td.num{text-align:right;font-variant-numeric:tabular-nums}
/* No celular, a lista "Meus lotes" vira cartões empilhados (evita rolagem lateral e Status escondido) */
@media (max-width:600px){
#meusLotesLista .tabela-wrap{overflow:visible}
#meusLotesLista table.dados{border:0;background:transparent;font-size:14px}
#meusLotesLista table.dados thead{position:absolute;left:-9999px}
#meusLotesLista table.dados tr{display:block;background:#fff;border:1px solid var(--borda);border-radius:12px;padding:6px 14px;margin:0 0 12px}
#meusLotesLista table.dados tr:nth-child(even) td{background:transparent}
#meusLotesLista table.dados td{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;text-align:right;border:0;border-top:1px solid #f0f0f4;padding:10px 0;white-space:normal}
#meusLotesLista table.dados tr td:first-child{border-top:0}
#meusLotesLista table.dados td::before{content:attr(data-rotulo);font-weight:700;color:var(--cinza);text-align:left;flex:none}
}
/* ===================== PAINEL DO COMPRADOR ===================== */
.cp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:14px}
.cp-card{background:#fff;border:1px solid var(--borda);border-radius:12px;padding:14px 16px;box-shadow:var(--sombra);
display:flex;flex-direction:column;gap:4px}
.cp-card .cp-rot{font-size:10.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:var(--cinza)}
.cp-card .cp-num{font-size:26px;font-weight:900;letter-spacing:-.6px;color:var(--preto);line-height:1.1}
.cp-card.ok .cp-num{color:var(--verde)}
.cp-card.warn .cp-num{color:#a6791a}
.cp-linha-extra{display:flex;gap:26px;flex-wrap:wrap;background:#fff;border:1px solid var(--borda);
border-radius:12px;padding:13px 16px;box-shadow:var(--sombra)}
.cp-linha-extra > div{display:flex;flex-direction:column;gap:2px}
.cp-linha-extra .cp-rot{font-size:10.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:var(--cinza)}
.cp-linha-extra b{font-size:17px;font-weight:900;color:var(--preto)}
#painelComprador .conteudo-aba{max-width:1100px;margin:0 auto;padding:0 16px}
/* No celular a tabela de ofertas vira cartões empilhados */
@media (max-width:600px){
#compTabela{overflow:visible}
#compTabela table.dados{border:0;background:transparent;font-size:14px}
#compTabela table.dados thead{position:absolute;left:-9999px}
#compTabela table.dados tr{display:block;background:#fff;border:1px solid var(--borda);border-radius:12px;padding:6px 14px;margin:0 0 12px}
#compTabela table.dados tr:nth-child(even) td{background:transparent}
#compTabela table.dados td{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;text-align:right;
border:0;border-top:1px solid #f0f0f4;padding:10px 0;white-space:normal}
#compTabela table.dados tr td:first-child{border-top:0}
#compTabela table.dados td::before{content:attr(data-rotulo);font-weight:700;color:var(--cinza);text-align:left;flex:none}
.cp-card .cp-num{font-size:22px}
}
/* ===== Histórico de lotes: tabela larga que ROLA em vez de esmagar ===== */
table.dados.larga{min-width:1120px} /* abaixo disso a tabela rola na horizontal */
/* No celular vira cartão empilhado, sem rolagem lateral */
/* No celular, TODAS as tabelas do painel admin viram cartões empilhados
(usa o rótulo data-rotulo de cada célula), evitando rolagem lateral e
colunas espremidas. As tabelas "largas" (histórico) têm regra própria. */
.resumo-aba{max-width:1100px;margin:0 auto 10px;padding:0 16px;font-size:13.5px;color:var(--cinza)}
/* MENU DO NOME CORTADO NO PAINEL (04/10/2026, print do Gabriel).
A faixa de cima (#faixaAbas, onde fica o nome) e a faixa das listas
(#abasAdmin) tinham o mesmo z-index 40. Empatadas, vence a que vem depois
no HTML: a faixa das listas cobria o menu que abre do nome, e só o "Sair"
aparecia. A faixa de cima fica um degrau acima. */
/* ===== AJUSTES DE CELULAR (04/10/2026, varredura em 360/375/414 px) ===== */
/* Tabela LARGA (Dashboard, Histórico): no celular a regra acima tirava a
rolagem do invólucro e a tabela de 1.120 px ficava cortada sem dar para
ver o resto. Agora ela rola de lado dentro da própria caixa. */
/* Editais: o seletor de modelo e de lote tinha a largura do texto mais
comprido e saía 49 px para fora da tela. */
.ed-campo select,.ed-campo input{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
/* Botões do rodapé do lote (Salvar, Desligar, Vendido, Sem venda, Condicional):
numa linha só eles eram espremidos e o último saía da tela. */
@media (max-width:720px){
/* Na tela de edição a barra continua presa no pé (Salvar sempre à mão),
mas numa linha só que desliza de lado, em vez de três linhas cobrindo
os campos. */
}
/* Nome comprido no topo (comprador logado): a seta e parte do nome saíam da tela. */
@media (max-width:860px){
.fx-auth,.fx-auth .avatar-wrap,.fx-auth .avatar-btn{min-width:0;max-width:100%}
.fx-auth .avatar-nome{max-width:calc(100vw - 120px)}
}
/* badge de contagem na aba */
/* MODO ADMIN: as abas do painel viram menu lateral; a navegação normal do site é escondida (não serve dentro do admin) */
/* cards de cadastros pendentes e de ofertas recebidas */
/* Selo de origem da oferta: comprador ou fornecedor */
/* Edição inline de cliente (aba Clientes) */
/* Com a coluna Perfil a tabela ficou larga: em vez de espremer as colunas (o
que picotava o e-mail letra a letra), ela mantém a largura mínima e a caixa
rola na horizontal. No celular vira cartão e a largura mínima é dispensada. */
@media(max-width:720px){
/* No cartão do celular a última coluna não pode herdar o width:1% da versão
de mesa: era isso que fazia o rótulo "Ações" descer letra a letra. */
}
/* Coluna Perfil (selos). Três comportamentos, para a tabela nunca esticar:
tela larga = lado a lado; tela média = empilhados; celular (a tabela vira
cartão) = lado a lado de novo, alinhados à direita como os outros valores. */
@media(max-width:720px){
/* dentro do cartão do celular o valor fica à direita, então os selos
acompanham: em linha, podendo quebrar, sem esticar a largura */
}
.btn-desligar{background:#fff;border:1.5px solid var(--borda);border-radius:9px;padding:9px 16px;font-size:13px;font-weight:700;cursor:pointer;color:var(--cinza);white-space:nowrap}
.btn-desligar:hover{border-color:var(--vermelho-marca);color:var(--vermelho-marca)}
.btn-desligar:disabled{opacity:.6;cursor:wait}
/* Histórico de ofertas, agrupado por lote */
/* Modal do motivo da recusa */
.modal-motivo{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:80;display:none;align-items:center;justify-content:center;padding:16px}
/* ---- Endereço do comprador: no cadastro e no modal ---- */
.end-bloco{border:1.5px dashed var(--borda);border-radius:12px;padding:12px;margin:10px 0;background:#fafafa;
display:flex;flex-direction:column;gap:9px}
.end-bloco .end-tit{font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--cinza)}
.end-linha{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.end-linha>input{flex:1;min-width:0}
.end-bloco input{padding:11px 12px;border:1.5px solid var(--borda);border-radius:9px;font:inherit;font-size:14.5px;
background:#fff;color:var(--texto);width:100%}
.end-bloco input:focus{outline:0;border-color:var(--vermelho-marca)}
.end-cep-st{font-size:12px;color:var(--cinza);flex:0 0 auto;min-width:0;overflow-wrap:anywhere}
.end-cep-st.bom{color:#1c7d46;font-weight:700}
.end-cep-st.ruim{color:#b23b38}
.modal-motivo.aberto{display:flex}
/* Completar o cadastro rapido feito pela equipe (aba Oferta rapida do painel) */
#modalCompletar .motivo-caixa{max-height:92vh;overflow:auto}
#modalCompletar .end-bloco input[readonly]{background:#f1f2f4;color:var(--cinza)}
#modalCompletar .consent{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;line-height:1.4}
#modalCompletar .consent input{width:auto;margin-top:2px}
.motivo-caixa{background:#fff;border-radius:var(--raio);max-width:520px;width:100%;padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.motivo-caixa h3{font-size:18px;margin-bottom:4px}
.motivo-caixa .sub{font-size:13.5px;color:var(--cinza);margin-bottom:14px}
.motivo-caixa textarea{width:100%;min-height:96px;padding:11px;border:1.5px solid var(--borda);border-radius:9px;font-size:14.5px;font-family:inherit;resize:vertical}
.motivo-caixa textarea:focus{outline:none;border-color:var(--vermelho-marca)}
.motivo-rodape{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
/* Calculadora da taxa (admin) */
/* Editais por e-mail */
/* Condicionais */
/* Selo com o ID do próprio cliente, ao lado do nome no painel dele (só leitura) */
.cli-id-badge{display:inline-flex;align-items:center;gap:7px;margin-left:12px;padding:5px 11px;
border:1px solid rgba(255,255,255,.35);border-radius:999px;background:rgba(255,255,255,.14);line-height:1}
.cli-id-badge i{font-style:normal;font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.cli-id-badge b{font-weight:800;font-size:14px;letter-spacing:.04em;font-variant-numeric:tabular-nums;
-webkit-user-select:all;user-select:all}
@media(max-width:640px){ .cli-id-badge{margin-left:0;margin-top:6px} }
/* ===== Rodapé do site ===== */
.site-footer{background:#141418;color:#c9c7c4;margin-top:56px;text-align:left}
.ft-top{max-width:1200px;margin:0 auto;padding:48px 24px 30px;display:grid;grid-template-columns:1.7fr 1fr 1fr 1.5fr;gap:34px}
.ft-logo{display:flex;align-items:center;gap:11px;font-weight:800;font-size:22px;color:#fff;letter-spacing:.5px;line-height:1}
.ft-logo-img{height:40px;width:auto;flex:0 0 auto;display:block}
.ft-logo .wm-red{color:var(--vermelho-marca)}
.ft-sobre{font-size:13.5px;line-height:1.65;margin:16px 0 0;max-width:36ch;color:#9a9894}
.ft-col h4{color:#fff;font-size:15px;font-weight:800;margin:0 0 14px;letter-spacing:.3px}
.ft-col h2.ft-h{color:#fff;font-size:15px;font-weight:800;margin:0 0 14px;letter-spacing:.3px}
.ft-col a{display:block;color:#c9c7c4;text-decoration:none;font-size:14px;padding:6px 0;transition:color .15s;cursor:pointer}
.ft-col a:hover{color:var(--vermelho-marca)}
.ft-contato a{display:flex;align-items:flex-start;gap:10px;line-height:1.4}
.ft-contato svg{width:15px;height:15px;flex:0 0 auto;margin-top:3px;fill:var(--vermelho-marca)}
.ft-bar{border-top:1px solid rgba(255,255,255,.1)}
.ft-bar-inner{max-width:1200px;margin:0 auto;padding:16px 24px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:12.5px;color:#8a8884}
.ft-bar-inner a{color:#c9c7c4;text-decoration:none}
.ft-bar-inner a:hover{color:var(--vermelho-marca)}
@media(max-width:820px){ .ft-top{grid-template-columns:1fr 1fr;gap:26px} .ft-brand{grid-column:1/-1} }
@media(max-width:520px){ .ft-top{grid-template-columns:1fr} .ft-bar-inner{flex-direction:column;align-items:flex-start;gap:6px} }
/* Melhorias (changelog) */
.btn-aceitar,.btn-recusar{border:none;border-radius:9px;padding:11px 18px;font-size:14px;font-weight:800;cursor:pointer;color:#fff;white-space:nowrap}
.btn-aceitar{background:var(--verde)}
.btn-aceitar:hover{background:#176e3d}
.btn-recusar{background:#d9534f}
.btn-recusar:hover{background:#b23b38}
.btn-aceitar:disabled,.btn-recusar:disabled{opacity:.6;cursor:wait}
@media(max-width:560px){ .btn-aceitar,.btn-recusar{flex:1} }
/* ===================== MENU LATERAL (sidebar) ===================== */
:root{ --sb: 240px; }
body{ padding-left: var(--sb); }
.sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sb);z-index:60;background:#fff;border-right:1px solid var(--borda);
box-shadow:2px 0 14px rgba(0,0,0,.04);display:flex;flex-direction:column;padding:20px 14px 16px;overflow-y:auto}
.sb-brand{display:flex;align-items:center;gap:10px;cursor:pointer;padding:2px 6px 6px;margin-bottom:16px}
.sb-logo{width:36px;height:auto;flex:none;display:block}
.sb-name{font-weight:800;font-size:15.5px;letter-spacing:.3px;line-height:1;white-space:nowrap;color:#111 !important}
.sb-name .wm-red{color:var(--vermelho-marca) !important}
.sb-nav{display:flex;flex-direction:column;gap:4px}
.side-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:11px;color:var(--texto);
font-size:14.5px;font-weight:600;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.side-item svg{width:20px;height:20px;flex:none;opacity:.9}
.side-item:hover{background:#f4f4f6;color:var(--vermelho-marca)}
.side-item.ativa{background:var(--vermelho-marca);color:#fff;box-shadow:0 6px 16px rgba(251,52,4,.28)}
.side-item.ativa svg{opacity:1}
.sb-auth{margin-top:auto;padding-top:14px;border-top:1px solid var(--borda)}
.btn-entrar{width:100%;background:var(--vermelho-marca);color:#fff;border:none;border-radius:10px;padding:12px 16px;font-size:14.5px;font-weight:800;cursor:pointer}
.btn-entrar:hover{background:var(--vermelho-hover)}
.avatar-wrap{position:relative}
.avatar-btn{display:flex;align-items:center;gap:9px;background:none;border:none;cursor:pointer;padding:8px 8px;border-radius:10px;width:100%;text-align:left}
.avatar-btn:hover{background:#f2f2f2}
.avatar-ini{width:34px;height:34px;border-radius:50%;background:var(--vermelho-marca);color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;flex:none}
.avatar-nome{font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#111 !important}
.sb-auth .avatar-btn{color:#111 !important}
.sb-auth .avatar-ini{background:var(--vermelho-marca) !important;color:#fff !important}
.avatar-menu{position:absolute;left:0;right:0;bottom:52px;background:#fff;border:1px solid var(--borda);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.15);overflow:hidden;display:none}
.avatar-menu.aberto{display:block}
.sino-btn{position:relative;background:none;border:none;cursor:pointer;font-size:19px;line-height:1;padding:6px 7px;border-radius:9px;flex:0 0 auto;color:inherit}
.fx-auth .sino-btn:hover{background:rgba(255,255,255,.16)}
.sb-auth .sino-btn:hover{background:#f2f2f2}
.sino-badge{position:absolute;top:-1px;right:-1px;min-width:16px;height:16px;padding:0 3px;border-radius:9px;background:#111;color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px #fff}
.fx-auth .sino-badge{background:#111;box-shadow:0 0 0 2px var(--vermelho-marca,#FF3B1F)}
.sino-menu{position:absolute;bottom:52px;right:0;left:auto;width:320px;max-width:90vw;background:#fff;border:1px solid var(--borda);border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.22);overflow:hidden;display:none;z-index:90}
.fx-auth .sino-menu{top:calc(100% + 6px);bottom:auto;right:0;left:auto}
.sino-menu.aberto{display:block}
.sino-topo{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 14px;font-size:13px;font-weight:800;border-bottom:1px solid var(--borda);color:#222}
.sino-lertudo{background:none;border:none;color:var(--vermelho-marca,#FF3B1F);font-size:12px;font-weight:700;cursor:pointer;padding:2px 4px;white-space:nowrap}
.sino-lertudo:hover{text-decoration:underline}
.sino-lertudo:disabled{color:#bbb;cursor:default;text-decoration:none}
.sino-lista{max-height:60vh;overflow-y:auto}
.sino-vazio{padding:20px 14px;font-size:13px;color:var(--cinza);text-align:center}
.sino-item{display:flex;gap:9px;align-items:flex-start;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid #f0f0f0;padding:11px 14px;cursor:pointer;position:relative}
.sino-item:hover{background:#fafafa}
.sino-item.nao-lida{background:#fff6f3}
.sino-item.nao-lida:hover{background:#ffeee8}
.sino-item .si-ic{font-size:16px;flex:0 0 auto;margin-top:1px;width:20px;text-align:center}
.sino-item .si-txt{display:flex;flex-direction:column;line-height:1.3;min-width:0;flex:1}
.sino-item .si-txt b{font-size:13px;color:#222}
.sino-item .si-txt span{font-size:11.5px;color:var(--cinza);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sino-item .si-txt .si-quando{font-size:10.5px;color:#aaa;margin-top:2px;-webkit-line-clamp:1}
.sino-item .si-ponto{width:8px;height:8px;border-radius:50%;background:var(--vermelho-marca,#FF3B1F);flex:0 0 auto;margin-top:5px}
.sino-item.lida .si-ponto{background:transparent}
@keyframes pulsaLote{0%,100%{box-shadow:0 0 0 0 rgba(255,59,31,0)}50%{box-shadow:0 0 0 6px rgba(255,59,31,.18)}}
.avatar-menu button{display:block;width:100%;text-align:left;background:none;border:none;padding:12px 16px;font-size:14px;cursor:pointer;color:var(--texto)}
.avatar-menu button:hover{background:#f6f6f6;color:var(--vermelho-marca)}
/* topo mobile + overlay */
.mobile-topbar{display:none;position:sticky;top:0;z-index:55;background:#fff;border-bottom:1px solid var(--borda);
align-items:center;gap:12px;padding:10px 14px}
.mobile-topbar .hamb{background:none;border:none;font-size:24px;cursor:pointer;color:var(--texto);line-height:1}
.mt-brand{display:flex;align-items:center;gap:9px;cursor:pointer;font-weight:800;font-size:15px;white-space:nowrap}
.mt-logo{width:32px;height:auto;flex:none;display:block}
.mt-name{color:#111 !important}
.mt-name .wm-red{color:var(--vermelho-marca) !important}
.sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:59}
.sb-overlay.aberto{display:block}
@media(max-width:860px){
:root{ --sb: 0px; } /* sem barra lateral no mobile: zera o offset dos full-bleed (hero, faixa Sobre) */
body{ padding-left:0; }
.sidebar{transform:translateX(-100%);transition:transform .25s ease;width:270px;box-shadow:6px 0 24px rgba(0,0,0,.25)}
.sidebar.aberto{transform:translateX(0)}
.mobile-topbar{display:flex}
}
/* ===== SITE PÚBLICO (desktop): menu principal NO TOPO, sem barra lateral. =====
Reaproveita a MESMA .sidebar (mesmos links, mesmo destaque de aba ativa);
no MODO ADMIN a .sidebar continua como coluna lateral — nada muda no painel.
No celular (<=860px) segue o menu deslizante de sempre. */
@media(min-width:861px){
body:not(.admin-mode){ --sb: 0px; padding-left: 0; }
body:not(.admin-mode) .sidebar{
position:sticky; top:0; left:0; right:0; bottom:auto; width:100%; height:auto;
flex-direction:row; align-items:center; gap:6px; padding:9px 22px;
border-right:none; border-bottom:1px solid var(--borda);
box-shadow:0 2px 10px rgba(0,0,0,.05); overflow:visible;
}
body:not(.admin-mode) .sb-brand{ margin:0 auto 0 0; padding:0 10px 0 0; }
body:not(.admin-mode) .sb-nav{ flex-direction:row; flex-wrap:wrap; justify-content:flex-end; gap:0; }
body:not(.admin-mode) .side-item{ padding:9px 9px; gap:6px; font-size:14px; }
body:not(.admin-mode) .side-item svg{ width:17px; height:17px; }
body:not(.admin-mode) .sb-nav{ row-gap:2px; }
}
/* ===================== CHIPS DE CATEGORIA (home) ===================== */
.home-chips{display:none;gap:9px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
padding:4px 2px 12px;margin:2px 0 6px}
.home-chips::-webkit-scrollbar{display:none}
.home-chips .chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;cursor:pointer;
background:#fff;border:1.5px solid var(--borda);color:var(--texto);font-weight:700;font-size:14px;
border-radius:22px;padding:9px 16px;box-shadow:0 1px 3px rgba(0,0,0,.05);transition:all .15s}
.home-chips .chip:active{transform:scale(.97)}
.home-chips .chip .chip-ic{font-size:15px;line-height:1}
.home-chips .chip:hover{border-color:var(--vermelho-marca);color:var(--vermelho-marca)}
/* Barra de busca (topo, estilo marketplace) — banda cheia na cor da marca */
.busca-band{width:calc(100vw - var(--sb));margin-left:calc(50% - (100vw - var(--sb))/2);margin-right:0;
background:var(--vermelho-marca);padding:16px;margin-bottom:0}
.busca-in{max-width:900px;margin:0 auto}
.busca-box{display:flex;align-items:center;gap:8px;background:#fff;border-radius:8px;padding:4px 4px 4px 14px;box-shadow:0 6px 18px rgba(0,0,0,.14)}
.busca-box .busca-ic{font-size:17px;opacity:.55;flex:none}
.busca-box input{flex:1;border:none;outline:none;font-size:15.5px;color:var(--texto);background:transparent;min-width:0;padding:11px 4px}
.busca-btn{flex:none;background:var(--vermelho-marca);color:#fff;border:none;border-radius:6px;padding:11px 24px;font-size:15px;font-weight:800;cursor:pointer;transition:background .15s}
.busca-btn:hover{background:var(--vermelho-hover)}
/* ===== ICONE DA BUSCA QUE TROCA CONFORME O QUE A PESSOA DIGITA =====
Os icones ficam empilhados na mesma celula: o que sai encolhe e desfoca,
o que entra cresce e foca, com um leve repique no fim (mola). */
.busca-ic{position:relative;display:inline-grid;place-items:center;width:22px;height:22px;flex:none;opacity:1}
.busca-ic>*{grid-area:1/1;width:19px;height:19px;display:block;color:#6c6c6c}
.busca-ic img{width:20px;height:20px;border-radius:4px;object-fit:contain;background:#fff}
.busca-ic .bi-entra{animation:biEntra .34s cubic-bezier(.34,1.56,.64,1) both}
.busca-ic .bi-sai{animation:biSai .2s ease-in both;pointer-events:none}
@keyframes biEntra{from{opacity:0;transform:scale(.5);filter:blur(4px)}
to{opacity:1;transform:scale(1);filter:blur(0px)}}
@keyframes biSai{from{opacity:1;transform:scale(1);filter:blur(0px)}
to{opacity:0;transform:scale(.5);filter:blur(4px)}}
/* Botao de limpar: aparece so quando ha texto, com a mesma mola. */
.busca-x{flex:none;border:none;background:transparent;cursor:pointer;color:#9a9a9a;
width:26px;height:26px;border-radius:50%;font-size:14px;line-height:1;padding:0;
display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.busca-x:hover{background:#f0f0f0;color:var(--texto)}
.busca-x.bx-entra{animation:biEntra .34s cubic-bezier(.34,1.56,.64,1) both}
.busca-x.bx-sai{animation:biSai .2s ease-in both}
/* Tira o "x" nativo do campo de busca para nao ficarem dois. */
.busca-box input[type=search]::-webkit-search-decoration,
.busca-box input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
@media (prefers-reduced-motion: reduce){
.busca-ic .bi-entra,.busca-ic .bi-sai,.busca-x.bx-entra,.busca-x.bx-sai{animation:none}
.busca-ic .bi-sai{display:none}
}
/* HERO banner estático (sem animação) */
.hero-banner{width:calc(100vw - var(--sb));margin-left:calc(50% - (100vw - var(--sb))/2);position:relative;overflow:hidden;
height:clamp(200px,21vw,320px)} /* altura TRAVADA: o banner não cresce mais com a largura */
.hb-trilho{display:flex;height:100%;transition:transform .35s ease}
.hb-slide{flex:0 0 100%;height:100%;min-height:0;display:flex;align-items:center;padding:28px clamp(20px,6vw,90px);color:#fff}
/* Slide de banner de patrocínio: a imagem preenche o hero, sem o texto institucional */
.hb-slide.hb-banner{padding:0;align-items:stretch;background:#0c0c14;position:relative}
/* Preenche as laterais com uma cópia borrada e escurecida do próprio banner,
em vez de barras chapadas. O banner inteiro continua aparecendo (nada é cortado). */
.hb-slide.hb-banner .hb-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(12px) brightness(.42);transform:scale(1.14);z-index:0}
.hb-slide.hb-banner a,.hb-slide.hb-banner img{display:block;width:100%;height:100%}
.hb-slide.hb-banner a{position:relative;z-index:1}
.hb-slide.hb-banner img{object-fit:contain;min-height:0;position:relative;z-index:1}
.hb-copy{max-width:640px}
.hb-eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;background:rgba(255,255,255,.16);padding:5px 12px;border-radius:20px}
.hb-tit{font-size:clamp(26px,4.4vw,44px);font-weight:900;line-height:1.08;margin:14px 0 10px;letter-spacing:-.5px}
.hb-sub{font-size:clamp(14px,1.6vw,17px);line-height:1.5;opacity:.94;margin:0 0 18px;max-width:52ch}
.hb-cta{background:#fff;color:var(--preto);border:none;border-radius:9px;padding:13px 26px;font-size:15px;font-weight:800;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.22);transition:transform .12s}
.hb-cta:hover{transform:translateY(-2px)}
.hb-seta{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;border-radius:50%;border:none;background:rgba(0,0,0,.32);color:#fff;font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.hb-seta:hover{background:rgba(0,0,0,.5)}
.hb-prev{left:14px}.hb-next{right:14px}
.hb-dots{position:absolute;left:0;right:0;bottom:14px;display:flex;gap:8px;justify-content:center;z-index:3}
.hb-dots button{width:9px;height:9px;border-radius:50%;border:none;background:rgba(255,255,255,.5);cursor:pointer;padding:0}
.hb-dots button.on{background:#fff;width:22px;border-radius:6px}
/* Círculos de categoria */
.cat-circulos-wrap{text-align:center;margin:26px 0 6px}
.cc-titulo{font-size:17px;font-weight:800;color:var(--preto);margin:0 0 16px}
.cat-circulos{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(14px,3vw,34px)}
.cat-circ{display:flex;flex-direction:column;align-items:center;gap:9px;background:none;border:none;cursor:pointer;width:104px;padding:0}
/* Quadrado com o ícone ilustrado da categoria (arte própria do Grupo Baena). */
.cat-circ-ic{position:relative;width:96px;height:96px;border-radius:18px;overflow:hidden;
background:#F4F1EE;border:1px solid var(--borda);
display:flex;align-items:center;justify-content:center;font-size:32px;color:#fff;
box-shadow:0 4px 14px rgba(0,0,0,.10);transition:transform .16s,box-shadow .16s,border-color .16s}
.cat-circ-ic img{width:100%;height:100%;object-fit:cover;display:block}
/* fundo da marca só quando a imagem falta (fallback do emoji) */
.cat-circ-ic.sem-img{background:linear-gradient(150deg,var(--vermelho-marca) 0%,#c72703 100%);border-color:transparent}
.cat-circ:hover .cat-circ-ic{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.16);border-color:var(--vermelho-marca)}
.cat-circ-nome{font-size:13px;font-weight:800;color:var(--texto);line-height:1.2;text-align:center}
/* Ícones novos das categorias (SVG): escuro com detalhe laranja sobre o quadrado claro */
.cat-circ-ic .cic{width:58%;height:58%;color:#12152a;--a:#FB3404;--b:#F4F1EE}
.cat-circ-num{font-size:11.5px;font-weight:700;color:var(--cinza,#6b7280);margin-top:-5px}
@media(max-width:520px){
.cat-circ{width:88px}
.cat-circ-ic{width:80px;height:80px;border-radius:16px;font-size:27px}
.cat-circ-nome{font-size:12px}
}
/* Cabeçalho de seção centralizado (estilo marketplace) */
.op-head{text-align:center;margin:30px 0 16px}
.op-head h2{font-size:23px;font-weight:900;color:var(--preto);margin:0}
.op-head p{font-size:14px;color:var(--cinza);margin:4px 0 0}
.grade-titulo-linha{display:flex;align-items:center;gap:10px;margin:0 0 14px;color:var(--cinza);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.5px}
.grade-titulo-linha::after{content:"";flex:1;height:1px;background:var(--borda)}
.ver-todos{color:var(--vermelho-marca);font-weight:800;font-size:14px;cursor:pointer;white-space:nowrap}
.ver-todos:hover{text-decoration:underline}
/* Oportunidades em destaque: cards largos */
.op-destaque{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;align-items:stretch}
.op-card{display:flex;gap:0;min-height:140px;background:#fff;border:1px solid var(--borda);border-radius:12px;overflow:hidden;cursor:pointer;text-align:left;padding:0;transition:box-shadow .15s,transform .15s;box-shadow:var(--sombra)}
.op-card:hover{box-shadow:0 12px 30px rgba(0,0,0,.12);transform:translateY(-2px)}
.op-foto{flex:0 0 132px;background:#f0ede9;display:flex;align-items:center;justify-content:center;overflow:hidden}
.op-foto img{width:100%;height:100%;object-fit:cover}
.op-foto .op-semfoto{font-size:11px;color:var(--cinza);padding:8px;text-align:center}
.op-info{flex:1;min-width:0;padding:13px 14px;border-top:3px solid var(--vermelho-marca);display:flex;flex-direction:column}
.op-tit{font-weight:800;font-size:14.5px;color:var(--preto);line-height:1.25;margin-bottom:5px;min-height:2.5em;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.op-local{font-size:12px;color:var(--cinza);margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op-valor{font-size:12.5px;color:var(--texto)}.op-valor b{color:var(--vermelho-marca);font-size:15px}
.op-prazo{font-size:11.5px;color:var(--cinza);margin-top:auto;padding-top:6px}
/* Grade de cards estilo marketplace */
/* GRADE DA VITRINE (#gradeHome) — corrigido em 21/09/2026.
Estava com auto-fill e minimo de 300px: o navegador encaixava quantas
colunas coubessem, entao o numero de colunas — e a largura do card —
mudava sozinho conforme a largura disponivel. Era isso que fazia o card
"encolher depois de alguns segundos": quando o layout assentava e sobrava
espaco, ele empilhava mais uma coluna e todos ficavam mais estreitos.
Agora o numero de colunas e FIXO por faixa de tela, igual a .grade: a
largura do card so muda quando a janela muda, nunca sozinha. */
/* ABA CORRECOES */
/* ABA PESQUISA (22/09/2026) */
.grade-lotes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;align-items:stretch}
@media (max-width:1280px){ .grade-lotes{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:1024px){ .grade-lotes{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .grade-lotes{grid-template-columns:1fr;gap:16px} }
.grade-lotes > *{min-width:0}
/* Card do lote (estilo marketplace) — compacto e de tamanho fixo (não expande) */
.lote-sato{position:relative;background:#fff;border:1px solid var(--borda);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sombra);transition:box-shadow .15s}
.lote-sato:hover{box-shadow:0 6px 18px rgba(0,0,0,.12)}
.lote-sato .ls-ribbon{position:absolute;top:0;left:0;z-index:4;background:var(--vermelho-marca);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.4px;padding:3px 10px;border-radius:0 0 8px 0;text-transform:uppercase}
.lote-sato .ls-ribbon.fech{background:#8a8a8a}
.lote-sato .ls-ribbon.cond{background:#F5B301;color:#3d2a00} /* dourado/âmbar: aguardando definição (chama atenção) */
/* Encerrando em breve (últimas 24h): tarja laranja pulsante — tom mais forte
que o dourado do Condicional, para não se confundirem */
.lote-sato .ls-ribbon.breve{background:#E8760C;animation:ribPulsa 1.8s ease-in-out infinite}
.lote-sato .ls-ribbon.vend{background:#1c7d46}
.lote-sato .ls-ribbon.semv{background:#8a3b39}
.lote-sato .ls-ribbon.canc{background:#4a4a4a}
@keyframes ribPulsa{0%,100%{opacity:1}50%{opacity:.72}}
/* Cartão de lote finalizado: dados do desfecho */
.fin-linha{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--texto)}
.fin-linha .ls-ic{width:15px;text-align:center;flex:none}
.fin-valor{font-weight:800;color:#1c7d46}
.ls-foto .ls-semfoto-box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
width:100%;height:100%;background:repeating-linear-gradient(135deg,#f4f1ee 0 10px,#efeae5 10px 20px);color:var(--cinza);font-size:11.5px;font-weight:700;text-align:center;padding:10px}
.ls-foto .ls-semfoto-box span{font-size:26px;opacity:.5}
/* Vitrine mesclada: marca da capa (logo do comitente ou Grupo Baena) + selo de área */
.ls-marca{position:absolute;top:10px;right:10px;z-index:5;background:#fff;border:1px solid var(--borda);border-radius:10px;
padding:4px;box-shadow:0 2px 10px rgba(0,0,0,.18);line-height:0}
.ls-marca img{width:36px !important;height:36px !important;object-fit:contain;border-radius:6px;display:block;cursor:default}
.ls-marca .ls-gblogo{width:34px !important;height:34px !important;object-fit:contain;border-radius:0;display:block;cursor:default}
/* Selo da marca Grupo Baena: fundo laranja da marca com o GB em branco */
.ls-marca.ls-marca-gb{background:var(--vermelho-marca);border-color:var(--vermelho-marca);padding:5px}
.ls-marca .ls-gb{width:36px;height:36px;border-radius:6px;background:var(--vermelho-marca);color:#fff;font-weight:800;font-size:13px;
display:flex;align-items:center;justify-content:center;letter-spacing:-.5px}
.ls-selo-area{position:absolute;left:10px;bottom:10px;z-index:4;color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.5px;
text-transform:uppercase;padding:5px 11px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.25);max-width:80%;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ls-selo-area.leilao{background:var(--vermelho-marca)}
.ls-selo-area.vd{background:#12152a}
/* selo de etapa não pode colidir com a faixa "No ar": desce um pouco */
/* ===== SELO GRANDE DO DESFECHO, POR CIMA DA FOTO =====
Pedido do Gabriel (17/09): dar para ler o desfecho de longe, olhando a
imagem, sem precisar procurar a tarjinha do canto. Fica por cima de um
veu escuro para nao sumir em foto clara. */
/* ===== CARD ESTILO SATO (19/09/2026) =====================================
Referencia trazida pelo Ribeiro. O que veio de la: barra de status colorida
no topo, carimbo grande na foto, botao de ampliar, linhas com icone,
bloco de dois valores (etapa atual / proxima) e barra de acoes no rodape.
O que NAO veio: "N lotes / N vendidos" e "1a/2a praca" — o card deles e de
um LEILAO inteiro, o nosso e de UM LOTE. ====================================*/
/* Faixa vermelha no topo do painel quando o backend publicado nao bate com o
site. Existe por causa de 19/09/2026: o site estava CINCO DIAS a frente do
Code.gs implantado, e o sintoma aparecia como "e-mail continua saindo" e
"endereco nao salva" — nada disso era bug de codigo, era codigo nao
publicado. Sem este aviso, o proximo desencontro custa os mesmos dias. */
/* Os passos sao 1-2-3: tem que ler de cima para baixo. Forcado em bloco e
uma coluna porque o painel tem regras de grade que espalhavam a lista em
tres colunas lado a lado, e a ordem se perdia. */
/* Divisor dos lotes suspensos na vitrine. Ocupa a largura toda da grade. */
.grade-divisor{grid-column:1/-1;margin:14px 0 2px;padding:12px 16px;border-radius:12px;
background:#fffaf1;border:1px solid #f4c987;border-left:5px solid #F5B301}
.grade-divisor span{display:block;font-size:14px;font-weight:900;color:#8a5a00;letter-spacing:.2px}
.grade-divisor small{display:block;margin-top:3px;font-size:12.5px;color:#9a7433;line-height:1.45}
.mo-topo{padding:7px 12px;text-align:center;font-size:12.5px;font-weight:800;letter-spacing:.9px;
text-transform:uppercase;color:#fff;background:#1c7d46;line-height:1.2}
.mo-topo.ativo{background:#17a2c9}
.mo-topo.breve{background:#E8760C}
.mo-topo.abre{background:#1a5fb4}
.mo-topo.cond{background:#F5B301;color:#3d2a00}
.mo-topo.fech{background:#6b7280}
.mo-topo.vend{background:#1c7d46}
.mo-topo.semv{background:#8a3b39}
.mo-topo.canc{background:#4a4a4a}
.mo-ampliar{position:absolute;top:9px;right:9px;z-index:4;width:32px;height:32px;border-radius:8px;
border:none;background:rgba(255,255,255,.92);color:#333;cursor:pointer;display:flex;
align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.2);padding:0}
.mo-ampliar:hover{background:#fff}
/* linhas com icone, no lugar das linhas rotulo/valor */
.mo-linha{display:flex;align-items:flex-start;gap:9px;padding:7px 0;font-size:13.5px;line-height:1.35}
.mo-linha + .mo-linha{border-top:1px solid #f0f0f2}
.mo-linha .ic{flex:none;width:18px;height:18px;color:var(--cinza);margin-top:1px}
.mo-linha .tx{min-width:0;flex:1}
/* SEM NEGRITO nas linhas de ficha (21/09/2026). Data, local e quantidade
vinham em 800 — com tudo em negrito, nada se destaca e o card fica
pesado. O negrito ficou so onde ele trabalha: o preco. */
.mo-linha .tx b{display:block;font-weight:500;color:var(--texto);overflow-wrap:anywhere}
.mo-linha .tx span{display:block;font-size:12px;color:var(--cinza);margin-top:1px}
/* ESPACO VAZIO NO CARD (04/10/2026, print do Gabriel nos lotes 1890 e 1893).
Os cards de uma mesma fileira ficam com a altura do MAIS ALTO, e o botao
vai para o pe do card. Bastava um vizinho com a quantidade longa (lista de
itens de 6 linhas) para todos os outros da fileira ganharem um buraco em
branco acima do botao. Agora cada linha do card mostra no maximo 2 linhas
(o texto inteiro continua na pagina do lote e aparece ao passar o mouse),
e o card passa a ter a altura do proprio conteudo (align-self:start): o
vizinho mais alto nao empurra mais buraco nenhum para dentro dos outros.
O bloco "Pregao em + status + botao" anda sempre junto. */
.lote-mo{align-self:start}
.lote-mo .mo-linha .tx b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lote-mo > .mo-relogio{margin-top:auto}
.lote-mo > .mo-relogio ~ .mo-cta{margin-top:0}
/* dois valores: agora e a proxima etapa */
.mo-valores{padding:2px 0}
.mo-val{display:flex;align-items:flex-start;gap:9px;padding:7px 0}
.mo-val + .mo-val{border-top:1px solid #f0f0f2}
.mo-val .ic{flex:none;width:18px;height:18px;color:var(--cinza);margin-top:2px}
.mo-val .tx{flex:1;min-width:0}
.mo-val .tx i{display:block;font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.3px;
text-transform:uppercase;color:var(--cinza)}
.mo-val .tx b{display:block;font-size:16px;font-weight:900;color:var(--texto);margin-top:2px}
.mo-val.prox .tx b{color:#1c7d46}
.mo-queda{display:inline-flex;align-items:center;gap:3px;background:#e7f6ec;color:#1c6b39;
font-size:11.5px;font-weight:800;padding:2px 8px;border-radius:20px;margin-left:8px;vertical-align:2px}
/* rodape de acoes */
.mo-acoes{display:flex;border-top:1px solid var(--borda);background:#fff}
.mo-acoes button{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
border:none;background:none;padding:10px 8px;font-family:inherit;font-size:12.5px;font-weight:800;
letter-spacing:.4px;text-transform:uppercase;color:var(--cinza);cursor:pointer}
.mo-acoes button + button{border-left:1px solid var(--borda)}
.mo-acoes button svg{width:16px;height:16px;flex:none}
.mo-acoes button:hover{background:#fafafb;color:var(--texto)}
.mo-acoes .mo-a-fav.on{color:var(--vermelho-marca)}
.mo-acoes .mo-a-ver{color:var(--vermelho-marca)}
.fin-carimbo{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;
pointer-events:none;background:rgba(0,0,0,.34)}
.fin-carimbo .cb{transform:rotate(-9deg);border:4px solid currentColor;border-radius:12px;
padding:9px 20px;background:rgba(255,255,255,.94);text-align:center;
box-shadow:0 6px 18px rgba(0,0,0,.28);max-width:86%}
.fin-carimbo .cb b{display:block;font-size:clamp(20px,4.6vw,30px);font-weight:900;letter-spacing:1.2px;
line-height:1.02;text-transform:uppercase;white-space:nowrap}
.fin-carimbo .cb small{display:block;margin-top:3px;font-size:10px;font-weight:800;letter-spacing:1.6px;
text-transform:uppercase;color:#4b4b4b}
.fin-carimbo.vend{color:#1c7d46}
.fin-carimbo.semv{color:#a33330}
.fin-carimbo.canc{color:#4a4a4a}
.fin-carimbo.canc .cb{border-style:dashed}
@media(max-width:560px){ .fin-carimbo .cb{padding:8px 16px} .fin-carimbo .cb b{font-size:22px} }
.ls-foto{position:relative;aspect-ratio:16/10;background:#f0ede9;overflow:hidden;display:flex;align-items:center;justify-content:center}
.ls-foto img{width:100%;height:100%;object-fit:cover;cursor:zoom-in;display:block}
.ls-foto .ls-semfoto{font-size:11.5px;color:var(--cinza);text-align:center;padding:10px}
.ls-nav{position:absolute;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;border:none;background:rgba(255,255,255,.9);color:#333;font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.ls-nav.esq{left:8px}.ls-nav.dir{right:8px}
.ls-views{position:absolute;right:7px;bottom:7px;z-index:3;background:rgba(0,0,0,.55);color:#fff;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:20px;
display:inline-flex;align-items:center;gap:5px;line-height:1}
.ic-olho{flex:none;display:block;vertical-align:middle}
.ls-body{flex:1;display:flex;flex-direction:column;gap:0;padding:17px 18px 18px}
.ls-tit{font-size:17px;font-weight:700;color:var(--preto);line-height:1.32;margin:0 0 9px;min-height:2.64em;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;letter-spacing:-.2px}
.ls-local{font-size:12.5px;color:var(--cinza);margin-bottom:10px;min-height:1.1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ls-num{font-size:12.5px;color:var(--texto);border-top:1px solid var(--borda);padding:9px 0 0;margin-bottom:0;display:flex;align-items:center;gap:8px}
.ls-num b{font-weight:700}
.ls-num .ls-cod{color:var(--vermelho-marca);font-weight:800;font-size:11px;margin-left:auto}
/* Chips de Tipo (Venda direta/Leilão) e Etapa — no corpo do card, não na foto */
.ls-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 11px}
.ls-chip{font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;letter-spacing:.2px;white-space:nowrap;line-height:1.35}
.ls-chip.vd{background:#eef0f6;color:#12152a}
.ls-chip.leilao{background:#fff0e9;color:#c24d00}
.ls-chip.etapa{background:#eef7f0;color:#1c7d46}
/* ============ Card estilo "Maior Oferta" ============ */
.lote-mo{padding:0;background:#fff}
.mo-foto{position:relative;aspect-ratio:2/1;background:#f0ede9;overflow:hidden;display:flex;align-items:center;justify-content:center}
.mo-foto img{width:100%;height:100%;object-fit:cover;cursor:zoom-in;display:block}
.mo-foto .ls-semfoto{font-size:12px;color:var(--cinza);text-align:center;padding:10px}
/* Selo da categoria no canto da foto (23/09/2026) */
.mo-cat{position:absolute;left:9px;top:9px;z-index:4;display:inline-flex;align-items:center;gap:6px;max-width:calc(100% - 60px);
background:rgba(255,255,255,.95);border:none;border-radius:20px;padding:3px 10px 3px 3px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.18);font-family:inherit}
.mo-cat:hover{background:#fff}
.mo-cat-ic{width:24px;height:24px;border-radius:50%;background:#FB3404;display:flex;align-items:center;justify-content:center;flex:none}
.mo-cat-ic .cic{width:16px;height:16px;color:#fff;--a:#12152a;--b:#FB3404}
.mo-cat-tx{font-size:11.5px;font-weight:800;color:#12152a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.det-mods{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 2px}
.det-mod{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800;border-radius:20px;padding:4px 12px 4px 4px;border:1.5px solid var(--borda);background:#fff;color:#12152a;cursor:pointer;font-family:inherit}
.det-mod.leilao{border-color:#12152a;background:#12152a;color:#fff;padding:5px 12px}
.det-mod.vd{border-color:#FB3404;color:#FB3404;padding:5px 12px}
.mo-head{background:#0c0d10;color:#fff;padding:10px 14px;cursor:pointer}
.mo-titulo{font-size:14.5px;font-weight:700;line-height:1.3;letter-spacing:.2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.mo-sub{text-align:center;font-size:11px;color:#b9bcc6;font-weight:700;letter-spacing:.6px;margin-top:6px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mo-marca{display:flex;align-items:center;justify-content:center;padding:9px 14px;border-bottom:1px solid var(--borda);background:#fff}
.mo-marca-in{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}
.mo-marca-cap{font-size:12px;font-weight:800;letter-spacing:1.5px;line-height:1.2}
.mo-marca-cap.vd{color:#12152a}
.mo-marca-cap.leilao{color:var(--vermelho-marca)}
.mo-logo-gb{height:44px;width:auto;object-fit:contain;border-radius:10px;display:block}
.mo-logo-comit{max-height:44px;max-width:64%;object-fit:contain;display:block}
.mo-rows{padding:4px 15px}
.mo-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid #f1f1f3;font-size:13px}
.mo-row:last-child{border-bottom:none}
.mo-row>span{color:var(--cinza);flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mo-row>b{color:var(--texto);font-weight:700;text-align:right;flex:none;white-space:nowrap;padding-left:10px}
.mo-row:first-child>b{color:var(--preto);font-size:16px;letter-spacing:-.3px}
.mo-minha{margin:8px 15px 0;font-size:12px;font-weight:700;color:var(--verde);background:#eafaf0;border-radius:8px;padding:7px 11px;text-align:center}
.mo-relogio{padding:4px 15px 0}
.mo-status{text-align:center;font-size:12px;font-weight:800;letter-spacing:1.2px;padding:7px 10px 6px;color:#1c7d46}
.mo-status.breve{color:#c47d0c}
.mo-status.fech{color:#8a8a8a}
.mo-status.cond{color:#9a6b00} /* condicional: âmbar/dourado, chama atenção */
.mo-cta{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;border:none;cursor:pointer;background:#0c0d10;color:#fff;font-size:13.5px;font-weight:800;letter-spacing:.4px;padding:11px;transition:background .15s;margin-top:auto}
.mo-cta:hover{background:var(--vermelho-marca)}
.mo-cta-ic{display:inline-flex;color:var(--vermelho-marca)}
.mo-cta:hover .mo-cta-ic{color:#fff}
.mo-cta.fech{background:#c7ccd3;color:#fff;cursor:default}
.mo-cta.fech:hover{background:#c7ccd3}
.mo-cta.fech .mo-cta-ic{color:#fff}
/* CONDICIONAL: barra dourada/âmbar (não o cinza-branco de antes) */
.mo-cta.cond{background:#F5B301;color:#3d2a00;cursor:default}
.mo-cta.cond:hover{background:#F5B301}
.mo-cta.cond .mo-cta-ic{color:#7a5300}
/* PRÉ-ABERTURA: lote visível mas ainda não aberto para ofertas */
.mo-status.abre{color:#1a5fb4}
.mo-cta.abre{background:#1a5fb4;color:#fff;cursor:default}
.mo-cta.abre:hover{background:#1a5fb4}
.mo-cta.abre .mo-cta-ic{color:#cfe0f7}
.lote-sato .ls-ribbon.abre{background:#1a5fb4}
/* TAG do parceiro (ex.: WECO) e Ref. no título */
.mo-tagmarca{display:inline-block;background:#111827;color:#fff;font-weight:900;font-size:11px;letter-spacing:.5px;padding:2px 7px;border-radius:5px;vertical-align:middle}
.mo-ref{font-weight:600;font-size:12px;color:#c7ccd3}
.ls-chip.parceiro{background:#fff3cf;color:#8a5a00;border:1px solid #f0d791;font-weight:800}
/* Card unico por comitente/parceiro (opcao A) */
.lote-grupo{border:2px solid #111827}
.lote-grupo .mo-titulo{letter-spacing:-.2px}
.lote-grupo .mo-foto{position:relative}
.grp-selo{position:absolute;top:10px;right:10px;z-index:5;background:#111827;color:#fff;
font-size:11.5px;font-weight:900;letter-spacing:.3px;padding:5px 11px;border-radius:20px}
.lote-grupo .mo-cta{background:#111827}
.lote-grupo .mo-cta:hover{background:var(--vermelho-marca)}
.lote-grupo .mo-status.ativo{color:#111827}
.det-parceiro{display:inline-block;background:#111827;color:#fff;font-weight:800;font-size:12px;padding:3px 10px;border-radius:6px}
/* Lotes de fornecedor desligados (aguardando decisão) */
/* Coração de favorito na foto + chip de filtro "Favoritos" */
/* .mo-fav (coracao sobre a foto) saiu em 19/09/2026: virou .mo-a-fav na barra de acoes. */
.chip-fav{border:1.5px solid var(--borda);background:#fff;border-radius:8px;padding:8px 12px;font-size:13px;font-weight:700;cursor:pointer;color:var(--texto);white-space:nowrap}
.chip-fav.on{background:var(--vermelho-marca);border-color:var(--vermelho-marca);color:#fff}
.chip-fav .fm-num{background:rgba(0,0,0,.12);border-radius:20px;padding:1px 7px;font-size:11px;margin-left:3px}
.chip-fav.on .fm-num{background:rgba(255,255,255,.28)}
/* Barra de ordenação/filtros (Etapa 2) */
.filtro-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin:0 0 16px}
.fb-item{display:flex;flex-direction:column;gap:5px;font-size:11.5px;color:var(--cinza);font-weight:800;letter-spacing:.3px;text-transform:uppercase}
.fb-item>select,.fb-preco-row>input{font:inherit;font-size:13.5px;font-weight:600;color:var(--texto);text-transform:none;letter-spacing:0;padding:9px 11px;border:1.5px solid var(--borda);border-radius:8px;background:#fff}
.fb-item>select{min-width:180px;cursor:pointer}
.fb-preco-row{display:flex;align-items:center;gap:7px}
.fb-preco-row>input{width:104px}
.fb-preco-row .fb-ate{color:var(--cinza);font-weight:700}
.fb-limpar{align-self:flex-end;background:none;border:none;color:var(--vermelho-marca);font-size:13px;font-weight:800;cursor:pointer;padding:9px 4px}
.fb-limpar:hover{text-decoration:underline}
@media(max-width:520px){
.filtro-bar{gap:10px}
.fb-item{flex:1 1 46%}
.fb-item>select{min-width:0;width:100%}
.fb-preco{flex:1 1 100%}
.fb-preco-row>input{flex:1;width:auto}
.fb-limpar{flex:1 1 100%;text-align:left}
}
/* Bloco de preço em destaque — a informação principal, grande e clara */
.ls-preco{padding:12px 0 2px;margin-bottom:2px}
.ls-preco i{display:block;font-style:normal;font-size:10.5px;color:var(--cinza);text-transform:uppercase;letter-spacing:.6px;font-weight:700;margin-bottom:3px}
.ls-preco b{display:block;font-size:23px;font-weight:800;color:var(--preto);line-height:1.02;letter-spacing:-.6px}
/* Linhas de informação (rótulo à esquerda, valor à direita) — padrão institucional */
.ls-info{display:flex;flex-direction:column;margin:8px 0 4px;min-height:34px}
.ls-inf{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12.5px;padding:7px 0;border-top:1px solid #f0f0f2}
.ls-inf>span{color:var(--cinza);flex:none}
/* Quantidade longa: quebra em até 2 linhas em vez de ser cortada no meio da
palavra. O texto completo continua na Ficha do lote. */
.ls-inf>b{color:var(--texto);font-weight:700;text-align:right;min-width:0;line-height:1.3;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
/* legado (card de finalizados ainda usa .ls-rows/.ls-row) */
.ls-rows{display:flex;flex-direction:column;gap:5px;margin:8px 0;justify-content:flex-start}
.ls-row{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--texto);min-width:0}
.ls-row>span:not(.ls-ic):not(.ls-val){flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ls-row .ls-ic{font-size:13px;flex:none;width:16px;text-align:center}
.ls-row .ls-val{display:flex;flex-direction:column;line-height:1.15}
.ls-row .ls-val i{font-style:normal;font-size:10px;color:var(--cinza);text-transform:uppercase;letter-spacing:.3px}
.ls-row .ls-val b{color:var(--vermelho-marca);font-size:14px}
.ls-minha{font-size:12px;font-weight:700;color:var(--verde);background:#eafaf0;border-radius:8px;padding:7px 11px;margin-bottom:10px}
.ls-foot{display:flex;align-items:center;gap:9px;margin-top:auto;padding-top:6px}
.ls-fav{flex:none;width:44px;height:44px;background:#fff;border:1px solid var(--borda);border-radius:9px;color:var(--cinza);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s,background .15s}
.ls-fav .ls-heart{font-size:19px;line-height:1}
.ls-fav .ls-favtxt{display:none}
.ls-fav:hover{border-color:var(--vermelho-marca);color:var(--vermelho-marca)}
.ls-fav.on{color:var(--vermelho-marca);border-color:var(--vermelho-marca);background:#fff4f1}
.ls-ver{flex:1;background:var(--vermelho-marca);color:#fff;border:none;border-radius:9px;padding:12px;font-size:13.5px;font-weight:700;cursor:pointer;transition:background .15s;letter-spacing:.2px}
.ls-ver:hover{background:var(--vermelho-hover)}
@media(max-width:520px){
.grade-lotes,.grade{grid-template-columns:1fr;gap:14px}
.ls-body{padding:12px 12px 13px}
.ls-tit{font-size:14px}
.ls-preco b{font-size:20px}
.ls-fav{width:40px;height:40px}
/* Card estilo Maior Oferta no celular: 1 por linha, largo e legível */
.mo-titulo{font-size:15px}
.mo-sub{white-space:normal}
.mo-row{font-size:13.5px}
.mo-row>b{white-space:normal;text-align:right}
.mo-row:first-child>b{white-space:nowrap;font-size:17px}
.mo-logo-gb{height:52px}
.mo-cta{font-size:14px;padding:15px 10px}
.op-card{flex-direction:column}.op-foto{flex:0 0 130px;width:100%}
.hero-banner{height:200px}
.hb-slide{padding:20px}
}
/* Selos de papel (comprador / fornecedor) ao lado do nome */
.selo-papel{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:800;
text-transform:uppercase;letter-spacing:.4px;padding:2px 7px;border-radius:20px;line-height:1.4;white-space:nowrap}
.selo-papel.comprador{background:#e7f1fb;color:#1a5c9e;border:1px solid #c6dcf3}
.selo-papel.fornecedor{background:#fdeee9;color:#B33A17;border:1px solid #f6d3c6}
.avatar-selos{display:flex;gap:4px;margin-left:6px}
@media(max-width:860px){ .avatar-selos{display:none} }
/* Selos dentro do menu da conta e dos painéis */
.conta-selos{display:flex;gap:6px;padding:9px 12px 4px;flex-wrap:wrap}
.menu-secao{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;
color:#999;padding:9px 12px 3px;border-top:1px solid #eee;margin-top:4px}
.menu-secao:first-of-type{border-top:none;margin-top:0}
.virar-papel{color:#1a5c9e !important;font-weight:800 !important}
/* ===================== LEILÃO ONLINE ===================== */
.lei-topo{background:linear-gradient(120deg,#1a1e3c,#12152a);color:#fff;border-radius:14px;padding:22px 24px;margin-bottom:16px}
.lei-topo h2{margin:0 0 4px;font-size:23px;font-weight:900}
.lei-topo .lei-sub{opacity:.85;font-size:14px}
.lei-status{display:inline-block;background:#FB3404;color:#fff;font-size:11.5px;font-weight:800;
text-transform:uppercase;letter-spacing:.6px;padding:4px 11px;border-radius:20px;margin-bottom:9px}
.lei-status.agendado{background:#2C5F87}
.lei-status.encerrado{background:#8a8a8a}
/* Caixa "Configurações do Leilão Online" (igual à das plataformas de leilão) */
.lei-cfg{background:#f7f7f9;border:1px solid var(--borda);border-radius:12px;padding:16px 18px;margin-bottom:16px}
.lei-cfg h3{margin:0;font-size:17px;font-weight:800;color:var(--preto)}
.lei-cfg .lei-cfg-sub{font-size:12.5px;color:var(--cinza);margin:2px 0 14px}
.lei-cfg-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.lei-cfg-item b{display:block;font-size:13.5px;color:var(--preto);font-weight:800}
.lei-cfg-item .lei-val{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;color:var(--vermelho-marca);font-weight:800}
.lei-cfg-item span{display:block;font-size:11.5px;color:var(--cinza);margin-top:2px;line-height:1.35}
/* Textos de visita / retirada / agendamento */
.lei-avisos{display:flex;flex-direction:column;gap:9px;margin-bottom:20px}
.lei-aviso{background:#fff;border:1px solid var(--borda);border-left:4px solid var(--vermelho-marca);
border-radius:0 10px 10px 0;padding:11px 15px;font-size:14px;line-height:1.5}
.lei-aviso b{color:var(--preto)}
/* Fila de lotes do leilão */
.lei-fila{display:flex;flex-direction:column;gap:10px}
.lei-lote{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--borda);
border-radius:12px;padding:11px 14px;box-shadow:var(--sombra);transition:box-shadow .15s}
.lei-lote:hover{box-shadow:0 8px 22px rgba(0,0,0,.10)}
.lei-lote.fechado{opacity:.72}
.lei-ordem{flex:none;width:34px;height:34px;border-radius:9px;background:#12152a;color:#fff;
display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
.lei-foto{flex:none;width:86px;height:64px;border-radius:9px;overflow:hidden;background:#f0ede9}
.lei-foto img{width:100%;height:100%;object-fit:cover;display:block}
.lei-info{flex:1;min-width:0}
.lei-info h4{margin:0 0 3px;font-size:14.5px;font-weight:800;color:var(--preto);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lei-meta{font-size:12px;color:var(--cinza)}
.lei-valor{flex:none;text-align:right;min-width:132px}
.lei-valor i{display:block;font-style:normal;font-size:10.5px;color:var(--cinza);text-transform:uppercase;letter-spacing:.4px}
.lei-valor b{font-size:16px;color:var(--vermelho-marca);font-weight:900}
.lei-tempo{flex:none;min-width:132px;text-align:center;font-family:ui-monospace,Menlo,Consolas,monospace;
font-size:15px;font-weight:800;color:var(--preto);background:#f4f4f6;border-radius:9px;padding:7px 10px}
.lei-tempo small{display:block;font-family:inherit;font-size:10px;color:var(--cinza);font-weight:700;letter-spacing:.3px}
.lei-tempo.urgente{background:#fff2e0;color:#B45309}
.lei-tempo.prorrogado{background:#fff2e0;color:#B45309;animation:ribPulsa 1.2s ease-in-out infinite}
.lei-tempo.fim{background:#eee;color:#777}
.lei-acao{flex:none}
.lei-btn{background:var(--vermelho-marca);color:#fff;border:none;border-radius:9px;padding:10px 16px;
font-size:13.5px;font-weight:800;cursor:pointer;white-space:nowrap;transition:background .15s}
.lei-btn:hover{background:var(--vermelho-hover)}
.lei-btn:disabled{background:#c8c8cf;cursor:not-allowed}
.lei-lider{font-size:11.5px;font-weight:800;color:var(--verde);margin-top:3px}
.lei-superado{font-size:11.5px;font-weight:800;color:#B45309;margin-top:3px}
@media(max-width:860px){
.lei-lote{flex-wrap:wrap;gap:10px}
.lei-foto{width:70px;height:52px}
.lei-info{flex:1 1 100%;order:3}
.lei-valor{text-align:left;min-width:0;order:4;flex:1}
.lei-tempo{order:5;min-width:0;flex:1}
.lei-acao{order:6;flex:1 1 100%}
.lei-btn{width:100%}
}
/* Grade de categorias na Home */
.catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:6px}
.catcard{display:flex;flex-direction:column;align-items:flex-start;gap:4px;background:#fff;border:1.5px solid var(--borda);
border-radius:14px;padding:16px 16px 14px;cursor:pointer;text-align:left;transition:all .15s;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.catcard:hover{border-color:var(--vermelho-marca);transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.08)}
.catcard .cc-ic{font-size:24px;line-height:1}
.catcard .cc-nome{font-weight:800;font-size:15px;color:var(--preto)}
.catcard .cc-num{font-size:12.5px;color:var(--cinza);font-weight:700}
/* Filtro de modalidade no catálogo */
/* CATEGORIAS (23/09/2026): faixa de ícones acima dos outros filtros */
.cat-bar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
@media(max-width:700px){ .cat-bar{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin;-webkit-overflow-scrolling:touch} }
.cat-bar.oculto{display:none}
.cat-bar button{flex:none;display:inline-flex;align-items:center;gap:8px;cursor:pointer;background:#fff;border:1.5px solid var(--borda);
color:var(--texto);font-weight:700;font-size:13.5px;border-radius:10px;padding:7px 13px 7px 9px;transition:all .15s;font-family:inherit}
.cat-bar button:hover{border-color:var(--vermelho-marca)}
.cat-bar button .fm-num{font-size:11.5px;font-weight:800;background:rgba(0,0,0,.07);border-radius:20px;padding:1px 8px;min-width:22px;text-align:center}
.cat-bar button.on{background:#000;border-color:#000;color:#fff}
.cat-bar button.on .fm-num{background:rgba(255,255,255,.24)}
.cic{width:24px;height:24px;flex:none;color:#12152a;--a:#FB3404;--b:#fff}
.cat-bar button.on .cic{color:#fff;--a:#FB3404;--b:#000}
.cic .fg{fill:currentColor}.cic .sg{stroke:currentColor}.cic .fa{fill:var(--a)}.cic .fb{fill:var(--b)}.cic .sb{stroke:var(--b)}
.filtro-modo{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.filtro-modo button{display:inline-flex;align-items:center;gap:7px;cursor:pointer;background:#fff;
border:1.5px solid var(--borda);color:var(--texto);font-weight:700;font-size:13.5px;border-radius:22px;padding:8px 14px;transition:all .15s}
.filtro-modo button:hover{border-color:var(--vermelho-marca);color:var(--vermelho-marca)}
.filtro-modo button.on{background:var(--vermelho-marca);border-color:var(--vermelho-marca);color:#fff}
.filtro-modo button .fm-num{font-size:11.5px;font-weight:800;background:rgba(0,0,0,.08);border-radius:20px;padding:1px 8px;min-width:22px;text-align:center}
.filtro-modo button.on .fm-num{background:rgba(255,255,255,.28)}
/* chips por comitente no filtro de área (com a logo de cada um) */
#filtroComitentes{display:contents}
.filtro-modo .fa-comit img{width:16px;height:16px;object-fit:contain;border-radius:4px;margin-right:2px}
/* ---- Faixa de comitentes e parceiros ---- */
/* ---- Convite para instalar o app (Etapa 7) ---- */
.pwa-convite{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;background:#fff;border:1.5px solid var(--borda);
border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.16);padding:14px 16px;display:none;align-items:center;gap:14px;max-width:520px;margin:0 auto}
.pwa-convite.on{display:flex}
.pwa-convite img{width:44px;height:44px;border-radius:10px;flex:none}
.pwa-txt{flex:1;min-width:0}
.pwa-txt b{display:block;font-size:14.5px;color:var(--texto)}
.pwa-txt span{font-size:12.5px;color:var(--cinza);line-height:1.4}
.pwa-acoes{display:flex;gap:8px;flex:none}
.pwa-acoes button{border-radius:9px;padding:9px 14px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;border:1.5px solid var(--borda);background:#fff}
.pwa-instalar{background:var(--vermelho-marca)!important;border-color:var(--vermelho-marca)!important;color:#fff}
@media(max-width:520px){ .pwa-convite{flex-wrap:wrap} .pwa-acoes{width:100%} .pwa-acoes button{flex:1} }
.parc-faixa{margin:0 0 14px}
.parc-titulo{font-size:11.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--cinza);margin:0 0 8px}
.parc-lista{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.parc-card{display:flex;align-items:center;gap:10px;border:1.5px solid var(--borda);background:#fff;border-radius:12px;padding:9px 14px 9px 10px;cursor:pointer;font-family:inherit;text-align:left;transition:border-color .15s,box-shadow .15s}
.parc-card:hover{border-color:var(--cinza);box-shadow:0 2px 10px rgba(0,0,0,.06)}
.parc-card.on{border-color:var(--vermelho-marca);box-shadow:0 0 0 1px var(--vermelho-marca) inset}
.parc-logo{width:52px;height:34px;object-fit:contain;flex:none;border-radius:6px;background:#fff}
.parc-sem{display:inline-flex;align-items:center;justify-content:center;background:#f1f3f5;color:var(--cinza);font-size:13px;font-weight:800}
.parc-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.parc-txt b{font-size:14px;color:var(--texto);line-height:1.2}
.parc-sub{font-size:12px;color:var(--cinza)}
.parc-limpar{border:1.5px dashed var(--borda);background:transparent;border-radius:12px;padding:9px 14px;font-size:13px;font-weight:700;color:var(--cinza);cursor:pointer;font-family:inherit}
.parc-limpar:hover{border-color:var(--vermelho-marca);color:var(--vermelho-marca)}
@media(max-width:640px){ .parc-lista{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px} .parc-card{flex:none} }
/* FILTROS CENTRALIZADOS (23/09/2026): sem o rótulo "Mostrar:", que empurrava a
primeira linha e fazia as linhas parecerem desniveladas. Todas as faixas de
botões (categorias, modalidade, forma de compra) e a barra de ordenar/local/
preço ficam alinhadas pelo centro, com a mesma altura de botão. */
#filtroCategoria, #filtroArea, #filtroModo{justify-content:center}
#filtroArea button, #filtroModo button, .cat-bar button{min-height:38px;border-radius:8px}
#filtroArea .fa-comit-wrap{display:contents}
.filtro-bar{justify-content:center}
@media(max-width:700px){ #filtroCategoria{justify-content:flex-start} }
/* Comitentes e parceiros */
.parceiros{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-top:6px}
.parceiro{display:flex;flex-direction:column;gap:3px;background:#fff;border:1.5px solid var(--borda);border-radius:14px;padding:16px}
.parceiro .pc-ic{font-size:24px;line-height:1;margin-bottom:3px}
.parceiro b{font-size:14.5px;color:var(--preto)}
.parceiro span:not(.pc-ic){font-size:12.5px;color:var(--cinza)}
/* ===================== NAVEGAÇÃO INFERIOR (mobile) ===================== */
.bottom-nav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:65;background:#fff;
border-top:1px solid var(--borda);box-shadow:0 -4px 18px rgba(0,0,0,.08);
padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
.bottom-nav .bn-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
background:none;border:none;cursor:pointer;color:var(--cinza);font-size:10.5px;font-weight:700;padding:5px 2px;line-height:1;border-radius:10px}
.bottom-nav .bn-item svg{width:22px;height:22px;stroke-width:2}
.bottom-nav .bn-item.ativa{color:var(--vermelho-marca)}
.bottom-nav .bn-item:active{background:#f6f6f8}
@media(max-width:860px){
.home-chips{display:flex}
.bottom-nav{display:flex}
body{padding-bottom:64px}
/* dentro do painel admin ou do fornecedor, a navegação inferior do site não se aplica */
body.admin-mode .bottom-nav,
body:has(#painelFornecedor:not(.oculto)) .bottom-nav,
body:has(#painelComprador:not(.oculto)) .bottom-nav{display:none}
}
/* ===================== SEÇÕES ===================== */
.secao{max-width:1200px;margin:0 auto;padding:26px 18px 60px;animation:fade .2s ease}
/* Linha de confianca da Home: discreta, mas acima da dobra nos dois tamanhos. */
.conf-band{display:flex;flex-wrap:wrap;align-items:center;gap:8px 26px;margin:0 0 16px;padding:11px 16px;
background:#fff;border:1px solid var(--borda);border-radius:11px;box-shadow:var(--sombra)}
.conf-item{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--cinza);line-height:1.35;min-width:0}
.conf-item b{color:var(--texto);font-weight:700}
.conf-item svg{width:16px;height:16px;flex:none;fill:var(--vermelho-marca)}
@media (max-width:760px){
.conf-band{gap:7px 0;padding:10px 13px;border-radius:10px}
.conf-item{flex:1 1 100%;font-size:12.5px}
}
/* A vitrine estava presa em 1200px: num monitor de 1600px os cards saiam
com 275px de largura, magros e altos. As duas secoes que mostram lotes
passam a usar a largura da tela, como na Sato. As demais secoes (textos,
formularios) continuam em 1200px, porque linha de texto larga demais
e ruim de ler. */
#secHome, #secCatalogo{max-width:min(1760px, 95vw)}
@media (max-width:1240px){ #secHome, #secCatalogo{max-width:1200px} }
.sec-titulo{font-size:30px;font-weight:800;margin-bottom:4px}
.sec-sub{color:var(--cinza);font-size:15px;margin-bottom:22px}
.bloco-claro{background:#fff;border:1px solid var(--borda);border-radius:14px;padding:26px;box-shadow:var(--sombra);margin-bottom:22px}
/* HERO */
.hero{background:linear-gradient(135deg,#1a1a1a,#000);color:#fff;border-radius:16px;padding:52px 40px;margin-bottom:30px;position:relative;overflow:hidden}
.hero h1{font-size:38px;font-weight:800;line-height:1.15;max-width:640px}
.hero h1 .marca{color:var(--vermelho-marca)}
.hero p{color:rgba(255,255,255,.85);font-size:16px;max-width:560px;margin:16px 0 26px}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.btn-hero{background:var(--vermelho-marca);color:#fff;border:none;border-radius:10px;padding:14px 26px;font-size:15px;font-weight:800;cursor:pointer;text-decoration:none;display:inline-block}
.btn-hero:hover{background:var(--vermelho-hover)}
.btn-hero.alt{background:transparent;border:2px solid rgba(255,255,255,.4)}
.btn-hero.alt:hover{background:rgba(255,255,255,.1)}
/* ===================== HERO EM VÍDEO (máquina GB em loop) ===================== */
.hero-maq{position:relative;width:calc(100vw - var(--sb));left:auto;right:auto;margin-left:calc(50% - (100vw - var(--sb))/2);margin-right:0;margin-top:-26px;
height:clamp(400px,64vh,580px);overflow:hidden;
/* fundo chapado na MESMA cor do fundo do video: com object-fit:contain nao aparece emenda */
background:#F6EDFA}
/* contain (nao cover): a cena aparece inteira, sem cortar o telhado nem a esteira.
Ancorada a direita; a mascara dissolve a ponta esquerda por tras do texto. */
.mq-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:right center;display:block;
transform:none;
-webkit-mask:linear-gradient(90deg,transparent 6%,#000 26%);mask:linear-gradient(90deg,transparent 6%,#000 26%)}
#mqB{opacity:0}
.mq-scrim{position:absolute;inset:0;pointer-events:none;
background:linear-gradient(90deg, rgba(246,237,250,.98) 0%, rgba(246,237,250,.88) 22%, rgba(246,237,250,.45) 38%, rgba(246,237,250,0) 54%)}
.mq-copy{position:absolute;left:6vw;top:50%;transform:translateY(-50%);max-width:min(560px,46vw);z-index:5}
.mq-eyebrow{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--vermelho-marca);font-weight:800;margin-bottom:10px}
.mq-copy h1{font-size:clamp(27px,3.4vw,44px);line-height:1.06;font-weight:800;letter-spacing:-1.2px;color:#141518;max-width:13ch}
.mq-copy h1 .hl{color:var(--vermelho-marca)}
.mq-copy p{margin:0;font-size:clamp(14px,1.15vw,18px);line-height:1.6;color:#5b6572}
/* Slot do texto do hero: caixa clara com luz laranja percorrendo a borda (mesmo efeito dos botões) */
.mq-slot{position:relative;isolation:isolate;overflow:hidden;--mx:50%;--my:0%;--op:0;
margin-top:14px;max-width:48ch;padding:13px 16px;border-radius:14px;
background:rgba(255,255,255,.55);border:1.5px solid #c7ccd3;backdrop-filter:blur(3px);
box-shadow:0 6px 20px rgba(20,21,24,.06)}
.mq-slot::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:radial-gradient(170px circle at var(--mx) var(--my), rgba(251,52,4,.10), transparent 60%);
opacity:var(--op);transition:opacity .3s}
.mq-slot::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
background:radial-gradient(170px circle at var(--mx) var(--my), rgba(251,52,4,.75), rgba(251,52,4,.25) 40%, transparent 62%);
opacity:var(--op);transition:opacity .3s;
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.mq-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:18px}
.hero-maq .mq-cta .btn-hero.alt{color:#141518 !important;background:rgba(255,255,255,.6) !important;
border:2px solid #c7ccd3 !important;box-shadow:none !important;backdrop-filter:blur(2px)}
.hero-maq .mq-cta .btn-hero.alt:hover{border-color:var(--vermelho-marca) !important;color:var(--vermelho-marca) !important;background:rgba(255,255,255,.88) !important}
@media (max-width:760px){
.hero-maq{height:auto;min-height:66vh;margin-top:-18px;display:flex;flex-direction:column;
background:linear-gradient(180deg,#f6f5fb 0%, #eeecf5 55%, #e7e4ee 100%)}
.mq-vid{position:relative;inset:auto;width:100%;height:auto;object-fit:contain;margin-top:auto;transform:none;
-webkit-mask:linear-gradient(180deg,transparent 0,#000 10%,#000 92%,transparent 100%);
mask:linear-gradient(180deg,transparent 0,#000 10%,#000 92%,transparent 100%)}
#mqB{position:absolute;bottom:0}
.mq-scrim{display:none}
.mq-copy{position:relative;left:auto;top:auto;transform:none;max-width:none;text-align:center;padding:4vh 6vw 2vh}
.mq-cta{justify-content:center}
.mq-copy h1{font-size:clamp(26px,6.6vw,38px);max-width:none}
.mq-slot{max-width:none;margin-left:auto;margin-right:auto;text-align:left}
}
/* ===================== FAIXA: PARCELAMENTO DO VALOR TOTAL + COMISSÃO EM ATÉ 12x ===================== */
.pagfaixa{width:calc(100vw - var(--sb));margin-left:calc(50% - (100vw - var(--sb))/2);margin-right:0;
background:linear-gradient(100deg,#12152a 0%,#1b1f3a 52%,#2a1a26 100%);color:#fff;padding:0;margin-bottom:14px}
.pf-in{max-width:1180px;margin:0 auto;padding:20px clamp(16px,3vw,28px) 22px}
.pf-main{max-width:70ch}
.pf-tag{display:inline-block;background:var(--vermelho-marca);color:#fff;font-size:11px;font-weight:800;
letter-spacing:1.6px;text-transform:uppercase;padding:4px 10px;border-radius:999px;margin-bottom:9px}
.pf-main h2{margin:0 0 6px;font-size:clamp(19px,2vw,27px);line-height:1.18;font-weight:800;letter-spacing:-.4px;color:#fff}
.pf-main h2 b{color:#ff6a3d}
.pf-main p{margin:0;font-size:14px;line-height:1.55;color:#c3c7dc;max-width:56ch}
.pf-meios{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:13px;max-width:860px}
.pf-lab{font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:#8c92b4;font-weight:700}
.pf-logos{display:flex;gap:9px;flex-wrap:wrap}
.pf-logo{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:9px 13px;font-size:14px;font-weight:700;color:#fff}
/* Ícone da bandeira/banco. Para trocar pelo logo oficial, basta substituir os arquivos
logo-mercadopago.svg, logo-nubank.svg e logo-infinitepay.svg na raiz do site, mantendo os mesmos nomes. */
.pf-ic{width:30px;height:26px;flex:none;display:block;object-fit:contain;
background:#fff;border-radius:6px;padding:3px 4px;box-sizing:border-box}
.pf-fine{font-size:12px;line-height:1.5;color:#8c92b4;flex:1 1 240px;min-width:200px}
@media (max-width:760px){
.pf-in{padding:18px 18px 20px}
.pf-meios{align-items:flex-start;gap:9px}
.pf-fine{flex:1 1 100%}
}
/* ===================== FAIXA LARANJA DE ABAS (topo) ===================== */
.faixa-abas{background:var(--vermelho-marca);width:calc(100vw - var(--sb));left:auto;right:auto;
margin-left:calc(50% - (100vw - var(--sb))/2);margin-right:0;margin-bottom:22px;
display:flex;flex-wrap:wrap;align-items:center;gap:0 2px;padding:0 clamp(8px,2vw,22px);
overflow:visible;position:relative;z-index:40}
.faixa-abas::-webkit-scrollbar{height:0}
.faixa-abas .fx-tab{background:none;border:none;color:#fff;font-weight:700;font-size:14.5px;cursor:pointer;
padding:15px 16px;white-space:nowrap;border-bottom:3px solid transparent;transition:background .15s}
.faixa-abas .fx-tab:hover{background:rgba(255,255,255,.14)}
.faixa-abas .fx-tab.ativa{border-bottom-color:#fff}
.faixa-abas .fx-spacer{flex:1 0 8px}
/* Categorias do admin no topo: só aparecem no modo admin, no lugar dos botões institucionais */
.faixa-abas .fx-cat{display:none}
.fx-auth{display:flex;align-items:center;margin-left:6px}
.fx-auth .btn-entrar{width:auto;background:#fff;color:var(--vermelho-marca);border-radius:9px;padding:9px 16px;font-size:14px;font-weight:800;white-space:nowrap}
.fx-auth .btn-entrar:hover{background:#ffe9e3}
.fx-auth .avatar-wrap{position:relative}
.fx-auth .avatar-btn{color:#fff;width:auto;padding:6px 8px}
.fx-auth .avatar-btn:hover{background:rgba(255,255,255,.16)}
.fx-auth .avatar-nome{color:#fff !important}
.fx-auth .avatar-ini{background:#fff !important;color:var(--vermelho-marca) !important}
.fx-auth .avatar-menu{top:calc(100% + 6px);bottom:auto;left:auto;right:0;min-width:210px;z-index:80}
@media(max-width:860px){
.faixa-abas{margin-bottom:16px;flex-wrap:wrap;overflow-x:visible;gap:0 2px;padding:6px 10px}
.faixa-abas .fx-tab{font-size:13.5px;padding:10px 12px;border-bottom:none;border-radius:8px}
.faixa-abas .fx-tab.ativa{background:rgba(255,255,255,.2)}
.faixa-abas .fx-spacer{display:none}
.fx-auth{margin-left:auto}
.fx-auth .btn-entrar{padding:8px 12px;font-size:13px}
.fx-auth .avatar-menu{right:0;left:auto}
}
/* Modal com página embutida (cadastro de comprador) */
.modal-embed{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px}
.modal-embed.oculto{display:none}
.modal-embed-card{position:relative;width:100%;max-width:720px;height:90vh;max-height:920px;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.modal-embed-x{position:absolute;top:8px;right:10px;z-index:2;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;border:none;font-size:20px;line-height:1;cursor:pointer}
.modal-embed-x:hover{background:rgba(0,0,0,.7)}
.modal-embed-frame{width:100%;height:100%;border:0;display:block}
@media(max-width:640px){ .modal-embed{padding:0} .modal-embed-card{height:100vh;max-height:none;border-radius:0} }
/* Quadro do galpões embutido (Onde Estamos / Cadastrar Galpão) */
.galpoes-frame{width:100%;height:82vh;min-height:560px;border:0;display:block;background:#f6f6f6;border-radius:12px}
@media(max-width:860px){ .galpoes-frame{height:86vh;min-height:520px;border-radius:0} }
/* ===================== CARROSSEL DE DESTAQUE (topo) ===================== */
/* Abas da vitrine: Leilões em andamento / realizados */
.cat-tabs{display:flex;gap:8px;margin:2px 0 16px;flex-wrap:wrap}
.cat-tab{background:#f4f4f6;border:1px solid var(--borda);border-radius:999px;padding:9px 18px;font-size:14px;font-weight:800;color:#555;cursor:pointer;transition:.15s}
.cat-tab.on{background:var(--vermelho-marca);border-color:var(--vermelho-marca);color:#fff}
.cat-tab:hover{border-color:var(--vermelho-marca)}
.destaque-carrossel{position:relative;width:calc(100vw - var(--sb));left:auto;right:auto;
margin-left:calc(50% - (100vw - var(--sb))/2);margin-right:0;margin-top:-26px;margin-bottom:20px;
height:clamp(150px,20vh,215px);overflow:hidden;background:#1c0f08}
#destaqueCarrossel:not(.oculto) + .hero-maq{margin-top:8px}
.dc-trilho{display:flex;height:100%;transition:transform .55s cubic-bezier(.22,1,.36,1)}
/* slide de LOTE: texto (escuro) + foto */
/* Arte fixa de fundo do slide (banner-destaque.jpg, 4:1). Aparece inteira quando o lote nao
tem foto; quando tem, a foto cobre a metade direita e sobra a area calma atras do texto.
A cor de fundo fica como reserva caso o arquivo nao exista. */
/* Tres zonas: arte fixa | dados do lote | foto do lote */
/* coluna 1: arte padrao (banner-destaque.jpg). Sem o arquivo, fica so o fundo escuro. */
/* dissolve a borda direita da arte no fundo do slide, para nao virar um corte seco */
/* Lote sem foto: a coluna da foto colapsa e a arte + os dados ocupam o slide inteiro,
em vez de deixar um terco vazio a direita. */
/* fundo transparente: sem foto, quem aparece aqui e a arte fixa do slide */
/* havendo foto, volta o fundo escuro (evita a arte vazar por fotos com transparencia) */
/* foto SEM cortar: imagem inteira (contain) sobre um fundo desfocado dela mesma */
/* slide de BANNER (patrocínio): anúncio inteiro, sem cortar */
/* setas e bolinhas */
.dc-seta{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:34px;height:34px;border-radius:50%;
background:rgba(255,255,255,.9);color:#2a1207;border:none;font-size:20px;line-height:1;cursor:pointer;
display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.dc-seta:hover{background:#fff}
.dc-prev{left:8px}.dc-next{right:8px}
.dc-dots{position:absolute;bottom:12px;left:0;right:0;display:flex;gap:7px;justify-content:center;z-index:6}
.dc-dots button{width:9px;height:9px;border-radius:50%;border:none;background:rgba(255,255,255,.5);cursor:pointer;padding:0;transition:all .2s}
.dc-dots button.on{background:#fff;width:24px;border-radius:5px}
@media (max-width:760px){
/* No celular o slide e quase quadrado: a arte 4:1 seria recortada e sobraria so o escuro.
Troca para a versao vertical (cena em cima, area calma embaixo, onde entra o texto).
Enquanto banner-destaque-mob.jpg nao existir, vale a cor de fundo, como era antes. */
/* no celular nao ha espaco para a coluna da arte: ela sai e a foto ocupa o card */
/* No celular a altura do carrossel acompanha o slide ativo (definida via JS), com transição suave */
.destaque-carrossel{height:auto;min-height:0;margin-top:8px;background:transparent;
transition:height .4s cubic-bezier(.22,1,.36,1)}
.dc-trilho{align-items:flex-start}
/* LOTE: card compacto com a foto preenchendo e as informações sobre a base (igual estética do banner) */
/* BANNER: mostra só o card do patrocínio, sem moldura escura sobrando */
.dc-seta{display:none}
.dc-dots{bottom:9px;width:fit-content;left:50%;transform:translateX(-50%);
background:rgba(0,0,0,.34);padding:6px 9px;border-radius:20px}
}
/* ===================== VÍDEO DA ABA SOBRE (galpão abrindo + zoom) ===================== */
.sobre-vid-wrap{position:relative;width:calc(100vw - var(--sb));left:auto;right:auto;margin-left:calc(50% - (100vw - var(--sb))/2);margin-right:0;
margin-top:26px;margin-bottom:6px;overflow:hidden;background:#0c0d10;
height:clamp(300px,52vh,600px)}
.sobre-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
#sobreVidB{opacity:0}
.sobre-vid.vb{opacity:0}
/* faixa do Contato: recortada só no mapa (vídeo 16:9 centralizado, sem vazios laterais) */
.ct-wrap{width:100%!important;max-width:1080px;margin:4px auto 26px!important;left:auto!important;right:auto!important;
height:auto!important;aspect-ratio:16/9}
#ctVidA,#ctVidB{object-fit:cover;object-position:center}
@media(max-width:760px){ .ct-wrap{max-width:100%} }
.sobre-vid-scrim{position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg, rgba(12,13,16,.35) 0%, rgba(12,13,16,0) 22%, rgba(12,13,16,0) 72%, rgba(12,13,16,.55) 100%)}
.sobre-vid-cap{position:absolute;left:0;right:0;bottom:0;padding:26px 6vw;z-index:3;color:#fff;text-align:center}
.sobre-vid-cap span{font-size:13px;letter-spacing:3px;text-transform:uppercase;color:#fff;font-weight:800;opacity:.9}
@media (max-width:760px){
.sobre-vid-wrap{height:auto;aspect-ratio:16/9;min-height:210px}
.sobre-vid{position:relative;inset:auto;height:100%}
.sobre-vid-cap{padding:16px 5vw}
.sobre-vid-cap span{font-size:11px;letter-spacing:2px}
}
/* CARDS DE PASSOS / COMO FUNCIONA */
/* Seção "Seja um fornecedor" */
.fornecedor-cta{position:relative;overflow:visible;border-radius:20px;padding:46px 44px;color:#fff;
background:radial-gradient(340px 340px at 100% 0%, rgba(251,52,4,.46), transparent 66%),
linear-gradient(120deg,#141518 0%,#20130f 55%,#3a1408 100%);
display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;box-shadow:0 18px 44px rgba(0,0,0,.24)}
/* fundo escuro interno fica recortado pela borda arredondada (garante o brilho por cima) */
.fornecedor-cta.glow-card{ --card:#191a1e; }
.fornecedor-cta .fc-glow{display:none}
.fornecedor-cta .fc-txt{position:relative;z-index:1;max-width:640px}
.fornecedor-cta .fc-eyebrow{font-size:13.5px;letter-spacing:2.8px;text-transform:uppercase;font-weight:800;color:var(--vermelho-marca);margin-bottom:10px}
.fornecedor-cta h2{font-size:clamp(26px,3vw,38px);font-weight:800;line-height:1.1;margin-bottom:10px}
.fornecedor-cta p{font-size:16.5px;color:rgba(255,255,255,.88);line-height:1.6;max-width:58ch}
.fornecedor-cta .fc-btn{position:relative;z-index:1;flex:none;background:var(--vermelho-marca);color:#fff;border:none;
border-radius:13px;padding:18px 36px;font-size:17px;font-weight:800;cursor:pointer;white-space:nowrap;box-shadow:0 8px 20px rgba(251,52,4,.4);
transition:box-shadow .22s ease, transform .22s ease, background .15s ease}
.fornecedor-cta .fc-btn:hover{background:var(--vermelho-hover);transform:translateY(-1px);box-shadow:0 6px 42px rgba(251,52,4,.95), 0 0 0 4px rgba(251,52,4,.18)}
@media(max-width:680px){ .fornecedor-cta{padding:24px 22px} .fornecedor-cta .fc-btn{width:100%} }
/* ===================== PAINEL DO FORNECEDOR ===================== */
#painelFornecedor{max-width:1100px;margin:0 auto;padding:26px 18px 60px}
.fl-card{max-width:780px}
.fl-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fl-grid label,.fl-full{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:var(--texto)}
.fl-grid input,.fl-grid select,.fl-full textarea{padding:11px 12px;border:1px solid var(--borda);border-radius:9px;font-size:14.5px;font-weight:500;font-family:inherit;outline:none;background:#fff}
.fl-grid input:focus,.fl-grid select:focus,.fl-full textarea:focus{border-color:var(--vermelho-marca);box-shadow:0 0 0 2px rgba(251,52,4,.12)}
.fl-full{margin-top:14px}
.fl-sec{grid-column:1 / -1;font-size:11.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--vermelho-marca);margin-top:10px;border-top:1px solid var(--borda);padding-top:12px}
.fl-col2{grid-column:1 / -1}
.fl-hint{grid-column:1 / -1;font-size:12px;color:var(--cinza);margin-top:-6px}
.fl-interno{display:inline-block;font-size:10.5px;font-weight:800;color:#8a6d0b;background:#fdf3cf;border-radius:5px;padding:1px 7px;margin-left:6px;vertical-align:middle;letter-spacing:.3px}
.fl-grid .req{color:var(--vermelho-marca)}
.fl-cond{display:none}
.fl-cond.on{display:flex}
.fl-docchip{display:inline-flex;align-items:center;gap:6px;background:#eef1f5;border:1px solid var(--borda);border-radius:20px;padding:5px 12px;font-size:12.5px;font-weight:600;margin:4px 6px 0 0}
.fl-docchip button{background:none;border:none;color:#c0392b;cursor:pointer;font-size:14px;line-height:1;padding:0}
.fl-fotos{margin-top:16px}
.fl-add{display:inline-flex;align-items:center;gap:8px;background:#f4f4f6;border:1.5px dashed #c7ccd3;border-radius:10px;padding:12px 18px;font-weight:800;font-size:14px;cursor:pointer;color:var(--texto)}
.fl-add:hover{border-color:var(--vermelho-marca);color:var(--vermelho-marca)}
.fl-preview{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.fl-thumb{position:relative;width:84px;height:84px;border-radius:8px;overflow:hidden;border:1px solid var(--borda)}
.fl-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.fl-thumb .fl-rm{position:absolute;top:2px;right:2px;background:rgba(0,0,0,.6);color:#fff;border:none;width:20px;height:20px;border-radius:50%;cursor:pointer;font-size:13px;line-height:18px;text-align:center;padding:0}
.st-badge{display:inline-block;font-size:12px;font-weight:800;padding:3px 11px;border-radius:20px}
.st-pendente{background:#fff4e5;color:#b7791f}
.st-aprovado{background:#e8f6ee;color:#1c7d46}
.st-recusado{background:#fdeaea;color:#c0392b}
/* Lotes para aprovar (admin) */
@media(max-width:680px){ .fl-grid{grid-template-columns:1fr} }
.passos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.passo{background:#fff;border:1px solid var(--borda);border-radius:14px;padding:24px;box-shadow:var(--sombra)}
.passo .num{font-size:34px;font-weight:800;color:var(--vermelho-marca);opacity:.25;line-height:1}
.passo h3{font-size:18px;margin:10px 0 6px}
.passo p{font-size:14px;color:var(--cinza)}
/* NÚMEROS */
.numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-top:8px}
.numero-card{background:#fff;border:1px solid var(--borda);border-radius:14px;padding:22px;text-align:center;box-shadow:var(--sombra)}
.numero-card .big{font-size:clamp(17px,4.4vw,30px);font-weight:800;color:var(--vermelho-marca);line-height:1.14;overflow-wrap:break-word}
.numero-card .lbl{font-size:13px;color:var(--cinza);margin-top:4px}
/* DESTAQUE OPERÁVEL (lotes/maquinário) */
.faixa-info{background:#eef7f0;border:1px solid #cfe9d6;color:#176e3d;border-radius:12px;padding:14px 18px;font-size:14px;margin-bottom:20px}
.faixa-info b{color:#0f5c2f}
.nav-brand{display:flex;align-items:center;gap:9px;cursor:pointer;font-weight:800;font-size:19px;letter-spacing:.4px;white-space:nowrap}
.nav-brand .badge{width:34px;height:34px;border-radius:8px;background:var(--vermelho-marca);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:14px;letter-spacing:.5px}
.nav-brand .wm-red{color:var(--vermelho-marca)}
/* CONTATO */
.contato-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.contato-card{background:#fff;border:1px solid var(--borda);border-radius:14px;padding:22px;box-shadow:var(--sombra)}
.contato-card .ico{font-size:26px;height:34px;display:flex;align-items:center}
.contato-card .ico svg{width:32px;height:32px;display:block}
.contato-card h3{font-size:15px;margin:8px 0 4px}
.contato-card a,.contato-card p{font-size:15px;color:var(--vermelho-marca);text-decoration:none;font-weight:600;word-break:break-word}
.contato-card p{color:var(--texto);font-weight:400}
/* topo do catálogo */
.cat-topo{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}
/* ===================== MODAL FORNECEDOR ===================== */
.forn-card{position:relative;width:560px;max-width:100%;margin:0 auto;background:#fff;border-radius:18px;box-shadow:0 14px 40px rgba(0,0,0,.22);padding:28px 28px}
.forn-x{position:absolute;top:-16px;right:-16px;background:#fff;border:1px solid var(--borda);width:40px;height:40px;border-radius:50%;font-size:24px;line-height:1;cursor:pointer;z-index:5;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.forn-form{display:flex;flex-direction:column;gap:12px}
.forn-form.oculto{display:none}
.forn-eyebrow{font-size:11.5px;letter-spacing:2.4px;text-transform:uppercase;font-weight:800;color:var(--vermelho-marca)}
.forn-form h2{font-size:22px;font-weight:800;line-height:1.1}
.forn-sub{font-size:13.5px;color:var(--cinza);margin-top:-6px;margin-bottom:4px;line-height:1.5}
.forn-form input:not([type=checkbox]):not([type=radio]),
.forn-form select, .forn-form textarea{width:100%;padding:13px 14px;border:none;background:#efefef;border-radius:9px;font-size:15px;outline:none;font-family:inherit;color:var(--texto)}
.forn-form input:not([type=checkbox]):not([type=radio]):focus,
.forn-form select:focus, .forn-form textarea:focus{box-shadow:0 0 0 2px var(--vermelho-marca) inset}
.forn-link{color:var(--vermelho-marca);font-weight:700;font-size:13.5px;text-decoration:none;text-align:center;margin-top:2px;cursor:pointer}
/* ---- Wizard ---- */
.wz-prog{display:flex;align-items:center;gap:6px;margin:6px 0 2px}
.wz-prog .dot{flex:1;height:6px;border-radius:6px;background:#e6e6ea;transition:background .25s}
.wz-prog .dot.on{background:var(--vermelho-marca)}
.wz-passo-lbl{font-size:12px;color:var(--cinza);font-weight:700;letter-spacing:.3px}
.wz-step{display:none;flex-direction:column;gap:11px}
.wz-step.on{display:flex;animation:fade .2s ease}
.wz-h{font-size:18.5px;font-weight:800;line-height:1.15;margin-bottom:-2px}
.wz-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wz-grid .col-2{grid-column:1 / -1}
.fld{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:700;color:#3a3f4b;text-align:left}
.fld .opt{color:var(--cinza);font-weight:600}
.fld .req{color:var(--vermelho-marca)}
.wz-nav{display:flex;gap:10px;margin-top:6px}
.wz-nav .btn-voltar-wz{flex:none;background:#ececed;color:#333;border:none;border-radius:10px;padding:13px 20px;font-size:14.5px;font-weight:800;cursor:pointer}
.wz-nav .btn-voltar-wz:hover{background:#e0e0e2}
.wz-nav .btn-auth{flex:1;margin-top:0}
.wz-radio{display:flex;gap:10px;flex-wrap:wrap}
.wz-radio label{flex:1;min-width:130px;display:flex;align-items:center;gap:8px;background:#f4f4f6;border:1.5px solid #e2e2e8;border-radius:10px;padding:11px 13px;font-size:13.5px;font-weight:700;cursor:pointer}
.wz-radio input{accent-color:var(--vermelho-marca)}
.wz-radio label.sel{border-color:var(--vermelho-marca);background:#fff5f2}
.aceite-box{background:#faf7f5;border:1px solid #ecdfd9;border-radius:11px;padding:13px 15px}
.aceite-box .comissao-destaque{font-size:15px;font-weight:800;color:var(--vermelho-marca)}
@media(max-width:560px){ .wz-grid{grid-template-columns:1fr} .forn-card{padding:24px 20px} }
/* ===================== LIGHTBOX (foto em tela cheia) ===================== */
.lightbox{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;padding:30px}
.lightbox.oculto{display:none}
.lightbox img{max-width:96vw;max-height:86vh;object-fit:contain;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.6);cursor:zoom-in;touch-action:none;transform-origin:center center;transition:transform .12s ease;will-change:transform;user-select:none;-webkit-user-drag:none}
.lightbox img.zoomed{cursor:grab;transition:none}
.lb-x{position:absolute;top:16px;right:20px;background:rgba(255,255,255,.12);border:none;color:#fff;width:44px;height:44px;border-radius:50%;font-size:28px;line-height:1;cursor:pointer;z-index:3}
.lb-x:hover{background:rgba(255,255,255,.25)}
.lb-zoom{position:absolute;top:16px;right:72px;background:rgba(255,255,255,.12);border:none;color:#fff;width:44px;height:44px;border-radius:50%;font-size:26px;line-height:1;cursor:pointer;z-index:3}
.lb-zoom:hover{background:var(--vermelho-marca)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.14);border:none;color:#fff;width:52px;height:52px;border-radius:50%;font-size:30px;cursor:pointer;align-items:center;justify-content:center;z-index:3}
.lb-nav:hover{background:var(--vermelho-marca)}
.lb-esq{left:18px}.lb-dir{right:18px}
.lb-cont{position:absolute;bottom:96px;left:0;right:0;text-align:center;color:#fff;font-size:14px;font-weight:600;pointer-events:none}
.lb-hint{position:absolute;bottom:118px;left:0;right:0;text-align:center;color:rgba(255,255,255,.6);font-size:12px;pointer-events:none}
.lb-thumbs{position:absolute;bottom:14px;left:0;right:0;display:flex;gap:8px;justify-content:center;flex-wrap:nowrap;overflow-x:auto;padding:0 14px}
.lb-thumbs img{width:72px;height:54px;object-fit:cover;border-radius:7px;border:2px solid transparent;opacity:.55;cursor:pointer;flex:0 0 auto;transition:opacity .15s,border-color .15s;box-shadow:none;max-width:none}
.lb-thumbs img.on{border-color:var(--vermelho-marca);opacity:1}
.lb-thumbs img:hover{opacity:1}
@media(max-width:620px){ .lb-nav{width:44px;height:44px;font-size:26px} .lb-x{top:10px;right:12px} .lb-zoom{top:10px;right:62px} .lb-hint{display:none} .lb-thumbs img{width:58px;height:44px} .lb-cont{bottom:78px} .lightbox img{max-height:78vh} }
/* ===================== MODAL DE LOGIN ===================== */
.modal-login-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:70;display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto}
.modal-login-overlay.oculto{display:none}
.modal-login-inner{position:relative;width:760px;max-width:100%}
.fechar-login{position:absolute;top:-16px;right:-16px;background:#fff;border:1px solid var(--borda);width:40px;height:40px;border-radius:50%;font-size:24px;line-height:1;cursor:pointer;z-index:100;box-shadow:0 2px 10px rgba(0,0,0,.3)}
@media(max-width:820px){ .fechar-login{top:6px;right:6px} }
/* ===================== PAINEL ADMIN ===================== */
/* Painel admin usa a tela quase toda (tabelas largas sem rolagem lateral) */
.btn-sair{background:#fff;border:1.5px solid var(--borda);border-radius:8px;padding:8px 16px;font-size:13.5px;font-weight:600;cursor:pointer;color:var(--texto);margin-left:8px}
a.btn-sair{display:inline-block;text-decoration:none}
/* Mini-menu lateral (estilo EVO): aparece só quando logado */
.menu-lateral{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:45;background:#12152a;border:1px solid #262a52;border-right:none;border-radius:14px 0 0 14px;box-shadow:-4px 2px 18px rgba(0,0,0,.4);padding:8px;display:flex;flex-direction:column;gap:4px}
.menu-lateral a{display:flex;align-items:center;gap:12px;padding:12px 16px 12px 13px;border-radius:10px;color:#d6d8ee;text-decoration:none;font-size:14.5px;font-weight:600;white-space:nowrap;transition:background .15s,color .15s}
.menu-lateral a:hover{background:#1e2246;color:#fff}
.menu-lateral .mi{font-size:20px;line-height:1;width:22px;text-align:center}
.menu-lateral{display:none !important}
body.logado .secao, body.logado #painelAdmin{padding-right:0}
/* "Onde Estamos" e "Cadastrar Galpão" agora no topo, idênticas às outras abas. */
/* ===================== MASCOTE (widget flutuante -> WhatsApp) ===================== */
/* --- Mascote arrastável --- (sobra de regra sem seletor removida em 24/09/2026: ela anulava o .btn-sair:hover logo abaixo) */
.btn-sair:hover{border-color:var(--vermelho-marca);color:var(--vermelho-marca)}
.btn-sair:disabled{opacity:.6;cursor:wait}
.tag-status{display:inline-block;font-size:12px;font-weight:700;padding:2px 10px;border-radius:20px}
.tag-status.ok{background:#e8f6ee;color:var(--verde)}
.tag-status.no{background:#fdeaea;color:#c0392b}
.tag-status.pend{background:#fff6e0;color:#a6791a}
.sub-cel{font-size:11.5px;color:var(--cinza)}
/* Galeria editável de fotos (admin) */
/* Galpões (admin) */
.btn-salvar{background:var(--preto);color:#fff;font-weight:700;font-size:14px;border:none;border-radius:8px;padding:11px 26px;cursor:pointer;transition:background .15s}
.btn-salvar:hover{background:var(--vermelho-marca)}
.btn-salvar:disabled{background:#8a8a8a;cursor:wait}
.feedback{font-size:13.5px;font-weight:600}
.feedback.ok{color:var(--verde)}
.feedback.erro{color:var(--vermelho-marca)}
/* ==================================================================
TEMA CLARO: fundo branco/claro, detalhes no laranja do logo (#FB3404).
================================================================== */
:root{ --vermelho-marca:#FB3404; --vermelho-hover:#e22d02; }
/* Logo no selo laranja da navbar (marca branca dentro) */
.nav-brand .badge{ padding:5px }
.nav-brand .badge img{ width:100%; height:100%; object-fit:contain; display:block }
/* Faixa do topo (navbar) laranja, na cor do logo; restante do site claro */
.navbar{ background:var(--vermelho-marca); border-bottom:none; box-shadow:0 3px 14px rgba(0,0,0,.18) }
.nav-brand, .nav-brand .wm-red{ color:#fff }
.nav-brand .badge{ background:transparent; padding:0 }
.nav-brand .badge img{ height:34px; width:auto }
.nav-links a{ color:#fff }
.nav-links a:hover{ color:#ffdccd }
.nav-links a.ativa{ color:#fff; text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:2px }
.btn-entrar{ background:#fff; color:var(--vermelho-marca) }
.btn-entrar:hover{ background:#f0f0f0 }
.navbar .nav-toggle, .navbar .avatar-btn{ color:#fff }
.navbar .avatar-ini{ background:#fff; color:var(--vermelho-marca) }
@media(max-width:860px){ .nav-links{ background:var(--vermelho-marca) } }
/* ==================================================================
Botões com efeito SPECULAR: base laranja da marca + luz branca que
percorre a borda seguindo o mouse.
================================================================== */
.btn-hero, .btn-oferta, .btn-enviar, .btn-auth,
.btn-sair, .btn-voltar-lote, .btn-copiar, .btn-salvar, .btn-aceitar, .btn-recusar, .fc-btn{
position:relative; overflow:hidden; isolation:isolate;
--mx:50%; --my:0%; --op:0;
border:none !important; border-radius:12px !important;
transition:filter .15s ease !important;
}
/* base laranja (principais e utilitários) */
.btn-hero, .btn-oferta, .btn-enviar, .btn-auth,
.btn-sair, .btn-voltar-lote, .btn-copiar, .btn-salvar{
color:#fff !important;
background:#FB3404 !important;
box-shadow:0 6px 16px rgba(203,42,3,.28), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
/* "Ver maquinários" segue como contorno (secundário), mas com a luz */
.btn-hero.alt{ background:transparent !important; border:2px solid rgba(255,255,255,.55) !important; box-shadow:none !important }
/* Aceitar/Recusar mantêm verde/vermelho e ganham o mesmo efeito */
.btn-aceitar{ color:#fff !important }
.btn-recusar{ color:#fff !important }
/* camada de brilho na superfície (segue o mouse) */
.btn-hero::before, .btn-oferta::before, .btn-enviar::before, .btn-auth::before,
.btn-sair::before, .btn-voltar-lote::before, .btn-copiar::before, .btn-salvar::before, .btn-aceitar::before, .btn-recusar::before, .fc-btn::before{
content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
background:radial-gradient(120px circle at var(--mx) var(--my), rgba(255,255,255,.30), transparent 60%);
opacity:var(--op); transition:opacity .25s;
}
/* brilho mais forte no botão do fornecedor (fica sobre a faixa escura) */
.fc-btn::before{ background:radial-gradient(150px circle at var(--mx) var(--my), rgba(255,255,255,.55), transparent 62%); }
/* luz especular na BORDA (segue o mouse) */
.btn-hero::after, .btn-oferta::after, .btn-enviar::after, .btn-auth::after,
.btn-sair::after, .btn-voltar-lote::after, .btn-copiar::after, .btn-salvar::after, .btn-aceitar::after, .btn-recusar::after, .fc-btn::after{
content:''; position:absolute; inset:0; border-radius:inherit; padding:1.6px; pointer-events:none;
background:radial-gradient(130px circle at var(--mx) var(--my), #fff, rgba(255,255,255,.25) 38%, transparent 60%);
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor; mask-composite:exclude;
}
.btn-hero:hover, .btn-oferta:hover, .btn-enviar:hover, .btn-auth:hover,
.btn-sair:hover, .btn-voltar-lote:hover, .btn-copiar:hover, .btn-salvar:hover, .btn-aceitar:hover, .btn-recusar:hover, .fc-btn:hover{ filter:brightness(1.07) }
.btn-oferta:disabled, .btn-enviar:disabled, .btn-auth:disabled{ filter:grayscale(.4) brightness(.82); box-shadow:none !important }
/* ===================== BAENA LOADER (tela de carregamento) ===================== */
#baena-loader{position:fixed;inset:0;z-index:99999;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;
background:radial-gradient(900px 520px at 50% 46%, rgba(244,52,13,.20), transparent 66%),
linear-gradient(180deg,#100A08 0%,#0D0D0D 60%,#070707 100%);
transition:opacity .6s ease, visibility .6s ease;color:#fff}
#baena-loader.bl-done{opacity:0;visibility:hidden;pointer-events:none}
html.bl-loading, body.bl-loading{overflow:hidden !important}
#baena-loader::before{content:"";position:absolute;inset:0;
background-image:linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px);
background-size:72px 72px;
-webkit-mask-image:radial-gradient(circle at 50% 48%,#000 18%,transparent 76%);
mask-image:radial-gradient(circle at 50% 48%,#000 18%,transparent 76%)}
.bl-brand{position:relative;display:flex;align-items:center;gap:12px;margin-bottom:100px}
.bl-brand img{width:46px;height:auto;display:block}
.bl-brand .bl-wm{line-height:1.05;font-weight:800;font-size:18px;letter-spacing:.4px}
.bl-brand .bl-wm i{font-style:normal;color:var(--vermelho-marca);display:block}
.bl-stage{position:relative;width:min(620px,88vw)}
.bl-track{position:relative;height:12px;border-radius:99px;background:#1B1716;border:1px solid #2C2523}
.bl-fill{position:absolute;left:0;top:0;bottom:0;width:0%;border-radius:99px;
background:linear-gradient(90deg,#7C2410,#FF3B1F 68%,#FF7A4D);
box-shadow:0 0 22px rgba(255,59,31,.55)}
.bl-fill::after{content:"";position:absolute;right:-3px;top:50%;transform:translateY(-50%);width:16px;height:16px;border-radius:50%;background:#FF8A5A;filter:blur(7px)}
.bl-meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:30px;font-size:13px;color:#B9B2B0}
.bl-pct{color:#fff;font-weight:800;font-size:23px;letter-spacing:-.5px}
.bl-msg{text-align:right}
.bl-hint{position:absolute;bottom:32px;left:0;right:0;text-align:center;font-size:11px;letter-spacing:2.4px;color:#6A5F5C}
@media (prefers-reduced-motion: reduce){ .bl-fill{transition:none} }
/* Toast (aviso não bloqueante, substitui os alert() nativos) */
#toastArea{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:99999;display:flex;flex-direction:column;gap:10px;align-items:center;width:calc(100% - 32px);max-width:440px;pointer-events:none}
.toast{pointer-events:auto;width:100%;background:#12152a;color:#fff;border-radius:12px;padding:13px 16px;font-size:14.5px;line-height:1.45;box-shadow:0 10px 34px rgba(0,0,0,.28);border-left:5px solid #6b7280;display:flex;align-items:flex-start;gap:10px;opacity:0;transform:translateY(14px);transition:opacity .22s ease,transform .22s ease}
.toast.mostra{opacity:1;transform:translateY(0)}
.toast.ok{border-left-color:#16a34a}
.toast.erro{border-left-color:#e11d48}
.toast .toast-ic{flex:none;font-weight:800;line-height:1.4}
.toast .toast-x{margin-left:auto;flex:none;background:none;border:none;color:#c9ccdf;font-size:18px;line-height:1;cursor:pointer;padding:0 2px}
.toast .toast-x:hover{color:#fff}
@media (prefers-reduced-motion: reduce){ .toast{transition:none} }
/* =====================================================================
TEMA COMERCIAL (preto + laranja + Poppins) — camada por cima do tema
claro. É reversível: basta remover este bloco para voltar ao laranja.
===================================================================== */
body{ font-family:'Poppins','Segoe UI',Roboto,Helvetica,Arial,sans-serif }
/* Barra de navegação do topo: preta */
body:not(.admin-mode) .sidebar{ background:#000 !important; border-bottom:1px solid #1b1b1b !important; box-shadow:0 2px 12px rgba(0,0,0,.28) !important; }
.side-item{ color:#e9e9e9 !important; border-radius:6px !important; }
.side-item:hover{ background:#191919 !important; color:var(--vermelho-marca) !important; }
.side-item.ativa{ background:var(--vermelho-marca) !important; color:#fff !important; box-shadow:none !important; }
.sb-name, .sb-name .wm-red{ color:#fff !important; }
.mobile-topbar{ background:#000 !important; border-bottom:1px solid #1b1b1b !important; }
.mobile-topbar .mt-name, .mobile-topbar .mt-name .wm-red, .mobile-topbar .hamb{ color:#fff !important; }
/* Faixa institucional e busca: pretas, para um topo unificado (estilo do HTML) */
.faixa-abas{ background:#0d0d12 !important; }
.busca-band{ background:#0d0d12 !important; }
/* Cantos mais retos + botões pretos (laranja no hover) — cara de marketplace */
.lote-sato{ border-radius:12px !important; }
.ls-ver{ background:#000 !important; border-radius:9px !important; }
.ls-ver:hover{ background:var(--vermelho-marca) !important; }
.busca-btn{ border-radius:6px !important; }
.filtro-modo button{ border-radius:8px !important; }
.filtro-modo button.on{ background:#000 !important; border-color:#000 !important; color:#fff !important; }
.filtro-modo button.on .fm-num{ background:rgba(255,255,255,.24) !important; }
.cat-tab.on{ background:#000 !important; border-color:#000 !important; }
.sec-titulo{ letter-spacing:-.5px }
/* Página do lote aberto: botão de oferta/lance preto (laranja no hover) */
.lote-cta{ background:#000 !important; border-radius:8px !important; box-shadow:0 8px 22px rgba(0,0,0,.28) !important; }
.lote-cta:hover{ background:var(--vermelho-marca) !important; }
.lote-cta:disabled{ background:#c7ccd3 !important; box-shadow:none !important; }
/* Telas institucionais: título vira uma faixa escura de destaque (estilo hero) */
.sec-inst > .sec-titulo{
width:calc(100vw - var(--sb)); margin-left:calc(50% - (100vw - var(--sb))/2); margin-right:0;
background:linear-gradient(100deg,#0d0d12 0%,#17171f 60%,#241017 100%); color:#fff !important;
padding:30px clamp(16px,5vw,64px) 26px; margin-top:0; margin-bottom:20px; letter-spacing:-.5px;
}
.sec-inst > .sec-sub{ margin-top:-12px; }
/* Cabeçalho dos painéis (admin / fornecedor / comprador): faixa escura, conteúdo segue claro */
/* Linha de dados do card ("A partir de", "Encerramento", "Quantidade"):
o valor não podia encolher (flex:none) e, com texto longo, escapava pela
borda direita do card. Agora ele encolhe, quebra a linha e para em duas. */
.mo-row>b{flex:1 1 auto;min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.35;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mo-row:first-child>b{display:block;white-space:nowrap;overflow:visible}
/* o rótulo da esquerda ("Quantidade") não encolhe: quem quebra é o valor */
.mo-row>span{flex:none;max-width:45%}
/* Barra de filtros no celular: os dois campos de preço têm largura mínima
própria do navegador (~217px cada). Somados, passavam da largura da tela e
empurravam a barra para fora. min-width:0 deixa os dois encolherem. */
.fb-item,.fb-preco{min-width:0}
.fb-preco-row{min-width:0;flex-wrap:wrap}
.fb-preco-row>input{min-width:0}
/* Contagem regressiva do card: os dígitos rolam numa coluna recortada em 1em.
Como o desenho do número ocupa um tiquinho a mais que isso, aparecia uma
sombra do número seguinte embaixo — parecia texto sobreposto. Os véus de
topo e base já existiam, só faltava dizer a eles qual é a cor de fundo. */
.relogio .rolo{--rolo-bg:#f1f3f5}
.relogio.urgente .rolo{--rolo-bg:#ffe9e5}
.relogio.fechado .rolo{--rolo-bg:#efefef}
.relogio .rolo::before,.relogio .rolo::after{height:.13em}
/* =====================================================================
MENOS PRETO, MAIS LARANJA (29/09/2026, pedido do Gabriel).
O bloco "TEMA COMERCIAL" acima pintou de preto o topo, a faixa, o
cabecalho do card, o botao do card e o rodape. Esta camada desfaz so
essas cinco superficies. Nao apaga o bloco de cima de proposito: ele
tambem define a fonte, os cantos e coisas que continuam valendo.
Criterio: laranja nas superficies de MARCA (topo e rodape) e na ACAO
(botao do card). O cabecalho do card fica CLARO, nao laranja, porque
ele se repete dezenas de vezes por tela — uma parede de laranja cansa
tanto quanto uma de preto, e a foto do lote e que tem de chamar.
===================================================================== */
/* 1 e 2. Topo e faixa institucional: o laranja da marca */
body:not(.admin-mode) .sidebar{ background:var(--vermelho-marca) !important; border-bottom:none !important;
box-shadow:0 2px 12px rgba(0,0,0,.14) !important; }
body:not(.admin-mode) .side-item{ color:#fff !important; }
body:not(.admin-mode) .side-item:hover{ background:rgba(255,255,255,.16) !important; color:#fff !important; }
body:not(.admin-mode) .side-item.ativa{ background:#fff !important; color:var(--vermelho-marca) !important; }
body:not(.admin-mode) .sb-name, body:not(.admin-mode) .sb-name .wm-red{ color:#fff !important; }
body:not(.admin-mode) .mobile-topbar{ background:var(--vermelho-marca) !important; border-bottom:none !important; }
body:not(.admin-mode) .faixa-abas{ background:var(--vermelho-hover, #d92e14) !important; }
body:not(.admin-mode) .busca-band{ background:var(--vermelho-hover, #d92e14) !important; }
/* 3. Cabecalho do card: claro, com o titulo em preto sobre branco */
.mo-head{ background:#fff !important; color:var(--texto) !important; border-bottom:1px solid var(--borda) !important; }
.mo-titulo{ color:var(--preto) !important; }
.mo-sub{ color:var(--cinza) !important; }
/* 4. Botao do card: laranja sempre, e nao so quando passa o mouse */
.mo-cta{ background:var(--vermelho-marca) !important; color:#fff !important; }
.mo-cta:hover{ background:var(--vermelho-hover, #d92e14) !important; }
.mo-cta .mo-cta-ic{ color:#fff !important; }
.mo-cta.fech{ background:#c7ccd3 !important; }
.mo-cta.cond{ background:#F5B301 !important; color:#3d2a00 !important; }
.mo-cta.cond .mo-cta-ic{ color:#7a5300 !important; }
/* 5. Rodape: continua PRETO, por decisao do Gabriel (30/09). A unica coisa
que mexo aqui e o contraste da linha do copyright, que estava apagada
demais para ler. */
.site-footer .ft-bar, .site-footer .ft-bar span{ color:#b6b4b1 !important; }
/* =====================================================================
TOM MAIS ESCURO E MENOS GRITADO (30/09/2026, 2a rodada do Gabriel:
"uma cor menos chamativa, mais clean e basica, com o nosso laranja
padrao num tom mais escuro").
O #FF3B1F continua sendo a cor da marca e segue nos detalhes. Nas
SUPERFICIES GRANDES — topo, faixa, rodape e o botao que se repete em
todo card — entra o tom escuro. Superficie grande com cor saturada
cansa a vista e rouba atencao da foto do lote, que e o que vende.
===================================================================== */
:root{ --laranja-escuro:#C42D14; --laranja-mais-escuro:#A82510; --azul-breve:#1a5fb4; }
body:not(.admin-mode) .sidebar{ background:var(--laranja-escuro) !important; }
body:not(.admin-mode) .mobile-topbar{ background:var(--laranja-escuro) !important; }
body:not(.admin-mode) .faixa-abas{ background:var(--laranja-mais-escuro) !important; }
body:not(.admin-mode) .busca-band{ background:var(--laranja-mais-escuro) !important; }
body:not(.admin-mode) .side-item.ativa{ background:#fff !important; color:var(--laranja-escuro) !important; }
/* LOGO BRANCA NO TOPO (01/10/2026). A marca e laranja e o topo virou
laranja: ela sumiu dentro do proprio fundo. O filtro pinta de branco
qualquer pixel opaco da imagem, mantendo o recorte transparente — assim
nao precisa de um segundo arquivo de logo so para esta situacao.
Fica de fora o painel de admin, onde o topo e claro: la a logo branca
sumiria do mesmo jeito, pelo motivo oposto. */
body:not(.admin-mode) .sb-logo,
body:not(.admin-mode) .mt-logo{ filter:brightness(0) invert(1); }
/* O RODAPE FICA PRETO (30/09/2026). Eu tinha deixado laranja junto com o
topo, achando que um claro e outro escuro ficaria desalinhado. O Gabriel
vetou: "pode manter o preto ali, ficou mto chamativo". Ele tem razao —
o rodape e a maior superficie continua da pagina, e laranja ali puxa o
olho para o fim do site em vez de para os lotes. */
/* Botao do card: o mesmo tom escuro. E quando o lote AINDA NAO ABRIU, ele
fica AZUL, igual a faixa "EM BREVE" do topo do card — pedido do Gabriel,
e faz sentido: botao laranja convida a ofertar num lote que nao aceita
oferta ainda, o que so gera clique frustrado. */
.mo-cta{ background:var(--laranja-escuro) !important; }
.mo-cta:hover{ background:var(--laranja-mais-escuro) !important; }
.mo-cta.abre{ background:var(--azul-breve) !important; color:#fff !important; cursor:pointer; }
.mo-cta.abre:hover{ background:#164f96 !important; }
.mo-cta.abre .mo-cta-ic{ color:#fff !important; }
.lote-cta{ background:var(--laranja-escuro) !important; box-shadow:0 8px 22px rgba(196,45,20,.26) !important; }
.lote-cta:hover{ background:var(--laranja-mais-escuro) !important; }
/* 6. Resto do preto, visto no print do Gabriel de 30/09: a faixa do aviso da
taxa, os chips de filtro ligados e o botao grande do lote. */
.aviso-comissao{ background:#fff4f1 !important; color:var(--texto) !important;
border-top:1px solid #ffd9d0 !important; border-bottom:1px solid #ffd9d0 !important; }
.aviso-comissao strong{ color:var(--vermelho-marca) !important; }
.cat-tab.on{ background:var(--vermelho-marca) !important; border-color:var(--vermelho-marca) !important; color:#fff !important; }
.cat-bar button.on{ background:var(--vermelho-marca) !important; border-color:var(--vermelho-marca) !important; color:#fff !important; }
.filtro-modo button.on{ background:var(--vermelho-marca) !important; border-color:var(--vermelho-marca) !important; color:#fff !important; }
.lote-cta{ background:var(--vermelho-marca) !important; box-shadow:0 8px 22px rgba(255,59,31,.28) !important; }
.lote-cta:hover{ background:var(--vermelho-hover, #d92e14) !important; }
/* =====================================================================
MENOS NEGRITO (30/09/2026, resposta do Gabriel: tirar dos textos,
manter no preco e na contagem). Titulos e rotulos saem de 800 para 600,
que continua sendo mais forte que o texto comum, so nao grita.
O que NAO entra aqui, de proposito: o valor do lote, o "Pregao em" e o
horario da agenda. Sao os tres numeros que fazem a pessoa decidir, e
apagar o destaque deles seria tirar o que o proprio Gabriel pediu para
destacar semana passada.
===================================================================== */
.sec-titulo, .cc-titulo, .ag-cab h2, .mo-titulo, .op-head h2, .grade-tit, .home-tit,
.cat-tab, .filtro-modo button, .cat-bar button,
.site-footer .ft-col h4, .site-footer .ft-col h2.ft-h,
.conf-item b, .busca-btn, .ft-logo{ font-weight:600 !important; }
.mo-sub, .mo-marca-cap, .mo-status, .ag-quando span,
.ls-num b, .ag-nome b{ font-weight:500 !important; }
.fm-num{ font-weight:600 !important; }
/* Fica em negrito de proposito: preco, contagem e hora da agenda. */
.mo-row:first-child > b, .ls-preco b,
.pregao .pg-txt, .ag-falta b, .ag-quando b{ font-weight:700 !important; }
/* ===== RELOGIO DE BRASILIA (30/09/2026) ===== */
.hora-bsb{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;
background:rgba(255,255,255,.16);color:#fff;font-size:13px;line-height:1;white-space:nowrap}
.hora-bsb .hb-num{font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:.3px}
.hora-bsb .hb-rot{font-size:11px;opacity:.85}
.hora-bsb .hb-ponto{width:6px;height:6px;border-radius:50%;background:#7ee08a;flex:none;
animation:hbPulsa 2s ease-in-out infinite}
@keyframes hbPulsa{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){ .hora-bsb .hb-ponto{animation:none} }
.hora-bsb-mob{display:none;margin-left:auto;padding:4px 9px;font-size:12px}
.hora-bsb-mob .hb-num{font-size:12px}
@media(max-width:1100px){ .hora-bsb-mob{display:inline-flex} }
/* No painel de admin o topo fica claro: o relogio precisa de outro contraste. */
/* Categorias da Home em lista (30/09/2026), no lugar dos circulos com icone */
.cat-circulos{display:flex !important;flex-wrap:wrap;gap:8px;justify-content:flex-start}
.cat-lin{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--borda);
border-radius:10px;padding:9px 14px;font:inherit;font-size:14px;color:var(--texto);cursor:pointer;
transition:border-color .15s,color .15s}
.cat-lin:hover{border-color:var(--vermelho-marca);color:var(--vermelho-marca)}
.cat-lin-nome{font-weight:500}
.cat-lin-num{font-size:12px;color:var(--cinza);background:#f3f4f6;border-radius:20px;padding:1px 9px}
@media (max-width:640px){ .cat-lin{padding:8px 12px;font-size:13.5px} }
/* ===== AGENDA DE ENCERRAMENTOS (29/09/2026) ===== */
.agenda{background:#fff;border:1px solid var(--borda);border-radius:14px;box-shadow:var(--sombra);
overflow:hidden;margin:0 0 22px}
.ag-cab{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
padding:16px 20px 12px;border-bottom:1px solid var(--borda)}
.ag-cab h2{margin:0;font-size:19px;font-weight:700;color:var(--preto)}
.ag-cab span{font-size:13px;color:var(--cinza)}
.ag-lista{list-style:none;margin:0;padding:0}
.ag-item{display:grid;grid-template-columns:86px 1fr auto;gap:14px;align-items:center;
padding:12px 20px;border-top:1px solid #f1f2f4;cursor:pointer;transition:background .12s}
.ag-lista .ag-item:first-child{border-top:0}
.ag-item:hover{background:#fafbfc}
.ag-quando{text-align:center;line-height:1.15}
.ag-quando b{display:block;font-size:15px;font-weight:700;color:var(--preto)}
.ag-quando span{display:block;font-size:11.5px;color:var(--cinza);text-transform:uppercase;letter-spacing:.4px}
.ag-hoje .ag-quando b{color:var(--vermelho-marca)}
.ag-nome{min-width:0}
.ag-nome b{display:block;font-size:14.5px;font-weight:600;color:var(--texto);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-nome span{font-size:12.5px;color:var(--cinza)}
.ag-falta{text-align:right;font-size:12.5px;color:var(--cinza);white-space:nowrap}
.ag-falta b{display:block;font-size:13.5px;color:var(--texto)}
.ag-item.ag-urgente .ag-falta b{color:var(--vermelho-marca)}
.ag-vazia{padding:26px 20px;text-align:center;color:var(--cinza);font-size:14px}
@media (max-width:640px){
.ag-item{grid-template-columns:70px 1fr;row-gap:4px;padding:11px 14px}
.ag-falta{grid-column:2;text-align:left}
.ag-cab{padding:14px 14px 10px}
}
/* ===================== MAPA DOS COMPRADORES POR ESTADO =====================
O mapa é um SVG do Brasil desenhado duas vezes: a camada de baixo, um pouco
deslocada e mais escura, faz as vezes de "espessura"; a de cima é o mapa em
si. Junto com a leve inclinação, dá o efeito de relevo sem precisar de
biblioteca 3D nenhuma — e continua leve no celular. */
.mc-resumo{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}
.mc-resumo .mc-kpi{background:#fff;border:1px solid var(--borda);border-radius:12px;padding:12px 16px;min-width:150px}
.mc-resumo .mc-kpi b{display:block;font-size:26px;font-weight:900;letter-spacing:-.5px;color:var(--preto);line-height:1}
.mc-resumo .mc-kpi span{font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--cinza)}
.mc-wrap{display:grid;grid-template-columns:1.55fr 1fr;gap:20px;align-items:start}
.mc-palco{background:linear-gradient(180deg,#fbfbfd 0%,#f2f2f6 100%);border:1px solid var(--borda);
border-radius:18px;padding:14px 10px 10px;overflow:hidden}
.mc-mapa{perspective:1400px}
.mc-svg{width:100%;height:auto;display:block;transform:rotateX(16deg) scale(1.02);transform-origin:50% 42%;
filter:drop-shadow(0 22px 26px rgba(20,21,24,.18))}
.mc-e-base{fill:#c9ccd6;stroke:#c9ccd6;stroke-width:2;transform:translate(0,14px)}
.mc-e{fill:#e7e9ef;stroke:#fff;stroke-width:2.4;cursor:pointer;transition:fill .18s,transform .18s}
.mc-e.n1{fill:#ffd9cf} .mc-e.n2{fill:#ffb59f} .mc-e.n3{fill:#ff8566} .mc-e.n4{fill:var(--vermelho-marca)}
.mc-e:hover{fill:#12152a}
.mc-e.on{fill:#12152a}
.mc-uf{font-size:23px;font-weight:800;fill:#3b3f4a;font-family:inherit;pointer-events:none;paint-order:stroke;
stroke:#fff;stroke-width:3.5px;stroke-linejoin:round}
.mc-uf-centro{text-anchor:middle}
.mc-uf.claro{fill:#fff;stroke:rgba(18,21,42,.55)}
.mc-legenda{justify-content:flex-start}
.mc-guia{stroke:#b9bcc6;stroke-width:1.8}
.mc-ponto{fill:#b9bcc6}
.mc-legenda{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;padding:0 6px 4px;
font-size:11.5px;color:var(--cinza);font-weight:700}
.mc-legenda i{width:22px;height:11px;border-radius:3px;display:inline-block}
.mc-painel{background:#fff;border:1px solid var(--borda);border-radius:16px;padding:16px;min-height:220px;
position:sticky;top:14px;box-shadow:var(--sombra)}
.mc-vazio{color:var(--cinza);font-size:14px;line-height:1.6}
.mc-det-topo{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.mc-det-uf{background:var(--vermelho-marca);color:#fff;font-weight:900;font-size:17px;letter-spacing:.5px;
width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none}
.mc-det-topo b{display:block;font-size:16px;line-height:1.2}
.mc-det-topo span{font-size:12.5px;color:var(--cinza)}
.mc-fechar{margin-left:auto;background:none;border:none;font-size:24px;line-height:1;color:var(--cinza);cursor:pointer;padding:0 4px}
.mc-numerao{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
background:#f7f7f9;border:1px solid var(--borda);border-radius:14px;padding:22px 16px}
.mc-numerao b{font-size:46px;font-weight:900;line-height:1;color:var(--vermelho-marca);font-variant-numeric:tabular-nums}
.mc-numerao span{margin-top:7px;font-size:13px;font-weight:600;color:var(--cinza)}
.mc-nota{margin-top:12px;font-size:11.5px;color:var(--cinza);line-height:1.55;border-top:1px dashed var(--borda);padding-top:10px}
.mc-lista-estados{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.mc-chip{background:#fff;border:1.5px solid var(--borda);border-radius:999px;padding:7px 13px;font-size:12.5px;
font-weight:700;cursor:pointer;font-family:inherit;color:var(--texto)}
.mc-chip:hover{border-color:var(--vermelho-marca);color:var(--vermelho-marca)}
.mc-chip b{color:var(--vermelho-marca)}
.mc-chip.on{background:var(--preto);border-color:var(--preto);color:#fff}
.mc-chip.on b{color:#fff}
@media(max-width:860px){
.mc-wrap{grid-template-columns:1fr}
.mc-painel{position:static}
/* No celular a inclinação é menor: o mapa precisa caber e continuar clicável. */
.mc-svg{transform:rotateX(10deg)}
.mc-uf{font-size:30px;stroke-width:4px}
.mc-resumo .mc-kpi{flex:1 1 44%;min-width:0;padding:11px 12px}
.mc-resumo .mc-kpi b{font-size:22px}
}
/* ===================== PAINEL DE FECHAMENTOS (aba do admin) =====================
Todas as classes começam com "fch-" de propósito: o painel veio de um arquivo
separado, onde os nomes eram genéricos (.top, .kpi, .lin, .chip) e bateriam
de frente com o resto do site. */ /* fecha nas próximas 24h */ /* fecha em 1 hora */ /* prazo vencido */
/* Modo TV: números grandes para deixar aberto numa tela da sala. */
/* =====================================================================
REVISÃO MOBILE DA PÁGINA DO LOTE (set/2026)
Fica no FIM da folha de estilo de propósito: o que estiver aqui vence
as regras antigas, sem precisar mexer nelas uma a uma.
===================================================================== */
@media(max-width:860px){
/* --- 1. ORDEM DA PÁGINA ---------------------------------------------
Antes: foto → ficha inteira → painel de oferta (o botão de ofertar
ficava a cinco telas de distância). Agora: foto → miniaturas →
painel de oferta → ficha do lote. */
/* ATENCAO: no desktop .lote-grid usa align-items:start, que em coluna faz
cada filho encolher para o proprio conteudo em vez de ocupar a largura.
Sem o stretch abaixo, o painel de disputa fica com ~505px dentro de uma
tela de 390px e o conteudo sai cortado pela direita. */
.lote-grid{display:flex;flex-direction:column;gap:14px;align-items:stretch}
.lote-grid > *{min-width:0;max-width:100%}
.lote-galeria{display:contents} /* solta foto/miniaturas/ficha na mesma pilha */
.lote-grid .lg-main{order:1}
.lote-grid .lg-thumbs{order:2;margin-top:0}
.lote-grid .lote-painel{order:3;margin:0;padding:16px 14px}
.lote-grid .lote-ficha{order:4;margin-top:0;padding:16px 14px}
/* --- 2. CATÁLOGO SOME ENQUANTO O LOTE ESTÁ ABERTO --------------------
O detalhe mora dentro da seção do catálogo. Sem isto, abrir um lote
no celular mostra primeiro o título, os filtros e os avisos. */
body.lote-aberto #secCatalogo > .cat-topo,
body.lote-aberto #catTabs,
body.lote-aberto #catFaixa,
body.lote-aberto #avisoComissao,
body.lote-aberto #parceirosFaixa,
body.lote-aberto #filtroArea,
body.lote-aberto #filtroModo,
body.lote-aberto #filtroBar,
body.lote-aberto #carregando{display:none !important}
/* --- 3. MINIATURAS EM FAIXA ROLÁVEL ---------------------------------
Em vez de quebrar em três ou quatro fileiras e empurrar tudo. */
.lg-thumbs{flex-wrap:nowrap;overflow-x:auto;gap:7px;padding-bottom:3px;
-webkit-overflow-scrolling:touch;scrollbar-width:none}
.lg-thumbs::-webkit-scrollbar{display:none}
.lg-thumbs img{flex:0 0 auto;width:66px;height:50px}
/* --- 4. FICHA EM DUAS COLUNAS ---------------------------------------
Uma coluna só deixava a ficha com o dobro da altura à toa. */
.lf-grid{grid-template-columns:1fr 1fr;gap:11px 14px}
.lf-item .v{font-size:13.5px;overflow-wrap:anywhere}
/* --- 5. ESPAÇO PARA A BARRA DE OFERTA + MENU DE BAIXO ---------------- */
body.lote-aberto{padding-bottom:calc(132px + env(safe-area-inset-bottom,0px))}
}
/* --- 6. BARRA FIXA DE OFERTA (só no celular, só dentro do lote) ------- */
.barra-oferta{display:none}
@media(max-width:860px){
.barra-oferta{display:flex;position:fixed;left:0;right:0;z-index:64;
bottom:calc(60px + env(safe-area-inset-bottom,0px));
align-items:center;gap:12px;padding:10px 14px;
background:#fff;border-top:1px solid var(--borda);box-shadow:0 -6px 20px rgba(0,0,0,.12);
transition:transform .22s ease, opacity .22s ease}
.barra-oferta.bo-esconde{transform:translateY(130%);opacity:0;pointer-events:none}
.barra-oferta .bo-val{flex:1;min-width:0;line-height:1.15}
.barra-oferta .bo-val .l{display:block;font-size:9.5px;font-weight:800;letter-spacing:.7px;
text-transform:uppercase;color:var(--cinza)}
.barra-oferta .bo-val .v{display:block;font-size:19px;font-weight:900;color:var(--preto);
letter-spacing:-.4px;overflow-wrap:anywhere}
.barra-oferta button{flex:0 0 auto;max-width:56%;background:var(--vermelho-marca);color:#fff;border:none;
border-radius:11px;padding:13px 18px;font-size:14.5px;font-weight:800;cursor:pointer;
box-shadow:0 6px 16px rgba(255,59,31,.30);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra-oferta button:disabled{background:#c7ccd3;box-shadow:none;cursor:not-allowed}
/* painel do admin / fornecedor / comprador abertos: a barra não se aplica */
body.modal-oferta-aberto .barra-oferta, body:has(.modal-fundo.aberto) .barra-oferta{display:none !important}
/* o menu de baixo some nesses painéis; a barra desce junto */
body.admin-mode .barra-oferta,
body:has(#painelFornecedor:not(.oculto)) .barra-oferta,
body:has(#painelComprador:not(.oculto)) .barra-oferta{display:none}
}
/* --- 7. TEXTOS QUE ESTAVAM CORTADOS ---------------------------------- */
@media(max-width:560px){
/* régua das etapas: os quatro rótulos precisam caber na largura do celular */
.regua-etapa{padding:12px 8px}
.re-passo{padding:0 1px}
.re-cap{padding:0}
.re-cap b{font-size:9.5px;letter-spacing:-.2px;overflow-wrap:anywhere}
.re-cap small{display:none}
.re-bola{width:21px;height:21px;font-size:11px}
.re-passo::before{top:10px}
/* "Lance rápido": a frase quebra em vez de ser cortada */
.pd-rapido .txt{font-size:12px;overflow-wrap:anywhere}
.pd-sec{padding:12px 13px}
.pd-cont{gap:8px 14px}
/* cabeçalho do lote: ações embaixo, sem espremer o número do lote */
.lote-cab{gap:8px}
.lc-acoes{gap:14px}
.lote-titulo{font-size:21px;margin:6px 0 14px}
}
/* --- 8. HOME: banner do topo não corta mais o título nem o botão ------ */
@media(max-width:560px){
/* altura deixa de ser travada em 200px: o slide de texto cresce o quanto
precisar em vez de cortar o título e o botão. O slide de imagem
(patrocínio) continua com teto, para não virar um banner gigante. */
.hero-banner{height:auto;min-height:200px}
.hb-trilho{align-items:stretch}
.hb-slide.hb-banner{min-height:200px}
.hb-slide.hb-banner img{height:auto;max-height:58vw}
.hb-slide{padding:22px 18px 26px;align-items:center}
.hb-slide.hb-banner{padding:0}
.hb-tit{font-size:24px;margin:11px 0 8px}
.hb-sub{font-size:13.5px;margin:0 0 14px}
.hb-cta{width:100%;padding:13px 16px}
.hb-seta{width:36px;height:36px;font-size:21px}
.hb-prev{left:6px}.hb-next{right:6px}
.hb-dots{bottom:8px}
}
/* ============================================================================
REVISÃO DE DESEMPENHO (set/2026)
----------------------------------------------------------------------------
Regras novas criadas na revisão de velocidade da página. Todas são adições:
nenhuma altera o visual que já estava no ar no computador.
========================================================================== */
/* Rodapé da vitrine: o botão "Carregar mais lotes" e a frase "mostrando X de Y".
Antes a vitrine desenhava TODOS os lotes de uma vez; agora desenha 24 por vez,
e é aqui que fica o botão para pedir os próximos. Ocupa a largura toda da
grade para ficar centralizado embaixo dos cards. */
.grade-mais{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;
gap:9px;padding:22px 0 6px}
.grade-mais .gm-conta{font-size:13px;color:#6b7280;font-weight:600}
.btn-carregar-mais{appearance:none;border:1.5px solid var(--borda,#d7dbe0);background:#fff;
color:var(--preto,#222);font:inherit;font-weight:800;font-size:14.5px;
padding:12px 26px;border-radius:999px;cursor:pointer;
transition:background .18s ease,border-color .18s ease,transform .12s ease}
.btn-carregar-mais:hover{background:#f6f6f8;border-color:#b9bfc7}
.btn-carregar-mais:active{transform:translateY(1px)}
.btn-carregar-mais[disabled]{opacity:.55;cursor:default}
/* Mesmo botão, mas dentro das tabelas do painel admin (que agora mostram
100 linhas por vez em vez de despejar centenas de uma só vez). */
/* Efeito de luz que segue o mouse nos botões: em aparelho de toque (celular e
tablet) não existe mouse, então o brilho nunca deveria acender. Aqui ele é
desligado de vez nesses aparelhos — economiza trabalho do celular e evita
o brilho ficar "preso" aceso depois de um toque. */
@media (hover:none){
.btn-hero,.btn-oferta,.btn-enviar,.btn-auth,.btn-sair,.btn-voltar-lote,
.btn-copiar,.btn-salvar,.btn-aceitar,.btn-recusar,.fc-btn,.mq-slot,
.lote-painel,.lote-ficha{--op:0 !important}
}
/* Itens da barra lateral e links que funcionam como botão: agora recebem foco
pelo teclado (Tab). Este contorno só aparece para quem navega por teclado —
quem usa mouse continua vendo exatamente o que via antes. */
.side-item:focus-visible,[role="button"]:focus-visible{
outline:2px solid var(--vermelho-marca,#c8102e);outline-offset:2px;border-radius:6px}
/* =====================================================================
PAINEL EM FORMATO DE SISTEMA (01/10/2026, etapa 1 do PRD)
O menu lateral de 240px saiu. As listas do departamento viram uma BARRA 2
horizontal logo abaixo dos departamentos, e o conteudo passa a usar a
largura inteira da tela. Para voltar atras, basta apagar este bloco e a
linha que move o #abasAdmin no painel.js.
===================================================================== */
/* O rodape do site (logo, institucional, redes) e conteudo para o COMPRADOR.
Dentro do painel ele so ocupava espaco e confundia: o admin via a pagina
publica colada embaixo da lista de lotes. Pedido do Gabriel em 02/10/2026. */
/* ---------------------------------------------------------------------
LARGURA INTEIRA E MESMA MARGEM (02/10/2026, pedido do Gabriel)
O painel herdava do site um max-width:1100px centralizado, entao a barra
de listas comecava na esquerda e a tabela ficava no meio da tela, usando
uns 60%. No painel nada e centralizado: tudo alinha na mesma margem.
--------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
BARRA 2 NO COMPUTADOR: quebra em linha, sem rolagem e sem desbotado.
Acima de 1024px sobra largura; esconder lista atras de rolagem so
atrapalha. No celular ela continua rolando para o lado.
--------------------------------------------------------------------- */
/* Sair discreto: Atualizar e a acao do dia a dia, Sair nao pode estar com o
mesmo peso ao lado dela para ninguem clicar sem querer. */
body:not(.admin-mode) .faixa-abas .fx-acoes{display:none}
.btn-ir-painel{background:#fff;color:#C42D14;border:0;border-radius:9px;padding:8px 13px;font:inherit;font-size:13.5px;font-weight:800;cursor:pointer;white-space:nowrap;margin-right:8px;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.btn-ir-painel:hover{background:#fff3f0}
body:not(.admin-mode) .avatar-menu .am-site{display:none}
/* =====================================================================
FAIXA QUE ROLA PARA O LADO (02/10/2026)
---------------------------------------------------------------------
Uma faixa de abas que rola na horizontal parecia QUEBRADA: a última aba
ficava cortada na borda e nada indicava que dava para rolar. Agora toda
faixa rolável do painel usa a mesma regra:
- sobra de espaço no fim, para a última aba nunca colar na borda;
- desbotado nas pontas, só do lado em que ainda há conteúdo escondido;
- a aba escolhida é trazida para dentro da vista sozinha.
Para dar isso a uma faixa NOVA, basta a classe gb-rolavel e chamar
gbRolavel(elemento) uma vez. Não precisa escrever CSS de novo.
===================================================================== */
.gb-rolavel{scroll-behavior:smooth}
.gb-rolavel.tem-dir{
-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent 100%);
mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent 100%)}
.gb-rolavel.tem-esq{
-webkit-mask-image:linear-gradient(to right,transparent 0,#000 26px);
mask-image:linear-gradient(to right,transparent 0,#000 26px)}
.gb-rolavel.tem-esq.tem-dir{
-webkit-mask-image:linear-gradient(to right,transparent 0,#000 26px,#000 calc(100% - 34px),transparent 100%);
mask-image:linear-gradient(to right,transparent 0,#000 26px,#000 calc(100% - 34px),transparent 100%)}
/* relogio de Brasilia na barra 1, ao lado da conta */
/* painel.js carregando */
.gb-painel-carregando{padding:60px 20px;text-align:center;color:var(--cinza,#6c7580);font-size:15px}
.gb-painel-carregando.erro{color:#b3261e;max-width:560px;margin:0 auto;line-height:1.5}