/* =============================================================
   BuscaDev — folha de estilo única (S07/S10/S11)
   Mobile-first · Flexbox · unidades fluidas · sem !important
   ============================================================= */

/* -------------------------------------------------- 1. tokens (tema claro) */
:root {
  --tinta: #151726;
  --tinta-suave: #5b5f78;
  --papel: #eef0f6;
  --superficie: #ffffff;
  --borda: #d9dde9;

  --sinal: #5546ff; /* acento da marca */
  --sinal-fraco: #eceaff;
  --tem: #0e9a86; /* habilidade que você tem */
  --falta: #d6455f; /* habilidade que falta */
  --atencao: #b8730a;

  --raio: 12px;
  --raio-pequeno: 999px;
  --sombra: 0 1px 2px rgb(21 23 38 / 6%), 0 12px 28px rgb(21 23 38 / 6%);
  --transicao: 160ms ease;

  --fonte-display: "Space Grotesk", system-ui, sans-serif;
  --fonte-texto: "IBM Plex Sans", system-ui, sans-serif;
  --fonte-dado: "IBM Plex Mono", ui-monospace, monospace;
}

/* -------------------------------------------------- 2. tema escuro (bônus) */
[data-tema="escuro"] {
  --tinta: #eef0f6;
  --tinta-suave: #a2a8c2;
  --papel: #0e0f18;
  --superficie: #191b2b;
  --borda: #2c2f45;

  --sinal: #8f83ff;
  --sinal-fraco: #262445;
  --tem: #34c9ac;
  --falta: #ff7b8f;
  --atencao: #f0b45c;
  --sombra: 0 1px 2px rgb(0 0 0 / 40%), 0 12px 28px rgb(0 0 0 / 30%);
}

/* ---------------------------------------------------------- 3. fundações */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-size: 1rem;
  line-height: 1.55;
}

h1,
h2,
h3,
h4 {
  font-family: var(--fonte-display);
  line-height: 1.15;
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

:focus-visible {
  outline: 3px solid var(--sinal);
  outline-offset: 2px;
}

.pular {
  position: absolute;
  left: -999px;
}

.pular:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  padding: 0.5rem 1rem;
  border-radius: var(--raio);
  background-color: var(--superficie);
  color: var(--tinta);
}

/* ------------------------------------------------------------- 4. topo */
.topo {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 1rem clamp(1rem, 4vw, 3rem);
  border-bottom: 1px solid var(--borda);
  background-color: var(--superficie);
}

.topo__marca {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.topo__logo {
  width: 40px;
  height: 40px;
}

.topo__texto {
  display: flex;
  flex-direction: column;
}

/* Nome da marca: usa a fonte de display, herdando as cores do tema. */
.topo__nome {
  margin: 0;
  color: var(--tinta);
  font-family: var(--fonte-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

/* A segunda metade do nome recebe o acento da marca — muda junto com o tema. */
.topo__nome-destaque {
  color: var(--tem);
}

.topo__tagline {
  margin: 0.1rem 0 0;
  color: var(--tinta-suave);
  font-family: var(--fonte-dado);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
}

.topo__nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.topo__links {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.topo__links a {
  color: var(--tinta);
  font-size: 0.9rem;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.topo__links a:hover {
  border-bottom-color: var(--sinal);
}

/* --------------------------------------------------------- 5. conteúdo */
.conteudo {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 3rem) clamp(1rem, 4vw, 3rem);
}

.aviso-protocolo {
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 2px solid var(--falta);
  border-radius: var(--raio);
  background-color: color-mix(in srgb, var(--falta) 8%, var(--superficie));
}

.aviso-protocolo__titulo {
  margin-bottom: 0.5rem;
  color: var(--falta);
  font-size: 1.1rem;
}

.aviso-protocolo p {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
}

.aviso-protocolo code {
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  background-color: var(--papel);
  font-family: var(--fonte-dado);
  font-size: 0.85em;
}

.titulo {
  max-width: 26ch;
  font-size: clamp(1.6rem, 5.5vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/*
  A segunda linha vem um pouco menor: com duas frases inteiras no mesmo corpo,
  o h1 tomaria meia tela no celular. Menor e em roxo, ela lê como continuação
  da primeira, não como um segundo título competindo com ela.
*/
.titulo__enfase {
  display: block;
  margin-top: 0.35rem;
  color: var(--sinal);
  font-size: 0.72em;
  line-height: 1.2;
}

/* ------------------------------------------------------- 6. formulário */
.painel {
  padding: clamp(1.25rem, 4vw, 2rem);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background-color: var(--superficie);
  box-shadow: var(--sombra);
}

.painel__titulo {
  font-size: 1.25rem;
}

.painel__ajuda {
  margin: 0.35rem 0 1.25rem;
  color: var(--tinta-suave);
  font-size: 0.875rem;
}

.form {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1 1 100%;
}

.campo__rotulo,
.controle__rotulo {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.campo__entrada {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background-color: var(--papel);
  color: var(--tinta);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color var(--transicao);
}

.campo__entrada:hover {
  border-color: var(--sinal);
}

.campo__entrada--invalida {
  border-color: var(--falta);
  background-color: color-mix(in srgb, var(--falta) 8%, var(--superficie));
}

.campo__ajuda {
  margin: 0;
  color: var(--tinta-suave);
  font-size: 0.8rem;
}

.campo__erro {
  margin: 0;
  min-height: 1.1rem;
  color: var(--falta);
  font-size: 0.8rem;
  font-weight: 600;
}

.sugestoes {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--borda);
}

.sugestoes__rotulo {
  margin: 0 0 0.5rem;
  color: var(--tinta-suave);
  font-size: 0.8rem;
}

.sugestoes__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.form__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  flex: 1 1 100%;
}

/* ---------------------------------------------------------- 7. botões */
.botao {
  padding: 0.7rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--raio);
  font-family: var(--fonte-texto);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--transicao), background-color var(--transicao);
}

.botao:active {
  transform: translateY(1px);
}

.botao--principal {
  background-color: var(--sinal);
  color: #ffffff;
}

.botao--principal:hover {
  background-color: color-mix(in srgb, var(--sinal) 85%, #000000);
}

.botao--fantasma {
  border-color: var(--borda);
  background-color: transparent;
  color: var(--tinta);
}

.botao--fantasma:hover {
  border-color: var(--sinal);
  color: var(--sinal);
}

/* -------------------------------------------- 8. estados do carregamento */
.cabecalho-resultados {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.controles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

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

.estado {
  margin: 0;
  padding: 1rem 1.15rem;
  border: 1px dashed var(--borda);
  border-radius: var(--raio);
  background-color: var(--superficie);
  color: var(--tinta-suave);
  font-size: 0.95rem;
}

.estado--carregando {
  border-style: solid;
  border-color: var(--sinal);
  color: var(--sinal);
}

.estado--erro {
  border-style: solid;
  border-color: var(--falta);
  color: var(--falta);
}

/* --------------------------------------------------------- 9. destaque */
.destaque {
  padding: clamp(1.25rem, 4vw, 2rem);
  border-radius: var(--raio);
  background-color: var(--sinal-fraco);
  border: 1px solid var(--sinal);
}

.destaque__titulo {
  font-size: clamp(1.25rem, 4vw, 1.6rem);
}

.destaque__frase {
  margin: 0.5rem 0 1.25rem;
  font-size: 1.05rem;
}

.destaque__rotulo {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.destaque__plano {
  margin: 0.5rem 0 0;
  padding-left: 1.2rem;
  font-family: var(--fonte-dado);
  font-size: 0.9rem;
}

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

/* ------------------------------------------------------------ 10. cards */
.vagas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  flex: 1 1 100%;
  padding: 1.25rem;
  border: 1px solid var(--borda);
  border-left: 4px solid var(--borda);
  border-radius: var(--raio);
  background-color: var(--superficie);
  box-shadow: var(--sombra);
}

.card--alta {
  border-left-color: var(--tem);
}

.card--media {
  border-left-color: var(--atencao);
}

.card--baixa {
  border-left-color: var(--falta);
}

.card--melhor {
  outline: 2px solid var(--sinal);
}

.card__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
}

.card__empresa {
  flex: 1 1 100%;
  margin: 0;
  color: var(--tinta-suave);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.card__cargo {
  flex: 1 1 60%;
  font-size: 1.1rem;
}

.card__percentual {
  margin: 0;
  font-family: var(--fonte-dado);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;
}

.card__simbolo {
  font-size: 1rem;
  color: var(--tinta-suave);
}

.selo {
  flex: 0 0 auto;
  padding: 0.2rem 0.6rem;
  border-radius: var(--raio-pequeno);
  font-size: 0.75rem;
  font-weight: 600;
}

.selo--alta {
  background-color: color-mix(in srgb, var(--tem) 15%, transparent);
  color: var(--tem);
}

.selo--media {
  background-color: color-mix(in srgb, var(--atencao) 15%, transparent);
  color: var(--atencao);
}

.selo--baixa {
  background-color: color-mix(in srgb, var(--falta) 15%, transparent);
  color: var(--falta);
}

.selo--area {
  background-color: color-mix(in srgb, var(--sinal) 15%, transparent);
  color: var(--sinal);
}

/* Elemento-assinatura: um bloco por requisito. Cheio = você tem. Largo = fundamento (peso 2). */
.medidor {
  display: flex;
  gap: 3px;
  height: 14px;
}

.medidor__bloco {
  flex: 1 1 0;
  border: 1px solid var(--borda);
  border-radius: 3px;
  background-color: transparent;
}

.medidor__bloco--cheio {
  border-color: var(--sinal);
  background-color: var(--sinal);
}

.medidor__bloco--fundamento {
  border-style: solid;
  border-width: 2px;
}

.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--tinta-suave);
  font-family: var(--fonte-dado);
  font-size: 0.8rem;
}

.card__bloco {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.card__rotulo {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.card__aviso {
  margin: 0;
  color: var(--atencao);
  font-size: 0.85rem;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip {
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
  font-size: 0.8rem;
}

.chip--tem {
  border-color: var(--tem);
  color: var(--tem);
}

.chip--falta {
  border-color: var(--falta);
  color: var(--falta);
}

.chip--neutro {
  color: var(--tinta-suave);
}

.chip--acao {
  background-color: transparent;
  color: var(--tinta-suave);
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--transicao), color var(--transicao);
}

.chip--acao:hover {
  border-color: var(--sinal);
  color: var(--sinal);
}

.contador {
  margin: 1.25rem 0 0;
  color: var(--tinta-suave);
  font-family: var(--fonte-dado);
  font-size: 0.8rem;
}

/* ----------------------------------------------------------- 11. rodapé */
.rodape {
  padding: 2rem clamp(1rem, 4vw, 3rem);
  border-top: 1px solid var(--borda);
  color: var(--tinta-suave);
  font-size: 0.85rem;
}

.rodape__creditos {
  margin: 0;
}

.rodape__contato {
  color: var(--tinta-suave);
  text-decoration: none;
  border-bottom: 1px solid var(--borda);
  transition: color var(--transicao), border-color var(--transicao);
}

.rodape__contato:hover {
  color: var(--sinal);
  border-bottom-color: var(--sinal);
}

/* ------------------------------------- 12. breakpoints (tablet e desktop) */
@media (min-width: 40rem) {
  .campo {
    flex: 1 1 calc(50% - 0.5rem);
  }

  .campo--largo {
    flex: 1 1 100%;
  }

  .card {
    flex: 1 1 calc(50% - 0.5rem);
  }
}

@media (min-width: 64rem) {
  .card {
    flex: 1 1 calc(33.333% - 0.67rem);
  }
}

/* ------------------------------------------- 13. preferências do usuário */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0ms;
    animation-duration: 0ms;
  }
}