/* ============================================================
   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; }
}


/* ============================================================================
   LEILAO BETIM -- CAMADA INDUSTRIAL
   ----------------------------------------------------------------------------
   Bloco acrescentado no fim do arquivo de proposito: nenhuma linha do CSS
   original acima foi tocada. Para voltar ao layout do molde, basta apagar
   deste comentario ate o fim do arquivo.

   As variaveis abaixo REDEFINEM as do :root la em cima, mantendo os mesmos
   nomes. Por isso as 30 secoes do arquivo (formularios, tabelas, minha conta,
   FAQ, contato...) mudam de aparencia sozinhas, sem precisar reescrever
   nenhuma delas.

   Paleta amostrada dos pixels de logo.png: preto #000000 e laranja #FF751F.
   ============================================================================ */

:root{
    /* ---------- marca (do logo) ---------- */
    --cl-primary:#171614;          /* grafite: topo, hero, rodape */
    --cl-primary-rgb:23,22,20;
    --cl-primary-dark:#0E0D0C;
    --cl-primary-light:#F2EEE9;

    --cl-accent:#FF751F;           /* laranja do logo -- so em preenchimento */
    --cl-accent-rgb:255,117,31;
    --cl-accent-dark:#D95A0F;      /* texto grande sobre fundo claro */

    /* Contraste, o motivo de existirem tres laranjas:
       branco sobre #FF751F da 2.7:1 -- ilegivel. Grafite sobre #FF751F da
       7.8:1, e e a combinacao de placa de sinalizacao. Para texto pequeno
       em fundo claro nem o #D95A0F basta, entao existe o --cl-accent-ink. */
    --cl-accent-ink:#B4460A;

    --cl-gold:#FF751F;             /* sobre fundo escuro o laranja da 6.8:1 */
    --cl-gold-rgb:255,117,31;

    /* ---------- neutros de concreto ----------
       Nao sao cinzas puros: tem desvio quente na direcao do laranja. Cinza
       neutro ao lado de laranja saturado le como sujo. */
    --cl-dark:#0E0D0C;
    --cl-soft:#EAE7E2;
    --cl-white:#FFFFFF;
    --cl-ink:#1A1917;
    --cl-muted:#726D64;
    --cl-border:#D3CDC4;
    --cl-footer-bg:#171614;
    --cl-footer-text:#948E85;

    /* ---------- forma ----------
       Raio quase reto e metade da identidade: o molde usa 10px em tudo, e e
       isso que faz os sites da rede parecerem o mesmo site. */
    --cl-radius:2px;
    --cl-shadow:none;
    --cl-shadow-hover:none;

    --cl-font:'Barlow', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --cl-cond:'Barlow Condensed', 'Barlow', sans-serif;
    --cl-mono:'IBM Plex Mono', ui-monospace, "Courier New", monospace;
}

/* fundo geral de concreto */
body{ background:var(--cl-soft); }

/* ---------------------------------------------- tipografia industrial */
.cl-hero h1, .cl-section-head h2, .cl-step h3, .cl-footer h3,
.cl-lot-content h3, .cl-page-title h1{
    font-family:var(--cl-cond);
    text-transform:uppercase;
    letter-spacing:.01em;
}
.cl-hero h1{ font-weight:800; line-height:.96; font-size:clamp(34px,5.6vw,66px); }
.cl-hero h1 span{ color:var(--cl-gold); }
.cl-eyebrow{
    font-family:var(--cl-mono);
    font-size:11px; letter-spacing:.18em; text-transform:uppercase;
    color:var(--cl-gold);
}

/* numeros em mono com digito de largura fixa: alinham em coluna e passam
   sensacao de instrumento, nao de vitrine */
.cl-lot-price-value, .cl-lot-price-label,
.cl-lot-plate, .cl-lot-prazo, .cl-lotenav-select{
    font-family:var(--cl-mono);
    font-variant-numeric:tabular-nums;
}

/* ---------------------------------------------- faixa de sinalizacao */
.cl-header{ border-bottom:0; background:var(--cl-primary); }
.cl-header::after{
    content:''; display:block; height:5px;
    background:repeating-linear-gradient(-45deg,
        var(--cl-accent) 0 14px, var(--cl-primary) 14px 28px);
}
.cl-nav a, .cl-nav .cl-nav-link{
    font-family:var(--cl-cond);
    font-size:16px; text-transform:uppercase; letter-spacing:.04em;
    color:#CFC9C0; border-radius:0;
}
.cl-nav a:hover, .cl-nav .cl-nav-link:hover{
    color:#ffffff; background:transparent;
    box-shadow:inset 0 -2px 0 var(--cl-accent);
}
.cl-brand-name-mobile{
    color:#ffffff; font-family:var(--cl-cond); text-transform:uppercase;
}
.cl-nav-toggle{ background:transparent; color:#ffffff; border-color:#3A3730; }

/* submenu continua em fundo claro: le melhor com muitos itens */
.cl-submenu li a, .cl-submenu li .cl-nav-link{ color:var(--cl-ink); }

/* ---------------------------------------------- botoes */
.cl-button{
    font-family:var(--cl-cond);
    font-size:17px; font-weight:700;
    letter-spacing:.05em; text-transform:uppercase;
    border-radius:var(--cl-radius);
}
.cl-button:hover{ transform:none; }
.cl-button-primary{
    background:var(--cl-accent); border-color:var(--cl-accent);
    color:var(--cl-primary);
}
.cl-button-primary:hover{
    background:var(--cl-accent-dark); border-color:var(--cl-accent-dark);
    color:#ffffff;
}
.cl-button-outline:hover{ border-color:var(--cl-accent); color:var(--cl-accent-ink); }

/* ---------------------------------------------- hero */
.cl-hero{ background:var(--cl-primary); }
/* trama tecnica discreta -- substitui o padrao do molde */
.cl-hero::before{
    content:'';
    position:absolute; inset:0;
    background-image:
        linear-gradient(#302D28 1px, transparent 1px),
        linear-gradient(90deg, #302D28 1px, transparent 1px);
    background-size:64px 64px;
    opacity:.55;
    z-index:0; pointer-events:none;
}
.cl-hero-search input{
    background:#0E0D0C; color:#ffffff;
    border:1px solid #3A3730;
    border-radius:var(--cl-radius);
}
.cl-hero-search input::placeholder{ color:#6E685F; }
.cl-hero-search input:focus{ border-color:var(--cl-accent); outline:none; }

/* ---------------------------------------------- titulos de secao */
.cl-section-head{
    border-bottom:1px solid var(--cl-border);
    padding-bottom:14px;
}
.cl-section-head::before{
    content:''; display:block;
    width:44px; height:4px;
    background:var(--cl-accent);
    margin-bottom:12px;
}
.cl-section-head h2{ font-size:clamp(24px,3vw,32px); font-weight:800; }
.cl-section-soft{ background:#DEDAD3; }

/* ---------------------------------------------- grade de lotes com fios */
.cl-lot-grid{
    gap:1px;
    background:var(--cl-border);
    border:1px solid var(--cl-border);
}
.cl-lot-card{ border:0; border-radius:0; box-shadow:none; }
.cl-lot-card:hover{
    transform:none;
    box-shadow:inset 0 0 0 2px var(--cl-accent);
}
.cl-lot-content h3{ font-size:21px; font-weight:700; line-height:1.1; }
.cl-lot-image{ background:#22201C; }

/* plaqueta com o numero do lote -- a peca que da o tom de patio */
.cl-lot-plate{
    position:absolute; top:0; left:0;
    display:flex; align-items:center;
    height:30px; padding:0 12px;
    background:var(--cl-accent); color:var(--cl-primary);
    font-size:13px; font-weight:600; letter-spacing:.08em;
    z-index:2;
}
.cl-lot-badge, .cl-lot-badge-location{
    border-radius:var(--cl-radius);
    font-family:var(--cl-mono);
    font-size:10px; letter-spacing:.1em; text-transform:uppercase;
}
.cl-lot-price-label{ font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; }
.cl-lot-price-value{ font-size:19px; font-weight:600; }
.cl-lot-price-value.cl-lot-price-min{ color:var(--cl-accent-dark); }

/* barra de prazo no pe do card */
.cl-lot-prazo{
    display:flex; align-items:center; justify-content:space-between;
    gap:10px;
    margin-top:auto;
    padding:9px 16px;
    background:var(--cl-primary);
    color:#9A948B;
    font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
}
.cl-lot-prazo b{ color:#ffffff; font-weight:600; font-size:13px; }

/* ---------------------------------------------- como participar */
.cl-steps{ gap:1px; background:var(--cl-border); border:1px solid var(--cl-border); }
.cl-step{ background:var(--cl-white); border:0; border-radius:0; }
.cl-step:hover{ transform:none; box-shadow:none; }
.cl-step span{
    display:block;
    width:auto; height:auto;
    border-radius:0;
    background:transparent;
    color:var(--cl-accent-ink);
    font-family:var(--cl-mono);
    font-size:12px; letter-spacing:.14em;
    border-bottom:1px solid var(--cl-border);
    padding-bottom:10px; margin-bottom:14px;
}

/* ---------------------------------------------- rodape */
.cl-footer{ position:relative; }
.cl-footer::before{
    content:''; display:block;
    position:absolute; top:0; left:0; right:0; height:5px;
    background:repeating-linear-gradient(-45deg,
        var(--cl-accent) 0 14px, var(--cl-primary) 14px 28px);
}
.cl-footer h3{ color:#ffffff; font-size:15px; letter-spacing:.08em; }
.cl-footer a:hover{ color:var(--cl-accent); }

/* ---------------------------------------------- formularios e caixas */
.cl-form-label{
    font-family:var(--cl-mono);
    font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
}

/* ---------------------------------------------- navegacao entre lotes */
.cl-lotenav-select{ font-size:12px; }

/* ---------------------------------------------- mobile: preservar o orcamento de altura
   Este bloco existe por uma colisao de cascata: a regra do molde e
   ".cl-hero-content h1" (0,1,1) dentro de @media, e a minha e ".cl-hero h1",
   tambem (0,1,1). Media query nao soma especificidade, entao a minha venceria
   so por vir depois no arquivo -- e o hero voltaria a crescer no celular,
   empurrando os lotes para baixo da rolagem.

   Os tamanhos abaixo sao um pouco maiores que os do molde de proposito: a
   Barlow Condensed e mais estreita que a Inter, entao ocupa menos largura no
   mesmo corpo. A altura da linha caiu para .96, o que compensa o resto. */
@media (max-width:620px){
    .cl-hero h1, .cl-hero-content h1{ font-size:clamp(24px, 6.6vw, 32px); }
    .cl-lot-content h3{ font-size:17px; }
    .cl-section-head h2{ font-size:22px; }
    .cl-section-head{ padding-bottom:10px; }
    .cl-section-head::before{ width:34px; height:3px; margin-bottom:9px; }
    .cl-lot-plate{ height:26px; font-size:12px; padding:0 10px; }
    .cl-lot-prazo{ padding:8px 14px; font-size:11px; }
    .cl-header::after, .cl-footer::before{ height:4px; }
}

/* sombra: o molde usa sombra difusa, que briga com canto reto. Trocada por
   um degrau solido -- some no card, fica so onde separa camada (menu). */
:root{
    --cl-shadow-hover:0 2px 0 rgba(23,22,20,.22);
}

/* ---------------------------------------------- cor do texto do botao
   Defeito pre-existente, herdado do molde: css.css (2017) declara "a:link",
   que e especificidade (0,1,1) porque pseudo-classe conta como classe. Isso
   vence ".cl-button-primary" (0,1,0), e o texto do botao saia #333 em vez da
   cor pedida -- em qualquer botao que seja link, nao botao de formulario.

   Corrigido subindo a especificidade para (0,2,1), sem !important, para nao
   travar ajustes futuros. */
a.cl-button-primary:link,
a.cl-button-primary:visited{ color:var(--cl-primary); }
a.cl-button-primary:hover{ color:#ffffff; }

a.cl-button-green:link,
a.cl-button-green:visited,
a.cl-button-green:hover{ color:#ffffff; }


/* ---------------------------------------------- plaqueta do lote: oculta
   Pedido do cliente em 09/09/2026: esconder a tarja laranja com o numero do
   lote que ficava sobre a foto nos cards.

   Oculta em vez de remover a marcacao de proposito: se ele mudar de ideia,
   basta apagar esta regra e a plaqueta volta, sem precisar mexer no
   z_card.phtml. A marcacao continua no HTML, sem custo visual. */
.cl-lot-plate{ display:none; }