/*
 * Elo NR-1 — protótipo de marketplace.
 *
 * ── POR QUE NÃO É O HARBOURSIDE ─────────────────────────────────────────────
 *
 * O Índice NR-1 usa branco, verde-menta e Outfit: registro de site de saúde,
 * porque lá o produto é um diagnóstico sobre adoecimento no trabalho e o leitor
 * precisa sentir que está num lugar sério e calmo.
 *
 * Aqui o produto é outro: um lugar onde se contrata gente. O vocabulário visual
 * é o de marketplace — busca grande e centralizada, cartão de perfil com nota e
 * selo, um laranja quente reservado só para o botão que faz a coisa acontecer.
 * A ideia é que as duas abordagens sejam comparáveis por serem diferentes de
 * verdade, não duas variações do mesmo tema.
 */

:root {
  /* Superfícies */
  --fundo: #ffffff;
  --fundo-suave: #f8fafc;
  --fundo-escuro: #0f1e3d;
  --borda: #e2e8f0;

  /* Tinta */
  --tinta: #0f172a;
  --texto: #334155;
  --texto-2: #64748b;

  /*
   * Marca: o azul-marinho do logo, amostrado do próprio arquivo (#17233d).
   * A paleta anterior era azul-royal + laranja; com o wordmark turquesa, o
   * laranja passou a brigar com a própria marca no topo da página.
   */
  --azul: #17233d;
  --azul-vivo: #1d4ed8;
  --azul-claro: #eef4fb;

  /*
   * Ação: o turquesa do logo. Substituiu o laranja para que botão e marca falem
   * a mesma língua. O tom do arquivo (#0b928e) rende 3,74:1 com texto branco e
   * reprovaria em botão; escurecido até 5,47:1.
   */
  --laranja: #0f766e;
  --laranja-escuro: #115e59;
  --laranja-claro: #f0fdfa;
  --turquesa-vivo: #0d9488;
  --turquesa-claro: #5eead4;

  /* Estados */
  --verde: #15803d;
  --verde-claro: #f0fdf4;
  --amarelo: #fbbf24;
  /* A estrela fica sobre branco; o amarelo puro rende 2,15:1. */
  --amarelo-texto: #b45309;

  --raio: 12px;
  --raio-g: 18px;
  --raio-pilula: 999px;

  --sombra: 0 1px 3px rgba(15, 23, 42, 0.08);
  --sombra-m: 0 4px 16px rgba(15, 23, 42, 0.1);
  --sombra-g: 0 12px 32px rgba(15, 23, 42, 0.14);

  --titulo: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --corpo: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

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

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--corpo);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--titulo);
  color: var(--tinta);
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.5rem);
  font-weight: 800;
}
h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  font-weight: 700;
}
h3 {
  font-size: 1.15rem;
  font-weight: 700;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--azul-vivo);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.envoltorio {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

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

:focus-visible {
  outline: 3px solid var(--azul-vivo);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Aviso de protótipo ---------- */

/*
 * Fica no topo, fixo, e não é discreto de propósito. Todo número e todo perfil
 * daqui para baixo é inventado para a demonstração; um protótipo que parece
 * um produto no ar e não avisa é o começo de alguém decidir com dado falso.
 */
.faixa-prototipo {
  background: var(--fundo-escuro);
  color: #ffffff;
  font-size: 0.8125rem;
  padding: 0.5rem 0;
  text-align: center;
}

.faixa-prototipo strong {
  /* Sobre a faixa escura o amarelo puro rende contraste alto; só sobre branco é
     que ele reprova. Por isso os dois tokens. */
  color: var(--amarelo);
}

/* ---------- Cabeçalho ---------- */

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borda);
}

.cabecalho__interno {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.5rem;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--titulo);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--tinta);
  text-decoration: none;
}

.marca:hover {
  text-decoration: none;
}

/*
 * O logo é um wordmark: já traz "eloNR1" desenhado. Repetir o nome em texto ao
 * lado seria escrever a marca duas vezes — por isso o cabeçalho carrega só a
 * imagem, e o nome acessível vive no alt.
 */
.marca__logo {
  display: block;
  flex-shrink: 0;
  height: 2.1rem;
  width: auto;
}

@media (max-width: 620px) {
  .marca__logo {
    height: 1.75rem;
  }
}

/* Variante clara, para o rodapé e o CTA de fundo escuro. */
.marca__logo--claro {
  height: 1.9rem;
}

.navegacao {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-left: auto;
}

.navegacao__link {
  color: var(--texto);
  font-size: 0.9375rem;
  font-weight: 500;
}

.navegacao__acoes {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

@media (max-width: 860px) {
  .navegacao__link {
    display: none;
  }
}

/*
 * No celular, logo + dois botões passam de 500px e empurram a página para o lado.
 * O botão secundário sai: quem chega pelo anúncio é empresa, e o caminho do
 * implementador continua a um toque de distância na própria página.
 */
@media (max-width: 620px) {
  .cabecalho__interno {
    gap: 0.75rem;
  }
  .navegacao__acoes .botao--fantasma {
    display: none;
  }
  .botao {
    padding-inline: 1rem;
    font-size: 0.875rem;
  }
}

/* ---------- Botões ---------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 46px;
  padding: 0.7rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--raio);
  font-family: var(--corpo);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.botao:hover {
  text-decoration: none;
}

/* Laranja é a cor de conversão. Se aparecer em dois lugares na mesma tela,
   nenhum dos dois é o próximo passo. */
.botao--acao {
  background: var(--laranja);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(15, 118, 110, 0.3);
}

.botao--acao:hover {
  background: var(--laranja-escuro);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(15, 118, 110, 0.35);
}

.botao--azul {
  background: var(--azul);
  color: #ffffff;
}
.botao--azul:hover {
  background: #172d6e;
  transform: translateY(-1px);
}

.botao--vazado {
  background: var(--fundo);
  border-color: var(--borda);
  color: var(--tinta);
}
.botao--vazado:hover {
  border-color: var(--azul-vivo);
  color: var(--azul-vivo);
}

.botao--fantasma {
  background: transparent;
  color: var(--tinta);
  padding-inline: 0.75rem;
}
.botao--fantasma:hover {
  color: var(--azul-vivo);
}

/* Sobre fundo escuro, o vazado some. Este é o par visual do laranja ali. */
.botao--claro {
  background: #ffffff;
  color: var(--tinta);
}

.botao--claro:hover {
  background: #e2e8f0;
  transform: translateY(-1px);
}

.botao--grande {
  min-height: 54px;
  padding: 0.9rem 2rem;
  font-size: 1.0625rem;
}

.botao--largo {
  width: 100%;
}

/* ---------- Hero ---------- */

.heroi {
  position: relative;
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem);
  background:
    radial-gradient(60rem 30rem at 50% -8rem, var(--azul-claro), transparent 70%),
    var(--fundo);
  text-align: center;
}

.heroi__selo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.95rem;
  border-radius: var(--raio-pilula);
  background: var(--verde-claro);
  border: 1px solid #bbf7d0;
  color: var(--verde);
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
}

.heroi__ponto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--verde);
}

/*
 * O selo do pioneirismo é a primeira coisa lida na página, antes até do título.
 * Fundo azul da marca em vez do verde de "gratuito": aqui a informação não é um
 * benefício, é uma posição de mercado.
 */
.heroi__selo--pioneiro {
  background: var(--azul-claro);
  border-color: #bfdbfe;
  color: var(--azul);
}

.heroi__selo--pioneiro .heroi__ponto {
  background: var(--azul-vivo);
}

/*
 * Reforço do pioneirismo.
 *
 * A primeira versão era uma caixa colorida com texto centralizado — e centralizar
 * três linhas com negrito no meio produz bordas irregulares e deixa a última
 * linha órfã. Pior: a caixa era um retângulo bege num hero limpo, e nada no
 * resto da página se parecia com ela.
 *
 * Agora o conteúdo vira o que ele sempre foi: dois lados e a ligação entre eles.
 * É a mesma figura do logo, o que dá à seção um motivo para existir ali.
 */
.elo-dois-lados {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(0.75rem, 2.5vw, 1.75rem);
  max-width: 44rem;
  margin: 2rem auto 0;
  padding: 1.25rem clamp(1rem, 3vw, 1.75rem);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  background: var(--fundo);
  box-shadow: var(--sombra);
}

@media (max-width: 640px) {
  .elo-dois-lados {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
}

.elo-lado {
  text-align: center;
}

.elo-lado__quem {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-2);
  margin-bottom: 0.15rem;
}

.elo-lado__oque {
  font-family: var(--titulo);
  font-size: clamp(0.9375rem, 1.8vw, 1.0625rem);
  font-weight: 700;
  color: var(--tinta);
  line-height: 1.25;
}

/* O nó: mesmo laço do logo, em escala pequena. */
.elo-no {
  display: grid;
  place-items: center;
  /* Em uma coluna o grid encosta o item à esquerda; sem isto o nó fica torto. */
  justify-self: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--laranja-claro);
  color: var(--laranja);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
}

@media (max-width: 640px) {
  .elo-no {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1.05rem;
  }
}

.elo-legenda {
  max-width: 44rem;
  margin: 0.85rem auto 0;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--texto-2);
}

.elo-legenda strong {
  color: var(--tinta);
}

.heroi__sub {
  max-width: 44rem;
  margin: 1.1rem auto 0;
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  color: var(--texto-2);
}

/* ---------- Busca ---------- */

/*
 * A caixa de busca é o elemento mais importante da página e ocupa o centro
 * óptico. É o que separa um marketplace de um site institucional: aqui a
 * primeira coisa que se faz é procurar alguém, não ler sobre a empresa.
 */
.busca {
  display: grid;
  grid-template-columns: 2fr 1.2fr auto;
  gap: 0.5rem;
  max-width: 54rem;
  margin: 2rem auto 0;
  padding: 0.55rem;
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-g);
  text-align: left;
}

@media (max-width: 780px) {
  .busca {
    grid-template-columns: 1fr;
  }
}

.busca__campo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.9rem;
  border-radius: var(--raio);
  background: var(--fundo-suave);
}

.busca__campo:focus-within {
  background: var(--azul-claro);
}

.busca__icone {
  flex-shrink: 0;
  color: var(--texto-2);
}

.busca__entrada {
  width: 100%;
  /* 44px é o piso de alvo de toque. O tráfego aqui vem de anúncio no celular:
     campo de busca difícil de acertar com o polegar é o funil vazando na
     primeira interação. */
  min-height: 44px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--tinta);
}

.busca__entrada:focus {
  outline: none;
}

.busca__entrada::placeholder {
  color: var(--texto-2);
}

.busca__rotulo {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-2);
  margin-bottom: 0.1rem;
}

.atalhos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.atalho {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4rem 0.95rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pilula);
  background: var(--fundo);
  color: var(--texto);
  font-size: 0.875rem;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.18s ease;
}

.atalho:hover {
  border-color: var(--azul-vivo);
  color: var(--azul-vivo);
  background: var(--azul-claro);
}

/* ---------- Números ---------- */

.numeros {
  padding-block: clamp(3rem, 6vw, 4.5rem);
  background: var(--fundo-suave);
  border-block: 1px solid var(--borda);
}

/*
 * Grade de fios de 1px.
 *
 * A coreografia das bordas é o detalhe que decide se a grade fica limpa ou com
 * linha dobrada: o contêiner segura a da esquerda e a de cima, cada célula segura
 * a da direita e a de baixo. No desktop, contêiner e células soltam as horizontais
 * e sobra uma única fileira riscada.
 */
.numeros__grade {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-left: 1px solid var(--borda);
  border-top: 1px solid var(--borda);
}

@media (min-width: 1024px) {
  .numeros__grade {
    grid-template-columns: repeat(4, 1fr);
    border-top: 0;
  }
}

.numero {
  position: relative;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border-right: 1px solid var(--borda);
  border-bottom: 1px solid var(--borda);
  overflow: hidden;
}

@media (min-width: 1024px) {
  .numero {
    border-bottom: 0;
  }
}

/* Tint discreto no hover: interatividade sem introduzir cor nova. */
.numero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.045);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.numero:hover::after {
  opacity: 1;
}

.numero__valor {
  font-family: var(--titulo);
  font-size: clamp(2.1rem, 4.4vw, 3.5rem);
  font-weight: 800;
  color: var(--azul);
  letter-spacing: -0.035em;
  line-height: 1;
  margin-bottom: 0.75rem;
  /* Sem isto o número dança de largura a cada quadro da contagem. */
  font-variant-numeric: tabular-nums;
}

.numero__rotulo {
  max-width: 13rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--texto-2);
}

/*
 * Entrada em desfoque. A célula sobe, ganha foco e escalona por posição — é o
 * mesmo movimento para as quatro, com atraso crescente, o que faz a fileira ser
 * lida da esquerda para a direita em vez de aparecer de uma vez.
 */
.numero {
  opacity: 0;
  transform: translateY(40px);
  filter: blur(10px);
  transition:
    opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.8s cubic-bezier(0.23, 1, 0.32, 1),
    filter 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.numero--visivel {
  opacity: 1;
  transform: none;
  filter: none;
}

/*
 * Quem pede menos movimento recebe o resultado, não a animação. O número final
 * já está no HTML; o script só assume quando a animação é bem-vinda.
 */
@media (prefers-reduced-motion: reduce) {
  .numero {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

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

.secao {
  padding-block: clamp(3rem, 6vw, 5rem);
}

.secao--suave {
  background: var(--fundo-suave);
}

.secao__cabecalho {
  max-width: 42rem;
  margin-bottom: 2.5rem;
}

.secao__cabecalho--centro {
  margin-inline: auto;
  text-align: center;
}

.secao__sobrancelha {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--laranja);
  margin-bottom: 0.6rem;
}

.secao__sub {
  margin-top: 0.75rem;
  font-size: 1.0625rem;
  color: var(--texto-2);
}

/* ---------- Categorias ---------- */

.categorias {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.75rem;
}

.categoria {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--fundo);
  color: var(--tinta);
  text-decoration: none;
  transition: all 0.18s ease;
}

.categoria:hover {
  border-color: var(--azul-vivo);
  box-shadow: var(--sombra-m);
  transform: translateY(-2px);
  text-decoration: none;
}

.categoria__icone {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 10px;
  background: var(--azul-claro);
  font-size: 1.15rem;
}

.categoria__nome {
  font-family: var(--titulo);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.25;
}

.categoria__contagem {
  font-size: 0.8125rem;
  color: var(--texto-2);
}

/* ---------- Cartão de profissional ---------- */

.grade-perfis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 1.1rem;
}

.perfil {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.35rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  background: var(--fundo);
  transition: all 0.18s ease;
}

.perfil:hover {
  box-shadow: var(--sombra-g);
  transform: translateY(-3px);
  border-color: #cbd5e1;
}

.perfil__topo {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}

/* Iniciais em vez de foto: são perfis inventados, e rosto de gente inventada
   num protótipo é o tipo de detalhe que vaza para uma apresentação real. */
.perfil__avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--azul);
  color: #ffffff;
  font-family: var(--titulo);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.perfil__nome {
  font-family: var(--titulo);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--tinta);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.perfil__area {
  font-size: 0.875rem;
  color: var(--texto-2);
}

.perfil__registro {
  font-size: 0.75rem;
  color: var(--texto-2);
  font-variant-numeric: tabular-nums;
}

.verificado {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.1rem 0.45rem;
  border-radius: var(--raio-pilula);
  background: var(--verde-claro);
  color: var(--verde);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.perfil__linha {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.875rem;
}

.nota {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 700;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

.nota__estrela {
  color: var(--amarelo-texto);
}

.nota__contagem {
  font-weight: 400;
  color: var(--texto-2);
}

.perfil__local {
  color: var(--texto-2);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.etiqueta {
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  background: var(--fundo-suave);
  border: 1px solid var(--borda);
  font-size: 0.75rem;
  color: var(--texto);
}

.perfil__rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--borda);
}

.perfil__preco {
  font-family: var(--titulo);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--tinta);
}

.perfil__preco span {
  font-family: var(--corpo);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--texto-2);
  display: block;
}

/* ---------- Como funciona ---------- */

.alternador {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.3rem;
  border-radius: var(--raio-pilula);
  background: var(--fundo-suave);
  border: 1px solid var(--borda);
  margin-inline: auto;
  margin-bottom: 2.5rem;
}

.alternador__botao {
  min-height: 44px;
  padding: 0.5rem 1.4rem;
  border: 0;
  border-radius: var(--raio-pilula);
  background: transparent;
  font-family: var(--corpo);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--texto-2);
  cursor: pointer;
  transition: all 0.18s ease;
}

.alternador__botao[aria-selected='true'] {
  background: var(--fundo);
  color: var(--azul);
  box-shadow: var(--sombra);
}

.passos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem;
  counter-reset: passo;
}

.passo {
  position: relative;
  padding-top: 3.25rem;
}

.passo::before {
  counter-increment: passo;
  content: counter(passo);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--laranja);
  color: #ffffff;
  font-family: var(--titulo);
  font-size: 1.05rem;
  font-weight: 800;
}

.passo h3 {
  margin-bottom: 0.4rem;
}

.passo p {
  color: var(--texto-2);
  font-size: 0.9375rem;
}

/* ---------- Dois lados ---------- */

.dois-lados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1.25rem;
}

.lado {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--raio-g);
  border: 1px solid var(--borda);
  background: var(--fundo);
}

.lado--destaque {
  background: var(--fundo-escuro);
  border-color: transparent;
  color: #cbd5e1;
}

.lado--destaque h3,
.lado--destaque .lado__titulo {
  color: #ffffff;
}

.lado--destaque .lado__item {
  color: #cbd5e1;
}

.lado__titulo {
  font-family: var(--titulo);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--tinta);
  letter-spacing: -0.02em;
}

.lado__lista {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.lado__item {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.9375rem;
  color: var(--texto);
}

.lado__marca {
  flex-shrink: 0;
  color: var(--verde);
  font-weight: 700;
}

.lado--destaque .lado__marca {
  color: #4ade80;
}

/* ---------- Busca: página de resultados ---------- */

.resultados {
  display: grid;
  grid-template-columns: 17rem 1fr;
  gap: 2rem;
  align-items: start;
  padding-block: 2rem 4rem;
}

@media (max-width: 900px) {
  .resultados {
    grid-template-columns: 1fr;
  }
}

.filtros {
  position: sticky;
  top: 6rem;
  padding: 1.35rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  background: var(--fundo);
}

@media (max-width: 900px) {
  .filtros {
    position: static;
  }
}

.filtro-grupo {
  padding-block: 1rem;
  border-top: 1px solid var(--borda);
}

.filtro-grupo:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.filtro-grupo__titulo {
  font-family: var(--titulo);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--texto-2);
  margin-bottom: 0.7rem;
}

.opcao {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 34px;
  font-size: 0.9375rem;
  color: var(--texto);
  cursor: pointer;
}

.opcao input {
  width: 17px;
  height: 17px;
  accent-color: var(--azul-vivo);
  cursor: pointer;
}

.campo-select {
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--fundo);
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--tinta);
}

.resultados__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.resultados__contagem {
  font-family: var(--titulo);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--tinta);
}

.vazio {
  padding: 3rem 1.5rem;
  text-align: center;
  border: 1px dashed var(--borda);
  border-radius: var(--raio-g);
  color: var(--texto-2);
}

/* ---------- CTA final ---------- */

.chamada {
  padding-block: clamp(3rem, 6vw, 4.5rem);
  background: var(--fundo-escuro);
  color: #cbd5e1;
  text-align: center;
}

.chamada h2 {
  color: #ffffff;
}

.chamada__sub {
  max-width: 38rem;
  margin: 0.9rem auto 2rem;
  color: #94a3b8;
}

.chamada__acoes {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.chamada .botao--vazado {
  background: transparent;
  border-color: #334155;
  color: #ffffff;
}

.chamada .botao--vazado:hover {
  border-color: #64748b;
  color: #ffffff;
}

/* ---------- Rodapé ---------- */

.rodape {
  padding-block: 2.5rem;
  background: var(--fundo-suave);
  border-top: 1px solid var(--borda);
  font-size: 0.875rem;
  color: var(--texto-2);
}

.rodape__grade {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.rodape__coluna h4 {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinta);
  margin-bottom: 0.6rem;
}

.rodape__coluna li {
  margin-bottom: 0.35rem;
}

.rodape__base {
  padding-top: 1.5rem;
  border-top: 1px solid var(--borda);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Painel-exemplo (as duas dobras) ---------- */

/*
 * Moldura de aplicativo em volta da grade.
 *
 * Sem ela, a lista de perfis parecia um catálogo público do site — e o objetivo é
 * outro: mostrar a tela que a pessoa vê DEPOIS de se cadastrar. A barra de título
 * é o que faz o olho entender "isto é um painel", antes de qualquer legenda.
 */
.painel-exemplo {
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  background: var(--fundo);
  box-shadow: var(--sombra-m);
  overflow: hidden;
}

.painel-exemplo__barra {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  background: var(--fundo-escuro);
  color: #cbd5e1;
  font-size: 0.8125rem;
}

/* Três pontos de janela: dizem "aplicativo" sem precisar de palavra alguma. */
.painel-exemplo__pontos {
  flex-shrink: 0;
  width: 2.6rem;
  height: 0.6rem;
  background:
    radial-gradient(circle 4px at 4px 50%, #64748b 98%, transparent),
    radial-gradient(circle 4px at 18px 50%, #64748b 98%, transparent),
    radial-gradient(circle 4px at 32px 50%, #64748b 98%, transparent);
}

.painel-exemplo__titulo {
  font-weight: 600;
  color: #ffffff;
}

/* A etiqueta acompanha a barra: quem olhar só a imagem já vê que é exemplo. */
.painel-exemplo__marca {
  margin-left: auto;
  flex-shrink: 0;
  padding: 0.15rem 0.6rem;
  border-radius: var(--raio-pilula);
  background: #fbbf24;
  color: #422006;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.painel-exemplo__corpo {
  padding: clamp(1rem, 2.5vw, 1.5rem);
  background: var(--fundo-suave);
}

.painel-exemplo__nota {
  margin-top: 1rem;
  padding: 0.85rem 1.1rem;
  border-left: 3px solid #fbbf24;
  border-radius: 0 var(--raio) var(--raio) 0;
  background: #fffbeb;
  font-size: 0.875rem;
  color: var(--texto);
}

.painel-exemplo__nota strong {
  color: var(--tinta);
}

/* ---------- Cartão de demanda ---------- */

/* No lugar das iniciais, o índice da empresa. Mesma moldura, outro conteúdo. */
.demanda__indice {
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}

.demanda__indice.faixa--critica {
  background: #9f1239;
}
.demanda__indice.faixa--alta {
  background: #9a3412;
}
.demanda__indice.faixa--moderada {
  background: #854d0e;
}

.faixa-texto--critica {
  color: #9f1239 !important;
  font-weight: 600;
}
.faixa-texto--alta {
  color: #9a3412 !important;
  font-weight: 600;
}
.faixa-texto--moderada {
  color: #854d0e !important;
  font-weight: 600;
}

.demanda__rotulo {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-2);
  margin-bottom: -0.35rem;
}

/* ---------- Primeira avaliação gratuita ---------- */

/*
 * Boa parte do mercado entra pela avaliação sem custo e fecha contrato depois.
 * O cartão precisa deixar isso visível em duas leituras diferentes: a etiqueta
 * no topo, para quem varre a grade com o olho, e o rodapé, para quem já parou
 * num cartão específico.
 *
 * Cor própria — nem o verde do "Verificado" (que atesta registro, outra coisa)
 * nem o turquesa cheio do botão (que é a ação). Turquesa sobre lavagem clara,
 * 5,25:1.
 */
.etiqueta-gratis {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.5rem;
  border-radius: var(--raio-pilula);
  background: var(--laranja-claro);
  border: 1px solid #99f6e4;
  color: var(--laranja);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/*
 * No rodapé, "grátis" ocupa a linha do preço e o valor desce para a linha de
 * apoio. É a ordem em que a decisão acontece: primeiro se aceita a conversa sem
 * custo, o orçamento vem depois.
 */
.perfil__gratis {
  display: block;
  font-family: var(--titulo);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--laranja);
}

/* ---------- Faixa "100% grátis" ---------- */

/*
 * A gratuidade é a objeção que se derruba antes de qualquer outra, e vale para
 * os DOIS lados — coisa que quase nenhum marketplace pode dizer. Por isso ganha
 * faixa inteira logo depois da busca, em vez de virar mais um item de lista lá
 * embaixo.
 *
 * Fundo turquesa cheio: é a única seção da página com a cor de ação preenchendo
 * a largura toda, o que a torna impossível de pular ao rolar.
 */
.faixa-gratis {
  background: var(--laranja);
  color: #ffffff;
  padding-block: clamp(1.5rem, 3.5vw, 2.25rem);
}

.faixa-gratis__interno {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 4vw, 2.5rem);
}

@media (max-width: 780px) {
  .faixa-gratis__interno {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

/* O selo é lido como número, não como frase: "100%" grande, "grátis" embaixo. */
.faixa-gratis__selo {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  padding: 0.9rem 1.25rem;
  border-radius: var(--raio-g);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
}

.faixa-gratis__numero {
  font-family: var(--titulo);
  font-size: clamp(1.8rem, 3.6vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.faixa-gratis__palavra {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.faixa-gratis__titulo {
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.6rem;
}

.faixa-gratis__lados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.6rem 2rem;
}

.faixa-gratis__lado {
  font-size: 0.9375rem;
  /*
   * Branco a 95%, não a 90%: sobre o turquesa, 90% cai para 4,75:1 — passa a AA
   * por pouco, e "por pouco" some no primeiro monitor mal calibrado. A 95% dá
   * 5,12:1 e a hierarquia com o título continua de pé.
   */
  color: rgba(255, 255, 255, 0.95);
}

.faixa-gratis__lado strong {
  display: block;
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.1rem;
}

/* ---------- Formulários (cadastro, login, demanda) ---------- */

.formulario {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.formulario__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0 1.25rem;
}

.campo {
  display: block;
  margin-bottom: 0.9rem;
}

.campo__rotulo {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--titulo);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--tinta);
}

.campo__opcional {
  font-family: var(--corpo);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--texto-2);
}

.campo__entrada {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--fundo);
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--tinta);
}

.campo__entrada:hover {
  border-color: #cbd5e1;
}

.campo__entrada:focus {
  outline: 2px solid var(--azul-vivo);
  outline-offset: 1px;
  border-color: var(--azul-vivo);
}

.campo__entrada[aria-invalid='true'] {
  border-color: #b91c1c;
}

textarea.campo__entrada {
  min-height: 5rem;
  resize: vertical;
}

/*
 * A mensagem de erro reserva a própria altura. Sem isto, o texto aparecendo
 * empurra o campo seguinte e a pessoa clica no lugar errado.
 */
.campo__erro {
  display: block;
  min-height: 1.15rem;
  margin-top: 0.2rem;
  font-size: 0.8125rem;
  color: #b91c1c;
}

.grupo {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 1rem 1.1rem;
  margin: 0.5rem 0 0;
}

.aviso-formulario {
  padding: 0.9rem 1.15rem;
  border-radius: var(--raio);
  border-left: 3px solid var(--texto-2);
  background: var(--fundo-suave);
  font-size: 0.9375rem;
  margin-bottom: 1.5rem;
}

.aviso-formulario--sucesso {
  border-left-color: var(--verde);
  background: var(--verde-claro);
  color: #14532d;
}

.aviso-formulario--erro {
  border-left-color: #b91c1c;
  background: #fef2f2;
  color: #7f1d1d;
}

.aviso-formulario--atencao {
  border-left-color: #b45309;
  background: #fffbeb;
  color: #78350f;
}

/* ---------- Painel ---------- */

.bloco-publicar {
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  background: var(--fundo);
  padding: 1.1rem 1.35rem;
}

.bloco-publicar summary {
  font-family: var(--titulo);
  font-weight: 700;
  color: var(--laranja);
  cursor: pointer;
  min-height: 32px;
}

.proposta {
  margin-top: 0.85rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--fundo-suave);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.proposta--aceita {
  border-color: var(--verde);
  background: var(--verde-claro);
}

.proposta--recusada {
  opacity: 0.62;
}

.proposta__topo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.contato-liberado {
  padding: 0.75rem 0.9rem;
  border-radius: var(--raio);
  background: var(--fundo);
  border: 1px solid var(--verde);
}

.proposta-forma {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--borda);
}

.proposta-forma__linha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

/* Dica abaixo do campo: explica a regra sem virar mais um erro em vermelho. */
.campo__dica {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--texto-2);
}

/* ============================================================ RADAR ======
 *
 * Os dois status do universo povoado não podem parecer a mesma coisa.
 *
 * 'oportunidade' é empresa que nunca pediu nada: dado público, prospecção
 * fria. 'demanda' é quem manifestou interesse. Se a tela tratar as duas
 * igual, o implementador liga para quem não pediu, é rejeitado e some.
 *
 * A distinção é feita por três meios ao mesmo tempo — cor, rótulo e posição —
 * porque cor sozinha não chega a quem não a distingue.
 */

/*
 * Antes era âmbar de alerta (#d97706 / #fffbeb) — lia como placa de cuidado, e
 * o texto por baixo tinha o mesmo tom defensivo. Trocado pelo verde-água da
 * própria marca: é a mesma cor do selo "Pediu contato" e do botão de ação, o
 * que sinaliza "isto é o produto funcionando", não "atenção, problema".
 */
.aviso-frio {
  border: 1px solid #99f6e4;
  border-left: 4px solid var(--laranja);
  background: var(--laranja-claro);
  /* #115e59 sobre #f0fdfa rende 7,27:1 — folga confortável acima do mínimo. */
  color: #115e59;
  padding: 1rem 1.15rem;
  border-radius: 0.5rem;
  font-size: 0.94rem;
  line-height: 1.55;
  margin: 1.25rem 0 1.5rem;
}

.filtros-radar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: flex-end;
  margin-bottom: 1.25rem;
}

.campo--estreito { max-width: 12rem; flex: 1 1 9rem; }

.radar-contagem {
  color: var(--texto-2);
  font-size: 0.9rem;
  margin: 0 0 0.9rem;
}

.cartao-org {
  border: 1px solid var(--borda);
  border-left: 4px solid var(--texto-2);
  border-radius: 0.55rem;
  padding: 0.95rem 1.1rem;
  margin-bottom: 0.7rem;
  background: var(--fundo);
}

/* Fria: barra cinza, fundo branco — deliberadamente sem destaque nenhum. */
.cartao-org--oportunidade { border-left-color: #94a3b8; }

/* Quente: barra turquesa da marca e fundo próprio. Chama o olho, e deve. */
.cartao-org--demanda {
  border-left-color: var(--laranja);
  background: var(--laranja-claro);
}

.cartao-org__topo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: baseline;
  justify-content: space-between;
}

.cartao-org__nome {
  font-weight: 650;
  color: var(--tinta);
  margin: 0;
  font-size: 1rem;
}

.cartao-org__meta {
  color: var(--texto-2);
  font-size: 0.87rem;
  margin: 0.35rem 0 0;
}

.cartao-org__fonte {
  color: var(--texto-2);
  font-size: 0.8rem;
  margin: 0.5rem 0 0;
}

.cartao-org__fonte a { color: var(--azul-vivo); }

/* Contraste checado: b45309 sobre fffbeb rende 4,84:1 — passa AA para texto normal. */
.cartao-org__interesse {
  display: inline-flex;
  align-items: center;
  margin-top: 0.6rem;
  padding: 0.3rem 0.65rem;
  border-radius: var(--raio-pilula);
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: var(--amarelo-texto);
  font-size: 0.78rem;
  font-weight: 600;
}

/*
 * O selo carrega o texto inteiro, não uma cor com legenda em outro lugar.
 * Quem chega direto no cartão precisa entender sem procurar a legenda.
 */
.selo-origem {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}

.selo-origem--oportunidade {
  background: #f1f5f9;
  color: #475569;      /* 7,4:1 sobre #f1f5f9 */
  border: 1px solid #cbd5e1;
}

.selo-origem--demanda {
  background: var(--laranja);
  color: #ffffff;      /* 5,47:1, o mesmo par já usado nos botões */
}

.lista-simples {
  margin: 0.75rem 0 1.25rem;
  padding-left: 1.15rem;
  color: var(--texto);
  line-height: 1.65;
}

.lista-simples li { margin-bottom: 0.45rem; }

/* ==================================================== GESTÃO DE CONTATO ===
 *
 * O radar sozinho vira ruído acima de algumas dezenas de linhas: o
 * implementador perde a linha do que já tentou e liga duas vezes para a
 * mesma empresa, ou esquece quem falta. Este controle é pessoal — a marcação
 * de um implementador nunca aparece para outro.
 */

.status-contato {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.65rem;
}

.status-contato__botao {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.3rem 0.65rem;
  border-radius: var(--raio-pilula);
  border: 1px solid var(--borda);
  background: var(--fundo);
  color: var(--texto-2);
  cursor: pointer;
}

.status-contato__botao:hover { border-color: var(--texto-2); }
.status-contato__botao:disabled { opacity: 0.6; cursor: wait; }

.status-contato__botao--ativa[data-situacao="nao_contatada"] {
  background: var(--fundo-suave);
  border-color: var(--texto-2);
  color: var(--tinta);
}

.status-contato__botao--ativa[data-situacao="contatada"] {
  background: var(--azul-claro);
  border-color: var(--azul-vivo);
  color: var(--azul-vivo);
}

.status-contato__botao--ativa[data-situacao="proposta_enviada"] {
  background: var(--verde-claro);
  border-color: var(--verde);
  color: var(--verde);
}

.status-contato__botao--ativa[data-situacao="sem_interesse"] {
  background: #fef2f2;
  border-color: #b91c1c;
  color: #b91c1c;
}

/* Nome e cargo do responsável — o dado que falta para endereçar o e-mail. */
.cartao-org__responsavel {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--tinta);
  margin: 0.5rem 0 0;
}

.cartao-org__responsavel span {
  font-weight: 400;
  color: var(--texto-2);
}

/* ===================================================================== ABAS
 *
 * Nunca tiveram regra própria — renderizavam com o botão cru do navegador,
 * cada uma uma caixa cinza igual à outra. Redesenhadas como o trilho de
 * pílulas que o resto do site já usa (.alternador, em entrar.html), com uma
 * diferença: o Radar não é mais "mais uma aba". É a porta de entrada do
 * implementador, e carrega cor própria mesmo quando não está selecionado —
 * para se destacar das outras duas mesmo antes do clique.
 */

.abas {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.3rem;
  border-radius: var(--raio-pilula);
  background: var(--fundo-suave);
  border: 1px solid var(--borda);
  margin-bottom: 1.75rem;
}

.aba {
  min-height: 42px;
  padding: 0.5rem 1.25rem;
  border: 0;
  border-radius: var(--raio-pilula);
  background: transparent;
  font-family: var(--corpo);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--texto-2);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

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

.aba--ativa {
  background: var(--fundo);
  color: var(--azul);
  box-shadow: var(--sombra);
}

/* Em repouso, já puxa o verde-água da marca — não espera o clique para
   dizer "comece por aqui". */
.aba--radar {
  color: var(--laranja-escuro);
}

.aba--radar:hover { color: var(--laranja-escuro); }

.aba--radar.aba--ativa {
  /* #ffffff sobre var(--laranja) rende 5,47:1 — passa com folga. */
  background: var(--laranja);
  color: #ffffff;
  box-shadow: var(--sombra-m);
}