/* ============================================================
   Layout de Leilão — template genérico
   Prefixo cl- em todas as classes para não colidir com CSS legado.
   ============================================================ */

:root{

    /* ==========================================================
       MARCA — e so isto que muda de um cliente para outro.
       Trocar os 6 valores abaixo repinta o site inteiro.
       Os *-rgb precisam ser o mesmo tom em numeros (sem #),
       porque transparencias usam rgba(var(--x-rgb), .12).
       ========================================================== */
    --cl-primary:#022b43;        /* cor dominante: topo, hero, rodape */
    --cl-primary-rgb:2,43,67;
    --cl-primary-dark:#011d2e;   /* hover do primario */
    --cl-primary-light:#eaeff4;  /* fundo suave do primario */
    --cl-accent:#e60015;         /* acao: botoes, links, precos */
    --cl-accent-rgb:230,0,21;
    --cl-accent-dark:#b80011;    /* hover do acento */
    --cl-gold:#ffb81e;           /* destaque SOBRE fundo escuro */
    --cl-gold-rgb:255,184,30;
    --cl-whats:#25d366;          /* verde oficial do WhatsApp -- nao trocar por cor de cliente */
    --cl-whats-dark:#1da851;     /* hover do verde */

    /* Por que duas cores de destaque, e nao so o vermelho:
       o vermelho da 5:1 sobre branco (ok em botao), mas so 2.8:1
       sobre o navy do hero -- ilegivel. O dourado da 8.4:1 sobre o
       navy. Regra: vermelho em fundo claro, dourado em fundo escuro. */

    /* ---------- neutros (raramente mudam) ---------- */
    --cl-dark:#01192b;
    --cl-soft:#f5f7f9;
    --cl-white:#ffffff;
    --cl-ink:#14283a;
    --cl-muted:#5e7386;
    --cl-border:#dfe5ec;
    --cl-footer-bg:#011d2f;
    --cl-footer-text:#8fa5b8;

    /* ---------- semanticas: significado fixo, nao seguem a marca ----------
       Verde = deu certo / lote aberto. Vermelho = erro / encerrado.
       Nao trocar por cor de cliente, senao o usuario perde a leitura. */
    --cl-success:#27ae60;
    --cl-success-bg:#e6f5e9;
    --cl-success-ink:#1b7a2e;
    --cl-warning:#b7791f;
    --cl-warning-bg:#fff3e0;
    --cl-danger:#e74c3c;
    --cl-info-bg:#e3edf7;
    --cl-info-ink:#1f4e79;

    /* ---------- forma ---------- */
    --cl-radius:10px;
    --cl-shadow:0 4px 20px rgba(0,0,0,.06);
    --cl-shadow-hover:0 8px 30px rgba(0,0,0,.12);
    --cl-font:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.cl-scope, .cl-scope *{ box-sizing:border-box; }

.cl-container{
    width:min(1200px, calc(100% - 32px));
    margin:0 auto;
}

/* ---------------------------------------------- botoes */
.cl-button{
    min-height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 22px;
    border-radius:8px;
    border:1px solid transparent;
    font-weight:700;
    font-size:14px;
    line-height:1;
    text-decoration:none;
    transition:.2s ease;
    cursor:pointer;
    font-family:var(--cl-font);
}
.cl-button:hover{ transform:translateY(-1px); text-decoration:none; }

.cl-button-primary{
    color:var(--cl-white);
    background:var(--cl-accent);
    border-color:var(--cl-accent);
    /*background:#ff6c00;
    border-color:#ff6c00;*/
}
.cl-button-primary:hover{ background:var(--cl-accent-dark); color:var(--cl-white); }

.cl-button-outline{
    color:var(--cl-ink);
    border-color:var(--cl-border);
    background:var(--cl-white);
}
.cl-button-outline:hover{ border-color:var(--cl-primary); color:var(--cl-primary); }

.cl-button-green{
    color:var(--cl-white);
    background:var(--cl-primary);
    border-color:var(--cl-primary);
}
.cl-button-green:hover{ background:var(--cl-primary-dark); color:var(--cl-white); }

/* ---------------------------------------------- marca (logo) */
.cl-brand{ flex:0 0 auto; display:flex; align-items:center; text-decoration:none; gap:10px; }
.cl-brand-name-mobile{
    display:none;
    font-family:var(--cl-font);
    font-size:18px; font-weight:800;
    color:var(--cl-primary);
}
@media (max-width:980px){
    .cl-brand-name-mobile{ display:block; }
}
.cl-brand-logo{
    height:60px;
    width:auto;
    display:block;
}
.cl-brand-logo-footer{
    height:50px;
    width:auto;
    display:block;
    margin-bottom:14px;
}
@media (max-width:980px){
    .cl-brand-logo{ height:46px; }
    .cl-brand-logo-footer{ height:40px; }
}

/* ---------------------------------------------- cabecalho */
.cl-header{
    position:sticky; top:0; z-index:500;
    background:var(--cl-white);
    border-bottom:1px solid var(--cl-border);
    font-family:var(--cl-font);
    color:var(--cl-ink);
}
.cl-header-inner{
    min-height:68px;
    display:flex;
    align-items:center;
    gap:28px;
}
.cl-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    margin-left:auto;
    list-style:none;
    margin-block:0;
    padding:0;
}
.cl-nav > li{ position:relative; }
.cl-nav a, .cl-nav .cl-nav-link{
    font-size:13px; font-weight:600; color:var(--cl-ink);
    text-decoration:none; cursor:pointer; white-space:nowrap;
    padding:8px 14px;
    border-radius:6px;
    transition:.15s ease;
}
.cl-nav a:hover, .cl-nav .cl-nav-link:hover{
    color:var(--cl-primary);
    background:var(--cl-primary-light);
    text-decoration:none;
}

.cl-header-actions{ display:flex; gap:8px; align-items:center; }

/* submenu */
.cl-submenu{
    position:absolute; top:100%; left:0;
    min-width:220px;
    margin:6px 0 0;
    padding:6px 0;
    list-style:none;
    background:var(--cl-white);
    border:1px solid var(--cl-border);
    border-radius:var(--cl-radius);
    box-shadow:var(--cl-shadow-hover);
    opacity:0; visibility:hidden;
    transform:translateY(6px);
    transition:.18s ease;
}
.cl-submenu.cl-submenu-right{ left:auto; right:0; }
.cl-has-submenu:hover > .cl-submenu,
.cl-has-submenu:focus-within > .cl-submenu{
    opacity:1; visibility:visible; transform:translateY(0);
}
.cl-submenu li a, .cl-submenu li .cl-nav-link{
    display:block;
    padding:10px 16px;
    font-size:13px; font-weight:600; color:var(--cl-ink);
    border-radius:0;
}
.cl-submenu li a:hover, .cl-submenu li .cl-nav-link:hover{
    background:var(--cl-primary-light); color:var(--cl-primary);
}
.cl-submenu i{ width:16px; margin-right:8px; color:var(--cl-accent); }

/* botao menu mobile */
.cl-nav-toggle{
    display:none;
    margin-left:auto;
    padding:8px 12px;
    border:1px solid var(--cl-border);
    border-radius:8px;
    background:var(--cl-white);
    color:var(--cl-ink);
    font-size:18px;
    cursor:pointer;
}

@media (max-width:980px){
    .cl-header-inner{ flex-wrap:wrap; gap:10px; padding:10px 0; }
    .cl-nav-toggle{ display:block; }
    .cl-nav{
        display:none;
        width:100%;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        margin-left:0;
    }
    .cl-nav.cl-open{ display:flex; }
    .cl-nav > li{ border-top:1px solid var(--cl-border); }
    .cl-nav a, .cl-nav .cl-nav-link{ display:block; padding:14px 4px; border-radius:0; }
    .cl-submenu{
        position:static;
        opacity:1; visibility:visible; transform:none;
        border:0; box-shadow:none; margin:0;
        padding:0 0 8px 16px;
    }
    .cl-header-actions{ width:100%; }
    .cl-header-actions .cl-button{ flex:1; }
}

/* ---------------------------------------------- hero */
.cl-hero{
    position:relative;
    /* sem piso artificial: a altura passa a ser a do conteudo.
       Com as estatisticas removidas isso ja tira ~76px no desktop. */
    min-height:280px;
    display:flex;
    align-items:center;
    color:var(--cl-white);
    background:
        linear-gradient(135deg, var(--cl-primary) 0%, var(--cl-dark) 100%);
    font-family:var(--cl-font);
    overflow:hidden;
}
.cl-hero::before{
    content:'';
    position:absolute; inset:0;
    background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="80" cy="20" r="40" fill="rgba(255,255,255,0.03)"/><circle cx="20" cy="80" r="30" fill="rgba(255,255,255,0.02)"/></svg>');
    background-size:600px;
    pointer-events:none;
}
/* ---------------------------------------------- hero em carrossel
   A altura NAO e fixada aqui de proposito: o primeiro slide (o texto) fica em
   fluxo normal e continua definindo a altura do hero, exatamente como antes.
   Os banners sao sobrepostos e preenchem esse mesmo espaco com object-fit.
   Consequencia: o recorte do banner acompanha a altura do texto -- a arte deve
   manter logo e mensagem no centro, com folga em cima e embaixo. */
.cl-hs{ position:relative; }

.cl-hs-slide{
    position:absolute; inset:0;
    opacity:0;
    pointer-events:none;
    transition:opacity .5s ease;
}
/* o primeiro permanece em fluxo: e a regua da altura */
.cl-hs-slide:first-child{
    position:relative;
    width:100%;
    display:flex; align-items:center;
}
.cl-hs-slide.cl-hs-on{
    opacity:1;
    pointer-events:auto;
    z-index:2;
}
.cl-hs-link{ display:block; width:100%; height:100%; }
.cl-hs-img{
    display:block;
    width:100%; height:100%;
    object-fit:cover;
    object-position:center;
}

.cl-hs-seta{
    position:absolute; top:50%; z-index:4;
    transform:translateY(-50%);
    width:38px; height:38px;
    display:flex; align-items:center; justify-content:center;
    border:0; border-radius:50%;
    background:rgba(255,255,255,.18);
    color:var(--cl-white);
    font-size:15px; cursor:pointer;
    transition:.18s ease;
}
.cl-hs-seta:hover{ background:rgba(255,255,255,.34); }
.cl-hs-ant{ left:16px; }
.cl-hs-prox{ right:16px; }

.cl-hs-pontos{
    position:absolute; z-index:4;
    left:0; right:0; bottom:14px;
    display:flex; justify-content:center; gap:7px;
}
.cl-hs-ponto{
    width:9px; height:9px; padding:0;
    border:0; border-radius:50%;
    background:rgba(255,255,255,.4);
    cursor:pointer;
    transition:.18s ease;
}
.cl-hs-ponto-on{ background:var(--cl-white); width:22px; border-radius:5px; }

@media (max-width:620px){
    .cl-hs-seta{ width:32px; height:32px; font-size:13px; }
    .cl-hs-ant{ left:8px; }
    .cl-hs-prox{ right:8px; }
    .cl-hs-pontos{ bottom:10px; }
}
@media (prefers-reduced-motion:reduce){
    .cl-hs-slide{ transition:none; }
}

.cl-hero-overlay{
    position:absolute; inset:auto 0 0; height:80px;
    background:linear-gradient(transparent, rgba(0,0,0,.1));
    pointer-events:none;
    z-index:3;
}
.cl-hero-content{ position:relative; z-index:2; padding:48px 0; }
.cl-eyebrow{
    margin:0 0 12px;
    color:rgba(255,255,255,.7);
    font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
}
.cl-hero-content h1{
    margin:0;
    font-size:clamp(28px, 3.8vw, 44px);
    line-height:1.15;
    font-weight:800;
    color:#fff;
}
.cl-hero-content h1 span{ color:var(--cl-gold); }
.cl-hero-copy{
    max-width:600px;
    margin:14px 0 0;
    font-size:16px; line-height:1.6; color:rgba(255,255,255,.8);
}

/* busca no hero */
.cl-hero-search{
    display:flex; gap:0;
    max-width:640px; margin:28px 0 0;
    background:var(--cl-white);
    border-radius:var(--cl-radius);
    overflow:hidden;
    box-shadow:0 8px 32px rgba(0,0,0,.15);
}
.cl-hero-search input{
    flex:1;
    /* min-width:0 e obrigatorio: item flex nasce com min-width:auto, e um
       <input> tem largura intrinseca de ~20 caracteres. Sem isto ele se
       recusa a encolher, empurra o botao para fora e o overflow:hidden do
       pai corta o texto "Buscar" no celular. */
    min-width:0;
    min-height:52px;
    padding:0 20px;
    border:0;
    background:transparent;
    color:var(--cl-ink);
    font-size:15px;
    font-family:var(--cl-font);
}
.cl-hero-search input::placeholder{ color:var(--cl-muted); }
.cl-hero-search input:focus{ outline:none; }
.cl-hero-search .cl-button{
    flex-shrink:0;          /* o botao nunca encolhe: quem cede e o input */
    white-space:nowrap;
    min-height:52px;
    border-radius:0;
    padding:0 28px;
    font-size:15px;
}

/* hero no mobile — encolhe para o primeiro lote aparecer sem rolar.
   Orcamento de altura num aparelho de ~650px uteis:
   topo 68 + hero ~250 + barra de categorias ~50 = 368,
   sobrando ~280px de card visivel (imagem + titulo). */
@media (max-width:620px){
    .cl-hero{ min-height:0; }
    .cl-hero-content{ padding:30px 0 28px; }
    .cl-eyebrow{ margin-bottom:8px; font-size:11px; letter-spacing:.12em; }
    .cl-hero-content h1{ font-size:clamp(23px, 6.4vw, 30px); }
    .cl-hero-copy{
        margin-top:10px;
        font-size:14px; line-height:1.5;
        /* corta em 2 linhas: mantem a mensagem sem empurrar os lotes */
        display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
        overflow:hidden;
    }
    .cl-hero-search{ margin-top:18px; }
    .cl-hero-search input{ min-height:46px; padding:0 16px; font-size:14px; }
    .cl-hero-search .cl-button{ min-height:46px; padding:0 18px; font-size:14px; }
    .cl-hero-overlay{ height:40px; }
}

/* telas bem estreitas: o texto de apoio sai de vez */
@media (max-width:380px){
    .cl-hero-content{ padding:24px 0 22px; }
    .cl-hero-copy{ display:none; }
    .cl-hero-search .cl-button{ padding:0 14px; }
}

/* ---------------------------------------------- barra de categorias */
.cl-catbar{
    background:var(--cl-white);
    border-bottom:1px solid var(--cl-border);
    font-family:var(--cl-font);
}
.cl-catbar ul{
    /* "safe center" centraliza quando cabe, mas volta a alinhar a esquerda
       quando estoura -- sem isso os primeiros itens ficam inalcancaveis
       na rolagem horizontal. */
    display:flex; flex-wrap:nowrap; justify-content:safe center; gap:8px;
    list-style:none; margin:0; padding:14px 0;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
}
.cl-catbar ul::-webkit-scrollbar{ display:none; }
.cl-catbar li{ flex:0 0 auto; }
.cl-catbar a{
    display:flex; align-items:center; gap:8px;
    padding:10px 18px;
    border:1px solid var(--cl-border);
    border-radius:50px;
    color:var(--cl-ink);
    background:var(--cl-white);
    text-decoration:none;
    transition:.2s ease;
    white-space:nowrap;
}
.cl-catbar a:hover{
    border-color:var(--cl-primary);
    color:var(--cl-primary);
    background:var(--cl-primary-light);
}
.cl-catbar i{ font-size:16px; color:var(--cl-primary); }
.cl-catbar .cl-cat-name{ font-size:13px; font-weight:600; }
.cl-catbar .cl-cat-count{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:24px; height:24px;
    padding:0 7px;
    border-radius:12px;
    background:var(--cl-primary-light);
    color:var(--cl-primary);
    font-size:11px; font-weight:700;
}

/* compat: spans antigos dentro da catbar */
.cl-catbar span:not(.cl-cat-name):not(.cl-cat-count){
    font-size:13px; font-weight:600;
}

/* categorias no mobile: quebram em linhas em vez de sumirem cortadas na
   lateral. Duas por linha e pilulas compactas, para a quebra custar o
   minimo de altura e os lotes continuarem aparecendo cedo. */
@media (max-width:620px){
    .cl-catbar ul{
        flex-wrap:wrap;
        justify-content:center;
        overflow-x:visible;
        gap:6px;
        padding:10px 0;
    }
    .cl-catbar li{ flex:0 1 calc(50% - 3px); }
    .cl-catbar a{
        justify-content:center;
        gap:6px;
        padding:9px 10px;
    }
    .cl-catbar i{ font-size:14px; }
    .cl-catbar .cl-cat-name{ font-size:12.5px; }
    .cl-catbar .cl-cat-count{
        min-width:20px; height:20px; padding:0 5px; font-size:10px;
    }
}

.cl-banner-strip{ padding:0; }

/* ---------------------------------------------- secoes e grade de lotes */
.cl-section{
    padding:48px 0;
    font-family:var(--cl-font);
}
.cl-section-soft{ background:var(--cl-soft); }
.cl-section-head{ margin:0 0 32px; }
.cl-section-head h2{
    margin:0;
    font-size:clamp(22px,2.6vw,28px);
    font-weight:800;
    color:var(--cl-ink);
}
.cl-section-head p{ margin:6px 0 0; color:var(--cl-muted); font-size:14px; }

.cl-lot-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
    gap:20px;
}

/* no mobile o respiro das secoes cai pela metade: eram 48px acima do
   titulo + 32px abaixo dele, ou seja 80px de vazio antes do primeiro
   card -- caro demais numa tela de celular. */
@media (max-width:620px){
    .cl-section{ padding:26px 0; }
    .cl-section-head{ margin:0 0 18px; }
    .cl-section-head p{ font-size:13px; }
    .cl-lot-grid{ gap:14px; }
}

/* ---------------------------------------------- card de lote */
.cl-lot-card{
    display:flex;
    flex-direction:column;
    background:var(--cl-white);
    border:1px solid var(--cl-border);
    border-radius:var(--cl-radius);
    overflow:hidden;
    box-shadow:var(--cl-shadow);
    color:inherit;
    text-decoration:none;
    transition:.25s ease;
}
.cl-lot-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--cl-shadow-hover);
    color:inherit;
    text-decoration:none;
}

.cl-lot-image{
    position:relative;
    height:200px;
    overflow:hidden;
    background:var(--cl-soft);
}
.cl-lot-image img{
    width:100%; height:100%;
    object-fit:cover; display:block;
    transition:transform .35s ease;
}
.cl-lot-card:hover .cl-lot-image img{ transform:scale(1.05); }

.cl-lot-badge{
    position:absolute; top:10px; left:10px;
    display:inline-flex; align-items:center; gap:4px;
    padding:4px 10px;
    border-radius:4px;
    font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
    color:#fff;
}
.cl-lot-badge-open{ background:var(--cl-success); }
.cl-lot-badge-closed{ background:var(--cl-danger); }
.cl-lot-badge-location{
    position:absolute; top:10px; right:10px;
    background:rgba(0,0,0,.65);
    color:#fff;
    padding:4px 8px;
    border-radius:4px;
    font-size:11px; font-weight:600;
    display:flex; align-items:center; gap:4px;
}
.cl-lot-badge-location i{ font-size:10px; }

.cl-lot-photo-count{
    position:absolute; bottom:10px; right:10px;
    background:rgba(0,0,0,.65);
    color:#fff;
    padding:4px 10px;
    border-radius:4px;
    font-size:11px; font-weight:600;
    display:flex; align-items:center; gap:4px;
}
.cl-lot-photo-count i{ font-size:12px; }

/* status bar abaixo da imagem */
.cl-lot-status-bar{
    display:flex; align-items:center; justify-content:space-between;
    padding:8px 14px;
    background:var(--cl-primary);
    color:#fff;
    font-size:11px; font-weight:700;
}
.cl-lot-status-text{ text-transform:uppercase; letter-spacing:.04em; }
.cl-lot-stats{ display:flex; gap:14px; }
.cl-lot-stats span{ display:flex; align-items:center; gap:4px; }
.cl-lot-stats i{ font-size:12px; opacity:.8; }

/* conteúdo do card */
.cl-lot-content{
    padding:14px 16px 16px;
    flex:1;
    display:flex;
    flex-direction:column;
}
.cl-lot-content h3{
    margin:0 0 10px;
    font-size:14px; font-weight:700; line-height:1.35;
    color:var(--cl-ink);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.cl-lot-details{
    display:flex; gap:12px;
    border-top:1px solid var(--cl-border);
    padding-top:12px;
    margin-top:auto;
}
.cl-lot-details-left{ flex:1; min-width:0; }
.cl-lot-details-left p{
    margin:0 0 5px;
    font-size:11px; color:var(--cl-muted); line-height:1.4;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cl-lot-details-left i{ width:14px; color:var(--cl-primary); font-size:11px; margin-right:4px; }
.cl-lot-details-right{ flex:0 0 auto; text-align:right; }
.cl-lot-price-label{
    margin:0 0 2px;
    font-size:10px; font-weight:700; color:var(--cl-muted);
    text-transform:uppercase;
}
.cl-lot-price-value{
    margin:0 0 8px;
    font-size:16px; font-weight:800; color:var(--cl-primary);
}
.cl-lot-price-min{
    font-size:13px; color:var(--cl-accent);
}

/* card countdown inline */
.cl-lot-countdown{
    display:flex; align-items:center; gap:6px;
    padding:8px 14px;
    background:var(--cl-soft);
    border-top:1px solid var(--cl-border);
    font-size:11px; color:var(--cl-muted); font-weight:600;
}
.cl-lot-countdown i{ color:var(--cl-accent); font-size:12px; }
.cl-lot-countdown strong{ color:var(--cl-ink); }

/* logo no card (watermark) */
.cl-lot-logo{
    position:absolute; bottom:8px; right:8px;
    width:80px; height:auto;
}
.cl-lot-logo-img{
    max-width:100%; height:auto !important;
    width:auto !important;
    object-fit:contain; display:block;
    opacity:.85;
}

.cl-empty{
    padding:48px; text-align:center;
    border:1px dashed var(--cl-border); border-radius:var(--cl-radius);
    color:var(--cl-muted); background:var(--cl-white);
    font-size:15px;
}

/* ---------------------------------------------- como participar */
.cl-steps{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:20px;
}
.cl-step{
    background:var(--cl-white);
    border:1px solid var(--cl-border);
    border-radius:var(--cl-radius);
    padding:28px 24px;
    text-align:center;
    transition:.2s ease;
}
.cl-step:hover{
    border-color:var(--cl-primary);
    box-shadow:var(--cl-shadow);
}
.cl-step span{
    display:inline-flex; align-items:center; justify-content:center;
    width:48px; height:48px; margin-bottom:16px;
    border-radius:50%;
    background:var(--cl-primary); color:#fff;
    font-weight:800; font-size:18px;
}
.cl-step h3{ margin:0 0 8px; font-size:15px; font-weight:700; color:var(--cl-ink); }
.cl-step p{ margin:0; font-size:13px; line-height:1.6; color:var(--cl-muted); }

/* ---------------------------------------------- rodape */
.cl-footer{
    padding:56px 0 20px;
    color:var(--cl-footer-text);
    background:var(--cl-footer-bg);
    font-family:var(--cl-font);
}
.cl-footer-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1.3fr;
    gap:32px;
}
.cl-footer h3{
    margin:0 0 16px;
    color:var(--cl-white);
    font-size:14px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.cl-footer a, .cl-footer p{
    display:block;
    margin:0 0 10px;
    color:var(--cl-footer-text);
    font-size:13px;
    text-decoration:none;
    line-height:1.5;
}
.cl-footer a:hover{ color:#fff; text-decoration:none; }
.cl-footer button{
    display:block; margin:0 0 10px; padding:0;
    border:0; background:transparent;
    color:var(--cl-footer-text); font-size:13px; cursor:pointer;
    font-family:var(--cl-font);
}
.cl-footer button:hover{ color:#fff; }
.cl-footer ul{ list-style:none; margin:0; padding:0; }

.cl-footer-social{
    display:flex; gap:10px; margin-top:16px;
}
.cl-footer-social a{
    display:inline-flex; align-items:center; justify-content:center;
    width:36px; height:36px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    color:var(--cl-footer-text);
    font-size:14px;
    transition:.2s ease;
    margin:0;
}
.cl-footer-social a:hover{
    background:var(--cl-accent);
    color:#fff;
}

.cl-footer-map{
    margin-top:12px;
    border-radius:var(--cl-radius);
    overflow:hidden;
}
.cl-footer-map iframe{
    display:block;
    width:100%;
    height:180px;
    border:0;
    border-radius:var(--cl-radius);
}

.cl-footer-bottom{
    margin-top:40px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.08);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
}
.cl-footer-bottom p{ margin:0; font-size:12px; }
.cl-footer-bottom img{ max-width:100px; height:auto; }

@media (max-width:980px){
    .cl-footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:620px){
    .cl-footer-grid{ grid-template-columns:1fr; }
}

/* ---------------------------------------------- whatsapp flutuante */
.cl-whats{
    position:fixed;
    bottom:24px; right:24px;
    z-index:1000;
    display:block;
    padding:0;
    line-height:0;
    font-size:0;
    text-decoration:none;
    background:transparent;
    border:0;
    transition:.2s ease;
}
.cl-whats:hover{ transform:translateY(-3px); text-decoration:none; }
.cl-whats-img{ width:56px; height:56px; display:block; }

/* .cl-whats fica definido para quem quiser voltar ao botao direto do WhatsApp
   em algum projeto. Hoje o rodape usa o widget de atendimento abaixo. */

/* ---------------------------------------------- widget de atendimento */
.cl-atend{
    position:fixed;
    bottom:24px; right:24px;
    z-index:1001;
    font-family:var(--cl-font);
    display:flex; flex-direction:column; align-items:flex-end; gap:12px;
    /* O painel fechado usa visibility:hidden, que esconde mas CONTINUA
       ocupando espaco no layout. Sem a linha abaixo, este contêiner vira uma
       caixa invisivel de ~300x400px no canto da tela, engolindo os cliques do
       que estiver embaixo -- foi o que travava a navegacao entre lotes.
       Aqui ele deixa de receber cliques; quem recebe sao o botao e o painel. */
    pointer-events:none;
}
.cl-atend .cl-atend-btn,
.cl-atend .cl-atend-painel{ pointer-events:auto; }

/* botao redondo
   Seletor com .cl-atend na frente de proposito: o widget fica dentro do
   <footer class="cl-footer">, e a regra ".cl-footer button" (linha ~666) tem
   especificidade 0,1,1 -- maior que um ".cl-atend-btn" sozinho (0,1,0). Sem
   isso ela impunha background:transparent e a cor apagada do rodape, e o
   botao aparecia branco. ".cl-atend .cl-atend-btn" da 0,2,0 e vence. */
.cl-atend .cl-atend-btn{
    width:64px; height:64px;
    flex:0 0 auto;
    margin:0;
    padding:0;
    border:0; border-radius:50%;
    background:var(--cl-whats);
    color:var(--cl-white);
    cursor:pointer;
    box-shadow:0 6px 20px rgba(0,0,0,.28);
    transition:.2s ease;
    display:flex; align-items:center; justify-content:center;
}
.cl-atend .cl-atend-btn:hover{
    background:var(--cl-whats-dark);
    color:var(--cl-white);
    transform:translateY(-3px);
}
.cl-atend.cl-open .cl-atend-btn{ background:var(--cl-whats-dark); }

/* o boneco: herda a cor do botao via currentColor, entao fica branco */
.cl-atend-ico{
    width:40px; height:40px;
    display:block;
    color:currentColor;
}

/* painel */
.cl-atend-painel{
    position:relative;
    width:min(300px, calc(100vw - 48px));
    padding:18px 16px 0;
    border-radius:14px;
    background:var(--cl-primary);
    box-shadow:0 12px 40px rgba(0,0,0,.32);
    /* fechado */
    opacity:0; visibility:hidden;
    transform:translateY(12px) scale(.97);
    transform-origin:bottom right;
    transition:opacity .18s ease, transform .18s ease, visibility .18s;
    overflow:hidden;
}
.cl-atend.cl-open .cl-atend-painel{
    opacity:1; visibility:visible;
    transform:translateY(0) scale(1);
}

/* mesma questao de especificidade do botao redondo, ver comentario acima */
.cl-atend .cl-atend-fechar{
    position:absolute; top:8px; right:10px;
    width:26px; height:26px;
    margin:0;
    padding:0;
    border:0; border-radius:50%;
    background:rgba(255,255,255,.14);
    color:var(--cl-white);
    font-size:18px; line-height:1;
    cursor:pointer;
    transition:.15s ease;
    display:flex; align-items:center; justify-content:center;
}
.cl-atend .cl-atend-fechar:hover{
    background:rgba(255,255,255,.28);
    color:var(--cl-white);
}

.cl-atend-opcoes{ display:flex; flex-direction:column; gap:10px; }

.cl-atend-op{
    display:flex; align-items:center; gap:0;
    background:var(--cl-white);
    border-radius:8px;
    overflow:hidden;
    text-decoration:none;
    transition:.15s ease;
}
.cl-atend-op:hover{ transform:translateX(-3px); text-decoration:none; }

.cl-atend-ic{
    flex:0 0 auto;
    width:46px; align-self:stretch;
    display:flex; align-items:center; justify-content:center;
    background:var(--cl-primary-dark);
    color:var(--cl-white);
    font-size:16px;
}
.cl-atend-ic-whats{ background:#25d366; }

.cl-atend-tx{
    flex:1 1 auto; min-width:0;
    padding:9px 12px;
    display:flex; flex-direction:column; gap:1px;
}
.cl-atend-tx strong{
    font-size:13px; font-weight:700; color:var(--cl-ink); line-height:1.25;
}
.cl-atend-tx small{
    font-size:11.5px; color:var(--cl-muted); line-height:1.25;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.cl-atend-horario{
    margin:14px -16px 0;
    padding:9px 16px;
    background:rgba(0,0,0,.18);
    color:rgba(255,255,255,.85);
    font-size:11.5px; line-height:1.4; text-align:center;
}

/* leitor de tela */
.cl-sr{
    position:absolute; width:1px; height:1px;
    padding:0; margin:-1px; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

@media (max-width:620px){
    .cl-atend{ bottom:16px; right:16px; }
}
@media (prefers-reduced-motion:reduce){
    .cl-atend-painel, .cl-atend-btn, .cl-atend-op{ transition:none; }
}

/* ---------------------------------------------- mapa localização (full-width) */
.cl-map-section{ padding:0; }
.cl-map-section-head{
    text-align:center;
    padding:48px 20px 24px;
}
.cl-map-section-head h2{
    font-size:20px; font-weight:800; color:var(--cl-ink);
    margin:0 0 8px; letter-spacing:.08em; text-transform:uppercase;
}
.cl-map-section-head p{
    font-size:14px; color:var(--cl-muted); margin:0;
}
.cl-map-full{ width:100%; line-height:0; }
.cl-map-full iframe{ display:block; width:100%; height:400px; border:0; }
@media(max-width:700px){
    .cl-map-full iframe{ height:280px; }
    .cl-map-section-head{ padding:32px 16px 16px; }
    .cl-map-section-head h2{ font-size:16px; }
}

/* ---------------------------------------------- pagina interna: titulo */
.cl-page-title{
    margin:0 0 8px;
    font-size:22px; font-weight:800; color:var(--cl-ink);
}
.cl-page-title i{ color:var(--cl-accent); margin-right:8px; }
.cl-page-subtitle{
    margin:0 0 28px;
    font-size:13px; color:var(--cl-muted);
}
.cl-page-bar{
    height:3px; width:60px; border-radius:2px;
    background:var(--cl-accent); margin:10px 0 0;
}

/* ---------------------------------------------- formularios */
.cl-form-group{ margin-bottom:20px; }
.cl-form-row{
    display:grid; gap:20px;
    grid-template-columns:1fr 1fr;
}
@media(max-width:600px){ .cl-form-row{ grid-template-columns:1fr; } }

.cl-form-label{
    display:block;
    margin-bottom:5px;
    font-size:12px; font-weight:700; color:var(--cl-ink);
    text-transform:uppercase; letter-spacing:.04em;
}
.cl-form-input,
.cl-form-select,
.cl-form-textarea{
    width:100%;
    padding:11px 14px;
    border:1px solid var(--cl-border);
    border-radius:8px;
    background:var(--cl-white);
    color:var(--cl-ink);
    font-size:14px;
    font-family:inherit;
    transition:.2s ease;
}
.cl-form-input:focus,
.cl-form-select:focus,
.cl-form-textarea:focus{
    outline:none;
    border-color:var(--cl-primary);
    box-shadow:0 0 0 3px rgba(var(--cl-primary-rgb),.12);
}
.cl-form-textarea{ min-height:120px; resize:vertical; }
.cl-form-select{ appearance:none; cursor:pointer; }
.cl-form-hint{ font-size:11px; color:var(--cl-muted); margin-top:4px; }

/* ---------------------------------------------- navegacao entre lotes
   Classes proprias, separadas de .cl-form-select de proposito: aquela regra
   vale para cadastro, contato, minha conta e filtros de busca, e usa
   appearance:none -- o que removia a setinha do dropdown. Espremido entre as
   duas setas, o seletor virava texto solto e ninguem percebia que abria uma
   lista. Aqui a setinha e desenhada de volta. */
.cl-lotenav{
    display:flex; align-items:center; gap:6px;
    font-family:var(--cl-font);
}
.cl-lotenav-select{
    appearance:none;
    padding:8px 30px 8px 12px;
    border:1px solid var(--cl-border);
    border-radius:8px;
    background:var(--cl-white);
    color:var(--cl-ink);
    font-size:13px; font-family:inherit;
    cursor:pointer;
    max-width:100%;
    /* setinha desenhada, ja que o appearance:none tira a nativa */
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235e7386' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 11px center;
    background-size:11px;
    transition:.15s ease;
}
.cl-lotenav-select:hover{ border-color:var(--cl-primary); }
.cl-lotenav-select:focus{
    outline:none;
    border-color:var(--cl-primary);
    box-shadow:0 0 0 3px rgba(var(--cl-primary-rgb),.12);
}

.cl-lotenav-seta{
    flex:0 0 auto;
    display:inline-flex; align-items:center; justify-content:center;
    width:36px; height:36px;
    border:1px solid var(--cl-border);
    border-radius:8px;
    background:var(--cl-white);
    color:var(--cl-ink);
    font-size:14px;
    text-decoration:none;
    transition:.15s ease;
}
.cl-lotenav-seta:hover{
    border-color:var(--cl-primary);
    color:var(--cl-primary);
    text-decoration:none;
}
/* primeiro ou ultimo lote: a seta continua no lugar, apenas apagada */
.cl-lotenav-off{
    opacity:.35;
    cursor:default;
    pointer-events:none;
}

/* ---------------------------------------------- card container (login, cadastro) */
.cl-card{
    background:var(--cl-white);
    border:1px solid var(--cl-border);
    border-radius:12px;
    box-shadow:var(--cl-shadow);
    padding:36px 40px;
}
@media(max-width:500px){ .cl-card{ padding:24px 20px; } }

.cl-card-header{
    text-align:center;
    padding-bottom:20px;
    margin-bottom:24px;
    border-bottom:1px solid var(--cl-border);
}
.cl-card-header h2{
    margin:0; font-size:18px; font-weight:800; color:var(--cl-ink);
}
.cl-card-header i{ color:var(--cl-accent); margin-right:8px; }

.cl-card-sm{ max-width:440px; margin:0 auto; }
.cl-card-md{ max-width:680px; margin:0 auto; }

/* ---------------------------------------------- tabelas */
.cl-table{
    width:100%;
    border-collapse:collapse;
    font-size:13px;
}
.cl-table th{
    padding:12px 16px;
    text-align:left;
    font-size:11px; font-weight:700;
    text-transform:uppercase; letter-spacing:.04em;
    color:var(--cl-white);
    background:var(--cl-primary);
}
.cl-table th:first-child{ border-radius:var(--cl-radius) 0 0 0; }
.cl-table th:last-child{ border-radius:0 var(--cl-radius) 0 0; }
.cl-table td{
    padding:12px 16px;
    border-bottom:1px solid var(--cl-border);
    color:var(--cl-ink);
}
.cl-table tr:nth-child(even) td{ background:var(--cl-soft); }
.cl-table tr:hover td{ background:rgba(var(--cl-primary-rgb),.04); }
.cl-table-empty{
    padding:32px; text-align:center;
    color:var(--cl-muted); font-size:13px;
    border:1px solid var(--cl-border); border-top:0;
    border-radius:0 0 var(--cl-radius) var(--cl-radius);
}

/* ---------------------------------------------- tabs / sidebar (minha conta) */
.cl-account-grid{
    display:grid;
    grid-template-columns:240px 1fr;
    gap:28px;
    align-items:start;
}
@media(max-width:800px){
    .cl-account-grid{ grid-template-columns:1fr; }
}

.cl-sidebar{
    background:var(--cl-white);
    border:1px solid var(--cl-border);
    border-radius:12px;
    overflow:hidden;
    box-shadow:var(--cl-shadow);
}
.cl-sidebar ul{ list-style:none; margin:0; padding:0; }
.cl-sidebar li{ border-bottom:1px solid var(--cl-border); }
.cl-sidebar li:last-child{ border-bottom:0; }
.cl-sidebar a, .cl-sidebar button{
    display:flex; align-items:center; gap:10px;
    width:100%; padding:14px 20px;
    border:0; background:transparent;
    color:var(--cl-ink);
    font-size:13px; font-weight:600;
    text-decoration:none; cursor:pointer;
    transition:.15s ease;
    text-align:left;
}
.cl-sidebar a:hover, .cl-sidebar button:hover{
    background:var(--cl-primary-light); color:var(--cl-primary);
}
.cl-sidebar .cl-sidebar-active{
    background:var(--cl-primary-light);
    color:var(--cl-primary);
    font-weight:700;
    border-left:3px solid var(--cl-primary);
}
.cl-sidebar i{
    width:18px; text-align:center;
    color:var(--cl-primary); font-size:14px;
}

.cl-account-content{
    background:var(--cl-white);
    border:1px solid var(--cl-border);
    border-radius:12px;
    padding:28px 32px;
    box-shadow:var(--cl-shadow);
}
@media(max-width:500px){ .cl-account-content{ padding:20px 16px; } }

/* ---------------------------------------------- badge de status */
.cl-badge{
    display:inline-flex; align-items:center; gap:4px;
    padding:5px 12px;
    border-radius:20px;
    font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
}
.cl-badge-success{ background:var(--cl-success-bg); color:var(--cl-success-ink); }
.cl-badge-warning{ background:var(--cl-warning-bg); color:var(--cl-warning); }
.cl-badge-info{ background:var(--cl-info-bg); color:var(--cl-info-ink); }

/* ---------------------------------------------- dados do usuario */
.cl-user-field{
    display:flex; align-items:center; gap:8px;
    padding:8px 0;
    font-size:14px; color:var(--cl-ink);
}
.cl-user-field i{
    width:20px; text-align:center;
    color:var(--cl-primary); font-size:14px;
}
.cl-user-field b{
    font-weight:700; color:var(--cl-ink);
    min-width:50px;
}

/* ---------------------------------------------- FAQ */
.cl-faq-list{ list-style:none; margin:0; padding:0; }
.cl-faq-item{
    margin-bottom:10px;
    border:1px solid var(--cl-border);
    border-radius:var(--cl-radius);
    overflow:hidden;
    background:var(--cl-white);
    transition:.2s ease;
}
.cl-faq-item:hover{ border-color:var(--cl-primary); }
.cl-faq-toggle{
    display:flex; align-items:center; gap:14px;
    width:100%; padding:18px 20px;
    border:0; background:transparent;
    cursor:pointer; text-align:left;
    font-family:inherit;
}
.cl-faq-num{
    flex:0 0 36px; height:36px;
    display:grid; place-items:center;
    border-radius:50%;
    background:var(--cl-primary); color:#fff;
    font-size:13px; font-weight:800;
}
.cl-faq-question{
    flex:1;
    font-size:14px; font-weight:700; color:var(--cl-ink);
}
.cl-faq-icon{
    flex:0 0 20px;
    font-size:14px; color:var(--cl-accent);
    transition:transform .25s ease;
}
.cl-faq-item.cl-faq-open .cl-faq-icon{ transform:rotate(45deg); }
.cl-faq-body{
    max-height:0; overflow:hidden;
    transition:max-height .3s ease;
}
.cl-faq-body-inner{
    padding:0 20px 20px 70px;
    font-size:13px; line-height:1.7; color:var(--cl-muted);
}

/* ---------------------------------------------- contato */
.cl-contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:32px;
    align-items:start;
}
@media(max-width:700px){ .cl-contact-grid{ grid-template-columns:1fr; } }

.cl-contact-item{
    display:flex; align-items:flex-start; gap:14px;
    margin-bottom:24px;
}
.cl-contact-icon{
    flex:0 0 44px; height:44px;
    display:grid; place-items:center;
    border-radius:50%;
    background:var(--cl-primary-light);
    color:var(--cl-primary); font-size:18px;
}
.cl-contact-item b{
    display:block;
    font-size:13px; font-weight:700; color:var(--cl-ink);
    margin-bottom:2px;
}
.cl-contact-item span{
    font-size:13px; color:var(--cl-muted); line-height:1.5;
}

/* ---------------------------------------------- tabs de tipo (PF/PJ) */
.cl-tab-bar{ display:flex; gap:8px; margin-bottom:24px; }
.cl-tab{
    padding:10px 20px;
    border-radius:8px;
    border:1px solid var(--cl-border);
    background:var(--cl-white);
    color:var(--cl-ink);
    font-size:13px; font-weight:700;
    text-decoration:none;
    transition:.2s ease;
}
.cl-tab:hover{ border-color:var(--cl-primary); color:var(--cl-primary); }
.cl-tab-active{
    background:var(--cl-primary); color:var(--cl-white);
    border-color:var(--cl-primary);
}
.cl-tab-active:hover{ color:var(--cl-white); }

/* ---------------------------------------------- checkbox / termos */
.cl-checkbox-group{
    display:flex; align-items:flex-start; gap:10px;
    margin-bottom:16px;
    font-size:12px; line-height:1.6; color:var(--cl-muted);
}
.cl-checkbox-group input[type="checkbox"]{
    flex:0 0 18px; width:18px; height:18px;
    margin-top:2px;
    accent-color:var(--cl-primary);
}
.cl-checkbox-group a{ color:var(--cl-accent); font-weight:700; }

/* ---------------------------------------------- documento upload (minha conta) */
.cl-upload-card{
    border:1px solid var(--cl-border);
    border-radius:var(--cl-radius);
    padding:20px 24px;
    margin-bottom:16px;
    background:var(--cl-white);
}
.cl-upload-card h4{
    margin:0 0 12px;
    font-size:13px; font-weight:700; color:var(--cl-ink);
    text-transform:uppercase;
}
.cl-upload-actions{
    display:flex; gap:8px; flex-wrap:wrap;
    margin-bottom:12px;
}

/* ---------------------------------------------- lista de lotes (pagina lotes) */
.cl-lot-list-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
    gap:20px;
}

/* ---------------------------------------------- conteudo de texto (quem somos, termos) */
.cl-text-content{
    font-size:15px; line-height:1.8; color:var(--cl-ink);
}
.cl-text-content h1, .cl-text-content h2, .cl-text-content h3{
    color:var(--cl-ink); margin:24px 0 12px;
}
.cl-text-content a{ color:var(--cl-accent); }
.cl-text-content img{ max-width:100%; height:auto; border-radius:var(--cl-radius); }
.cl-text-gallery{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
    gap:16px; margin-top:24px;
}
.cl-text-gallery img{
    width:100%; height:auto;
    border-radius:var(--cl-radius);
    border:1px solid var(--cl-border);
}

/* ---------------------------------------------- link helpers */
.cl-link{ color:var(--cl-accent); font-weight:600; text-decoration:none; }
.cl-link:hover{ text-decoration:underline; }
.cl-text-center{ text-align:center; }
.cl-mt-0{ margin-top:0; }
.cl-mb-0{ margin-bottom:0; }

/* ---------------------------------------------- detalhe do lote */
.cl-lote-main{
    display:grid;
    grid-template-columns:1fr 380px;
    gap:28px;
    align-items:start;
}
@media(max-width:900px){
    .cl-lote-main{ grid-template-columns:1fr; }
}

.cl-lote-gallery{ min-width:0; }
.cl-lote-sidebar{ min-width:0; }

.cl-lote-bid-btn{
    display:flex; align-items:center; justify-content:center;
    padding:10px 8px;
    border:1px solid var(--cl-border);
    border-radius:8px;
    background:var(--cl-primary);
    color:#fff;
    font-size:12px; font-weight:700;
    cursor:pointer;
    transition:.15s ease;
    text-decoration:none;
}
.cl-lote-bid-btn:hover{ background:var(--cl-accent); color:#fff; }
.cl-lote-bid-btn i{ font-size:10px; }

/* cronometro */
.cl-timer-box{
    display:flex; flex-direction:column; align-items:center;
    padding:10px 14px;
    background:var(--cl-soft);
    border:1px solid var(--cl-border);
    border-radius:8px;
    min-width:60px;
}
.cl-timer-box span{
    font-size:24px; font-weight:800; color:var(--cl-accent);
    line-height:1;
}
.cl-timer-box small{
    font-size:9px; font-weight:700; text-transform:uppercase;
    color:var(--cl-muted); margin-top:4px;
}

/* ficha tecnica */
.cl-specs-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
    gap:12px;
}
.cl-spec-item{
    display:flex; align-items:center; gap:12px;
    padding:14px 16px;
    background:var(--cl-white);
    border:1px solid var(--cl-border);
    border-radius:var(--cl-radius);
    font-size:13px;
}
.cl-spec-item i{
    flex:0 0 28px;
    font-size:20px; color:var(--cl-primary);
    text-align:center;
}
.cl-spec-item strong{
    display:block;
    font-size:11px; font-weight:700; color:var(--cl-ink);
    text-transform:uppercase; letter-spacing:.03em;
}
.cl-spec-item span{
    color:var(--cl-muted); font-size:13px;
}

/* ---------------------------------------------- responsivo: grids de formulário */
@media(max-width:600px){
    .cl-scope [style*="grid-template-columns: 1fr 2fr 1fr 1fr"],
    .cl-scope [style*="grid-template-columns:1fr 2fr 1fr 1fr"]{ grid-template-columns:1fr 1fr !important; }
    .cl-scope [style*="grid-template-columns: 1fr 1fr 100px"],
    .cl-scope [style*="grid-template-columns:1fr 1fr 100px"]{ grid-template-columns:1fr !important; }
}