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

/* ============================================================
   Quem responde pelo anúncio
   Faixa fixa entre o cabeçalho e o conteúdo, em TODA página.

   Fica ao lado da `.regra` na home, então precisa se distinguir dela
   sem gritar: a regra é branca com borda fina; esta é o verde da marca
   com um traço cheio à esquerda. A primeira frase leva peso e tinta
   cheia para ser lida de relance por quem está passando direto; o
   resto fica em tinta média, para quem parar.
   ============================================================ */

.quem-responde {
  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-marca-fundo);
  border-left: 3px solid var(--cor-marca);
}

.quem-responde__icone {
  flex: none;
  margin-top: 2px;
  color: var(--cor-marca-escura);
}

.quem-responde__texto {
  margin: 0;
  font-size: var(--t-sm);
  line-height: var(--entrelinha-normal);
  color: var(--cor-tinta-media);
}

.quem-responde__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;
}

/* A linha que explica o grupo, embaixo do título ("O dono está procurando").
   Sobe grudada no cabeçalho — o `margin-bottom` da seção já dá o respiro de
   baixo, e um segundo espaço aqui faria a frase parecer solta, de outro
   assunto que não o título logo acima. */
.secao__explicacao {
  margin: calc(var(--e-3) * -1) 0 var(--e-3);
  font-size: var(--t-sm);
  color: var(--cor-tinta-media);
}

.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)); } }

/* ============================================================
   Paginação (pendência 36)

   A mesma pastilha do subfiltro/controles, para a barra de páginas falar
   a língua visual do resto da categoria em vez de parecer um enxerto. Toque
   de 38px (dá para acertar com o dedo), e o verde da marca marca "você está
   aqui", igual ao aria-current do subfiltro.
   ============================================================ */

.paginacao {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--e-2);
  margin-top: var(--e-6);
}

.paginacao__n,
.paginacao__seta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding-inline: var(--e-2);
  border-radius: var(--raio-pilula);
  border: 1px solid var(--cor-linha);
  color: var(--cor-tinta-media);
  font-size: var(--t-sm);
  font-weight: var(--peso-medio);
  text-decoration: none;
  transition: all var(--transicao);
}

.paginacao__n:hover,
.paginacao__seta:hover {
  border-color: var(--cor-tinta-fraca);
  color: var(--cor-tinta);
}

.paginacao__n--atual {
  background: var(--cor-marca-fundo);
  border-color: var(--cor-marca);
  color: var(--cor-ativo-tinta);
  font-weight: var(--peso-forte);
}

/* Seta que não leva a lugar nenhum (a 1ª página não tem "anterior"): apagada
   e sem borda, para não parecer um botão que não faz nada. */
.paginacao__seta--off,
.paginacao__seta--off:hover {
  color: var(--cor-tinta-fraca);
  border-color: transparent;
  cursor: default;
}

.paginacao__gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 38px;
  color: var(--cor-tinta-fraca);
}

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

/* ============================================================
   Card de PÁGINA (V3) — a página da pessoa, não um item à venda.
   Largo e horizontal, para se destacar da grade de anúncios: a foto
   (retrato) de quem é à esquerda, e à direita quem é, o que faz e o
   convite para entrar. O card inteiro é o link. */
/* No celular, 1 por linha (o card é horizontal e largo). No computador,
   até 3 lado a lado — não mais, porque o card precisa de largura para o
   texto caber ao lado da foto. */
.grade-paginas { display: grid; grid-template-columns: 1fr; gap: var(--e-4); }
@media (min-width: 620px) { .grade-paginas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .grade-paginas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.pagina-card {
  position: relative;
  display: flex;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-lg);
  overflow: hidden;
  box-shadow: var(--sombra-baixa);
  color: inherit;
  text-decoration: none;
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.pagina-card:hover { transform: translateY(-2px); box-shadow: var(--sombra-media); }
.pagina-card:focus-visible { outline: 2px solid var(--cor-marca); outline-offset: 2px; }

.pagina-card__foto {
  position: relative;
  flex: none;
  width: 34%;
  max-width: 150px;
  align-self: stretch;
  background: var(--cor-superficie-2);
}
.pagina-card__foto img {
  /* Absoluta de propósito: assim a foto (que é retrato) NÃO empurra a
     altura do card. Quem manda na altura é o texto; a foto preenche o
     que sobra com `cover`, e o `object-position` favorece o alto, onde
     está o rosto. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  display: block;
}

.pagina-card__selo {
  position: absolute;
  top: var(--e-2);
  left: var(--e-2);
  background: var(--cor-marca);
  color: var(--cor-marca-tinta);
  font-size: var(--t-2xs);
  font-weight: var(--peso-forte);
  padding: 2px var(--e-2);
  border-radius: var(--raio-pilula);
  letter-spacing: .02em;
}

.pagina-card__corpo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--e-3) var(--e-4);
  min-width: 0;
}
.pagina-card__nome {
  font-family: var(--fonte-display);
  font-size: var(--t-lg);
  font-weight: var(--peso-forte);
  line-height: 1.1;
  color: var(--cor-tinta);
}
.pagina-card__papel {
  margin-top: var(--e-1);
  font-size: var(--t-xs);
  font-weight: var(--peso-forte);
  color: var(--cor-marca-escura);
}
.pagina-card__descricao {
  margin-top: var(--e-1);
  font-size: var(--t-sm);
  color: var(--cor-tinta-media);
}
.pagina-card__ver {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  margin-top: var(--e-2);
  color: var(--cor-marca);
  font-weight: var(--peso-forte);
  font-size: var(--t-sm);
}
.pagina-card__ver svg { transition: transform var(--transicao); }
.pagina-card:hover .pagina-card__ver svg { transform: translateX(3px); }

/* ---------------- O card inteiro é clicável (Etapa 9b) ----------------

   O <a> fica no TÍTULO, e um ::after esticado cobre o card inteiro.
   Assim o dedo acerta em qualquer lugar, mas quem o leitor de tela
   anuncia é "link: Sofá 3 lugares" — e não o card inteiro lido de uma
   vez, que é o que um <a> em volta de tudo faria.

   Sem `inset: 0` no card e sim no ::after: o card já é
   `position: relative` desde sempre, para os selos sobre a foto. */
.card__link { color: inherit; text-decoration: none; }

.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.card__link:hover { text-decoration: underline; text-underline-offset: 2px; }

/* O foco tem que aparecer no CARD, não só nas letras do título: a
   área clicável é o card, e o contorno em volta de duas palavras no
   meio dele confundiria quem navega por teclado. */
.card:has(.card__link:focus-visible),
.lojinha:has(.card__link:focus-visible) {
  outline: 3px solid var(--cor-marca);
  outline-offset: 2px;
}
.card__link:focus-visible { outline: none; }

/* O botão do WhatsApp e o "Ver o contato" precisam ficar ACIMA da
   capa do link, senão o card engole os dois e ninguém mais fala com
   o vizinho — que é a única coisa que este site faz. */
.card__rodape { position: relative; z-index: 2; }

/* --- 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,
.card[data-status="encontrado"] .card__img { filter: saturate(.4); }

.card[data-status="inativo"] .card__foto::after,
.card[data-status="vendido"] .card__foto::after,
.card[data-status="encontrado"] .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); }

/* Animal encontrado. Sólido como o "Vendido" e pela mesma razão — mora sobre
   um card já apagado —, mas no verde da marca, porque a notícia é boa. É o
   único selo do site que celebra alguma coisa. */
.selo--encontrado { background: var(--cor-marca); color: var(--cor-marca-tinta); }

/* Perdido: o laranja que o site já usa para "atenção, isto está em aberto" —
   o mesmo de "Esfriou". Não é o vermelho de "Vendido", que é fim de linha;
   um bicho perdido é o contrário de fim de linha. Os dois selos de animal
   têm o MESMO peso visual de propósito: a Camila não quis um discreto e um
   forte, e ela está certa — quem lê precisa achar os dois com a mesma
   facilidade. */
.selo--perdido { background: var(--cor-esfriou-fundo); color: var(--cor-esfriou-tinta); }

/* Achado: o bicho está seguro com alguém, e o que falta é o dono aparecer.
   Nem o laranja de "Perdido" (que é urgência) nem o verde de "Encontrado"
   (que é fim feliz) — é o roxo que o site já usa para "situação diferente,
   sem alarme". Três cores para três situações, e nenhuma se confunde com a
   vizinha nem no claro nem no escuro. */
.selo--achado { background: var(--cor-troca-fundo); color: var(--cor-troca-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--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;
}

/* O serviço, quando o título é a pessoa (meu serviço lidera pelo nome). */
.card__subtitulo {
  color: var(--cor-tinta-media);
  font-size: var(--t-xs);
  line-height: 1.3;
  margin: 2px 0 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);
}

/* A mesma bolinha, agora com a cara da pessoa (pendência 34). Só o
   preenchimento muda: tamanho, forma e posição continuam sendo do
   `.avatar`, para foto e iniciais ocuparem exatamente o mesmo lugar —
   senão a lista dançaria conforme quem subiu foto e quem não subiu.

   `object-fit: cover` porque o arquivo é quadrado e a bolinha é
   redonda: sem ele a foto sairia esticada nas bordas. */
.avatar--foto {
  object-fit: cover;
  background: var(--cor-superficie-2);
}

.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 {
  /* `flex-wrap`: no card de 2 colunas do celular, "há 3 dias" + "Ver o
     contato" (que é `nowrap`) não cabem numa linha, e o botão estourava a
     borda. Quebrando, ele cai para a linha de baixo quando não cabe — o
     botão do WhatsApp logado (só o ícone) continua cabendo ao lado. */
  display: flex; flex-wrap: wrap; 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);

  /* Para a capa do link (o ::after do .card__link) se esticar por
     ela. O card comum já era relative por causa dos selos sobre a
     foto; a lojinha não tem foto, então precisou ser dito aqui. */
  position: relative;
}
.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; }
/* A bolinha grande da lojinha com a FOTO da loja. Mesmo tamanho e
   mesma forma da de letras — o que muda é só o preenchimento, senão a
   lista dançaria conforme quem tem foto e quem não tem. */
.lojinha__avatar--foto { object-fit: cover; }

/* A bolinha PEQUENA, de quem está por trás da loja. Metade do tamanho
   da grande, de propósito: a loja é o assunto, a pessoa é a assinatura.
   Duas bolinhas do mesmo tamanho brigariam pela atenção. */
.lojinha__quem {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-xs);
  color: var(--cor-tinta-media);
  font-weight: var(--peso-medio);
  margin: 3px 0 0;
}
.lojinha__eu {
  width: 20px; height: 20px; flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--cor-marca-fundo);
  color: var(--cor-ativo-tinta);
  display: grid; place-items: center;
  font-size: 9px;
  font-weight: var(--peso-forte);
  line-height: 1;
}
.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);

  /* Acima da capa do link, igual ao .card__rodape: senão o link do
     card engole o "Ver catálogo" e ninguém mais fala com a dona. */
  position: relative;
  z-index: 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; }
/* ---- Card de ANIMAL PERDIDO (24/07/2026) ----

   Reaproveita o `.card` do anúncio de propósito, a pedido da Camila: a moldura
   4:3, a grade e o peso visual são os mesmos, então quem já sabe olhar a
   página de produtos já sabe olhar esta. A foto existe porque descrição
   escrita não identifica bicho — "vira-lata caramelo" é metade dos cachorros
   do bairro, e a cara do animal não é.

   As diferenças vêm de o aviso NÃO ser um item à venda:

   - não é clicável. O card de anúncio leva à página do anúncio; aviso não tem
     página. Então nada de `cursor: pointer` nem de subir no hover — parecer
     clicável e não ser é pior do que parecer parado;
   - sem barra de frescor no topo. Aviso não vence por prazo. */
.card--aviso { cursor: default; }
.card--aviso:hover { transform: none; box-shadow: var(--sombra-baixa); }

/* O texto do aviso pode ser um parágrafo inteiro ("é dócil, não está
   acostumado com rua, é fácil de identificar porque é vesgo"). Num card
   estreito isso empurraria a data para fora — três linhas e reticências
   mantêm a altura previsível na grade, e o essencial (o nome e a foto) está
   acima de qualquer corte. */
.card--aviso .aviso__texto {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* A data fica colada embaixo, alinhada entre os cards da mesma linha mesmo
   quando um texto é curto e o outro longo. */
.card--aviso .aviso__data { margin-top: auto; padding-top: var(--e-2); }

/* Quando há desfecho, é ELE que empurra o bloco para baixo, e a data volta a
   ser um respiro depois dele. Sem esta segunda regra os dois teriam
   `margin-top: auto`, o espaço livre se dividiria entre os dois e a linha
   "Encontrado ontem" flutuaria longe da data, parecendo outro assunto. */
.card--aviso .aviso__desfecho { margin-top: auto; padding-top: var(--e-2); }
.card--aviso .aviso__desfecho + .aviso__data { margin-top: var(--e-1); padding-top: 0; }

.aviso__desfecho {
  display: block;
  font-size: var(--t-2xs);
  font-weight: var(--peso-forte);
  color: var(--cor-marca-escura);
}

/* O selo na LINHA da home. Ele não pode ser a pílula do card: lá ela flutua
   sobre a foto, aqui mora dentro do título, ao lado de palavras. Então herda
   a mesma forma e cor, mas em tamanho de texto e sem posicionamento —
   `vertical-align` o alinha com a maiúscula em vez de deixá-lo pendurado. */
.aviso__selo {
  display: inline-block;
  margin-left: var(--e-2);
  padding: 2px var(--e-2);
  border-radius: var(--raio-pilula);
  font-size: var(--t-2xs);
  font-weight: var(--peso-forte);
  vertical-align: 1px;
  white-space: nowrap;
}

.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); }

/* Logada, o item do meio é a bolinha — a MESMA `.eu` do topo, só menor para
   caber na barra de 62px. Reusar `.eu` é de propósito: a bolinha não pode
   virar uma segunda identidade da mesma pessoa (ver `.eu` mais acima). Como
   ela é redonda e de largura fixa, a coluna do meio deixa de empurrar os
   vizinhos — que era o menu torto. */
.barra-inferior .eu--mini { width: 30px; height: 30px; }
.barra-inferior .eu--mini .eu__iniciais { font-size: var(--t-2xs); }
.barra-inferior a[aria-current="page"] .eu--mini {
  outline: 2px solid var(--cor-marca);
  outline-offset: 2px;
}

.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;
  /* Virou <a> na Etapa 9 (era um <button> morto que só dizia "chega na
     V2"). Link herda sublinhado do navegador e não tem font-family
     própria — os dois precisam ser ditos aqui. */
  text-decoration: none;
  font-family: var(--fonte-texto);
  transition: background var(--transicao);
}
.botao-cadastro:hover { background: var(--cor-marca); color: var(--cor-marca-tinta); }
.botao-cadastro:focus-visible { outline: 2px solid var(--cor-marca); outline-offset: 2px; }

/* ---- A bolinha de quem está cadastrada (Etapa 9) ----

   Substitui o botão "Cadastro" depois que ele foi aceito. Aparece em
   toda largura de tela, ao contrário do botão de convite: o convite
   no celular vive na barra de baixo, mas o sinal de "estou dentro"
   tem que estar sempre à vista, e é o único elemento da interface que
   diz que o site sabe quem você é. */
/* É a MESMA bolinha do card (`.avatar`), e isso é o ponto: a pessoa
   vê no topo exatamente o que os vizinhos veem no anúncio dela.
   Mesmas cores, mesmo desenho — só maior, porque aqui ela é um botão
   e precisa caber o dedo. Se as duas divergirem, viram duas
   identidades da mesma pessoa no mesmo site. */
.eu {
  display: grid;
  place-items: center;
  width: var(--altura-toque);
  height: var(--altura-toque);
  border-radius: 50%;
  background: var(--cor-marca-fundo);
  color: var(--cor-ativo-tinta);
  text-decoration: none;
  flex: none;
  transition: background var(--transicao), color var(--transicao);
}

.eu:hover { background: var(--cor-marca); color: var(--cor-marca-tinta); }

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

.eu__iniciais {
  font-size: var(--t-sm);
  font-weight: var(--peso-forte);
  letter-spacing: 0;
  line-height: 1;
}

/* A foto no lugar das iniciais (pendência 40). Preenche a bolinha inteira,
   redonda; `object-fit: cover` porque o arquivo é quadrado e a bolinha é
   um círculo — sem ele a cara sairia esticada. Serve para o topo (44px) e
   para a `.eu--mini` da barra (30px): como é 100% do pai, o mesmo elemento
   vale nos dois tamanhos. Igual à `.avatar--foto` do card, de propósito. */
.eu__foto {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* No computador não existe barra inferior, então é ESTE botão que dá
   acesso ao cadastro.

   Esta regra precisa vir DEPOIS do `display: none` acima, e é por isso
   que ela está aqui embaixo em vez de junto do resto do bloco de
   computador (que termina lá na linha ~784). As duas têm o mesmo peso;
   ganha a última.

   O defeito que isto conserta é antigo e passou despercebido: o botão
   ficava escondido em TODA largura de tela, porque o bloco de
   computador só mexia no espaçamento dele e nunca no `display`. Não
   incomodou até 20/07 porque ele era um botão morto, escrito "o
   cadastro chega na V2". No dia em que passou a levar a algum lugar,
   sumiu do computador inteiro. */
@media (min-width: 900px) {
  .botao-cadastro { display: inline-flex; }
}

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

/* Nome e sobrenome lado a lado. Em tela estreita eles empilham — dois
   campos de 40 caracteres espremidos num celular pequeno é pior do que
   uma linha a mais de rolagem. */
.campo-duplo { display: grid; gap: var(--e-4); }

@media (min-width: 26rem) {
  .campo-duplo { grid-template-columns: 1fr 1fr; gap: var(--e-3); }
}

.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;
}

/* ============================================================
   O cadastro (Etapa 9)

   Reaproveita a casca da porta (`porta__*`, `campo*`,
   `botao-principal`), porque é o mesmo tipo de momento: uma decisão
   sozinha na tela, sem menu e sem busca em volta. Aqui embaixo só o
   que é próprio desta tela.
   ============================================================ */

/* O que a pessoa ganha, ANTES do campo. Na porta a razão vem depois
   do botão, porque lá quem chegou já queria o telefone. Aqui não:
   ninguém digita e-mail para descobrir o motivo no fim. */
.ganho {
  list-style: none;
  margin: var(--e-5) 0;
  padding: var(--e-4);
  display: grid;
  gap: var(--e-3);
  background: var(--cor-marca-fundo);
  border-radius: var(--raio-md);
}

.ganho__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-3);
  align-items: start;
  font-size: var(--t-sm);
  line-height: var(--entrelinha-normal);
  color: var(--cor-tinta-media);
}

.ganho__item strong { color: var(--cor-tinta); font-weight: var(--peso-forte); }

.ganho__marca {
  color: var(--cor-estrela);
  font-size: var(--t-md);
  line-height: 1.2;
}

/* O nome, que se lê e não se digita. Tem cara de campo desligado de
   propósito: a pessoa precisa ver que ele é dela e que não muda —
   esconder seria pior, porque ela ficaria procurando onde arruma. */
.campo__fixo {
  margin: 0;
  min-height: var(--altura-toque);
  display: flex;
  align-items: center;
  padding: var(--e-3);
  border: 1px dashed var(--cor-linha-forte);
  border-radius: var(--raio-sm);
  background: var(--cor-superficie-2);
  color: var(--cor-tinta-media);
  font-size: 1rem;
}

/* ---- Atalhos de provedor ----
   Digitar "@gmail.com" no teclado do celular é chato, e é onde o erro
   de digitação nasce. Aparecem só quando o JavaScript está de pé, e o
   campo sozinho continua resolvendo tudo. */
.provedores {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  /* Respiro abaixo da dica do e-mail. Era margem NEGATIVA (-e-2), que
     puxava os atalhos para cima e os fazia invadir a segunda linha da
     dica em 8px — no celular e no desktop (achado pela Camila). Como a
     dica quase sempre quebra em duas linhas, o certo é os chips virem
     abaixo dela, com folga. Vale para as duas telas (a porta e o Meu
     cadastro usam o mesmo `.provedores`). */
  margin-top: var(--e-3);
}

.provedor {
  min-height: 34px;
  padding: 0 var(--e-3);
  border: 1px solid var(--cor-linha-forte);
  border-radius: var(--raio-pilula);
  background: var(--cor-superficie);
  color: var(--cor-tinta-media);
  font-family: var(--fonte-texto);
  font-size: var(--t-xs);
  font-weight: var(--peso-medio);
  cursor: pointer;
  transition: border-color var(--transicao), color var(--transicao);
}

.provedor:hover { border-color: var(--cor-marca); color: var(--cor-tinta); }

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

/* ---- A conferência do e-mail ----
   Substitui o link de confirmação. Ver servidor/email.js. */

.confere {
  margin-top: var(--e-2);
  padding: var(--e-4);
  border: 1px solid var(--cor-esfriou);
  border-radius: var(--raio-md);
  background: var(--cor-esfriou-fundo);
}

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

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

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

/* "Está certo, é o meu" é botão de texto e não segundo botão cheio:
   dois botões do mesmo peso fariam a pessoa parar para escolher, e a
   escolha mais provável (aceitar a correção) já está em destaque.
   Mas ele precisa continuar sendo achável — quem tem e-mail de
   domínio próprio vai parar exatamente aqui. */
.confere__manter {
  min-height: var(--altura-toque);
  padding: var(--e-2) var(--e-3);
  border: 0;
  background: transparent;
  color: var(--cor-esfriou-tinta);
  font-family: var(--fonte-texto);
  font-size: var(--t-sm);
  font-weight: var(--peso-medio);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

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

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

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

/* Os textos do painel acompanham a largura da TABELA que explicam.

   Eram 60ch. No celular isso não aparece — a tela é mais estreita que 60
   caracteres, então o texto já ocupava tudo. Na web, não: o parágrafo parava
   em 540px enquanto a tabela ia a 1152, e ficava um bloco estreito encostado
   à esquerda com meia página vazia do lado. Parecia sobra, não escolha.
   Medido e corrigido em 24/07/2026, a pedido da Camila.

   O limite de leitura continua existindo — ele é o `--largura-max` (1200px)
   do container. O que muda é o texto passar a terminar onde a tabela termina:
   num painel, o alinhamento entre a explicação e o dado que ela explica vale
   mais do que a linha curta de artigo. São parágrafos de duas ou três linhas,
   não corpo de texto para ler minutos a fio. */
.acessos__nota {
  margin: 0 0 var(--e-5);
  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); }

/* ---- Tabela longa: mostra as primeiras e guarda o resto ----

   Uma tabela de buscas com o grupo rodando vira uma parede de cem linhas, e
   as cinco que importam ficam no topo de qualquer jeito. Então mostra cinco
   e deixa o resto atrás de um "ver todas".

   Feito com `input` + `label`, SEM JavaScript: o painel é da Camila, mas a
   regra do site é a mesma em todo lugar — funciona sem JS, e o que o JS faz
   é melhorar, nunca habilitar. Um `<details>` seria mais curto, só que ele
   não pode envolver `<tr>` sem quebrar o HTML da tabela.

   O `input` fica escondido do OLHO, nunca do teclado nem do leitor de tela:
   `clip` em vez de `display:none`, porque `display:none` tira do foco e o
   botão deixaria de existir para quem navega por Tab. */
.alternador {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.alternador:not(:checked) ~ .tabela-rolagem .linhas-extras { display: none; }

.ver-mais {
  display: inline-block;
  margin-top: var(--e-3);
  padding: var(--e-2) var(--e-4);
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-pilula);
  background: var(--cor-superficie);
  color: var(--cor-tinta-media);
  font-size: var(--t-sm);
  font-weight: var(--peso-forte);
  cursor: pointer;
  /* Alvo de dedo: o painel ela abre no celular como qualquer outra página. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.ver-mais:hover { border-color: var(--cor-marca); color: var(--cor-tinta); }

/* O foco tem que aparecer no BOTÃO, e quem recebe foco é o input invisível —
   por isso o anel é desenhado no label a partir do estado do input. */
.alternador:focus-visible ~ .ver-mais {
  outline: 2px solid var(--cor-marca);
  outline-offset: 2px;
}

/* Uma etiqueta por estado: fechado mostra "ver todas", aberto mostra
   "ver menos". Trocar texto por `content` deixaria a frase fora do HTML,
   invisível para tradutor e para leitor de tela em parte dos navegadores. */
.alternador:not(:checked) ~ .ver-mais .rotulo-menos,
.alternador:checked ~ .ver-mais .rotulo-mais { display: none; }

.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);
}

/* Online agora: verde da marca, com uma bolinha pulsando de "ao vivo". */
.marcador--online {
  background: var(--cor-ativo-fundo);
  color: var(--cor-ativo-tinta);
  margin-left: var(--e-2);
}
.marcador--online::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--cor-ativo);
  vertical-align: middle;
}

/* Cadastro completo (V2) x só-portão. O cadastro é um selo discreto da marca;
   "só entrou" é texto apagado — a maioria é isto, e não é problema (o portão
   é permanente, pendência 11). */
.marcador--cadastro {
  background: var(--cor-marca-fundo);
  color: var(--cor-ativo-tinta);
}
.acessos__so-entrou { color: var(--cor-tinta-fraca); font-size: var(--t-xs); }

/* O número de "online agora" no verde da marca, para saltar. */
.numeros__valor--online { color: var(--cor-marca); }

/* ============================================================
   A PÁGINA DE UM ANÚNCIO (Etapa 9b, 1ª fatia)

   O mesmo card, com espaço. Reaproveita os selos, o frescor, a nota
   e o botão de WhatsApp da lista de propósito: é o mesmo anúncio, e
   duas linguagens visuais para a mesma coisa fariam a pessoa achar
   que chegou em outro lugar.
   ============================================================ */

.voltar {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--altura-toque);
  color: var(--cor-tinta-media);
  text-decoration: none;
  font-size: var(--t-sm);
  font-weight: var(--peso-medio);
}
.voltar:hover { color: var(--cor-tinta); }

.anuncio {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-lg);
  overflow: hidden;
  box-shadow: var(--sombra-baixa);
  margin-bottom: var(--e-6);
}

.anuncio__foto {
  aspect-ratio: 4 / 3;
  background: var(--cor-superficie-2);
  display: grid;
  place-items: center;
  font-size: 3.5rem;
}
.anuncio__foto--imagem { font-size: 0; }

.anuncio__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* A bolinha de iniciais no lugar da foto, para a lojinha — que não
   tem foto nem emoji. É o mesmo desenho que o card dela usa. */
.anuncio__iniciais {
  font-size: var(--t-3xl);
  font-weight: var(--peso-forte);
  color: var(--cor-lojinha);
  letter-spacing: var(--letra-larga);
}

.anuncio__corpo { padding: var(--e-5); }

.anuncio__selos { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-3); }

.anuncio__titulo {
  font-size: var(--t-xl);
  line-height: var(--entrelinha-apertada);
  margin: 0 0 var(--e-2);
}
.anuncio__subtitulo {
  color: var(--cor-tinta-media);
  font-size: var(--t-md);
  margin: 0 0 var(--e-3);
}

.anuncio__preco {
  font-size: var(--t-lg);
  font-weight: var(--peso-forte);
  color: var(--cor-tinta);
  margin: 0 0 var(--e-4);
}
.anuncio__preco--combinar { font-size: var(--t-md); color: var(--cor-tinta-media); }
.anuncio__preco-alt { font-size: var(--t-sm); font-weight: var(--peso-medio); color: var(--cor-tinta-media); }

.anuncio__detalhe { color: var(--cor-tinta-media); margin-bottom: var(--e-4); }

.anuncio__troca {
  color: var(--cor-troca-tinta);
  background: var(--cor-troca-fundo);
  padding: var(--e-2) var(--e-3);
  border-radius: var(--raio-sm);
  font-size: var(--t-sm);
  margin-bottom: var(--e-4);
}

.anuncio__validade { margin-bottom: var(--e-4); }
.anuncio__data { font-size: var(--t-sm); color: var(--cor-tinta-fraca); margin-top: var(--e-2); }

.anuncio__pessoa {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding-top: var(--e-4);
  border-top: 1px solid var(--cor-linha);
}

.avatar--grande { width: 40px; height: 40px; font-size: var(--t-sm); }

.anuncio__quem { font-weight: var(--peso-forte); }
.anuncio__avaliacoes { color: var(--cor-tinta-media); font-weight: var(--peso-normal); }

.anuncio__acao { margin-top: var(--e-5); }

/* Largura inteira e alto o bastante para o dedo: nesta página ele é
   a ação, e não um ícone no canto do card. */
.zap--grande {
  width: 100%;
  min-height: var(--altura-toque);
  justify-content: center;
  gap: var(--e-2);
  font-size: var(--t-base);
  border-radius: var(--raio-pilula);
}

.anuncio__aviso {
  margin-top: var(--e-2);
  font-size: var(--t-sm);
  color: var(--cor-tinta-media);
  text-align: center;
}

@media (min-width: 48rem) {
  .anuncio { display: grid; grid-template-columns: 22rem 1fr; }
  .anuncio__foto { height: 100%; aspect-ratio: auto; }
  .anuncio__corpo { padding: var(--e-6); }
}

/* ============================================================
   As avaliações (Etapa 9b, 2ª fatia)

   Mesmo material do resto: superfície, linha, sombra baixa e os tokens
   de cor/espaço do tema. Nada de cor nova — a estrela usa a
   `--cor-estrela` que o card já usa, e as barras reaproveitam as cores
   de estado (marca, destaque, vendido).
   ============================================================ */
.avalia {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-baixa);
  padding: var(--e-5);
  margin-bottom: var(--e-6);
}
.avalia__titulo {
  font-family: var(--fonte-display);
  font-size: var(--t-lg);
  margin: 0 0 var(--e-4);
}
.avalia__recebido {
  background: var(--cor-marca-fundo);
  color: var(--cor-ativo-tinta);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--raio-sm);
  font-size: var(--t-sm);
  font-weight: var(--peso-medio);
  margin-bottom: var(--e-4);
}

/* ---- As barras somadas ---- */
.avalia__barras { display: grid; gap: var(--e-4); margin-bottom: var(--e-5); }
.barra__cabeca { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--e-1); }
.barra__rotulo { font-size: var(--t-sm); font-weight: var(--peso-forte); }
.barra__de { font-size: var(--t-xs); color: var(--cor-tinta-fraca); }
.barra__trilho {
  display: flex; gap: 2px;
  height: 8px; border-radius: var(--raio-pilula);
  overflow: hidden; background: var(--cor-linha);
}
.barra__parte { display: block; }
.barra__parte--otima, .barra__parte--sim { background: var(--cor-marca); }
.barra__parte--bom  { background: var(--cor-destaque); }
.barra__parte--ruim, .barra__parte--nao { background: var(--cor-vendido-fundo); }

.barra__legenda { display: flex; flex-wrap: wrap; gap: var(--e-3); margin: var(--e-2) 0 0; }
.barra__chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--t-xs); color: var(--cor-tinta-media);
}
.barra__chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cor-linha-forte); }
.barra__chip--otima::before, .barra__chip--sim::before { background: var(--cor-marca); }
.barra__chip--bom::before  { background: var(--cor-destaque); }
.barra__chip--ruim::before, .barra__chip--nao::before { background: var(--cor-vendido-fundo); }

/* ---- O formulário de avaliar ---- */
/* O formulário mora no próprio card "Avaliar" agora, então não precisa
   mais da borda de topo que o separava da lista. */
.avaliar { display: grid; gap: var(--e-4); }
.avaliar__pergunta {
  font-family: var(--fonte-display);
  font-size: var(--t-md); font-weight: var(--peso-forte);
}
.avaliar__erro { color: var(--cor-vendido-fundo); font-size: var(--t-sm); font-weight: var(--peso-medio); }
.avaliar__opcional { color: var(--cor-tinta-fraca); font-weight: var(--peso-normal); }
.avaliar__rodape { font-size: var(--t-xs); color: var(--cor-tinta-fraca); margin: 0; }

/* A estrela, sem JavaScript: rádios em ordem invertida no HTML +
   `row-reverse` + irmão geral `~` pintam do 1 até a marcada. */
.estrelas { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.estrelas__linha { display: inline-flex; flex-direction: row-reverse; justify-content: flex-start; }
.estrelas__estrela {
  font-size: 2.25rem; line-height: 1;
  color: var(--cor-linha-forte); cursor: pointer;
  padding: 0 .1em;
  transition: color var(--transicao), transform var(--transicao);
}
.estrelas__estrela:active { transform: scale(.9); }
.estrelas__radio:checked ~ .estrelas__estrela { color: var(--cor-estrela); }
.estrelas__estrela:hover, .estrelas__estrela:hover ~ .estrelas__estrela { color: var(--cor-estrela); }
.estrelas__radio:focus-visible + .estrelas__estrela { outline: 2px solid var(--cor-marca); outline-offset: 3px; border-radius: 4px; }

/* Os campos padronizados: pílulas que se acendem quando escolhidas. */
.opcao { border: 0; padding: 0; margin: 0; display: grid; gap: var(--e-2); min-inline-size: 0; }
.opcao__rotulo { font-size: var(--t-sm); font-weight: var(--peso-medio); color: var(--cor-tinta-media); padding: 0; }
.opcao__botoes { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.opcao__botao {
  display: inline-flex; align-items: center;
  min-height: 40px; padding: 0 var(--e-4);
  border: 1px solid var(--cor-linha-forte); border-radius: var(--raio-pilula);
  background: var(--cor-superficie-2); color: var(--cor-tinta-media);
  font-size: var(--t-sm); cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}
.opcao__radio:checked + .opcao__botao {
  background: var(--cor-marca-fundo); border-color: var(--cor-marca);
  color: var(--cor-ativo-tinta); font-weight: var(--peso-forte);
}
.opcao__radio:focus-visible + .opcao__botao { outline: 2px solid var(--cor-marca); outline-offset: 2px; }

.avaliar__texto { margin-top: var(--e-1); }

/* ---- O convite (quem ainda não pode avaliar) e a lista ---- */
.avalia__convite { margin-top: var(--e-2); }
.avalia__botao { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.avalia__convite-texto { font-size: var(--t-sm); color: var(--cor-tinta-media); margin: var(--e-2) 0 0; }
.avalia__ja { color: var(--cor-tinta-media); font-size: var(--t-sm); margin: 0; }
.avalia__vazio { color: var(--cor-tinta-media); font-size: var(--t-sm); margin: var(--e-4) 0 0; }

.avalia__lista {
  list-style: none; padding: var(--e-4) 0 0; margin: var(--e-5) 0 0;
  display: grid; gap: var(--e-3);
  border-top: 1px solid var(--cor-linha);
}
.avalia__item { display: flex; align-items: center; gap: var(--e-3); }
.avalia__estrelas { display: inline-flex; font-size: var(--t-sm); letter-spacing: 1px; }
.avalia__e { color: var(--cor-linha-forte); }
.avalia__e--on { color: var(--cor-estrela); }
.avalia__quando { margin-left: auto; font-size: var(--t-xs); color: var(--cor-tinta-fraca); }

/* ---- A avaliação na fila de conferência (Fatia C) ---- */
.avalia-fila__nota {
  display: grid; place-items: center;
  color: var(--cor-estrela); font-weight: var(--peso-forte);
  font-size: var(--t-md); white-space: nowrap;
}
.item__detalhe--citacao { font-style: italic; color: var(--cor-tinta-media); }

/* ---- "Avaliações que você fez", no Meu cadastro (Fatia C) ---- */
.meu-historico {
  margin-top: var(--e-5); text-align: left;
  border-top: 1px solid var(--cor-linha); padding-top: var(--e-4);
}
.meu-historico__titulo { font-family: var(--fonte-display); font-size: var(--t-md); margin: 0 0 var(--e-1); }
.meu-historico__dica { font-size: var(--t-xs); color: var(--cor-tinta-fraca); margin: 0 0 var(--e-3); }
.meu-historico__vazio { font-size: var(--t-sm); color: var(--cor-tinta-media); margin: 0; }
.meu-historico__lista { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-2); }
.meu-historico__lista--resto { margin-top: var(--e-2); }
.meu-historico__item { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-sm); }
.meu-historico__nota { color: var(--cor-estrela); font-weight: var(--peso-forte); white-space: nowrap; }
.meu-historico__quem { flex: 1; min-width: 0; display: grid; }
.meu-historico__pessoa { font-weight: var(--peso-medio); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meu-historico__oque { font-size: var(--t-xs); color: var(--cor-tinta-fraca); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meu-historico__estado { color: var(--cor-tinta-fraca); font-size: var(--t-xs); white-space: nowrap; }
.meu-historico__estado--fila { color: var(--cor-esfriou-tinta); font-weight: var(--peso-medio); }

/* ============================================================
   Meu cadastro — a página (Fatia 2)

   Deixou de ser o cartão "porta" e virou página normal (topo + barra).
   As seções usam `.secao`; o conteúdo de cada uma mora num `.cartao`
   (superfície + borda). Histórico, `.confere` e `.campo` reaproveitam o
   CSS que já existia — aqui só o que é novo da página.
   ============================================================ */
.meu-cadastro { padding-bottom: var(--e-6); }

.meu-cadastro__topo { margin-top: var(--e-5); }

.meu-cadastro__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);
}

.meu-cadastro__titulo {
  margin: var(--e-1) 0 var(--e-2);
  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;
}

.meu-cadastro__intro {
  margin: 0;
  font-size: var(--t-base);
  line-height: var(--entrelinha-normal);
  color: var(--cor-tinta-media);
  text-wrap: pretty;
}

/* O tijolo de cada seção: superfície + borda, o mesmo raio dos cards. */
.cartao {
  padding: var(--e-4);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-md);
}

.meu-cadastro__form { margin-top: var(--e-4); }
.meu-cadastro__form .botao-principal { margin-top: var(--e-4); }

/* Erro de validação do e-mail — mesmo visual do aviso da porta. */
/* ---- A foto de perfil, no "Meu cadastro" (pendência 34) ----

   Ela mora dentro do cartão "Seus dados", entre o nome e o e-mail,
   porque é isso que ela é: mais um dado da pessoa. Não ganhou seção
   própria de propósito — seção própria daria a ela um peso que ela
   não tem, já que subir foto é opcional e a bolinha de iniciais
   continua sendo uma resposta completa. */
.foto-perfil {
  display: grid;
  gap: var(--e-2);
  margin: var(--e-4) 0 0;
}

.foto-perfil__linha {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  flex-wrap: wrap;
}

.foto-perfil__bolinha {
  flex: none;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--cor-marca-escura);
  color: var(--cor-marca-tinta);
  display: grid;
  place-items: center;
  font-family: var(--fonte-display);
  font-weight: var(--peso-display);
  font-size: var(--t-xl);
  line-height: 1;
}

.foto-perfil__acoes {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  flex-wrap: wrap;
}

/* O seletor de arquivo do navegador é feio e não dá para estilizar.
   A saída de sempre: esconder o campo e vestir o <label>, que já
   abre o seletor ao ser clicado — sem uma linha de JavaScript, como
   o resto do site. */
.foto-perfil__campo {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* O <label> não é botão e não herda estilo de botão nenhum — ele
   precisa ganhar a aparência inteira aqui. A primeira versão usou
   `.botao .botao--vazio`, que existem no CSS da APRESENTAÇÃO e não
   neste: o resultado foi "Trocar a foto" saindo como texto solto, sem
   borda, sem cara de clicar. Apareceu no print, não no HTML.

   A forma copia o `.opcao__botao`, que é o botão secundário do site —
   o principal (verde) é o de salvar, e dois verdes lado a lado não
   diriam qual é qual. */
.foto-perfil__escolher {
  display: inline-flex;
  align-items: center;
  /* 44px é o mínimo para o dedo, a mesma medida do resto do site. */
  min-height: var(--altura-toque);
  padding: 0 var(--e-4);
  border: 1px solid var(--cor-linha-forte);
  border-radius: var(--raio-pilula);
  background: var(--cor-superficie-2);
  color: var(--cor-tinta-media);
  font-size: var(--t-sm);
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}
.foto-perfil__escolher:hover {
  border-color: var(--cor-marca);
  color: var(--cor-tinta);
}

/* O foco do teclado mora no campo escondido, então ele não apareceria
   em lugar nenhum. Esta regra devolve o contorno ao label — sem ela,
   quem navega por Tab não vê onde está. */
.foto-perfil__campo:focus-visible + .foto-perfil__escolher,
.foto-perfil__escolher:focus-within {
  outline: 2px solid var(--cor-marca);
  outline-offset: 2px;
}

.foto-perfil__enviar { margin-top: 0; }

/* Salvar fica desligado enquanto a foto escolhida não cabe. Deixá-lo
   clicável mandaria a pessoa esperar um envio que já se sabe que vai
   ser recusado. */
.foto-perfil__enviar:disabled {
  background: var(--cor-linha-forte);
  cursor: not-allowed;
}

/* O nome do arquivo escolhido. Ele é a resposta da tela ao clique:
   "recebi, é este". Tem que caber num celular sem empurrar nada, e
   nome de foto de celular é longo (IMG_20260723_101500.jpg), então
   quebra em vez de esticar a linha. */
.foto-perfil__escolhida {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--cor-tinta-media);
  overflow-wrap: anywhere;
}
.foto-perfil__escolhida--erro { color: var(--cor-esfriou-tinta); }

/* O "salvei", no mesmo lugar onde estava o nome do arquivo. Verde da
   marca e um tique: a pessoa acabou de clicar e precisa saber que o
   clique valeu, sem ler frase nenhuma. */
.foto-perfil__ok {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-sm);
  font-weight: var(--peso-medio);
  color: var(--cor-ativo-tinta);
}
.foto-perfil__ok svg { flex: none; }

.foto-perfil__erro {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--cor-esfriou-tinta);
}

/* Remover a foto é um caminho de volta, não uma ação principal: fica
   discreto, do tamanho do texto de dica. Grande demais convidaria a
   apagar sem querer. */
.foto-perfil__tirar { margin-top: var(--e-2); }
.foto-perfil__tirar-botao {
  min-height: var(--altura-toque);
  padding: 0;
  border: 0;
  background: none;
  color: var(--cor-tinta-fraca);
  font: inherit;
  font-size: var(--t-xs);
  text-decoration: underline;
  cursor: pointer;
}
.foto-perfil__tirar-botao:hover { color: var(--cor-tinta); }
.foto-perfil__tirar-botao:focus-visible {
  outline: 2px solid var(--cor-marca);
  outline-offset: 2px;
}

.meu-cadastro__erro {
  margin: var(--e-4) 0 0;
  padding: var(--e-3) var(--e-4);
  border-left: 3px solid var(--cor-esfriou);
  border-radius: var(--raio-sm);
  background: var(--cor-esfriou-fundo);
}
.meu-cadastro__erro-titulo {
  margin: 0 0 var(--e-1);
  font-size: var(--t-sm);
  font-weight: var(--peso-forte);
  color: var(--cor-esfriou-tinta);
}
.meu-cadastro__erro-texto {
  margin: 0;
  font-size: var(--t-sm);
  line-height: var(--entrelinha-normal);
  color: var(--cor-esfriou-tinta);
}

.meu-cadastro__promessa {
  margin: 0;
  font-size: var(--t-sm);
  line-height: var(--entrelinha-normal);
  color: var(--cor-tinta-media);
}
.meu-cadastro__promessa a { color: var(--cor-marca-escura); font-weight: var(--peso-forte); }

/* A gaveta (Fatia 3) usa o card do site. Só duas coisas são novas:

   1. O selo "em análise": o card já traz `.card__selo` (a pílula com
      bolinha) e as cores dos outros estados (`.selo--ativo` etc.); falta o
      "em análise". Roxo, o mesmo tom de "pendente/ação" do avaliar —
      distinto do verde (no ar), do âmbar (esfriou) e do cinza (inativo). */
.selo--analise { background: var(--cor-troca-fundo); color: var(--cor-troca-tinta); }

/* 2. O card em análise não conta prazo (ainda está na fila), então a barra
      de frescor não faz sentido nele — some. */
.card[data-status="analise"] .frescor { visibility: hidden; }

/* 3. Além de 10 cards, os mais antigos viram LINHA compacta — para a página
      não crescer sem fim no celular (pedido da Camila). Título + selo, numa
      linha por anúncio, dentro de um cartão. */
.linhas-antigas { margin-top: var(--e-3); }
.linhas-antigas__titulo {
  margin: 0 0 var(--e-2);
  font-size: var(--t-2xs);
  font-weight: var(--peso-forte);
  color: var(--cor-tinta-fraca);
  text-transform: uppercase;
  letter-spacing: var(--letra-larga);
}
.linhas { list-style: none; margin: 0; padding: 0; }
.linhas__item {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-width: 0;
  padding: var(--e-2) 0;
}
.linhas__item + .linhas__item { border-top: 1px solid var(--cor-linha); }
.linhas__titulo {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--cor-marca-escura);
  font-weight: var(--peso-medio);
  text-decoration: none;
}
span.linhas__titulo { color: var(--cor-tinta); }   /* em análise: texto, não link */
a.linhas__titulo:hover { text-decoration: underline; }
.linhas__item .card__selo { flex: none; }

/* ---- O botão roxo de avaliar, na caixa do anúncio ---- */
/* Secundário ao verde do contato: contato é a ação principal, avaliar é a
   segunda. Roxo reaproveita `--cor-troca`, que já é do tema (claro e
   escuro), então o contraste está garantido nos dois modos. */
.avaliar-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  width: 100%; min-height: var(--altura-toque);
  margin-top: var(--e-3); padding: 0 var(--e-4);
  border: 1px solid var(--cor-troca); border-radius: var(--raio-pilula);
  background: var(--cor-troca-fundo); color: var(--cor-troca-tinta);
  font-family: var(--fonte-texto); font-size: var(--t-base); font-weight: var(--peso-forte);
  text-decoration: none;
  transition: background var(--transicao), color var(--transicao);
}
.avaliar-cta svg { color: var(--cor-troca); transition: color var(--transicao); }
.avaliar-cta:hover { background: var(--cor-troca); color: #fff; }
.avaliar-cta:hover svg { color: #fff; }
.avaliar-cta:focus-visible { outline: 2px solid var(--cor-troca); outline-offset: 2px; }

/* ---- "Ver as outras N" — <details> nativo, sem JavaScript ---- */
.avalia__mais { margin-top: var(--e-3); }
.avalia__mais-botao {
  display: inline-flex; align-items: center; gap: var(--e-1);
  cursor: pointer; list-style: none;
  padding: var(--e-2) 0;
  font-size: var(--t-sm); font-weight: var(--peso-forte); color: var(--cor-marca-escura);
}
.avalia__mais-botao::-webkit-details-marker { display: none; }
.avalia__mais-botao::after { content: "▾"; font-size: var(--t-xs); transition: transform var(--transicao); }
.avalia__mais[open] .avalia__mais-botao::after { transform: rotate(180deg); }
.avalia__lista--resto { margin-top: var(--e-2); }

/* Blocos do painel de acessos (pendência 12): "anúncios mais abertos" e
   "buscas mais feitas". Reusa a .tabela; só o título e o vazio são novos. */
.painel-bloco { margin-top: var(--e-7); }
.painel-bloco__titulo {
  font-family: var(--fonte-display);
  font-size: var(--t-lg);
  font-weight: var(--peso-forte);
  margin-bottom: var(--e-3);
}
.painel-bloco__vazio { color: var(--cor-tinta-media); font-size: var(--t-sm); }
/* Sem `max-width` pelo mesmo motivo do `.acessos__nota` acima: a frase que
   explica a tabela termina onde a tabela termina. */
.painel-bloco__dica {
  margin: calc(var(--e-1) * -1) 0 var(--e-3);
  color: var(--cor-tinta-media);
  font-size: var(--t-sm);
}