/* ============================================================
   app.css — MOBILE FIRST
   Base = celular. min-width acrescenta conforme sobra espaço.
   ============================================================ */

/* ============================================================
   1. TOPO
   No celular: título compacto + busca. Os modos internos
   (Lista, Conteúdo, Painel) NÃO aparecem para o lead —
   só surgem quando já se está num deles, ou a partir de 1000px.
   ============================================================ */

.topo {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--borda);
}
.topo-int {
  max-width: var(--largura); margin: 0 auto;
  padding: var(--e3) var(--e4);
  display: flex; flex-direction: column; gap: var(--e3);
}

.marca-linha { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }
.marca-titulo {
  font-size: var(--t-md); font-weight: 700; letter-spacing: -.015em; margin: 0; line-height: 1.2;
}
.marca-titulo em { color: var(--marca); font-style: normal; }
.marca-sub { display: none; }

.busca-caixa { position: relative; width: 100%; }
.busca-caixa input {
  width: 100%; height: var(--toque);
  padding: 0 44px 0 42px;
  background: var(--bg-elev); border: 1px solid var(--borda);
  border-radius: var(--raio-pill); color: var(--txt);
  transition: border-color var(--transicao), background var(--transicao);
}
.busca-caixa input:focus { border-color: var(--marca); background: var(--bg-elev-2); outline: none; }
.busca-caixa input::placeholder { color: var(--txt-3); }
.busca-icone {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  color: var(--txt-3); pointer-events: none; font-size: var(--t-sm);
}
.busca-limpar {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: var(--txt-3); cursor: pointer;
  width: 40px; height: 40px; border-radius: 50%; line-height: 1;
}
.busca-limpar:hover { color: var(--txt); background: var(--bg-hover); }

/* Modos — escondidos no Mural público em telas pequenas */
.modos { display: none; gap: var(--e1); background: var(--bg-elev); padding: 4px; border-radius: var(--raio-pill); }
.modos.visivel { display: flex; overflow-x: auto; scrollbar-width: none; }
.modos.visivel::-webkit-scrollbar { display: none; }
.modo-bt {
  background: none; border: 0; cursor: pointer; color: var(--txt-3);
  min-height: var(--toque); padding: 0 16px; border-radius: var(--raio-pill);
  font-size: var(--t-sm); font-weight: 600; white-space: nowrap;
  transition: all var(--transicao);
}
@media (min-width: 700px) { .modo-bt { min-height: 38px; } }
.modo-bt:hover { color: var(--txt); }
.modo-bt[aria-current="true"] { background: var(--marca); color: var(--marca-txt); }

@media (min-width: 700px) {
  .topo-int { flex-direction: row; align-items: center; gap: var(--e5); padding: var(--e4) var(--e5); }
  .marca-linha { flex-direction: column; align-items: flex-start; gap: 2px; }
  .marca-sub { display: block; font-size: var(--t-xs); color: var(--txt-3); margin: 0; }
  .busca-caixa { flex: 1 1 280px; min-width: 200px; }
}
@media (min-width: 1000px) {
  .modos { display: flex; }
}

/* ---------- missão ---------- */
.missao {
  background: linear-gradient(90deg, rgba(245,179,1,.10), transparent 70%);
  border-bottom: 1px solid var(--borda);
  padding: var(--e2) var(--e4);
  font-size: var(--t-xs); color: var(--txt-2); text-align: center; line-height: 1.4;
}
@media (min-width: 700px) { .missao { padding: var(--e3) var(--e5); font-size: var(--t-sm); } }

/* ============================================================
   2. CORPO
   ============================================================ */

.corpo {
  max-width: var(--largura); margin: 0 auto; padding: var(--e4);
  display: block;
}
@media (min-width: 700px)  { .corpo { padding: var(--e5); } }
@media (min-width: 1000px) {
  .corpo { display: grid; grid-template-columns: 250px 1fr; gap: var(--e6); align-items: start; }
  .corpo.largo { grid-template-columns: 1fr; }
}

/* ---------- barra de ações ---------- */
.barra {
  display: flex; align-items: center; gap: var(--e3);
  margin-bottom: var(--e4); flex-wrap: wrap;
}
.contagem { font-size: var(--t-sm); color: var(--txt-2); }
.contagem strong { color: var(--txt); font-size: var(--t-md); font-family: var(--fonte-num); }

.bt-filtros {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-elev); border: 1px solid var(--borda-forte); color: var(--txt);
  border-radius: var(--raio-pill); min-height: var(--toque); padding: 0 18px;
  cursor: pointer; font-size: var(--t-sm); font-weight: 600;
}
.bt-filtros:hover { background: var(--bg-hover); }
.bt-filtros .n {
  background: var(--marca); color: var(--marca-txt);
  border-radius: var(--raio-pill); padding: 1px 8px; font-size: var(--t-xs); font-weight: 700;
}

/* No celular a ordenação mora dentro da gaveta */
.ordenar-topo { display: none; }
@media (min-width: 1000px) {
  .bt-filtros { display: none; }
  .barra { justify-content: space-between; }
  .ordenar-topo { display: flex; align-items: center; gap: var(--e2); font-size: var(--t-sm); color: var(--txt-3); }
}
.ordenar-topo select, .ordenar-gaveta select {
  background: var(--bg-elev); border: 1px solid var(--borda); color: var(--txt);
  min-height: var(--toque); padding: 0 12px; border-radius: var(--raio); cursor: pointer; width: 100%;
}
@media (min-width: 1000px) { .ordenar-topo select { min-height: 38px; width: auto; } }

/* ---------- chips de filtro ativo ---------- */
.ativos {
  display: flex; gap: var(--e2); margin-bottom: var(--e4);
  overflow-x: auto; padding-bottom: 4px; scrollbar-width: none;
}
.ativos::-webkit-scrollbar { display: none; }
@media (min-width: 700px) { .ativos { flex-wrap: wrap; overflow: visible; } }
.chip {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  background: var(--bg-elev-2); border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pill); padding-left: 12px; font-size: var(--t-xs);
}
.chip button {
  background: none; border: 0; color: var(--txt-3); cursor: pointer;
  width: var(--toque); height: var(--toque); border-radius: 50%; line-height: 1;
}
@media (min-width: 700px) { .chip button { width: 34px; height: 34px; } }
.chip button:hover { background: var(--bg-hover); color: var(--txt); }

/* ============================================================
   3. GAVETA DE FILTROS
   No celular é uma folha que sobe, COM botão de fechar e
   botão de aplicar. A partir de 1000px vira barra lateral fixa.
   ============================================================ */

.facetas {
  position: fixed; inset: 0; z-index: 70;
  background: var(--bg);
  display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform var(--transicao);
  visibility: hidden;
}
.facetas.aberto { transform: translateY(0); visibility: visible; }

.facetas-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e3); padding: var(--e4);
  border-bottom: 1px solid var(--borda); flex-shrink: 0;
}
.facetas-topo h2 { font-size: var(--t-md); margin: 0; }
.facetas-fechar {
  background: var(--bg-elev-2); border: 1px solid var(--borda); color: var(--txt);
  width: var(--toque); height: var(--toque); border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.facetas-fechar:hover { background: var(--bg-hover); }

.facetas-rolagem { flex: 1; overflow-y: auto; padding: var(--e4); -webkit-overflow-scrolling: touch; }

.facetas-pe {
  padding: var(--e4); border-top: 1px solid var(--borda); flex-shrink: 0;
  display: flex; gap: var(--e3);
  padding-bottom: calc(var(--e4) + env(safe-area-inset-bottom, 0px));
}
.bt-aplicar {
  flex: 1; background: var(--marca); color: var(--marca-txt); border: 0;
  min-height: var(--toque); border-radius: var(--raio-pill);
  font-weight: 700; cursor: pointer;
}
.bt-limpar {
  background: var(--bg-elev-2); border: 1px solid var(--borda-forte); color: var(--txt-2);
  min-height: var(--toque); padding: 0 18px; border-radius: var(--raio-pill); cursor: pointer;
}

.ordenar-gaveta { margin-bottom: var(--e4); }
.ordenar-gaveta label {
  display: block; font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: .06em; color: var(--txt-3); margin-bottom: var(--e2);
}

@media (min-width: 1000px) {
  .facetas {
    position: sticky; top: calc(var(--topo-h) + 16px); inset: auto;
    transform: none; visibility: visible; background: none; display: block;
    max-height: calc(100vh - var(--topo-h) - 32px); overflow-y: auto;
  }
  .facetas-topo { padding: 0 0 var(--e3); }
  .facetas-topo h2 { font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--txt-3); }
  .facetas-fechar, .facetas-pe, .ordenar-gaveta { display: none; }
  .facetas-rolagem { padding: 0; overflow: visible; }
}

/* ---------- grupos de faceta ---------- */
.grupo { border-bottom: 1px solid var(--borda); }
.grupo:last-child { border-bottom: 0; }
.grupo > summary {
  cursor: pointer; list-style: none; font-size: var(--t-base); font-weight: 600;
  min-height: var(--toque); display: flex; justify-content: space-between; align-items: center; gap: var(--e2);
}
.grupo > summary::-webkit-details-marker { display: none; }
.grupo > summary::after { content: '⌄'; color: var(--txt-3); transition: transform var(--transicao); }
.grupo[open] > summary::after { transform: rotate(180deg); }
@media (min-width: 1000px) { .grupo > summary { font-size: var(--t-sm); min-height: 38px; } }

.opcoes { display: flex; flex-direction: column; padding-bottom: var(--e2); }
.opcao {
  display: flex; align-items: center; gap: var(--e3); cursor: pointer;
  min-height: var(--toque); padding: 0 var(--e2); border-radius: 8px;
  font-size: var(--t-base); color: var(--txt-2);
  transition: background var(--transicao);
}
@media (min-width: 1000px) { .opcao { min-height: 34px; font-size: var(--t-sm); } }
.opcao:hover { background: var(--bg-elev); color: var(--txt); }
.opcao input { accent-color: var(--marca); margin: 0; cursor: pointer; width: 18px; height: 18px; flex-shrink: 0; }
.opcao.vazia { opacity: .32; pointer-events: none; }
.opcao-label { flex: 1; min-width: 0; }
.opcao-cont {
  font-family: var(--fonte-num); font-size: var(--t-xs); color: var(--txt-3);
  background: var(--bg-elev); padding: 2px 8px; border-radius: var(--raio-pill);
}

/* ============================================================
   4. CARDS
   ============================================================ */

.grade, .destaques {
  display: grid; gap: var(--e4); grid-template-columns: 1fr;
}
.destaques { margin-bottom: var(--e5); }
@media (min-width: 620px) {
  .grade     { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); grid-auto-flow: dense; }
  .destaques { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }
}
@media (min-width: 1000px) {
  .grade .card.heroi { grid-column: span 2; }
}

.card {
  background: var(--bg-elev); border: 1px solid var(--borda);
  border-radius: var(--raio-lg); overflow: hidden;
  display: flex; flex-direction: column; position: relative;
  transition: transform var(--transicao), border-color var(--transicao), box-shadow var(--transicao);
}
@media (hover: hover) {
  .card:hover { transform: translateY(-3px); border-color: var(--borda-forte); box-shadow: var(--sombra-lg); }
}

/* Camada clicável que cobre o card sem engolir os links */
.card-abrir {
  position: absolute; inset: 0; z-index: 1;
  background: none; border: 0; cursor: pointer; padding: 0;
  font-size: 0; color: transparent;
}
.card-corpo > *, .card-img > * { position: relative; }
.card a, .card .acoes { position: relative; z-index: 2; }

.card-img { position: relative; aspect-ratio: 16/10; background: var(--bg-elev-2); overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-img-vazia {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  padding: var(--e5); text-align: center; font-size: var(--t-base); font-weight: 600; line-height: 1.35;
  color: var(--txt);
}
@media (min-width: 620px) { .card-img-vazia { font-size: var(--t-md); } }

.selo-heroi, .selo-tempo, .selo-intl { position: absolute; z-index: 2; }
.selo-heroi {
  top: var(--e3); left: var(--e3);
  background: var(--marca); color: var(--marca-txt);
  font-size: var(--t-xs); font-weight: 700; padding: 4px 11px; border-radius: var(--raio-pill);
  text-transform: uppercase; letter-spacing: .04em;
}
.selo-tempo {
  top: var(--e3); right: var(--e3);
  background: #05070A; border: 1px solid rgba(255,255,255,.22);
  font-size: var(--t-xs); font-weight: 700; padding: 5px 12px; border-radius: var(--raio-pill);
  font-family: var(--fonte-num);
}
.selo-intl {
  bottom: var(--e3); left: var(--e3);
  background: rgba(59,130,246,.92); font-size: var(--t-xs); font-weight: 600;
  padding: 4px 11px; border-radius: var(--raio-pill);
}
.selo-video {
  position: absolute; z-index: 2; right: var(--e3); bottom: var(--e3); pointer-events: none;
}
.selo-video span {
  width: 40px; height: 40px; border-radius: 50%;
  background: #DC0000; border: 2px solid rgba(255,255,255,.85);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; padding-left: 3px; color: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.5);
}

.card-corpo { padding: var(--e4); display: flex; flex-direction: column; gap: var(--e3); flex: 1; }
.card-titulo { margin: 0; font-size: var(--t-md); font-weight: 650; line-height: 1.32; letter-spacing: -.012em; }
.card-resumo {
  margin: 0; font-size: var(--t-sm); color: var(--txt-2); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.transicao { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.medalha {
  display: inline-flex; align-items: center;
  font-size: var(--t-xs); font-weight: 700; padding: 4px 11px; border-radius: var(--raio-pill);
  border: 1px solid rgba(255,255,255,.14);
}
.seta { color: var(--txt-3); }
.salto { font-family: var(--fonte-num); font-size: var(--t-xs); font-weight: 700; color: var(--ok); }

.cargo-par { font-size: var(--t-sm); color: var(--txt-2); }
.cargo-par b { color: var(--txt); font-weight: 600; }
.status-par { font-size: var(--t-xs); color: var(--txt-3); letter-spacing: .03em; }
.status-par b { color: var(--txt-2); font-weight: 600; }

.meta-linha {
  display: flex; flex-wrap: wrap; gap: var(--e3) var(--e4);
  font-size: var(--t-xs); color: var(--txt-3);
}
.meta-linha span { display: inline-flex; align-items: center; gap: 5px; }

.tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tag { font-size: var(--t-xs); color: var(--txt-3); background: var(--bg-elev-2); border-radius: 6px; padding: 3px 9px; }

/* Rodapé do card: LinkedIn e vídeo sempre acessíveis */
.acoes {
  display: flex; gap: var(--e2); flex-wrap: wrap;
  margin-top: auto; padding-top: var(--e3); border-top: 1px solid var(--borda);
}
.acao {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  background: var(--bg-elev-2); border: 1px solid var(--borda);
  border-radius: var(--raio-pill); min-height: var(--toque); padding: 0 16px;
  font-size: var(--t-sm); font-weight: 600; color: var(--txt-2);
}
@media (min-width: 700px) { .acao { min-height: 38px; padding: 0 14px; font-size: var(--t-xs); } }
.acao:hover { background: var(--bg-hover); color: var(--txt); border-color: var(--borda-forte); }
.acao.in { color: #7CB9FF; border-color: rgba(124,185,255,.3); }
.acao.yt { color: #FF7B7B; border-color: rgba(255,123,123,.3); }

/* ============================================================
   5. VÍDEO EMBUTIDO
   ============================================================ */

.video {
  position: relative; aspect-ratio: 16/9; width: 100%;
  border-radius: var(--raio); overflow: hidden; background: #000;
  border: 1px solid var(--borda); cursor: pointer;
}
.video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: var(--e2); background: none; border: 0; color: #fff; cursor: pointer;
}
.video-play i {
  width: 66px; height: 66px; border-radius: 50%; background: rgba(220,0,0,.92);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-style: normal; padding-left: 5px;
}
.video-play b { font-size: var(--t-sm); font-weight: 600; text-shadow: 0 1px 4px #000; }

/* ============================================================
   6. MODAL
   Tela cheia no celular, caixa centrada a partir de 700px.
   ============================================================ */

.modal-fundo {
  position: fixed; inset: 0; z-index: 100; background: #05070A;
  display: flex; align-items: stretch; justify-content: center; overflow-y: auto;
}
.modal {
  background: var(--bg-elev); width: 100%;
  display: flex; flex-direction: column; min-height: 100%;
}
@media (min-width: 700px) {
  .modal-fundo { padding: var(--e5); align-items: flex-start; }
  .modal {
    max-width: 820px; margin: auto; min-height: 0;
    border: 1px solid var(--borda-forte); border-radius: var(--raio-lg);
    box-shadow: var(--sombra-lg); overflow: hidden;
  }
}

.modal-topo {
  position: sticky; top: 0; z-index: 3;
  background: var(--bg-elev); border-bottom: 1px solid var(--borda);
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e3);
  padding: var(--e4);
  padding-top: calc(var(--e4) + env(safe-area-inset-top, 0px));
}
@media (min-width: 700px) { .modal-topo { position: static; padding: var(--e5) var(--e5) var(--e4); } }
.modal-topo h2 { margin: 0 0 var(--e2); font-size: var(--t-lg); line-height: 1.26; letter-spacing: -.015em; }
.fechar {
  background: var(--bg-elev-2); border: 1px solid var(--borda); color: var(--txt-2);
  cursor: pointer; width: var(--toque); height: var(--toque); border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.fechar:hover { background: var(--bg-hover); color: var(--txt); }

.modal-corpo {
  padding: var(--e4); display: flex; flex-direction: column; gap: var(--e5);
  padding-bottom: calc(var(--e6) + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 700px) { .modal-corpo { padding: var(--e5); gap: var(--e5); } }

.numeros { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e2); }
@media (min-width: 620px) { .numeros { grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap: var(--e3); } }
.num { background: var(--bg-elev-2); border: 1px solid var(--borda); border-radius: var(--raio); padding: var(--e3); }
.num-rot { font-size: var(--t-xs); color: var(--txt-3); text-transform: uppercase; letter-spacing: .05em; }
.num-val { font-size: var(--t-md); font-weight: 700; font-family: var(--fonte-num); margin-top: 2px; }
@media (min-width: 620px) { .num-val { font-size: var(--t-lg); } }

.secao h3 {
  margin: 0 0 var(--e3); font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: .07em; color: var(--txt-3);
}
.depo {
  background: var(--bg-elev-2); border-left: 3px solid var(--marca);
  border-radius: 0 var(--raio) var(--raio) 0; padding: var(--e4);
  font-size: var(--t-base); line-height: 1.68; color: var(--txt);
}
@media (min-width: 700px) { .depo { font-size: var(--t-md); } }
.depo-fonte { font-size: var(--t-xs); color: var(--txt-3); margin-top: var(--e2); font-style: normal; }

.lista-vit { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e3); }
.lista-vit li { display: flex; gap: var(--e3); align-items: baseline; font-size: var(--t-sm); }
.lista-vit .ic { flex-shrink: 0; }
.lista-vit .rot { font-weight: 600; }
.lista-vit .det { color: var(--txt-2); }

.ressalva-cx {
  background: rgba(249,115,22,.09); border: 1px solid rgba(249,115,22,.3);
  border-radius: var(--raio); padding: var(--e4); font-size: var(--t-sm); color: var(--txt-2);
}
.ressalva-cx strong { color: var(--alerta); }
.escolha-cx {
  background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.28);
  border-radius: var(--raio); padding: var(--e4); font-size: var(--t-sm);
}
.escolha-cx strong { color: var(--ok); }

.galeria { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--e2); }
@media (min-width: 620px) { .galeria { grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); } }
.galeria a { display: block; border-radius: var(--raio); overflow: hidden; border: 1px solid var(--borda); }
.galeria img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: var(--bg-elev-2); }

.links { display: flex; flex-wrap: wrap; gap: var(--e2); }
.link-bt {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  background: var(--bg-elev-2); border: 1px solid var(--borda);
  border-radius: var(--raio-pill); min-height: var(--toque); padding: 0 18px;
  font-size: var(--t-sm); font-weight: 600; color: var(--txt-2);
}
.link-bt:hover { background: var(--bg-hover); color: var(--txt); }
.link-bt.in { color: #7CB9FF; border-color: rgba(124,185,255,.35); background: rgba(124,185,255,.08); }

.cta {
  background: linear-gradient(135deg, var(--marca), var(--marca-escura));
  border-radius: var(--raio-lg); padding: var(--e5); color: var(--marca-txt);
}
.cta h3 { margin: 0 0 var(--e1); font-size: var(--t-md); color: var(--marca-txt); text-transform: none; letter-spacing: 0; }
.cta p { margin: 0 0 var(--e4); font-size: var(--t-sm); opacity: .85; }
.cta-bt {
  display: flex; align-items: center; justify-content: center; text-decoration: none;
  background: var(--marca-txt); color: var(--marca);
  min-height: var(--toque); padding: 0 24px; border-radius: var(--raio-pill);
  font-weight: 700; font-size: var(--t-base);
}
@media (min-width: 620px) { .cta-bt { display: inline-flex; } }
.cta-bt:hover { opacity: .88; }
.cta-preco { font-size: var(--t-sm); margin-top: var(--e3); opacity: .82; }
.cta-aviso { font-size: var(--t-xs); margin-top: var(--e2); opacity: .68; }

/* ============================================================
   7. MODO LISTA
   Lista de cartões no celular, tabela a partir de 900px.
   ============================================================ */

.lista-cartoes { display: flex; flex-direction: column; gap: var(--e3); }
.lista-item {
  background: var(--bg-elev); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: var(--e4);
  display: flex; flex-direction: column; gap: var(--e3);
}
.lista-item h4 { margin: 0; font-size: var(--t-base); font-weight: 650; line-height: 1.35; cursor: pointer; }
.lista-item h4:hover { color: var(--marca); }
.lista-meta { font-size: var(--t-xs); color: var(--txt-3); display: flex; flex-wrap: wrap; gap: var(--e3); }
.lista-acoes { display: flex; gap: var(--e2); flex-wrap: wrap; }

.tabela { display: none; }
@media (min-width: 900px) {
  .lista-cartoes { display: none; }
  .tabela { display: table; width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
  .tabela th {
    text-align: left; padding: var(--e2) var(--e3); color: var(--txt-3);
    font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .05em;
    border-bottom: 1px solid var(--borda);
  }
  .tabela td { padding: var(--e3); border-bottom: 1px solid var(--borda); vertical-align: top; }
  .tabela tr:hover td { background: var(--bg-elev); }
  .tabela .t-tit { font-weight: 600; cursor: pointer; }
  .tabela .t-tit:hover { color: var(--marca); }
}
.bt-copiar {
  background: var(--bg-elev-2); border: 1px solid var(--borda-forte); color: var(--txt-2);
  border-radius: var(--raio-pill); min-height: var(--toque); padding: 0 18px;
  cursor: pointer; font-size: var(--t-sm); font-weight: 600; white-space: nowrap;
}
@media (min-width: 700px) { .bt-copiar { min-height: 38px; font-size: var(--t-xs); } }
.bt-copiar:hover { background: var(--marca); color: var(--marca-txt); border-color: var(--marca); }
.bt-copiar.ok { background: var(--ok); color: #052e16; border-color: var(--ok); }

/* ============================================================
   7b. MODO CONTEÚDO — a fila de pauta
   Uma coluna no celular, duas a partir de 900px. O que nunca
   virou post fica em destaque; o já usado desbota e desce.
   ============================================================ */

.pauta-resumo {
  display: flex; gap: var(--e4); overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: var(--e2); margin-bottom: var(--e4);
  font-size: var(--t-xs); color: var(--txt-3); scrollbar-width: none;
}
.pauta-resumo::-webkit-scrollbar { display: none; }
.pauta-resumo span { white-space: nowrap; }
.pauta-resumo b { color: var(--txt); font-family: var(--fonte-num); font-size: var(--t-base); margin-right: 4px; }

.pauta { display: flex; flex-direction: column; gap: var(--e3); }
@media (min-width: 900px) { .pauta { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e4); align-items: start; } }

.pauta-item {
  background: var(--bg-elev); border: 1px solid var(--borda);
  border-left: 3px solid var(--marca);
  border-radius: var(--raio); padding: var(--e4);
  display: flex; flex-direction: column; gap: var(--e3);
}
.pauta-item.usado { border-left-color: var(--borda-forte); opacity: .62; }
.pauta-item.usado:hover { opacity: 1; }
.pauta-item h4 { margin: 0; font-size: var(--t-base); font-weight: 650; line-height: 1.35; cursor: pointer; }
.pauta-item h4:hover { color: var(--marca); }

.pauta-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); flex-wrap: wrap; }
.pauta-tag {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  border-radius: var(--raio-pill); padding: 3px 10px; white-space: nowrap;
}
.pauta-tag.inedito { background: rgba(245,179,1,.14); color: var(--marca); }
.pauta-tag.usado { background: var(--bg-elev-2); color: var(--txt-3); text-transform: none; letter-spacing: 0; font-weight: 500; }

.pauta-frase {
  margin: 0; padding-left: var(--e3); border-left: 2px solid var(--borda-forte);
  color: var(--txt-2); font-size: var(--t-sm); line-height: 1.5;
}
.pauta-mats { display: flex; flex-wrap: wrap; gap: var(--e2); }
.pauta-mat {
  font-size: var(--t-xs); color: var(--txt-2); background: var(--bg-elev-2);
  border: 1px solid var(--borda); border-radius: var(--raio-pill); padding: 3px 10px;
  text-decoration: none; white-space: nowrap;
}
a.pauta-mat:hover { border-color: var(--marca); color: var(--marca); }
.pauta-mat.vazio { color: var(--txt-3); background: transparent; border-style: dashed; }
.pauta-acoes { display: flex; gap: var(--e2); flex-wrap: wrap; }
.pauta-nota { margin-top: var(--e5); font-size: var(--t-xs); color: var(--txt-3); line-height: 1.6; }
.pauta-nota code {
  background: var(--bg-elev-2); border-radius: 4px; padding: 1px 5px;
  font-family: var(--fonte-num); font-size: .95em;
}

/* ============================================================
   8. PAINEL
   ============================================================ */

.painel { display: flex; flex-direction: column; gap: var(--e6); }
.kpis { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--e3); }
@media (min-width: 700px) { .kpis { grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: var(--e4); } }
.kpi { background: var(--bg-elev); border: 1px solid var(--borda); border-radius: var(--raio-lg); padding: var(--e4); }
@media (min-width: 700px) { .kpi { padding: var(--e5); } }
.kpi-val { font-size: var(--t-xl); font-weight: 800; font-family: var(--fonte-num); line-height: 1; }
@media (min-width: 700px) { .kpi-val { font-size: var(--t-2xl); } }
.kpi-rot { font-size: var(--t-xs); color: var(--txt-3); margin-top: var(--e2); }
@media (min-width: 700px) { .kpi-rot { font-size: var(--t-sm); } }

.barras { display: flex; flex-direction: column; gap: var(--e3); }
.barra-lin { display: grid; grid-template-columns: 1fr; gap: 4px; font-size: var(--t-sm); }
.barra-rot { display: flex; justify-content: space-between; align-items: center; gap: var(--e2); }
.barra-trilho { background: var(--bg-elev-2); border-radius: var(--raio-pill); height: 16px; overflow: hidden; }
.barra-fill { height: 100%; border-radius: var(--raio-pill); transition: width 400ms ease; }
.barra-num { font-family: var(--fonte-num); color: var(--txt-2); flex-shrink: 0; }
@media (min-width: 700px) {
  .barra-lin { grid-template-columns: 200px 1fr 48px; gap: var(--e3); align-items: center; }
  .barra-rot { display: block; }
  .barra-trilho { height: 22px; }
  .barra-num { text-align: right; }
}
.pendencia {
  display: inline-block; background: rgba(249,115,22,.18); color: var(--alerta);
  border-radius: var(--raio-pill); padding: 1px 9px; font-size: var(--t-xs); font-weight: 600;
}

/* ============================================================
   9. VAZIO E RODAPÉ
   ============================================================ */

.vazio { text-align: center; padding: var(--e8) var(--e4); color: var(--txt-3); }
.vazio h3 { color: var(--txt-2); margin: 0 0 var(--e2); }

.rodape { border-top: 1px solid var(--borda); margin-top: var(--e7); padding: var(--e5) var(--e4); background: var(--bg-elev); }
@media (min-width: 700px) { .rodape { margin-top: var(--e8); padding: var(--e6) var(--e5); } }
.rodape-int { max-width: var(--largura); margin: 0 auto; font-size: var(--t-xs); color: var(--txt-3); line-height: 1.7; }
.rodape-int strong { color: var(--txt-2); }

/* ============================================================
   10. TRILHA INTERNACIONAL
   ============================================================ */

.trilha-banner { max-width: var(--largura); margin: var(--e4) auto 0; padding: 0 var(--e4); }
@media (min-width: 700px) { .trilha-banner { margin-top: var(--e5); padding: 0 var(--e5); } }

.trilha-card {
  background: linear-gradient(135deg, rgba(59,130,246,.15), rgba(139,92,246,.10));
  border: 1px solid rgba(59,130,246,.35);
  border-radius: var(--raio-lg); padding: var(--e4);
}
@media (min-width: 700px) { .trilha-card { padding: var(--e5); } }
.trilha-card h2 { margin: 0 0 var(--e2); font-size: var(--t-lg); }

.trilha-objecao {
  margin: var(--e4) 0 0; padding: var(--e3) var(--e4);
  background: #05070A; border-left: 3px solid var(--marca);
  border-radius: 0 var(--raio) var(--raio) 0;
}
.trilha-objecao p { margin: 0 0 var(--e1); }
.trilha-objecao .perg { color: var(--txt-3); font-size: var(--t-sm); }
.trilha-objecao .resp { font-size: var(--t-base); font-weight: 500; }
@media (min-width: 700px) { .trilha-objecao .resp { font-size: var(--t-md); } }
.trilha-objecao .autor { font-size: var(--t-xs); color: var(--txt-3); margin-top: var(--e2); }

.destinos { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e4); }
.destino {
  background: rgba(255,255,255,.07); border: 1px solid var(--borda);
  border-radius: var(--raio-pill); padding: 6px 14px; font-size: var(--t-sm);
}

/* ---------- CTA com dois botões ---------- */
.cta-botoes { display: flex; flex-direction: column; gap: var(--e2); }
@media (min-width: 620px) { .cta-botoes { flex-direction: row; flex-wrap: wrap; } }
.cta-bt.secundario {
  background: transparent; color: var(--marca-txt);
  border: 2px solid rgba(11,13,18,.35);
}
.cta-bt.secundario:hover { background: rgba(11,13,18,.12); opacity: 1; }
.acao.wa { color: #7BE38B; border-color: rgba(123,227,139,.32); }

/* ---------- rodapé do vídeo: escape sempre visível ---------- */
.video-bloco { display: flex; flex-direction: column; gap: var(--e2); }
.video-rodape {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e4);
  font-size: var(--t-xs);
}
.video-rodape a { color: #FF9B9B; text-decoration: none; font-weight: 600; min-height: 32px; display: inline-flex; align-items: center; }
.video-rodape a:hover { text-decoration: underline; }
.video-nota { color: var(--txt-3); }

/* ============================================================
   11. PLAQUINHA DE REGISTRO — #210 · Aliado #1.079
   Discreta por design: monoespaçada, baixo contraste, posição
   fixa. Não compete com nada; quem procura, acha na hora.
   ============================================================ */

.registro {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-family: var(--fonte-num); font-size: var(--t-xs);
  color: var(--txt-3); letter-spacing: .02em; line-height: 1.4;
}
.registro i { font-style: normal; opacity: .45; }
.reg-case   { color: var(--txt-2); font-weight: 700; }
.reg-aliado { opacity: .9; }
.reg-rel    { opacity: .7; }
.reg-rel::before { content: '·'; margin-right: 6px; opacity: .45; }

/* no modal a plaquinha vira ficha, acima do título */
.modal-topo .registro { margin-bottom: var(--e2); }

/* no modo lista os números são operacionais: ganham coluna */
.tabela .t-num {
  font-family: var(--fonte-num); font-size: var(--t-xs);
  color: var(--txt-2); white-space: nowrap;
}
.tabela .t-num div { color: var(--txt-3); margin-top: 2px; }

/* ============================================================
   12. ASSINATURA — quem é a pessoa
   Numa comunidade, o nome é a prova. Fica logo abaixo do
   título, com foto quando existe.
   ============================================================ */

.assinatura { display: flex; align-items: center; gap: var(--e3); min-width: 0; }
.assinatura.sem-nome { opacity: .72; }

.assin-foto {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 50%; overflow: hidden;
  background: var(--bg-elev-2); border: 1px solid var(--borda-forte);
  display: block;
}
.assin-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* foto que não carregou: mostra a inicial em vez de um círculo vazio */
.assin-foto .card-img-vazia {
  width: 100%; height: 100%; padding: 0;
  font-size: var(--t-sm); font-weight: 700; color: var(--txt-2);
}
.assin-inicial {
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--t-sm); color: var(--txt-2);
}

.assin-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.assin-txt b { font-size: var(--t-sm); font-weight: 650; color: var(--txt); }
.assin-txt em {
  font-style: normal; font-size: var(--t-xs); color: var(--txt-3);
  font-family: var(--fonte-num);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.assin-in {
  margin-left: auto; flex-shrink: 0; text-decoration: none;
  width: var(--toque); height: var(--toque); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(124,185,255,.12); border: 1px solid rgba(124,185,255,.3);
  color: #7CB9FF; font-weight: 800; font-size: var(--t-sm);
}
.assin-in:hover { background: rgba(124,185,255,.24); }
@media (min-width: 700px) { .assin-in { width: 34px; height: 34px; } }

.modal-topo .assinatura { margin: var(--e3) 0; }
.modal-topo .assin-foto { width: 42px; height: 42px; }
.modal-topo .assin-txt b { font-size: var(--t-base); }

/* o K dentro da medalha — mesmo tom, um pouco mais discreto */
.medalha i {
  font-style: normal; font-weight: 800; margin-left: 6px;
  padding-left: 6px; border-left: 1px solid currentColor;
  opacity: .62; font-family: var(--fonte-num);
}

/* ---------- ver mais ---------- */
.ver-mais {
  display: flex; flex-direction: column; align-items: center; gap: var(--e2);
  padding: var(--e6) 0 var(--e4);
}
.bt-ver-mais {
  background: var(--bg-elev); border: 1px solid var(--borda-forte); color: var(--txt);
  border-radius: var(--raio-pill); min-height: var(--toque); padding: 0 28px;
  cursor: pointer; font-size: var(--t-base); font-weight: 650;
}
.bt-ver-mais:hover { background: var(--bg-hover); border-color: var(--marca); color: var(--marca); }
.ver-mais span { font-size: var(--t-xs); color: var(--txt-3); font-family: var(--fonte-num); }

/* ---------- barra de consentimento ---------- */
.consentimento {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: var(--bg-elev); border-top: 1px solid var(--borda-forte);
  padding: var(--e4);
  padding-bottom: calc(var(--e4) + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: var(--e3);
  box-shadow: 0 -8px 32px rgba(0,0,0,.5);
}
.consentimento p { margin: 0; font-size: var(--t-sm); color: var(--txt-2); }
.consent-bts { display: flex; gap: var(--e2); }
.bt-consent-sim, .bt-consent-nao {
  min-height: var(--toque); padding: 0 20px; border-radius: var(--raio-pill);
  cursor: pointer; font-weight: 650; font-size: var(--t-sm); flex: 1;
}
.bt-consent-sim { background: var(--marca); color: var(--marca-txt); border: 0; }
.bt-consent-nao { background: none; color: var(--txt-3); border: 1px solid var(--borda-forte); }
@media (min-width: 700px) {
  .consentimento {
    left: auto; right: var(--e5); bottom: var(--e5); max-width: 420px;
    border: 1px solid var(--borda-forte); border-radius: var(--raio-lg);
  }
  .bt-consent-sim, .bt-consent-nao { flex: 0 0 auto; }
}

/* ---------- alternador soma / restringe ---------- */
.combina {
  display: inline-flex; gap: 2px; margin: 0 0 var(--e2);
  background: var(--bg-elev-2); padding: 3px; border-radius: var(--raio-pill);
}
.combina-bt {
  background: none; border: 0; cursor: pointer; color: var(--txt-3);
  padding: 5px 12px; border-radius: var(--raio-pill);
  font-size: var(--t-xs); font-weight: 600;
}
.combina-bt.on { background: var(--marca); color: var(--marca-txt); }
.combina-bt:hover:not(.on) { color: var(--txt); }

.contagem i { font-style: normal; color: var(--txt-3); font-weight: 400; font-size: var(--t-sm); }

/* ============================================================
   13. BARRA DE NÚMEROS DO MOVIMENTO
   ============================================================ */

.numeros-barra { border-bottom: 1px solid var(--borda); background: var(--bg-elev); }
/* No celular a barra é uma tira horizontal compacta: o espaço da
   primeira tela pertence aos cases, não aos números. */
.numeros-int { max-width: var(--largura); margin: 0 auto; padding: var(--e2) var(--e4); }

.numeros-grade {
  display: flex; gap: var(--e5); overflow-x: auto;
  scrollbar-width: none; padding-bottom: 2px;
}
.numeros-grade::-webkit-scrollbar { display: none; }

.num-destaque { display: flex; align-items: baseline; gap: 5px; flex-shrink: 0; white-space: nowrap; }
.num-destaque b {
  font-family: var(--fonte-num); font-size: var(--t-md); font-weight: 800;
  line-height: 1.2; color: var(--marca);
}
.num-destaque span { font-size: var(--t-xs); color: var(--txt-3); }

/* A nota explicativa só aparece quando há espaço para ela */
.numeros-nota { display: none; }

@media (min-width: 700px) {
  .numeros-int { padding: var(--e5); }
  .numeros-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e5); overflow: visible; }
  .num-destaque { flex-direction: column; align-items: flex-start; gap: 2px; white-space: normal; }
  .num-destaque b { font-size: var(--t-2xl); line-height: 1; }
  .numeros-nota {
    display: block; margin: var(--e4) 0 0; font-size: var(--t-xs);
    color: var(--txt-3); line-height: 1.6; max-width: 78ch;
  }
}


/* ============================================================
   EVIDÊNCIAS em primeiro plano (10/10/2026)
   ============================================================ */
.selo-evid {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--t-xs); color: var(--txt-2);
  background: var(--bg-elev-2); border: 1px solid var(--borda);
  padding: 3px 10px; border-radius: var(--raio-pill);
}
.selo-evid b { color: var(--marca); font-family: var(--fonte-num); font-weight: 700; }

/* ============================================================
   VITRINES DAS MARCAS — Lary (home office) e Malu (inglês)
   ============================================================ */
.vitrines {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2);
  margin: 0 0 var(--e3);
}
.vitrines-rot { font-size: var(--t-xs); color: var(--txt-3); text-transform: uppercase; letter-spacing: .05em; }
.vitrine-bt {
  min-height: var(--toque); padding: 6px 14px; border-radius: var(--raio-pill);
  background: var(--bg-elev); color: var(--txt); border: 1px solid var(--borda-forte);
  font: inherit; font-size: var(--t-sm); font-weight: 600; cursor: pointer;
  transition: border-color var(--transicao), background var(--transicao);
}
.vitrine-bt:hover { border-color: var(--marca); background: var(--bg-hover); }

.vitrine-ativa {
  margin: 0 0 var(--e4); padding: var(--e4);
  border-radius: var(--raio-lg); border: 1px solid var(--borda-forte);
  background: linear-gradient(135deg, rgba(245,179,1,.12), rgba(245,179,1,.03));
}
.vitrine-malu { background: linear-gradient(135deg, rgba(59,130,246,.16), rgba(139,92,246,.08)); border-color: rgba(59,130,246,.4); }
.vitrine-lary { background: linear-gradient(135deg, rgba(236,72,153,.14), rgba(245,179,1,.06)); border-color: rgba(236,72,153,.38); }
.vitrine-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e3); flex-wrap: wrap; }
.vitrine-cab h2 { margin: 2px 0 var(--e2); font-size: var(--t-lg); }
.vitrine-marca { margin: 0; font-size: var(--t-xs); color: var(--txt-2); text-transform: uppercase; letter-spacing: .05em; }
.vitrine-chamada { margin: 0 0 var(--e2); color: var(--txt-2); font-size: var(--t-sm); line-height: 1.5; max-width: 70ch; }
.vitrine-num { margin: 0; font-size: var(--t-sm); color: var(--txt-2); }
.vitrine-num b { color: var(--txt); font-family: var(--fonte-num); font-size: var(--t-md); }
.vitrine-sair {
  background: transparent; color: var(--txt-2); border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pill); padding: 6px 12px; font: inherit; font-size: var(--t-xs); cursor: pointer; min-height: 32px;
}
.vitrine-sair:hover { color: var(--txt); border-color: var(--txt-3); }
.vitrine-ativa .trilha-objecao { margin-top: var(--e3); }
.vitrine-tags { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e3); }
.vtag {
  min-height: var(--toque); padding: 5px 12px; border-radius: var(--raio-pill);
  background: rgba(5,7,10,.55); color: var(--txt); border: 1px solid var(--borda-forte);
  font: inherit; font-size: var(--t-sm); cursor: pointer;
}
.vtag span { color: var(--txt-3); font-family: var(--fonte-num); margin-left: 4px; }
.vtag.on { background: var(--marca); color: var(--marca-txt); border-color: var(--marca); font-weight: 600; }
.vtag.on span { color: var(--marca-txt); }
.grupo-vitrine .opcao-label i { font-style: normal; color: var(--txt-3); font-size: var(--t-xs); }

.vb-curto { display: none; }
@media (max-width: 699px) {
  .vb-longo { display: none; }
  .vb-curto { display: inline; }
  .vitrines-rot { display: none; }
  .vitrines { flex-wrap: nowrap; }
  .vitrine-bt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 6px 10px; }
}
@media (max-width: 699px) {
  .vitrine-ativa { padding: var(--e3); margin-left: calc(-1 * var(--e1)); margin-right: calc(-1 * var(--e1)); }
  .vitrine-tags { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
  .vitrine-tags::-webkit-scrollbar { display: none; }
  .vtag { white-space: nowrap; flex: 0 0 auto; }
  .vitrine-cab h2 { font-size: var(--t-md); }
  .vitrine-ativa .trilha-objecao .resp { font-size: var(--t-sm); }
}

/* Compartilhar o case (link com prévia do WhatsApp) */
.modal-botoes { display: flex; gap: var(--e2); align-items: flex-start; flex-shrink: 0; }
.bt-compartilhar {
  min-height: var(--toque); padding: 8px 14px; border-radius: var(--raio-pill);
  background: #128C7E; color: #fff; border: 0; font: inherit; font-size: var(--t-sm); font-weight: 600; cursor: pointer;
}
.bt-compartilhar:hover { background: #0f7a6e; }

/* ============================================================
   RECORDES DA COMUNIDADE e rankings
   ============================================================ */
.selo-recorde {
  align-self: flex-start; display: inline-block;
  font-size: var(--t-xs); font-weight: 700; color: #1a1300;
  background: linear-gradient(135deg, #FFD54A, #F5B301); border-radius: var(--raio-pill);
  padding: 4px 11px; line-height: 1.35; margin: 0 6px 6px 0;
}
.modal-topo .selo-recorde { margin-top: 8px; }
.vitrine-recordes { border-color: rgba(245,179,1,.6); color: var(--marca); }
.recordes { padding: var(--e4) 0; }
.recordes-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e3); flex-wrap: wrap;
  padding: var(--e4); border-radius: var(--raio-lg); border: 1px solid rgba(245,179,1,.45);
  background: linear-gradient(135deg, rgba(245,179,1,.16), rgba(245,179,1,.03)); margin-bottom: var(--e4); }
.recordes-cab h2 { margin: 2px 0 var(--e2); font-size: var(--t-xl); }
.rankings { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
@media (max-width: 699px) { .rankings { grid-template-columns: 1fr; } }
.ranking { background: var(--bg-elev); border: 1px solid var(--borda); border-radius: var(--raio-lg); padding: var(--e4); }
.ranking h3 { margin: 0 0 4px; font-size: var(--t-md); }
.ranking-perg { margin: 0 0 var(--e3); font-size: var(--t-sm); color: var(--txt-3); }
.ranking-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ranking-linha { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: var(--e2);
  padding: 8px 10px; border-radius: var(--raio); background: var(--bg-elev-2); cursor: pointer; min-height: var(--toque); }
.ranking-linha:hover { background: var(--bg-hover); }
.ranking-linha.recorde { background: rgba(245,179,1,.12); border: 1px solid rgba(245,179,1,.45); }
.rk-pos { font-size: 20px; text-align: center; font-family: var(--fonte-num); color: var(--txt-2); }
.rk-quem { display: flex; flex-direction: column; min-width: 0; }
.rk-quem small { color: var(--txt-3); font-size: var(--t-xs); overflow: hidden; text-overflow: ellipsis; }
.rk-quem .rk-txt { color: var(--txt-2); white-space: normal; }
.rk-valor { font-family: var(--fonte-num); font-weight: 700; color: var(--marca); font-size: var(--t-md); white-space: nowrap; }
.ranking-aberto { margin: var(--e2) 0 0; font-size: var(--t-xs); color: var(--txt-3); }