/* ============================================================
   Pertim — componentes da interface
   Todo valor vem de tema.css. Nada de hex ou px solto aqui.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-tinta);
  font-family: var(--fonte-texto);
  font-size: var(--t-base);
  line-height: var(--entrelinha-normal);
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--altura-barra-inferior) + env(safe-area-inset-bottom));
}

img { max-width: 100%; display: block; }
button, input, select { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--cor-marca);
  outline-offset: 2px;
  border-radius: var(--raio-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

.so-leitor {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.limite {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--e-4);
}
@media (min-width: 900px) { .limite { padding-inline: var(--e-5); } }

/* ============================================================
   Cabeçalho
   ============================================================ */

.topo {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--cor-superficie);
  border-bottom: 1px solid var(--cor-linha);
}

.topo__linha {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 58px;
}

.marca { display: flex; align-items: center; gap: var(--e-3); min-width: 0; }

.marca__selo {
  width: 34px; height: 34px;
  flex: none;
  border-radius: 11px;
  background: var(--cor-marca);
  color: var(--cor-marca-tinta);
  display: grid; place-items: center;
  font-family: var(--fonte-display);
  font-weight: var(--peso-display);
  font-size: var(--t-md);
  letter-spacing: var(--letra-apertada);
}

.marca__texto { min-width: 0; }

.marca__nome {
  font-family: var(--fonte-display);
  font-weight: var(--peso-display);
  font-size: var(--t-lg);
  line-height: 1.1;
  letter-spacing: var(--letra-apertada);
  margin: 0;
}

.marca__grupo {
  display: block;
  font-size: var(--t-xs);
  color: var(--cor-tinta-media);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topo__nav { display: none; }

.topo__acoes { margin-left: auto; display: flex; gap: var(--e-2); align-items: center; }

.botao-icone {
  width: var(--altura-toque); height: var(--altura-toque);
  border-radius: var(--raio-md);
  border: 1px solid var(--cor-linha);
  background: var(--cor-superficie);
  color: var(--cor-tinta-media);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}
.botao-icone:hover { background: var(--cor-superficie-2); color: var(--cor-tinta); }

/* Busca */
.busca {
  display: flex;
  gap: var(--e-2);
  padding-bottom: var(--e-3);
}

.busca__campo {
  flex: 1;
  /* Sem isto o campo não encolhe abaixo do tamanho do próprio
     placeholder: item de flex nasce com `min-width: auto`, que é o
     conteúdo. Em tela de 360px o cabeçalho passava 10px da largura e
     TODA página com busca rolava para o lado. O `min-width: 0` do
     <input> lá embaixo não resolvia — quem precisava encolher era
     esta caixa, que é o item de flex. */
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--e-2);
  height: var(--altura-toque);
  padding-inline: var(--e-3);
  border: 1px solid var(--cor-linha-forte);
  border-radius: var(--raio-pilula);
  background: var(--cor-superficie-2);
}
.busca__campo:focus-within { border-color: var(--cor-marca); background: var(--cor-superficie); }
.busca__campo svg { flex: none; color: var(--cor-tinta-fraca); }
.busca__campo input {
  flex: 1; min-width: 0;
  border: 0; background: none; outline: none;
  font-size: var(--t-base);
}
.busca__campo input::placeholder { color: var(--cor-tinta-fraca); }

.busca__filtros {
  display: flex; align-items: center; gap: var(--e-2);
  height: var(--altura-toque);
  padding-inline: var(--e-4);
  border: 1px solid var(--cor-linha-forte);
  border-radius: var(--raio-pilula);
  background: var(--cor-superficie);
  font-size: var(--t-sm);
  font-weight: var(--peso-medio);
  cursor: pointer;
  white-space: nowrap;
}
.busca__filtros:hover { border-color: var(--cor-tinta-fraca); }

/* Categorias */
.categorias {
  display: flex;
  gap: var(--e-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: var(--e-3);
  margin-inline: calc(var(--e-4) * -1);
  padding-inline: var(--e-4);
}
.categorias::-webkit-scrollbar { display: none; }

.categoria {
  display: inline-flex; align-items: center; gap: var(--e-2);
  height: 38px;
  padding-inline: var(--e-4);
  border-radius: var(--raio-pilula);
  border: 1px solid var(--cor-linha-forte);
  background: var(--cor-superficie);
  color: var(--cor-tinta-media);
  font-size: var(--t-sm);
  font-weight: var(--peso-medio);
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--transicao);
}
.categoria:hover { border-color: var(--cor-tinta-fraca); color: var(--cor-tinta); }
/* Sem valor no seletor: as pastilhas são links e usam aria-current="page",
   enquanto os subfiltros usam "true". */
.categoria[aria-current] {
  background: var(--cor-tinta);
  border-color: var(--cor-tinta);
  color: var(--cor-fundo);
}

/* ============================================================
   Faixa da regra de atualização
   ============================================================ */

.regra {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  margin-top: var(--e-4);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--raio-md);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-linha);
}

.regra__medidor { flex: none; margin-top: 3px; }

.regra__texto { font-size: var(--t-sm); color: var(--cor-tinta-media); margin: 0; }
.regra__texto strong { color: var(--cor-tinta); font-weight: var(--peso-forte); }

/* ============================================================
   Seções
   ============================================================ */

.secao { margin-top: var(--e-6); }

.secao__cabeca {
  display: flex;
  align-items: baseline;
  gap: var(--e-3);
  margin-bottom: var(--e-3);
}

.secao__titulo {
  font-family: var(--fonte-display);
  font-size: var(--t-xl);
  font-weight: var(--peso-display);
  letter-spacing: var(--letra-apertada);
  line-height: 1.1;
  margin: 0;
}

.secao__conta {
  font-size: var(--t-xs);
  color: var(--cor-tinta-fraca);
  font-variant-numeric: tabular-nums;
}

.secao__ver {
  margin-left: auto;
  font-size: var(--t-sm);
  font-weight: var(--peso-forte);
  color: var(--cor-marca-escura);
  white-space: nowrap;
}
.secao__ver:hover { text-decoration: underline; }

/* Sub-filtro (Serviços: Todos / Meu serviço / Indicações) */
.subfiltro {
  display: flex; gap: var(--e-2); margin-bottom: var(--e-3);
  overflow-x: auto; scrollbar-width: none;
}
.subfiltro::-webkit-scrollbar { display: none; }
.subfiltro a {
  display: inline-flex; align-items: center;
  height: 32px;
  padding-inline: var(--e-3);
  border-radius: var(--raio-pilula);
  border: 1px solid var(--cor-linha);
  background: none;
  color: var(--cor-tinta-media);
  font-size: var(--t-xs);
  font-weight: var(--peso-medio);
  white-space: nowrap;
  text-decoration: none;
  transition: all var(--transicao);
}
.subfiltro a:hover { border-color: var(--cor-tinta-fraca); color: var(--cor-tinta); }
.subfiltro a[aria-current] {
  background: var(--cor-marca-fundo);
  border-color: var(--cor-marca);
  color: var(--cor-ativo-tinta);
}

/* ============================================================
   Grade de cards
   ============================================================ */

.grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-3);
}
@media (min-width: 620px)  { .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4); } }
@media (min-width: 900px)  { .grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .grade { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ============================================================
   Card do anúncio
   ============================================================ */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-md);
  overflow: hidden;
  box-shadow: var(--sombra-baixa);
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--sombra-media); }

/* --- ASSINATURA: a barra de frescor ---
   Um trilho no topo do card que vai drenando durante os 7 dias.
   É a regra Ativo → Esfriou → Inativo virada em desenho:
   dá pra ler o estado do anúncio antes de ler o texto. */
.frescor {
  height: 3px;
  background: var(--cor-linha);
  flex: none;
}
.frescor__preenche {
  height: 100%;
  background: var(--cor-ativo);
  transition: width var(--transicao);
}
.card[data-status="esfriou"] .frescor__preenche { background: var(--cor-esfriou); }
.card[data-status="inativo"] .frescor__preenche,
.card[data-status="vendido"] .frescor__preenche { background: var(--cor-inativo); }

.card__foto {
  position: relative;
  overflow: hidden;          /* nada escapa da moldura da foto */
  aspect-ratio: 4 / 3;
  background: var(--cor-superficie-2);
  display: grid;
  place-items: center;
  font-size: var(--t-3xl);
  border-bottom: 1px solid var(--cor-linha);
}

/* O card vendido continua apagado — mas o selo, não. Ele é a única coisa viva
   ali, e é o que separa "esta pessoa vendeu" de "isso aqui morreu": sem ele,
   vendido e inativo ficam com a mesma cara de card apagado.

   Por isso o véu é um ::after e não `opacity` no pai. Os selos moram DENTRO
   de .card__foto, e opacidade no pai apaga o filho junto — não há `opacity: 1`
   que desfaça isso, porque o pai é composto como um grupo só. */
.card[data-status="inativo"] .card__img,
.card[data-status="vendido"] .card__img { filter: saturate(.4); }

.card[data-status="inativo"] .card__foto::after,
.card[data-status="vendido"] .card__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cor-superficie);
  opacity: .45;
  pointer-events: none;
}

/* Faixa que os dois selos dividem. Com wrap, o marcador desce em vez de
   sobrepor o status quando o rótulo é longo ("Venda ou aluguel"). */
.card__selos {
  position: absolute;
  z-index: 1;                /* acima do véu do card apagado */
  top: var(--e-2); left: var(--e-2); right: var(--e-2);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e-1);
}

.card__selo {
  display: inline-flex; align-items: center; gap: 5px;
  flex: none;
  height: 22px;
  padding-inline: var(--e-2);
  border-radius: var(--raio-pilula);
  font-size: var(--t-2xs);
  font-weight: var(--peso-forte);
  letter-spacing: .01em;
}
.card__selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.selo--ativo   { background: var(--cor-ativo-fundo);   color: var(--cor-ativo-tinta); }
.selo--esfriou { background: var(--cor-esfriou-fundo); color: var(--cor-esfriou-tinta); }
.selo--inativo { background: var(--cor-inativo-fundo); color: var(--cor-inativo-tinta); }
/* Sólido, e não pálido como os outros: ele aparece sobre um card já apagado,
   onde fundo claro com tinta escura sumiria. É também a etiqueta vermelha que
   o grupo já usa como figurinha de "VENDIDO!" — a língua é deles. */
.selo--vendido { background: var(--cor-vendido-fundo); color: var(--cor-vendido-tinta); }

.card__marcador {
  margin-left: auto;
  height: 22px;
  padding-inline: var(--e-2);
  border-radius: var(--raio-pilula);
  font-size: var(--t-2xs);
  font-weight: var(--peso-forte);
  display: inline-flex; align-items: center;
}
.marcador--troca   { background: var(--cor-troca-fundo);   color: var(--cor-troca-tinta); }
.marcador--lojinha { background: var(--cor-lojinha-fundo); color: var(--cor-lojinha-tinta); }
.marcador--indica  { background: var(--cor-marca-fundo);   color: var(--cor-ativo-tinta); }
.marcador--imovel  { background: var(--cor-imovel-fundo);  color: var(--cor-imovel-tinta); }

/* Novo e usado são outro eixo: os marcadores acima dizem QUE TIPO de
   anúncio é (Troca, Imóvel, Indicação); estes dizem uma qualidade do
   item. Contorno em vez de preenchimento marca essa diferença sem
   disputar atenção com o selo de status, que é o que manda no card. */
.marcador--novo,
.marcador--usado {
  background: var(--cor-superficie);
  box-shadow: inset 0 0 0 1px currentColor;
}
.marcador--novo  { color: var(--cor-ativo-tinta); }
.marcador--usado { color: var(--cor-tinta-media); }

.card__corpo {
  padding: var(--e-3);
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  flex: 1;
}

.card__titulo {
  font-size: var(--t-sm);
  font-weight: var(--peso-forte);
  line-height: 1.3;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 620px) { .card__titulo { font-size: var(--t-base); } }

.card__preco {
  font-family: var(--fonte-display);
  font-size: var(--t-md);
  font-weight: var(--peso-display);
  letter-spacing: var(--letra-apertada);
  font-variant-numeric: tabular-nums;
  color: var(--cor-tinta);
  line-height: 1.1;
}
.card__preco--combinar { font-size: var(--t-sm); color: var(--cor-tinta-media); font-weight: var(--peso-forte); }

/* Segundo valor, para o imóvel que é venda E aluguel. */
.card__preco-alt {
  font-size: var(--t-xs);
  font-weight: var(--peso-forte);
  color: var(--cor-tinta-media);
  font-variant-numeric: tabular-nums;
  margin-top: calc(var(--e-1) * -1);
}

/* Linha de características do imóvel: quartos, vaga, metragem. */
.card__detalhe {
  font-size: var(--t-xs);
  color: var(--cor-tinta-media);
  margin: 0;
  line-height: 1.35;
}

.card__troca {
  font-size: var(--t-xs);
  color: var(--cor-troca-tinta);
  background: var(--cor-troca-fundo);
  padding: var(--e-1) var(--e-2);
  border-radius: var(--raio-sm);
  line-height: 1.35;
}

.card__pessoa {
  /* Quebra quando não couber. Com "Novo" cabia; com o texto honesto de
     duas palavras, o nome do vendedor era o que saía cortado — e o nome
     de quem vende importa mais que a etiqueta. */
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-1) var(--e-2);
  margin-top: auto;
  padding-top: var(--e-2);
  border-top: 1px solid var(--cor-linha);
  font-size: var(--t-xs);
  color: var(--cor-tinta-media);
  min-width: 0;
}

.avatar {
  width: 22px; height: 22px; flex: none;
  border-radius: 50%;
  background: var(--cor-marca-fundo);
  color: var(--cor-ativo-tinta);
  display: grid; place-items: center;
  font-size: var(--t-2xs);
  font-weight: var(--peso-forte);
}

.card__autor { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Crédito da indicação: "Rafael e mais 2 indicam". Ocupa a linha inteira
   porque não divide espaço com estrelas — indicação não tem avaliação, a
   contagem de quem indicou é que dá a confiança (spec 4.3.1). */
.card__credito {
  color: var(--cor-tinta-media);
  /* Diferente do nome do autor, este texto pode quebrar em duas linhas: no
     celular "Rafael e mais 2 indicam" não cabe numa linha só, e cortar em
     "Rafael e mais 2 indic..." esconde justamente a informação. Passando de
     duas linhas, aí sim corta. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.3;
  text-wrap: balance;
}

.nota {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--t-2xs);
  font-weight: var(--peso-forte);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.nota svg { color: var(--cor-estrela); }
.nota--nova { color: var(--cor-tinta-fraca); font-weight: var(--peso-medio); }

.card__rodape {
  display: flex; align-items: center; gap: var(--e-2);
  padding: 0 var(--e-3) var(--e-3);
}

/* `flex: none` + `nowrap` porque o botão ao lado tem `margin-left: auto` e,
   sem isso, é a data que cede o espaço: "ontem" cabia, "há 2 dias" quebrava em
   duas linhas e "há 11 dias" em três, empilhado. */
.card__data {
  flex: none;
  white-space: nowrap;
  font-size: var(--t-2xs);
  color: var(--cor-tinta-fraca);
  font-variant-numeric: tabular-nums;
}

.zap {
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  height: 32px;
  padding-inline: var(--e-3);
  border-radius: var(--raio-pilula);
  border: 0;
  background: var(--cor-whatsapp);
  color: #fff;
  font-size: var(--t-xs);
  font-weight: var(--peso-forte);
  cursor: pointer;
  transition: filter var(--transicao);
}
.zap:hover { filter: brightness(1.08); }
.zap__texto { display: none; }
@media (min-width: 620px) { .zap__texto { display: inline; } }

/* Deixou de ser um rótulo morto e virou a porta (Etapa 5): leva para
   /entrar e volta para o mesmo lugar. Por isso não é mais
   `cursor: not-allowed` — a coisa é clicável e resolve o problema.
   O tracejado fica: comunica "ainda não está liberado" sem gritar. */
.zap--bloqueado {
  background: var(--cor-superficie-2);
  color: var(--cor-tinta-media);
  border: 1px dashed var(--cor-linha-forte);
  cursor: pointer;
}

.zap--bloqueado:hover {
  color: var(--cor-marca-escura);
  border-color: var(--cor-marca);
  border-style: solid;
  background: var(--cor-marca-fundo);
}

/* O texto do botão bloqueado aparece SEMPRE, inclusive no celular.

   O `.zap__texto` some abaixo de 620px, e para o botão verde isso está
   certo: um botão verde com o símbolo do WhatsApp se explica sozinho.
   Este não. Sem o texto, sobrava um cadeado cinza tracejado — que não
   diz o que é, não diz que dá para clicar, e some no meio do card.
   É o único caminho de quem chega sem se identificar: precisa ler. */
.zap--bloqueado {
  /* "Ver o contato" tem três palavras e quebrava em duas linhas,
     inchando o rodapé do card. Uma linha só, e o rótulo encolhe
     junto com o botão. */
  white-space: nowrap;
  padding-inline: var(--e-3);
  gap: var(--e-1);
}

.zap--bloqueado .zap__texto {
  display: inline;
  font-size: var(--t-2xs);
  white-space: nowrap;
}

@media (min-width: 620px) {
  .zap--bloqueado .zap__texto { font-size: inherit; }
}

/* ============================================================
   Card de lojinha — um por vendedor, não por produto
   ============================================================ */

.lojinhas {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--e-3);
}
@media (min-width: 620px) { .lojinhas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); } }
@media (min-width: 1120px) { .lojinhas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.lojinha {
  display: flex;
  gap: var(--e-3);
  padding: var(--e-4);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-linha);
  border-left: 3px solid var(--cor-lojinha);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-baixa);
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.lojinha:hover { transform: translateY(-2px); box-shadow: var(--sombra-media); }

.lojinha__avatar {
  width: 48px; height: 48px; flex: none;
  border-radius: 50%;
  background: var(--cor-lojinha-fundo);
  color: var(--cor-lojinha-tinta);
  display: grid; place-items: center;
  font-family: var(--fonte-display);
  font-weight: var(--peso-display);
  font-size: var(--t-md);
}

.lojinha__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--e-1); }
.lojinha__nome { font-size: var(--t-md); font-weight: var(--peso-forte); margin: 0; line-height: 1.2; }
.lojinha__oque { font-size: var(--t-sm); color: var(--cor-tinta-media); margin: 0; }
/* A linha de baixo da lojinha precisa aguentar textos de tamanhos bem
   diferentes ("4,9 · 31" e "Novo · sem avaliações") sem estourar. */
.lojinha__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  margin-top: var(--e-2);
}

.lojinha__etiqueta {
  height: 22px;
  padding-inline: var(--e-2);
  border-radius: var(--raio-pilula);
  font-size: var(--t-2xs);
  font-weight: var(--peso-forte);
  display: inline-flex;
  align-items: center;
  background: var(--cor-lojinha-fundo);
  color: var(--cor-lojinha-tinta);
  flex: none;
}

.lojinha__nota { margin-left: 0; }

.lojinha .zap { margin-left: auto; }

/* ============================================================
   Avisos
   ============================================================ */

.avisos { display: flex; flex-direction: column; gap: var(--e-2); }

.aviso {
  display: flex; gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-md);
}

.aviso__icone {
  width: 34px; height: 34px; flex: none;
  border-radius: var(--raio-sm);
  background: var(--cor-aviso-fundo);
  display: grid; place-items: center;
  font-size: var(--t-md);
}

.aviso__titulo { font-size: var(--t-base); font-weight: var(--peso-forte); margin: 0 0 2px; line-height: 1.3; }
.aviso__texto { font-size: var(--t-sm); color: var(--cor-tinta-media); margin: 0; }
.aviso__data { font-size: var(--t-2xs); color: var(--cor-tinta-fraca); margin-top: var(--e-1); display: block; }

/* ============================================================
   Barra inferior (celular) e rodapé
   ============================================================ */

.barra-inferior {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--cor-superficie);
  border-top: 1px solid var(--cor-linha);
  padding-bottom: env(safe-area-inset-bottom);
}

.barra-inferior a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  height: var(--altura-barra-inferior);
  font-size: var(--t-2xs);
  font-weight: var(--peso-medio);
  color: var(--cor-tinta-fraca);
}
.barra-inferior a[aria-current="page"] { color: var(--cor-marca-escura); }

/* Cadastro no meio da barra: no celular é aqui que ele mora, e o botão
   do topo se esconde — o mesmo botão duas vezes na mesma tela confunde. */
.barra-inferior .cadastro-inferior { color: var(--cor-marca-escura); font-weight: var(--peso-forte); }

.rodape {
  margin-top: var(--e-7);
  padding-block: var(--e-5);
  border-top: 1px solid var(--cor-linha);
  font-size: var(--t-xs);
  color: var(--cor-tinta-fraca);
  text-align: center;
  text-wrap: pretty;
}
.rodape p + p { margin-top: var(--e-2); }
.rodape__autoria strong { color: var(--cor-tinta-media); font-weight: var(--peso-forte); }

/* ============================================================
   Desktop: navegação no topo, sem barra inferior
   ============================================================ */

@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .barra-inferior { display: none; }

  .topo__linha { min-height: 68px; }

  .topo__nav {
    display: flex;
    gap: var(--e-1);
    margin-left: var(--e-5);
  }
  .topo__nav a {
    padding: var(--e-2) var(--e-3);
    border-radius: var(--raio-sm);
    font-size: var(--t-sm);
    font-weight: var(--peso-medio);
    color: var(--cor-tinta-media);
  }
  .topo__nav a:hover { background: var(--cor-superficie-2); color: var(--cor-tinta); }
  .topo__nav a[aria-current="page"] { color: var(--cor-tinta); font-weight: var(--peso-forte); }

  /* As pastilhas repetiriam o menu do topo, item por item. No celular elas são
     a única navegação; aqui, com o menu à mostra, sobram. */
  .categorias { display: none; }

  .busca { max-width: 560px; }

  .botao-cadastro { padding-inline: var(--e-4); }

  .secao__titulo { font-size: var(--t-2xl); }
  .secao { margin-top: var(--e-7); }
}

/* Cadastro: presente no celular e no computador. É contorno, não
   preenchido — ainda não é a ação principal da página (chega na V2). */
.botao-cadastro {
  display: none;   /* no celular quem manda é a barra de baixo */
  align-items: center;
  gap: var(--e-2);
  height: var(--altura-toque);
  padding-inline: var(--e-3);
  border-radius: var(--raio-pilula);
  border: 1px solid var(--cor-marca);
  background: var(--cor-marca-fundo);
  color: var(--cor-ativo-tinta);
  font-size: var(--t-sm);
  font-weight: var(--peso-forte);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transicao);
}
.botao-cadastro:hover { background: var(--cor-marca); color: var(--cor-marca-tinta); }

/* ============================================================
   Páginas de categoria — cabeça, controles e estado vazio
   ============================================================ */

.cabeca-categoria {
  display: flex;
  align-items: baseline;
  gap: var(--e-3);
  flex-wrap: wrap;
  margin-bottom: var(--e-4);
}

.cabeca-categoria__titulo {
  font-family: var(--fonte-display);
  font-size: var(--t-xl);
  font-weight: var(--peso-display);
  letter-spacing: -0.02em;
  color: var(--cor-tinta);
}

.cabeca-categoria__conta {
  font-size: var(--t-xs);
  color: var(--cor-tinta-fraca);
  font-variant-numeric: tabular-nums;
}

.controles {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  margin-bottom: var(--e-4);
}

/* No celular o rótulo vai em cima: ao lado, ele roubava largura e as pastilhas
   já começavam cortadas na borda direita. */
.controle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-2);
  min-width: 0;
}

.controle__rotulo {
  flex: none;
  font-size: var(--t-2xs);
  font-weight: var(--peso-forte);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cor-tinta-fraca);
}

/* Rola na horizontal no celular em vez de quebrar em três fileiras, que
   empurrariam os anúncios para fora da primeira tela. */
.controle__opcoes {
  display: flex;
  gap: var(--e-2);
  overflow-x: auto;
  scrollbar-width: none;
  width: 100%;
  min-width: 0;
  /* Sangra até a borda da tela para a última pastilha não parecer cortada
     por engano — fica claro que a fileira rola. */
  margin-inline: calc(var(--e-4) * -1);
  padding-inline: var(--e-4);
}
.controle__opcoes::-webkit-scrollbar { display: none; }

.controle__opcoes a {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding-inline: var(--e-3);
  border-radius: var(--raio-pilula);
  border: 1px solid var(--cor-linha);
  color: var(--cor-tinta-media);
  font-size: var(--t-xs);
  font-weight: var(--peso-medio);
  white-space: nowrap;
  text-decoration: none;
  transition: all var(--transicao);
}
.controle__opcoes a:hover { border-color: var(--cor-tinta-fraca); color: var(--cor-tinta); }
.controle__opcoes a[aria-current] {
  background: var(--cor-tinta);
  border-color: var(--cor-tinta);
  color: var(--cor-fundo);
}

.mais-filtros {
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-md);
  padding: var(--e-3);
}

.mais-filtros summary {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-xs);
  font-weight: var(--peso-forte);
  color: var(--cor-tinta-media);
  cursor: pointer;
  list-style: none;
}
.mais-filtros summary::-webkit-details-marker { display: none; }
.mais-filtros[open] summary { margin-bottom: var(--e-3); }

.mais-filtros__marca {
  padding: 2px var(--e-2);
  border-radius: var(--raio-pilula);
  background: var(--cor-marca-fundo);
  color: var(--cor-ativo-tinta);
  font-size: var(--t-2xs);
  font-weight: var(--peso-forte);
}

.mais-filtros .controle + .controle { margin-top: var(--e-3); }

.resultado-busca {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin-bottom: var(--e-3);
  font-size: var(--t-sm);
  color: var(--cor-tinta-media);
}
.resultado-busca__limpar { color: var(--cor-marca); font-weight: var(--peso-forte); }

/* Vazio é convite para agir: diz o que houve e oferece a saída. */
.vazio {
  padding: var(--e-7) var(--e-4);
  text-align: center;
  border: 1px dashed var(--cor-linha-forte);
  border-radius: var(--raio-lg);
}

.vazio__titulo {
  font-family: var(--fonte-display);
  font-size: var(--t-md);
  font-weight: var(--peso-forte);
  color: var(--cor-tinta);
  margin-bottom: var(--e-2);
}

.vazio__texto {
  font-size: var(--t-sm);
  color: var(--cor-tinta-media);
  max-width: 42ch;
  margin: 0 auto var(--e-4);
  line-height: 1.5;
}

.vazio__acao {
  display: inline-flex;
  align-items: center;
  height: var(--altura-toque);
  padding-inline: var(--e-5);
  border-radius: var(--raio-pilula);
  background: var(--cor-marca);
  color: var(--cor-marca-tinta);
  font-size: var(--t-sm);
  font-weight: var(--peso-forte);
  text-decoration: none;
}

@media (min-width: 700px) {
  .cabeca-categoria__titulo { font-size: var(--t-2xl); }
  .controles { flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--e-4); }
  /* Sobra largura: o rótulo volta para o lado das pastilhas. */
  .controle { flex-direction: row; align-items: center; gap: var(--e-3); }
  .controle__opcoes { width: auto; margin-inline: 0; padding-inline: 0; overflow: visible; flex-wrap: wrap; }
  .mais-filtros { flex: none; }
  .mais-filtros .controle { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Fila de conferência (/pendencias)

   Não é uma listagem, é uma triagem: cada item é uma afirmação
   tirada de uma conversa, com uma origem e um buraco. O que
   organiza a tela é o que está FALTANDO — é isso que decide se
   dá para publicar. Por isso "falta" tem cor, borda e posição
   fixa (last thing read before deciding), e o resto é quieto.
   ============================================================ */

.fila-pagina { padding-block: var(--e-5) var(--e-7); }

/* ---- Placar ---- */

.placar { margin-bottom: var(--e-6); }

.placar__numero {
  font-family: var(--fonte-display);
  font-weight: var(--peso-display);
  font-size: var(--t-3xl);
  line-height: 1;
  letter-spacing: var(--letra-apertada);
  color: var(--cor-marca);
  margin: 0;
}

.placar__titulo {
  font-family: var(--fonte-display);
  font-size: var(--t-xl);
  font-weight: var(--peso-forte);
  letter-spacing: var(--letra-apertada);
  margin: var(--e-1) 0 var(--e-2);
}

.placar__resumo {
  margin: 0;
  color: var(--cor-tinta-media);
  font-size: var(--t-sm);
  max-width: 52ch;
}

.placar__contas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  list-style: none;
  margin: var(--e-4) 0 0;
  padding: 0;
}

.conta {
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-3);
  border-radius: var(--raio-pilula);
  font-size: var(--t-sm);
}
.conta__n { font-weight: var(--peso-forte); font-variant-numeric: tabular-nums; }
.conta--pronto { background: var(--cor-ativo-fundo); color: var(--cor-ativo-tinta); }
.conta--falta  { background: var(--cor-esfriou-fundo); color: var(--cor-esfriou-tinta); }

/* ---- Seções ---- */

.secao-fila { margin-bottom: var(--e-6); }

.secao-fila__titulo {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-family: var(--fonte-display);
  font-size: var(--t-2xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--letra-larga);
  text-transform: uppercase;
  color: var(--cor-tinta-fraca);
  margin: 0 0 var(--e-3);
}

.secao-fila__conta {
  font-variant-numeric: tabular-nums;
  color: var(--cor-tinta-media);
  background: var(--cor-superficie-2);
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-pilula);
  padding: 1px var(--e-2);
  letter-spacing: 0;
}

/* ---- Item ---- */

.revisao { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }

.item {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-baixa);
  overflow: hidden;
}

/* A borda esquerda é o sinal: item com buraco não passa despercebido
   numa varredura rápida, que é como ela vai olhar 42 itens. */
.item--falta { border-left: 3px solid var(--cor-esfriou); }

.item__corpo {
  display: flex;
  gap: var(--e-3);
  padding: var(--e-4);
}

.item__foto {
  flex: none;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  font-size: var(--t-lg);
  background: var(--cor-superficie-2);
  border-radius: var(--raio-sm);
}

.item__texto { min-width: 0; }

.item__titulo {
  font-family: var(--fonte-display);
  font-size: var(--t-md);
  font-weight: var(--peso-forte);
  letter-spacing: var(--letra-apertada);
  margin: 0 0 var(--e-1);
  overflow-wrap: anywhere;
}

.item__preco {
  margin: 0 0 var(--e-2);
  font-weight: var(--peso-forte);
  color: var(--cor-marca);
}

.item__detalhe {
  margin: 0 0 var(--e-2);
  font-size: var(--t-sm);
  color: var(--cor-tinta-media);
}

.item__origem {
  margin: 0;
  font-size: var(--t-xs);
  color: var(--cor-tinta-fraca);
}

.item__falta {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin: var(--e-3) 0 0;
  font-size: var(--t-xs);
  font-weight: var(--peso-medio);
  color: var(--cor-esfriou-tinta);
}
.item__falta svg { flex: none; }

.item__zap {
  margin: var(--e-2) 0 0;
  font-size: var(--t-xs);
  color: var(--cor-tinta-fraca);
}
.item__zap a { color: var(--cor-whatsapp); font-weight: var(--peso-medio); }
.item__zap a:hover { text-decoration: underline; }

/* ---- Decisão ---- */

.item__acoes {
  display: flex;
  border-top: 1px solid var(--cor-linha);
}
.item__acoes form { flex: 1; display: flex; }

.decidir {
  flex: 1;
  min-height: var(--altura-toque);
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--fonte-display);
  font-size: var(--t-sm);
  font-weight: var(--peso-forte);
  letter-spacing: var(--letra-apertada);
  transition: background var(--transicao);
}

.decidir--sim { color: var(--cor-ativo-tinta); }
.decidir--sim:hover { background: var(--cor-ativo-fundo); }

.decidir--nao { color: var(--cor-tinta-media); border-left: 1px solid var(--cor-linha); }
.decidir--nao:hover { background: var(--cor-superficie-2); color: var(--cor-tinta); }

/* ---- Fila vazia ---- */

.fila-vazia {
  background: var(--cor-superficie);
  border: 1px dashed var(--cor-linha-forte);
  border-radius: var(--raio-md);
  padding: var(--e-6) var(--e-4);
  text-align: center;
  color: var(--cor-tinta-media);
}
.fila-vazia__titulo {
  font-family: var(--fonte-display);
  font-size: var(--t-lg);
  font-weight: var(--peso-forte);
  color: var(--cor-tinta);
  margin: 0 0 var(--e-2);
}
.botao-texto { color: var(--cor-marca); font-weight: var(--peso-medio); }
.botao-texto:hover { text-decoration: underline; }

/* ---- Tela grande: duas colunas, decisão à direita ---- */

@media (min-width: 720px) {
  .placar__numero { font-size: 4rem; }

  .item { display: grid; grid-template-columns: 1fr auto; align-items: stretch; }
  .item__acoes { border-top: 0; border-left: 1px solid var(--cor-linha); flex-direction: column; }
  .item__acoes form { flex: 1; }
  .decidir { padding-inline: var(--e-5); }
  .decidir--nao { border-left: 0; border-top: 1px solid var(--cor-linha); }
}

/* A anotação de conferência: recuada e cinza, para ler quando bater
   dúvida e sumir do caminho quando não bater. Não existe na página
   publicada — é texto de bastidor. */
.item__nota {
  margin: var(--e-3) 0 0;
  padding-left: var(--e-3);
  border-left: 2px solid var(--cor-linha);
  font-size: var(--t-xs);
  color: var(--cor-tinta-fraca);
  font-style: italic;
}

/* ============================================================
   Foto de verdade no card

   Enquanto era emoji, a área da foto era um bloco decorativo. Com
   imagem ela vira conteúdo: é o que faz a pessoa parar no card.
   ============================================================ */

.card__foto--imagem { padding: 0; }

/* A imagem cobre a caixa da foto e nada além dela.

   Ancorada nos quatro cantos de propósito: `height: 100%` não funciona
   aqui, porque a altura da caixa vem de `aspect-ratio` e o navegador
   trata isso como altura indefinida — a imagem caía de volta na
   proporção dela (720x720), ficava 171px numa caixa de 128px e vazava
   por cima e por baixo do card. */
.card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Na fila a foto é maior que o emoji era: é o que permite julgar o
   anúncio de relance, sem abrir nada. */
.item__foto--imagem {
  width: 76px; height: 76px;
  object-fit: cover;
  border-radius: var(--raio-sm);
  background: var(--cor-superficie-2);
}

/* Crédito de quem indicou a lojinha: quieto, mas antes da etiqueta —
   quem está vouching pelo negócio é informação de confiança, e vem
   junto do nome, não no rodapé. */
.lojinha__credito {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin: var(--e-2) 0 0;
  font-size: var(--t-xs);
  color: var(--cor-tinta-media);
}

/* O selo "Indicação" aqui é o PRIMEIRO da linha, e no card comum ele é o
   último — lá o `margin-left: auto` existe para empurrá-lo para longe do selo
   de status. Reaproveitando a classe, aquele `auto` abria um buraco à esquerda
   e jogava "Fulana indica" para a ponta direita. */
.lojinha__credito .card__marcador { margin-left: 0; }

/* O asterisco dos anúncios inventados — andaime, sai com eles.
   Laranja de destaque e um pouco acima da linha: precisa ser achado
   varrendo a página, sem competir com o nome que está do lado. */
.e-exemplo {
  color: var(--cor-destaque);
  font-weight: 700;
  text-decoration: none;   /* o padrão do <abbr> é sublinhado pontilhado */
  border: 0;
  cursor: help;
  margin-left: 1px;
  vertical-align: super;
  font-size: 0.85em;
  line-height: 0;
}

/* ============================================================
   A PORTA (Etapa 5)

   Página sozinha: sem topo, sem busca, sem menu. Quem está na porta
   não está navegando.

   Todo valor sai do tema. O modo escuro vem de graça porque as
   variáveis já trocam sozinhas em tema.css.
   ============================================================ */

.corpo-porta {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--e-4);
  background: var(--cor-fundo);
}

.porta {
  width: 100%;
  max-width: 25rem;      /* ~400px: a medida de uma coluna de celular */
}

.porta__cartao {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-media);
  padding: var(--e-6) var(--e-5) var(--e-5);
}

.porta__marca {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  margin-bottom: var(--e-5);
  color: var(--cor-tinta-media);
  font-size: var(--t-sm);
  font-weight: var(--peso-forte);
  text-decoration: none;
}

/* ---- O eixo da página: o nome do grupo ----
   O que convence não é o design, é o reconhecimento. Só quem é do
   Residencial Aquarius lê "Amigos do Aquarius" e sabe que está no
   lugar certo. Por isso o nome do grupo é o maior texto da tela, e
   não a palavra "Entrar". */

.porta__eixo {
  margin: 0;
  font-size: var(--t-xs);
  font-weight: var(--peso-medio);
  letter-spacing: var(--letra-larga);
  text-transform: uppercase;
  color: var(--cor-tinta-fraca);
}

.porta__grupo {
  margin: var(--e-1) 0 var(--e-4);
  font-family: var(--fonte-display);
  font-size: var(--t-2xl);
  font-weight: var(--peso-display);
  line-height: var(--entrelinha-apertada);
  letter-spacing: var(--letra-apertada);
  color: var(--cor-tinta);
  text-wrap: balance;
}

.porta__razao {
  margin: 0 0 var(--e-5);
  font-size: var(--t-base);
  line-height: var(--entrelinha-normal);
  color: var(--cor-tinta-media);
}

/* ---- O aviso de quem não foi encontrado ----
   Laranja, não vermelho. A pessoa quase sempre É do grupo: trocou de
   número, digitou errado, ou entrou depois do último print. Vermelho
   diria "você não devia estar aqui", que na maioria das vezes é falso. */

.porta__aviso {
  margin-bottom: var(--e-5);
  padding: var(--e-3) var(--e-4);
  border-left: 3px solid var(--cor-esfriou);
  border-radius: var(--raio-sm);
  background: var(--cor-esfriou-fundo);
}

.porta__aviso-titulo {
  margin: 0 0 var(--e-1);
  font-size: var(--t-sm);
  font-weight: var(--peso-forte);
  color: var(--cor-esfriou-tinta);
}

.porta__aviso-texto {
  margin: 0;
  font-size: var(--t-sm);
  line-height: var(--entrelinha-normal);
  color: var(--cor-esfriou-tinta);
}

/* ---- Os dois campos ---- */

.porta__form {
  display: grid;
  gap: var(--e-4);
}

.campo {
  display: grid;
  gap: var(--e-2);
}

.campo__rotulo {
  font-size: var(--t-sm);
  font-weight: var(--peso-forte);
  color: var(--cor-tinta);
}

.campo__caixa {
  width: 100%;
  min-height: var(--altura-toque);
  padding: var(--e-3);
  border: 1px solid var(--cor-linha-forte);
  border-radius: var(--raio-sm);
  background: var(--cor-superficie-2);
  color: var(--cor-tinta);
  font-family: var(--fonte-texto);
  /* 16px cravado: abaixo disso o Safari do iPhone dá zoom sozinho ao
     focar o campo, e a pessoa perde a página de vista no meio de
     digitar o telefone. É o único tamanho fora da escala, e é por isso. */
  font-size: 1rem;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}

.campo__caixa::placeholder { color: var(--cor-tinta-fraca); }

.campo__caixa:focus-visible {
  outline: none;
  border-color: var(--cor-marca);
  box-shadow: 0 0 0 3px var(--cor-marca-fundo);
}

.campo__dica {
  font-size: var(--t-xs);
  color: var(--cor-tinta-fraca);
}

.botao-principal {
  min-height: var(--altura-toque);
  margin-top: var(--e-1);
  padding: var(--e-3) var(--e-5);
  border: 0;
  border-radius: var(--raio-sm);
  background: var(--cor-marca);
  color: var(--cor-marca-tinta);
  font-family: var(--fonte-texto);
  font-size: var(--t-md);
  font-weight: var(--peso-forte);
  cursor: pointer;
  transition: background var(--transicao);
}

.botao-principal:hover { background: var(--cor-marca-escura); }

.botao-principal:focus-visible {
  outline: 2px solid var(--cor-marca);
  outline-offset: 2px;
}

/* ---- A promessa e a saída ---- */

.porta__promessa {
  margin: var(--e-5) 0 0;
  padding-top: var(--e-4);
  border-top: 1px solid var(--cor-linha);
  font-size: var(--t-xs);
  line-height: var(--entrelinha-normal);
  color: var(--cor-tinta-fraca);
}

/* Ninguém fica preso na porta: dá para voltar e continuar olhando os
   anúncios sem se identificar. Só o contato é que fica guardado. */
/* Sublinhado de propósito: no print ele parecia uma frase solta, e não
   uma saída. Quem hesitou na porta precisa ENXERGAR que dá para voltar
   e continuar olhando os anúncios sem se identificar. */
.porta__escapar {
  display: inline-block;
  margin-top: var(--e-3);
  font-size: var(--t-sm);
  color: var(--cor-marca-escura);
  font-weight: var(--peso-medio);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.porta__escapar:hover { color: var(--cor-tinta); }

@media (prefers-reduced-motion: reduce) {
  .campo__caixa, .botao-principal { transition: none; }
}

/* ============================================================
   A página de acessos (Etapa 5) — tela da Camila
   ============================================================ */

/* Quatro números lado a lado. Bloco próprio e não `.placar`, que já
   existe na fila com outra estrutura (título + resumo) — dois blocos
   com o mesmo nome e formatos diferentes é onde o CSS começa a se
   cancelar. */
.numeros {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* celular: 2 × 2 */
  gap: var(--e-3);
  margin-bottom: var(--e-5);
}

@media (min-width: 40rem) {
  .numeros { grid-template-columns: repeat(4, 1fr); }
}

.numeros__item {
  display: grid;
  gap: var(--e-1);
  padding: var(--e-4);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-md);
}

.numeros__valor {
  font-family: var(--fonte-display);
  font-size: var(--t-2xl);
  font-weight: var(--peso-display);
  line-height: 1;
  letter-spacing: var(--letra-apertada);
  color: var(--cor-tinta);
}

.numeros__rotulo {
  font-size: var(--t-xs);
  color: var(--cor-tinta-media);
  line-height: 1.3;
}

.acessos__nota {
  margin: 0 0 var(--e-5);
  max-width: 60ch;
  font-size: var(--t-sm);
  line-height: var(--entrelinha-normal);
  color: var(--cor-tinta-media);
}

/* A tabela rola sozinha no celular em vez de esticar a página inteira —
   quatro colunas de data não cabem em 360px de largura, e o corpo do
   site nunca deve rolar para o lado. */
.tabela-rolagem {
  overflow-x: auto;
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-md);
  background: var(--cor-superficie);
}

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
  white-space: nowrap;
}

.tabela th, .tabela td {
  padding: var(--e-3) var(--e-4);
  text-align: left;
  border-bottom: 1px solid var(--cor-linha);
}

.tabela thead th {
  font-size: var(--t-xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--letra-larga);
  text-transform: uppercase;
  color: var(--cor-tinta-fraca);
  background: var(--cor-superficie-2);
}

.tabela tbody tr:last-child th,
.tabela tbody tr:last-child td { border-bottom: 0; }

.tabela tbody th {
  font-weight: var(--peso-forte);
  color: var(--cor-tinta);
}

.tabela td { color: var(--cor-tinta-media); }

.marcador {
  display: inline-block;
  padding: 2px var(--e-2);
  border-radius: var(--raio-pilula);
  font-size: var(--t-2xs);
  font-weight: var(--peso-forte);
}

.marcador--ativo {
  background: var(--cor-ativo-fundo);
  color: var(--cor-ativo-tinta);
}

/* Mesmo laranja de "Esfriou" nos anúncios, e de propósito: é o mesmo
   conceito — parou de dar sinal de vida — e o corte é o mesmo 30 dias. */
.marcador--sumiu {
  background: var(--cor-esfriou-fundo);
  color: var(--cor-esfriou-tinta);
}