/* ============================================================
   Leorai · Folha de estilo
   ------------------------------------------------------------
   Três regras que valem para tudo:
     1. UMA escala de espaço (--e1..--e6). Nada de valor solto.
     2. UM grid, sempre auto-fill, para nunca sobrar coluna órfã.
     3. UMA base de cartão. O resto herda dela.
   As cores vêm de fora: cada página escreve o :root da
   organização/leilão que está mostrando.
   ============================================================ */

:root{
  /* tipografia fluida: uma variável comanda o tamanho de tudo */
  --u: clamp(17px, 0.75vw + 12.5px, 24px);

  /* escala de espaço — a única fonte de medida do site */
  --e1: .35rem;  --e2: .7rem;   --e3: 1.1rem;
  --e4: 1.7rem;  --e5: 2.6rem;  --e6: 4rem;
  --alt-nav: 4.4rem;   /* altura da barra de baixo no celular */

  /* larguras */
  --larg: 1140px;      /* conteúdo em geral */
  --larg-txt: 640px;   /* formulários e texto corrido */

  /* superfícies */
  --fundo:#F4F6F9; --branco:#fff;
  --linha:#E5E8EE; --linha-forte:#CBD3E0;
  --texto:#0F1B2D; --apagado:#4A5768;

  /* estados */
  --verde:#0A6B42; --verde-esc:#075334; --verde-claro:#E7F4ED;
  --vermelho:#B42318; --vermelho-claro:#FEF3F2;

  /* forma */
  --r:16px; --r-sm:10px; --r-full:999px;
  --sombra:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --sombra-m:0 4px 12px -3px rgba(16,24,40,.10), 0 2px 5px -2px rgba(16,24,40,.05);
  --sombra-g:0 18px 36px -12px rgba(16,24,40,.18), 0 5px 12px -5px rgba(16,24,40,.07);
}
@media (min-width:1500px){ :root{ --u:23px; --larg:1360px } }
@media (min-width:1900px){ :root{ --u:26px; --larg:1560px } }

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
img{max-width:100%;display:block}
body{font:400 var(--u)/1.55 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,
     'Helvetica Neue',Arial,sans-serif;background:var(--fundo);color:var(--texto);
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{letter-spacing:-.02em;line-height:1.2;font-weight:700}
:focus-visible{outline:3px solid var(--cor);outline-offset:2px;border-radius:6px}

/* link de conteúdo. A marca é quase preta, então cor não basta: sublinha. */
a{color:var(--cor);text-decoration:underline;text-underline-offset:.18em;
  text-decoration-thickness:from-font}
a:hover{text-decoration-thickness:2px}

/* ============================================================
   1 · TOPO
   ============================================================ */

/* Barra fina de serviço, acima do cabeçalho: idioma e o que a
   plataforma é. Rola junto com a página — só o header gruda. */
.barraUtil{background:var(--texto);color:rgba(255,255,255,.72);font-size:.72em;line-height:1.4}
.barraUtil .dentro{max-width:var(--larg);margin:0 auto;display:flex;align-items:center;
                   gap:var(--e3);padding:.5em clamp(var(--e3),3vw,var(--e5))}
.barraUtil .lema{margin-right:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:600px){ .barraUtil .lema{display:none} .barraUtil .dentro{justify-content:center} }

.selIdioma{display:flex;align-items:center;gap:.15em;flex-shrink:0}
.selIdioma svg{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.6;
               opacity:.75;margin-right:.3em}
.selIdioma a{color:inherit;text-decoration:none;font-weight:600;letter-spacing:.04em;
             padding:.3em .55em;border-radius:var(--r-sm);min-width:2.6em;text-align:center}
.selIdioma a:hover{color:#fff;background:rgba(255,255,255,.14);text-decoration:none}
.selIdioma a.on{color:var(--texto);background:#fff}

header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);
       backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
       border-bottom:1px solid var(--linha);
       display:flex;align-items:center;gap:var(--e2);
       padding:var(--e2) clamp(var(--e3),3vw,var(--e5))}

.marca{display:flex;align-items:center;gap:var(--e2);min-width:0;flex-shrink:0;
       text-decoration:none;color:var(--texto);font-weight:700;font-size:1.05em;
       letter-spacing:-.02em}
.marca:hover{text-decoration:none}
.marca img{height:2.4em;width:auto;max-width:min(46vw,260px);object-fit:contain}
.marca span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.navTopo{display:flex;gap:var(--e1);margin-left:var(--e3);margin-right:auto}
.navTopo a{padding:.5em .9em;border-radius:var(--r-sm);text-decoration:none;
           color:var(--apagado);font-size:.86em;font-weight:600;white-space:nowrap}
.navTopo a:hover{background:var(--fundo);color:var(--texto);text-decoration:none}
.navTopo a.on{color:var(--texto);background:var(--fundo)}
@media (max-width:820px){ .navTopo{display:none} .marca{margin-right:auto} }

.online{font-size:.76em;font-weight:600;color:var(--verde);background:var(--verde-claro);
        padding:.35em .8em;border-radius:var(--r-full);white-space:nowrap;flex-shrink:0}
.online::before{content:'';display:inline-block;width:.5em;height:.5em;border-radius:50%;
                background:currentColor;margin-right:.45em;vertical-align:.05em}
.euNome{font-size:.82em;color:var(--apagado);white-space:nowrap;overflow:hidden;
        text-overflow:ellipsis;max-width:9em}

.btnTopo{font-size:.82em;font-weight:600;color:var(--apagado);text-decoration:none;
         padding:.55em .9em;border:1px solid var(--linha-forte);border-radius:var(--r-sm);
         white-space:nowrap;background:none;cursor:pointer;font-family:inherit;flex-shrink:0}
.btnTopo:hover{background:var(--fundo);color:var(--texto);text-decoration:none}
.btnTopo.forte{background:var(--cor);color:#fff;border-color:var(--cor)}
.btnTopo.forte:hover{filter:brightness(1.25);color:#fff}
@media (max-width:520px){ .btnTopo{padding:.5em .7em;font-size:.76em} .euNome{display:none} }

/* ============================================================
   2 · ESTRUTURA
   ============================================================ */
.tela{max-width:var(--larg);margin:0 auto;width:100%;
      padding:var(--e4) clamp(var(--e3),3vw,var(--e5)) var(--e6)}
.tela.estreita{max-width:var(--larg-txt)}
.centro{text-align:center}

/* cabeçalho de seção: título e linha de apoio andam juntos */
.tituloSecao{font-size:clamp(1.15em,1.7vw,1.4em);margin:var(--e5) 0 .2em}
.subSecao{font-size:.86em;color:var(--apagado);margin-bottom:var(--e3)}

/* ---- UM cartão. Todo o resto herda daqui. ---- */
.cartao{background:var(--branco);border:1px solid var(--linha);border-radius:var(--r);
        box-shadow:var(--sombra);overflow:hidden;margin-bottom:var(--e3)}
.corpo{padding:clamp(var(--e3),2.2vw,var(--e5))}
.rotulo{font-size:.7em;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
        color:var(--apagado)}
h3.tit{font-size:1em;margin-bottom:var(--e2)}
.dica{font-size:.85em;color:var(--apagado);margin-top:var(--e1);line-height:1.55}

/* ---- UM grid. Um tamanho de coluna por contexto, sempre auto-fill. ---- */
.grade{display:grid;gap:var(--e3);
       grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--col,290px)),1fr))}

/* ============================================================
   3 · FORMULÁRIOS
   ============================================================ */
label{display:block;font-size:.86em;font-weight:600;margin:var(--e3) 0 var(--e1)}
input[type=text],input[type=tel],input[type=number],input[type=password],input[type=email],
input[type=datetime-local],input[type=search],textarea,select{
  width:100%;padding:.75em .9em;font-size:1.02em;font-family:inherit;color:var(--texto);
  background:#fff;border:1px solid var(--linha-forte);border-radius:var(--r-sm);
  transition:border-color .15s, box-shadow .15s}
textarea{min-height:6em;resize:vertical;line-height:1.55}
input::placeholder,textarea::placeholder{color:#9AA4B4}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--cor);
  box-shadow:0 0 0 4px rgba(0,0,0,.06)}
input[type=file]{padding:.6em;background:var(--fundo);border-style:dashed;cursor:pointer}

.botao{display:block;width:100%;padding:.85em 1.1em;font-size:1em;font-weight:700;
       font-family:inherit;line-height:1.3;text-align:center;text-decoration:none;
       color:#fff;background:var(--cor);border:1px solid var(--cor);border-radius:var(--r-sm);
       cursor:pointer;margin-top:var(--e3);box-shadow:var(--sombra);
       transition:filter .15s, transform .06s}
.botao:hover{filter:brightness(1.25);color:#fff;text-decoration:none}
.botao:active{transform:translateY(1px)}
.botao.claro{background:var(--branco);color:var(--texto);border-color:var(--linha-forte);
             box-shadow:none}
.botao.claro:hover{background:var(--fundo);filter:none;color:var(--texto)}

.aviso,.avisoBom{padding:.8em 1em;border-radius:var(--r-sm);margin-top:var(--e2);
                 font-size:.9em;font-weight:600;line-height:1.5;border:1px solid transparent}
.aviso{background:var(--vermelho-claro);color:var(--vermelho);border-color:#FDA29B}
.avisoBom{background:var(--verde-claro);color:var(--verde-esc);border-color:#A6E0C2}

.linha2{display:grid;gap:var(--e3);grid-template-columns:1fr 1fr}
@media (max-width:600px){ .linha2{grid-template-columns:1fr} }

.abasEntrada{display:flex;gap:var(--e1);background:var(--fundo);padding:var(--e1);
             border-radius:var(--r-sm)}
.abaBtn{flex:1;padding:.75em .5em;font-size:.84em;font-weight:600;line-height:1.3;
        border:0;background:transparent;color:var(--apagado);border-radius:8px;
        cursor:pointer;font-family:inherit}
.abaBtn.on{background:var(--branco);color:var(--texto);box-shadow:var(--sombra);font-weight:700}
.linkBtn{display:block;width:100%;margin-top:var(--e2);padding:.6em;background:none;border:0;
         color:var(--cor);font-size:.88em;font-weight:600;cursor:pointer;font-family:inherit;
         text-decoration:underline;text-underline-offset:.18em}
.linkOrg{display:block;text-align:center;margin-top:var(--e1);color:var(--verde);
         font-weight:600;font-size:.88em}

.buscaLinha{position:relative;margin-bottom:var(--e3)}
.buscaLinha input{padding-left:2.7em}
.buscaLinha svg{position:absolute;left:.9em;top:50%;transform:translateY(-50%);
                width:1.1em;height:1.1em;fill:none;stroke:var(--apagado);stroke-width:2;
                pointer-events:none}

/* ============================================================
   4 · O FEED
   ============================================================ */

/* ---- organizações em círculos ---- */
.orgsBar{display:flex;gap:var(--e3);overflow-x:auto;padding:0 0 var(--e4);
         scrollbar-width:none;-webkit-overflow-scrolling:touch}
.orgsBar::-webkit-scrollbar{display:none}
.orgBolha{flex:0 0 auto;width:5em;display:flex;flex-direction:column;align-items:center;
          gap:var(--e1);text-decoration:none}
.orgBolha:hover{text-decoration:none}
.orgBolha .anel{width:4.2em;height:4.2em;border-radius:50%;padding:2px;display:flex;
                background:var(--linha-forte);transition:transform .15s}
.orgBolha:hover .anel{transform:scale(1.05)}
.orgBolha .anel > span{flex:1;border-radius:50%;background:var(--branco);padding:3px;
                       display:flex;align-items:center;justify-content:center;overflow:hidden}
.orgBolha .anel img{width:100%;height:100%;object-fit:contain;border-radius:50%}
.orgBolha .ini{font-weight:700;font-size:.9em;color:var(--apagado);letter-spacing:-.02em}
.orgBolha b{font-size:.66em;font-weight:600;color:var(--texto);text-align:center;
            line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;
            -webkit-box-orient:vertical;word-break:break-word}
.orgBolha.vivo .anel{background:linear-gradient(135deg,var(--vermelho),var(--cor2))}
.orgBolha.on .anel{background:var(--cor)}
.orgBolha.on b{color:var(--cor)}

/* ---- publicação ---- */
.feedGrade{display:grid;gap:var(--e4);
           grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr))}
.post{background:var(--branco);border:1px solid var(--linha);border-radius:var(--r);
      box-shadow:var(--sombra);display:flex;flex-direction:column;overflow:hidden;
      transition:box-shadow .18s, transform .18s}
.post:hover{box-shadow:var(--sombra-m);transform:translateY(-2px)}

.postTopo{display:flex;align-items:center;gap:var(--e2);padding:var(--e2) var(--e3)}
.postTopo .av{width:2em;height:2em;border-radius:50%;object-fit:contain;background:var(--fundo);
              flex-shrink:0;display:flex;align-items:center;justify-content:center;
              font-weight:700;font-size:.72em;color:var(--apagado)}
.postTopo .quem{flex:1;min-width:0;line-height:1.3}
.postTopo .quem a{display:block;font-weight:600;font-size:.82em;color:var(--texto);
                  text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.postTopo .quem a:hover{text-decoration:underline}
.postTopo .quem small{display:block;font-size:.7em;color:var(--apagado);overflow:hidden;
                      text-overflow:ellipsis;white-space:nowrap}

.postFoto{position:relative;display:block;aspect-ratio:1/1;background:#EAEEF4;overflow:hidden}
.postFoto img{width:100%;height:100%;object-fit:cover}
.postFoto .semfoto{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
                   font-size:3em;aspect-ratio:auto;max-height:none;background:#EAEEF4}
.postFoto .tarja{position:absolute;inset:auto 0 0 0;padding:2.6em var(--e3) var(--e2);color:#fff;
                 background:linear-gradient(to top,rgba(0,0,0,.8),transparent);
                 display:flex;align-items:baseline;gap:.45em;
                 font-weight:700;font-size:1.3em;letter-spacing:-.025em;
                 font-variant-numeric:tabular-nums}
.postFoto .tarja small{font-size:.52em;font-weight:600;opacity:.85;letter-spacing:.08em;
                       text-transform:uppercase}

.postAcoes{display:flex;align-items:center;padding:var(--e1) var(--e2) 0}
.icBt{background:none;border:0;padding:.4em;cursor:pointer;line-height:0;border-radius:50%;
      color:var(--texto);font-family:inherit}
.icBt:hover{background:var(--fundo)}
.icBt svg{width:1.5em;height:1.5em;fill:none;stroke:currentColor;stroke-width:1.7;
          stroke-linecap:round;stroke-linejoin:round}
.icBt.salvo{color:var(--vermelho)}
.icBt.salvo svg{fill:currentColor}
.postAcoes .conta{font-size:.74em;color:var(--apagado);margin-left:auto;padding-right:.6em}

.postTexto{padding:var(--e1) var(--e3) var(--e3);display:flex;flex-direction:column;flex:1}
.postTexto h4{font-size:.95em;font-weight:600;line-height:1.35;margin-bottom:.2em}
.postTexto p{font-size:.8em;color:var(--apagado);line-height:1.5;margin-bottom:var(--e2);
             display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.postTexto .quando{font-size:.7em;color:var(--apagado);text-transform:uppercase;
                   letter-spacing:.08em;font-weight:600;margin-top:auto}
.postBt{display:block;margin-top:var(--e2);padding:.7em;text-align:center;font-weight:700;
        font-size:.86em;border-radius:var(--r-sm);background:var(--cor);color:#fff;
        text-decoration:none}
.postBt:hover{filter:brightness(1.25);color:#fff;text-decoration:none}
.postBt.vivo{background:var(--vermelho)}

/* ---- destaque de leilão ao vivo ---- */
.aoVivoCartao{display:flex;gap:var(--e3);align-items:center;flex-wrap:wrap;
              background:var(--branco);border:1px solid var(--vermelho);border-radius:var(--r);
              padding:var(--e3);margin-bottom:var(--e2);box-shadow:var(--sombra-m);
              text-decoration:none;color:var(--texto)}
.aoVivoCartao:hover{box-shadow:var(--sombra-g);text-decoration:none}
.aoVivoCartao .mini{width:4em;height:4em;object-fit:cover;border-radius:var(--r-sm);flex-shrink:0}
.aoVivoCartao .semfoto{width:4em;height:4em;border-radius:var(--r-sm);background:#EAEEF4;
                       display:flex;align-items:center;justify-content:center;font-size:1.6em;
                       flex-shrink:0;aspect-ratio:auto;max-height:none}
.aoVivoCartao .meio{flex:1;min-width:11em}
.aoVivoCartao .valor{font-size:1.5em;font-weight:700;color:var(--verde);white-space:nowrap;
                     font-variant-numeric:tabular-nums;letter-spacing:-.03em;margin-left:auto}

.selo{display:inline-flex;align-items:center;gap:.4em;background:var(--vermelho);color:#fff;
      font-size:.62em;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
      padding:.35em .7em;border-radius:var(--r-full);flex-shrink:0}
.selo .pt{width:.5em;height:.5em;border-radius:50%;background:#fff;animation:pisca 1.6s infinite}
@keyframes pisca{0%,100%{opacity:1}50%{opacity:.3}}
.pisca{animation:pisca 2s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){ .selo .pt,.pisca{animation:none} }

/* ---- cartão de leilão ---- */
.leilaoCartao{background:var(--branco);border:1px solid var(--linha);border-radius:var(--r);
              padding:var(--e3);box-shadow:var(--sombra);text-decoration:none;color:var(--texto);
              display:flex;flex-direction:column;gap:var(--e1)}
.leilaoCartao:hover{box-shadow:var(--sombra-m);text-decoration:none}
.leilaoCartao h4{font-size:1em}
.leilaoCartao .quando{font-size:.8em;color:var(--cor);font-weight:600}
.leilaoCartao .org{font-size:.78em;color:var(--apagado);display:flex;align-items:center;gap:.4em}
.leilaoCartao .org img{height:1.4em;width:auto;max-width:6em;object-fit:contain}

/* ---- item do catálogo ---- */
.item{background:var(--branco);border:1px solid var(--linha);border-radius:var(--r);
      overflow:hidden;box-shadow:var(--sombra);display:flex;flex-direction:column;
      text-decoration:none;color:var(--texto);transition:box-shadow .18s, transform .18s}
.item:hover{box-shadow:var(--sombra-m);transform:translateY(-2px);text-decoration:none}
.item img,.item .semfoto{aspect-ratio:4/3;width:100%;object-fit:cover;font-size:2.4em;
                         background:#EAEEF4;display:flex;align-items:center;
                         justify-content:center;max-height:none}
.item .txt{padding:var(--e3);flex:1;display:flex;flex-direction:column}
.item h4{font-size:.95em;font-weight:600;line-height:1.35;margin-bottom:.2em}
.item p{font-size:.8em;color:var(--apagado);flex:1;margin-bottom:var(--e2);line-height:1.5}
.item .abre{font-size:.68em;color:var(--apagado);text-transform:uppercase;letter-spacing:.09em;
            font-weight:600;border-top:1px solid var(--linha);padding-top:var(--e2)}
.item .abre b{display:block;font-size:1.75em;color:var(--texto);font-weight:700;
              letter-spacing:-.03em;text-transform:none;font-variant-numeric:tabular-nums;
              margin-top:.05em}
.item .deQuem{display:flex;align-items:center;gap:.4em;font-size:.74em;color:var(--apagado);
              margin-bottom:var(--e1);font-weight:600}
.item .deQuem img{height:1.3em;width:auto;max-width:5em;object-fit:contain;aspect-ratio:auto;
                  background:none}

/* ---- chips de filtro ---- */
.filtros{display:flex;gap:var(--e1);flex-wrap:wrap;align-items:center;margin-bottom:var(--e3)}
.chip{display:inline-flex;align-items:center;gap:.4em;padding:.5em .9em;
      border-radius:var(--r-full);background:var(--branco);border:1px solid var(--linha-forte);
      color:var(--apagado);font-size:.82em;font-weight:600;text-decoration:none;white-space:nowrap}
.chip:hover{border-color:var(--cor);color:var(--cor);text-decoration:none}
.chip.on{background:var(--cor);border-color:var(--cor);color:#fff}
.chip img{height:1.2em;width:auto;max-width:4.5em;object-fit:contain;border-radius:3px}
.chip .qt{font-weight:700;opacity:.7}

/* ---- os dois caminhos ---- */
.doisCaminhos{display:grid;gap:var(--e3);
              grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.caminho{background:var(--branco);border:1px solid var(--linha);border-radius:var(--r);
         padding:clamp(var(--e3),2.4vw,var(--e5));box-shadow:var(--sombra);
         display:flex;flex-direction:column;text-align:center}
.caminho.forte{border-color:var(--cor);border-width:2px}
.caminho .ic{font-size:2em;margin-bottom:var(--e1)}
.caminho h3{font-size:1.05em;margin-bottom:.3em}
.caminho p{font-size:.85em;color:var(--apagado);line-height:1.6;flex:1;
           margin:0 auto var(--e3);max-width:26em}
.caminho .botao{margin-top:0}

/* ============================================================
   5 · PÁGINA DO LEILÃO
   ============================================================ */
.hero{border:0;color:#fff;box-shadow:var(--sombra-g);
      background:radial-gradient(120% 130% at 88% -18%, rgba(255,255,255,.15), transparent 58%),
                 linear-gradient(178deg, var(--cor) 0%, var(--cor-esc) 100%)}
.hero .corpo{padding:clamp(var(--e4),3.2vw,var(--e6))}
.hero .rotulo{color:var(--cor2-capa,var(--cor2));display:inline-block;padding-bottom:.5em;
              border-bottom:2px solid var(--cor2-capa,var(--cor2))}
.hero h1{font-size:clamp(1.5em,3vw,2.4em);margin:.55em 0 .2em;letter-spacing:-.03em}
.hero .quando{font-size:.98em;color:rgba(255,255,255,.85);margin-bottom:var(--e4);line-height:1.5}
.contagem{display:flex;gap:var(--e1);text-align:center;max-width:30em}
.contagem div{flex:1;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);
              border-radius:var(--r-sm);padding:.7em .2em}
.contagem b{display:block;font-size:clamp(1.5em,3.2vw,2.3em);font-weight:700;line-height:1.05;
            font-variant-numeric:tabular-nums;letter-spacing:-.04em;
            color:var(--cor2-capa,var(--cor2))}
.contagem span{font-size:.6em;text-transform:uppercase;letter-spacing:.1em;font-weight:600;
               color:rgba(255,255,255,.7)}
.sobre{font-size:.9em;color:rgba(255,255,255,.85);margin-top:var(--e4);white-space:pre-line;
       max-width:44em;line-height:1.6}

.aoVivoBarra{background:var(--vermelho);color:#fff;font-size:.98em;font-weight:700;
             text-align:center;padding:.9em;border-radius:var(--r);margin-bottom:var(--e3);
             box-shadow:var(--sombra-m)}
.aoVivoBarra a{color:#fff}

.aoVivoGrid{display:flex;flex-wrap:wrap;gap:var(--e3);align-items:flex-start}
.aoVivoGrid > #palco{flex:1 1 26em;min-width:0}
.aoVivoGrid > #cartaoHist{flex:1 1 17em;min-width:0;margin-bottom:0}
@media (max-width:900px){ .aoVivoGrid{display:block}
                          .aoVivoGrid > #cartaoHist{margin-bottom:var(--e3)} }

.foto{width:100%;aspect-ratio:16/10;object-fit:cover;background:#EAEEF4;max-height:48vh}
.semfoto{width:100%;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;
         font-size:3.4em;background:#EAEEF4;max-height:48vh}
h2.nomeLote{font-size:clamp(1.25em,2vw,1.75em);margin:.3em 0 .35em}
.desc{font-size:.9em;color:var(--apagado);margin-bottom:var(--e4);white-space:pre-line;
      max-width:44em}
.preco{font-size:clamp(2.2em,5vw,3.4em);font-weight:700;color:var(--texto);line-height:1;
       letter-spacing:-.04em;font-variant-numeric:tabular-nums;margin-top:.05em}

.faixa{margin-top:var(--e3);padding:.75em 1em;border-radius:var(--r-sm);font-size:.92em;
       font-weight:600;display:flex;align-items:center;justify-content:center;gap:.5em;
       border:1px solid transparent;text-align:center;line-height:1.35}
.faixa.ganhando{background:var(--verde-claro);color:var(--verde-esc);border-color:#A6E0C2}
.faixa.coberto{background:var(--vermelho-claro);color:var(--vermelho);border-color:#FDA29B}
.faixa.neutro{background:var(--cor-clara);color:var(--cor-esc);border-color:var(--linha-forte)}

.botaoLance{display:block;width:100%;padding:1.05em .8em;font-size:clamp(1.08em,1.6vw,1.35em);
            font-weight:700;font-family:inherit;line-height:1.3;color:#fff;background:var(--verde);
            border:0;border-radius:var(--r);cursor:pointer;margin-top:var(--e3);min-height:3.3em;
            box-shadow:0 6px 16px -4px rgba(10,107,66,.4);transition:filter .15s, transform .06s}
.botaoLance:hover{filter:brightness(1.1)}
.botaoLance:active{transform:translateY(1px)}
.botaoLance[disabled]{background:#EAEEF4;color:var(--apagado);box-shadow:none;cursor:default;
                      font-size:.92em;font-weight:600;min-height:0;padding:.9em}
.outro{display:block;width:100%;margin-top:var(--e2);padding:.7em;font-size:.88em;font-weight:600;
       font-family:inherit;color:var(--cor);background:transparent;
       border:1px solid var(--linha-forte);border-radius:var(--r-sm);cursor:pointer}
.outro:hover{background:var(--fundo)}
.caixaOutro{display:none;margin-top:var(--e2);gap:var(--e1)}
.caixaOutro.aberta{display:flex}
.caixaOutro input{flex:1;min-width:0}
.caixaOutro button{padding:0 1.2em;font-size:.95em;font-weight:700;font-family:inherit;color:#fff;
                   background:var(--cor);border:0;border-radius:var(--r-sm);cursor:pointer}
.relogio{margin-top:var(--e3);padding:.8em;border-radius:var(--r-sm);text-align:center;
         background:var(--vermelho-claro);color:var(--vermelho);border:1px solid #FDA29B;
         font-size:.8em;font-weight:600;text-transform:uppercase;letter-spacing:.1em}
.relogio b{display:block;font-size:2.6em;line-height:1.05;letter-spacing:-.04em;
           text-transform:none;font-variant-numeric:tabular-nums}

.lance{display:flex;justify-content:space-between;align-items:baseline;gap:var(--e2);
       padding:.6em 0;border-bottom:1px solid var(--linha);font-size:.9em}
.lance:last-child{border-bottom:0}
.lance .quem{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lance .quanto{margin-left:auto;font-weight:700;white-space:nowrap;
               font-variant-numeric:tabular-nums}
.lance .hora{font-size:.78em;color:var(--apagado);white-space:nowrap;min-width:5em;
             text-align:right}
.lance:first-child .quanto{color:var(--verde)}
.lance.eu .quem::after{content:' · você';color:var(--cor);font-weight:700}

/* ---- como funciona ---- */
.passos{display:grid;gap:var(--e2);
        grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.passo{background:var(--branco);border:1px solid var(--linha);border-radius:var(--r);
       padding:var(--e3);box-shadow:var(--sombra);display:flex;gap:var(--e2)}
.passo .n{flex-shrink:0;width:1.8em;height:1.8em;border-radius:50%;background:var(--cor2);
          color:var(--cor2-txt);font-weight:700;font-size:.9em;display:flex;
          align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.passo .t{font-size:.88em;line-height:1.5;padding-top:.2em}

/* ---- perguntas ---- */
.faq{background:var(--branco);border:1px solid var(--linha);border-radius:var(--r);
     overflow:hidden;box-shadow:var(--sombra)}
.faqItem + .faqItem{border-top:1px solid var(--linha)}
.faqP{width:100%;display:flex;align-items:center;gap:var(--e2);text-align:left;
      padding:1em var(--e3);font-size:.92em;font-weight:600;font-family:inherit;line-height:1.4;
      color:var(--texto);background:none;border:0;cursor:pointer}
.faqP:hover{background:var(--fundo)}
.faqP .seta{margin-left:auto;font-size:1.4em;line-height:1;color:var(--apagado);
            font-weight:400;transition:transform .2s;flex-shrink:0}
.faqItem.aberto .faqP{color:var(--cor)}
.faqItem.aberto .faqP .seta{transform:rotate(90deg);color:var(--cor)}
.faqR{display:none;padding:0 var(--e3) var(--e3);font-size:.85em;color:var(--apagado);
      line-height:1.65;white-space:pre-line;max-width:52em}
.faqItem.aberto .faqR{display:block}

/* ---- patrocinadores ---- */
.patros{background:var(--branco);border:1px solid var(--linha);border-radius:var(--r);
        box-shadow:var(--sombra);padding:var(--e4) var(--e3);display:flex;flex-wrap:wrap;
        gap:var(--e4) var(--e5);align-items:center;justify-content:center}
.patro{display:flex;align-items:center;justify-content:center;filter:grayscale(1);opacity:.7;
       transition:filter .2s, opacity .2s}
.patro:hover{filter:grayscale(0);opacity:1}
.patro img{max-height:3em;max-width:min(40vw,200px);width:auto;object-fit:contain}

/* ============================================================
   6 · PERFIL
   ============================================================ */
.perfil{display:flex;gap:var(--e4);align-items:center;flex-wrap:wrap;margin-bottom:var(--e4)}
.perfil .foto{width:6em;height:6em;border-radius:50%;object-fit:contain;background:var(--branco);
              border:1px solid var(--linha);padding:.7em;flex-shrink:0;aspect-ratio:auto;
              max-height:none}
.perfil .foto.ini{display:flex;align-items:center;justify-content:center;font-size:1.4em;
                  font-weight:700;color:var(--apagado);letter-spacing:-.02em}
.perfil .lado{flex:1;min-width:15em}
.perfil h1{font-size:clamp(1.15em,2vw,1.5em);display:flex;align-items:center;gap:var(--e2);
           flex-wrap:wrap}
.perfilNums{display:flex;gap:var(--e4);margin:var(--e2) 0;flex-wrap:wrap}
.perfilNums span{font-size:.8em;color:var(--apagado)}
.perfilNums b{font-weight:700;font-variant-numeric:tabular-nums;color:var(--texto)}
.perfilBio{font-size:.86em;line-height:1.6;max-width:44em}
.seloVerif{display:inline-flex;align-items:center;gap:.35em;background:var(--verde-claro);
           color:var(--verde-esc);font-size:.62em;font-weight:700;padding:.35em .7em;
           border-radius:var(--r-full);text-transform:uppercase;letter-spacing:.08em}

/* ============================================================
   7 · VAZIO, RODAPÉ E NAVEGAÇÃO DE BAIXO
   ============================================================ */
.espera{text-align:center;padding:var(--e5) var(--e3)}
.espera .icone{font-size:2.4em;opacity:.7}
.espera h2{font-size:1.15em;margin:var(--e2) 0 .3em}
.espera p{font-size:.88em;color:var(--apagado);max-width:30em;margin:0 auto;line-height:1.6}

/* ---------- Rodapé grande, em colunas ---------- */
.rodape{border-top:1px solid var(--linha);background:var(--branco);
        margin-top:var(--e6);padding:var(--e5) 0 var(--e4)}
.rodape .dentro{max-width:var(--larg);margin:0 auto;padding:0 clamp(var(--e3),3vw,var(--e5))}
.rodape .recado{font-size:.88em;color:var(--apagado);line-height:1.7;white-space:pre-line;
                max-width:var(--larg-txt);margin:0 0 var(--e4)}

.rodape .colunas{display:grid;gap:var(--e4);
                 grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.rodape .col{display:flex;flex-direction:column;gap:.55em;align-items:flex-start}
.rodape .col h4{font-size:.74em;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
                color:var(--texto);margin-bottom:.35em}
.rodape .col a{font-size:.85em;color:var(--apagado);text-decoration:none;line-height:1.45}
.rodape .col a:hover{color:var(--texto);text-decoration:underline}

.rodape .legalNota{display:flex;gap:.7em;align-items:flex-start;margin-top:var(--e5);
               padding-top:var(--e3);border-top:1px solid var(--linha);
               font-size:.76em;line-height:1.65;color:var(--apagado);max-width:70em}
.rodape .legalNota svg{width:1.3em;height:1.3em;flex-shrink:0;margin-top:.15em;
                   fill:none;stroke:currentColor;stroke-width:1.5;
                   stroke-linecap:round;stroke-linejoin:round;opacity:.6}
.rodape .fim{margin-top:var(--e3);font-size:.76em;color:var(--apagado);opacity:.85}

/* ---------- Documentos legais ---------- */
.documento{background:var(--branco);border:1px solid var(--linha);border-radius:var(--r);
           box-shadow:var(--sombra);padding:clamp(var(--e3),3vw,var(--e5))}
.documento h1{font-size:clamp(1.3em,2.4vw,1.7em);margin-bottom:var(--e2)}
.documento .idn{font-size:.85em;color:var(--apagado);line-height:1.6}
.documento .versao{font-size:.78em;color:var(--apagado);margin-top:.3em}
.documento .versao.fim{margin-top:var(--e5);padding-top:var(--e3);
                       border-top:1px solid var(--linha)}

.documento .indice{display:flex;flex-wrap:wrap;gap:.4em;margin:var(--e4) 0 var(--e3);
                   padding:var(--e3);background:var(--fundo);border-radius:var(--r-sm)}
.documento .indice a{font-size:.78em;color:var(--apagado);text-decoration:none;
                     padding:.3em .7em;background:var(--branco);border:1px solid var(--linha);
                     border-radius:var(--r-full);white-space:nowrap}
.documento .indice a:hover{color:var(--texto);border-color:var(--linha-forte)}

.documento section{margin-top:var(--e5);scroll-margin-top:6rem}
.documento section h2{font-size:1.02em;margin-bottom:var(--e2);
                      padding-bottom:.4em;border-bottom:2px solid var(--fundo)}
.documento section p{font-size:.9em;line-height:1.72;color:var(--texto);margin-bottom:var(--e2);
                     max-width:64ch;text-wrap:pretty}

.docLinks{text-align:center;font-size:.82em;color:var(--apagado);margin-top:var(--e4)}
.docLinks a{color:var(--apagado)}

/* Aceite dos termos. Alvo grande: quem tem 80 anos precisa acertar o clique. */
.caixaAceite{display:flex;gap:.75em;align-items:flex-start;cursor:pointer;
             margin:var(--e3) 0 0;padding:var(--e3);background:var(--fundo);
             border:1px solid var(--linha);border-radius:var(--r-sm);
             font-size:.82em;font-weight:400;line-height:1.6;color:var(--apagado)}
.caixaAceite:hover{border-color:var(--linha-forte)}
.caixaAceite input{width:1.35em;height:1.35em;flex-shrink:0;margin-top:.08em;
                   accent-color:var(--cor);cursor:pointer}
.caixaAceite a{color:var(--texto);font-weight:600}

/* Cartão numerado da página "como funciona".
   Nome próprio de propósito: existe um .passo antigo, com display:flex,
   para os passos que a organização escreve na página do leilão. Reusar
   aquele nome fazia as duas regras brigarem e o texto sair espremido. */
.passoCartao{background:var(--branco);border:1px solid var(--linha);
             border-radius:var(--r);box-shadow:var(--sombra);
             padding:var(--e4) var(--e3) var(--e3);
             display:flex;flex-direction:column}
.passoCartao .num{display:flex;align-items:center;justify-content:center;
                  width:2.2em;height:2.2em;flex-shrink:0;border-radius:50%;
                  background:var(--cor);color:#fff;font-size:.82em;font-weight:700;
                  font-variant-numeric:tabular-nums;margin-bottom:var(--e3)}
.passoCartao h3{font-size:1em;margin-bottom:.4em;text-wrap:balance}
.passoCartao p{font-size:.86em;line-height:1.6;color:var(--apagado);text-wrap:pretty}
.somBtn{background:var(--branco);border:1px solid var(--linha-forte);border-radius:var(--r-sm);
        padding:.5em .9em;font-size:.82em;font-family:inherit;color:var(--apagado);cursor:pointer}
.somBtn:hover{color:var(--texto);border-color:var(--apagado)}

.navBaixo{display:none}
@media (max-width:820px){
  .navBaixo{display:flex;position:fixed;inset:auto 0 0 0;z-index:60;background:var(--branco);
            border-top:1px solid var(--linha);
            padding:var(--e1) var(--e1) calc(var(--e1) + env(safe-area-inset-bottom))}
  .navBaixo a{flex:1;display:flex;flex-direction:column;align-items:center;gap:.15em;
              padding:.45em .2em;text-decoration:none;color:var(--apagado);font-size:.6em;
              font-weight:600}
  .navBaixo a:hover{text-decoration:none}
  .navBaixo a.on{color:var(--texto)}
  .navBaixo svg{width:1.5em;height:1.5em;fill:none;stroke:currentColor;stroke-width:1.7;
                stroke-linecap:round;stroke-linejoin:round}
  .navBaixo a.on svg{stroke-width:2.3}
  body{padding-bottom:var(--alt-nav)}
  .tela{padding-bottom:var(--e5)}
}

/* ---- de quem é este leilão (topo da página do leilão) ---- */
.donoDoLeilao{display:flex;align-items:center;gap:var(--e2);text-decoration:none;color:var(--texto);
              background:var(--branco);border:1px solid var(--linha);border-radius:var(--r);
              box-shadow:var(--sombra);padding:var(--e2) var(--e3);margin-bottom:var(--e3)}
.donoDoLeilao:hover{box-shadow:var(--sombra-m);text-decoration:none}
.donoDoLeilao img{height:2.4em;width:auto;max-width:8em;object-fit:contain;flex-shrink:0}
.donoDoLeilao .av{width:2.4em;height:2.4em;border-radius:50%;background:var(--fundo);flex-shrink:0;
                  display:flex;align-items:center;justify-content:center;font-weight:700;
                  font-size:.8em;color:var(--apagado)}
.donoDoLeilao .quem{flex:1;min-width:0;line-height:1.35;display:flex;flex-wrap:wrap;
                    align-items:center;gap:.5em}
.donoDoLeilao .quem b{font-size:.9em}
.donoDoLeilao .quem small{display:block;width:100%;font-size:.72em;color:var(--apagado)}
.donoDoLeilao .seta{font-size:1.5em;line-height:1;color:var(--apagado);flex-shrink:0}